/**
 * Tema modo básico - Paleta y tipografía (.cursorrules)
 * Colores: Primario #008080 | Contraste #1B263B | Acento #F8F9F1 | Soporte #4E5E66
 * Tipografía: Títulos Montserrat 700 | Preguntas Inter 500 | Números Inter 800 | Botones Montserrat 600
 */

:root {
    --font-titulo: 'Montserrat', sans-serif;
    --font-formulario: 'Inter', system-ui, sans-serif;
    --font-numero: 'Inter', system-ui, sans-serif;
    --font-boton: 'Montserrat', sans-serif;
    --color-primario: #008080;
    --color-primario-hover: #006666;
    --color-primario-light: rgba(0, 128, 128, 0.12);
    --color-contraste: #1B263B;
    --color-contraste-soft: rgba(27, 38, 59, 0.85);
    --color-acento: #F8F9F1;
    --color-soporte: #4E5E66;
    --color-soporte-placeholder: rgba(78, 94, 102, 0.7);
    --color-premium-amarillo: #E6A800;
    --color-premium-amarillo-hover: #d99a00;

    --primary-gradient: linear-gradient(135deg, #006666 0%, #008080 100%);
    --secondary-gradient: linear-gradient(135deg, #008080 0%, #00a0a0 100%);
    --danger-gradient: linear-gradient(135deg, #c53030 0%, #e53e3e 100%);
    --dark-gradient: linear-gradient(135deg, #1B263B 0%, #253550 100%);
    --card-shadow: 0 10px 40px rgba(27, 38, 59, 0.08);
    --card-shadow-hover: 0 20px 60px rgba(27, 38, 59, 0.12);
}

/* ========== Tipografía (.cursorrules) ========== */
/* Título principal: Montserrat 700 (Bold) */
h1, h2, h3, h4, h5, h6,
.card-title,
.navbar-brand {
    font-family: var(--font-titulo) !important;
    font-weight: 700 !important;
}

@media screen and (max-width: 390px) {
    .navbar-brand {
        font-size: 1rem;
        font-weight: 600;
    }
    .nav-link {
        font-size: 0.8rem;
    }
}

@media screen and (max-width: 390px) {
    .navbar-brand i {
        display: none;
    }
}
/* Preguntas del formulario: Inter 500 (Medium) */
.form-label,
.form-control,
.form-select,
.input-group-text,
small.text-muted,
.alert-info,
.detail-label {
    font-family: var(--font-formulario) !important;
    font-weight: 500;
}

.form-label {
    font-weight: 500 !important;
}

/* Números de dinero: Inter 800 (Extra Bold) */
.big-number,
.detail-value,
#resMonto,
#resTasa,
#resPago,
#resIngresoNeto,
#p1_ingreso_bancable_total_basico,
#p2_ingreso_bancable_total_basico,
#p1_ingreso_bruto_total_basico,
#p2_ingreso_bruto_total_basico {
    font-family: var(--font-numero) !important;
    font-weight: 800 !important;
}

/* Botones: Montserrat 600 (Semi Bold) */
.btn,
.nav-link,
.nav-link-premium,
.mode-badge,
.status-badge,
.dropdown-toggle {
    font-family: var(--font-boton) !important;
    font-weight: 600 !important;
}


/* Body y fondo general */
body {
    background: var(--color-acento) !important;
    background: linear-gradient(180deg, #F8F9F1 0%, #eef0e6 100%) !important;
    min-height: 100vh;
    color: var(--color-contraste);
}

/* Títulos principales y texto de lectura */
h1, h2, h3, h4, h5, h6 {
    color: var(--color-contraste) !important;
}

.text-dark {
    color: var(--color-contraste) !important;
}

/* Navbar */
.navbar {
    background: var(--dark-gradient) !important;
    box-shadow: 0 4px 20px rgba(27, 38, 59, 0.2);
}

.navbar-brand i {
    color: var(--color-primario) !important;
}

/* Indicador de estado junto al título: colores sólidos para verse sobre el nav oscuro */
.status-indicator-nav {
    padding: 0.35rem 0.65rem;
    border-radius: 20px;
    font-size: 0.75rem !important;
    font-weight: 600;
    white-space: nowrap;
}

.status-indicator-nav i {
    color: inherit !important;
}

.status-indicator-nav.ready {
    background: #F8F9F1;
    color: #1B263B !important;
}

.status-indicator-nav.calculating {
    background: #E6A800;
    color: #1B263B !important;
}

.status-indicator-nav.error {
    background: #F8F9F1;
    color: #c53030 !important;
}

/* Botón Premium en nav (amarillo/dorado) */
.nav-link-premium {
    background: var(--color-premium-amarillo) !important;
    color: var(--color-contraste) !important;
    box-shadow: 0 4px 15px rgba(230, 168, 0, 0.35) !important;
    margin-right: 0.5rem;
}

.nav-link-premium:hover {
    background: var(--color-premium-amarillo-hover) !important;
    color: var(--color-contraste) !important;
    box-shadow: 0 6px 20px rgba(230, 168, 0, 0.4) !important;
}

.nav-link-premium i {
    color: var(--color-contraste) !important;
}

/* Badge modo básico */
.mode-badge.basic {
    background: var(--primary-gradient);
    color: white;
}

/* Cards */
.card {
    box-shadow: var(--card-shadow);
    background: #fff;
}

.card-header {
    border-bottom-color: rgba(27, 38, 59, 0.08);
}

.card-title {
    color: var(--color-contraste) !important;
}

.card-title i {
    color: var(--color-primario) !important;
}

/* Result card header (aprobado = primario) */
.result-header {
    background: var(--primary-gradient) !important;
}

.result-header.approved {
    background: var(--secondary-gradient) !important;
}

/* Form labels: preguntas secundarias y placeholders */
.form-label {
    color: var(--color-soporte) !important;
}

.form-control::placeholder {
    color: var(--color-soporte-placeholder);
}

.form-control,
.form-select {
    border-color: rgba(78, 94, 102, 0.25);
    color: var(--color-contraste);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primario);
    box-shadow: 0 0 0 3px var(--color-primario-light);
}

/* Input group (botones de acción visual) */
.input-group-text {
    background: var(--color-primario-light);
    border-color: rgba(78, 94, 102, 0.2);
    color: var(--color-contraste);
}

/* Secciones del formulario */
.section-highlight {
    background: rgba(0, 128, 128, 0.06);
    border: 1px solid rgba(0, 128, 128, 0.2);
    border-radius: 12px;
}

.section-highlight .text-primary {
    color: var(--color-primario) !important;
}

.section-buro {
    background: rgba(0, 128, 128, 0.05);
    border: 1px solid rgba(0, 128, 128, 0.15);
    border-radius: 12px;
}

.section-buro .text-success {
    color: var(--color-primario) !important;
}

/* Detail items (resultado) */
.detail-label {
    color: var(--color-soporte) !important;
}

.detail-value {
    color: var(--color-contraste) !important;
}

.detail-item {
    background: rgba(248, 249, 241, 0.8);
}

.detail-item:hover {
    background: rgba(0, 128, 128, 0.06);
}

.detail-item.bg-success.bg-opacity-10 {
    background: var(--color-primario-light) !important;
}

.detail-item .text-success {
    color: var(--color-primario) !important;
}

/* Botones primarios (acción) */
.btn-primary {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
}

.btn-primary:hover {
    background: var(--color-primario-hover) !important;
    border-color: var(--color-primario-hover) !important;
}

/* Botón "Obtener Análisis Premium" en tarjeta de resultado (amarillo/dorado) */
.btn-premium-cta,
a.btn-primary.btn-premium-cta {
    background: var(--color-premium-amarillo) !important;
    border-color: var(--color-premium-amarillo) !important;
    color: var(--color-contraste) !important;
}

a.btn-primary.btn-premium-cta:hover {
    background: var(--color-premium-amarillo-hover) !important;
    border-color: var(--color-premium-amarillo-hover) !important;
    color: var(--color-contraste) !important;
}

/* Alert info (resumen ingresos) */
.alert-info {
    background: var(--color-primario-light);
    border-color: rgba(0, 128, 128, 0.25);
    color: var(--color-contraste);
}

/* Aviso de estimación en tarjeta de resultado */
.aviso-estimacion {
    background: var(--color-primario-light) !important;
    border: 1px solid rgba(0, 128, 128, 0.3) !important;
}

.aviso-estimacion .text-primary {
    color: var(--color-primario) !important;
}

/* Footer */
footer {
    background: var(--dark-gradient) !important;
    color: rgba(248, 249, 241, 0.85);
}

footer a {
    color: var(--color-primario);
}

footer a:hover {
    color: var(--color-acento);
}

/* Text muted → soporte */
.text-muted {
    color: var(--color-soporte) !important;
}

/* Range slider */
.form-range::-webkit-slider-thumb {
    background: var(--color-primario);
}

.form-range::-moz-range-thumb {
    background: var(--color-primario);
}

/* Status listo */
.status-indicator.ready {
    color: var(--color-primario) !important;
}

/* Card IA / Premium en form_basico */
.card.border-primary .card-header,
.card .card-header.bg-primary {
    background: var(--color-primario) !important;
    border-color: var(--color-primario);
}

/* Spinner */
.spinner-border.text-primary {
    color: var(--color-primario) !important;
}

/* Pequeños ajustes de contraste en readonly */
input[readonly].form-control {
    background-color: rgba(248, 249, 241, 0.8);
}

/* Nota informativa al pie del formulario */
.card.bg-light.border-0 {
    background: rgba(248, 249, 241, 0.9) !important;
    border: 1px solid rgba(78, 94, 102, 0.15) !important;
}

.card.bg-light .bi-lightbulb {
    color: var(--color-primario);
}

/* Filas de fuente de ingreso: mismo alto para Monto y Antigüedad */
.fuente-ingreso-item .row.align-items-end .input-group.input-group-sm,
.fuente-ingreso-item .row.align-items-end .col-md-2 .form-control,
.fuente-ingreso-item .row.align-items-end .col-md-4 .form-control {
    min-height: 31px;
}

.fuente-ingreso-item .row.align-items-end .input-group.input-group-sm {
    align-items: stretch;
}

.fuente-ingreso-item .row.align-items-end .input-group.input-group-sm .form-control {
    min-height: 31px;
}

/* Columna del botón Eliminar: misma altura que la fila y botón centrado verticalmente */
.fuente-ingreso-item .row.align-items-end .col-md-1 {
    align-self: stretch;
    display: flex;
    align-items: center;
}

.fuente-ingreso-item .row.align-items-end .col-md-1 .btn {
    margin-bottom: 0;
}

/* Primera fuente de ingreso: no mostrar botón Eliminar */
.fuente-ingreso-item[data-index="0"] .btn-outline-danger {
    display: none !important;
}

/* Bloque fuentes adicionales: margen para no chocar con contornos */
.fuentes-adicionales-block {
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

#p1_fuentes_ingresos_basico .row.align-items-center.justify-content-start,
#p2_fuentes_ingresos_basico .fuentes-adicionales-block {
    margin-left: 0.125rem;
}

/* Fuentes adicionales en modo premium: separado del borde */
#p1_fuentes_ingresos .fuentes-adicionales-block,
#p2_fuentes_ingresos .fuentes-adicionales-block {
    margin-left: 0.5rem;
}

/* Footer páginas legales (términos, privacidad) */
.site-footer {
    background: var(--color-contraste);
    color: var(--color-acento);
    margin-top: auto;
}
.site-footer .text-muted {
    color: rgba(248, 249, 241, 0.85) !important;
}
.site-footer small {
    font-family: var(--font-body);
    font-size: 0.875rem;
}