/* =====================================================================
   TALLER · Capa de componentes
   ---------------------------------------------------------------------
   Reparto de responsabilidades:
     · Tailwind  → layout, espaciado, rejillas, breakpoints, colores.
     · Este file → las piezas del dominio que se repiten y que cargan
                   significado (placa, estado, medidor, checklist), más
                   la base de formularios y tablas, para no repetir doce
                   utilidades en cada input.

   Los colores salen de las variables que head.php inyecta desde la
   tabla `config`. Solo --brand y --sidebar-bg son parametrizables por
   taller: los grises estructuran y los estados significan.
   ===================================================================== */

/* Tipografía de la marca: grotesca semi-condensada con itálica real,
   autoalojada. Solo la usa el logotipo; el resto de la interfaz sigue en
   la pila del sistema, que carga instantánea. */
@font-face {
  font-family: "Barlow Semi Condensed";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/barlow-semicondensed-700-italic.woff2") format("woff2");
}

:root { --row-y: 9px; }                       /* densidad cómoda */
:root[data-densidad="compacta"] { --row-y: 5px; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.ico { flex: none; vertical-align: -.15em; }

/* =====================================================================
   Armazón · menú lateral, barra superior y contenido
   ---------------------------------------------------------------------
   El ancho del menú es una variable, así el plegado es un solo cambio
   de token y todo lo demás se acomoda solo.
   ===================================================================== */

.armazon { --lateral-w: 220px; display: flex; min-height: 100%; }
:root[data-nav="plegado"] .armazon { --lateral-w: 56px; }

/* Sin transición de ancho a propósito. Animarla obligaba a que las
   etiquetas desaparecieran de golpe mientras el ancho seguía moviéndose:
   dos movimientos desacompasados que se veían como un parpadeo. El
   plegado ocurre en un solo reflujo. */
.lateral {
  width: var(--lateral-w); flex: none; overflow: hidden;
  background: var(--sidebar-bg); border-right: 1px solid var(--nav-borde);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

/* Cabecera del menú: exactamente la altura del topbar, misma línea base.
   Aloja el control de plegado para que el pie no gaste una fila en él. */
.lateral-marca {
  height: var(--barra); flex: none;
  display: flex; align-items: center; gap: 10px; padding: 0 10px 0 14px;
  border-bottom: 1px solid var(--nav-borde);
}
.lateral-marca .escudo {
  width: 28px; height: 28px; flex: none; border-radius: 4px; border: none; padding: 0;
  background: var(--brand); color: #fff; display: grid; place-items: center;
  cursor: default;
}
.lateral-marca-txt { min-width: 0; overflow: hidden; flex: 1; }
.lateral-marca-txt b {
  display: block; font-size: 20px; line-height: 1.05; font-weight: 700;
  font-family: "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
  font-style: italic; letter-spacing: .01em; color: var(--nav-on);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lateral-marca-txt span {
  display: block; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nav-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  margin-top: 1px;
}
.lateral-chevron {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border: none; border-radius: 4px; background: none; color: var(--nav-dim); cursor: pointer;
}
.lateral-chevron:hover { background: var(--nav-hover); color: var(--nav-on); }

.lateral-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 2px 0 4px; }
.lateral-scroll::-webkit-scrollbar { width: 6px; }
.lateral-scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.lateral-scroll { scrollbar-width: thin; }

.lateral-grupo {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--nav-dim); padding: 8px 16px 2px; white-space: nowrap;
}

.lateral-item {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 14px; margin: 0 6px; border-radius: 4px;
  color: var(--nav-txt); font-size: 13px; line-height: 1.35;
  text-decoration: none; white-space: nowrap;
}
.lateral-item:hover { background: var(--nav-hover); color: var(--nav-on); text-decoration: none; }
.lateral-item.on { background: var(--nav-activo); color: var(--nav-on); font-weight: 700; }
.lateral-item.on .ico { color: var(--brand); }

.lateral-pie { flex: none; border-top: 1px solid var(--nav-borde); padding: 4px 6px; }
.lateral-quien { display: flex; align-items: center; gap: 9px; padding: 4px 8px; min-width: 0; }
.lateral-quien .avatar {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-2);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  border: 1px solid var(--line);
}
.lateral-quien .etq { flex: 1; overflow: hidden; }
.lateral-quien b {
  display: block; font-size: 12.5px; color: var(--nav-on); font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lateral-quien .etq > span {
  display: block; font-size: 10.5px; color: var(--nav-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lateral-quien .salir {
  color: var(--nav-dim); flex: none; padding: 4px; border-radius: 3px;
  border: none; background: none; cursor: pointer; display: grid; place-items: center;
}
.lateral-quien .salir:hover { color: var(--crit); background: var(--nav-hover); }

/* --- Estado plegado: riel de iconos. El escudo pasa a ser el botón
       que devuelve el menú a su ancho. --- */
:root[data-nav="plegado"] .lateral-marca { padding: 0; justify-content: center; }
:root[data-nav="plegado"] .lateral-marca .escudo { cursor: pointer; }
:root[data-nav="plegado"] .lateral-marca .escudo:hover { filter: brightness(1.25); }
:root[data-nav="plegado"] .etq,
:root[data-nav="plegado"] .lateral-marca-txt,
:root[data-nav="plegado"] .lateral-chevron,
:root[data-nav="plegado"] .lateral-grupo span,
:root[data-nav="plegado"] .lateral-quien .salir { display: none; }
:root[data-nav="plegado"] .lateral-grupo { padding: 8px 0 3px; margin: 0 12px; border-top: 1px solid var(--nav-borde); }
:root[data-nav="plegado"] .lateral-grupo:first-child { border-top: none; padding-top: 4px; }
:root[data-nav="plegado"] .lateral-item { justify-content: center; padding-left: 0; padding-right: 0; }
:root[data-nav="plegado"] .lateral-quien { justify-content: center; padding-left: 0; padding-right: 0; }

/* --- Columna de contenido --- */
.columna { display: flex; flex-direction: column; flex: 1; min-width: 0; }

.superior {
  height: var(--barra); flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 0 20px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 20;
}
.superior-izq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.superior-izq h1 {
  margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.superior-der { display: flex; align-items: center; gap: 8px; flex: none; }
.superior-fecha {
  font-size: 12px; color: var(--ink-3); white-space: nowrap;
}

.contenido { flex: 1; padding: 20px; min-width: 0; }

.inferior {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-3);
}

.velo { display: none; }

/* --- Móvil: el menú pasa a cajón --- */
@media (max-width: 1023px) {
  .armazon { --lateral-w: 236px; }
  .lateral {
    position: fixed; inset: 0 auto 0 0; z-index: 60;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 24px rgba(16, 24, 40, .12);
  }
  .armazon.cajon .lateral { transform: none; }
  :root[data-nav="plegado"] .lateral { width: 236px; }
  :root[data-nav="plegado"] .lateral-marca { padding: 0 10px 0 14px; justify-content: flex-start; }
  :root[data-nav="plegado"] .etq,
  :root[data-nav="plegado"] .lateral-marca-txt,
  :root[data-nav="plegado"] .lateral-grupo span,
  :root[data-nav="plegado"] .lateral-quien .salir { display: revert; }
  :root[data-nav="plegado"] .lateral-item { justify-content: flex-start; padding-left: 14px; padding-right: 14px; }
  :root[data-nav="plegado"] .lateral-quien { justify-content: flex-start; padding-left: 8px; padding-right: 8px; }
  .lateral-chevron { display: none; }
  .velo { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(16, 24, 40, .4); }
  .velo[hidden] { display: none; }
  .superior { padding: 0 14px; }
  .contenido { padding: 14px; }
  .superior-fecha { display: none; }
}

/* Logotipo reutilizable, para el login y cualquier cabecera impresa */
.marca-logo {
  font-family: "Barlow Semi Condensed", "Helvetica Neue", Arial, sans-serif;
  font-style: italic; font-weight: 700; font-size: 26px; line-height: 1.05;
  letter-spacing: .01em;
}

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--brand); color: #fff;
  border: 1px solid var(--brand); border-radius: 2px;
  padding: 7px 13px; font: 700 12.5px/1.25 inherit;
  letter-spacing: .02em; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { filter: brightness(.92); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

.btn.plano { background: var(--surface); color: var(--ink-2); border-color: var(--line-strong); }
.btn.plano:hover { background: var(--surface-2); color: var(--ink); filter: none; }

.btn.peligro { background: var(--crit); border-color: var(--crit); }
.btn.chico   { padding: 4px 9px; font-size: 11.5px; }

.btn-icono {
  display: inline-grid; place-items: center; width: 28px; height: 28px;
  border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none;
}
.btn-icono:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-2); text-decoration: none; }
.btn-icono.rojo:hover { color: var(--crit); border-color: var(--crit); background: var(--crit-bg); }

/* ---------------------------------------------------------------------
   Contenedores
   --------------------------------------------------------------------- */

.tarjeta { background: var(--surface); border: 1px solid var(--line); min-width: 0; }
.tarjeta > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--surface-2);
}
.tarjeta > header h2 {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}
.tarjeta .cuerpo { padding: 15px; }

.vacio { padding: 44px 20px; text-align: center; color: var(--ink-3); }
.vacio .ico { color: var(--line-strong); margin-bottom: 10px; }
.vacio p { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.vacio small { font-size: 12px; }

/* Fila de indicadores: hairlines en vez de tarjetas sueltas.
   El número de columnas es explícito para que nunca sobre una celda vacía:
   la rejilla automática dejaba un hueco gris cuando los items no llenaban
   la última fila. */
.kpis {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 640px)  { .kpis.k4, .kpis.k6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .kpis.k4 { grid-template-columns: repeat(4, 1fr); }
                             .kpis.k6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .kpis.k6 { grid-template-columns: repeat(6, 1fr); } }
.kpi { background: var(--surface); padding: 13px 15px 15px; display: block; color: inherit; text-decoration: none; }
a.kpi:hover { background: var(--surface-2); text-decoration: none; }
.kpi .v {
  font-family: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: 26px; font-weight: 700; letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.kpi .k {
  font-family: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
  margin-top: 8px; display: flex; align-items: center; gap: 6px;
}
.kpi.acento .v { color: var(--brand); }
.kpi.alerta .v { color: var(--warn); }
.kpi.malo   .v { color: var(--crit); }
.kpi.bueno  .v { color: var(--ok); }

/* Buscador de placa del panel: la primera acción del día en recepción */
.buscador-placa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 15px; margin-bottom: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 3px;
}
.buscador-placa label {
  display: flex; align-items: center; gap: 7px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.buscador-placa input {
  flex: 0 1 200px; font-size: 17px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; text-align: center;
  padding: 6px 10px; border: 1.5px solid var(--line-strong); border-radius: 3px;
  background: var(--surface); color: var(--ink);
}
.buscador-placa input:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}
.buscador-placa input::placeholder { color: var(--ink-3); font-weight: 400; letter-spacing: .08em; }
.buscador-placa .pista { font-size: 11.5px; color: var(--ink-3); margin-left: auto; }
.buscador-placa kbd {
  font-family: ui-monospace, Menlo, monospace; font-size: 10.5px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 3px;
  padding: 0 4px; background: var(--surface-2);
}
@media (max-width: 640px) { .buscador-placa .pista { display: none; } }

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */

.scroll-x { overflow-x: auto; max-width: 100%; }

table.datos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.datos th, table.datos td {
  text-align: left; padding: var(--row-y) 12px;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
table.datos thead th {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700; background: var(--surface-2); white-space: nowrap;
}
table.datos thead th a { color: inherit; text-decoration: none; }
table.datos thead th a:hover { color: var(--ink); }
table.datos tbody tr:hover { background: var(--surface-2); }
table.datos tbody tr:last-child td { border-bottom: none; }
table.datos td.num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
table.datos td.acciones { text-align: right; white-space: nowrap; }
table.datos td.acciones > * + * { margin-left: 4px; }
table.datos .sub { color: var(--ink-3); font-size: 11.5px; display: block; margin-top: 1px; }
table.datos tfoot td { background: var(--surface-2); font-weight: 700; border-top: 2px solid var(--line-strong); }

.mono {
  font-family: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------
   Piezas del dominio
   --------------------------------------------------------------------- */

/* Placa: el identificador que usa el mecánico, legible desde la bahía */
.placa {
  display: inline-block; font-weight: 700; font-size: 12.5px; letter-spacing: .07em;
  font-family: ui-monospace, "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  border: 1.5px solid var(--ink-2); border-radius: 2px; padding: 2px 7px;
  background: var(--surface); white-space: nowrap;
}

/* Estado: se distingue por texto y por fondo, así funciona impreso y para daltónicos */
.pill {
  display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .09em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  text-transform: uppercase; padding: 3px 8px; border-radius: 2px; white-space: nowrap;
  color: var(--pill, var(--ink-2));
  background: color-mix(in srgb, var(--pill, var(--ink-2)) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--pill, var(--ink-2)) 30%, transparent);
}

/* Medidor de combustible E—F */
.fuel { display: inline-flex; align-items: center; gap: 2px; }
.fuel b { font-size: 9px; color: var(--ink-3); font-family: ui-monospace, Menlo, monospace; }
.fuel i { width: 4px; height: 12px; background: var(--surface-3); border-radius: 1px; }
.fuel i.on { background: var(--brand); }

.barra-avance { height: 4px; background: var(--surface-3); border-radius: 2px; overflow: hidden; min-width: 64px; }
.barra-avance i { display: block; height: 100%; background: var(--brand); }

.silueta { color: var(--ink-3); }

.chip-color {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  border: 1px solid var(--line-strong); vertical-align: -1px; margin-right: 5px;
}

/* Ficha de detalle */
.datos-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 13px 20px; }
.dato .et {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px;
}
.dato .vl { font-size: 13.5px; }
.dato .vl.grande { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }

/* Historial de la orden */
.hito { display: grid; grid-template-columns: 12px 1fr; gap: 11px; padding-bottom: 14px; position: relative; }
.hito::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 0; width: 1px; background: var(--line); }
.hito:last-child { padding-bottom: 0; }
.hito:last-child::before { display: none; }
.hito .punto { width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; background: var(--punto, var(--line-strong)); }

/* ---------------------------------------------------------------------
   Formularios
   --------------------------------------------------------------------- */

.campos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.campos .ancho-total { grid-column: 1 / -1; }

.campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.campo > label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.campo .req { color: var(--brand); }
.ayuda { font-size: 11.5px; color: var(--ink-3); }

/* Base de los controles: el plugin forms de Tailwind los normaliza y
   aquí solo se ajusta el acabado para que lean como instrumento. */
.campo input[type=text], .campo input[type=email], .campo input[type=password],
.campo input[type=number], .campo input[type=date], .campo input[type=time],
.campo input[type=search], .campo input[type=tel], .campo select, .campo textarea,
input.inp, select.inp, textarea.inp {
  width: 100%; font-size: 13.5px; line-height: 1.4; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 2px; padding: 7px 9px;
}
.campo input[type=number], .mono-input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
}
.campo textarea, textarea.inp { resize: vertical; min-height: 68px; }
.campo input:focus, .campo select:focus, .campo textarea:focus,
.inp:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 22%, transparent);
}
.campo input:disabled, .campo select:disabled, .campo textarea:disabled {
  background: var(--surface-2); color: var(--ink-3);
}

.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--brand); cursor: pointer; }

.acciones-form {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 13px 15px; border-top: 1px solid var(--line); background: var(--surface-2);
}
.acciones-form .separa { margin-left: auto; }

.filtros {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end;
  padding: 11px 15px; background: var(--surface); border: 1px solid var(--line); border-bottom: none;
}
.filtros .campo { flex: 0 1 175px; }
.filtros .buscar { flex: 1 1 230px; }

/* ---------------------------------------------------------------------
   Checklist de recepción
   --------------------------------------------------------------------- */

.chk-grupo { border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.chk-grupo > h3 {
  margin: 0; padding: 7px 12px; font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: #fff; background: var(--grupo, var(--ink-2));
}
.chk-item { display: flex; align-items: center; gap: 8px; padding: 4px 12px; font-size: 12.5px; }
.chk-item .nom { flex: 1; min-width: 0; }
.chk-tri { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.chk-tri input { position: absolute; opacity: 0; pointer-events: none; }
.chk-tri label {
  padding: 2px 7px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--ink-3); cursor: pointer; background: var(--surface); border-right: 1px solid var(--line);
}
.chk-tri label:last-of-type { border-right: none; }
.chk-tri input:checked + label.si { background: var(--ok-bg);   color: var(--ok); }
.chk-tri input:checked + label.no { background: var(--crit-bg); color: var(--crit); }
.chk-tri input:checked + label.na { background: var(--surface-3); color: var(--ink-2); }
.chk-tri input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: -2px; }

/* Diagrama de daños y firma */
.lienzo-caja { position: relative; border: 1px solid var(--line); background: var(--surface); display: inline-block; max-width: 100%; }
.lienzo-caja img { display: block; max-width: 100%; height: auto; }
.lienzo-caja canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.firma-caja { border: 1px solid var(--line-strong); background: var(--surface); display: inline-block; max-width: 100%; }
.firma-caja canvas { display: block; cursor: crosshair; touch-action: none; max-width: 100%; }

/* ---------------------------------------------------------------------
   Paginación
   --------------------------------------------------------------------- */

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 10px 15px; background: var(--surface); border: 1px solid var(--line); border-top: none;
}
.pager-info { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--ink-3); }
.pager-btns { display: flex; gap: 3px; }
.pager-btns a, .pager-btns span {
  min-width: 28px; text-align: center; padding: 3px 8px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px;
  border: 1px solid var(--line); border-radius: 2px; color: var(--ink-2);
  background: var(--surface); text-decoration: none;
}
.pager-btns a:hover { border-color: var(--line-strong); background: var(--surface-2); }
.pager-btns .on  { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.pager-btns .off { opacity: .4; }

/* ---------------------------------------------------------------------
   Impresión
   --------------------------------------------------------------------- */

@media print {
  .lateral, .superior, .velo, .acciones-form, .filtros, .pager, .no-imprimir { display: none !important; }
  .armazon { display: block; }
  .contenido { padding: 0; }
  body { background: #fff; font-size: 11px; }
  .tarjeta { border-color: #999; break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }