/* ---------- ASCELYAH · la capa de identidad ----------

   ASCELYAH ES LA MARCA DE LA PLATAFORMA desde el 22 de septiembre de 2026.
   Cada selector sigue colgando de `[data-marca="ascelyah"]`, que viene escrito
   en el <html> de index.html y que `marca.js` confirma: así FARMA-Enfermería,
   que se queda dormida en marca.js, se vería exactamente como era si algún
   día se volviera a ella, porque con su marca no engancha ni una regla.

   NO SE EDITA A MANO: sale de `preview-ascelyah/css/ascelyah.css` -donde se
   revisa la propuesta sin prefijos, que es más cómodo- pasado por
   `scripts/marca/aislar-css.mjs`. Editar aquí se pierde en el siguiente
   pase.

   La hoja trabaja REASIGNANDO LOS TOKENS que la plataforma ya consume
   (--rose-*, --ink-*, --brand-*, --surface-*, --font-*), no reescribiendo
   componentes. Por eso todo lo que lee esos tokens -incluidos los <canvas>
   de Vaccini, la feria y el Dashboard- cambia de identidad solo, sin que
   haya que tocarlo.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700&display=swap");

/* ===========================================================================
   ASCELYAH · propuesta de identidad local
   ---------------------------------------------------------------------------
   Esta hoja se carga después del sistema actual. La estructura, las funciones
   y los datos permanecen intactos; aquí sólo cambia la capa de identidad.
   Los cuatro anclajes salen del isotipo: azul clínico, turquesa, coral y dorado.
   =========================================================================== */

:root[data-marca="ascelyah"]{
  --asc-azul-950:#01294D;
  --asc-azul-900:#023C73;
  --asc-azul-800:#023C73;
  --asc-azul-700:#165C95;
  --asc-turquesa-700:#117E86;
  --asc-turquesa-600:#1FB4BC;
  --asc-turquesa-500:#3DC9D0;
  --asc-turquesa-300:#A8E8EA;
  --asc-turquesa-100:#E8F7F8;
  --asc-coral-700:#C9566D;
  --asc-coral-600:#E56F86;
  --asc-coral-500:#FA889C;
  --asc-coral-300:#FBC1CB;
  --asc-coral-100:#FFF0F2;
  --asc-niebla:#F3F9FA;
  --asc-fondo-100:#EDF5F6;
  --asc-fondo-200:#DFECEE;
  --asc-papel:#FFFFFF;
  --asc-tinta:#12384B;
  --asc-tinta-cuerpo:#315568;
  --asc-tinta-media:#446576;
  --asc-tinta-suave:#6F8996;
  --asc-borde:#D7E6E9;
  --asc-metal:#D59E2F;
  --asc-metal-claro:#EAD983;
  /* La palomita de la muestra elegida, recortada sobre el disco de acento. */
  --marca-elegida:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.8 6.3l2.6 2.6 5.8-5.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* Compatibilidad con los nombres de color que consume la plataforma. */
  --cream-50:var(--asc-niebla);
  --cream-100:var(--asc-fondo-100);
  --cream-200:var(--asc-fondo-200);
  --rose-100:var(--asc-turquesa-100);
  --rose-200:#CFEDEE;
  --rose-300:var(--asc-turquesa-300);
  --rose-400:var(--asc-coral-500);
  --rose-500:var(--asc-coral-600);
  --rose-600:var(--asc-turquesa-700);
  --rose-700:var(--asc-azul-800);
  --rose-900:var(--asc-azul-950);
  --ink-900:var(--asc-tinta);
  --ink-700:var(--asc-tinta-cuerpo);
  --ink-500:var(--asc-tinta-media);
  --ink-300:var(--asc-tinta-suave);
  --ink-100:var(--asc-borde);

  --brand-primary:var(--asc-azul-800);
  --brand-accent:var(--asc-turquesa-500);
  --brand-soft:var(--asc-coral-500);
  --brand-warm:var(--asc-coral-500);
  --surface-page:var(--asc-niebla);
  --surface-card:var(--asc-papel);
  --surface-sunken:var(--asc-fondo-100);
  --surface-tint:var(--asc-turquesa-100);
  --surface-invert:var(--asc-azul-800);
  --text-title:var(--asc-tinta);
  --text-body:var(--asc-tinta-cuerpo);
  --text-muted:var(--asc-tinta-media);
  --text-onbrand:#FFFFFF;
  --text-link:var(--asc-azul-800);
  --text-link-hover:var(--asc-turquesa-700);
  --border-subtle:var(--asc-borde);
  --border-strong:var(--asc-turquesa-500);
  --focus-ring:var(--asc-coral-500);
  --halo-1:color-mix(in srgb,var(--asc-turquesa-300) 86%,white);
  --halo-2:color-mix(in srgb,var(--asc-coral-300) 72%,white);
  --celestia-luz:var(--asc-turquesa-100);
  --celestia-rosa:var(--asc-turquesa-500);
  --celestia-viva:var(--asc-coral-500);
  --celestia-honda:var(--asc-azul-800);
  --realce:#FFFFFF;
  --cristal-rgb:255,255,255;
  --cristal:rgba(255,255,255,.48);
  --cristal-vivo:rgba(255,255,255,.7);
  --cristal-medio:rgba(255,255,255,.62);
  --cristal-borde:rgba(255,255,255,.8);
  --cristal-claro:rgba(255,255,255,.88);
  --cristal-claro-borde:rgba(255,255,255,.96);
  --cristal-borde-tenue:rgba(255,255,255,.62);

  --font-serif:"Sora","Segoe UI",sans-serif;
  --font-sans:"Manrope","Segoe UI",sans-serif;
  --font-display:"Sora","Segoe UI",sans-serif;
  --font-heading:"Sora","Segoe UI",sans-serif;
  --font-body:"Manrope","Segoe UI",sans-serif;
  --font-ui:"Manrope","Segoe UI",sans-serif;
  --ls-display:-.025em;

  --shadow-xs:0 2px 5px color-mix(in srgb,var(--asc-azul-800) 8%,transparent);
  --shadow-sm:0 7px 18px color-mix(in srgb,var(--asc-azul-800) 10%,transparent);
  --shadow-md:0 16px 36px color-mix(in srgb,var(--asc-azul-800) 12%,transparent);
  --shadow-lg:0 28px 70px color-mix(in srgb,var(--asc-azul-950) 17%,transparent);
  --shadow-focus:0 0 0 4px color-mix(in srgb,var(--asc-coral-500) 28%,transparent);
}

:root[data-marca="ascelyah"][data-tema="oscuro"]{
  --cristal-rgb:8,20,28;
  --cream-50:color-mix(in srgb,var(--asc-azul-950) 72%,#02070A);
  --cream-100:color-mix(in srgb,var(--asc-azul-950) 80%,#081218);
  --cream-200:color-mix(in srgb,var(--asc-azul-900) 70%,#0B1720);
  --ink-900:#F1FAFB;
  --ink-700:#D5E7EA;
  --ink-500:#A8C0C9;
  --ink-300:#718F9B;
  --ink-100:color-mix(in srgb,var(--asc-turquesa-500) 28%,var(--cream-50));
  --surface-page:var(--cream-50);
  --surface-card:color-mix(in srgb,var(--cream-100) 88%,var(--asc-turquesa-700));
  --surface-sunken:color-mix(in srgb,var(--cream-50) 82%,#000);
  --surface-tint:color-mix(in srgb,var(--asc-turquesa-500) 16%,transparent);
  --surface-invert:var(--asc-turquesa-500);
  --text-title:#F2FBFC;
  --text-body:#D5E7EA;
  --text-muted:#A8C0C9;
  --text-onbrand:var(--asc-azul-950);
  --brand-primary:color-mix(in srgb,var(--asc-turquesa-500) 82%,white);
  --brand-accent:color-mix(in srgb,var(--asc-turquesa-500) 68%,white);
  --brand-soft:color-mix(in srgb,var(--asc-coral-500) 82%,white);
  --text-link:color-mix(in srgb,var(--asc-turquesa-500) 68%,white);
  --text-link-hover:color-mix(in srgb,var(--asc-turquesa-300) 74%,white);
  --border-subtle:color-mix(in srgb,var(--asc-turquesa-300) 16%,transparent);
  --border-strong:color-mix(in srgb,var(--asc-turquesa-500) 82%,white);
  --focus-ring:color-mix(in srgb,var(--asc-coral-500) 82%,white);
  --halo-1:color-mix(in srgb,var(--asc-turquesa-500) 74%,transparent);
  --halo-2:color-mix(in srgb,var(--asc-coral-500) 58%,transparent);
  --realce:color-mix(in srgb,var(--asc-turquesa-500) 68%,white);
  --cristal:color-mix(in srgb,var(--surface-page) 56%,transparent);
  --cristal-vivo:color-mix(in srgb,var(--surface-card) 74%,transparent);
  --cristal-medio:color-mix(in srgb,var(--surface-card) 70%,transparent);
  --cristal-borde:color-mix(in srgb,var(--asc-turquesa-300) 18%,transparent);
  --cristal-claro:color-mix(in srgb,var(--surface-card) 90%,transparent);
  --cristal-claro-borde:color-mix(in srgb,var(--asc-turquesa-300) 20%,transparent);
  --cristal-borde-tenue:color-mix(in srgb,var(--asc-turquesa-300) 12%,transparent);
  --shadow-xs:0 2px 7px rgba(0,0,0,.32);
  --shadow-sm:0 8px 22px rgba(0,0,0,.38);
  --shadow-md:0 18px 42px rgba(0,0,0,.44);
  --shadow-lg:0 32px 76px rgba(0,0,0,.56);
}

html[data-marca="ascelyah"]{background:var(--surface-page)}
[data-marca="ascelyah"] body{
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 8%,color-mix(in srgb,var(--asc-turquesa-500) 10%,transparent),transparent 34rem),
    radial-gradient(circle at 92% 88%,color-mix(in srgb,var(--asc-coral-500) 10%,transparent),transparent 36rem),
    var(--surface-page);
  letter-spacing:-.005em;
}

[data-marca="ascelyah"] h1,
[data-marca="ascelyah"] h2,
[data-marca="ascelyah"] h3,
[data-marca="ascelyah"] h4{letter-spacing:-.025em}
[data-marca="ascelyah"] button,
[data-marca="ascelyah"] input,
[data-marca="ascelyah"] select,
[data-marca="ascelyah"] textarea{letter-spacing:-.005em}
[data-marca="ascelyah"] ::selection{background:var(--asc-coral-300);color:var(--asc-azul-950)}

/* La cabecera se vuelve una cinta clínica, ligera pero inequívocamente nueva. */
[data-marca="ascelyah"] .cabecera{
  background:color-mix(in srgb,var(--surface-card) 84%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--asc-turquesa-500) 28%,var(--border-subtle));
  box-shadow:0 8px 26px color-mix(in srgb,var(--asc-azul-800) 5.5%,transparent);
  backdrop-filter:blur(22px) saturate(1.2);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);
}
[data-marca="ascelyah"] .cabecera .contenedor{height:76px}
[data-marca="ascelyah"] .marca{gap:.7rem}
[data-marca="ascelyah"] .marca img{
  width:52px;height:52px;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;object-fit:contain;
}
[data-marca="ascelyah"] .nav{gap:.35rem}
[data-marca="ascelyah"] .nav button{
  font-family:var(--font-ui);font-size:.91rem;font-weight:650;
  padding:.58rem .85rem;border:1px solid transparent;
}
[data-marca="ascelyah"] .nav button:hover{
  background:var(--asc-turquesa-100);color:var(--asc-azul-900);
  border-color:color-mix(in srgb,var(--asc-turquesa-500) 18%,transparent);
}
[data-marca="ascelyah"] .nav button[aria-current="page"]{
  background:var(--asc-azul-800);color:#fff;
  box-shadow:0 5px 14px color-mix(in srgb,var(--asc-azul-800) 18%,transparent);
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .nav button:hover{background:color-mix(in srgb,var(--asc-turquesa-500) 15%,transparent);color:var(--text-title)}
:root[data-marca="ascelyah"][data-tema="oscuro"] .nav button[aria-current="page"]{background:var(--asc-turquesa-500);color:var(--asc-azul-950)}

/* ---------- LA CABECERA: EL LOGOTIPO A LA IZQUIERDA, LAS SECCIONES EN MEDIO ----------

   Lo pidió Ernesto al hacer de Ascelyah la marca de la plataforma: el nombre
   con el MISMO tratamiento que en la tarjeta de acceso -el logotipo, no un
   texto-, a la izquierda y en espejo del perfil; a la derecha, junto a la
   campana y el perfil, sólo el isotipo; y las secciones en el centro, con el
   mismo aire a los dos lados.

   Por eso es una REJILLA de tres columnas: cada lateral mide lo que mide su
   contenido y la barra se queda con todo lo de en medio, con el MISMO hueco a
   cada lado (el `gap`), que es lo que pidió. Se probó con los dos laterales
   del mismo ancho, para centrar la barra en la página, y el hueco salía
   desigual -49 px contra 80, medido a 1440-, porque el logotipo es más ancho
   que el grupo de la derecha. Cuando las secciones caben, se centran dentro
   de su hueco con los márgenes automáticos del primer y el último botón, que
   a diferencia de `justify-content:center` no recortan nada si luego dejan de
   caber.

   Cuando no caben, la barra se desplaza y lo que sale por un borde SE
   DESVANECE. Son los velos que ya ponía `velosDeLaBarra` (inicio.js), sólo en
   el lado donde de verdad hay más; aquí se ensanchan para que ningún botón
   llegue a rozar el logotipo ni el grupo de la derecha. */
[data-marca="ascelyah"] .cabecera .contenedor{
  display:grid;align-items:center;gap:var(--sp-5);
  grid-template-columns:max-content minmax(0,1fr) max-content;
}
[data-marca="ascelyah"] .nav > button:first-child{margin-left:auto}
[data-marca="ascelyah"] .nav > button:last-child{margin-right:auto}
[data-marca="ascelyah"] .marca{justify-self:start;min-width:0}
[data-marca="ascelyah"] .marca > img:not(.marca-logotipo){display:none}
[data-marca="ascelyah"] .marca img.marca-logotipo{
  display:block;width:auto;height:34px;max-width:100%;object-fit:contain;
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .marca img.marca-logotipo{
  content:url("../assets/ascelyah-logotipo-claro.png");
}
[data-marca="ascelyah"] .nav{margin-left:0}
[data-marca="ascelyah"] .nav.hay-antes{--velo-izq:40px}
[data-marca="ascelyah"] .nav.hay-despues{--velo-der:40px}
[data-marca="ascelyah"] .cabecera-acciones{justify-self:end;margin-left:0}
/* Sin isotipo junto a la campana (v391): lo quitó Ernesto. El símbolo ya
   está en el centro de la pantalla de inicio y el nombre a la izquierda;
   repetirlo aquí era el mismo logo dos veces. */

[data-marca="ascelyah"] .campana-btn,
[data-marca="ascelyah"] .perfil-circulo{
  border:1px solid color-mix(in srgb,var(--asc-turquesa-500) 30%,var(--border-subtle));
  box-shadow:var(--shadow-xs);
}
[data-marca="ascelyah"] .campana-btn{background:var(--surface-card);color:var(--asc-azul-800)}
[data-marca="ascelyah"] .campana-btn:hover{background:var(--asc-turquesa-100);color:var(--asc-turquesa-700)}
/* En oscuro la campana era azul marino sobre una tarjeta casi del mismo
   azul: el icono no se veía. Va en el color de los títulos. */
:root[data-marca="ascelyah"][data-tema="oscuro"] .campana-btn{color:var(--text-title)}
:root[data-marca="ascelyah"][data-tema="oscuro"] .campana-btn:hover{
  background:color-mix(in srgb,var(--asc-turquesa-500) 16%,var(--surface-card));
  color:var(--text-title);
}
/* El degradado del círculo acababa en el turquesa claro, y la inicial
   blanca se quedaba en 2,92 de contraste en su extremo (medido en una
   captura, no calculado). Acaba en un turquesa hondo, del lado del azul. */
[data-marca="ascelyah"] .perfil-circulo{
  background:linear-gradient(145deg,var(--asc-azul-800),color-mix(in srgb,var(--asc-turquesa-700) 60%,var(--asc-azul-800)));
  color:#fff;outline:3px solid color-mix(in srgb,var(--asc-coral-500) 15%,transparent);
}

/* El isotipo se muestra solo, sin placa, fondo ni palabra de marca. */
[data-marca="ascelyah"] .marca img,
[data-marca="ascelyah"] .logo-central,
[data-marca="ascelyah"] .cabecera-seccion .logo-seccion img,
[data-marca="ascelyah"] .feria-informe-logo,
[data-marca="ascelyah"] .vac-informe-logo{
  filter:none !important;
}
[data-marca="ascelyah"] .logo-central{
  width:var(--logo-inicio);height:var(--logo-inicio);padding:0;
  border:0;border-radius:0;background:transparent;
  box-shadow:none;object-fit:contain;
  filter:drop-shadow(0 24px 34px color-mix(in srgb,var(--asc-azul-800) 16%,transparent)) !important;
}
/* EN OSCURO, EL ISOTIPO CON UN CANTO DE LUZ. Sus piezas azul marino -el
   estetoscopio y el libro- son casi del color del fondo y se perdían: el
   anillo se veía y lo de dentro no. Un canto de un píxel en turquesa muy
   claro las recorta contra el fondo sin cambiar el dibujo, y un halo suave lo
   separa del plano. Sólo en oscuro: en claro el azul ya contrasta. */
:root[data-marca="ascelyah"][data-tema="oscuro"] .logo-central{
  box-shadow:none;
  filter:drop-shadow(0 0 1px color-mix(in srgb,var(--asc-turquesa-100) 70%,transparent))
         drop-shadow(0 0 20px color-mix(in srgb,var(--asc-turquesa-500) 26%,transparent))
         drop-shadow(0 26px 38px rgba(0,0,0,.38)) !important;
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .cabecera-seccion .logo-seccion img{
  filter:drop-shadow(0 0 .75px color-mix(in srgb,var(--asc-turquesa-100) 75%,transparent)) !important;
}
[data-marca="ascelyah"] .cabecera-seccion .logo-seccion{
  width:78px;height:78px;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;
}
[data-marca="ascelyah"] .cabecera-seccion .logo-seccion img{border-radius:0;object-fit:contain}
[data-marca="ascelyah"] .cabecera-seccion h2{color:var(--asc-azul-800);font-weight:700}
:root[data-marca="ascelyah"][data-tema="oscuro"] .cabecera-seccion h2{color:color-mix(in srgb,var(--asc-turquesa-500) 68%,white)}
[data-marca="ascelyah"] .cabecera-seccion .intro{max-width:62ch;color:var(--text-muted)}

/* El halo mezcla las tres voces de la marca, sin introducir un cuarto tono. */
[data-marca="ascelyah"] .halo i:nth-child(1){
  background:radial-gradient(closest-side circle at 42% 42%,color-mix(in srgb,var(--asc-turquesa-500) 82%,transparent),color-mix(in srgb,var(--asc-turquesa-300) 50%,transparent) 45%,color-mix(in srgb,var(--asc-turquesa-300) 12%,transparent) 74%,transparent 100%);
}
[data-marca="ascelyah"] .halo i:nth-child(2){
  background:radial-gradient(closest-side circle at 59% 43%,color-mix(in srgb,var(--asc-coral-500) 62%,transparent),color-mix(in srgb,var(--asc-coral-300) 42%,transparent) 48%,color-mix(in srgb,var(--asc-coral-300) 10%,transparent) 76%,transparent 100%);
}
[data-marca="ascelyah"] .halo i:nth-child(3){
  background:radial-gradient(closest-side circle at 51% 61%,color-mix(in srgb,var(--asc-azul-800) 28%,transparent),color-mix(in srgb,var(--asc-turquesa-500) 25%,transparent) 50%,color-mix(in srgb,var(--asc-turquesa-500) 6%,transparent) 76%,transparent 100%);
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .halo i:nth-child(1){
  background:radial-gradient(closest-side circle at 42% 42%,color-mix(in srgb,var(--asc-turquesa-500) 74%,transparent),color-mix(in srgb,var(--asc-turquesa-700) 42%,transparent) 45%,transparent 78%);
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .halo i:nth-child(2){
  background:radial-gradient(closest-side circle at 59% 43%,color-mix(in srgb,var(--asc-coral-500) 48%,transparent),color-mix(in srgb,var(--asc-coral-700) 28%,transparent) 48%,transparent 78%);
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .halo i:nth-child(3){
  background:radial-gradient(closest-side circle at 51% 61%,color-mix(in srgb,var(--asc-azul-800) 62%,transparent),color-mix(in srgb,var(--asc-turquesa-500) 22%,transparent) 50%,transparent 78%);
}

/* Los iconos ilustrados ya incorporan la paleta: no deben rotarse por tema. */
[data-marca="ascelyah"] .orbe .cara img,
[data-marca="ascelyah"] .azulejo-icono img,
[data-marca="ascelyah"] .icono-ilustrado img,
[data-marca="ascelyah"] .juego-carta-icono img,
[data-marca="ascelyah"] .omnia-logo,
[data-marca="ascelyah"] .omnia-logo-grande,
[data-marca="ascelyah"] .omnia-orbe-logo,
[data-marca="ascelyah"] .omnia-dosis-logo{
  filter:none !important;
}
[data-marca="ascelyah"] .orbe .cara img{filter:drop-shadow(0 10px 13px color-mix(in srgb,var(--asc-azul-800) 15%,transparent)) !important}
[data-marca="ascelyah"] .orbe:hover .cara img,
[data-marca="ascelyah"] .orbe:focus-visible .cara img{
  transform:translateY(-3px) scale(1.06);
  filter:drop-shadow(0 16px 20px color-mix(in srgb,var(--asc-azul-800) 22%,transparent)) !important;
}
[data-marca="ascelyah"] .orbe .nombre{
  font-family:var(--font-ui);font-size:.88rem;font-weight:750;
  letter-spacing:-.015em;color:var(--asc-azul-900);
  background:color-mix(in srgb,var(--surface-card) 90%,transparent);
  border:1px solid color-mix(in srgb,var(--asc-turquesa-500) 25%,var(--border-subtle));
  box-shadow:var(--shadow-xs);padding:.35rem .65rem;border-radius:999px;
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .orbe .nombre{color:var(--text-title);background:color-mix(in srgb,var(--surface-card) 82%,transparent)}

/* Las superficies conservan la estructura y los estados del código base. */
[data-marca="ascelyah"] .azulejo h3,
[data-marca="ascelyah"] .tarjeta h3,
[data-marca="ascelyah"] .juego-carta h3{color:var(--asc-azul-800)}
:root[data-marca="ascelyah"][data-tema="oscuro"] .azulejo h3,
:root[data-marca="ascelyah"][data-tema="oscuro"] .tarjeta h3,
:root[data-marca="ascelyah"][data-tema="oscuro"] .juego-carta h3{color:color-mix(in srgb,var(--asc-turquesa-500) 68%,white)}

[data-marca="ascelyah"] .boton{
  background:var(--asc-azul-800);color:#fff;border:1px solid var(--asc-azul-800);
  box-shadow:0 8px 20px color-mix(in srgb,var(--asc-azul-800) 18%,transparent);font-weight:700;
}
[data-marca="ascelyah"] .boton:hover{background:var(--asc-azul-700);border-color:var(--asc-azul-700);box-shadow:0 12px 26px color-mix(in srgb,var(--asc-azul-800) 23%,transparent)}
[data-marca="ascelyah"] .acceso .boton{
  background:linear-gradient(135deg,color-mix(in srgb,var(--asc-azul-800) 94%,transparent),color-mix(in srgb,var(--asc-azul-950) 96%,transparent));
  border-color:color-mix(in srgb,var(--asc-turquesa-500) 36%,transparent);
}
[data-marca="ascelyah"] .acceso .boton:hover{
  background:linear-gradient(135deg,color-mix(in srgb,var(--asc-azul-700) 98%,transparent),color-mix(in srgb,var(--asc-azul-800) 98%,transparent));
}
[data-marca="ascelyah"] .acceso .boton[disabled]:hover{
  background:linear-gradient(135deg,color-mix(in srgb,var(--asc-azul-800) 94%,transparent),color-mix(in srgb,var(--asc-azul-950) 96%,transparent));
}
[data-marca="ascelyah"] .acceso .boton.fantasma{
  background:rgba(255,255,255,.38);color:var(--asc-azul-800);
  border-color:color-mix(in srgb,var(--asc-turquesa-500) 45%,transparent);box-shadow:none;
}
[data-marca="ascelyah"] .acceso .boton.fantasma:hover{
  background:var(--asc-turquesa-100);color:var(--asc-azul-900);
  border-color:var(--asc-turquesa-500);
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .acceso .boton.fantasma{
  background:color-mix(in srgb,var(--asc-turquesa-500) 10%,transparent);color:var(--asc-turquesa-300);border-color:color-mix(in srgb,var(--asc-turquesa-500) 35%,transparent);
}
[data-marca="ascelyah"] .boton:focus-visible,
[data-marca="ascelyah"] .campana-btn:focus-visible,
[data-marca="ascelyah"] .nav button:focus-visible,
[data-marca="ascelyah"] .orbe:focus-visible{outline:3px solid color-mix(in srgb,var(--asc-coral-500) 54%,transparent);outline-offset:3px}
[data-marca="ascelyah"] .boton-suave,
[data-marca="ascelyah"] .perfil-opcion,
[data-marca="ascelyah"] .acceso-enlace{
  color:var(--asc-azul-800);border-color:color-mix(in srgb,var(--asc-turquesa-500) 28%,transparent);
}
[data-marca="ascelyah"] .boton-suave:hover,
[data-marca="ascelyah"] .perfil-opcion:hover{background:var(--asc-turquesa-100)}
:root[data-marca="ascelyah"][data-tema="oscuro"] .boton{background:var(--asc-turquesa-500);border-color:var(--asc-turquesa-500);color:var(--asc-azul-950)}
:root[data-marca="ascelyah"][data-tema="oscuro"] .boton:hover{background:color-mix(in srgb,var(--asc-turquesa-500) 82%,white);border-color:color-mix(in srgb,var(--asc-turquesa-500) 82%,white)}
:root[data-marca="ascelyah"][data-tema="oscuro"] .boton-suave,
:root[data-marca="ascelyah"][data-tema="oscuro"] .perfil-opcion,
:root[data-marca="ascelyah"][data-tema="oscuro"] .acceso-enlace{color:color-mix(in srgb,var(--asc-turquesa-500) 68%,white)}

/* LAS DOS VARIANTES SECUNDARIAS, CON SU FONDO QUITADO A CONCIENCIA.
   `.boton` pinta el fondo, y aquí su selector pesa lo mismo que
   `.boton.boton-suave` y `.boton.fantasma` de la casa, que además llegan
   antes: ganaba el fondo de `.boton`. Con `.boton-suave` el texto ERA DEL
   MISMO COLOR que ese fondo -contraste 1,0 en claro y 1,3 en oscuro, medidos
   en «♪ Música» e «Iniciar Sesión» del Quiz: botones sin texto-, y con
   `.fantasma` todo botón secundario se pintaba como el principal. Se quita el
   fondo aquí, con más peso. */
[data-marca="ascelyah"] .boton.boton-suave,
[data-marca="ascelyah"] .boton.fantasma{
  background:transparent;box-shadow:none;color:var(--asc-azul-800);
  border-color:color-mix(in srgb,var(--asc-turquesa-500) 40%,transparent);
}
[data-marca="ascelyah"] .boton.boton-suave:hover,
[data-marca="ascelyah"] .boton.fantasma:hover{
  background:var(--asc-turquesa-100);color:var(--asc-azul-900);
  border-color:var(--asc-turquesa-500);box-shadow:none;
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .boton.boton-suave,
:root[data-marca="ascelyah"][data-tema="oscuro"] .boton.fantasma{
  background:transparent;color:color-mix(in srgb,var(--asc-turquesa-500) 68%,white);
  border-color:color-mix(in srgb,var(--asc-turquesa-500) 42%,transparent);
}
:root[data-marca="ascelyah"][data-tema="oscuro"] .boton.boton-suave:hover,
:root[data-marca="ascelyah"][data-tema="oscuro"] .boton.fantasma:hover{
  background:color-mix(in srgb,var(--asc-turquesa-500) 16%,transparent);
  color:var(--text-title);border-color:var(--asc-turquesa-500);
}

/* El filtro elegido del centro de avisos llevaba los tokens de la casa
   -`--rose-200` y `--brand-primary`-, que en el oscuro de Ascelyah son dos
   turquesas casi iguales: 1,56 de contraste en «Todas». Va como la píldora
   de la sección abierta en la barra, que es la misma idea. */
[data-marca="ascelyah"] .notis-filtro-btn.activo{background:var(--asc-azul-800);color:#fff}
:root[data-marca="ascelyah"][data-tema="oscuro"] .notis-filtro-btn.activo{background:var(--asc-turquesa-500);color:var(--asc-azul-950)}
:root[data-marca="ascelyah"][data-tema="oscuro"] .notis-filtro-btn:hover{
  background:color-mix(in srgb,var(--asc-turquesa-500) 16%,transparent);color:var(--text-title);
}

/* «Viva Atenuada», en Vaccini: el ámbar de aviso sobre su propio fondo ámbar
   daba 2,77. Se oscurece la letra, no el fondo, que es el que dice «cuidado». */
[data-marca="ascelyah"] .vac-viva{color:color-mix(in srgb,var(--warning-500) 55%,#2b1a00)}
/* Y en oscuro, al revés: sobre el ámbar apagado del fondo, la letra se aclara. */
:root[data-marca="ascelyah"][data-tema="oscuro"] .vac-viva{color:color-mix(in srgb,var(--warning-500) 62%,white)}

[data-marca="ascelyah"] .entrada,
[data-marca="ascelyah"] .buscador-barra{
  background:color-mix(in srgb,var(--surface-card) 92%,transparent);
  border-color:color-mix(in srgb,var(--asc-turquesa-500) 32%,var(--border-subtle));
}
[data-marca="ascelyah"] .entrada:focus-within,
[data-marca="ascelyah"] .buscador-barra:focus-within{
  border-color:var(--asc-turquesa-500);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--asc-turquesa-500) 14%,transparent),0 8px 24px color-mix(in srgb,var(--asc-azul-800) 9%,transparent);
}
/* ---------- EL SELECTOR DE TRIADAS ----------

   Cuatro opciones, y cada una es un SISTEMA con nombre y descripcion: no un
   punto de color, sino una fila que se lee. Por eso es una lista y no una
   rejilla de discos como la de la casa.

   AQUI ESTABA EL DESTROZO, y no era que estuvieran apinadas: estaban
   DESBORDADAS. `app.css` le da a `.muestra-color` un `aspect-ratio:1`, que es
   lo que hace redondos los catorce discos de FARMA-Enfermeria; estas reglas
   no lo anulaban, asi que cada azulejo se volvia un CUADRADO tan alto como
   ancho. Medido: 345 x 345 px cada uno, 1.409 px de alto el bloque entero
   dentro de un menu de perfil que mide 320 px de ancho como mucho.

   Y las columnas tampoco pueden ser dos fijas. El menu tiene
   `min-width:260px; max-width:min(320px,90vw)` con `--sp-4` de relleno a cada
   lado: por dentro quedan entre 228 y 288 px, o sea unos 140 px por columna,
   donde no cabe ni el nombre. Con `auto-fit` la rejilla decide: una columna
   en el menu, dos si algun dia esto se pinta en un sitio ancho. */
[data-marca="ascelyah"] #perfil-colores{
  display:grid !important;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:8px;width:100%;
}
[data-marca="ascelyah"] #perfil-colores[hidden]{display:none !important}
[data-marca="ascelyah"] #perfil-colores .muestra-color{
  aspect-ratio:auto;                      /* lo que traia app.css para los discos */
  width:100%;min-height:0;margin:0;padding:9px 11px;
  display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:11px;
  border:1px solid var(--border-subtle);border-radius:14px;
  background:var(--surface-card);color:var(--text-body);text-align:left;
  box-shadow:var(--shadow-xs);cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
[data-marca="ascelyah"] #perfil-colores .muestra-color:hover{transform:translateY(-1px);border-color:var(--asc-turquesa-500)}
[data-marca="ascelyah"] #perfil-colores .muestra-color>.muestra-triada{
  width:34px;height:34px;border-radius:10px;overflow:hidden;
  display:grid;grid-template-columns:repeat(3,1fr);
  box-shadow:var(--shadow-xs);border:1px solid color-mix(in srgb,var(--asc-papel) 62%,transparent);
}
[data-marca="ascelyah"] #perfil-colores .muestra-triada i{display:block;width:100%;height:100%}
[data-marca="ascelyah"] #perfil-colores .muestra-triada i:nth-child(1){background:var(--muestra-base)}
[data-marca="ascelyah"] #perfil-colores .muestra-triada i:nth-child(2){background:var(--muestra-acento)}
[data-marca="ascelyah"] #perfil-colores .muestra-triada i:nth-child(3){background:var(--muestra-calido)}
[data-marca="ascelyah"] #perfil-colores .muestra-color>.muestra-nombre{
  width:auto;height:auto;border:0;border-radius:0;background:none;
  display:flex;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;
  color:inherit;box-shadow:none;
}
/* La jerarquia va DENTRO del azulejo: el nombre manda, la descripcion
   acompana. Se subieron los dos cuerpos -venian a .78 y .61 rem, que en un
   menu de 260 px se leen con esfuerzo- y la descripcion se recorta con
   puntos suspensivos en vez de partirse en dos lineas y descuadrar la fila. */
[data-marca="ascelyah"] #perfil-colores .muestra-nombre strong{font:700 .86rem/1.25 var(--font-ui);color:var(--text-title)}
[data-marca="ascelyah"] #perfil-colores .muestra-nombre small{margin-top:2px;font:.7rem/1.3 var(--font-ui);color:var(--text-muted);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* La elegida se lee por el aro Y por una marca de verificacion, no solo por
   el color del borde: quien no distinga bien el turquesa del gris tiene que
   poder ver cual esta puesta. La marca ocupa la tercera columna, que esta
   reservada en la rejilla para que el nombre no se mueva al aparecer. */
[data-marca="ascelyah"] #perfil-colores .muestra-color::after{
  content:"";width:16px;height:16px;border-radius:50%;
  background:var(--asc-turquesa-500);
  opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease;
  -webkit-mask:var(--marca-elegida) center/10px 10px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask:var(--marca-elegida) center/10px 10px no-repeat,linear-gradient(#000,#000);
  mask-composite:exclude;
}
[data-marca="ascelyah"] #perfil-colores .muestra-color.elegida::after{opacity:1;transform:scale(1)}
[data-marca="ascelyah"] #perfil-colores .muestra-color.elegida{
  border-color:var(--asc-turquesa-500);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--asc-turquesa-500) 18%,transparent),var(--shadow-sm);
}
[data-marca="ascelyah"] #perfil-colores .muestra-color:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* El texto de ejemplo de los campos, en el gris apagado ENTERO. Iba al 72 %
   de opacidad y esa transparencia lo dejaba en 3,34 en claro y 4,34 en
   oscuro, por debajo del 4,5 que pide la lectura. Sigue viéndose más flojo
   que lo que se escribe, que va en el color del texto. */
[data-marca="ascelyah"] input::placeholder,
[data-marca="ascelyah"] textarea::placeholder{color:var(--text-muted)}

[data-marca="ascelyah"] .notificaciones-cuenta,
[data-marca="ascelyah"] .perfil-cuenta,
[data-marca="ascelyah"] .chip,
[data-marca="ascelyah"] .etiqueta{
  background:var(--asc-coral-500);color:var(--asc-azul-950);
}

/* ---------- EL NOMBRE EN EL ACCESO ----------
   Ya no es texto: es EL LOGOTIPO del logo, con su onda turquesa y oro y su
   corazón rosa. Ninguna fuente da ese tratamiento, así que se recorta del
   propio logotipo (scripts/marca/extraer-logotipo.mjs) y se sirve como PNG
   con alfa. El `<p>` de texto se queda en el marcado -lo usa la marca de la
   casa- y aquí se esconde. */
/* SÓLO el de la tarjeta de entrar, no todos. `.acceso-intro` lo comparten las
   tres tarjetas del acceso, y en las otras dos NO es el nombre de la marca: es
   la explicación de qué se pide («Escriba un correo aceptado en la base de
   datos…», «Llene el siguiente formulario…»). Ocultándolos todos, «Recupere su
   Contraseña» y «Solicitud de Acceso» se quedaban con el título y los campos a
   pelo, sin decir para qué. */
[data-marca="ascelyah"] #caja-entrar .acceso-intro{display:none}
[data-marca="ascelyah"] .acceso-logotipo{
  display:block;width:min(248px,72%);height:auto;
  /* SÓLO centrado: el hueco de debajo lo pone el `gap` de `.acceso-caja`, que
     es el mismo que separa todo lo demás de la tarjeta. Llevaba además un
     margen inferior propio, y eso es justo lo que rompe la uniformidad: el
     logotipo se separaba del primer campo más que los campos entre sí.

     Aquí encima iba una píldora bicolor -media turquesa, media coral- que
     Ernesto mandó retirar. Se quitó entera; el logotipo pasa a ser lo primero
     de la tarjeta y el aire de arriba es el relleno propio de la caja. */
  margin-inline:auto;
}
/* En oscuro el azul marino de la letra no se lee sobre una superficie oscura.
   Se cambia por la copia con la letra aclarada, que conserva intactos la onda
   y el corazón: un `invert()` de CSS habría estropeado los tres colores. */
:root[data-marca="ascelyah"][data-tema="oscuro"] .acceso-logotipo{
  content:url("../assets/ascelyah-logotipo-claro.png");
}
/* Los documentos imprimibles también reciben la nueva marca, aunque siempre
   conserven fondo blanco para una impresión legible. */
[data-marca="ascelyah"] .feria-informe,
[data-marca="ascelyah"] .vac-informe{
  --cream-50:#F3F9FA;--cream-100:#EDF5F6;--cream-200:#DFECEE;
  --ink-900:#12384B;--ink-700:#315568;--ink-500:#446576;--ink-300:#8AA0AB;--ink-100:#D8E4E8;
  --rose-100:#E8F7F8;--rose-200:#D3F2F3;--rose-300:#A8E8EA;
  --rose-500:#FA889C;--rose-600:#117E86;--rose-700:#023C73;
  --surface-card:#FFFFFF;--surface-page:#F3F9FA;--surface-sunken:#EDF5F6;--surface-tint:#E5F7F7;
  --text-title:#12384B;--text-body:#315568;--text-muted:#446576;--text-onbrand:#FFFFFF;
  --brand-primary:#023C73;--brand-accent:#3DC9D0;
  --border-subtle:#D8E4E8;--border-strong:#3DC9D0;
  --halo-1:#D3F2F3;--halo-2:#FFF0F2;--realce:#FFFFFF;
}
[data-marca="ascelyah"] .avatar-circulo-docente,
[data-marca="ascelyah"] .btn-publicar-definitivo,
[data-marca="ascelyah"] .revision-estado-publicada,
[data-marca="ascelyah"] .revision-banner-publicada,
[data-marca="ascelyah"] .revision-publicar-caja,
[data-marca="ascelyah"] .juego-overlay-caja{
  --brand-primary:var(--asc-azul-800);
  --brand-accent:var(--asc-turquesa-500);
}
[data-marca="ascelyah"] .reto-av-cinta{fill:var(--asc-coral-500)}


/* En paneles de vista previa bajos, la composición del acceso necesita
   convertirse en una columna desplazable para no sacar el logotipo del área
   visible. En una ventana normal se conserva la coreografía original. */
@media (max-width:859px) and (max-height:650px){
  [data-marca="ascelyah"] body.accediendo #vista-inicio{margin-top:0;min-height:730px;align-items:flex-start}
  [data-marca="ascelyah"] body.accediendo .escenario{
    display:block;min-height:730px;padding-top:22px;
    transform:none !important;
  }
  [data-marca="ascelyah"] body.accediendo .logo-central{margin:0 auto}
  [data-marca="ascelyah"] body.accediendo .acceso{top:calc(22px + var(--logo-inicio) + 24px)}
}

@media (max-width:700px){
  [data-marca="ascelyah"] .cabecera .contenedor{height:70px}
  [data-marca="ascelyah"] .marca img{width:46px;height:46px;border-radius:0}
  [data-marca="ascelyah"] .logo-central{padding:0;box-shadow:none}
  /* En un teléfono no cabe todo en una fila de 70 px: el logotipo se
     achica, el isotipo de la derecha se va -el logotipo ya dice de quién es
     la plataforma- y los huecos se estrechan para dejarle sitio a la barra.
     Los velos siguen ahí, así que nada roza. */
  [data-marca="ascelyah"] .cabecera .contenedor{gap:var(--sp-3)}
  [data-marca="ascelyah"] .marca img.marca-logotipo{height:22px}
  [data-marca="ascelyah"] .nav.hay-antes{--velo-izq:24px}
  [data-marca="ascelyah"] .nav.hay-despues{--velo-der:24px}
}
/* Y en los más estrechos, un poco más de sitio todavía: medido a 360, a la
   barra le quedaban 72 px y el velo se comía media píldora del botón activo.
   Los 16 px de margen son los de cualquier teléfono. */
@media (max-width:420px){
  [data-marca="ascelyah"] .cabecera .contenedor{padding-inline:var(--sp-4);gap:var(--sp-2)}
  [data-marca="ascelyah"] .marca img.marca-logotipo{height:19px}
}

@media (max-width:500px){
}

@media (prefers-reduced-motion:reduce){
}

/* ===========================================================================
   LA MARCA COMPARTIDA
   ---------------------------------------------------------------------------
   Lo de aquí abajo existe porque index.html es UNO SOLO y está escrito en la
   marca de la casa. En la carpeta de revisión no hacía falta: allí el
   marcado ya venía cambiado.
   =========================================================================== */

/* La palabra «FARMA · Enfermería» de la cabecera. El isotipo de Ascelyah ya
   lleva el nombre dentro, así que repetirlo al lado lo diría dos veces. */
[data-marca="ascelyah"] .marca-texto{display:none}

/* EL CAMBIO DE LOGOTIPO, DESDE EL PRIMER FOTOGRAMA.

   `marca.js` pone el isotipo en cuanto el documento está leído, pero para
   entonces el navegador ya ha podido pintar el logotipo de la casa, y se
   vería el parpadeo de una marca a la otra justo al abrir.

   Estas reglas lo sustituyen antes de que corra un solo script. Y DEJAN DE
   ENGANCHAR SOLAS: el selector mira el atributo `src`, que es vivo, así que
   en cuanto marca.js escribe el isotipo -o iconos-tema.js escribe la versión
   reteñida para Horizonte, Botánica u Orquídea- la regla ya no casa y suelta
   la imagen. Sin eso, `content` ganaría siempre y el isotipo se quedaría en
   la paleta de Ascelyah aunque la paleta activa fuera otra. */
[data-marca="ascelyah"] .marca img[src*="assets/logo.png"],
[data-marca="ascelyah"] .logo-central[src*="assets/logo.png"],
[data-marca="ascelyah"] .cabecera-seccion .logo-seccion img[src*="assets/logo.png"]{
  content:url("../assets/ascelyah-isotipo.png");
}
[data-marca="ascelyah"] .omnia-logo[src*="assets/iconos/omnia.png"],
[data-marca="ascelyah"] .omnia-logo-grande[src*="assets/iconos/omnia.png"]{
  content:url("../assets/iconos-ascelyah/omnia.png");
}