/*
  Variables de diseño del portal. FUENTE ÚNICA: cambia aquí y cambia en todo el sitio.

  Las consumen por igual las vistas de Umbraco y los componentes de Angular. Angular NO duplica
  este archivo ni lo importa: sus componentes usan var(--…) y heredan el valor, porque las
  propiedades personalizadas de CSS atraviesan la encapsulación de estilos de Angular.

  Al añadir un color o un espaciado, hazlo aquí y úsalo por su nombre. Un valor escrito a mano
  dentro de un componente es el primer paso para que las dos mitades del sitio dejen de parecerse.

  --------------------------------------------------------------------------------------------
  PALETA «B · CLÍNICA», elegida por el PO el 18 de octubre de 2026 (ver DT-011).

  Parte de los tres colores del Manual de Identidad y reparte papeles:

    - El AZUL #333366 del manual se queda en la marca: el logotipo, la sigla, los números.
      No se usa para botones, para que la marca no compita con las acciones.
    - Un VERDE AZULADO lleva las acciones y los enlaces. Es el tono que el propio manual
      describe como el aceptado en salud ("confianza, calma, profesionalismo"), llevado a un
      valor que sí cumple contraste AA sobre blanco.
    - El ROJO #FF3333 del manual queda RESERVADO a lo urgente, que es exactamente lo que el
      manual dice que significa en el ámbito hospitalario. Si se usa para decorar, deja de
      avisar.

  Contraste: #FF3333 da 3.6:1 sobre blanco, por debajo del 4.5:1 que pide WCAG AA para texto
  normal. Sirve para fondos, filetes y superficies grandes; para TEXTO sobre blanco se usa
  --color-urgencia-texto.
  --------------------------------------------------------------------------------------------
*/
:root {
  color-scheme: light;

  /* ---------- Color: superficies y texto ---------- */
  --color-fondo: #ffffff;
  --color-fondo-tenue: #eff6f7;
  --color-texto: #142033;
  --color-texto-tenue: #55617a;
  --color-linea: #e4ebee;
  --color-linea-fuerte: #cfe0e3;

  /* ---------- Color: marca ---------- */
  /* El azul del manual. Identidad, no acción. */
  --color-marca: #333366;

  /* ---------- Color: acciones ---------- */
  --color-primario: #0e6e78;
  --color-primario-oscuro: #0a555d;
  --color-primario-contraste: #ffffff;
  /* Fondo suave para distintivos y realces; el texto encima va en --color-primario-oscuro. */
  --color-primario-tenue: #ddeef0;

  /* ---------- Color: estados ---------- */
  /* El rojo del manual: urgencia, nunca decoración. */
  --color-urgencia: #ff3333;
  --color-urgencia-tenue: #fff1f1;
  /* Versión oscurecida, la única que debe llevar texto pequeño sobre blanco. */
  --color-urgencia-texto: #d32020;
  --color-error: #d32020;
  --color-exito: #0b7a53;

  /* ---------- Color: pie ---------- */
  --color-pie-fondo: #142033;
  --color-pie-texto: #ffffff;
  --color-pie-tenue: #b9c4d4;

  /* ---------- Tipografía ---------- */
  /*
    Manrope para todo. El manual fija Marion Regular para el LOGOTIPO, que no está en Google
    Fonts y no puede servirse sin licencia; el logotipo ya viene dibujado en la imagen, así que
    la tipografía del sitio no necesita imitarla. Si algún día se compra la licencia web de
    Marion, entra aquí como --fuente-titulo. Ver pendientes.md.
  */
  --fuente-base: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-titulo: var(--fuente-base);
  --tamano-s: 0.875rem;
  --tamano-base: 1rem;
  --tamano-m: 1.25rem;
  --tamano-l: clamp(1.5rem, 3vw, 2rem);
  --tamano-xl: clamp(2rem, 5vw, 2.75rem);
  --interlineado: 1.6;

  /* ---------- Espaciado ---------- */
  --espacio-1: 0.25rem;
  --espacio-2: 0.5rem;
  --espacio-3: 1rem;
  --espacio-4: 1.5rem;
  --espacio-5: 2rem;
  --espacio-6: 3rem;

  /* ---------- Forma ---------- */
  --radio: 10px;
  --radio-grande: 14px;
  /* Botones y distintivos: la forma de pastilla es parte del carácter de esta paleta. */
  --radio-pastilla: 999px;
  --sombra: 0 2px 18px rgb(20 32 51 / 8%);
  --sombra-realce: 0 4px 24px rgb(20 32 51 / 12%);

  /* ---------- Medidas ---------- */
  --ancho-contenido: 72rem;
  /* Medida cómoda de lectura: pasado esto el ojo pierde el renglón. */
  --ancho-lectura: 46rem;
}

/* ---------------------------------------------------------------------------
   Añadidos para el bloque de marca y las animaciones (22 de octubre de 2026).
   --------------------------------------------------------------------------- */
:root {
  /* Texto sobre el azul de la marca. */
  --color-marca-contraste: #ffffff;
  --color-marca-tenue: #c9cbe4;
  /* Borde y relleno suaves para elementos encima del azul. */
  --color-marca-velo: rgb(255 255 255 / 14%);
  --color-marca-borde: rgb(255 255 255 / 38%);

  /* Movimiento. Una sola duración y una sola curva para todo el sitio: si cada
     efecto inventa la suya, el conjunto se siente desordenado. */
  --duracion: 600ms;
  --curva: cubic-bezier(0.22, 0.61, 0.36, 1);
}