/* =============================================================================
   CAPTA · tokens de marca — UNA sola fuente (capa compartida)
   =============================================================================
   Repaso de interfaz, etapa 0 (Felipe, 2026-09-11). Antes vivían copiados en el
   :root de cada app, con los mismos valores. En la etapa 2 entraron las decisiones
   de Felipe: esquinas 8/4, advertencia #9a6b00 con un solo nombre, títulos 28px en
   la compu, y las dos densidades.
   Se carga antes que cualquier otra hoja de la app.
   ============================================================================= */
:root {
  /* Paleta */
  --navy:   #112550;
  --cobalt: #1a387a;
  --teal:   #2aa8a0;
  --bright: #38cdc4;
  --dark:   #207f79;
  --white:  #f9f9f9;
  --text:   #0e1f3d;
  --sub:    #3a5070;
  --muted:  #7a90a8;

  /* Neutros derivados */
  --bg:        #f4f6fa;
  --surface:   #ffffff;
  --border:    #e2e6ee;
  --border-strong: #c8cfdc;

  /* Estados */
  --danger:    #c0392b;
  --danger-bg: #fdecea;
  --success:   #2e7d32;   /* verde de estado, lejos del teal de acción */
  /* Advertencia: el tono de la shell (más contraste), con UN solo nombre. */
  --warning:   #9a6b00;
  --warning-bg:#fdf4e3;
  --warning-border: #f0dcae;

  /* Tipografías */
  --font-serif: "DM Serif Display", Georgia, serif;
  --font-sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Tamaños */
  --topbar-h:  64px;
  --sidenav-w: 240px;
  --radius:    8px;
  --radius-sm: 4px;
  --shadow-sm: 0 1px 2px rgba(14, 31, 61, 0.06);
  --shadow:    0 4px 12px rgba(14, 31, 61, 0.08);
  --danger-border: #f5c6c0;
  --success-bg: #eaf4eb;
  --success-border: #bddcc0;
  --shadow-md: 0 4px 16px rgba(14,31,61,.12);

  /* Densidad COMPACTA (la de siempre en la compu, y siempre dentro de GHL). El
     contexto la decide, no la app: embebido.js pone html[data-densidad] antes
     del CSS. */
  --control-h: 38px;     /* alto de botones y campos */
  --texto:     14px;     /* texto base */
  --relleno-x: 16px;     /* relleno horizontal de los botones */
  --titulo:    28px;     /* título de pantalla */
}

/* Densidad TÁCTIL: el celular. 16px de texto evita que iOS haga zoom al tocar un
   campo; todo lo que se toca mide 44px como mínimo (componentes.css). */
html[data-densidad="tactil"] {
  --control-h: 48px;
  --texto:     16px;
  --relleno-x: 18px;
  --titulo:    24px;
}

/* Registro, bloque E (agenda en tarjetas, 2026-09-11): lo que la base no tenía.
   Agregado al final sin tocar lo de arriba; aprobado por Felipe. Los grosores no
   se tokenizan (la base escribe 1px directo) y 12/13px de la maqueta quedan en un
   solo --texto-chico. */
:root {
  --espacio-1: 4px;  --espacio-2: 8px;  --espacio-3: 12px;
  --espacio-4: 16px; --espacio-5: 24px;
  --texto-chico: 12px;   /* tipo de turno bajo el nombre, contador del día */
  --agenda-hora-w: 46px; /* columna de la hora en la tarjeta */
}
html[data-densidad="tactil"] { --texto-chico: 14px; }

/* Registro, bloque E (el registro dentro de la tarjeta, 2026-09-11). */
:root {
  --resumen-w: 250px;    /* resumen de plata fijo al costado del formulario */
}