/* ============================================================================
   base.css — Tecsa·S3 Clínico · reset de tema, tipografía y layout
   ----------------------------------------------------------------------------
   Lo que el tema necesita hacer en el nivel de página: fondo, tipografía,
   color de enlaces, títulos y el contenedor de contenido.

   LO QUE ESTE FICHERO NO HACE, Y POR QUÉ
   ----------------------------------------------------------------------------
   * NO toca `body { padding / margin / overflow }`. base-shell.css va
     deliberadamente SIN @layer (base.html:198-199) y por eso vence a todo lo
     encapsulado por orden de cascada. Define el offset del navbar fijo
     (--app-header-height) y el contrato de scroll único — body es el único
     scroller. Redefinir cualquiera de las dos cosas desde una capa rompe el
     offset del navbar en las 345 plantillas de la raíz. Lo vigila
     dashboard/tests/test_shell_scroll_contract.py (8 tests).

   * NO redefine `--app-header-height`. Es fuente única de verdad
     (theme-tokens.css:263-279: 90px escritorio / 70px ≤991.98px) y lo
     consumen el padding del body, el min-height del wrapper, los toolbars
     sticky, el z-order del sidebar y AMBOS suites Playwright con tolerancia
     de 2px. Es un punto único de fallo; no se toca.

   * NO abre un `:root` privado. lab/tests/test_css_scope_contract.py:160
     prohíbe que una hoja redefina tokens globales; todo lo de aquí vive bajo
     `html[data-app-theme="tecsa-clinico"]`.

   * NO usa `!important`. Ninguna regla nueva de todo el tema lo lleva
     (R10 del plan): dashboard.css ya tiene 124 y es el fichero más frágil.

   * NO depende de FontAwesome. El branding pide iconos outline inline SVG.
     Además R2 Lance: fontawesomefree/js/all.min.js sólo existe en
     staticfiles/ (gitignored) y su CSS sólo se enlaza en 10 plantillas, así
     que los `<i class="fa...">` no están garantizados. Un tema que dependa de
     ellos sería inconsistente por construcción.
   ============================================================================ */

@layer base {

  html[data-app-theme="tecsa-clinico"] {
    /* --- Fondo y tipografía de página -----------------------------------
       El mockup fija body{background:#F4F6FA; color:#185FA5; font-size:14px;
       line-height:1.5} e Inter. Inter ya se carga desde base.html:63; aquí
       sólo se le da el tintero del tema. El fondo va en `body` y no en
       `html`: así el overscroll del navegador no destona con la página. */
    background-color: var(--ui-bg);
  }

  html[data-app-theme="tecsa-clinico"] body {
    background-color: var(--ui-bg);
    color: var(--ui-text);
    font-family: var(--tca-font-sans);
    /* 15px base. El documento de branding dice "Texto normal 15-16px 400";
       el mockup usaba 14px, un poco justo para cuerpo de texto en pantalla
       de salud rural (lectores en móvil, sol). custom.css:233 pone
       --fs-base (15→16px fluido); se deja el token fluído. */
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    /* Evita el "text inflation" de Safari en modo auto: en claro se queda en
       claro aunque el SO pida zoom. El tema es declarativo, no del SO. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* --- Enlaces ----------------------------------------------------------
     El mockup usa --c-azul-500 (#378ADD) para <a>: 3.59:1 — FALLA AA a
     14px. El documento de branding reserva #378ADD para "botones y acciones
     clave"; para texto el propio documento pone azul profundo #185FA5
     ("Texto sobre fondos claros"). 6.52:1. */
  html[data-app-theme="tecsa-clinico"] a {
    color: var(--ui-text);
    text-decoration-color: color-mix(in oklab, var(--ui-text) 35%, transparent);
    text-underline-offset: 2px;
  }

  html[data-app-theme="tecsa-clinico"] a:hover {
    color: var(--ui-primary-strong);
    text-decoration-color: currentcolor;
  }

  /* El mockup sólo pone underline en :hover (vista3) o nunca (vista2).
     Se underlinea siempre: es la convención que la gente espera de un enlace
     y la que survives a un render en escala de grises. */
  html[data-app-theme="tecsa-clinico"] a:not([class*="btn"]):not(.nav-link) {
    text-decoration: underline;
  }

  /* --- Jerarquía de títulos ---------------------------------------------
     El documento: H1 28-32/600, H2 22-24/500, H3 18/500. custom.css:281-284
     ya trae --fs-2xl/--fs-xl/--fs-lg fluidos; se ajustan sólo los pesos,
     que el mockup hace 700 y el documento pide 600. */
  html[data-app-theme="tecsa-clinico"] h1 {
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--ui-text);
    letter-spacing: -0.015em;
  }

  html[data-app-theme="tecsa-clinico"] h2 {
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--ui-text);
    letter-spacing: -0.01em;
  }

  html[data-app-theme="tecsa-clinico"] h3 {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--ui-text);
  }

  html[data-app-theme="tecsa-clinico"] h4,
  html[data-app-theme="tecsa-clinico"] h5,
  html[data-app-theme="tecsa-clinico"] h6 {
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--ui-text);
  }

  /* --- Contenido --------------------------------------------------------
     El mockup: .main { padding: 24px 28px }. Se aplica al contenedor de
     contenido real del proyecto (#main-content / .content-wrapper), que es
     donde cae el `{% block content %}` de base.html:331. */
  html[data-app-theme="tecsa-clinico"] #main-content,
  html[data-app-theme="tecsa-clinico"] .content-wrapper {
    color: var(--ui-text);
  }

  /* --- Selection y scrollbar --------------------------------------------
     Sutil y con contraste: el texto seleccionado debe seguir siendo legible
     (si el fondo del texto es oscuro sobre texto oscuro, el usuario pierde la
     palabra que está copiando). */
  html[data-app-theme="tecsa-clinico"] ::selection {
    background-color: var(--tca-azul-100);
    color: var(--tca-azul-900);
  }

  /* --- Anillo de foco global --------------------------------------------
     EL FIX MÁS IMPORTANTE DE ESTE FICHERO.

     Los mockups tienen CERO ocurrencias de :focus-visible: sólo .skip-link y
     un input definen foco. Todo lo demás cae al outline del UA, que
     Bootstrap además resetea. Eso deja navegación por teclado sin indicador
     en botones, enlaces y tarjetas — un fallo de WCAG 2.4.7 (Focus Visible).

     Se aplica a :focus-visible (no :focus) para no dibujar el anillo en cada
     clic de ratón, y se usa :where() para no añadir especificidad: si un
     componente necesita su propio anillo, gana sin !important.

     Fallback para navegadores sin :focus-visible (pre-2022): la regla
     @supports de más abajo la degrada a :focus.
     ========================================================================== */
  html[data-app-theme="tecsa-clinico"]
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: var(--tca-focus-width) solid var(--tca-linea-campo);
    outline-offset: var(--tca-focus-offset);
    border-radius: var(--radius-xs);
  }

  /* Navegación por teclado en el shell: sin anillo el usuario no sabe dónde
     está. Sólo para elementos que sí están en el flujo de tabulación. */
  html[data-app-theme="tecsa-clinico"]
    :where(.app-navbar a, .app-navbar button, #sidebar a, #sidebar button):focus-visible {
    outline: var(--tca-focus-width) solid var(--tca-linea-campo);
    outline-offset: 2px;
  }

  /* Fallback para motores sin :focus-visible. */
  @supports not selector(:focus-visible) {
    html[data-app-theme="tecsa-clinico"]
      :where(a, button, input, select, textarea, summary, [tabindex]):focus {
      outline: var(--tca-focus-width) solid var(--tca-linea-campo);
      outline-offset: var(--tca-focus-offset);
    }
  }
}