/* Estilos personalizados para la SPA Planificador 2026 */

:root {
    --glass-bg: rgba(255, 255, 255, 0.45);
    --glass-border: rgba(255, 255, 255, 0.25);
    --glass-shadow: rgba(31, 38, 135, 0.08);
    --skyline-color: rgba(217, 119, 6, 0.04); /* Tono ámbar muy suave */
}

.theme-dark {
    --glass-bg: rgba(15, 23, 42, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(0, 0, 0, 0.3);
    --skyline-color: rgba(251, 191, 36, 0.03); /* Tono dorado/ámbar oscuro extremadamente tenue */
}

/* Efecto Glassmorphism Premium */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    box-shadow: 0 8px 32px 0 var(--glass-shadow);
}

/* Marca de Agua: Siluetas de monumentos (Skyline) con CSS/SVG Inline */
.skyline-watermark {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35vh;
    min-height: 250px;
    z-index: 0;
    pointer-events: none;
    background-repeat: repeat-x;
    background-position: bottom;
    background-size: 1200px 100%;
    opacity: 0.85;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' fill='%23d97706' fill-opacity='0.05'><path d='M0,300 L0,220 L15,220 L15,300 M15,300 L25,180 L35,180 L45,300 M45,300 L45,150 L60,150 L60,300 M60,300 L70,80 L72,80 L80,300 M80,300 L90,240 L110,240 L120,300 M120,300 L125,100 L135,40 L137,40 L145,100 L150,300 M150,300 L170,190 L185,190 L195,300 M195,300 L210,130 L220,130 L235,300 M235,300 L250,220 L270,220 L285,300 M285,300 L290,110 L293,10 L296,110 L305,300 M305,300 L320,160 L340,160 L355,300 M355,300 L370,240 L385,240 L395,300 M395,300 L400,140 L403,20 L406,140 L415,300 M415,300 L430,220 L450,220 L465,300 M465,300 L480,180 L500,180 L515,300 M515,300 L520,90 L523,30 L526,90 L535,300 M535,300 L550,210 L570,210 L585,300 M585,300 L595,250 L610,250 L620,300 M620,300 L625,120 L635,50 L637,50 L645,120 L650,300 M650,300 L665,170 L680,170 L695,300 M695,300 L705,70 L707,70 L715,300 M715,300 L725,230 L745,230 L755,300 M755,300 L760,130 L763,10 L766,130 L775,300 M775,300 L790,200 L810,200 L825,300 M825,300 L840,150 L860,150 L875,300 M875,300 L885,80 L887,80 L895,300 M895,300 L910,220 L930,220 L945,300 M945,300 L955,100 L965,30 L967,30 L975,100 L980,300 M980,300 L995,190 L1010,190 L1020,300 M1020,300 L1035,130 L1045,130 L1060,300 M1060,300 L1075,220 L1095,220 L1110,300 M1110,300 L1115,110 L1118,10 L1121,110 L1130,300 M1130,300 L1145,160 L1165,160 L1180,300 M1180,300 L1190,240 L1200,300 Z'/></svg>");
}

.theme-dark .skyline-watermark {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' fill='%23fbbf24' fill-opacity='0.03'><path d='M0,300 L0,220 L15,220 L15,300 M15,300 L25,180 L35,180 L45,300 M45,300 L45,150 L60,150 L60,300 M60,300 L70,80 L72,80 L80,300 M80,300 L90,240 L110,240 L120,300 M120,300 L125,100 L135,40 L137,40 L145,100 L150,300 M150,300 L170,190 L185,190 L195,300 M195,300 L210,130 L220,130 L235,300 M235,300 L250,220 L270,220 L285,300 M285,300 L290,110 L293,10 L296,110 L305,300 M305,300 L320,160 L340,160 L355,300 M355,300 L370,240 L385,240 L395,300 M395,300 L400,140 L403,20 L406,140 L415,300 M415,300 L430,220 L450,220 L465,300 M465,300 L480,180 L500,180 L515,300 M515,300 L520,90 L523,30 L526,90 L535,300 M535,300 L550,210 L570,210 L585,300 M585,300 L595,250 L610,250 L620,300 M620,300 L625,120 L635,50 L637,50 L645,120 L650,300 M650,300 L665,170 L680,170 L695,300 M695,300 L705,70 L707,70 L715,300 M715,300 L725,230 L745,230 L755,300 M755,300 L760,130 L763,10 L766,130 L775,300 M775,300 L790,200 L810,200 L825,300 M825,300 L840,150 L860,150 L875,300 M875,300 L885,80 L887,80 L895,300 M895,300 L910,220 L930,220 L945,300 M945,300 L955,100 L965,30 L967,30 L975,100 L980,300 M980,300 L995,190 L1010,190 L1020,300 M1020,300 L1035,130 L1045,130 L1060,300 M1060,300 L1075,220 L1095,220 L1110,300 M1110,300 L1115,110 L1118,10 L1121,110 L1130,300 M1130,300 L1145,160 L1165,160 L1180,300 M1180,300 L1190,240 L1200,300 Z'/></svg>");
}

/* Transiciones Suaves de Vistas de la SPA */
.view-transition {
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.view-hidden {
    opacity: 0;
    transform: scale(0.98);
    pointer-events: none;
    display: none !important;
}

.view-visible {
    opacity: 1;
    transform: scale(1);
}

/* Contenedores con scroll libre para paneles largos (Documentos, Privacidad, etc.) */
.fade-in-panel {
    width: 100%;
    overflow-y: auto;
    padding-bottom: 140px; /* Margen generoso de 140px para evitar que el navbar inferior flotante tape el contenido */
}

/* Corrección de legibilidad en etiquetas code y textos resaltados font-mono (Eliminación de cajas negras oscuras) */
code, pre, .font-mono.bg-slate-200, .font-mono[class*="bg-slate-"], #privacy-content-wrapper span.font-mono, #help-content-wrapper span.font-mono {
    background-color: #f1f5f9 !important;
    color: #c2410c !important;
    border: 1px solid rgba(194, 65, 12, 0.2);
    font-weight: 700;
}

.theme-dark code, .theme-dark pre, .theme-dark .font-mono.bg-slate-200, .theme-dark .font-mono[class*="bg-slate-"], .theme-dark #privacy-content-wrapper span.font-mono, .theme-dark #help-content-wrapper span.font-mono {
    background-color: rgba(30, 41, 59, 0.65) !important;
    color: #fb923c !important;
    border: 1px solid rgba(251, 146, 60, 0.25);
}

/* Efectos de Hover Premium en Botones y Formularios */
.interactive-element {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.interactive-element:hover {
    transform: translateY(-1px);
}

.interactive-element:active {
    transform: translateY(1px);
}

/* Animaciones sutiles */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Toast flotante */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
}

/* ==========================================================================
   ESTILOS ESPECÍFICOS DE ALTA LEGIBILIDAD PARA LA TARJETA DE LOGIN (#auth-view)
   Fondo azul más claro que el fondo Navy #0f172a y letras en blanco/celeste de alto contraste
   ========================================================================== */

#auth-view .glass-panel {
    background: #1e293b !important; /* Slate 800 - Azul marino notablemente más claro que el fondo #0f172a para resaltar */
    border: 1px solid rgba(56, 189, 248, 0.35) !important; /* Borde celeste elegante y definido */
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.6), 0 0 30px rgba(56, 189, 248, 0.12) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Título principal: letra azul muy clara y resplandeciente para que resalte mucho más */
#auth-view h2 {
    color: #7dd3fc !important; /* Sky 300 - Azul muy claro brillante */
    font-size: 1.65rem !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    text-shadow: 0 0 25px rgba(56, 189, 248, 0.45), 0 2px 5px rgba(0, 0, 0, 0.6) !important;
}

/* Subtítulo y descripciones: celeste perla muy luminoso y legible */
#auth-view p,
#auth-view .text-custom-muted,
#auth-view span.text-xs {
    color: #e2e8f0 !important; /* Slate 200 / blanco roto para máxima legibilidad */
}

/* Etiquetas de formularios (CORREO ELECTRÓNICO, CONTRASEÑA, etc.): celeste brillante de gran contraste */
#auth-view label {
    color: #38bdf8 !important; /* Sky 400 - Celeste resplandeciente */
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
}

/* Inputs de texto dentro del login: fondo azul oscuro mate con texto blanco y placeholder celeste claro */
#auth-view input {
    background-color: rgba(15, 23, 42, 0.85) !important; /* Slate 900 oscuro para perfecto contraste con el azul claro de la tarjeta */
    border: 1px solid rgba(148, 163, 184, 0.35) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

#auth-view input::placeholder {
    color: #94a3b8 !important; /* Slate 400 */
}

#auth-view input:focus {
    border-color: #f59e0b !important; /* Amber 500 al enfocar */
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
    background-color: #0f172a !important;
}

/* Enlaces naranjas/ámbar nítidos y luminosos */
#auth-view a {
    color: #fbbf24 !important; /* Amber 400 */
    font-weight: 700 !important;
}

#auth-view a:hover {
    color: #f59e0b !important;
    text-decoration: underline;
}

/* Iconos o acentos dentro del login */
#auth-view .bg-amber-500\/10 {
    background-color: rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fbbf24 !important;
}