/* Aplicación web — Nodos Punto de Venta
   Los tokens son los mismos del panel de licencias: las dos cosas son el mismo
   producto y un cliente puede ver ambas. */

:root {
  --marca: #DA2B30;
  --marca-oscura: #B71F24;
  --marca-tenue: #FDF2F2;
  --marca-borde: #F5D2D3;

  --tinta: #14161A;
  --tinta-media: #4A5159;
  --tinta-suave: #7C848D;

  --linea: #E7E9ED;
  --linea-suave: #F1F3F6;
  --fondo: #F5F6F8;
  --papel: #FFFFFF;

  --verde: #15754B;
  --verde-tenue: #E9F6EF;
  --ambar: #8A5A00;
  --ambar-tenue: #FDF4E3;

  --r-chico: 8px;
  --r: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra-alta: 0 4px 16px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 22px; letter-spacing: -.015em; margin: 0 0 6px; }
h2 { font-size: 15px; letter-spacing: -.005em; margin: 0 0 12px; }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.tenue { color: var(--tinta-suave); }
.centrar { text-align: center; }

/* ------------------------------------------------------------- encabezado */

header.barra {
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
  position: sticky;
  top: 0;
  z-index: 20;
}
header.barra[hidden] { display: none; }

.barra-interna {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 22px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -.01em;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}
.marca img { display: block; border-radius: 7px; }

nav.menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}
nav.menu::-webkit-scrollbar { display: none; }

nav.menu a {
  padding: 7px 12px;
  border-radius: var(--r-chico);
  color: var(--tinta-media);
  text-decoration: none;
  white-space: nowrap;
}
nav.menu a:hover { background: var(--linea-suave); color: var(--tinta); }
nav.menu a.activo { background: var(--marca-tenue); color: var(--marca-oscura); font-weight: 600; }

.barra-derecha {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  font-size: 14px;
}

/* En un teléfono, el nombre del producto más el del usuario suman más ancho que
   la pantalla entera y empujaban la página a desplazarse en horizontal. Los dos
   son prescindibles ahí: el logo ya identifica la aplicación, y quién está
   dentro se ve al entrar. Lo que no puede perderse es el menú ni Salir. */
@media (max-width: 700px) {
  .barra-interna { padding: 0 14px; gap: 12px; }
  .marca-texto { display: none; }
  #quien { display: none; }
}

/* ---------------------------------------------------------------- botones */

.btn {
  font: inherit;
  padding: 9px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--linea-suave); }
.btn:disabled { opacity: .55; cursor: default; }

.btn-principal {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  font-weight: 600;
  width: 100%;
  padding: 11px 16px;
}
.btn-principal:hover:not(:disabled) { background: var(--marca-oscura); border-color: var(--marca-oscura); }

.btn-tenue { padding: 6px 12px; font-size: 14px; }

.enlace {
  font: inherit;
  font-size: 13.5px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--marca);
  cursor: pointer;
}
.enlace:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- diseño */

main { min-height: 60vh; }

.contenido {
  max-width: 1140px;
  margin: 0 auto;
  padding: 26px 20px 60px;
}

/* Las pantallas de acceso van centradas y sin barra: no hay nada que navegar
   todavía. Se usa min-height con dvh para que en el teléfono no quede media
   pantalla vacía debajo del teclado. */
.centrado {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
}

.panel {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 18px;
}

.panel.vacio {
  text-align: center;
  color: var(--tinta-media);
  padding: 34px 20px;
}
.panel.vacio p { margin: 0 0 8px; }

.tarjeta-acceso {
  width: 100%;
  max-width: 380px;
  padding: 30px 26px;
  box-shadow: var(--sombra-alta);
  margin: 0;
}
.tarjeta-acceso h1 { text-align: center; }
.logo-acceso { display: block; margin: 0 auto 14px; border-radius: 10px; }

.pie-acceso {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

/* ---------------------------------------------------------------- campos */

label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--tinta-media);
  margin: 14px 0 5px;
}

input, select, textarea {
  font: inherit;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--papel);
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marca-borde);
  outline-offset: 0;
  border-color: var(--marca);
}

/* 16px o más: por debajo de eso, Safari en iPhone hace zoom al enfocar el
   campo y deja la pantalla corrida. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px; }
}

.tarjeta-acceso .btn-principal { margin-top: 22px; }

/* ----------------------------------------------------------------- ficha */

dl.ficha {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 8px 18px;
  margin: 0;
}
dl.ficha dt { color: var(--tinta-suave); font-size: 13.5px; }
dl.ficha dd { margin: 0; overflow-wrap: anywhere; }

@media (max-width: 520px) {
  dl.ficha { grid-template-columns: 1fr; gap: 2px; }
  dl.ficha dd { margin-bottom: 10px; }
}

/* ---------------------------------------------------------------- avisos */

/* Por debajo de la altura de la barra: centrado arriba, los avisos tapaban el
   menú justo cuando el error invitaba a ir a otra pantalla. En las pantallas de
   acceso no hay barra, y ahí este margen no molesta. */
.zona-avisos {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  width: min(440px, calc(100vw - 28px));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.aviso {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r-chico);
  border: 1px solid var(--linea);
  background: var(--papel);
  box-shadow: var(--sombra-alta);
  font-size: 14px;
}
.aviso-error { background: var(--marca-tenue); border-color: var(--marca-borde); color: var(--marca-oscura); }
.aviso-exito { background: var(--verde-tenue); border-color: #C4E5D4; color: var(--verde); }

.aviso span { flex: 1; }
.aviso-cerrar {
  font: inherit;
  font-size: 18px;
  line-height: 1;
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  opacity: .6;
  cursor: pointer;
}
.aviso-cerrar:hover { opacity: 1; }

.cargando {
  text-align: center;
  padding: 60px 20px;
  color: var(--tinta-suave);
}

/* ------------------------------------------------------------ punto de venta */

.pos-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.pos-barra select { width: auto; min-width: 160px; }
label.en-linea { margin: 0; }

.etiqueta {
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--linea);
}
.etiqueta-verde { background: var(--verde-tenue); border-color: #C4E5D4; color: var(--verde); }

/* Dos columnas en pantalla grande; una sola en tableta y teléfono, con el
   carrito debajo del buscador, que es el orden en que se usa. */
.pos-rejilla {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .pos-rejilla { grid-template-columns: 1fr; }
}

.form-angosto { max-width: 280px; margin: 18px auto 0; text-align: left; }

/* ------------------------------------------------------------- resultados */

ul.lista-resultados {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  overflow: hidden;
}
ul.lista-resultados li + li { border-top: 1px solid var(--linea-suave); }

ul.lista-resultados button {
  font: inherit;
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  background: var(--papel);
  text-align: left;
  cursor: pointer;
}
ul.lista-resultados button:hover { background: var(--marca-tenue); }
ul.lista-resultados .nombre { flex: 1; }
ul.lista-resultados .precio { font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- carrito */

table.tabla-carrito {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
table.tabla-carrito th {
  text-align: left;
  font-size: 12.5px;
  color: var(--tinta-suave);
  font-weight: 600;
  padding: 0 6px 8px;
  border-bottom: 1px solid var(--linea);
}
table.tabla-carrito td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--linea-suave);
  vertical-align: top;
}
table.tabla-carrito .der, th.der { text-align: right; }

table.tabla-carrito input.cantidad,
table.tabla-carrito input.precio-manual {
  width: 84px;
  padding: 5px 7px;
  text-align: right;
  font-size: 14px;
}

button.quitar {
  font: inherit;
  font-size: 17px;
  line-height: 1;
  background: none;
  border: 0;
  padding: 2px 4px;
  color: var(--tinta-suave);
  cursor: pointer;
}
button.quitar:hover { color: var(--marca); }

/* ------------------------------------------------------------------ cobro */

.pos-cobro { margin-top: 18px; }
.pos-cobro .fila { display: flex; gap: 8px; align-items: center; }
.pos-cobro .fila input { flex: 1; }
.pos-cobro .btn { width: 100%; margin-top: 10px; }

.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
  font-size: 15px;
}
.total strong { font-size: 21px; letter-spacing: -.02em; }
.total.falta { color: var(--marca); border-top: 0; padding-top: 4px; }

.comprobante strong { font-size: 15px; }

/* ------------------------------------------------------- acciones del POS */

.pos-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.btn.accion { padding: 7px 14px; font-size: 14px; }
.btn.accion-activa {
  background: var(--marca-tenue);
  border-color: var(--marca-borde);
  color: var(--marca-oscura);
  font-weight: 600;
}

.pos-filtros {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 14px;
}
.pos-filtros select { width: auto; min-width: 150px; }
@media (max-width: 620px) {
  .pos-filtros { grid-template-columns: 1fr; }
  .pos-filtros select { width: 100%; }
}

/* --------------------------------------------------- tarjetas de producto */

.tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

button.tarjeta {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 96px;
  padding: 11px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  background: var(--papel);
  text-align: left;
  cursor: pointer;
}
button.tarjeta:hover { border-color: var(--marca); background: var(--marca-tenue); }

.tarjeta-nombre { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.tarjeta-sku { font-size: 11.5px; color: var(--tinta-suave); }
.tarjeta-pie {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
.tarjeta-precio { font-size: 14px; font-weight: 650; }

.stock {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--verde-tenue);
  color: var(--verde);
}
.stock-cero { background: var(--marca-tenue); color: var(--marca-oscura); }

/* ---------------------------------------------------------------- resumen */

.resumen { margin-top: 16px; }
.fila-resumen {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 13.5px;
  color: var(--tinta-media);
}
.fila-resumen span:last-child { color: var(--tinta); font-weight: 500; }

.casilla {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.casilla input { width: auto; }

.pos-venta .btn { width: 100%; margin-top: 10px; }

/* --------------------------------------------------------------- modales */

body.con-modal { overflow: hidden; }

.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(16, 24, 40, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.modal {
  background: var(--papel);
  border-radius: var(--r);
  box-shadow: var(--sombra-alta);
  width: min(440px, 100%);
  max-height: calc(100dvh - 40px);
  display: flex;
  flex-direction: column;
}
.modal[data-ancho="ancho"] { width: min(620px, 100%); }

.modal-barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--linea);
}
.modal-barra h2 { margin: 0; font-size: 16px; }

.modal-cerrar {
  font: inherit;
  font-size: 22px;
  line-height: 1;
  background: none;
  border: 0;
  padding: 0 2px;
  color: var(--tinta-suave);
  cursor: pointer;
}
.modal-cerrar:hover { color: var(--tinta); }

.modal-cuerpo { padding: 18px 20px 22px; overflow-y: auto; }
.modal-cuerpo .btn { width: 100%; margin-top: 12px; }
.modal-cuerpo h3 { font-size: 13px; margin: 18px 0 8px; color: var(--tinta-media); }
.modal-cuerpo .fila { display: flex; gap: 8px; }
.modal-cuerpo .fila input { flex: 1; }
.modal-cuerpo .fila select { width: 80px; }

.dato { margin: 0 0 12px; font-weight: 600; }

.panel-interno {
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: var(--r-chico);
  padding: 12px 14px;
  margin: 14px 0;
}
.panel-interno .total { margin-top: 8px; padding-top: 8px; }
.panel-interno p { margin: 4px 0 0; }

.aviso-interno {
  background: var(--ambar-tenue);
  border: 1px solid #F0DDB4;
  color: var(--ambar);
  border-radius: var(--r-chico);
  padding: 9px 12px;
  font-size: 13.5px;
  margin: 0 0 12px;
}

/* -------------------------------------------------------------- botoneras */

.botonera { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.botonera .btn { width: auto; margin-top: 0; flex: 1 1 auto; }
.btn.elegido {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  font-weight: 600;
}
.btn.elegido:hover:not(:disabled) { background: var(--marca-oscura); }

.fichas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
button.ficha {
  font: inherit;
  font-size: 13px;
  padding: 6px 11px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--papel);
  cursor: pointer;
}
button.ficha:hover { border-color: var(--marca); }
button.ficha.elegido { background: var(--marca-tenue); border-color: var(--marca-borde); color: var(--marca-oscura); }

/* ------------------------------------------------------------ pagos mixtos */

ul.lista-pagos { list-style: none; margin: 8px 0 12px; padding: 0; }
ul.lista-pagos li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea-suave);
  font-size: 14px;
}
ul.lista-pagos li span:first-child { flex: 1; }

.en-rojo { color: var(--marca); }

.cambio-grande {
  text-align: center;
  background: var(--verde-tenue);
  border: 1px solid #C4E5D4;
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 18px;
}
.cambio-grande span { display: block; font-size: 13px; color: var(--verde); font-weight: 600; }
.cambio-grande strong { display: block; font-size: 34px; letter-spacing: -.03em; color: var(--verde); }

.etiqueta-ambar { background: var(--ambar-tenue); border-color: #F0DDB4; color: var(--ambar); }
.casilla-suelta { margin-top: 16px; }

/* ------------------------------------------------------------ comprobante */

/* Fuera de impresión el comprobante no se ve: se cuelga del documento solo
   mientras dura el diálogo de impresión. */
#comprobante { display: none; }

@media print {
  /* Se oculta la aplicación entera y se deja únicamente el ticket. Ocultar por
     visibilidad y no por display evita que el navegador reserve páginas en
     blanco por los contenedores vacíos. */
  body.imprimiendo > *:not(#comprobante) { display: none !important; }

  body.imprimiendo {
    background: #fff;
    overflow: visible;
  }

  #comprobante { display: block; }

  .tk {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    color: #000;
    font: 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }

  .tk-cabecera { text-align: center; margin-bottom: 10px; }
  .tk-negocio { display: block; font-size: 14px; }
  .tk-tenue { color: #555; }

  .tk-titulo {
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    padding: 6px 0;
    border-top: 1px dashed #000;
    border-bottom: 1px dashed #000;
    margin-bottom: 8px;
  }

  .tk-datos div, .tk-totales div, .tk-pagos div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .tk-exenta {
    border: 1px solid #000;
    padding: 5px;
    margin: 8px 0;
    font-size: 10px;
  }

  table.tk-lineas {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 10.5px;
  }
  table.tk-lineas th {
    text-align: left;
    border-bottom: 1px dashed #000;
    padding-bottom: 3px;
  }
  table.tk-lineas td { padding: 3px 0; vertical-align: top; }
  table.tk-lineas .der, table.tk-lineas th.der { text-align: right; }

  .tk-totales { border-top: 1px dashed #000; padding-top: 6px; }
  .tk-total { font-weight: bold; font-size: 13px; border-top: 1px solid #000; margin-top: 4px; padding-top: 4px; }

  .tk-pagos { border-top: 1px dashed #000; margin-top: 6px; padding-top: 6px; }

  .tk-nota { margin-top: 10px; text-align: center; font-size: 10px; }

  .tk-fiscal {
    margin-top: 10px;
    padding-top: 6px;
    border-top: 1px dashed #000;
    text-align: center;
    font-size: 9.5px;
  }

  .tk-firma { margin-top: 26px; text-align: center; font-size: 10px; }
  .tk-linea-firma { border-top: 1px solid #000; margin: 0 20px 4px; }

  @page { margin: 8mm; }
}

/* ------------------------------------------------------------- pestañas */

nav.pestañas {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
nav.pestañas::-webkit-scrollbar { display: none; }

button.pestaña {
  font: inherit;
  font-size: 14px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: var(--r-chico);
  background: none;
  color: var(--tinta-media);
  white-space: nowrap;
  cursor: pointer;
}
button.pestaña:hover { background: var(--linea-suave); color: var(--tinta); }
button.pestaña.activa {
  background: var(--marca-tenue);
  border-color: var(--marca-borde);
  color: var(--marca-oscura);
  font-weight: 600;
}

/* -------------------------------------------------------------- filtros */

.filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filtros input { flex: 1 1 240px; }
.filtros select { width: auto; min-width: 160px; }
.filtros .btn { white-space: nowrap; }

/* --------------------------------------------------------------- tablas */

/* La tabla se desplaza dentro de su propia caja: en un teléfono, dejar que
   empuje la página entera rompe el resto de la pantalla. */
#tabla { overflow-x: auto; }

table.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  white-space: nowrap;
}
table.tabla th {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-suave);
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--linea);
}
table.tabla td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--linea-suave);
  vertical-align: top;
}
table.tabla .der, table.tabla th.der { text-align: right; }

tr.fila-pulsable { cursor: pointer; }
tr.fila-pulsable:hover { background: var(--linea-suave); }
tr.fila-elegida { background: var(--marca-tenue); }

.en-verde { color: var(--verde); font-weight: 600; }
.etiqueta-roja { background: var(--marca-tenue); border-color: var(--marca-borde); color: var(--marca-oscura); }

.paginacion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.paginacion:empty { margin: 0; }

/* --------------------------------------------------- barra de selección */

.barra-seleccion {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.sel-datos { flex: 1 1 200px; }
.sel-existencia { text-align: center; }
.sel-existencia span { display: block; font-size: 10.5px; letter-spacing: .04em; }
.sel-existencia strong { display: block; font-size: 22px; letter-spacing: -.02em; }
.sel-ficha { flex: 2 1 300px; }

.btn-angosto { width: auto; }
.sel-botones { display: flex; gap: 8px; }
.fila-tramo { margin-bottom: 8px; align-items: center; }
.fila-tramo input { flex: 1; }
.modal-cuerpo .fila > div { flex: 1; }
.modal-cuerpo .fila > div label { margin-top: 0; }
ul.lista-pagos input.cantidad { width: 90px; padding: 5px 8px; text-align: right; }

.pestañas-hijas { margin-bottom: 14px; }
.pestañas-hijas .pestaña { font-size: 13.5px; padding: 6px 12px; }
tr.fila-inactiva td { opacity: .55; }
table.tabla .enlace { margin-left: 12px; }

/* ------------------------------------------------------------------ caja */

.caja-encabezado {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.caja-encabezado h2 { margin: 0 0 2px; font-size: 17px; }
.caja-encabezado p { margin: 0; font-size: 13.5px; }

.caja-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 26px;
  align-items: start;
}
@media (max-width: 860px) {
  .caja-rejilla { grid-template-columns: 1fr; gap: 22px; }
}

.caja-rejilla h3 { font-size: 13px; margin: 0 0 10px; color: var(--tinta-media); }

/* El desglose del efectivo no lleva encabezados: son pares concepto-importe. */
table.tabla-simple { white-space: normal; }
table.tabla-simple td { padding: 7px 0; }
tr.fila-total td { border-top: 1px solid var(--linea); border-bottom: 0; padding-top: 11px; font-size: 15px; }

.cambio-alerta { background: var(--ambar-tenue); border-color: #F0DDB4; }
.cambio-alerta span, .cambio-alerta strong { color: var(--ambar); }

table.tabla tfoot .fila-total td { border-bottom: 0; padding-top: 12px; }

/* -------------------------------------------------------------- reportes */

.reportes-rejilla {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) {
  .reportes-rejilla { grid-template-columns: 1fr; }
}

.reportes-rejilla aside h3 {
  font-size: 12px;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 18px 0 8px;
}
.reportes-rejilla aside h3:first-child { margin-top: 0; }

ul.lista-reportes { list-style: none; margin: 0; padding: 0; }
ul.lista-reportes button {
  font: inherit;
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--r-chico);
  background: none;
  text-align: left;
  cursor: pointer;
}
ul.lista-reportes button:hover { background: var(--linea-suave); }
ul.lista-reportes button.elegido {
  background: var(--marca-tenue);
  border-color: var(--marca-borde);
}
ul.lista-reportes strong { display: block; font-size: 13.5px; font-weight: 600; }

.rp-acciones {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px 0 10px;
}
.rp-tabla { overflow-x: auto; }

@media print {
  .rp-impreso { color: #000; font: 10px/1.4 -apple-system, "Segoe UI", Arial, sans-serif; }
  .rp-impreso h1 { font-size: 15px; margin: 12px 0 2px; }
  .rp-periodo { margin: 0 0 12px; font-size: 9.5px; color: #444; }
  .rp-impreso table { width: 100%; border-collapse: collapse; font-size: 9.5px; }
  .rp-impreso th {
    text-align: left;
    border-bottom: 1px solid #000;
    padding: 4px 6px;
  }
  .rp-impreso td { padding: 3px 6px; border-bottom: 1px solid #ddd; }
  .rp-impreso .der { text-align: right; }
  .rp-impreso tfoot td { border-top: 1px solid #000; border-bottom: 0; padding-top: 6px; }
  /* Que el encabezado se repita en cada hoja de un reporte largo. */
  .rp-impreso thead { display: table-header-group; }
  .rp-impreso tr { break-inside: avoid; }
}