/* ===========================================================================
   tokens.css — valores por defecto del tema "Clinical Precision".
   Fuente: docs/prototypemvc/DESIGN.md

   Es la ÚNICA hoja donde aparecen colores literales. Todo lo demás (Bootstrap,
   layout, componentes, planner) consume estas variables.

   El tema por compañía (fase 5 del plan) redefine un puñado de estas variables
   desde /theme/company.css, que se carga DESPUÉS de esta hoja. Por eso aquí no
   puede haber !important ni selectores más específicos que :root.
   =========================================================================== */

/*
   Inter self-hosted. Es una fuente VARIABLE: un solo archivo de 48 kB cubre los
   pesos 100–900, así que no hay que servir uno por peso.

   Subset latin (el mismo que sirve Google Fonts), sin CDN: sin petición a terceros
   y sin excepción en el CSP. font-display: swap para que el texto sea legible
   mientras carga.
*/
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- marca: lo único que una compañía puede sobreescribir ---------------- */
  --prme-primary: #00355f;
  --prme-primary-container: #0f4c81;
  --prme-secondary: #466270;
  --prme-surface: #f7f9fb;

  /* --- derivados de marca (fase 5 los recalcula por contraste) ------------- */
  --prme-on-primary: #ffffff;
  --prme-on-primary-container: #ffffff;
  --prme-on-secondary: #ffffff;
  --prme-primary-fixed: #d2e4ff;
  --prme-on-primary-fixed: #001c37;
  --prme-secondary-container: #c6e4f4;
  --prme-on-secondary-container: #4a6774;

  /* --- superficies -------------------------------------------------------- */
  --prme-surface-lowest: #ffffff;
  --prme-surface-low: #f2f4f6;
  --prme-surface-container: #eceef0;
  --prme-surface-high: #e6e8ea;
  --prme-surface-highest: #e0e3e5;
  --prme-on-surface: #191c1e;
  --prme-on-surface-variant: #42474f;
  --prme-inverse-surface: #2d3133;
  --prme-inverse-on-surface: #eff1f3;

  /* --- líneas ------------------------------------------------------------- */
  --prme-outline: #727780;
  --prme-outline-variant: #c2c7d1;

  /* --- semánticos: NO personalizables por compañía ------------------------- */
  --prme-error: #ba1a1a;
  --prme-on-error: #ffffff;
  --prme-error-container: #ffdad6;
  --prme-on-error-container: #93000a;
  --prme-success: #166534;
  --prme-success-container: #dcfce7;
  --prme-warning: #92400e;
  --prme-warning-container: #fef3c7;
  --prme-info: #075985;
  --prme-info-container: #e0f2fe;

  /* --- tipografía --------------------------------------------------------- */
  --prme-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --prme-headline-xl-size: 32px;
  --prme-headline-xl-line: 40px;
  --prme-headline-lg-size: 24px;
  --prme-headline-lg-line: 32px;
  --prme-headline-md-size: 20px;
  --prme-headline-md-line: 28px;
  --prme-body-lg-size: 16px;
  --prme-body-lg-line: 24px;
  --prme-body-md-size: 14px;
  --prme-body-md-line: 20px;
  --prme-label-md-size: 12px;
  --prme-label-md-line: 16px;
  /* 13px específico para datos tabulares: más filas en pantalla sin perder
     el aire clínico. Ver DESIGN.md § Typography. */
  --prme-data-size: 13px;
  --prme-data-line: 18px;

  /* --- formas ------------------------------------------------------------- */
  --prme-radius-sm: .125rem;
  --prme-radius-control: .375rem;
  --prme-radius-md: .375rem;
  --prme-radius-card: .5rem;
  --prme-radius-xl: .75rem;
  --prme-radius-pill: 9999px;

  /* --- espaciado y medidas ------------------------------------------------ */
  --prme-space-1: 4px;
  --prme-space-2: 8px;
  --prme-space-3: 12px;
  --prme-space-4: 16px;
  --prme-space-6: 24px;
  --prme-space-8: 32px;
  --prme-gutter: 16px;
  --prme-margin-mobile: 16px;
  --prme-margin-desktop: 32px;
  /* Separación entre los bloques de una pantalla (cabecera, filtro, tabla). Un
     único valor: antes cada bloque traía su propio margen y el ritmo vertical
     salía distinto en cada pantalla. */
  --prme-stack: 24px;
  /* Altura de los controles de formulario con puntero fino. En táctil sube a
     --prme-touch-target, igual que hace .btn. 44px fijos en escritorio inflaban
     las barras de filtro por encima de los datos que filtran. */
  --prme-control-height: 36px;
  --prme-sidebar-width: 260px;
  --prme-sidebar-width-collapsed: 64px;
  --prme-topbar-height: 56px;
  --prme-table-cell-y: 12px;
  --prme-table-cell-x: 16px;
  --prme-touch-target: 44px;

  /* --- elevación: capas tonales + sombra ambiental, no bordes pesados ------ */
  --prme-shadow-1: 0 1px 4px rgb(0 0 0 / 4%);
  --prme-shadow-2: 0 2px 8px rgb(0 0 0 / 8%);
  --prme-shadow-modal: 0 12px 32px rgb(0 0 0 / 18%);

  --prme-focus-ring: 2px solid var(--prme-primary);
  --prme-focus-offset: 2px;
}

/* Dark mode: preparado, no implementado (decisión 6 del plan).
   Cuando se active, aquí se redefinen las mismas variables bajo
   [data-bs-theme="dark"] y bajo @media (prefers-color-scheme: dark).
   Nada más cambia: ninguna otra hoja tiene colores literales. */