/* ═══════════════════════════════════════════════════════════════════════
   drwCheck · management app
   ═══════════════════════════════════════════════════════════════════════
   What the shared design (diseno/temas.css + componentes.css) does not cover: page base, the toolbar,
   search, sortable headers, pagination, empty and loading states, the sign-in card. It uses ONLY the
   variables of the themes, so the three themes work. No inline styles anywhere (style-src 'self').
   ═══════════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Outfit";
  src: url("/fuentes/outfit.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--c-fondo-margen); -webkit-text-size-adjust: 100%; }
#app { height: 100%; }
a { color: var(--c-enlace); }

/* Text for screen readers only */
.solo-lectores { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 8px; top: -56px; z-index: 50; padding: 8px 12px; background: #FFFFFF;
  color: var(--a-texto); border-radius: var(--a-radio); box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.saltar:focus { top: 8px; }
.principal:focus { outline: 0; }

/* Header: sign-out button and the text variants that live on the dark bar */
.btn-cab { height: 32px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--a-radio);
  background: transparent; color: #FFFFFF; font: inherit; font-size: 14px; cursor: pointer; white-space: nowrap; }
.btn-cab:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .1); }
.btn-cab:focus-visible { outline: 3px solid var(--c-sider-activo); outline-offset: 2px; }
.btn-menu svg, .btn-contraer svg { width: 20px; height: 20px; }
.btn-menu svg { stroke-width: 1.8; }

/* Toolbar */
.barra { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin: 0 0 16px; }
.barra .busqueda { flex: 1 1 280px; max-width: 420px; }
.busqueda { position: relative; }
.busqueda svg { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  color: var(--a-texto-desc); pointer-events: none; }
.busqueda .entrada { padding-left: 34px; }
.resumen { margin: 0; color: var(--a-texto-sec); font-size: 14px; }

/* Table: sortable headers, long names that must not break the layout */
.tabla .orden { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 600; color: inherit; cursor: pointer; }
.tabla .orden svg { width: 14px; height: 14px; color: var(--a-texto-desc); }
.tabla .orden:hover { color: var(--c-primario-hover); }
.tabla .orden:focus-visible { outline: 2px solid var(--c-primario); outline-offset: 3px; border-radius: 2px; }
.tabla th[aria-sort="ascending"] .orden svg, .tabla th[aria-sort="descending"] .orden svg { color: var(--c-primario); }
.tabla td.codigo { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla td.nombre { overflow-wrap: anywhere; min-width: 180px; }

/* Pagination (Ant Design) */
.paginacion { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-top: 16px; }
.pag-lista { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pag-boton { display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 6px;
  border: 1px solid var(--a-borde); border-radius: var(--a-radio); background: #FFFFFF; color: var(--a-texto);
  font: inherit; cursor: pointer; transition: color .2s, border-color .2s; }
.pag-boton svg { width: 14px; height: 14px; }
.pag-boton:hover:not([disabled]) { color: var(--c-primario-hover); border-color: var(--c-primario-hover); }
.pag-boton:focus-visible { outline: 4px solid var(--c-foco); outline-offset: 1px; }
.pag-boton[aria-current="page"] { color: var(--c-primario); border-color: var(--c-primario); font-weight: 500; }
.pag-boton[disabled] { cursor: not-allowed; color: var(--a-texto-desc); background: var(--a-deshabilitado); }
.pag-hueco { display: inline-grid; place-items: center; min-width: 32px; height: 32px; color: var(--a-texto-desc); }
.tamano-pagina { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--a-texto-sec); }
.tamano-pagina select.entrada { width: auto; }

/* Empty, loading and error states */
.vacio { padding: 48px 16px; text-align: center; color: var(--a-texto-sec); }
.vacio h2 { margin: 0 0 8px; font-size: 16px; font-weight: 500; color: var(--a-texto); overflow-wrap: anywhere; }
.vacio p { margin: 0 0 16px; }
.alerta-acciones { margin-top: 12px; }
.alerta .referencia { margin-top: 8px; font-size: 12px; color: var(--a-texto-desc); overflow-wrap: anywhere; }
.esqueleto { display: grid; gap: 12px; }
.esqueleto i { display: block; height: 22px; border-radius: var(--a-radio-sm); background: linear-gradient(90deg, #F0F0F0 25%, #E6E6E6 37%, #F0F0F0 63%);
  background-size: 400% 100%; animation: brillo 1.4s ease infinite; }
@keyframes brillo { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .esqueleto i { animation: none; } }

/* Sign-in card */
.acceso { display: grid; place-items: center; min-height: 100%; padding: 24px; }
.acceso-tarjeta { width: 100%; max-width: 440px; padding: 32px; text-align: center; background: var(--c-superficie);
  border: 1px solid var(--a-borde-sec); border-radius: var(--a-radio-lg); }
.acceso-icono { display: block; width: 64px; height: 64px; margin: 0 auto 16px; }
.acceso-tarjeta h1 { margin: 0 0 8px; font-size: 20px; font-weight: 500; color: var(--c-titulo); }
.acceso-tarjeta p { margin: 0 0 24px; color: var(--a-texto-sec); }
.acceso-tarjeta .alerta { text-align: left; }

/* Phones: the header has to fit 360 px (menu, brand, language, sign out). The avatar is decorative (aria-hidden). */
@container vp (max-width: 520px) {
  .cab { gap: 8px; padding: 0 12px; }
  .cab-acciones { gap: 8px; }
  .cab .usuario { display: none; }
  .btn-cab { padding: 0 10px; }
}

/* Narrow screens: bigger touch targets (the language switcher already uses 44 px) */
@container vp (max-width: 760px) {
  .pag-boton, .pag-hueco { min-width: 40px; height: 40px; }
  .barra .busqueda { max-width: none; }
  .paginacion { justify-content: center; }
  .acceso-tarjeta { padding: 24px 16px; }
}