/* ======================================================
   Chilancers — Sistema de temas y animaciones base
   ====================================================== */

/* ── MODO CLARO (Light) ──
   Jerarquía: background < surface-container-lowest < surface-container-low < …
   Las tarjetas usan surface-container-lowest (blanco puro) sobre background gris cálido. */
:root {
    --dm-background:                #f5f0ee;
    --dm-on-background:             #1e1512;
    --dm-surface:                   #faf7f5;
    --dm-on-surface:                #1e1512;
    --dm-surface-variant:           #f0e4e0;
    --dm-on-surface-variant:        #524541;
    --dm-surface-container-lowest:  #ffffff;
    --dm-surface-container-low:     #faf4f0;
    --dm-surface-container:         #f3e9e5;
    --dm-surface-container-high:    #ece0db;
    --dm-surface-container-highest: #e4d7d1;
    --dm-primary:                   #c23b12;
    --dm-on-primary:                #ffffff;
    --dm-primary-container:         #ffdbd1;
    --dm-on-primary-container:      #420b00;
    --dm-primary-fixed:             #ffdbd1;
    --dm-primary-fixed-dim:         #ffb5a1;
    --dm-on-primary-fixed:          #420b00;
    --dm-on-primary-fixed-variant:  #9b2401;
    --dm-secondary:                 #755a53;
    --dm-on-secondary:              #ffffff;
    --dm-secondary-container:       #ffdbd1;
    --dm-on-secondary-container:    #2b1611;
    --dm-secondary-fixed:           #ffdbd1;
    --dm-secondary-fixed-dim:       #e5beb5;
    --dm-on-secondary-fixed:        #2b1611;
    --dm-on-secondary-fixed-variant:#5b413a;
    --dm-tertiary:                  #6c5e30;
    --dm-on-tertiary:               #ffffff;
    --dm-tertiary-container:        #f8e2a8;
    --dm-on-tertiary-container:     #231b00;
    --dm-tertiary-fixed:            #f8e2a8;
    --dm-tertiary-fixed-dim:        #dac78e;
    --dm-on-tertiary-fixed:         #231b00;
    --dm-on-tertiary-fixed-variant: #53461a;
    --dm-error:                     #ba1a1a;
    --dm-on-error:                  #ffffff;
    --dm-error-container:           #ffdad6;
    --dm-on-error-container:        #410002;
    --dm-outline:                   #857370;
    --dm-outline-variant:           #d8c6c1;
    --dm-inverse-surface:           #342a27;
    --dm-inverse-on-surface:        #fbebe7;
    --dm-inverse-primary:           #ffb5a1;
}

/* ── MODO OSCURO (Dark) ──
   Negro azulado profundo + jerarquía de elevación visible.
   Diferencia clave: cada nivel de container es ~2-3% más claro que el anterior. */
.dark {
    --dm-background:                #0c0b0e;
    --dm-on-background:             #e8e2df;
    --dm-surface:                   #0c0b0e;
    --dm-on-surface:                #e8e2df;
    --dm-surface-variant:           #4a3f3b;
    --dm-on-surface-variant:        #cfbfb9;
    --dm-surface-container-lowest:  #080709;
    --dm-surface-container-low:     #131114;
    --dm-surface-container:         #1a1719;
    --dm-surface-container-high:    #252124;
    --dm-surface-container-highest: #302c2f;
    --dm-primary:                   #ffb5a1;
    --dm-on-primary:                #611600;
    --dm-primary-container:         #852600;
    --dm-on-primary-container:      #ffdbd1;
    --dm-primary-fixed:             #ffdbd1;
    --dm-primary-fixed-dim:         #ffb5a1;
    --dm-on-primary-fixed:          #420b00;
    --dm-on-primary-fixed-variant:  #9b2401;
    --dm-secondary:                 #e5beb5;
    --dm-on-secondary:              #422c26;
    --dm-secondary-container:       #5b413a;
    --dm-on-secondary-container:    #ffdbd1;
    --dm-secondary-fixed:           #ffdbd1;
    --dm-secondary-fixed-dim:       #e5beb5;
    --dm-on-secondary-fixed:        #2b1611;
    --dm-on-secondary-fixed-variant:#5b413a;
    --dm-tertiary:                  #dac78e;
    --dm-on-tertiary:               #3a3000;
    --dm-tertiary-container:        #53461a;
    --dm-on-tertiary-container:     #f8e2a8;
    --dm-tertiary-fixed:            #f8e2a8;
    --dm-tertiary-fixed-dim:        #dac78e;
    --dm-on-tertiary-fixed:         #231b00;
    --dm-on-tertiary-fixed-variant: #53461a;
    --dm-error:                     #ffb4ab;
    --dm-on-error:                  #690005;
    --dm-error-container:           #93000a;
    --dm-on-error-container:        #ffdad6;
    --dm-outline:                   #9a8c87;
    --dm-outline-variant:           #4a3f3b;
    --dm-inverse-surface:           #e8e2df;
    --dm-inverse-on-surface:        #342a27;
    --dm-inverse-primary:           #c23b12;
}

/* --- TIPOGRAFÍA --- */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body {
    font-family: 'Hanken Grotesk', sans-serif;
    background-color: var(--dm-background);
    color: var(--dm-on-background);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.font-code-inline {
    font-family: 'JetBrains Mono', monospace;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--dm-surface-container-low); }
::-webkit-scrollbar-thumb { background: var(--dm-outline-variant); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: var(--dm-outline); }

/* Transición de tema en todos los elementos */
*, *::before, *::after {
    transition-property: background-color, border-color, color;
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

a, button, input, textarea, select {
    transition-property: background-color, border-color, color, box-shadow, transform, opacity;
    transition-duration: 0.18s;
}

/* ======================================================
   SISTEMA DE ANIMACIONES
   ====================================================== */

/* --- Keyframes --- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes slideMenuDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-8px); }
}

@keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dm-primary) 40%, transparent); }
    70%  { box-shadow: 0 0 0 10px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes gradientOrb {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.07; }
    33%       { transform: scale(1.1) translate(2%, -2%); opacity: 0.1; }
    66%       { transform: scale(0.95) translate(-2%, 2%); opacity: 0.06; }
}

@keyframes shimmer {
    from { background-position: -200% center; }
    to   { background-position: 200% center; }
}

/* --- Utilidades de scroll reveal --- */
.dm-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.dm-reveal.dm-visible {
    opacity: 1;
    transform: translateY(0);
}
.dm-reveal-delay-1 { transition-delay: 0.08s; }
.dm-reveal-delay-2 { transition-delay: 0.16s; }
.dm-reveal-delay-3 { transition-delay: 0.24s; }
.dm-reveal-delay-4 { transition-delay: 0.32s; }

/* Fade puro (sin translate) */
.dm-reveal-fade {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.dm-reveal-fade.dm-visible { opacity: 1; }

/* --- Animación de float para badges decorativos --- */
.dm-float {
    animation: float 4s ease-in-out infinite;
}
.dm-float-slow {
    animation: float 6s ease-in-out infinite;
    animation-delay: -2s;
}

/* --- Mobile menu animado --- */
.dm-slide-down {
    animation: slideMenuDown 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* --- Tarjetas con hover mejorado --- */
.dm-card-hover {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.25s ease,
                border-color 0.25s ease !important;
}
.dm-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px -8px color-mix(in srgb, var(--dm-primary) 20%, transparent),
                0 4px 12px -4px color-mix(in srgb, var(--dm-on-background) 10%, transparent);
    border-color: var(--dm-primary) !important;
}

/* --- Botones con estado activo --- */
.dm-btn-primary {
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease !important;
}
.dm-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -4px color-mix(in srgb, var(--dm-primary) 50%, transparent);
}
.dm-btn-primary:active {
    transform: translateY(0);
}

/* --- Hero gradient orb de fondo --- */
.hero-orb {
    position: absolute;
    border-radius: 9999px;
    background: radial-gradient(circle, var(--dm-primary-container), transparent 70%);
    animation: gradientOrb 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* --- Badge shimmer text --- */
.dm-shimmer-text {
    background: linear-gradient(90deg,
        var(--dm-primary) 0%,
        var(--dm-on-primary-fixed-variant) 40%,
        var(--dm-primary) 80%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 3s linear infinite;
}

/* ======================================================
   MEJORAS DE INTERACTIVIDAD — Chilancers v2
   ====================================================== */

@keyframes ia-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dm-primary) 45%, transparent); }
    50%       { box-shadow: 0 0 0 12px transparent; }
}
#ia-button button { animation: ia-pulse 2.5s ease-in-out infinite; }

@keyframes ripple {
    from { transform: scale(0); opacity: 0.4; }
    to   { transform: scale(4); opacity: 0; }
}
.dm-ripple { position: relative; overflow: hidden; }
.dm-ripple::after {
    content: ''; position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.4); width:80px; height:80px;
    margin-top:-40px; margin-left:-40px;
    top:var(--ripple-y,50%); left:var(--ripple-x,50%);
    transform:scale(0); opacity:0; pointer-events:none; transition:none;
}
.dm-ripple:active::after { animation: ripple 0.5s ease-out forwards; }

input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dm-primary) 20%, transparent);
}

@keyframes skeleton {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.dm-skeleton {
    background: linear-gradient(90deg, var(--dm-surface-container) 25%, var(--dm-surface-container-high) 50%, var(--dm-surface-container) 75%);
    background-size: 200% 100%;
    animation: skeleton 1.5s ease-in-out infinite;
    border-radius: 0.5rem;
}

.dark .text-secondary { color: var(--dm-on-surface-variant) !important; }

@keyframes chatIn {
    from { opacity: 0; transform: translateY(6px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-msg-id] { animation: chatIn 0.2s ease forwards; }

#scroll-top-btn {
    position: fixed; bottom: 6rem; right: 1.5rem; z-index: 900;
    opacity: 0; transform: translateY(12px) scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none;
}
#scroll-top-btn.visible { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }

.dm-project-card {
    transition: transform 0.25s cubic-bezier(0.22,1,0.36,1), box-shadow 0.25s ease, border-color 0.25s ease !important;
    border-left: 3px solid transparent;
}
.dm-project-card:hover {
    transform: translateY(-3px);
    border-left-color: var(--dm-primary);
    box-shadow: 0 8px 30px -6px color-mix(in srgb, var(--dm-primary) 18%, transparent);
}

#page-loader { background: linear-gradient(90deg, var(--dm-primary), var(--dm-primary-fixed-dim)); }

/* Dark mode: iconos sobre fondos "fixed" — misma saturación que el texto */
.dark .bg-primary-fixed-dim .material-symbols-outlined,
.dark [class*="bg-primary-fixed"] .material-symbols-outlined {
    color: var(--dm-on-primary-fixed) !important;
}
.dark .bg-secondary-fixed .material-symbols-outlined,
.dark [class*="bg-secondary-fixed"] .material-symbols-outlined {
    color: var(--dm-on-secondary-fixed) !important;
}
/* Avatares iniciales sobre primary-fixed */
.dark .bg-secondary-fixed.font-bold {
    color: var(--dm-on-secondary-fixed) !important;
}

/* ── color-scheme: le dice al navegador qué tema usar para form elements ── */
:root { color-scheme: light; }
.dark { color-scheme: dark; }

/* ── Inputs/textareas: siempre usan colores del tema, nunca auto-darkening ── */
input, textarea, select {
    background-color: var(--dm-surface-container-lowest) !important;
    color: var(--dm-on-surface) !important;
    border-color: var(--dm-outline-variant);
}
input::placeholder, textarea::placeholder {
    color: var(--dm-on-surface-variant) !important;
    opacity: 0.65;
}

/* ── Tarjetas y superficies con bg hardcodeado → usar variables ── */
.bg-white { background-color: var(--dm-surface-container-lowest) !important; }

/* ── SKELETON SCREENS ── */
.skeleton {
    background: linear-gradient(90deg, var(--dm-surface-variant) 25%, var(--dm-surface-container-high) 50%, var(--dm-surface-variant) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text { height: 0.875rem; margin-bottom: 0.5rem; width: 100%; }
.skeleton-text:last-child { width: 60%; }
.skeleton-title { height: 1.25rem; width: 40%; margin-bottom: 0.75rem; }
.skeleton-avatar { width: 3rem; height: 3rem; border-radius: 50%; }
.skeleton-card { padding: 1rem; border-radius: 1rem; }

/* ── BLUR-UP PLACEHOLDER ── */
.blur-up {
    filter: blur(12px);
    transform: scale(1.05);
    transition: filter 0.4s ease, transform 0.4s ease;
}
.blur-up.loaded {
    filter: blur(0);
    transform: scale(1);
}

/* ── ACCESIBILIDAD: skip-link y focus visibles ── */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.focus\:not-sr-only:focus {
    position: absolute; width: auto; height: auto; padding: 0.5rem 1rem; margin: 0;
    overflow: visible; clip: auto; white-space: normal;
}

/* ── HIGH CONTRAST MODE ── */
@media (forced-colors: active) {
    .border-outline-variant { border-color: ButtonText !important; }
    .bg-primary { background-color: Highlight !important; color: HighlightText !important; }
}

/* Estilos para respuestas Markdown del asistente IA */
.ia-md-content p { margin-bottom: 0.5rem; }
.ia-md-content p:last-child { margin-bottom: 0; }
.ia-md-content strong { font-weight: 700; }
.ia-md-content em { font-style: italic; }
.ia-md-content ul, .ia-md-content ol { 
    padding-left: 1.25rem; 
    margin: 0.4rem 0; 
}
.ia-md-content ul { list-style-type: disc; }
.ia-md-content ol { list-style-type: decimal; }
.ia-md-content li { margin-bottom: 0.2rem; }
.ia-md-content code { 
    background: rgba(0,0,0,0.15); 
    border-radius: 4px; 
    padding: 0.1rem 0.35rem; 
    font-family: monospace; 
    font-size: 0.85em; 
}
.ia-md-content pre { 
    background: rgba(0,0,0,0.2); 
    border-radius: 8px; 
    padding: 0.75rem; 
    overflow-x: auto; 
    margin: 0.5rem 0; 
}
.ia-md-content pre code { background: transparent; padding: 0; }
.ia-md-content h1, .ia-md-content h2, .ia-md-content h3 { 
    font-weight: 700; 
    margin: 0.5rem 0 0.25rem; 
}
.ia-md-content h1 { font-size: 1.1em; }
.ia-md-content h2 { font-size: 1.05em; }
.ia-md-content h3 { font-size: 1em; }
.ia-md-content a { 
    text-decoration: underline; 
    opacity: 0.85; 
}
.ia-md-content hr { 
    border: none; 
    border-top: 1px solid currentColor; 
    opacity: 0.2; 
    margin: 0.5rem 0; 
}