/*
 * DuDoctor · Medidas de maquetación.
 *
 * La MARCA (color, letra, espaciado, radios, sombras, el objetivo táctil y las piezas comunes:
 * botones, campos, casillas, insignias, chips de estado, avisos…) NO está aquí: viene de
 * branding.css, la copia literal de /branding/css/branding.css (no se edita aquí). Esta hoja solo
 * guarda las medidas de la ESTRUCTURA de página de la aplicación: el ancho del contenido, los
 * márgenes laterales, las alturas de la cabecera y del banner fijo y el hueco de la barra de iOS.
 * La cargan todas las páginas (layouts/head.php y el instalador) justo DESPUÉS de branding.css.
 *
 * MOBILE FIRST: los estilos base de cualquier hoja son para móvil (≥320px). Las mejoras para
 * pantallas mayores se añaden SOLO con media queries min-width:
 *     @media (min-width: 600px)   tablet
 *     @media (min-width: 900px)   escritorio
 *     @media (min-width: 1200px)  escritorio ancho
 * Nunca max-width (ni para «deshacer» en el móvil lo de escritorio: lo base ya es el móvil). Los
 * únicos puntos intermedios, siempre min-width y comentados en su hoja: 400px (el selector de idioma
 * de la cabecera de la web, site.css), 1100px (la ficha del tratamiento a dos columnas,
 * panel-consultas.css) y 1280px (las dos columnas del área de paciente, patient.css).
 * Objetivos táctiles: --tap (48px) en la web y --tap-sm (44px) como mínimo en el panel por debajo de
 * 900px; un enlace de letra pequeña que no puede crecer (una miga) agranda su zona con un ::after.
 */
:root {
  --container: 1120px;
  --container-narrow: 720px;
  --gutter: 1.25rem;
  --header-h: 60px;
  --cta-h: 72px;                     /* alto del banner fijo "Empezar consulta" */
  --safe-b: env(safe-area-inset-bottom, 0px);
}

@media (min-width: 900px) {
  :root {
    --gutter: 2rem;
    --header-h: 72px;
  }
}