/* =====================================================================
   GESTION MAYORISTA DE REPUESTOS - SISTEMA VISUAL
   ---------------------------------------------------------------------
   Direccion: "taller y plano tecnico". Azul acero profundo como color
   institucional (compatible con la plataforma existente de la empresa),
   ambar de senalizacion para stock y promociones, y verde sobrio para
   disponibilidad.

   Dos decisiones tipograficas que no son decorativas:
     1. Los PN van en monoespaciada con tracking. Un numero de parte se
        lee caracter por caracter y se compara contra una etiqueta fisica;
        la monoespaciada evita confundir 0/O y 1/l.
     2. Todo importe usa cifras tabulares y alineacion a la derecha, para
        que las columnas de precios se comparen de un vistazo.

   Elemento distintivo: la "pila de precio" (lista tachada, badge de
   descuento, precio final grande). Es lo que la repuestera realmente
   viene a ver, asi que es lo unico que grita en la pantalla.
   ===================================================================== */

:root {
  --azul-900: #0b2540;
  --azul-800: #123a5e;
  --azul-700: #1a4d7a;
  --azul-600: #22638f;
  --azul-100: #e3edf6;
  --azul-050: #f2f7fb;

  --ambar:     #d98200;
  --ambar-sv:  #fff6e6;
  --verde:     #1f7a4d;
  --verde-sv:  #e8f6ee;
  --rojo:      #b4232a;
  --rojo-sv:   #fdecec;
  --violeta:   #5b4b9b;

  --tinta:     #16202d;
  --tinta-2:   #4a5666;
  --tinta-3:   #7b8698;
  --linea:     #dfe5ee;
  --linea-2:   #eef2f7;
  --fondo:     #f4f6fa;
  --papel:     #ffffff;

  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --sombra: 0 1px 2px rgba(16, 32, 52, .05), 0 4px 14px rgba(16, 32, 52, .05);
  --sombra-alta: 0 8px 30px rgba(16, 32, 52, .13);

  --sidebar: 244px;
  --topbar: 60px;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

body {
  font-family: var(--sans);
  background: var(--fondo);
  color: var(--tinta);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

a { color: var(--azul-700); text-decoration: none; }
a:hover { color: var(--azul-600); text-decoration: underline; }

h1, h2, h3, h4, h5 { font-weight: 650; letter-spacing: -.011em; color: var(--tinta); }

:focus-visible {
  outline: 2px solid var(--azul-600);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- Tipografia funcional ---------- */
.pn {
  font-family: var(--mono);
  font-size: .86em;
  letter-spacing: .04em;
  color: var(--azul-800);
  font-weight: 600;
  word-break: break-all;
}

.num, .money, td.num, th.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  text-align: right;
  white-space: nowrap;
}

.text-muted-2 { color: var(--tinta-3); }
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

/* =====================================================================
   ESTRUCTURA: sidebar fijo en escritorio, offcanvas en movil
   ===================================================================== */
.layout { min-height: 100vh; }

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar);
  background: linear-gradient(178deg, var(--azul-900), #0e2f52 62%, #0d2c4d);
  color: #cfe0ef;
  display: flex;
  flex-direction: column;
  z-index: 1040;
}

.sidebar-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  min-height: var(--topbar);
}
.sidebar-marca .logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(140deg, var(--azul-600), #3d8fc4);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 14px;
  flex: 0 0 auto;
}
.sidebar-marca .logo img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; }
.sidebar-marca strong { color: #fff; font-size: 13.5px; display: block; line-height: 1.25; }
.sidebar-marca span { font-size: 11px; color: #7fa8ca; }

.sidebar-nav { padding: 12px 10px 24px; overflow-y: auto; flex: 1; }
.sidebar-grupo {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: #6f97ba;
  padding: 16px 10px 7px;
}
.sidebar-link {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: #c2d7e8; font-size: 13.8px; font-weight: 500;
  transition: background .13s, color .13s;
}
.sidebar-link:hover { background: rgba(255, 255, 255, .07); color: #fff; text-decoration: none; }
.sidebar-link.activo { background: var(--azul-600); color: #fff; font-weight: 600; }
.sidebar-link .bi { font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; }

/* Contador de lo que espera atencion (pedidos nuevos, notas por comprar).
   Va pegado al borde derecho para que la columna de numeros se lea de un
   vistazo, sin importar el largo del texto de cada opcion. */
.sidebar-cuenta {
  margin-left: auto; flex: 0 0 auto;
  min-width: 20px; padding: 1px 6px;
  border-radius: 99px;
  background: var(--rojo, #b4232a); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.sidebar-link.activo .sidebar-cuenta { background: rgba(255, 255, 255, .22); }
.sidebar-link .contador {
  margin-left: auto;
  background: rgba(255, 255, 255, .16);
  border-radius: 20px; padding: 1px 8px;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.sidebar-link.activo .contador { background: rgba(0, 0, 0, .22); }

.sidebar-pie {
  padding: 12px 14px;
  border-top: 1px solid rgba(255, 255, 255, .09);
  font-size: 11.5px; color: #7fa8ca;
}

/* ---------- Barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--topbar);
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--linea);
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px;
}
.topbar h1 { font-size: 16.5px; margin: 0; font-weight: 650; }
.topbar .sub { font-size: 12px; color: var(--tinta-3); }

.btn-menu {
  border: 1px solid var(--linea); background: #fff;
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: none; place-items: center; color: var(--tinta-2); font-size: 18px;
}

.usuario-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 6px 5px 10px; border-radius: 30px;
  border: 1px solid var(--linea); background: #fff;
}
.usuario-chip .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--azul-100); color: var(--azul-800);
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
}
.usuario-chip .datos { line-height: 1.15; text-align: right; }
.usuario-chip .datos b { font-size: 12.5px; display: block; }
.usuario-chip .datos small { font-size: 10.5px; color: var(--tinta-3); }

.contenido {
  margin-left: var(--sidebar);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.contenido-cuerpo { padding: 20px 22px 60px; flex: 1; }

@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--sombra-alta); }
  .sidebar.abierto { transform: translateX(0); }
  .contenido { margin-left: 0; }
  .btn-menu { display: grid; }
  .contenido-cuerpo { padding: 14px 13px 80px; }
  .usuario-chip .datos { display: none; }
}
.velo {
  position: fixed; inset: 0; background: rgba(11, 37, 64, .5);
  z-index: 1035; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.velo.visible { opacity: 1; pointer-events: auto; }

/* =====================================================================
   TARJETAS Y BLOQUES
   ===================================================================== */
.tarjeta {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  box-shadow: var(--sombra);
}
.tarjeta-cabecera {
  padding: 13px 16px;
  border-bottom: 1px solid var(--linea-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tarjeta-cabecera h2 { font-size: 14.5px; margin: 0; font-weight: 650; }
.tarjeta-cuerpo { padding: 16px; }
.tarjeta-pie { padding: 11px 16px; border-top: 1px solid var(--linea-2); background: var(--azul-050); border-radius: 0 0 var(--r-md) var(--r-md); }

/* --- Metricas del panel --- */
.metricas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); }
.metrica {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-md); padding: 14px 15px;
  border-left: 3px solid var(--azul-600);
  display: block; color: inherit;
  transition: box-shadow .15s, transform .15s;
}
a.metrica:hover { text-decoration: none; box-shadow: var(--sombra-alta); transform: translateY(-1px); color: inherit; }
.metrica .valor { font-size: 26px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.metrica .rotulo { font-size: 11.5px; color: var(--tinta-3); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; margin-top: 3px; }
.metrica .extra { font-size: 12px; color: var(--tinta-2); margin-top: 5px; }
.metrica.solicitado { border-left-color: var(--azul-600); }
.metrica.aceptado { border-left-color: var(--violeta); }
.metrica.preparacion { border-left-color: var(--ambar); }
.metrica.listo { border-left-color: #0d8f8f; }
.metrica.facturado { border-left-color: #4b32a8; }
.metrica.entregado { border-left-color: var(--verde); }
.metrica.anulado { border-left-color: var(--tinta-3); }

/* =====================================================================
   BADGES DE ESTADO
   ===================================================================== */
.badge-estado {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
  white-space: nowrap; border: 1px solid transparent;
}
.badge-estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.estado-solicitado  { background: var(--azul-100);  color: #14507f; border-color: #c3daed; }
.estado-aceptado    { background: #ece9f7;          color: #4a3d86; border-color: #d6cfee; }
.estado-preparacion { background: var(--ambar-sv);  color: #96590a; border-color: #f3dcb2; }
.estado-listo       { background: #e0f4f4;          color: #0a6b6b; border-color: #b8e3e3; }
/* Facturado: violeta, para que se distinga de un vistazo tanto de
   "listo" como de "entregado" en los listados. */
.estado-facturado   { background: #ede9fb;          color: #4b32a8; border-color: #d5cbf3; }
.estado-entregado   { background: var(--verde-sv);  color: #16603c; border-color: #bfe3cf; }
.estado-anulado     { background: #eef0f3;          color: #5c6673; border-color: #dde1e7; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600;
  background: var(--linea-2); color: var(--tinta-2);
}
.chip-ambar  { background: var(--ambar-sv); color: #96590a; }
.chip-verde  { background: var(--verde-sv); color: #16603c; }
.chip-rojo   { background: var(--rojo-sv);  color: #96181e; }
.chip-azul   { background: var(--azul-100); color: #14507f; }

/* =====================================================================
   PILA DE PRECIO  (elemento distintivo)
   ===================================================================== */
.precio-pila { text-align: right; line-height: 1.25; }
.precio-pila .lista {
  font-size: 11.5px; color: var(--tinta-3);
  text-decoration: line-through; font-variant-numeric: tabular-nums;
}
.precio-pila .final {
  font-size: 16px; font-weight: 700; color: var(--tinta);
  font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
.precio-pila .dto {
  display: inline-block; margin-left: 5px;
  background: var(--verde-sv); color: #16603c;
  font-size: 10.5px; font-weight: 700; padding: 1px 5px; border-radius: 5px;
  vertical-align: 2px;
}
.precio-pila .dto.promo { background: var(--ambar-sv); color: #96590a; }
.precio-pila .origen { font-size: 10.5px; color: var(--tinta-3); display: block; margin-top: 1px; }

/* --- Semaforo de stock --- */
.stock-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums;
  padding: 2px 9px; border-radius: 20px;
}
.stock-ok    { background: var(--verde-sv); color: #16603c; }
.stock-poco  { background: var(--ambar-sv); color: #96590a; }
.stock-cero  { background: #eef0f3; color: #6b7482; }

/* =====================================================================
   TABLAS  ->  en movil se convierten en tarjetas
   ===================================================================== */
.tabla-envoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.tabla {
  width: 100%; border-collapse: collapse; font-size: 13.6px; margin: 0;
}
table.tabla thead th {
  background: var(--azul-050);
  color: var(--tinta-2);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 9px 12px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--linea);
  position: sticky; top: 0; z-index: 2;
}
table.tabla tbody td { padding: 10px 12px; border-bottom: 1px solid var(--linea-2); vertical-align: middle; }
table.tabla tbody tr:last-child td { border-bottom: 0; }
table.tabla tbody tr:hover { background: #fafcfe; }
table.tabla .acciones { white-space: nowrap; text-align: right; }

.vacio { padding: 44px 20px; text-align: center; color: var(--tinta-3); }
.vacio .bi { font-size: 34px; opacity: .35; display: block; margin-bottom: 10px; }
.vacio h3 { font-size: 15px; color: var(--tinta-2); margin-bottom: 4px; }
.vacio p { font-size: 13px; margin: 0; }

/* En pantallas chicas cada fila se apila como tarjeta legible. */
@media (max-width: 767.98px) {
  table.tabla-responsiva thead { display: none; }
  table.tabla-responsiva, table.tabla-responsiva tbody, table.tabla-responsiva tr, table.tabla-responsiva td { display: block; width: 100%; }
  table.tabla-responsiva tr {
    border: 1px solid var(--linea); border-radius: var(--r-md);
    margin-bottom: 10px; padding: 4px 0; background: #fff;
  }
  table.tabla-responsiva tbody td {
    border-bottom: 1px solid var(--linea-2);
    padding: 8px 13px;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    text-align: right;
  }
  table.tabla-responsiva tbody td:last-child { border-bottom: 0; }
  table.tabla-responsiva tbody td::before {
    content: attr(data-rotulo);
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tinta-3); text-align: left; flex: 0 0 auto;
  }
  table.tabla-responsiva td[data-rotulo=""]::before { content: none; }
  table.tabla-responsiva .acciones { justify-content: flex-end; }
  table.tabla-responsiva .celda-principal { display: block; text-align: left; }
  table.tabla-responsiva .celda-principal::before { display: block; margin-bottom: 3px; }
}

/* =====================================================================
   FILTROS Y FORMULARIOS
   ===================================================================== */
.filtros {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-md); padding: 13px 15px; margin-bottom: 14px;
  box-shadow: var(--sombra);
}
.filtros label { font-size: 11.5px; font-weight: 650; color: var(--tinta-2); margin-bottom: 3px; display: block; }

.form-control, .form-select {
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  font-size: 14px; padding: 7px 11px; color: var(--tinta); background-color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--azul-600);
  box-shadow: 0 0 0 3px rgba(34, 99, 143, .13);
}
.form-control::placeholder { color: #a5aeba; }
.form-label { font-size: 12.5px; font-weight: 650; color: var(--tinta-2); margin-bottom: 4px; }
.form-text { font-size: 11.5px; color: var(--tinta-3); }
textarea.form-control { min-height: 76px; }

.buscador { position: relative; }
.buscador .bi {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--tinta-3); font-size: 15px; pointer-events: none;
}
.buscador .form-control { padding-left: 35px; }

.btn { border-radius: var(--r-sm); font-size: 13.8px; font-weight: 600; padding: 7px 14px; }
.btn-primary { background: var(--azul-700); border-color: var(--azul-700); }
.btn-primary:hover, .btn-primary:focus { background: var(--azul-800); border-color: var(--azul-800); }
.btn-outline-secondary { border-color: var(--linea); color: var(--tinta-2); background: #fff; }
.btn-outline-secondary:hover { background: var(--azul-050); border-color: var(--azul-600); color: var(--azul-800); }
.btn-sm { font-size: 12.6px; padding: 4px 10px; }
.btn-icono { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; }

.tabla .btn-sm + .btn-sm { margin-left: 4px; }

/* Barra de acciones fija en movil (carrito) */
.barra-accion {
  position: sticky; bottom: 0; z-index: 1020;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linea);
  padding: 11px 14px;
  display: flex; align-items: center; gap: 12px;
  margin: 18px -22px -60px;
}
@media (max-width: 991.98px) { .barra-accion { margin: 14px -13px -80px; } }

/* =====================================================================
   CATALOGO
   ===================================================================== */
.catalogo-item { border-bottom: 1px solid var(--linea-2); padding: 13px 15px; }
.catalogo-item:last-child { border-bottom: 0; }
.catalogo-item .titulo { font-weight: 620; font-size: 14.2px; margin-bottom: 2px; }
.catalogo-item .meta { font-size: 12px; color: var(--tinta-3); display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }

.cantidad-grupo { display: inline-flex; align-items: stretch; border: 1px solid var(--linea); border-radius: var(--r-sm); overflow: hidden; background: #fff; }
.cantidad-grupo button {
  border: 0; background: var(--azul-050); color: var(--azul-800);
  width: 32px; font-size: 15px; font-weight: 700; line-height: 1;
}
.cantidad-grupo button:hover:not(:disabled) { background: var(--azul-100); }
.cantidad-grupo button:disabled { opacity: .4; }
.cantidad-grupo input {
  border: 0; width: 52px; text-align: center; font-size: 14px; font-weight: 620;
  font-variant-numeric: tabular-nums; padding: 6px 2px;
}
.cantidad-grupo input:focus { outline: none; background: #fbfdff; }

/* Promociones */
.promo-tarjeta {
  background: var(--papel); border: 1px solid var(--linea); border-top: 3px solid var(--ambar);
  border-radius: var(--r-md); padding: 15px; height: 100%;
  display: flex; flex-direction: column; box-shadow: var(--sombra);
}
.promo-tarjeta .vence { font-size: 11.5px; color: #96590a; font-weight: 650; }
.promo-tarjeta .vence.urgente { color: var(--rojo); }

/* Linea de tiempo del pedido */
.linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--linea); }
.linea-tiempo li { position: relative; padding: 0 0 16px 4px; }
.linea-tiempo li:last-child { padding-bottom: 0; }
.linea-tiempo li::before {
  content: ""; position: absolute; left: -20px; top: 5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #fff; border: 2px solid var(--azul-600);
}
.linea-tiempo li.actual::before { background: var(--azul-600); box-shadow: 0 0 0 3px rgba(34, 99, 143, .18); }
.linea-tiempo .cuando { font-size: 11.5px; color: var(--tinta-3); }

/* Paginacion */
.paginacion { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.paginacion a, .paginacion span {
  min-width: 33px; height: 33px; padding: 0 9px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--linea); border-radius: var(--r-sm);
  background: #fff; font-size: 13px; color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.paginacion a:hover { border-color: var(--azul-600); color: var(--azul-800); text-decoration: none; }
.paginacion .actual { background: var(--azul-700); border-color: var(--azul-700); color: #fff; font-weight: 650; }
.paginacion .inerte { opacity: .45; }

/* Avisos flotantes */
#avisos {
  position: fixed; top: 14px; right: 14px; z-index: 1090;
  display: flex; flex-direction: column; gap: 9px; max-width: min(400px, calc(100vw - 28px));
}
.aviso {
  background: #fff; border: 1px solid var(--linea); border-left: 4px solid var(--azul-600);
  border-radius: var(--r-sm); box-shadow: var(--sombra-alta);
  padding: 11px 14px; font-size: 13.6px;
  display: flex; gap: 10px; align-items: flex-start;
  animation: entrar .2s ease;
}
@keyframes entrar { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }
.aviso.exito { border-left-color: var(--verde); }
.aviso.error { border-left-color: var(--rojo); }
.aviso.alerta { border-left-color: var(--ambar); }
.aviso .cerrar { margin-left: auto; border: 0; background: none; color: var(--tinta-3); font-size: 17px; line-height: 1; padding: 0 2px; }

/* Login */
.pagina-acceso {
  min-height: 100vh; display: grid; place-items: center; padding: 22px;
  background:
    radial-gradient(1100px 520px at 12% -12%, #1b4d78 0%, transparent 58%),
    radial-gradient(900px 460px at 108% 108%, #16406a 0%, transparent 55%),
    var(--azul-900);
}
.caja-acceso { width: 100%; max-width: 396px; }
.caja-acceso .marca { text-align: center; color: #fff; margin-bottom: 20px; }
.caja-acceso .marca .logo {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 12px;
  background: linear-gradient(140deg, var(--azul-600), #3d8fc4);
  display: grid; place-items: center; font-size: 21px; font-weight: 800;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
.caja-acceso .marca h1 { color: #fff; font-size: 19px; margin: 0 0 3px; }
.caja-acceso .marca p { color: #8fb4d4; font-size: 13px; margin: 0; }
.caja-acceso .panel { background: #fff; border-radius: var(--r-lg); padding: 26px 24px; box-shadow: 0 22px 60px rgba(0, 0, 0, .3); }
.caja-acceso .pie { text-align: center; margin-top: 16px; color: #7fa8ca; font-size: 11.5px; }

/* Impresion */
@media print {
  .sidebar, .topbar, .no-imprimir, .barra-accion, #avisos { display: none !important; }
  .contenido { margin-left: 0; }
  .contenido-cuerpo { padding: 0; }
  body { background: #fff; font-size: 12px; }
  .tarjeta { border: 0; box-shadow: none; }
  table.tabla thead th { background: #eef2f7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}

/* Utilidades */
.pila-2 { display: flex; flex-direction: column; gap: 2px; }
.gap-filtros { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); align-items: end; }
.linea-sep { height: 1px; background: var(--linea-2); margin: 14px 0; }
.cargando { position: relative; pointer-events: none; opacity: .55; }
.cargando::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--linea); border-top-color: var(--azul-600);
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ===================================================================
   MEDIDOR DE CONTRASENA
   Orientativo: acompaña al usuario sin bloquear nada. Se eligio no
   imponer reglas de composicion (mayusculas, simbolos) porque empujan
   a la gente a claves cortas y anotadas en un papel; el minimo de
   largo lo valida el backend.
   =================================================================== */
.medidor .barra{height:5px;background:var(--linea);border-radius:99px;overflow:hidden}
.medidor .barra span{display:block;height:100%;width:0;border-radius:99px;
  transition:width .2s ease, background .2s ease}
.medidor .texto{font-size:11.5px;font-weight:650;margin-top:4px}
@media (prefers-reduced-motion: reduce){.medidor .barra span{transition:none}}

/* ===================================================================
   TARJETA DE OPCION
   Para elegir entre alternativas donde cada una necesita explicacion.
   Un radio suelto con una linea de texto no alcanza cuando la decision
   tiene consecuencias.
   =================================================================== */
.tarjeta-opcion{display:flex;gap:10px;align-items:flex-start;padding:13px 15px;
  border:1px solid var(--linea);border-radius:10px;cursor:pointer;height:100%;
  transition:border-color .15s ease, background .15s ease}
.tarjeta-opcion:hover{border-color:var(--azul-700)}
.tarjeta-opcion input{margin-top:2px;flex-shrink:0}
.tarjeta-opcion:has(input:checked){border-color:var(--azul-700);background:var(--azul-sv)}
@media (prefers-reduced-motion: reduce){.tarjeta-opcion{transition:none}}