/* ===========================================================================
   BitMedico — base.css
   Reset, tipografía y primitivas de layout.
   Las variables de color/forma las genera Theme.php en theme.css.
   =========================================================================== */

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  /* 16px mínimo: por debajo de eso iOS hace zoom al enfocar un input y la vista
     se descuadra. En una plataforma médica llena de formularios eso es fatal. */
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  min-height: 100dvh;
}

/* El atributo `hidden` DEBE ganar siempre.
 *
 * El navegador trae `[hidden]{display:none}` en su hoja de agente de usuario,
 * pero en la cascada CSS el origen "autor" le gana al del navegador sin importar
 * la especificidad. Por eso cualquier regla nuestra que fije `display` —
 * `.btn{display:inline-flex}`, `.field-error{display:block}`— anulaba el `hidden`
 * y el elemento se seguía viendo: en el multipasos aparecían a la vez "Atrás",
 * "Siguiente" y "Crear mi cuenta". Este !important lo deja fuera de discusión
 * para todo el proyecto, presente y futuro. */
[hidden] { display: none !important; }

img, svg, video, canvas { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--accent); text-decoration: none; }
/* Los links se ILUMINAN, no se subrayan. En esta plataforma casi todo enlace
   es una tarjeta, un renglón o un chip, y el subrayado los hacía ver rotos.
   El iluminado solo se aplica a links SIN clase (texto corrido): los que ya
   son componentes conservan el hover que su módulo les define.
   El foco por TECLADO sí mantiene el subrayado: quien navega sin ratón
   necesita ver dónde está parado, y ahí el color por sí solo no basta. */
a:hover { text-decoration: none; }
a:hover:not([class]) { color: color-mix(in srgb, var(--accent) 78%, var(--text)); }
a:focus-visible { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: 1.25rem 0; }

/* ── Tipografía ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 { margin: 0 0 .5rem; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(1.6rem, 4.5vw, 2.25rem); }
h2 { font-size: clamp(1.3rem, 3.2vw, 1.6rem); }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 .85rem; }
small { font-size: .8125rem; }

.t-muted   { color: var(--muted); }
.t-accent  { color: var(--accent); }
.t-danger  { color: var(--danger); }
.t-success { color: var(--success); }
.t-center  { text-align: center; }
.t-right   { text-align: right; }
.t-bold    { font-weight: 700; }
.t-sm      { font-size: .875rem; }
.t-xs      { font-size: .8125rem; }
.t-lg      { font-size: 1.125rem; }
.t-num     { font-variant-numeric: tabular-nums; }

/* Truncado a N líneas */
.t-clamp-1, .t-clamp-2, .t-clamp-3 {
  display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.t-clamp-1 { -webkit-line-clamp: 1; }
.t-clamp-2 { -webkit-line-clamp: 2; }
.t-clamp-3 { -webkit-line-clamp: 3; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: 1rem; }
.container-narrow { max-width: 680px; }
.container-wide   { max-width: 1400px; }

.stack > * + * { margin-top: var(--stack-gap, 1rem); }
.stack-sm { --stack-gap: .5rem; }
.stack-lg { --stack-gap: 1.5rem; }

.row { display: flex; gap: var(--row-gap, .75rem); }
.row-center  { align-items: center; }
.row-between { justify-content: space-between; }
.row-end     { justify-content: flex-end; }
.row-wrap    { flex-wrap: wrap; }
.row-tight   { --row-gap: .375rem; }
.spacer { flex: 1 1 auto; }

.grid { display: grid; gap: 1rem; }
/* auto-fit: las tarjetas se acomodan solas sin media queries por breakpoint */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Utilidades ───────────────────────────────────────────────────────────── */
.hidden { display: none !important; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: .5rem; }  .mb-1 { margin-bottom: .5rem; }
.mt-2 { margin-top: 1rem; }   .mb-2 { margin-bottom: 1rem; }
.mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 2rem; }   .mb-4 { margin-bottom: 2rem; }
.w-full { width: 100%; }

/* Visible solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Mostrar/ocultar por tamaño.
   Sólo se fuerza el OCULTAR. Al mostrar no se dice nada, y ahí está el porqué:
   antes se ponía `display: block !important` también para mostrar, y eso le
   quitaba su display a cada elemento. Un `.btn` (inline-flex) se estiraba a
   todo el ancho y se le apilaba el icono encima del texto; un `<td>` dejaba de
   ser celda y rompía la tabla; un `.t-clamp-1` perdía el truncado.
   El !important sigue en el ocultar por lo de siempre: `.btn{display:inline-flex}`
   carga después y, con la misma especificidad, anulaba el display:none. */
@media (max-width: 899.98px) {
  .only-desktop { display: none !important; }
}
@media (min-width: 900px) {
  .only-mobile  { display: none !important; }
}

/* ── Foco visible ─────────────────────────────────────────────────────────── */
/* Nunca quitar el outline: hay usuarios que navegan solo con teclado. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Enlace para saltar al contenido (accesibilidad) */
.skip-link {
  position: absolute; left: .5rem; top: -100px; z-index: 200;
  background: var(--surface); color: var(--text);
  border: var(--bw) solid var(--accent);
  border-radius: var(--radius-sm); padding: .5rem .875rem; font-weight: 600;
  transition: top .15s;
}
.skip-link:focus { top: .5rem; }

/* ── Scroll horizontal contenido ──────────────────────────────────────────── */
/* Tablas y bloques anchos scrollean dentro de su caja; el body nunca. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Impresión (recetas, expediente) ──────────────────────────────────────── */
@media print {
  .navbar, .sidebar, .bottomnav, .footer, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; }
  .shell-main { padding: 0; }
}

/* ── Portada en blanco ─────────────────────────────────────────────────────────
   Mientras el sitio se termina (30 jul 2026), bitmedico.com no muestra nada.
   Va AQUÍ y no en el CSS de landing porque en ese modo el módulo no carga su hoja
   —no hay campaña que pintar— y la regla nunca se aplicaba: la portada salía del
   color de --bg, gris claro, o GRIS OSCURO en modo noche, que se lee como que algo
   se rompió en vez de "aquí todavía no hay nada".
   Blanco fijo a propósito: no debe seguir al tema del admin ni al modo del
   visitante. Alto completo para que no asome la franja del body. */
.landing-blank { min-height: 100vh; background: #fff; }