/* ============================================================================
   Lo propio de ÁNGEL. Va aparte de app.css a posta: app.css es común a todas
   las apps y se copia de una a otra, así que todo lo de la marca vive aquí
   para que una copia no se lo lleve por delante. Se carga después de app.css.

   Los colores salen del propio logotipo —la pesa cubana de public/logo.png—,
   no de la bandera oficial: azul #004AAD, rojo #C9263E y blanco. Así la app y
   el logo son el mismo color y no dos rojos que casi pegan.
   ========================================================================== */

/* Cabecera: la insignia pequeña y el nombre al lado. */
.logo-h{display:inline-flex;align-items:center;gap:11px}
.logo-h::before{
  content:"";width:34px;height:34px;flex:0 0 34px;border-radius:9px;
  background:url(/logo.png) center/cover no-repeat;
}
.logo-h::after{
  content:"ÁNGEL";font-family:var(--fd);font-weight:700;
  letter-spacing:.07em;font-size:1.0625rem;color:var(--ink);
}
@media (max-width:620px){
  .logo-h::before{width:30px;height:30px;flex:0 0 30px;border-radius:8px}
  .logo-h::after{font-size:0.9062rem}
}
@media (min-width:901px){
  .logo-h::before{width:40px;height:40px;flex:0 0 40px;border-radius:10px}
  .logo-h::after{font-size:1.25rem}
}

/* Pantalla de acceso: la insignia entera, que ya lleva el nombre dentro. */
.login-logo-h{
  display:block;width:132px;height:132px;margin:0 auto 18px;border-radius:18px;
  background:url(/logo.png) center/cover no-repeat;
}
@media (max-width:620px){ .login-logo-h{width:112px;height:112px} }

/* ---------------------------------------------------------------------------
   Paleta: el azul y el rojo del logotipo, repartidos como en el logotipo.

   La app tiene una sola familia de acento, así que combinar dos colores es
   decidir qué pinta cada uno. El reparto no es caprichoso, es el de la propia
   logotipo: el azul hace de pesa —texto resaltado, fondos suaves, bordes— y
   el rojo hace de fondo —botones, la barra del menú activo, el subrayado de
   las pestañas, el filo de las tarjetas de ejercicio—.

   Donde los dos se tocan se nota a propósito: el menú activo queda con fondo
   azul claro, letra azul y una barra roja a la izquierda; y las pestañas, con
   la letra azul y el subrayado rojo.

   app.css define el acento en tres sitios —el tema claro, el oscuro del
   sistema y el oscuro elegido a mano—, así que hay que pisarlo en los tres.
   En oscuro el azul del logo (#004AAD) sobre negro se queda en 2,3 de
   contraste y no se lee, así que ahí el azul de texto va aclarado y sube a
   8,9. El rojo de los botones es el del logo en los dos modos, porque con
   letra blanca encima da 5,5 y se lee bien en ambos.
   --------------------------------------------------------------------------- */
:root{
  --accent:#004AAD; --accent-fill:#C9263E; --accent-ink:#FFFFFF;
  --accent-soft:#E2EAF8; --accent-line:#A9C3E8;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --accent:#8FB6F5; --accent-fill:#C9263E; --accent-ink:#FFFFFF;
    --accent-soft:#0F2144; --accent-line:#33578F;
  }
}
:root[data-theme="dark"]{
  --accent:#8FB6F5; --accent-fill:#C9263E; --accent-ink:#FFFFFF;
  --accent-soft:#0F2144; --accent-line:#33578F;
}