/* =========================================================
   BASE
   Colores, tema claro/oscuro, tipografía y utilidades que
   usa toda la aplicación.
   Lenguaje visual: fondo "aurora" con degradados suaves,
   superficies de cristal esmerilado (blur), acento violeta→azul
   y sombras suaves. Cambiar el acento o el fondo aquí cambia
   toda la app.
   ========================================================= */

:root{
  /* Superficies */
  --marfil:#EBEDF7;                       /* base del fondo */
  --marfil-alto:rgba(255,255,255,.72);    /* cristal esmerilado (tarjetas, panel) */
  --velo:rgba(255,255,255,.55);           /* relleno hundido (inputs) */
  --solido:#FFFFFF;                        /* superficie totalmente opaca */
  /* Fondo aurora de la página */
  --fondo:
    radial-gradient(900px 520px at 10% -8%, rgba(122,92,251,.22), transparent 60%),
    radial-gradient(1040px 540px at 110% 2%, rgba(76,134,255,.20), transparent 55%),
    radial-gradient(820px 640px at 92% 118%, rgba(16,185,129,.14), transparent 60%),
    var(--marfil);
  /* Barra superior */
  --grad-barra:linear-gradient(100deg,#5B3FE0 0%,#4361EE 52%,#3B82F6 100%);
  --barra-texto:#F3F5FF;
  /* Acento (degradado violeta → azul) */
  --acento-1:#7A5CFB; --acento-2:#4C86FF;
  --grad:linear-gradient(135deg,var(--acento-1),var(--acento-2));
  --acento-tenue:rgba(122,92,251,.12);
  --glow:0 10px 30px rgba(76,134,255,.30);
  /* Texto SOBRE el acento, y acento usado COMO texto sobre fondo claro.
     El selector de color los recalcula para que siempre se lean. */
  --sobre-acento:#FFFFFF;
  --acento-texto:#4361EE;
  --grad-texto:linear-gradient(135deg,#6D4CF0,#3B6FE0);
  /* Veladuras y bordes DENTRO de la barra. Son claros porque la barra
     es oscura; si el usuario elige un color claro, el selector de color
     los cambia a oscuros para que se sigan viendo. */
  --barra-velo:rgba(255,255,255,.08);
  --barra-velo-mas:rgba(255,255,255,.18);
  --barra-borde:rgba(255,255,255,.22);
  --barra-borde-mas:rgba(255,255,255,.42);
  --barra-sub:rgba(243,245,255,.72);
  --sobre-acento-velo:rgba(255,255,255,.22);
  --acento-borde:transparent;
  /* Acentos secundarios */
  --naranja:#F97316; --naranja-hondo:#EA6A0C;   /* cálido, uso puntual */
  --verde:#10B981;   --verde-hondo:#0EA372;     /* esmeralda: acciones positivas */
  /* Texto */
  --tinta:#1B2233; --tinta-suave:#5B6478;
  /* Estados y líneas */
  --aviso:#EF4444; --bien:#10B981;
  --linea:rgba(23,29,45,.10);
  --linea-fuerte:rgba(23,29,45,.17);
  --guia:rgba(23,29,45,.14);
  --pastilla:rgba(23,29,45,.06);
  /* Elevación, curvatura y desenfoque */
  --sombra:0 2px 8px rgba(20,26,50,.06),0 14px 34px rgba(20,26,50,.10);
  --sombra-alta:0 30px 70px rgba(20,26,50,.22);
  --blur:16px;
  --radio:18px; --radio-m:12px; --radio-s:10px;
  --display:"Bricolage Grotesque",system-ui,sans-serif; --texto:"Hanken Grotesk",system-ui,sans-serif;
}
[data-tema="oscuro"]{
  --marfil:#080B14;                       /* casi negro azulado */
  --marfil-alto:rgba(26,31,46,.60);       /* cristal oscuro esmerilado */
  --velo:rgba(255,255,255,.045);
  --solido:#141824;
  --fondo:
    radial-gradient(900px 540px at 8% -10%, rgba(96,66,232,.30), transparent 60%),
    radial-gradient(1060px 580px at 112% 0%, rgba(20,70,140,.42), transparent 55%),
    radial-gradient(860px 680px at 92% 120%, rgba(16,185,129,.14), transparent 60%),
    var(--marfil);
  --grad-barra:linear-gradient(100deg,#241C54 0%,#1E2A66 52%,#123A73 100%);
  --barra-texto:#EAECF7;
  --acento-1:#8B7BFF; --acento-2:#54A0FF;
  --acento-tenue:rgba(139,123,255,.16);
  --glow:0 10px 34px rgba(84,160,255,.32);
  --sobre-acento:#FFFFFF;
  --acento-texto:#8FB8FF;
  --grad-texto:linear-gradient(135deg,#A594FF,#7FC0FF);
  --barra-velo:rgba(255,255,255,.08);
  --barra-velo-mas:rgba(255,255,255,.18);
  --barra-borde:rgba(255,255,255,.22);
  --barra-borde-mas:rgba(255,255,255,.42);
  --barra-sub:rgba(243,245,255,.72);
  --sobre-acento-velo:rgba(255,255,255,.22);
  --acento-borde:transparent;
  --naranja:#FB923C; --naranja-hondo:#F97316;
  --verde:#34D399;   --verde-hondo:#10B981;
  --tinta:#E7EAF3; --tinta-suave:#98A2B8;
  --aviso:#F87171; --bien:#34D399;
  --linea:rgba(255,255,255,.09);
  --linea-fuerte:rgba(255,255,255,.15);
  --guia:rgba(255,255,255,.12);
  --pastilla:rgba(255,255,255,.06);
  --sombra:0 2px 10px rgba(0,0,0,.35),0 18px 42px rgba(0,0,0,.5);
  --sombra-alta:0 30px 80px rgba(0,0,0,.62);
}

*,*::before,*::after{box-sizing:border-box}
/* Nada debe desbordar a los lados: evita los huecos y el scroll
   horizontal que aparecían en móvil. Va en <html> para no romper el
   position:sticky de la barra superior. */
html{overflow-x:hidden}
body{margin:0;background:var(--fondo) fixed;background-color:var(--marfil);
  /* Columna a pantalla completa: así el taller puede estirarse hasta
     abajo y no queda una franja de fondo suelta cuando hay poco
     contenido. dvh tiene en cuenta la barra del navegador en móvil. */
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  color:var(--tinta);font-family:var(--texto);font-size:15px;line-height:1.55;
  letter-spacing:.005em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:color .2s}

[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--acento-1);outline-offset:2px}
::selection{background:var(--acento-tenue)}

/* Franja de aviso bajo la barra superior */
.mensaje{padding:11px 20px;font-size:.85rem;font-weight:500}
.mensaje--info{background:var(--acento-tenue);color:var(--acento-texto)}
.mensaje--bien{background:rgba(16,185,129,.14);color:var(--verde-hondo)}
.mensaje--error{background:rgba(239,68,68,.14);color:var(--aviso)}

/* Recuadro punteado para "aquí todavía no hay nada" */
.vacio{padding:44px 22px;text-align:center;color:var(--tinta-suave);font-size:.86rem;
  border:1.5px dashed var(--linea-fuerte);border-radius:var(--radio-m);background:var(--velo)}