/* ==========================================
   Interés Compuesto · CoinScanX
   Rediseño Bento · Version: 2.0
   Paleta: naranja #ff6600/#ff9933, crema #fffdf7/#fff8e1,
   verde #00a651, azul #1d4380, texto #1d1d1f.
   ========================================== */

/* ===== Formulario ===== */
#interes_compuesto_form {
    max-width: 720px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #ffe0b2;
    border-radius: 16px;
    padding: 22px 24px;
    box-shadow: 0 6px 22px rgba(255, 153, 51, 0.12);
    box-sizing: border-box;
}
#interes_compuesto_form * { box-sizing: border-box; }

#interes_compuesto_form label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #5f5f63;
    margin-bottom: 7px;
    line-height: 1.45;
}

#interes_compuesto_form .tml-field {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
    font-weight: 600;
    background-color: #fffdf7 !important;
    color: #1d1d1f !important;
    border: 1.5px solid #ffe0b2;
    border-radius: 11px;
    box-sizing: border-box;
    margin-bottom: 16px;
    font-family: inherit;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
#interes_compuesto_form .tml-field:last-of-type { margin-bottom: 0; }

#interes_compuesto_form .tml-field:focus {
    border-color: #ff9933;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.15);
}

/* ===== Errores ===== */
.error {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c0392b !important;
    padding: 13px 16px;
    background-color: #fdeaeb;
    border: 1px solid #f5c2c5;
    border-radius: 12px;
    margin: 16px auto 0;
    max-width: 720px;
    font-size: 13px;
    font-weight: 600;
    box-sizing: border-box;
}

/* ===== Indicador de carga ===== */
.loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 36px 0;
}
.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 153, 51, 0.18);
    border-radius: 50%;
    border-top-color: #ff6600;
    animation: csx-spin 0.9s linear infinite;
}
@keyframes csx-spin {
    to { transform: rotate(360deg); }
}

/* ===== Dashboard de resultados ===== */
.resultado-dashboard {
    max-width: 720px;
    margin: 22px auto 0;
    box-sizing: border-box;
    animation: csx-fade-up 0.5s ease both;
}
@keyframes csx-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Cabecera del dashboard */
.dashboard-header {
    text-align: center;
    margin-bottom: 18px;
}
.dashboard-header h3 {
    font-size: 19px;
    font-weight: 800;
    color: #1d1d1f;
    margin: 0 0 5px;
    letter-spacing: -0.3px;
}
.dashboard-header h3:before {
    content: "Resultados de la proyección";
    display: block;
    font-size: 10px;
    color: #ff6600;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.dashboard-header p {
    font-size: 13px;
    color: #86868b;
    line-height: 1.55;
    margin: 0;
}

/* ===== Tarjetas de estadísticas ===== */
.stats-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
    margin-bottom: 14px;
}

.stat-card {
    background: #fffdf7;
    border: 1px solid #ffe0b2;
    border-radius: 12px;
    padding: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: csx-fade-up 0.5s ease both;
}
.stat-card:nth-child(1) { animation-delay: 0.05s; }
.stat-card:nth-child(2) { animation-delay: 0.10s; }
.stat-card:nth-child(3) { animation-delay: 0.15s; }
.stat-card:nth-child(4) { animation-delay: 0.20s; }
.stat-card:nth-child(5) { animation-delay: 0.25s; }

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(255, 106, 0, 0.1);
}

/* La 2ª tarjeta (Ganancia) en verde, la 3ª (Total) en crema-naranja */
.stat-card:nth-child(2) { background: #e3f9ec; border-color: #b8e0c5; }
.stat-card:nth-child(3) { background: #fff8e1; border-color: #ffd699; }
/* La 5ª (Riesgo) ocupa ancho completo, en horizontal */
.stat-card:nth-child(5) {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-card .stat-label {
    font-size: 9px;
    color: #86868b;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.stat-card:nth-child(2) .stat-label { color: #00873d; }
.stat-card:nth-child(3) .stat-label { color: #c47e00; }
.stat-card:nth-child(5) .stat-label { margin-bottom: 0; }

.stat-card .stat-value {
    font-size: 19px;
    font-weight: 800;
    color: #1d1d1f;
    margin: 0;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.stat-card:nth-child(2) .stat-value { color: #00873d; }
.stat-card:nth-child(3) .stat-value { color: #ff6600; }

/* ===== Indicadores de riesgo ===== */
.risk-indicator {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 12px;
}
.risk-low {
    background-color: #e3f9ec;
    color: #00a651;
}
.risk-medium {
    background-color: #fff3e0;
    color: #ff9500;
}
.risk-high {
    background-color: #fdeaeb;
    color: #e63946;
}

/* ===== Gráfico ===== */
.chart-container {
    background: #ffffff;
    border: 1px solid #ffe0b2;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 14px;
    box-sizing: border-box;
}
.chart-container .chart-canvas-wrap {
    position: relative;
    height: 300px;
    width: 100%;
}
.chart-container canvas {
    position: relative;
}
.chart-title {
    font-size: 13px;
    font-weight: 700;
    color: #1d1d1f;
    margin-bottom: 14px;
}

/* ===== Tabla de resultados (Opción 4: filas alternas) ===== */
.resultado-tabla-container {
    width: 100%;
    border: 1px solid #ffe0b2;
    border-radius: 16px;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 14px;
}

.resultado-tabla {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    border: none;
}

.resultado-tabla thead tr {
    background: transparent;
}
.resultado-tabla th {
    background: linear-gradient(135deg, #ff6600 0%, #ff9933 100%) !important;
    padding: 15px 20px;
    text-align: left;
    border: none;
}
.resultado-tabla th:first-child { border-top-left-radius: 15px; }
.resultado-tabla th:last-child  { border-top-right-radius: 15px; }
.resultado-tabla th h6 {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.resultado-tabla td {
    padding: 15px 20px;
    text-align: left;
    border: none;
    font-size: 14px;
    color: #1d1d1f;
}
/* Filas alternas: impares blancas, pares crema */
.resultado-tabla tbody tr:nth-child(odd) td  { background-color: #ffffff; }
.resultado-tabla tbody tr:nth-child(even) td { background-color: #fffaf0; }

/* Primera columna (Moneda) en azul, negrita */
.resultado-tabla td:first-child {
    font-weight: 700;
    color: #1d4380;
}
/* Columna porcentaje en verde */
.resultado-tabla td:nth-child(2) {
    color: #00a651;
    font-weight: 600;
}
/* Última columna (Total) negrita */
.resultado-tabla td:last-child {
    font-weight: 700;
    color: #1d1d1f;
    font-variant-numeric: tabular-nums;
}

.resultado-tabla tbody tr { transition: background-color 0.15s ease; }
.resultado-tabla tbody tr:hover td { background-color: #fff3e0; }

/* Esquinas inferiores: la última fila redondea sus celdas extremas (solo escritorio) */
@media only screen and (min-width: 768px) {
    .resultado-tabla tbody tr:last-child td:first-child {
        border-bottom-left-radius: 15px;
    }
    .resultado-tabla tbody tr:last-child td:last-child {
        border-bottom-right-radius: 15px;
    }
}

/* Responsive: tabla -> tarjetas en móvil (Opción 4: datos alternos) */
@media only screen and (max-width: 767px) {
    .resultado-tabla-container {
        background: transparent;
        border: none;
        border-radius: 0;
        overflow: visible;
    }
    .resultado-tabla {
        display: block;
        width: 100%;
        border: none;
        background: none;
    }
    .resultado-tabla thead { display: none; }
    .resultado-tabla tbody { display: block; }
    .resultado-tabla tr {
        display: block;
        margin-bottom: 12px;
        border: 1px solid #ffe0b2;
        border-radius: 14px;
    }
    .resultado-tabla tr:last-child { margin-bottom: 0; }
    .resultado-tabla td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 11px 16px;
        text-align: right;
        border: none;
        font-size: 14px;
        box-sizing: border-box;
    }
    /* Datos del cuerpo: fondo alterno */
    .resultado-tabla td:nth-child(odd)  { background-color: #ffffff; }
    .resultado-tabla td:nth-child(even) { background-color: #fffaf0; }
    /* La primera celda (Moneda) es la cabecera de la tarjeta: degradado naranja */
    .resultado-tabla td:first-child {
        background: linear-gradient(135deg, #ff6600 0%, #ff9933 100%) !important;
        color: #ffffff;
        font-size: 14px;
        font-weight: 800;
        padding: 12px 16px;
        border-top-left-radius: 13px;
        border-top-right-radius: 13px;
    }
    /* La última celda redondea las esquinas inferiores de la tarjeta */
    .resultado-tabla td:last-child {
        border-bottom-left-radius: 13px;
        border-bottom-right-radius: 13px;
    }
    .resultado-tabla td:before {
        content: attr(data-label);
        font-weight: 700;
        text-align: left;
        color: #86868b;
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }
    /* En la celda Moneda la etiqueta va en blanco translúcido */
    .resultado-tabla td:first-child:before {
        color: rgba(255, 255, 255, 0.85);
    }
}

/* ===== Botón Exportar PDF ===== */
.export-button-container {
    text-align: center;
    margin: 6px 0 10px;
}
.button-container {
    display: flex !important;
    justify-content: center !important;
    margin: 8px 0 !important;
}

.modern-button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: #ff6600 !important;
    border: none !important;
    color: #ffffff !important;
    padding: 13px 32px !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    border-radius: 12px !important;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
    box-shadow: 0 4px 12px rgba(255, 102, 0, 0.22) !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    font-family: inherit !important;
}
.modern-button:hover {
    background: #ff7a1a !important;
    box-shadow: 0 7px 16px rgba(255, 102, 0, 0.3) !important;
    transform: translateY(-2px) !important;
}
.modern-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 6px rgba(255, 102, 0, 0.2) !important;
}

/* ===== Responsive general ===== */
/* Tablet / iPad: las stats pasan a 2 columnas */
@media only screen and (max-width: 1024px) {
    .stats-container { grid-template-columns: 1fr 1fr; }
    .stat-card:nth-child(5) { grid-column: 1 / -1; }
}

@media only screen and (max-width: 600px) {
    #interes_compuesto_form { padding: 18px; }
    .stats-container { grid-template-columns: 1fr 1fr; }
    .stat-card:nth-child(5) { grid-column: 1 / -1; }
    .chart-container { padding: 16px; }
    .chart-container .chart-canvas-wrap { height: 240px; }
    .modern-button {
        padding: 13px 28px !important;
        width: auto !important;
    }
}