/* Marca de Sunset Society. ÚNICA fuente de colores, tipografías y medidas: el resto del código solo usa var(--…).
   Paleta semántica: 1 color de marca + 1 acento + neutros + estados. Si hace falta otro tono, se agrega AQUÍ
   con su uso, y aparece solo en /marca/. */
:root{
  /* Marca */
  --marca:#D9A441;          /* botones principales, enlaces, selección */
  --marca-hover:color-mix(in srgb,var(--marca) 85%,#000); /* al pasar el mouse o tocar un botón principal */
  --marca-suave:color-mix(in srgb,var(--marca) 12%,#fff); /* fondos de avisos y chips de la marca */
  --marca-suave-2:color-mix(in srgb,var(--marca) 18%,#fff); /* píldora de la pestaña activa, chips (texto --marca-oscura) */
  --marca-oscura:color-mix(in srgb,var(--marca) 70%,#000);  /* texto de marca sobre fondos suaves (≥ 4.5:1) */
  --sobre-marca:#FFFFFF;      /* texto encima de --marca */
  --acento:#F59E0B;           /* detalles puntuales: insignias, destacados. Nunca texto largo */
  --sobre-acento:#16151A;     /* texto encima de --acento */
  /* Neutros */
  --fondo:#F6F5F2;          /* fondo de página */
  --superficie:#FFFFFF;       /* tarjetas, diálogos */
  --tinta:#16151A;            /* texto principal */
  --tinta-2:#5B5862;          /* texto secundario (≥ 4.5:1 sobre --superficie) */
  --linea:#E2DCD0;            /* bordes y divisores */
  --vidrio-fuerte:color-mix(in srgb,var(--superficie) 90%,transparent); /* cabecera y barra de las apps (esmerilado) */
  --velo:rgb(22 21 26 / .5);  /* velo bajo el cajón del menú del Sitio (app.js): oscurece la página en los dos temas */
  /* Hoja modal (hoja.css): cabecera de color propio, nunca blanco sobre blanco. Marca oscurecida (texto
     claro AA con cualquier marca); con color relativo, el bloque @supports de abajo la afina. */
  --hm-cab-bg:color-mix(in srgb,#D9A441 40%,#000);
  --hm-cab-tinta:#FFFFFF;     /* título y cerrar sobre --hm-cab-bg */
  --hm-cuerpo:color-mix(in srgb,var(--superficie) 96%,var(--marca)); /* cuerpo de la hoja: las tarjetas blancas resaltan */
  /* Estados */
  --ok:#15803D;      /* éxito */
  --aviso:#B45309;   /* atención */
  --error:#C2410C;   /* error */
  --info:#1D4ED8;    /* información */
  /* Tipografía: máximo 2 familias */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --sans:'Figtree',system-ui,sans-serif;
  --t-1:2.5rem; --t-2:1.75rem; --t-3:1.25rem; --t-texto:1rem; --t-chico:.875rem;
  /* Forma */
  --radio:14px; --radio-chico:10px; --sombra:0 1px 2px rgba(22,21,26,.06),0 8px 24px -12px rgba(22,21,26,.18);
  --radio-tarjeta:20px; --radio-accion:999px; --sombra-alta:0 20px 50px -20px rgba(22,21,26,.35);
  /* Movimiento (transiciones CSS; los resortes viven en js/motor.js) */
  --dur-normal:250ms; --curva:cubic-bezier(.2,0,0,1);
  color-scheme:light dark;   /* controles nativos y barras de desplazamiento siguen al tema */
}
/* Modo oscuro (regla del dueño, 6-oct-2026: toda app lo trae, con conmutador visible y recordado; js/tema.js).
   Los MISMOS nombres con otros valores; contraste AA (4.5:1) también aquí. Dos bloques IGUALES a propósito: el primero
   sigue al sistema cuando la persona no eligió; el segundo, cuando eligió oscuro (<html data-tema="oscuro">).
   Si cambias uno, cambia el otro. */
@media (prefers-color-scheme:dark){:root:not([data-tema=claro]){
  --marca:color-mix(in srgb,#D9A441 62%,#fff); --marca-hover:color-mix(in srgb,var(--marca) 85%,#fff);
  --marca-suave:color-mix(in srgb,var(--marca) 16%,var(--superficie)); --marca-suave-2:color-mix(in srgb,var(--marca) 24%,var(--superficie));
  --marca-oscura:color-mix(in srgb,var(--marca) 70%,#fff); --sobre-marca:#16151A;
  --fondo:#121116; --superficie:#1D1C22; --tinta:#F2F0EB; --tinta-2:#B6B2BC; --linea:#36343D;
  --velo:rgb(0 0 0 / .6);
  --hm-cab-bg:color-mix(in srgb,#D9A441 38%,#1D1C22); /* cabecera de la hoja: se separa del cuerpo oscuro */
  --ok:#4ADE80; --aviso:#FBBF24; --error:#FB923C; --info:#93C5FD;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --sombra-alta:0 20px 50px -20px rgba(0,0,0,.8);
}}
:root[data-tema=oscuro]{
  --marca:color-mix(in srgb,#D9A441 62%,#fff); --marca-hover:color-mix(in srgb,var(--marca) 85%,#fff);
  --marca-suave:color-mix(in srgb,var(--marca) 16%,var(--superficie)); --marca-suave-2:color-mix(in srgb,var(--marca) 24%,var(--superficie));
  --marca-oscura:color-mix(in srgb,var(--marca) 70%,#fff); --sobre-marca:#16151A;
  --fondo:#121116; --superficie:#1D1C22; --tinta:#F2F0EB; --tinta-2:#B6B2BC; --linea:#36343D;
  --velo:rgb(0 0 0 / .6);
  --hm-cab-bg:color-mix(in srgb,#D9A441 38%,#1D1C22); /* cabecera de la hoja: se separa del cuerpo oscuro */
  --ok:#4ADE80; --aviso:#FBBF24; --error:#FB923C; --info:#93C5FD;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --sombra-alta:0 20px 50px -20px rgba(0,0,0,.8);
}
/* Cabecera de la hoja con color relativo: el tono de la marca con la luz topada (OKLCH ≤ .40 en claro; .36–.46 en
   oscuro, más clara que el cuerpo). Va aparte porque una variable no se invalida al declararla: sin @supports, un
   navegador sin color relativo dejaría la cabecera transparente. */
@supports (color:oklch(from red l c h)){
  :root{--hm-cab-bg:oklch(from #D9A441 min(l,.4) min(c,.14) h)}
  @media (prefers-color-scheme:dark){:root:not([data-tema=claro]){--hm-cab-bg:oklch(from #D9A441 clamp(.36,l,.46) min(c,.12) h)}}
  :root[data-tema=oscuro]{--hm-cab-bg:oklch(from #D9A441 clamp(.36,l,.46) min(c,.12) h)}
}
:root[data-tema=claro]{color-scheme:light}
:root[data-tema=oscuro]{color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent} /* sin destello gris al tocar: el foco visible es propio */
body{margin:0;min-height:100dvh;background:var(--fondo);color:var(--tinta);font:400 var(--t-texto)/1.5 var(--sans);touch-action:manipulation;-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
@media (pointer:coarse){input,select,textarea{font-size:16px}}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px}
img{max-width:100%;height:auto}
/* Controles: no se selecciona su texto al mantener presionado (el contenido sí se puede copiar). */
button,[role=button],[role=tab],[role=switch],summary{-webkit-user-select:none;user-select:none}
/* Instalada (inicio del celular) vs. navegador: .solo-navegador (p. ej. «Instalar») desaparece al instalarla.
   pwa.js pone html.instalada también en iOS (navigator.standalone). */
@media (display-mode:standalone){.solo-navegador{display:none!important}}
html.instalada .solo-navegador{display:none!important}
html:not(.instalada) .solo-instalada{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}