/* ============================================================
   Coopealianza Savings Calculator – Frontend CSS
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cabin:wght@400;500;600;700&display=swap');

:root {
    --crsc-turquesa:   #40C1AC;
    --crsc-azul:       #005EB8;
    --crsc-celeste:    #00A9E0;
    --crsc-azul-dark:  #003F8A;
    --crsc-gris-bg:    #f4f6f8;
    --crsc-gris-borde: #e0e6ed;
    --crsc-blanco:     #ffffff;
    --crsc-fuente:     'Cabin', sans-serif;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.crsc-wrapper {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0 0 24px;
    font-family: var(--crsc-fuente);
}

/* ── Contenedor principal ─────────────────────────────────── */
.crsc-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 420px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(0,94,184,0.13);
}

/* ════════════════════════════════════════════════════════════
   PANEL IZQUIERDO – FORMULARIO
   ════════════════════════════════════════════════════════════ */
.crsc-form-panel {
    width: 50%;
    min-width: 280px;
    background-color: var(--crsc-turquesa);
    padding: 32px 36px 32px 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Fila campo ──────────────────────────────────────────── */
.crsc-field-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

/* Icono PNG */
.crsc-field-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 22px;
}

.crsc-field-icon img,
.crsc-field-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
}

.crsc-field-body { flex: 1; min-width: 0; }

/* ── Labels ─────────────────────────────────────────────── */
.crsc-label-txt {
    display: block;
    font-size: 14px;          /* más grande que antes */
    font-weight: 600;
    color: var(--crsc-blanco);
    margin-bottom: 7px;
    letter-spacing: 0.2px;
}

/* ── Select ─────────────────────────────────────────────── */
.crsc-select-wrap { position: relative; }

.crsc-sel {
    width: 100%;
    padding: 12px 36px 12px 16px;
    border: none;
    border-radius: 30px;
    font-size: 14px;
    font-family: var(--crsc-fuente);
    font-weight: 500;
    color: var(--crsc-celeste);
    background: var(--crsc-blanco);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: box-shadow 0.2s;
}

.crsc-sel:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,0.5); }
.crsc-sel:disabled { opacity: 0.55; cursor: not-allowed; }

.crsc-sel-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    color: var(--crsc-celeste);
    font-size: 18px;
    pointer-events: none;
    line-height: 1;
}

/* ── Term select (mismo estilo que los otros selects) ─────── */
/* Hereda de .crsc-sel — no se necesita CSS adicional */

/* ── Input monto: totalmente redondeado, sin borde ─────────── */
.crsc-inp {
    width: 100%;
    padding: 12px 18px;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 50px !important;
    font-size: 14px;
    font-family: var(--crsc-fuente);
    font-weight: 500;
    color: var(--crsc-celeste);
    background: var(--crsc-blanco);
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow 0.2s;
}
.crsc-inp:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.5) !important; }
.crsc-inp::placeholder { color: #aad6e8; font-weight: 400; }

/* ── Botón Calcular ─────────────────────────────────────── */
.crsc-btn-calc {
    width: 100%;
    margin-top: auto;
    padding: 14px;
    border: none;
    border-radius: 30px;
    background: var(--crsc-azul);
    color: var(--crsc-blanco);
    font-size: 16px;
    font-weight: 700;
    font-family: var(--crsc-fuente);
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.25s, transform 0.15s;
}
.crsc-btn-calc:hover  { background: var(--crsc-azul-dark); transform: translateY(-2px); }
.crsc-btn-calc:active { transform: translateY(0); }

/* ════════════════════════════════════════════════════════════
   PANEL DERECHO – RESULTADOS
   ════════════════════════════════════════════════════════════ */
.crsc-result-panel {
    width: 50%;
    min-width: 280px;
    background: var(--crsc-gris-bg);
    padding: 28px 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Placeholder */
.crsc-placeholder {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 12px; padding: 20px;
    text-align: center; color: #8eadc8;
}
.crsc-placeholder p { font-size: 13px; line-height: 1.6; margin: 0; }

/* ── Tarjetas de resultado (valores más grandes) ─────────── */
.crsc-card {
    background: var(--crsc-blanco);
    border-radius: 14px;
    padding: 14px 20px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px rgba(0,94,184,0.07);
}

.crsc-card-accent   { border-left: 4px solid var(--crsc-celeste); }
.crsc-card-total    { border-left-color: var(--crsc-azul); }

.crsc-card-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--crsc-celeste);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}

.crsc-card-value {
    font-size: 24px;        /* más grande */
    font-weight: 700;
    color: var(--crsc-azul);
    line-height: 1.2;
}

.crsc-val-interest { color: #007672; }

.crsc-val-total {
    font-size: 28px;        /* más grande que el resto */
    color: var(--crsc-azul);
}

/* ── Disclaimer: texto gris simple, sin caja naranja ────── */
.crsc-disclaimer {
    font-size: 11px;
    color: #888;
    line-height: 1.6;
    text-align: left;
    margin-top: 14px;
    padding: 0;
    background: none;
    border: none;
}

/* ── Loader ─────────────────────────────────────────────── */
.crsc-loader { text-align: center; padding: 30px; }
.crsc-spin {
    width: 36px; height: 36px;
    border: 3px solid var(--crsc-gris-borde);
    border-top-color: var(--crsc-azul);
    border-radius: 50%;
    animation: crsc-spin 0.7s linear infinite;
    margin: 0 auto;
}
@keyframes crsc-spin { to { transform: rotate(360deg); } }

/* ── Alerta flotante ────────────────────────────────────── */
.crsc-front-alert {
    position: fixed; top: 20px; right: 20px;
    background: #fff3cd; color: #856404;
    border: 1px solid #ffc107; border-radius: 8px;
    padding: 10px 18px; font-size: 13px;
    font-family: var(--crsc-fuente);
    z-index: 999999; box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    max-width: 300px;
}

/* ── Shake ──────────────────────────────────────────────── */
.crsc-shake { animation: crsc-shake 0.4s ease; }
@keyframes crsc-shake {
    0%,100% { transform: translateX(0); }
    20%,60%  { transform: translateX(-5px); }
    40%,80%  { transform: translateX(5px); }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE – MOBILE FIRST
   ════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .crsc-container {
        flex-direction: column;
        border-radius: 14px;
        min-height: unset;
    }

    .crsc-form-panel,
    .crsc-result-panel {
        width: 100% !important;
        min-width: unset;
        padding: 24px 18px;
    }

    .crsc-form-panel { border-radius: 14px 14px 0 0; }
    .crsc-result-panel { border-radius: 0 0 14px 14px; }

    .crsc-field-row { gap: 10px; }
    .crsc-field-icon { width: 32px; height: 32px; margin-top: 20px; }
    .crsc-field-icon img { width: 28px; height: 28px; }
    .crsc-label-txt { font-size: 13px; }

    .crsc-card-value  { font-size: 20px; }
    .crsc-val-total   { font-size: 24px; }

    .crsc-result-panel { justify-content: flex-start; }
}

@media (max-width: 400px) {
    .crsc-form-panel { padding: 20px 14px; }
    .crsc-result-panel { padding: 20px 14px; }
    .crsc-btn-calc { font-size: 15px; }
}