/* ==========================================================================
   BUZÓN COSAPI · Base
   Reinicio contenido, tipografía por defecto y accesibilidad (§50).
   ========================================================================== */

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

/* v1.1.1 · SEGUNDA CAUSA DE LA PANTALLA BLANCA.
   `[hidden]{display:none}` vive en la hoja del navegador, así que cualquier
   regla de autor con `display` la anula. `.bloqueo` declara
   `display:grid; min-height:100vh`, de modo que `#pantalla-error`, pese a estar
   `hidden`, ocupaba una pantalla completa VACÍA por encima de `#aplicacion`: el
   primer viewport quedaba en blanco y la aplicación empezaba fuera de vista.
   Esta regla hace que `hidden` signifique oculto, aquí y en cualquier
   componente futuro. */
[hidden] { display: none !important; }

html {
  /* BUZÓN COSAPI V1.1.0: una sola familia visual en toda la app. */
  font-family: var(--font-ui);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  /* Nunca scroll horizontal global (§51). Las tablas lo gestionan por su cuenta. */
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-regular); }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }

button, input, select, textarea, option {
  font-family: var(--font-ui) !important;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
}

button { background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }

a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--motion-fast) var(--easing);
}
a:hover { border-bottom-color: currentColor; }

/* Foco visible siempre. El minimalismo no elimina la accesibilidad. */
:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-radius: var(--radius-sm);
}

::selection { background: var(--color-primary-soft); color: var(--color-primary-active); }

/* ------------------------------------------------------------ tipografía -- */

.editorial {
  font-family: var(--font-editorial);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.texto-secundario { color: var(--color-text-secondary); }
.texto-tenue { color: var(--color-text-tertiary); }
.texto-sm { font-size: var(--text-sm); }
.texto-xs { font-size: var(--text-xs); }

/* --------------------------------------------------------------- utilidad -- */

.fila { display: flex; align-items: center; gap: var(--space-sm); }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.columna { display: flex; flex-direction: column; }
.crecer { flex: 1 1 auto; min-width: 0; }
.envolver { flex-wrap: wrap; }
.oculto { display: none !important; }
.truncar { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

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

/* Barras de desplazamiento discretas. */
* { scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border: 3px solid var(--color-bg);
  border-radius: var(--radius-pill);
}
*::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }


/* Sincronía tipográfica total solicitada: nada vuelve a Segoe/Arial por estilos nativos. */
body, button, input, select, textarea, option, table, thead, tbody, tr, th, td, label, code, pre, .mono, .editorial, .eyebrow { font-family: var(--font-ui) !important; }
input::placeholder, textarea::placeholder { font-family: var(--font-ui) !important; }