/* ═══════════════════════════════════════════════════════════
   Global — reinicio corto y valores por defecto de elemento.
   Estilar el HTML semantico directamente es la mitad del trabajo que en
   utility-first se hace repitiendo clases en cada plantilla.
   ═══════════════════════════════════════════════════════════ */

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

html { block-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  min-block-size: 100%;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--size-step-1);
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.2; margin-block: 0; }
h1 { font-size: var(--size-step-3); }
h2 { font-size: var(--size-step-2); }
h3 { font-size: var(--size-step-1); }

p, ul, ol { margin-block: 0; }
ul, ol { padding-inline-start: 0; list-style: none; }

a { color: var(--color-teal-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-teal-800); }

img, svg, video { max-inline-size: 100%; block-size: auto; display: block; }

/* `hidden` tiene que GANAR. Playwright distingue visible de attached, y un
   elemento con [hidden] que otra regla vuelve a mostrar convierte esa
   distincion en ruido. */
[hidden] { display: none !important; }

/* Controles de formulario: tamano tactil por defecto, no por clase. */
input, select, textarea, button { font: inherit; color: inherit; }

input[type="text"], input[type="number"], input[type="search"],
input[type="password"], input[type="email"], input[type="tel"],
input[type="date"], select, textarea {
  /* SIN inline-size aqui. El ancho es decision de composicion, no del elemento:
     ponerlo al 100% inflo las celdas de la rejilla —que traian su propio ancho— y
     empujo los botones de mas/menos fuera de alcance del navegador. En CUBE el
     global describe COMO SE VE un control, no cuanto ocupa. */
  min-block-size: var(--tap-target);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-stone-300);
  border-radius: var(--radius-md);
  background-color: var(--surface-card);
}

input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--color-teal-500);
  outline-offset: 2px;
}

input:disabled, select:disabled, textarea:disabled, button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

label { display: block; font-size: var(--size-step-0); }

table { inline-size: 100%; border-collapse: collapse; }
th, td { text-align: start; padding: var(--space-2xs) var(--space-xs); }
thead th { font-weight: 500; color: var(--ink-muted); font-size: var(--size-step--1); }

@media print {
  body { background: #fff; }
  .no-print { display: none !important; }
}