/* ==========================================================
   Consulta de pesadas SoftBOX
   Sistema de diseño SoftBOX (assets/comun/softbox.css, cargado antes):
   claro y plano, barra superior negra de marca, contenido #F1F1F1,
   tarjetas blancas con sombra suave, ámbar como único acento, Manrope.
   ========================================================== */

:root {
  --abierta: var(--danger);
  --margen: clamp(12px, 1.8vw, 28px);
  --f-logo: "Anton", "Impact", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overscroll-behavior: none; }
body { background-color: var(--canvas); color: var(--ink); font: 500 15px/22px Manrope, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus, :focus-visible { outline: none; }   /* sin anillo de foco (pedido del usuario) */
svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* El color va solo en <html> y se hereda: en cada elemento (*) con una variable,
   cambiar de tema recalculaba una por una todas las celdas. */
html { scrollbar-color: var(--borde) transparent; }
* { scrollbar-width: thin; }

/* ---------- Logo oficial (imagen): clara sobre fondo claro, original sobre la barra negra ---------- */
.logo { display: inline-flex; align-items: center; font-size: 20px; line-height: 0; user-select: none; }
.logo__img { display: block; height: 1.3em; width: auto; }
.logo__img--oscuro { display: none; }
.barra .logo__img--oscuro { display: block; }
.barra .logo__img--claro { display: none; }

/* ---------- Botones (34 de alto, radio 9) ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 128px; height: 34px; padding: 0 14px; border: 0; border-radius: 9px;
  background-color: var(--boton); color: var(--ink);
  font: 700 13px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; white-space: nowrap; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.05), 1px 2px 6px rgba(0,0,0,.04);
  transition: transform .32s cubic-bezier(.2,.7,.2,1), box-shadow .32s cubic-bezier(.2,.7,.2,1), background-color .24s cubic-bezier(.2,.7,.2,1), color .24s;
}
.boton svg { width: 15px; height: 15px; }
.boton:hover { transform: translateY(-1px); background-color: var(--boton-hover); box-shadow: inset 0 0 0 1px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.06), 2px 6px 16px rgba(0,0,0,.10); }
.boton:active { transform: scale(.97); transition-duration: .12s; background-color: var(--boton-press); }
.boton:disabled { background-color: var(--disabled); color: var(--disabled-ink); box-shadow: none; transform: none; cursor: not-allowed; }
.boton--acento { background-color: var(--amber); color: var(--on-amber); box-shadow: 0 1px 1px rgba(0,0,0,.08), 1px 2px 6px rgba(0,0,0,.08); }
.boton--acento:hover { background-color: var(--amber-hover); box-shadow: 0 1px 1px rgba(0,0,0,.06), 2px 6px 16px rgba(0,0,0,.12); }
.boton--acento:active { background-color: var(--amber-press); }
.boton--suave { }
.boton--ancho { width: 100%; }
.icono { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); cursor: pointer; transition: background-color .24s cubic-bezier(.2,.7,.2,1), color .24s; }
.icono:hover { background-color: var(--velo); color: var(--ink); }
.icono:active { transform: scale(.94); }

/* ---------- Campos (42 de alto, radio 10, fondo #F4F4F4, borde #CFCFCF) ---------- */
input[type="date"], input[type="search"], input[type="text"], input[type="password"], input:not([type]), select, textarea {
  height: 42px; padding: 0 14px; border: 1px solid; border-color: var(--borde); border-radius: 10px;
  background-color: var(--field); color: var(--ink); outline: none; font-size: 15px;
  box-shadow: inset 1px 2px 3px rgba(0,0,0,.07); caret-color: #e6a200;
  transition: border-color .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1), background-color .32s cubic-bezier(.16,1,.3,1);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--borde-hover); }
input:focus, select:focus, textarea:focus { background-color: var(--campo-foco); border-color: var(--borde-foco); box-shadow: 0 0 0 4px rgba(20,20,20,.06), 0 4px 14px rgba(0,0,0,.06); }
input[type="date"] { color-scheme: light; }
select { appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%235c5c5c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; }
textarea { height: auto; min-height: 44px; padding: 10px 14px; resize: none; overflow: hidden; line-height: 22px; }

/* ======================= Ingreso ======================= */
body.ingreso { display: grid; place-items: center; min-height: 100%; padding: 24px 16px; background-color: var(--canvas); }
.ingreso__caja { width: min(440px, 100%); display: grid; gap: 20px; }
/* Logo arriba y "Consulta de pesadas" abajo, los dos centrados (24/10/2026). */
.ingreso__marca { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.ingreso__marca .logo { font-size: 30px; }
.ingreso__marca > span:last-child { font: 800 22px/28px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; }
.ingreso__form { display: grid; gap: 16px; padding: 24px; border-radius: 16px; background-color: var(--surface); box-shadow: var(--sh-card); }
.ingreso__error { display: flex; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 12px; background-color: var(--danger-soft); color: var(--danger); font: 600 14px/20px Manrope, "Helvetica Neue", Arial, sans-serif; }
.ingreso__pie { margin: 0; text-align: center; color: var(--ink-3); font: 600 12px Manrope, "Helvetica Neue", Arial, sans-serif; }
.ingreso__pie a { color: var(--ink-2); text-decoration: none; }
.ingreso__pie a:hover { text-decoration: underline; }
body.ingreso { padding-top: 84px; }
html:has(body.ingreso) { scrollbar-width: thin; scrollbar-gutter: stable; }
.campo { display: grid; gap: 6px; }
.campo > span:first-child, .entidades legend { font: 700 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.campo input, .campo select { width: 100%; }
/* entidad: chips del sistema (activo negro) */
.entidades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 0; padding: 0; border: 0; }
.entidades legend { padding: 0; margin-bottom: 6px; }
.entidad { position: relative; }
.entidad input { position: absolute; opacity: 0; pointer-events: none; }
.entidad span {
  display: grid; place-items: center; height: 34px; padding: 0 6px; border: 1px solid; border-color: var(--borde); border-radius: 9px;
  background-color: var(--surface); color: var(--ink-2); font: 700 12.5px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .16s;
}
.entidad span:hover { border-color: var(--borde-hover); color: var(--ink); }
.entidad:active span { transform: scale(.97); }
.entidad input:checked + span { background-color: var(--chassis); border-color: var(--chassis); color: var(--on-chassis); }
.clave { position: relative; display: block; }
.clave input { padding-right: 46px; }
.clave__ver { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.clave__ver:hover { background-color: var(--velo); color: var(--ink); }
.clave__ver.activo { color: var(--ink); }

/* ======================= Consulta ======================= */
/* Barra negra de marca arriba y superficie de contenido con esquinas de 20px. */
body.app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; background-color: var(--chassis); }

.barra__marca .logo { view-transition-name: cab-logo; }
.barra .tema-boton { view-transition-name: cab-tema; }
.barra { view-transition-name: cabecera; flex: none; display: flex; align-items: center; gap: 20px; height: 64px; padding: 0 var(--margen); background-color: var(--chassis); color: var(--on-chassis); }
.barra__quien { display: grid; min-width: 0; }
.barra__quien strong { font: 800 18px/24px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__quien span { font: 600 12px/16px Manrope, "Helvetica Neue", Arial, sans-serif; color: #8c8c8c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* pestañas: control segmentado sobre el chasis */
.pestanas { position: relative; isolation: isolate; display: flex; gap: 0; margin-left: auto; padding: 3px; border-radius: 11px; background: #1f1f1f; }
/* Una sola pieza clara que se desliza de una opción a la otra (la mueve consulta.js). */
.pestanas__indicador {
  position: absolute; z-index: -1; top: 3px; bottom: 3px; left: 0;
  width: var(--ind-w, 0px); transform: translateX(var(--ind-x, 3px));
  border-radius: 8px; background-color: var(--content);
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 4px 12px rgba(0,0,0,.18);
  transition: transform .45s cubic-bezier(.3,1.25,.5,1), width .45s cubic-bezier(.3,1.25,.5,1);
  will-change: transform, width;
}
.pestanas.sin-transicion .pestanas__indicador { transition: none; }
.pestana { position: relative; height: 30px; padding: 0 18px; border: 0; border-radius: 8px; background: transparent; color: #9a9a9a; font: 700 13px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; transition: color .45s cubic-bezier(.16,1,.3,1); }
.pestana:hover { color: #e6e6e6; }
.pestana.activa, .pestana.activa:hover { color: var(--ink); }
.pestana:active { transform: scale(.97); transition: color .45s cubic-bezier(.16,1,.3,1), transform .12s; }
/* Sin JS el activo igual se ve */
.pestanas:not(.lista) .pestana.activa { background-color: var(--content); }
/* El panel que entra aparece suave, sin corte */
.panel.entra-panel { animation: panelEntra .55s cubic-bezier(.16,1,.3,1) both; }
@keyframes panelEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pestanas__indicador { transition: none; }
  .panel.entra-panel { animation: none; }
}
.barra__salir { margin: 0; }
.barra__salir .boton { min-width: 0; background-color: transparent; color: #9a9a9a; box-shadow: none; }
.barra__salir .boton:hover { background-color: #1b1b1b; color: #e6e6e6; box-shadow: none; transform: none; }

.panel {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px;
  padding: 24px var(--margen) var(--margen); border-radius: 20px 20px 0 0; background-color: var(--content); color: var(--ink);
}

/* Herramientas: rango, filtro, imprimir y excel */
.herramientas { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.rango { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.rango label { display: grid; gap: 6px; }
.rango label span { font: 700 13px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.rango input { width: 160px; }
/* atajos de período: chips del sistema */
.atajos { display: flex; gap: 6px; padding: 0 0 7px; }
.atajos button { height: 28px; padding: 0 11px; border: 1px solid; border-color: var(--borde); border-radius: 8px; background-color: var(--surface); color: var(--ink-2); font: 700 12px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .16s; }
.atajos button:hover { border-color: var(--borde-hover); color: var(--ink); }
.atajos button:active { transform: scale(.95); }
.atajos button.activo { background-color: var(--chassis); border-color: var(--chassis); color: var(--on-chassis); }
.buscador { flex: 1 1 240px; max-width: 420px; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border: 1px solid; border-color: var(--borde); border-radius: 10px; background-color: var(--field); box-shadow: inset 1px 2px 3px rgba(0,0,0,.07); color: var(--ink-3); transition: border-color .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1), background-color .32s cubic-bezier(.16,1,.3,1); }
.buscador:hover { border-color: var(--borde-hover); }
.buscador input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; }
.buscador input:focus { box-shadow: none; background: transparent; }
.buscador:focus-within { background-color: var(--campo-foco); border-color: var(--borde-foco); box-shadow: 0 0 0 4px rgba(20,20,20,.06), 0 4px 14px rgba(0,0,0,.06); }
.herramientas__acciones { display: flex; gap: 8px; margin-left: auto; }

/* Resumen: datos sueltos */
.resumen { flex: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; min-height: 24px; font: 600 12px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); }
.resumen b { font: 800 20px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; color: var(--ink); margin-right: 6px; font-variant-numeric: tabular-nums; }
.resumen .resumen__abiertas b { color: var(--abierta); }
.resumen__aviso { color: var(--amber-ink); }
/* Datos posiblemente desactualizados (la PC de la báscula sin conectarse): en rojo, es lo que más importa saber (28/10/2026). */
.resumen__desact { color: var(--danger); font-weight: 600; }

/* Tabla de datos: tarjeta blanca; solo ella scrollea */
.tabla-caja { flex: 1; min-height: 0; overflow: auto; border-radius: 16px; background-color: var(--surface); box-shadow: var(--sh-card); overscroll-behavior: contain; }
.tabla { width: 100%; border-collapse: separate; border-spacing: 0; font: 500 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; }
.tabla th {
  position: sticky; top: 0; z-index: 1; height: 36px; padding: 0 12px; background-color: var(--surface-2); border-bottom: 1px solid; border-bottom-color: var(--linea);
  text-align: left; font: 700 11px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; cursor: pointer; user-select: none;
}
.tabla th:hover { color: var(--ink); }
.tabla th[aria-sort]::after { content: "↓"; margin-left: 4px; color: var(--amber-ink); }
.tabla th[aria-sort="ascending"]::after { content: "↑"; }
.tabla td { height: 40px; padding: 0 12px; border-bottom: 1px solid; border-bottom-color: var(--linea); white-space: nowrap; }
.tabla th:first-child, .tabla td:first-child { padding-left: 18px; }
.tabla th:last-child, .tabla td:last-child { padding-right: 18px; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover td { background-color: var(--fila-hover); }
.tabla .c-num { text-align: right; }
.tabla .c-razon { max-width: 240px; overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.tabla .c-tenue { color: var(--ink-2); }
.tabla .c-neto { font-weight: 800; }
.tabla tr.abierta td { color: var(--abierta); }
.tabla .tipo { font: 700 11px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .07em; color: var(--ink-2); }
.vacio { margin: 0; padding: 50px 16px; text-align: center; color: var(--ink-2); font: 600 14px Manrope, "Helvetica Neue", Arial, sans-serif; }
.cargando td { color: var(--ink-3); text-align: center; padding: 40px; }

/* ---------- Detalle de un ticket ---------- */
.detalle {
  width: min(760px, calc(100% - 24px)); max-height: calc(100dvh - 40px); padding: 0; border: 0;
  border-radius: 16px; background-color: var(--surface); color: var(--ink); overflow: hidden; box-shadow: var(--sh-float);
}
.detalle[open] { display: flex; flex-direction: column; animation: aparece .4s cubic-bezier(.16,1,.3,1) both; }
.detalle::backdrop { background: rgba(18, 18, 18, .35); }
@keyframes aparece { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
/* Contenido que llega después (ticket, conversación): entra suave en su lugar, sin texto de "cargando". */
.llega { animation: llega .4s cubic-bezier(.16,1,.3,1) both; }
@keyframes llega { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.detalle__cuerpo.esperando { min-height: 260px; }
.detalle__cuerpo.esperando::before { content: ""; display: block; height: 100%; min-height: 220px; border-radius: 12px; background-color: var(--surface-2); animation: esqueletoLatido 1.4s ease-in-out infinite; }
.chat__hilo.esperando { opacity: .45; transition: opacity .25s; }
.act__espera:not([hidden]) { animation: llega .4s cubic-bezier(.16,1,.3,1) both; }
@media (prefers-reduced-motion: reduce) { .llega, .detalle__cuerpo.esperando::before { animation: none; } }
.detalle__cab { display: flex; align-items: center; gap: 10px; padding: 20px 22px 14px; }
.detalle__cab h2 { flex: 1; margin: 0; font: 800 22px/28px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; }
.detalle__cuerpo { overflow: auto; padding: 0 22px 24px; }
.estado-abierta { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; font: 700 12px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--danger); }
.estado-abierta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.pesos div { padding: 16px 18px; border-radius: 14px; background-color: var(--surface-2); }
.pesos span { display: block; font: 600 12px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); }
.pesos b { display: block; margin-top: 4px; font: 800 26px/30px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pesos small { color: var(--ink-3); font: 700 13px Manrope, "Helvetica Neue", Arial, sans-serif; }
.pesos div:last-child { background-color: var(--amber-soft); }
/* Debajo de los pesos: unidades y peso por unidad, tara del contenedor y masa bruta, o descuento y neto final */
.pesos-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: -12px 0 22px; }
.pesos-extra div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 11px 16px; border-radius: 12px; background-color: var(--surface-2); }
.pesos-extra span { font: 600 12.5px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); }
.pesos-extra b { font: 800 17px/22px Manrope, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) {
  .pesos-extra { gap: 6px; margin: -10px 0 16px; }
  .pesos-extra div { padding: 8px 10px; border-radius: 10px; }
  .pesos-extra span { font-size: 10.5px; }
  .pesos-extra b { font-size: 14px; line-height: 18px; }
}
.secciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px 28px; }
.secciones h3 { margin: 0 0 8px; font: 700 15px/20px Manrope, "Helvetica Neue", Arial, sans-serif; }
.secciones dl { margin: 0; display: grid; gap: 4px; }
.secciones div { display: grid; grid-template-columns: 112px 1fr; gap: 8px; font: 500 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; }
.secciones dt { color: var(--ink-3); font-weight: 600; }
.secciones dd { margin: 0; overflow-wrap: anywhere; }

/* ======================= AiBOX ======================= */
.panel--ia { padding-bottom: var(--margen); }
.chat { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; padding: 6px 2px 4px; overscroll-behavior: contain; }
.chat__bienvenida { margin: auto 0; display: grid; justify-items: start; gap: 10px; max-width: 640px; }
.chat__bienvenida h2 { margin: 0; font: 800 26px/32px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; }
.chat__bienvenida p { margin: 0; color: var(--ink-2); }
.sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sugerencias button { padding: 10px 14px; border: 0; border-radius: 14px; background-color: var(--surface); box-shadow: var(--sh-card); color: var(--ink-2); font: 600 13px Manrope, "Helvetica Neue", Arial, sans-serif; text-align: left; cursor: pointer; transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1), color .3s; }
.sugerencias button:hover { transform: translateY(-2px); box-shadow: var(--sh-card-hover); color: var(--ink); }
.msj { max-width: min(860px, 100%); animation: aparece .4s cubic-bezier(.16,1,.3,1) both; }
.msj--yo { align-self: flex-end; padding: 10px 14px; border-radius: 14px 14px 4px 14px; background-color: var(--chassis); color: var(--on-chassis); }
.msj--ia { align-self: flex-start; display: grid; gap: 10px; }
.msj--ia p { margin: 0; font-size: 15px; line-height: 22px; white-space: pre-line; }
.msj--ia .autor { font: 800 12px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--amber-ink); }
.msj--error p { color: var(--danger); }
.msj .resultado { max-height: 320px; overflow: auto; border-radius: 16px; background-color: var(--surface); box-shadow: var(--sh-card); }
.msj .resultado table { border-collapse: separate; border-spacing: 0; font-size: 13px; }
.msj .resultado th { position: sticky; top: 0; height: 36px; background-color: var(--surface-2); padding: 0 12px; border-bottom: 1px solid; border-bottom-color: var(--linea); text-align: left; font: 700 11px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; }
.msj .resultado td { height: 36px; padding: 0 12px; border-bottom: 1px solid; border-bottom-color: var(--linea); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* "pensando": barritas que se asientan (sistema) */
.pensando { display: inline-flex; align-items: flex-end; gap: 3px; height: 20px; }
.pensando i { width: 3px; height: 100%; border-radius: 2px; background-color: var(--amber); transform-origin: bottom; animation: sb-settle 1.1s cubic-bezier(.65,0,.35,1) infinite; }
.pensando i:nth-child(2) { animation-delay: .12s; }
.pensando i:nth-child(3) { animation-delay: .24s; }
.chat__form { flex: none; display: flex; align-items: flex-end; gap: 8px; }
.chat__form textarea { flex: 1; max-height: 160px; overflow-y: auto; }
.chat__form .boton { height: 42px; }

@media (prefers-reduced-motion: reduce) {
  .detalle[open], .msj, .pensando i { animation: none; }
}

/* ---------- Pantallas chicas ---------- */
@media (max-width: 820px) {
  .barra { flex-wrap: wrap; height: auto; gap: 10px 12px; padding-top: 12px; padding-bottom: 12px; }
  .barra__marca .logo { font-size: 17px; }
  .barra__quien { flex: 1; }
  .pestanas { order: 3; width: 100%; margin-left: 0; }
  .pestana { flex: 1; }
  .barra__salir .boton span { display: none; }
  .barra__salir .boton { padding: 0 10px; }
  .panel { padding: 16px 12px 12px; }
  .rango input { width: 140px; }
  .buscador { max-width: none; }
  .herramientas__acciones { width: 100%; margin-left: 0; }
  .herramientas__acciones .boton { flex: 1; }
  .pesos { grid-template-columns: 1fr; }
}

/* ---------- Ingreso por pasos: los bloques se abren deslizando según el tipo de usuario ---------- */
.plegable {
  display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: 0; visibility: hidden; align-self: start;
  transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1), opacity .35s ease, margin-top .4s cubic-bezier(.16,1,.3,1), visibility 0s linear .4s;
}
.plegable.abierto {
  grid-template-rows: 1fr; opacity: 1; margin-top: 16px; visibility: visible;
  transition: grid-template-rows .4s cubic-bezier(.16,1,.3,1), opacity .4s ease .08s, margin-top .4s cubic-bezier(.16,1,.3,1), visibility 0s;
}
/* El espacio entre filas va como margen (no gap): así un bloque cerrado no deja hueco */
.ingreso__form { row-gap: 0; }
.ingreso__form > .ingreso__error { margin-bottom: 16px; }
/* el relleno evita que se corte el contorno de foco de los campos */
.plegable__dentro { min-height: 0; overflow: hidden; display: grid; gap: 16px; padding: 3px; margin: -3px; }
.sin-transicion .plegable { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .plegable, .plegable.abierto { transition: none; } }

/* Columna "Báscula": solo cuando la sesión ve más de una báscula */
.tabla th.c-bascula, .tabla td.c-bascula { display: none; }
.varias-basculas .tabla th.c-bascula, .varias-basculas .tabla td.c-bascula { display: table-cell; }
.tabla td.c-bascula { font-weight: 600; color: var(--ink-2); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }

/* Selector de báscula (solo cliente, transporte y chofer) — mismo aspecto que Desde/Hasta */
.selector-bascula { display: grid; gap: 6px; }
.selector-bascula span { font: 700 13px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.selector-bascula select { width: 220px; max-width: 100%; }
@media (max-width: 820px) { .selector-bascula { width: 100%; } .selector-bascula select { width: 100%; } }
/* Con el selector de báscula la fila se llena: el filtro cede primero para que Imprimir y Excel no bajen de renglón */
.herramientas__acciones .boton { min-width: 112px; }
/* En pantallas medianas el filtro baja junto con Imprimir y Excel (no quedan los botones solos abajo) */

/* ---------- Botón Báscula en la barra (cliente, transporte y chofer) ---------- */
.bascula-menu { position: relative; margin-left: auto; }
.bascula-menu ~ .pestanas { margin-left: 0; }
.bascula-boton {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border: 0; border-radius: 11px;
  background: #1f1f1f; color: #ededed; cursor: pointer; text-align: left;
  transition: background-color .3s var(--ease-out), transform .15s;
}
.bascula-boton:hover, .bascula-boton[aria-expanded="true"] { background: #2a2a2a; }
.bascula-boton:active { transform: scale(.97); }
.bascula-boton > svg { width: 18px; height: 18px; color: #9a9a9a; }
.bascula-boton__texto { display: grid; line-height: 1.15; }
.bascula-boton__texto small { font: 700 10.5px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .04em; color: #8c8c8c; }
.bascula-boton__texto b { font: 800 13.5px Manrope, "Helvetica Neue", Arial, sans-serif; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bascula-boton__flecha { width: 15px !important; height: 15px !important; transition: transform .35s var(--ease-out); }
.bascula-boton[aria-expanded="true"] .bascula-boton__flecha { transform: rotate(180deg); }

.bascula-lista {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 270px; max-height: 60vh; overflow-y: auto;
  display: grid; gap: 2px; padding: 6px; border-radius: 14px; background: var(--surface); color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 16px 44px rgba(0,0,0,.26);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px) scale(.96); transform-origin: top right;
  transition: opacity .2s cubic-bezier(.4,0,1,1), transform .2s cubic-bezier(.4,0,1,1), visibility 0s linear .2s;
}
.bascula-lista.abierta { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .24s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; }
.bascula-lista button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
  background: transparent; color: var(--ink); font: 600 14px Manrope, "Helvetica Neue", Arial, sans-serif; text-align: left; cursor: pointer;
  transition: background-color .2s;
}
.bascula-lista button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bascula-lista button small { font-size: 12px; color: var(--ink-3); }
.bascula-lista button::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: transparent; transition: background-color .2s; }
.bascula-lista button:hover, .bascula-lista button:focus-visible { background: var(--surface-2); outline: none; }
.bascula-lista button[aria-checked="true"] { font-weight: 800; }
.bascula-lista button[aria-checked="true"]::before { background: var(--amber, #ffb000); }
.bascula-lista button:first-child { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .bascula-lista, .bascula-lista.abierta, .bascula-boton__flecha { transition: none; } }

/* ---------- Filtros en una sola fila alineada ---------- */
.herramientas { align-items: flex-end; }
.atajos { height: 42px; padding: 3px; gap: 2px; align-items: center; border: 1px solid var(--borde); border-radius: 10px; background: var(--field); }
.atajos button { height: 34px; padding: 0 12px; border: 0; border-radius: 7px; background-color: transparent; }
.atajos button:hover { background-color: rgba(127,127,127,.12); }
.atajos button.activo, .atajos button.activo:hover { background-color: var(--chassis); color: var(--on-chassis); }
.herramientas .buscador { flex: 1 1 220px; min-width: 200px; max-width: none; }
.herramientas__acciones { margin-left: 0; }
@media (max-width: 820px) {
  .bascula-menu { order: 2; margin-left: 0; }
  .bascula-boton__texto b { max-width: 150px; }
  .bascula-lista { right: auto; left: 0; transform-origin: top left; }
  .atajos { width: 100%; }
  .atajos button { flex: 1; padding: 0 6px; }
}

/* ---------- Filtros compactos, con el resumen en la misma fila ---------- */
.panel { gap: 12px; padding-top: 18px; }
.herramientas { flex-wrap: nowrap; gap: 10px; align-items: flex-end; }
.herramientas .rango { flex-wrap: nowrap; gap: 6px; }
.herramientas .rango label { gap: 4px; }
.herramientas .rango label span { font-size: 11.5px; line-height: 14px; color: var(--ink-2); }
.herramientas input[type="date"] { width: 132px; height: 36px; padding: 0 10px; font-size: 13.5px; }
.herramientas .atajos { height: 36px; padding: 2px; }
.herramientas .atajos button { height: 30px; padding: 0 9px; font-size: 11.5px; }
.herramientas .buscador { height: 36px; flex: 1 1 160px; min-width: 140px; padding: 0 11px; font-size: 13.5px; }
.herramientas .buscador input { font-size: 13.5px; }
.herramientas .boton { height: 36px; min-width: 0; padding: 0 12px; }
.herramientas .herramientas__acciones { gap: 6px; flex: none; }
/* resumen: cifras sueltas al lado de los atajos */
.herramientas .resumen { flex: none; align-self: flex-end; flex-wrap: nowrap; gap: 0 16px; min-height: 36px; align-items: center; padding: 0 4px; white-space: nowrap; font-size: 11.5px; }
.herramientas .resumen b { font-size: 17px; margin-right: 4px; }
.herramientas .resumen__aviso { white-space: normal; max-width: 220px; line-height: 1.25; }
/* pantallas medianas: se permite partir la fila */
@media (max-width: 1500px) { .herramientas { flex-wrap: wrap; } .herramientas .buscador { flex-basis: 220px; } }
@media (max-width: 820px) {
  .herramientas .rango { flex-wrap: wrap; }
  .herramientas input[type="date"] { width: 100%; }
  .herramientas .rango label { flex: 1; }
  .herramientas .resumen { width: 100%; flex-wrap: wrap; }
}
/* Resumen a la derecha de la búsqueda; en pantallas medianas la fila no se parte: se acortan búsqueda y resumen */
@media (max-width: 1500px) { .herramientas { flex-wrap: nowrap; } .herramientas .buscador { flex-basis: 140px; min-width: 120px; } }
@media (max-width: 1360px) { .herramientas .resumen__ton { display: none; } .herramientas .atajos button { padding: 0 7px; } }
@media (max-width: 1100px) { .herramientas { flex-wrap: wrap; } .herramientas .buscador { flex-basis: 220px; } }

/* ---------- Ingreso: tipo de usuario como botón con lista desplegable ---------- */
.tipo { position: relative; display: grid; gap: 6px; }
.tipo__rotulo { font: 700 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink); }
.tipo__boton {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 42px; padding: 0 12px 0 14px;
  border: 1px solid; border-color: var(--borde); border-radius: 10px; background-color: var(--field); color: var(--ink);
  box-shadow: inset 1px 2px 3px rgba(0,0,0,.07); font: 700 15px Manrope, "Helvetica Neue", Arial, sans-serif; text-align: left; cursor: pointer;
  transition: border-color .32s cubic-bezier(.16,1,.3,1), box-shadow .32s cubic-bezier(.16,1,.3,1), background-color .32s cubic-bezier(.16,1,.3,1), transform .16s;
}
.tipo__boton:hover { border-color: var(--borde-hover); }
.tipo__boton:active { transform: scale(.99); }
.tipo__boton:focus-visible, .tipo__boton[aria-expanded="true"] { outline: none; background-color: var(--campo-foco); border-color: var(--borde-foco); box-shadow: 0 0 0 4px rgba(20,20,20,.06), 0 4px 14px rgba(0,0,0,.06); }
.tipo__boton > span { flex: 1; min-width: 0; }
.tipo__boton .tipo__vacio { font-weight: 500; color: var(--ink-3); }
.tipo__boton svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }
.tipo__boton[aria-expanded="true"] svg { transform: rotate(180deg); }

.tipo__lista {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; margin: 0; min-width: 0;
  display: grid; gap: 2px; padding: 6px; border: 0; border-radius: 14px; background: var(--surface); color: var(--ink);
  box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 16px 44px rgba(0,0,0,.20);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px) scale(.96); transform-origin: top center;
  transition: opacity .2s cubic-bezier(.4,0,1,1), transform .2s cubic-bezier(.4,0,1,1), visibility 0s linear .2s;
}
.tipo__lista.abierta { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: opacity .24s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), visibility 0s; }
.tipo__lista legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tipo__opcion { position: relative; display: block; }
.tipo__opcion input { position: absolute; opacity: 0; pointer-events: none; }
.tipo__opcion span {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px;
  font: 600 14.5px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; transition: background-color .15s;
}
.tipo__opcion span::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: transparent; transition: background-color .2s; }
.tipo__opcion:hover span, .tipo__opcion input:focus-visible + span { background: var(--surface-2); }
.tipo__opcion input:checked + span { font-weight: 800; }
.tipo__opcion input:checked + span::before { background: var(--amber, #ffb000); }
@media (prefers-reduced-motion: reduce) { .tipo__lista, .tipo__lista.abierta, .tipo__boton svg { transition: none; } }

/* ---------- Ingreso: báscula con búsqueda (misma lista que tipo de usuario) ---------- */
.combo { position: relative; display: grid; gap: 6px; }
.combo__campo { position: relative; }
.combo__campo input { width: 100%; padding-right: 40px; font-weight: 600; }
.combo__campo input::placeholder { font-weight: 500; }
.combo__campo svg { position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }
.combo__campo input[aria-expanded="true"] + svg { transform: rotate(180deg); }
.combo__lista { max-height: min(320px, 46vh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
.combo__opcion {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  font: 600 14.5px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; transition: background-color .15s;
}
.combo__opcion::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: transparent; }
.combo__opcion:hover, .combo__opcion.activa { background: var(--surface-2); }
.combo__opcion[aria-selected="true"] { font-weight: 800; }
.combo__opcion[aria-selected="true"]::before { background: var(--amber, #ffb000); }
.combo__nada { margin: 0; padding: 12px; color: var(--ink-3); font: 600 14px Manrope, "Helvetica Neue", Arial, sans-serif; }
/* El bloque plegable recorta su contenido (para la animación); con la lista abierta la deja salir. */
.plegable.abierto.desborda { position: relative; z-index: 5; }
.plegable.abierto.desborda .plegable__dentro { overflow: visible; }

/* Campo enfocado: sin aura alrededor, solo el borde más marcado. */
input:focus, select:focus, textarea:focus,
.tipo__boton:focus-visible, .tipo__boton[aria-expanded="true"] { box-shadow: inset 1px 2px 3px rgba(0,0,0,.07); }
.buscador:focus-within { box-shadow: inset 1px 2px 3px rgba(0,0,0,.07); }

/* sin el recuadro azul que pone el celular al tocar */
html{-webkit-tap-highlight-color:transparent}

/* Tipo de usuario que todavía no está disponible */
.tipo__opcion--pronto span { color: var(--ink-3); cursor: default; }
.tipo__opcion--pronto:hover span { background: transparent; }
.tipo__opcion--pronto small { margin-left: auto; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--ink-3); font: 700 11px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; }

/* ---------- Tabla de pesadas: siempre al ancho disponible, sin scroll horizontal ----------
   Ancho fijo por columna; razón social y báscula se reparten lo que sobra y lo largo se corta
   con "…" (el texto completo queda en el title). Solo en pantallas chicas vuelve el scroll. */
.tabla-caja { overflow-x: hidden; overflow-y: auto; }
.tabla { table-layout: fixed; }
.tabla th, .tabla td { padding-left: 10px; padding-right: 10px; overflow: hidden; text-overflow: ellipsis; }
.tabla th.c-nro { width: 78px; }
.tabla th.c-cod { width: 56px; }
.tabla th.c-chofer { width: 13%; }
.tabla th.c-patente { width: 88px; }
.tabla th.c-carga { width: 9%; }
.tabla th.c-aduana { width: 124px; }
.tabla th.c-contenedor { width: 114px; }
.tabla th.c-fecha { width: 124px; }
.tabla th.c-peso { width: 84px; }
.tabla th.c-tipo { width: 76px; }
.tabla .c-razon { max-width: none; }
/* El nombre del celular (Empresa, o Carga si consulta una empresa) no va en la PC: ahí están las dos columnas de nombres. */
.tabla .c-movil { display: none; }
.tabla td.c-bascula { max-width: none; }
.tabla th.c-bascula { width: 10%; }
.tabla.sin-aduana .c-aduana, .tabla.sin-contenedor .c-contenedor { display: none; }
/* Fecha de la pesada: columna solo del celular (en la PC están Entrada y Salida). */
.tabla .c-fec { display: none; }
/* Pantallas de notebook: columnas fijas más angostas para que razón social no se aplaste. */
@media (max-width: 1440px) {
  .tabla { font-size: 12.5px; }
  .tabla th { letter-spacing: .04em; }
  .tabla th.c-nro { width: 68px; }
  .tabla th.c-cod { width: 52px; }
  .tabla th.c-chofer { width: 11%; }
  .tabla th.c-patente { width: 80px; }
  .tabla th.c-carga { width: 8%; }
  .tabla th.c-aduana { width: 116px; }
  .tabla th.c-contenedor { width: 108px; }
  .tabla th.c-fecha { width: 120px; }
  .tabla th.c-peso { width: 80px; }
  .tabla th.c-tipo { width: 64px; }
}
/* (20/10) Solo dentro de Pesar (.incrustada), en ventanas de ~1000 px (notebook): otro escalón,
   si no las columnas fijas se comían todo y la razón social quedaba en "A…". */
@media (max-width: 1100px) {
  .incrustada .tabla { font-size: 12px; }
  .incrustada .tabla th, .incrustada .tabla td { padding-left: 7px; padding-right: 7px; }
  .incrustada .tabla th { letter-spacing: .02em; }
  .incrustada .tabla th.c-nro { width: 66px; }
  .incrustada .tabla th.c-cod { width: 44px; }
  .incrustada .tabla th.c-chofer { width: 10%; }
  .incrustada .tabla th.c-patente { width: 74px; }
  .incrustada .tabla th.c-carga { width: 7.5%; }
  .incrustada .tabla th.c-aduana { width: 80px; }
  .incrustada .tabla th.c-fecha { width: 108px; }
  .incrustada .tabla th.c-peso { width: 70px; }
  .incrustada .tabla th.c-tipo { width: 54px; }
}
@media (max-width: 820px) {
  .tabla-caja { overflow-x: auto; }
  .tabla { min-width: 860px; }
}

/* Permiso de aduana + contenedor: en pantalla grande van en columnas separadas; en notebook,
   el contenedor pasa debajo del permiso para dejarle lugar a la razón social. */
.tabla .c-aduana .t-corta, .tabla td.c-aduana small { display: none; }
.tabla td.c-aduana small { font-size: 11px; line-height: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1440px) {
  .tabla .c-aduana .t-larga { display: none; }
  .tabla .c-aduana .t-corta { display: inline; }
  .tabla td.c-aduana small { display: block; }
  .tabla td.c-aduana { line-height: 15px; }
  .tabla .c-contenedor { display: none; }
  .tabla.sin-aduana:not(.sin-aduana-cont) .c-aduana { display: table-cell; }
}

/* ---------- Ticket (detalle de una pesada), rediseño 07/10 ---------- */
.detalle { width: min(860px, calc(100% - 24px)); }
.detalle__cab { align-items: flex-start; padding: 22px 24px 16px; }
.detalle__titulo { flex: 1; min-width: 0; }
.detalle__titulo h2 { flex: none; font-size: 24px; line-height: 30px; font-variant-numeric: tabular-nums; }
.detalle__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0 0; font: 600 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-2); }
.detalle__meta:empty { display: none; }
.detalle__meta .etiqueta { padding: 2px 8px; border-radius: 6px; background-color: var(--surface-2); color: var(--ink); font-weight: 700; font-size: 12px; }
.detalle__meta .estado { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.detalle__meta .estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.detalle__meta .estado--cerrada { color: var(--success); }
.detalle__meta .estado--abierta { color: var(--danger); }
.detalle__cuerpo { padding: 0 24px 26px; }
.aviso-abierta { margin: 0 0 14px; padding: 10px 14px; border-radius: 10px; background-color: var(--danger-soft); color: var(--danger); font: 600 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; }

.pesos { gap: 10px; margin-bottom: 26px; }
.pesos div { padding: 16px 18px 15px; }
.pesos span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.pesos span em { font-style: normal; padding: 1px 6px; border-radius: 4px; background-color: var(--surface); color: var(--ink-2); font: 700 11px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .02em; }
.pesos b { margin-top: 6px; font-size: 28px; line-height: 32px; }
.pesos small { display: block; min-height: 18px; margin-top: 4px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.pesos div:last-child small { color: var(--ink-2); }

.secciones { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 36px; }
.secciones h3 { margin-bottom: 10px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.secciones dl { gap: 7px; }
.secciones div { grid-template-columns: 128px minmax(0, 1fr); align-items: baseline; font-size: 13.5px; line-height: 19px; }
.secciones dt { font-weight: 600; }
.secciones dd { font-weight: 600; color: var(--ink); }
.secciones div.largo { grid-template-columns: 1fr; gap: 2px; }
.secciones div.largo dd { font-weight: 500; white-space: pre-line; }
.chapa { display: inline-block; padding: 1px 8px; border-radius: 4px; background-color: var(--surface-2); font: 800 13px/20px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .secciones { grid-template-columns: 1fr; }
  .secciones div { grid-template-columns: 116px minmax(0, 1fr); }
  .detalle__cab { padding: 18px 16px 12px; }
  .detalle__cuerpo { padding: 0 16px 20px; }
}

/* ---------- Ticket para imprimir en ventana flotante ---------- */
.flotante {
  width: min(900px, calc(100% - 24px)); height: min(820px, calc(100dvh - 40px)); padding: 0; border: 0;
  border-radius: 16px; background-color: var(--surface); color: var(--ink); overflow: hidden; box-shadow: var(--sh-float);
}
.flotante[open] { display: flex; flex-direction: column; animation: aparece .4s cubic-bezier(.16,1,.3,1) both; }
.flotante::backdrop { background: rgba(18, 18, 18, .45); }
.flotante__cab { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px 22px; }
.flotante__cab h2 { flex: 1; min-width: 0; margin: 0; font: 800 18px/24px Manrope, "Helvetica Neue", Arial, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flotante__cab .boton[disabled] { opacity: .5; cursor: default; }
.flotante__hoja { flex: 1; min-height: 0; margin: 0 12px 12px; border-radius: 10px; background-color: var(--surface-2); overflow: hidden; }
.flotante__hoja iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

/* ---------- AiBOX, rediseño 08/10 ---------- */
.chat { padding: 8px 2px 6px; }
.chat__hilo { width: 100%; max-width: 880px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; gap: 22px; }
.ia-marca { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background-color: var(--chassis); color: var(--amber); }
.ia-marca svg { width: 17px; height: 17px; fill: currentColor; }
.ia-marca--grande { width: 52px; height: 52px; border-radius: 14px; }
.ia-marca--grande svg { width: 28px; height: 28px; }

.chat__bienvenida { margin: auto 0; max-width: none; justify-items: center; text-align: center; gap: 12px; padding: 24px 0; }
.chat__bienvenida h2 { margin-top: 6px; font-size: 30px; line-height: 36px; }
.chat__bienvenida p { max-width: 560px; font-size: 15px; line-height: 22px; }
.sugerencias { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 760px; margin-top: 14px; }
.sugerencias button { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 12px 16px; border-radius: 12px; font-size: 13.5px; line-height: 18px; }
.sugerencias button svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.sugerencias button:hover svg { stroke: var(--ink); }
.sugerencias button:active { transform: scale(.98); }

.msj { max-width: 100%; }
.msj--yo { max-width: min(640px, 85%); font-size: 15px; line-height: 22px; }
.msj--yo p { margin: 0; white-space: pre-line; }
.msj--ia { display: flex; align-items: flex-start; gap: 12px; width: 100%; }
.msj__cuerpo { flex: 1; min-width: 0; display: grid; gap: 8px; padding-top: 2px; }
.msj--ia .autor { color: var(--ink-3); letter-spacing: .02em; }
.msj--ia p { font-size: 15px; line-height: 23px; color: var(--ink); }
.msj--error .ia-marca { background-color: var(--danger-soft); color: var(--danger); }
.msj .resultado { max-height: none; overflow: hidden; margin-top: 4px; }
.resultado__tabla { max-height: 340px; overflow: auto; }
.msj .resultado table { width: 100%; }
.msj .resultado tbody tr:hover td { background-color: var(--fila-hover); }
.msj .resultado tbody tr:last-child td { border-bottom: 0; }
.resultado__pie { margin: 0; padding: 8px 14px; background-color: var(--surface-2); color: var(--ink-3); font: 600 12px Manrope, "Helvetica Neue", Arial, sans-serif; }

.chat__form { display: grid; gap: 8px; width: 100%; max-width: 880px; margin: 0 auto; }
.chat__caja { display: flex; align-items: flex-end; gap: 8px; padding: 8px 8px 8px 16px; border-radius: 16px; background-color: var(--surface); box-shadow: var(--sh-card); transition: box-shadow .3s; }
.chat__caja:focus-within { box-shadow: var(--sh-card-hover); }
.chat__caja textarea { flex: 1; min-height: 40px; padding: 9px 0; border: 0; background: transparent; box-shadow: none; font-size: 15px; line-height: 22px; }
.chat__caja textarea:focus { background: transparent; box-shadow: none; }
.chat__enviar { width: 40px; min-width: 0; height: 40px !important; padding: 0; border-radius: 10px; }
.chat__enviar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat__enviar[disabled] { opacity: .45; cursor: default; }
.chat__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px; color: var(--ink-3); font: 600 12px/16px Manrope, "Helvetica Neue", Arial, sans-serif; }
.chat__pie > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.chat__pie svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.chat__nueva { flex: none; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font: 700 12px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; }
.chat__nueva:hover { background-color: var(--velo); color: var(--ink); }
@media (max-width: 820px) {
  .sugerencias { grid-template-columns: 1fr; }
  .chat__bienvenida h2 { font-size: 24px; line-height: 30px; }
  .chat__pie > span { display: none; }
}

/* ---------- AiBOX: historial de conversaciones (08/10) ---------- */
.panel--ia { flex-direction: row; align-items: stretch; gap: 20px; }
.ia-principal { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ia-lado { flex: none; width: 272px; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px; border-radius: 16px; background-color: var(--surface); box-shadow: var(--sh-card); }
.ia-lado__nueva { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background-color: var(--chassis); color: var(--on-chassis); font: 700 13.5px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; transition: transform .16s; }
.ia-lado__nueva:active { transform: scale(.98); }
.ia-lado__nueva svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.ia-lado__lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
.ia-lado__vacio, .ia-lado__nota { margin: 0; color: var(--ink-3); font: 600 12px/17px Manrope, "Helvetica Neue", Arial, sans-serif; }
.ia-lado__vacio { padding: 10px 6px; }
.ia-lado__nota { padding: 0 4px; }
.ia-grupo { margin-top: 12px; }
.ia-grupo:first-child { margin-top: 4px; }
.ia-grupo__tit { display: flex; align-items: center; gap: 6px; width: 100%; margin: 0 0 4px; padding: 4px 6px; border: 0; background: none; color: var(--ink-3); font: 700 11px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-align: left; }
button.ia-grupo__tit { cursor: pointer; border-radius: 6px; }
button.ia-grupo__tit:hover { color: var(--ink); background-color: var(--velo); }
.ia-grupo__tit span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-grupo__tit small { font-size: 11px; letter-spacing: 0; }
.ia-grupo__tit svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: rotate(90deg); transition: transform .3s var(--ease-out); }
.ia-grupo.cerrado .ia-grupo__tit svg { transform: none; }
.ia-grupo.cerrado .ia-grupo__items { display: none; }
.ia-item { position: relative; display: flex; align-items: center; border-radius: 8px; transition: background-color .15s; }
.ia-item:hover, .ia-item.activo { background-color: var(--surface-2); }
.ia-item.activo .ia-item__abrir { font-weight: 800; color: var(--ink); }
.ia-item__abrir { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; height: 36px; padding: 0 4px 0 10px; border: 0; background: none; color: var(--ink-2); font: 600 13px Manrope, "Helvetica Neue", Arial, sans-serif; text-align: left; cursor: pointer; }
.ia-item__abrir span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ia-item__pin { width: 14px; height: 14px; flex: none; fill: var(--amber); stroke: var(--amber-ink); stroke-width: 1.4; stroke-linejoin: round; }
.ia-item__menu { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-right: 3px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer; opacity: 0; transition: opacity .15s, background-color .15s; }
.ia-item:hover .ia-item__menu, .ia-item.activo .ia-item__menu, .ia-item__menu:focus-visible { opacity: 1; }
.ia-item__menu:hover { background-color: var(--velo); color: var(--ink); }
.ia-item__menu svg { width: 16px; height: 16px; fill: currentColor; }

.ia-menu { position: fixed; z-index: 90; display: grid; gap: 2px; min-width: 200px; padding: 6px; border-radius: 12px; background-color: var(--surface); color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 16px 44px rgba(0,0,0,.22); }
.ia-menu[hidden] { display: none; }
.ia-menu button { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 8px; background: none; color: inherit; font: 600 13.5px Manrope, "Helvetica Neue", Arial, sans-serif; text-align: left; cursor: pointer; }
.ia-menu button:hover { background-color: var(--surface-2); }
.ia-menu svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-2); }
.ia-menu__peligro, .ia-menu__peligro svg { color: var(--danger) !important; }

.ia-dialogo { width: min(420px, calc(100% - 24px)); padding: 0; border: 0; border-radius: 16px; background-color: var(--surface); color: var(--ink); box-shadow: var(--sh-float); }
.ia-dialogo[open] { animation: aparece .4s cubic-bezier(.16,1,.3,1) both; }
.ia-dialogo::backdrop { background: rgba(18, 18, 18, .35); }
.ia-dialogo form { display: grid; gap: 12px; padding: 20px 20px 16px; }
.ia-dialogo h3 { margin: 0; font: 800 18px/24px Manrope, "Helvetica Neue", Arial, sans-serif; }
.ia-dialogo p { margin: 0; color: var(--ink-2); font: 500 14px/20px Manrope, "Helvetica Neue", Arial, sans-serif; overflow-wrap: anywhere; }
.ia-dialogo input { width: 100%; }
.ia-dialogo__botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ia-dialogo .boton { min-width: 0; }
.boton--peligro { background-color: var(--danger) !important; color: #fff !important; }

.ia-cargando { margin: auto; color: var(--ink-3); font: 600 14px Manrope, "Helvetica Neue", Arial, sans-serif; }
.msj--guardado { animation: none; }
.msj__cuerpo p.escribiendo::after { content: ""; display: inline-block; width: 8px; height: 16px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background-color: var(--amber); animation: cursorIa 1s steps(1) infinite; }
@keyframes cursorIa { 50% { opacity: 0; } }
.ia-ver-lista { display: none; }
@media (max-width: 1100px) {
  .ia-lado { width: 230px; }
}
@media (max-width: 820px) {
  .panel--ia { flex-direction: column; }
  .ia-ver-lista { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background-color: var(--surface); box-shadow: var(--sh-card); color: var(--ink); font: 700 13px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; }
  .ia-ver-lista svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .ia-lado { display: none; width: auto; max-height: 55vh; }
  .ia-lado.abierto { display: flex; }
}

/* ---------- AiBOX bloqueado en básculas Clipper (base propia) ---------- */
.panel--ia.ia-bloqueada > .ia-lado, .panel--ia.ia-bloqueada > .ia-principal { display: none; }
.ia-actualizar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px 16px; text-align: center; }
.ia-actualizar[hidden] { display: none; }
.ia-actualizar h2 { margin: 6px 0 0; font: 800 26px/32px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; }
.ia-actualizar p { max-width: 520px; margin: 0; color: var(--ink-2); font: 500 15px/22px Manrope, "Helvetica Neue", Arial, sans-serif; }
.ia-actualizar .boton { margin-top: 6px; gap: 8px; text-decoration: none; }
.ia-actualizar .boton svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ia-actualizar .ia-actualizar__nota { font-size: 13px; color: var(--ink-3); }
.ia-marca--apagada { background-color: var(--surface-2); color: var(--ink-3); }
.ia-aclara { font-size: 13px !important; color: var(--ink-3) !important; }

/* ---------- Movimiento (08/10): pantalla fija y transiciones suaves ----------
   La pantalla de la consulta nunca scrollea entera (solo la tabla y el chat por dentro):
   así la barra de arriba queda quieta aunque una animación mueva algo unos píxeles. */
html:has(> body.app) { overflow: hidden; }
body.app { overflow: hidden; }
.panel { overflow: hidden; }

/* Pestañas: se mueve el contenido (no el fondo claro), sale hacia un lado y entra desde el otro. */
.panel.entra-der > *, .panel.entra-izq > * { animation: entraDer .55s cubic-bezier(.16,1,.3,1) both; }
.panel.entra-izq > * { animation-name: entraIzq; }
.panel.entra-der > *:nth-child(2), .panel.entra-izq > *:nth-child(2) { animation-delay: .04s; }
.panel.entra-der > *:nth-child(3), .panel.entra-izq > *:nth-child(3) { animation-delay: .08s; }
.panel.sale-izq > *, .panel.sale-der > * { animation: saleIzq .2s cubic-bezier(.4,0,1,1) both; }
.panel.sale-der > * { animation-name: saleDer; }
@keyframes entraDer { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes entraIzq { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }
@keyframes saleIzq { to { opacity: 0; transform: translateX(-14px); } }
@keyframes saleDer { to { opacity: 0; transform: translateX(14px); } }

/* Tabla: filas nuevas con un fundido corto (una sola animación para todo el cuerpo: liviano). */
#filas.filas-nuevas { animation: filasNuevas .25s cubic-bezier(.16,1,.3,1) both; }
@keyframes filasNuevas { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Ventanas: se desvanecen al cerrar (el fondo oscuro también). */
dialog.cerrando { animation: cierra .2s cubic-bezier(.4,0,1,1) both !important; }
dialog.cerrando::backdrop { animation: fondoCierra .2s cubic-bezier(.4,0,1,1) both; }
dialog[open]::backdrop { animation: fondoAbre .3s ease-out both; }
@keyframes cierra { to { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes fondoAbre { from { opacity: 0; } }
@keyframes fondoCierra { to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .panel.entra-der > *, .panel.entra-izq > *, .panel.sale-izq > *, .panel.sale-der > *, #filas.filas-nuevas,
  dialog.cerrando, dialog.cerrando::backdrop, dialog[open]::backdrop { animation: none !important; }
}

/* ---------- Entrada y salida del sistema (v2, 08/10) ----------
   - El login entra solo con CSS (sin esperar al script): logo, tarjeta y pie escalonados.
   - Al ingresar, <html> trae la clase "entrando" desde el <head> (antes del primer dibujo, así no
     se ve la página completa un instante): la barra baja desde arriba y el contenido sube escalonado.
   - El fondo nunca cambia de color con transición (pasaba por gris): mientras la barra entra o sale,
     el fondo es el claro del login. Las esquinas redondeadas del panel las tapa una franja negra
     que cuelga de la barra (.barra::after) y se mueve con ella. */
.barra { position: relative; }
/* (20/10) Sin la tira negra colgando de la cabecera: en el cambio de página la cabecera se dibuja
   encima de todo y la tira tapaba el borde de arriba del panel ("se agrandaba" y después aparecía
   el blanco). Las esquinas negras del panel las da el fondo de la página. */
.panel { position: relative; z-index: 1; }

body.ingreso .ingreso__caja > * { animation: popPieza .42s cubic-bezier(.34,1.4,.55,1) both; }
body.ingreso .ingreso__caja > *:nth-child(2) { animation-delay: .07s; }
body.ingreso .ingreso__caja > *:nth-child(3) { animation-delay: .14s; }
body.ingreso.saliendo .ingreso__caja { animation: cajaSale .22s ease-in both; }
@keyframes subePieza { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes popPieza { 0% { opacity: 0; transform: scale(.92) translateY(10px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes popBloque { 0% { opacity: 0; transform: scale(.95) translateY(12px); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes cajaSale { to { opacity: 0; transform: translateY(-10px) scale(.985); } }

html.entrando .panel:not([hidden]) > * { animation: popBloque .5s cubic-bezier(.34,1.4,.55,1) both; }
html.entrando .panel:not([hidden]) > *:nth-child(1) { animation-delay: .16s; }
html.entrando .panel:not([hidden]) > *:nth-child(2) { animation-delay: .24s; }
html.entrando .panel:not([hidden]) > *:nth-child(3) { animation-delay: .32s; }
@keyframes barraBaja { from { transform: translateY(-100%); } to { transform: none; } }

body.app.saliendo .panel > * { animation: panelBaja .28s ease-in both; }
@keyframes barraSube { to { transform: translateY(calc(-100% - 24px)); } }
@keyframes panelBaja { to { opacity: 0; transform: translateY(14px); } }

@media (prefers-reduced-motion: reduce) {
  body.ingreso .ingreso__caja > *, body.ingreso.saliendo .ingreso__caja, html.entrando .barra,
  html.entrando .panel > *, body.app.saliendo .barra, body.app.saliendo .panel > * { animation: none !important; }
}
/* Error del ingreso que llega sin recargar: aparece suave, en su lugar. */
.ingreso__error.aparece { animation: errorAparece .32s cubic-bezier(.16,1,.3,1) both; }
@keyframes errorAparece { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ingreso__error.aparece { animation: none; } }
/* Cruce de pestañas: la saliente flota encima, sin fondo, mientras se desvanece. */
.panel.cruzando { position: absolute; left: 0; right: 0; z-index: 2; background: transparent; pointer-events: none; }
.panel.sale-izq > *, .panel.sale-der > * { animation-duration: .22s; }
.pestana { transition: color .55s cubic-bezier(.16,1,.3,1); }
/* Entrada y salida: el panel toma el mismo tono que el fondo (no se ve como un rectángulo aparte)
   y al terminar vuelve a su color con un fundido corto. */
.panel { transition: background-color .5s ease; }
.panel.cruzando { transition: none; }


/* ---------- Carga de la tabla sin saltos (08/10) ---------- */
/* Filas de muestra mientras llega la primera carga (la tabla ya tiene su alto). */
.tabla tr.esqueleto td { height: 40px; padding: 0 18px; border-bottom: 1px solid; border-bottom-color: var(--linea); cursor: default; }
.tabla tr.esqueleto span { display: block; height: 10px; border-radius: 4px; background-color: var(--surface-2); animation: esqueletoLatido 1.4s ease-in-out infinite; animation-delay: calc(var(--n, 0) * 60ms); }
.tabla tr.esqueleto:hover td { background: none; }
@keyframes esqueletoLatido { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
/* Recarga: las filas actuales se atenúan y una línea ámbar recorre el borde de arriba de la tabla. */
.tabla-caja { position: relative; }
#filas { transition: opacity .2s ease; }
.tabla-caja.actualizando #filas { opacity: .4; }
.tabla-caja::before {
  content: ""; position: sticky; top: 0; z-index: 3; display: block; height: 2px; margin-bottom: -2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent) no-repeat; background-size: 35% 100%;
  opacity: 0; transition: opacity .2s ease; pointer-events: none;
}
.tabla-caja.actualizando::before { opacity: 1; animation: lineaCarga 1.1s cubic-bezier(.45,0,.55,1) infinite; }
@keyframes lineaCarga { from { background-position: -40% 0; } to { background-position: 140% 0; } }
/* Filas nuevas: solo un fundido (sin desplazamiento, así no "salta" la tabla). */
#filas.filas-nuevas { animation: filasFunden .3s ease both; }
@keyframes filasFunden { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .tabla tr.esqueleto span, .tabla-caja.actualizando::before, #filas.filas-nuevas { animation: none; }
}
/* El fundido de filas no deja la opacidad trabada al terminar (así la recarga puede atenuarlas). */
#filas.filas-nuevas { animation-fill-mode: backwards; }
/* Las filas nuevas arrancan desde el mismo atenuado de la recarga (sin pasar por invisible). */
@keyframes filasFunden { from { opacity: .4; } to { opacity: 1; } }

/* ---------- Nota del ingreso: "¿Usabas la consulta anterior?" (abajo a la derecha) ---------- */
.nota-ingreso {
  position: fixed; right: 24px; bottom: 24px; z-index: 20; width: min(340px, calc(100% - 32px));
  display: grid; gap: 8px; padding: 18px 20px 18px 18px; border-radius: 16px;
  background-color: var(--surface); color: var(--ink); box-shadow: var(--sh-float);
  animation: notaEntra .4s cubic-bezier(.16,1,.3,1) .7s both;
}
.nota-ingreso[hidden] { display: none; }
.nota-ingreso.cerrando { animation: notaSale .25s cubic-bezier(.4,0,1,1) both; }
.nota-ingreso__icono { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background-color: var(--surface-2); color: var(--ink-2); }
.nota-ingreso__icono svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nota-ingreso h2 { margin: 2px 28px 0 0; font: 800 15px/21px Manrope, "Helvetica Neue", Arial, sans-serif; }
.nota-ingreso p { margin: 0; color: var(--ink-2); font: 500 13.5px/20px Manrope, "Helvetica Neue", Arial, sans-serif; }
.nota-ingreso ul { display: grid; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.nota-ingreso li { position: relative; padding-left: 14px; color: var(--ink-2); font: 500 13px/19px Manrope, "Helvetica Neue", Arial, sans-serif; }
.nota-ingreso li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background-color: var(--ink-3); }
.nota-ingreso li b { color: var(--ink); font-weight: 700; }
.nota-ingreso__cerrar { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer; }
.nota-ingreso__cerrar:hover { background-color: var(--velo); color: var(--ink); }
.nota-ingreso__cerrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@keyframes notaEntra { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes notaSale { to { opacity: 0; transform: translateY(10px); } }
@media (max-width: 760px) {
  .nota-ingreso { position: static; width: auto; margin: 4px 0 0; transform: none; animation-name: subePieza; }
}
@media (prefers-reduced-motion: reduce) { .nota-ingreso, .nota-ingreso.cerrando { animation: none; } }

/* ---------- Menú Báscula de la barra por encima del panel (19/10) ----------
   El panel (z-index 1) tapaba la lista. Mientras está abierta la barra pasa adelante;
   la tira negra de abajo (.barra::after) se oculta para no tapar el borde del panel
   (el fondo de la página ya es del mismo color). */
.cabecera--app.menu-abierto, .cabecera--app:has(.idioma__lista.abierta) { z-index: 3; }


/* ---------- Pie del ingreso por debajo de los desplegables (19/10) ----------
   La animación de entrada deja a cada pieza de la caja en su propia capa, y el pie
   (que va último) quedaba encima de las listas de tipo y báscula. */
.ingreso__caja > * { position: relative; z-index: 1; }
.ingreso__caja > .ingreso__pie { z-index: 0; }

/* ---------- AiBOX: respuestas pulidas (19/10) ----------
   Texto con formato, cifras grandes, barras, evolución en el tiempo y tablas que entran
   siempre a lo ancho (solo scroll vertical). Un solo material: tarjeta blanca radio 16 con
   sombra suave; ámbar solo al pasar el mouse por un dato. */
.msj__texto { display: grid; gap: 8px; }
.msj__texto p, .msj__texto li { font-size: 15px; line-height: 23px; color: var(--ink); }
.msj__texto strong { font-weight: 800; }
.msj__texto ul { display: grid; gap: 4px; margin: 0; padding-left: 20px; }
.msj__texto.escribiendo > :last-child::after { content: ""; display: inline-block; width: 8px; height: 16px; margin-left: 2px; vertical-align: -2px; border-radius: 2px; background-color: var(--amber); animation: cursorIa 1s steps(1) infinite; }

.msj .resultado, .cifras, .sugerencias--seguir { animation: aparece .4s cubic-bezier(.16,1,.3,1) both; }
.msj .resultado { margin-top: 6px; border-radius: 16px; overflow: hidden; background-color: var(--surface); box-shadow: var(--sh-card); }
.resultado__cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 4px; }
.resultado__cab:only-child, .resultado__cab + .resultado__tabla { padding-bottom: 0; }
.resultado__tit { margin: 0; min-width: 0; font: 800 14px/20px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resultado__vistas { display: flex; flex: none; gap: 2px; margin-left: auto; padding: 3px; border-radius: 9px; background-color: var(--surface-2); }
.resultado__vistas button { height: 26px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-3); font: 700 12px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; transition: color .3s, background-color .3s, box-shadow .3s; }
.resultado__vistas button:hover { color: var(--ink); }
.resultado__vistas button[aria-selected="true"] { background-color: var(--surface); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.resultado--grafico[data-ver="grafico"] .resultado__tabla, .resultado--grafico[data-ver="tabla"] .resultado__graf { display: none; }
.resultado__graf { padding: 10px 16px 14px; }

/* Tabla: ancho fijo por columna según su contenido; el texto largo baja de renglón. */
.resultado__tabla { max-height: 420px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: auto;   /* al llegar al tope, la rueda sigue moviendo el chat */ }
.msj .resultado table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.msj .resultado th { height: auto; padding: 10px 10px 9px; line-height: 14px; white-space: normal; vertical-align: bottom; }
.msj .resultado th small { margin-left: 2px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.msj .resultado td { height: auto; padding: 9px 10px; line-height: 18px; white-space: normal; overflow-wrap: anywhere; vertical-align: top; color: var(--ink); }
.msj .resultado th.num, .msj .resultado td.num { text-align: right; }
.msj .resultado td.num, .msj .resultado td.corta { white-space: nowrap; overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; }
.msj .resultado td:not(.corta) { overflow-wrap: break-word; }
.msj .resultado td.fuerte { font-weight: 800; }
.msj .resultado th:first-child, .msj .resultado td:first-child { padding-left: 16px; }
.msj .resultado th:last-child, .msj .resultado td:last-child { padding-right: 16px; }
.resultado__tabla--media table { font-size: 12.5px; }
.resultado__tabla--media th, .resultado__tabla--media td { padding-left: 8px; padding-right: 8px; }
.msj .resultado__tabla--apretada table { font-size: 12px; }
.msj .resultado__tabla--apretada th { font-size: 10px; letter-spacing: .04em; }
.msj .resultado__tabla--apretada th, .msj .resultado__tabla--apretada td { padding-left: 6px; padding-right: 6px; }
.resultado__pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 8px 6px 16px; }
.resultado__csv { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: 700 12px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; transition: color .3s, background-color .3s; }
.resultado__csv:hover { background-color: var(--surface); color: var(--ink); }
.resultado__csv svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Cifras grandes (totales, cantidades, promedios). */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-top: 6px; }
.cifra { display: grid; gap: 2px; padding: 16px 18px; border-radius: 16px; background-color: var(--surface); box-shadow: var(--sh-card); }
.cifra__valor { font: 800 28px/34px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cifra__valor small { margin-left: 4px; font-size: 15px; font-weight: 700; letter-spacing: 0; color: var(--ink-3); }
.cifra__etq { font: 600 12.5px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); }

/* Barras horizontales: etiqueta, barra fina con la punta redondeada y el valor. */
.barras { display: grid; gap: 4px; }
.barras__fila { display: grid; grid-template-columns: minmax(80px, 30%) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 30px; padding: 2px 6px; margin: 0 -6px; border-radius: 6px; transition: background-color .25s; }
.barras__fila:hover { background-color: var(--fila-hover); }
.barras__etq { font: 600 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barras__pista { display: block; height: 12px; }
.barras__pista i { display: block; height: 100%; border-radius: 0 4px 4px 0; background-color: var(--ink); opacity: .82; transform-origin: left center; animation: barraCrece .6s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--n, 0) * 35ms + 120ms); transition: background-color .25s, opacity .25s; }
.barras__fila:hover .barras__pista i { background-color: var(--amber); opacity: 1; }
.barras__valor { min-width: 64px; text-align: right; font: 700 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.barras__valor small { font-weight: 600; color: var(--ink-3); }
@keyframes barraCrece { from { transform: scaleX(0); } to { transform: none; } }

/* Torta (dona): trozos de colores distintos (es una comparación entre partes, no se puede hacer en un solo tono), total al centro y leyenda con porcentaje y valor. */
.torta { --t0: #ffb000; --t1: #2f6fed; --t2: #12a38f; --t3: #8e4fd6; --t4: #d6336c; --t5: #4aa23a; --t6: #8a5d00; --t7: #e8590c; --t-otros: #b0b0b0;
  display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 12px 28px; padding: 6px 0 2px; }
html[data-tema="oscuro"] .torta { --t0: #ffb000; --t1: #5b8cff; --t2: #2fd0b8; --t3: #b07cf0; --t4: #ff6b9a; --t5: #6fd25f; --t6: #c9923a; --t7: #ff8a3d; --t-otros: #6f6f6f; }
.torta__aro { position: relative; width: 210px; max-width: 100%; aspect-ratio: 1; }
.torta__aro svg { display: block; width: 100%; height: 100%; }
.torta__trozo { fill: none; stroke-width: 5.5; stroke-linecap: butt; transition: opacity .25s; }
.torta__aro:hover .torta__trozo { opacity: .45; }
.torta__aro .torta__trozo:hover { opacity: 1; }
.torta__centro { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 2px; padding: 0 24%; text-align: center; pointer-events: none; }
.torta__centro b { white-space: nowrap; font: 800 22px/26px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.015em; color: var(--ink); font-variant-numeric: tabular-nums; }
.torta__centro b small { margin-left: 3px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.torta__centro span { font: 600 11.5px/16px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); }
.torta__leyenda { display: grid; gap: 2px; min-width: 0; }
.torta__fila { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 30px; padding: 2px 6px; margin: 0 -6px; border-radius: 6px; transition: background-color .25s; }
.torta__fila:hover { background-color: var(--fila-hover); }
.torta__fila i { width: 10px; height: 10px; border-radius: 3px; }
.torta__etq { font: 600 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.torta__pct { min-width: 52px; text-align: right; font: 600 12.5px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.torta__valor { min-width: 64px; text-align: right; font: 700 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.torta__valor small { font-weight: 600; color: var(--ink-3); }
@media (max-width: 640px) {
  .torta { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .torta__aro { width: 190px; }
  .torta__leyenda { width: 100%; }
  .torta__fila { gap: 8px; }
  .torta__etq, .torta__pct, .torta__valor { font-size: 12.5px; }
  .torta__pct { min-width: 44px; }
  .torta__valor { min-width: 0; }
}

/* Evolución en el tiempo: una sola escala, guías finas, línea de 2 px y dato al pasar el mouse. */
.linea { padding: 6px 0 0; }
.linea__plano { position: relative; height: 210px; margin: 8px 6px 0 54px; }
.linea__guia { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--linea); }
.linea__guia b { position: absolute; right: calc(100% + 8px); top: -8px; width: 48px; text-align: right; font: 600 11px/16px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.linea svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.linea__trazo { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.linea__area { fill: var(--ink); opacity: .06; }
.linea__punto { position: absolute; top: 0; bottom: 0; width: var(--ancho); min-width: 8px; transform: translateX(-50%); cursor: default; }
.linea__punto::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px dashed var(--ink-3); opacity: 0; transition: opacity .2s; }
.linea__punto i { position: absolute; left: 50%; top: var(--y); width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; border: 2px solid var(--ink); background-color: var(--surface); box-sizing: border-box; opacity: 0; transition: opacity .2s, background-color .2s, border-color .2s; }
.linea--pocos .linea__punto i { opacity: 1; }
.linea__punto:hover::before { opacity: .35; }
.linea__punto:hover i { opacity: 1; border-color: var(--amber); background-color: var(--amber); }
.linea__punto em { position: absolute; z-index: 2; left: 50%; bottom: calc(100% - var(--y) + 12px); transform: translateX(-50%); padding: 6px 10px; border-radius: 8px; background-color: var(--chassis); color: var(--on-chassis); font: 600 11.5px/16px Manrope, "Helvetica Neue", Arial, sans-serif; font-style: normal; white-space: nowrap; text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s; }
.linea__punto em b { display: block; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.linea__punto em b small { font-weight: 600; opacity: .7; }
.linea__punto:hover em { opacity: 1; }
.linea svg + .linea__punto em { transform: translateX(-20%); }
.linea__punto:last-child em { transform: translateX(-80%); }
.linea__ejes { position: relative; height: 18px; margin: 8px 6px 0 54px; }
.linea__ejes span { position: absolute; top: 0; transform: translateX(-50%); font: 600 11px/16px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); white-space: nowrap; }

/* Preguntas para seguir: chips chicos debajo de la respuesta (no las tarjetas de la bienvenida). */
.sugerencias.sugerencias--seguir { display: flex; flex-wrap: wrap; gap: 8px; max-width: none; margin-top: 8px; animation-delay: .15s; }
.sugerencias--seguir button { min-height: 0; gap: 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 18px; }
.sugerencias--seguir button svg { width: 15px; height: 15px; }

.msj--guardado .resultado, .msj--guardado .cifras, .msj--guardado .barras__pista i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .msj .resultado, .cifras, .sugerencias--seguir, .barras__pista i, .msj__texto.escribiendo > :last-child::after { animation: none; }
}

/* En el celular la tabla pasa a fichas: cada fila es un bloque con el nombre de cada dato. */
@media (max-width: 640px) {
  .msj .resultado table, .msj .resultado tbody { display: block; }
  .msj .resultado colgroup, .msj .resultado thead { display: none; }
  .msj .resultado tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
  .msj .resultado tbody tr:last-child { border-bottom: 0; }
  .msj .resultado td, .msj .resultado td:first-child, .msj .resultado td:last-child { padding: 0; border: 0; text-align: left !important; white-space: normal; }
  .msj .resultado td::before { content: attr(data-etq); display: block; font: 700 10.5px/14px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
  .barras__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .barras__etq { grid-column: 1 / -1; }
  .barras__pista { grid-column: 1; }
  .linea__plano { height: 170px; margin-left: 46px; }
  .linea__ejes { margin-left: 46px; }
  .cifra__valor { font-size: 24px; line-height: 30px; }
}

/* Demasiadas columnas para el ancho: cada fila es una ficha con todos sus datos (sin scroll horizontal). */
.msj .resultado__tabla--fichas table, .msj .resultado__tabla--fichas tbody { display: block; }
.msj .resultado__tabla--fichas thead { display: none; }
.msj .resultado__tabla--fichas tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px 16px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.msj .resultado__tabla--fichas tbody tr:last-child { border-bottom: 0; }
.msj .resultado__tabla--fichas td, .msj .resultado__tabla--fichas td.num, .msj .resultado__tabla--fichas td:first-child, .msj .resultado__tabla--fichas td:last-child { padding: 0; border: 0; text-align: left; white-space: normal; overflow: visible; }
.msj .resultado__tabla--fichas td::before { content: attr(data-etq); display: block; font: 700 10.5px/14px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.msj .resultado__tabla--fichas tbody tr:hover td { background: none; }
.msj .resultado__tabla--fichas tbody tr:hover { background-color: var(--fila-hover); }

/* Sol/luna pegado al borde derecho de la ventana, igual que en la cabecera de la web (20/10). */

/* ---------- Cabecera del sistema = la cabecera de la web (20/10/2026) ----------
   Misma pieza (cabecera.css): mismo alto, logo en el mismo lugar, sol/luna e idioma contra el
   borde derecho. Acá solo cambia lo del medio (báscula, pestañas, Salir). Así, al pasar de la
   web o del ingreso al sistema, la cabecera no salta: solo se cambia su contenido. */
.cabecera--app { position: relative; inset: auto; z-index: auto; flex: none; }
.cabecera--app .cabecera__fila { gap: 22px; }
.cabecera--app .barra__quien { flex: 0 1 auto; }
.cabecera--app .barra__quien strong { font-size: 16px; line-height: 21px; }
.cabecera--app .cabecera__acciones { gap: 10px; min-width: 0; }
.cabecera--app .pestanas { margin-left: 0; }
.cabecera--app .bascula-menu ~ .cabecera__acciones .pestanas { margin-left: 0; }
@media (max-width: 820px) {
  .cabecera--app { height: auto; }
  .cabecera--app .cabecera__fila { flex-wrap: wrap; width: auto; min-height: var(--cab-alto); margin-left: var(--cab-margen); margin-right: var(--cab-margen); padding: 10px 0; gap: 10px 12px; }
  .cabecera--app .cabecera__acciones { display: contents; }
  .cabecera--app .barra__quien { flex: 1; }
  .cabecera--app .pestanas { order: 3; width: 100%; }
  .cabecera--app .cabecera__util { position: static; height: auto; }
}
.cabecera--app .barra__quien { view-transition-name: cab-quien; }
.cabecera--app .bascula-menu { view-transition-name: cab-bascula; }

/* ---------- Esquinas que bajan de la cabecera (20/10/2026) ----------
   Las dos curvas negras de arriba del panel son piezas propias (.esquina), con nombre de
   transición: al llegar al sistema crecen desde la cabecera hacia abajo y al irse se recogen
   hacia arriba, durante el mismo cambio de página (softbox-tema.css). El panel queda recto. */
body.app .panel { border-radius: 0; }
.esquinas { position: relative; z-index: 2; flex: none; height: 0; }
.esquina { position: absolute; top: 0; width: 20px; height: 20px; pointer-events: none; }
.esquina--izq { left: 0; background: radial-gradient(circle at 100% 100%, transparent 19.5px, var(--chassis) 20px); view-transition-name: esq-izq; }
.esquina--der { right: 0; background: radial-gradient(circle at 0 100%, transparent 19.5px, var(--chassis) 20px); view-transition-name: esq-der; }

/* Selector de báscula pegado a las acciones, a la derecha (20/10): con la cabecera nueva, el
   selector y las acciones tenían los dos margin-left: auto y el selector quedaba en el medio. */
.cabecera--app .bascula-menu { margin-left: auto; }
.cabecera--app .bascula-menu ~ .cabecera__acciones { margin-left: 0; }

/* ---------- Incrustada en Pesar (20/10/2026) ----------
   pesar/consulta.php abre esta misma consulta dentro de la ventana del sistema de pesaje,
   ya ingresada como la báscula. Pesar tiene su propio marco (logo, báscula, usuario, tema,
   idioma y cerrar sesión), así que acá se oculta la barra negra y quedan solo las pestañas
   Pesadas / AiBOX, sobre el fondo claro del contenido. */
body.app.incrustada { background-color: var(--content); }
.incrustada .cabecera--app { height: auto; background: transparent; color: var(--ink); view-transition-name: none; }
.incrustada .cabecera--app .cabecera__fila { width: auto; height: auto; min-height: 0; margin: 0 !important; padding: 16px var(--margen) 0; }
.incrustada .cabecera__logo, .incrustada .barra__quien, .incrustada .barra__salir,
.incrustada .cabecera__util, .incrustada .esquinas { display: none !important; }
.incrustada .cabecera--app .cabecera__acciones { margin-left: 0; }
.incrustada .pestanas { background-color: var(--gris-barra); }
.incrustada .pestanas__indicador { background-color: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.06); }
.incrustada .pestana { color: var(--ink-2); }
.incrustada .pestana:hover, .incrustada .pestana.activa, .incrustada .pestana.activa:hover { color: var(--ink); }
.incrustada .pestanas:not(.lista) .pestana.activa { background-color: var(--surface); }
.incrustada .panel { border-radius: 0; padding-top: 16px; }

/* ---------- Incrustada en Pesar: barra de arriba ordenada (20/10/2026) ----------
   Solo dentro de Pesar (la consulta suelta no cambia). Dos filas que aprovechan el ancho:
   1) pestañas Pesadas/AiBOX · resumen · Imprimir / Excel / Pesada nueva
   2) Desde / Hasta / atajos · filtro (ocupa el resto)
   Las pestañas quedan fijas arriba a la izquierda (la herramientas les deja el hueco). */
.incrustada { --ancho-pestanas: 196px; }
.incrustada .cabecera--app { position: absolute; top: 14px; left: var(--margen); z-index: 3; }
.incrustada .cabecera--app .cabecera__fila { padding: 0; gap: 0; }
.incrustada .panel { padding-top: 14px; gap: 12px; }
.incrustada #panelPesadas > .herramientas {
  display: grid; grid-template-columns: var(--ancho-pestanas) auto auto minmax(0, 1fr) auto;
  grid-template-areas: "hueco resumen resumen resumen acciones" "rango rango estado buscador buscador";
  gap: 10px 14px; align-items: center;
}
.incrustada #panelPesadas > .herramientas::before { content: ""; grid-area: hueco; }
.incrustada .herramientas .resumen { grid-area: resumen; align-self: center; justify-self: start; min-height: 0; padding: 0; }
.incrustada .herramientas .resumen__ton { display: inline; }
.incrustada .herramientas .herramientas__acciones { grid-area: acciones; }
.incrustada .herramientas .rango { grid-area: rango; align-items: center; gap: 8px; }
.incrustada .herramientas .rango label { display: flex; align-items: center; gap: 8px; }
.incrustada .herramientas .rango label span { font: 700 11px/14px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.incrustada .herramientas .atajos button { white-space: nowrap; padding: 0 10px; }
.incrustada .herramientas .buscador { grid-area: buscador; max-width: none; min-width: 0; }
/* AiBOX: deja lugar arriba para las pestañas */
.incrustada .panel--ia { padding-top: 64px; }
/* Ventana angosta: acciones al lado de las pestañas y lo demás debajo, a lo ancho */
@media (max-width: 980px) {
  .incrustada #panelPesadas > .herramientas {
    grid-template-columns: var(--ancho-pestanas) auto auto minmax(0, 1fr) auto;
    grid-template-areas: "hueco acciones acciones acciones acciones" "resumen resumen resumen resumen resumen" "rango rango rango rango rango" "estado estado buscador buscador buscador";
  }
  .incrustada .herramientas .herramientas__acciones { justify-self: end; }
  .incrustada .herramientas .rango { flex-wrap: wrap; }
}

/* ---------- Incrustada en Pesar: estado y acciones por fila (20/10/2026) ----------
   Filtro Todas / Abiertas / Cerradas y, en cada pesada, "Cerrar" (si está abierta) y el lápiz
   para modificarla: abren la pantalla de pesaje de Pesar. Solo existen dentro de Pesar. */
.estado-filtro { grid-area: estado; display: flex; gap: 2px; height: 36px; padding: 2px; border: 1px solid var(--borde); border-radius: 10px; background: var(--field); }
.estado-filtro button { height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-2); font: 700 11.5px Manrope, "Helvetica Neue", Arial, sans-serif; white-space: nowrap; cursor: pointer; transition: background-color .2s, color .2s, transform .16s; }
.estado-filtro button:hover { background-color: rgba(127,127,127,.12); color: var(--ink); }
.estado-filtro button:active { transform: scale(.95); }
.estado-filtro button.activo, .estado-filtro button.activo:hover { background-color: var(--chassis); color: var(--on-chassis); }
.incrustada .resumen .resumen__abiertas { cursor: pointer; border-radius: 6px; padding: 2px 6px; margin: -2px -6px; transition: background-color .2s; }
.incrustada .resumen .resumen__abiertas:hover { background-color: var(--danger-soft); }
.incrustada .tabla th.c-acc { width: 104px; }
.incrustada .tabla td.c-acc { padding-top: 0; padding-bottom: 0; text-align: right; white-space: nowrap; overflow: visible; }
.fila-cerrar { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; background-color: var(--danger); color: #fff; font: 700 12px Manrope, "Helvetica Neue", Arial, sans-serif; text-decoration: none; vertical-align: middle; transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, filter .2s; }
.fila-cerrar:hover { transform: translateY(-1px); box-shadow: 0 2px 8px rgba(194,49,29,.3); filter: brightness(1.06); }
.fila-cerrar:active { transform: scale(.96); }
.fila-icono { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: 4px; border-radius: 8px; color: var(--ink-3); vertical-align: middle; transition: background-color .2s, color .2s; }
.fila-icono:hover { background-color: var(--velo); color: var(--ink); }
.fila-icono svg { width: 16px; height: 16px; }
@media (max-width: 1100px) { .incrustada .tabla th.c-acc { width: 96px; } }

/* ==========================================================
   Celular (22/10/2026): la consulta pensada para la pantalla chica.
   Ingreso sin el logo repetido (ya está en la cabecera) y la lista de pesadas
   en tarjetas en vez de la tabla de la PC.
   ========================================================== */
@media (max-width: 640px) {
  /* ---- Ingreso ---- */
  body.ingreso { height: auto; min-height: 100%; place-items: start stretch; align-content: start; gap: 20px; padding: 100px 18px calc(56px + env(safe-area-inset-bottom)); }
  .ingreso__caja { width: 100%; gap: 20px; position: relative; z-index: 2; }
  /* Más aire entre los campos: rótulo, campo y el bloque siguiente bien separados */
  .ingreso__form { padding: 24px 20px 26px; }
  .tipo, .combo, .campo { gap: 9px; }
  .plegable.abierto { margin-top: 22px; }
  .plegable__dentro { gap: 22px; }
  .ingreso__form .boton { margin-top: 4px; }
  .ingreso__form input, .combo__campo input { scroll-margin-top: 90px; }
  /* La lista de básculas va por encima del aviso de abajo */
  .combo__lista { z-index: 30; max-height: min(300px, 42vh); }
  .nota-ingreso { position: relative; inset: auto; z-index: 0; }
  .ingreso__marca .logo { font-size: 26px; }   /* también en el celular: logo arriba, centrado (24/10/2026) */
  .ingreso__marca > span:last-child { font-size: 26px; line-height: 32px; letter-spacing: -.02em; }
  .ingreso__form input, .ingreso__form .tipo__boton, .ingreso__form .combo__campo input { min-height: 48px; font-size: 16px; }
  .ingreso__form .boton { height: 48px; font-size: 15px; }
  .ingreso__pie { order: 9; }
  /* Tipo de usuario: en el celular, dos botones grandes lado a lado en vez de la lista desplegable */
  .tipo__boton { display: none; }
  #tipoLista, #tipoLista.abierta {
    position: static; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; min-width: 0; margin: 0; padding: 4px;
    border: 1px solid var(--borde); border-radius: 12px; background-color: var(--field); box-shadow: none;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none;
  }
  #tipoLista .tipo__opcion--pronto { display: none; }
  #tipoLista .tipo__opcion span { justify-content: center; height: 46px; padding: 0 8px; border-radius: 9px; font-size: 15px; font-weight: 700; color: var(--ink-2); }
  #tipoLista .tipo__opcion span::before { display: none; }
  #tipoLista .tipo__opcion:hover span { background: transparent; }
  #tipoLista .tipo__opcion input:checked + span { background-color: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08), 1px 3px 8px rgba(0,0,0,.06); }
  /* Nota de la consulta anterior: una sola línea que se abre al tocarla */
  .nota-ingreso { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; column-gap: 12px; row-gap: 8px; padding: 12px 14px; }
  .nota-ingreso__icono { width: 32px; height: 32px; margin: 0; }
  .nota-ingreso h2 { margin: 0 28px 0 0; font-size: 14px; line-height: 20px; cursor: pointer; }
  .nota-ingreso h2::after { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 0 3px 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .3s var(--ease-out); }
  .nota-ingreso.abierta h2::after { transform: rotate(225deg); margin-bottom: -1px; }
  .nota-ingreso p, .nota-ingreso ul { grid-column: 1 / -1; }
  .nota-ingreso:not(.abierta) p, .nota-ingreso:not(.abierta) ul { display: none; }
  .nota-ingreso__cerrar { top: 50%; margin-top: -14px; }
  .nota-ingreso.abierta .nota-ingreso__cerrar { top: 12px; margin-top: 0; }
  /* El autocompletado del navegador no pinta el campo de celeste */
  .ingreso__form input:-webkit-autofill, .ingreso__form input:-webkit-autofill:hover, .ingreso__form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 40px var(--field) inset; -webkit-text-fill-color: var(--ink); caret-color: var(--ink); transition: background-color 9999s; }

  /* ---- Barra de arriba: el nombre tiene lugar; la báscula (clientes, transportes, choferes) baja a su fila ---- */
  .cabecera--app .cabecera__fila { gap: 8px 10px; }
  .cabecera--app .barra__quien { flex: 1 1 0; min-width: 0; }
  .cabecera--app .bascula-menu { order: 2; flex: 1 1 100%; margin-left: 0; z-index: 6; }
  .cabecera--app .bascula-boton { width: 100%; justify-content: flex-start; }
  .cabecera--app .bascula-boton__texto { flex: 1; display: flex; align-items: baseline; gap: 8px; }
  .cabecera--app .bascula-boton__texto b { max-width: none; }
  .cabecera--app .bascula-lista { left: 0; right: 0; width: auto; z-index: 20; }

  /* ---- Filtros: fijos arriba y compactos; la lista se desliza debajo ---- */
  .panel { gap: 8px; padding: 12px 12px 0; }
  .herramientas { gap: 6px; }
  .herramientas .rango { order: 1; flex-wrap: wrap; width: 100%; gap: 6px; }
  .herramientas .rango label { flex: 1 1 40%; min-width: 0; gap: 2px; }
  .herramientas .rango label span { font-size: 10px; line-height: 12px; }
  /* Sin atajos de período en el celular: arranca de ayer a hoy y se cambia con Desde / Hasta. */
  .herramientas .rango .atajos { display: none; }
  .herramientas input[type="date"] { width: 100%; height: 30px; padding: 0 9px; border-radius: 8px; font-size: 12.5px; }
  .herramientas .atajos { width: 100%; height: 30px; padding: 2px; border-radius: 8px; }
  .herramientas .atajos button { height: 24px; padding: 0 4px; border-radius: 6px; font-size: 11px; white-space: nowrap; }
  /* Buscador con Imprimir y Excel al lado */
  .herramientas .buscador { order: 2; flex: 1 1 0; min-width: 0; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12.5px; }
  .herramientas .buscador svg { width: 14px; height: 14px; }
  .herramientas .buscador input { font-size: 12.5px; }
  .herramientas .herramientas__acciones { order: 3; flex: none; width: auto; align-self: center; gap: 5px; }
  .herramientas .herramientas__acciones .boton { flex: none; width: 30px; height: 30px; min-width: 0; padding: 0; font-size: 0; gap: 0; justify-content: center; border-radius: 8px; }
  .herramientas__acciones .boton svg { width: 15px; height: 15px; margin: 0; }
  /* Excel no tiene sentido en el celular */
  .herramientas #btnExcel { display: none; }
  /* Resumen: una sola línea de texto, sin recuadros */
  .herramientas .resumen { order: 4; flex: 1 1 100%; display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0 12px; width: 100%; min-height: 0; padding: 0 2px; overflow: hidden; white-space: nowrap; font-size: 10.5px; line-height: 15px; color: var(--ink-3); }
  .herramientas .resumen > span { flex: none; }
  .herramientas .resumen b { margin-right: 3px; font-size: 12.5px; color: var(--ink); }
  .herramientas .resumen .resumen__abiertas b { color: var(--abierta); }
  .herramientas .resumen__ton { display: none !important; }
  .herramientas .resumen .resumen__aviso { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* ---- Pesadas (23/10/2026): una fila por pesada, con filas alternadas (blanco / gris claro):
     fecha · número · cliente ............ neto. Al tocarla se abre el ticket con el detalle y las fotos. ---- */
  .tabla-caja { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; margin-bottom: 10px; border-radius: 12px; background-color: var(--surface); box-shadow: var(--sh-card); }
  .tabla { min-width: 0; display: block; table-layout: auto; }
  .tabla tbody { display: block; }
  .tabla thead tr, .tabla tr[data-nro] {
    display: grid; grid-template-columns: 38px minmax(42px, auto) minmax(0, 1fr) auto;   /* fecha: solo día y mes */
    grid-template-areas: "fec nro raz neto";
    align-items: baseline; column-gap: 10px; padding: 9px 12px;
  }
  /* Encabezado chico y fijo arriba de la lista (tocarlo ordena, como en la PC) */
  .tabla thead { display: block; position: sticky; top: 0; z-index: 2; background-color: var(--surface); box-shadow: inset 0 -1px 0 var(--linea); }
  .tabla thead tr { padding-top: 8px; padding-bottom: 7px; }
  .tabla thead th { display: none; }
  .tabla thead th.c-fec, .tabla thead th.c-nro, .tabla thead th.c-movil, .tabla thead th[data-col="neto"] {
    display: block; width: auto; height: auto; padding: 0; border: 0; background: none; text-align: left;
    font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
  .tabla thead th.c-fec { grid-area: fec; }
  .tabla thead th.c-nro { grid-area: nro; }
  .tabla thead th.c-movil { grid-area: raz; }
  .tabla thead th[data-col="neto"] { grid-area: neto; text-align: right; }
  .tabla tr[data-nro] { cursor: pointer; }
  .tabla tr[data-nro]:nth-child(even) { background-color: var(--surface-2); }
  .tabla tr[data-nro]:active { background-color: var(--fila-hover, rgba(0,0,0,.06)); }
  .tabla td { display: none; }
  .tabla tr[data-nro] td { height: auto; padding: 0; border: 0; max-width: none; background: none; line-height: 18px; }
  .tabla td.c-fec { display: block; grid-area: fec; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tabla td.c-nro { display: block; grid-area: nro; text-align: left; font-size: 12.5px; font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tabla td.c-movil { display: block; grid-area: raz; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--ink); }
  .tabla td.c-neto { display: block; grid-area: neto; text-align: right; font-size: 13.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .tabla td.c-neto::after { content: " kg"; font-size: 10px; font-weight: 600; color: var(--ink-3); }
  /* Abierta: el neto todavía no existe; en su lugar, "Abierta" en rojo */
  .tabla tr.abierta td { color: inherit; }
  .tabla tr.abierta td.c-neto { font-size: 0; line-height: 0; }
  .tabla tr.abierta td.c-neto::after { content: "Abierta"; display: inline-block; font-size: 11.5px; line-height: 17px; font-weight: 800; color: var(--abierta); }
  /* Filas de carga */
  .tabla tr.esqueleto { display: block; }
  .tabla tr.esqueleto:nth-child(even) td { background-color: var(--surface-2); }
  .tabla tr.esqueleto td { display: block; height: 42px; padding: 16px 12px; border: 0; }
}
@media (max-width: 380px) { .herramientas .atajos button { font-size: 10.5px; } }

/* ---------- Ticket en el celular (22/10/2026): hoja que sube desde abajo, compacta ----------
   Encabezado chico y fijo; los tres pesos en una fila; los datos en una sola columna. */
@media (max-width: 640px) {
  .detalle { width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
  .detalle[open] { animation: subeHoja .38s cubic-bezier(.16,1,.3,1) both; }
  .detalle__cab { gap: 8px; padding: 16px 14px 10px; box-shadow: inset 0 -1px 0 var(--linea); }
  .detalle__titulo h2 { font-size: 17px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .detalle__meta { gap: 4px 10px; margin-top: 4px; font-size: 11.5px; line-height: 16px; }
  .detalle__meta .etiqueta { padding: 1px 6px; font-size: 10.5px; }
  .detalle__meta .estado::before { width: 6px; height: 6px; }
  .detalle__cab #detalleImprimir { height: 32px; min-width: 0; padding: 0 12px; font-size: 12.5px; }
  .detalle__cab .icono { width: 32px; height: 32px; }
  .detalle__cuerpo { padding: 12px 14px calc(18px + env(safe-area-inset-bottom)); }
  .aviso-abierta { margin-bottom: 10px; padding: 8px 12px; font-size: 12px; line-height: 16px; }
  .pesos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 16px; }
  .pesos div { padding: 9px 10px; border-radius: 10px; }
  .pesos span { gap: 4px; font-size: 10.5px; line-height: 14px; }
  .pesos span em { padding: 0 4px; font-size: 9.5px; }
  .pesos b { margin-top: 3px; font-size: 16px; line-height: 20px; white-space: nowrap; }
  .pesos small { min-height: 0; margin-top: 2px; font-size: 10px; line-height: 13px; }
  .secciones { grid-template-columns: 1fr; gap: 14px; }
  .secciones section + section { padding-top: 14px; box-shadow: inset 0 1px 0 var(--linea); }
  .secciones h3 { margin-bottom: 6px; font-size: 10.5px; letter-spacing: .07em; }
  .secciones dl { gap: 4px; }
  .secciones div { grid-template-columns: 110px minmax(0, 1fr); gap: 8px; font-size: 12.5px; line-height: 17px; }
  .chapa { padding: 0 6px; font-size: 11.5px; line-height: 17px; }
}
@keyframes subeHoja { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Vista previa de impresión en el celular: la hoja ocupa casi toda la pantalla (se achica entera, ver escalarHoja en consulta.js) */
@media (max-width: 640px) {
  .flotante { width: calc(100% - 16px); height: fit-content; max-height: calc(100dvh - 24px); }
  .flotante__hoja { flex: none; min-height: 200px; max-height: calc(100dvh - 90px); }
  .flotante__cab { padding: 12px 12px 10px 16px; }
  .flotante__cab h2 { font-size: 16px; }
  .flotante__cab .boton { height: 34px; min-width: 0; padding: 0 14px; font-size: 13px; }
  .flotante__hoja { margin: 0 8px 8px; }
}
/* Celular: la lista de pesadas se desliza sin barra de scroll a la vista */
@media (max-width: 640px) {
  .tabla-caja { scrollbar-width: none; }
  .tabla-caja::-webkit-scrollbar { display: none; }
}

/* ---------- Movimiento en el celular (23/10/2026) ----------
   Hoja del ticket que sube entera y baja al cerrarse (también arrastrándola hacia abajo),
   filas que entran escalonadas, toques que responden y cambios de pestaña más cortos. */
@media (max-width: 640px) {
  .detalle__cab { position: relative; touch-action: none; }
  .detalle__cab::before { content: ""; position: absolute; top: 6px; left: 50%; width: 38px; height: 4px; margin-left: -19px; border-radius: 2px; background-color: var(--borde); }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  .detalle[open] { animation: subeHojaEntera .38s cubic-bezier(.16,1,.3,1) backwards; }
  .detalle.cerrando { animation: bajaHoja .24s cubic-bezier(.4,0,1,1) both !important; }
  .detalle.soltando { transition: transform .26s cubic-bezier(.16,1,.3,1); }
  #filas.filas-nuevas { animation: none; }
  #filas.filas-nuevas tr[data-nro] { animation: filaEntra .36s cubic-bezier(.16,1,.3,1) backwards; }
  #filas.filas-nuevas tr:nth-child(2) { animation-delay: 25ms; }
  #filas.filas-nuevas tr:nth-child(3) { animation-delay: 50ms; }
  #filas.filas-nuevas tr:nth-child(4) { animation-delay: 75ms; }
  #filas.filas-nuevas tr:nth-child(5) { animation-delay: 100ms; }
  #filas.filas-nuevas tr:nth-child(6) { animation-delay: 125ms; }
  #filas.filas-nuevas tr:nth-child(7) { animation-delay: 150ms; }
  #filas.filas-nuevas tr:nth-child(8) { animation-delay: 175ms; }
  #filas.filas-nuevas tr:nth-child(9) { animation-delay: 200ms; }
  #filas.filas-nuevas tr:nth-child(10) { animation-delay: 225ms; }
  #filas.filas-nuevas tr:nth-child(11) { animation-delay: 250ms; }
  #filas.filas-nuevas tr:nth-child(12) { animation-delay: 275ms; }
  #filas.filas-nuevas tr:nth-child(n+13) { animation: none; }
  .tabla tr[data-nro] { transition: background-color .15s ease; }
  .atajos button, .pestana, #tipoLista .tipo__opcion span, .herramientas__acciones .boton { transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .12s ease; }
  .atajos button:active, .pestana:active, .herramientas__acciones .boton:active, #tipoLista .tipo__opcion span:active { transform: scale(.95); }
  .panel.entra-der > *, .panel.entra-izq > * { animation-duration: .36s; }
  .nota-ingreso.abierta p, .nota-ingreso.abierta ul { animation: llega .3s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes subeHojaEntera { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bajaHoja { to { transform: translateY(100%); } }
@keyframes filaEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- AiBOX en el celular (23/10/2026) ----------
   Las tablas no tienen scroll propio (el chat se desliza de corrido); cada fila es compacta:
   el dato principal y el neto arriba, el resto en un renglón chico con su nombre; filas alternadas.
   Se ven 8 filas y el resto con "Ver las N filas". */
.resultado__mas { display: none; }
@media (max-width: 640px) {
  .chat { gap: 14px; padding: 4px 0 6px; }
  .msj .resultado { margin-top: 4px; border-radius: 12px; }
  .resultado__cab { padding: 10px 12px 2px; }
  .msj .resultado .resultado__tabla { max-height: none; overflow: visible; }
  .msj .resultado .resultado__tabla table, .msj .resultado .resultado__tabla tbody { display: block; }
  .msj .resultado .resultado__tabla thead, .msj .resultado .resultado__tabla colgroup { display: none; }
  .msj .resultado .resultado__tabla tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 10px; padding: 8px 12px; border: 0; }
  .msj .resultado .resultado__tabla tbody tr:nth-child(even) { background-color: var(--surface-2); }
  .msj .resultado .resultado__tabla tr::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .msj .resultado .resultado__tabla td { order: 3; flex: none; padding: 0; border: 0; background: none; text-align: left !important; white-space: nowrap; overflow: visible;
    font-size: 11.5px; line-height: 17px; font-weight: 600; color: var(--ink-2); }
  .msj .resultado .resultado__tabla td::before { content: attr(data-etq) " "; display: inline; font: 500 11px/17px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; text-transform: none; color: var(--ink-3); }
  .msj .resultado .resultado__tabla td.principal { order: 0; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 700; color: var(--ink); }
  .msj .resultado .resultado__tabla td.principal::before { content: none; }
  .msj .resultado .resultado__tabla td.fuerte { order: 1; margin-left: auto; font-size: 13.5px; font-weight: 800; color: var(--ink); }
  .msj .resultado .resultado__tabla td.fuerte::before { font-size: 10.5px; font-weight: 600; }
  .msj .resultado:not(.resultado--todo) .resultado__tabla tbody tr:nth-child(n+9) { display: none; }
  .resultado__mas { display: block; width: 100%; height: 36px; border: 0; border-top: 1px solid var(--linea); background: var(--surface); color: var(--ink); font: 700 12.5px Manrope, "Helvetica Neue", Arial, sans-serif; cursor: pointer; }
  .resultado__mas:active { background-color: var(--surface-2); }
  .resultado--grafico[data-ver="grafico"] .resultado__mas { display: none; }
  .resultado__pie { padding: 4px 6px 4px 12px; font-size: 11.5px; }
  .sugerencias--seguir button { padding: 8px 12px; font-size: 13px; }
}
/* Celular/tablet: el chat de AiBOX es el que se desliza (antes crecía más que la pantalla y quedaba cortado) */
@media (max-width: 820px) {
  .ia-principal { min-height: 0; }
  .ia-principal .chat { min-height: 0; }
}

/* ---------- AiBOX en el celular, más limpio (23/10/2026) ----------
   Todo entra sin scroll: bienvenida chica, sugerencias en una lista compacta, "Conversaciones"
   como botón chico arriba a la derecha (no ocupa una fila) y la lista de conversaciones flotando encima. */
@media (max-width: 640px) {
  .panel--ia { position: relative; gap: 8px; padding: 10px 12px 12px; }
  /* "Conversaciones" es un botón de ícono al lado de la caja para escribir; la lista se abre encima */
  .ia-ver-lista { position: absolute; left: 12px; bottom: 4px; z-index: 6; width: 46px; height: 46px; padding: 0; justify-content: center; gap: 0; border-radius: 14px; font-size: 0; }
  .ia-ver-lista svg { width: 18px; height: 18px; }
  .ia-principal .chat__form { align-self: stretch; width: auto; max-width: none; margin: 0 0 0 54px; }
  .ia-lado, .ia-lado.abierto { position: absolute; bottom: 60px; left: 12px; right: 12px; top: auto; z-index: 7; max-height: 64%; padding: 10px; border-radius: 14px; box-shadow: var(--sh-float); }
  .ia-lado > * { flex: none; }
  .ia-lado .ia-lado__lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  .ia-principal { gap: 8px; }
  .chat { gap: 12px; padding: 4px 0; }
  /* Bienvenida */
  .chat__bienvenida { gap: 6px; padding: 8px 0 4px; }
  .ia-marca--grande { width: 38px; height: 38px; border-radius: 11px; }
  .ia-marca--grande svg { width: 20px; height: 20px; }
  .chat__bienvenida h2 { margin-top: 4px; font-size: 19px; line-height: 24px; }
  .chat__bienvenida p { max-width: 320px; font-size: 12.5px; line-height: 18px; color: var(--ink-3); }
  .chat__bienvenida .sugerencias { gap: 0; margin-top: 10px; border-radius: 12px; background-color: var(--surface); box-shadow: var(--sh-card); overflow: hidden; }
  .chat__bienvenida .sugerencias button { min-height: 0; gap: 10px; padding: 11px 14px; border-radius: 0; box-shadow: none; background: transparent; font-size: 13px; line-height: 17px; text-align: left; }
  .chat__bienvenida .sugerencias button + button { box-shadow: inset 0 1px 0 var(--linea); }
  .chat__bienvenida .sugerencias button:hover { transform: none; box-shadow: none; }
  .chat__bienvenida .sugerencias button + button:hover { box-shadow: inset 0 1px 0 var(--linea); }
  .chat__bienvenida .sugerencias button:active { background-color: var(--surface-2); transform: none; }
  .chat__bienvenida .sugerencias button svg { width: 16px; height: 16px; }
  /* Mensajes */
  .msj--yo { max-width: 88%; padding: 8px 12px; font-size: 14px; line-height: 20px; }
  .msj__texto p, .msj__texto li { font-size: 14px; line-height: 21px; }
  .msj__cuerpo { gap: 6px; }
  /* Caja para escribir */
  .chat__form { gap: 4px; }
  .chat__caja { padding: 5px 5px 5px 14px; border-radius: 14px; }
  .chat__caja textarea { min-height: 36px; padding: 7px 0; font-size: 15px; line-height: 22px; }
  .chat__enviar { width: 36px; height: 36px !important; border-radius: 9px; }
  .chat__enviar svg { width: 18px; height: 18px; }
}

/* ---------- AiBOX en el celular: pulido (23/10/2026) ----------
   Botón de conversaciones alineado con el chat y sin pisar la caja; respuestas a todo el ancho
   (sin el ícono al costado); cifras de a dos o tres por renglón; preguntas para seguir en una
   fila que se desliza; barras con nombre y valor en el mismo renglón; títulos que no se cortan. */
@media (max-width: 640px) {
  .ia-ver-lista { left: 0; }
  .ia-principal .chat__form { margin-left: 54px; }

  .msj--ia { gap: 0; }
  .msj--ia > .ia-marca { display: none; }
  .msj--ia .autor { display: flex; align-items: center; gap: 6px; }
  .msj--ia .autor::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background-color: var(--amber); }

  .resultado__cab { flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; }
  .resultado__tit { flex: 1 1 150px; white-space: normal; font-size: 13px; line-height: 18px; }
  .resultado__vistas button { height: 24px; padding: 0 10px; font-size: 11.5px; }
  .resultado__graf { padding: 6px 12px 10px; }

  .cifras { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 8px; }
  .cifra { padding: 10px 12px; border-radius: 12px; }
  .cifra__valor { font-size: 19px; line-height: 24px; white-space: nowrap; overflow-wrap: normal; }
  .cifra__valor small { margin-left: 2px; font-size: 11.5px; }
  .cifra__etq { font-size: 11.5px; line-height: 15px; }

  .barras { gap: 2px; }
  .barras__fila { grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; min-height: 0; padding: 4px 6px; }
  .barras__etq { grid-column: 1; grid-row: 1; font-size: 12.5px; }
  .barras__valor { grid-column: 2; grid-row: 1; min-width: 0; font-size: 12.5px; }
  .barras__pista { grid-column: 1 / -1; grid-row: 2; height: 8px; }

  .linea__plano { height: 150px; margin: 6px 4px 0 40px; }
  .linea__ejes { margin: 6px 4px 0 40px; }
  .linea__guia b { right: calc(100% + 6px); width: 38px; font-size: 10px; }
  .linea__ejes span { font-size: 10px; }

  .sugerencias.sugerencias--seguir { flex-wrap: nowrap; gap: 6px; margin: 6px 0 0; padding: 2px 0 4px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
  .sugerencias--seguir::-webkit-scrollbar { display: none; }
  .sugerencias--seguir button { flex: none; max-width: 78vw; padding: 7px 11px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; scroll-snap-align: start; }
  .sugerencias--seguir button span { overflow: hidden; text-overflow: ellipsis; }
}

/* Botón de conversaciones y caja para escribir en el mismo renglón (23/10): grilla en vez de
   posición absoluta, así quedan alineados en cualquier celular. */
@media (max-width: 640px) {
  .ia-principal { display: grid; grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 8px; }
  .ia-principal > .chat { grid-column: 1 / -1; grid-row: 1; }
  .ia-principal > .ia-ver-lista { position: static; grid-column: 1; grid-row: 2; align-self: end; width: 46px; height: 46px; margin: 0 0 4px; }
  .ia-principal > .chat__form { grid-column: 2; grid-row: 2; align-self: end; margin: 0; }
}

/* ---------- Publicidad (23/10/2026) ----------
   Franja chica al pie, en las dos pestañas (como en la app vieja): los avisos activos del panel
   rotan con un fundido, cada uno sus segundos. Misma tarjeta blanca del sistema. */
.publicidad { flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 6px var(--margen) 8px; background-color: var(--content); }
.publicidad__etq { font: 700 10px/14px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.publicidad__marco { position: relative; width: min(100%, 330px); aspect-ratio: 9 / 2; border-radius: 10px; overflow: hidden; background-color: #fff; box-shadow: var(--sh-card); }
.publicidad__aviso { position: absolute; inset: 0; display: block; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s linear .5s; }
.publicidad__aviso.visible { opacity: 1; visibility: visible; transition: opacity .5s ease, visibility 0s; }
.publicidad__aviso img { display: block; width: 100%; height: 100%; object-fit: contain; }
.incrustada .publicidad { display: none; }
@media (max-width: 640px) {
  .publicidad { padding: 6px 12px 8px; }
  .publicidad__etq { display: none; }
  .publicidad__marco { width: 100%; max-width: 420px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { .publicidad__aviso, .publicidad__aviso.visible { transition: none; } }

/* Publicidad (23/10): en el pie de la ventana del ticket (debajo de los datos, que se desplazan
   por encima) y, en AiBOX de la PC, al pie de la columna de conversaciones. En el celular sin
   ticket abierto sigue en la franja de abajo. Sin la palabra "Publicidad" al lado. */
.detalle__pub { flex: none; }
.detalle__pub:empty { display: none; }
.publicidad--detalle { padding: 12px 22px 16px; border-top: 1px solid var(--linea); background: none; }
.publicidad--detalle .publicidad__etq { display: none; }
.publicidad--detalle .publicidad__marco { width: auto; height: 60px; border-radius: 8px; box-shadow: none; }
.publicidad--lado .publicidad__etq { font-size: 9.5px; }
.publicidad--lado { flex: none; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0 0; background: none; }
.publicidad--lado .publicidad__marco { width: 100%; border-radius: 8px; box-shadow: none; }
@media (max-width: 640px) {
  .publicidad--detalle { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .publicidad--detalle .publicidad__marco { width: 100%; height: auto; max-width: 360px; }
}

/* Celular: mientras se escribe en AiBOX (teclado abierto) no se muestra la publicidad (23/10). */
@media (max-width: 1099px) { body.escribiendo-ia .publicidad { display: none; } }

/* Compartir el ticket por WhatsApp (23/10): botón suave con el ícono en el verde de WhatsApp;
   en el celular solo el ícono, al lado de Imprimir. */
.detalle__wa { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.detalle__wa[hidden] { display: none; }
.detalle__wa svg { width: 18px; height: 18px; flex: none; fill: #25d366; stroke: none; }
@media (max-width: 640px) {
  .detalle__wa, .detalle__imp { flex: none; width: 44px; min-width: 0; padding: 0; justify-content: center; }
  .detalle__imp span { display: none; }
  .detalle__wa span { display: none; }
  .detalle__wa svg { width: 22px; height: 22px; }
}

/* Imprimir del ticket con su ícono, como el de WhatsApp (en el celular, los dos del mismo tamaño). */
.detalle__imp { display: inline-flex; align-items: center; gap: 8px; }
.detalle__imp svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
@media (max-width: 640px) { .detalle__imp svg { width: 21px; height: 21px; } }

/* Fotos de la pesada en el ticket (23/10): entrada y salida lado a lado, debajo de los pesos. */
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(0, 220px)); gap: 10px; margin: 14px 0 18px; }
.foto { position: relative; display: block; overflow: hidden; border-radius: 12px; background-color: var(--surface-2); aspect-ratio: 16 / 10; cursor: zoom-in; }
.foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.foto:hover img { transform: scale(1.03); }
.foto span { position: absolute; left: 10px; top: 10px; padding: 3px 8px; border-radius: 6px; background-color: rgba(18, 18, 18, .72); color: #fff; font: 700 11.5px/16px Manrope, "Helvetica Neue", Arial, sans-serif; }
@media (max-width: 640px) { .fotos { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .foto { border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .foto img { transition: none; } }

/* Ticket con fotos (23/10): datos a la izquierda (una sola columna de secciones) y las fotos
   apiladas a la derecha; en el celular las fotos van arriba de los datos, de a dos. */
.detalle__grilla { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; }
.detalle__grilla .secciones { grid-template-columns: 1fr; gap: 18px; }
.detalle__grilla .secciones div { grid-template-columns: 150px 1fr; }
.detalle__grilla .fotos { grid-template-columns: 1fr; gap: 10px; margin: 0; position: sticky; top: 0; }
@media (max-width: 640px) {
  .detalle__grilla { grid-template-columns: 1fr; gap: 14px; }
  .detalle__grilla .fotos { grid-row: 1; grid-template-columns: 1fr 1fr; position: static; }
  .detalle__grilla .secciones div { grid-template-columns: 112px 1fr; }
}

/* ver.php sin sesión (link del QR o de WhatsApp): detrás del detalle, aviso para ingresar (24/10/2026) */
.ver-publico__aviso p { margin: 0; font: 500 14px/21px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-2); }
.ver-publico__aviso p b { color: var(--ink); font-weight: 800; }

/* ---------- Peso del cabezal (solo báscula, 24/10/2026): ventana chica, peso grande, se cierra sola ---------- */
.cabezal { width: min(420px, calc(100% - 32px)); padding: 0; border: 0; border-radius: 16px; background-color: var(--surface); color: var(--ink); box-shadow: var(--sh-float); overflow: hidden; }
.cabezal[open] { animation: aparece .4s cubic-bezier(.16,1,.3,1) both; }
.cabezal::backdrop { background: rgba(18, 18, 18, .35); }
.cabezal__cab { display: flex; align-items: center; gap: 10px; padding: 16px 14px 4px 22px; }
.cabezal__cab h2 { flex: 1; margin: 0; font: 800 17px/22px Manrope, "Helvetica Neue", Arial, sans-serif; }
.cabezal__lista { display: grid; gap: 10px; padding: 10px 22px 12px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.cabezal__nombre { margin: 4px 0 -4px; font: 700 11px/14px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cabezal__fila { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 14px; background-color: var(--surface-2); }
.cabezal__fila span { font: 600 13px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); }
.cabezal__fila b { font: 800 44px/1 Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cabezal__fila b small { margin-left: 6px; font: 700 16px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); letter-spacing: 0; }
.cabezal__fila--espera b { color: var(--ink-3); }
.cabezal__error { margin: 0; padding: 14px 16px; border-radius: 12px; background-color: var(--surface-2); font: 600 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-2); }
.cabezal__pie { margin: 0; padding: 0 22px 14px; font: 500 12px/16px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); }
.cabezal__tiempo { height: 3px; background-color: var(--surface-2); }
.cabezal__tiempo i { display: block; height: 100%; background-color: var(--ink-3); transform-origin: left center; animation: cabezalTiempo 6s linear both; }
@keyframes cabezalTiempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (max-width: 640px) {
  .cabezal { width: calc(100% - 24px); }
  .cabezal__fila b { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) { .cabezal[open] { animation: none; } }

/* Lista al día (24/10/2026): la pesada nueva o la que cambió (se cerró, se modificó) se tiñe un momento y vuelve
   sola a su color, para que se note qué pasó sin mover nada. */
.tabla tr.fila-cambio, .tabla tr.fila-cambio > td { animation: filaCambio 1.8s ease-out; }
@keyframes filaCambio { from { background-color: var(--amber-soft); } }

/* ---------- Ingreso en el celular, compacto (24/10/2026): que se vea entero sin scrollear ----------
   Logo y título más chicos, menos aire arriba y entre bloques, campos de 44 px (cómodos para el dedo;
   la letra sigue en 16 px para que el teléfono no haga zoom al escribir). */
@media (max-width: 640px) {
  body.ingreso { gap: 14px; padding-top: 76px; }
  .ingreso__caja { gap: 14px; }
  .ingreso__marca { gap: 6px; }
  .ingreso__marca .logo { font-size: 19px; }
  .ingreso__marca > span:last-child { font-size: 19px; line-height: 24px; letter-spacing: -.01em; }
  .ingreso__form { padding: 18px 16px 18px; }
  .tipo, .combo, .campo { gap: 6px; }
  .plegable.abierto { margin-top: 14px; }
  .plegable__dentro { gap: 14px; }
  .ingreso__form .boton { margin-top: 2px; }
  .ingreso__form input, .ingreso__form .combo__campo input { min-height: 44px; }
  .ingreso__form .boton { height: 46px; }
  #tipoLista .tipo__opcion span { height: 42px; }
}

/* Nota del ingreso sin botón de cerrar (24/10/2026): el título usa todo el ancho. */
.nota-ingreso h2 { margin-right: 0; }

/* Ingreso en el celular (24/10/2026): un solo logo, el de la barra negra. Arriba del recuadro queda solo
   "Consulta de pesadas", un poco más grande y centrado. */
@media (max-width: 640px) {
  .ingreso__marca .logo { display: none; }
  .ingreso__marca > span:last-child { font-size: 22px; line-height: 28px; letter-spacing: -.015em; }
}

/* Barra de la consulta en el celular (24/10/2026): arriba solo el logo y el nombre (con todo el ancho, así no se
   corta); debajo, el selector de báscula si hay varias; y en la última fila Pesadas | AiBOX con Salir, tema e
   idioma a la derecha. */
@media (max-width: 640px) {
  .cabecera--app .barra__quien { order: 1; flex: 1 1 calc(100% - 124px); min-width: 0; }
  .cabecera--app .bascula-menu { order: 2; }
  .cabecera--app .pestanas { order: 3; flex: 1 1 55%; width: auto; min-width: 0; }   /* 55 %: nunca entra en la fila del nombre */
  .cabecera--app .barra__salir { order: 4; flex: none; }
  .cabecera--app .cabecera__util { order: 5; flex: none; }
}

/* ---------- Eventos (solo la báscula, 25/10/2026) ----------
   Cada vez que la balanza pasó el peso mínimo, con la foto de la cámara. En la PC: la lista a la izquierda y la
   foto del elegido a la derecha (flechas arriba y abajo pasan de uno a otro). En el celular: una fila por evento y
   la foto en una hoja que sube al tocarlo. Usado (tiene pesada) = punto lleno verde; sin usar = anillo gris. */
.pestanas-sel { display: none; }
.panel--eventos .herramientas { align-items: flex-end; }
.ev-filtro { height: 42px; padding: 3px; align-items: center; }
.ev-filtro button { height: 34px; padding: 0 14px; font-size: 12.5px; }
.panel--eventos .resumen { align-self: center; }
.panel--eventos .resumen .ev-res-no b { color: var(--ink-2); }
.ev-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 420px); gap: 16px; }
.ev-cuerpo .tabla-caja { min-height: 0; }
.tabla--eventos th { cursor: default; }
.tabla--eventos th:hover { color: var(--ink-2); }
.tabla--eventos.sin-bascula .c-bascula, .tabla--eventos.sin-balanza .c-evbal { display: none; }
.tabla--eventos .c-evnro { width: 90px; font-weight: 700; }
.tabla--eventos .c-evfec { width: 96px; }
.tabla--eventos .c-evhora { width: 80px; }
.tabla--eventos .c-evbal { width: 80px; }
.tabla--eventos td.c-evbal::before { content: "Balanza "; }
.tabla--eventos .c-peso { width: 110px; }
.tabla--eventos .c-evfoto { width: 44px; text-align: center; color: var(--ink-3); }
.tabla--eventos .c-evfoto svg { display: block; width: 16px; height: 16px; margin: 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.tabla--eventos td.c-peso::after { content: " kg"; font-size: 11px; font-weight: 600; color: var(--ink-3); }
.tabla--eventos tr.elegido td, .tabla--eventos tr.elegido:hover td { background-color: var(--amber-soft); }
#evFilas { transition: opacity .2s ease; }
.tabla-caja.actualizando #evFilas { opacity: .4; }
.ev-uso { display: inline-flex; align-items: center; gap: 7px; font: 700 12px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ev-uso::before { content: ""; flex: none; width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%; border: 2px solid currentColor; }
.ev-uso--si { color: var(--ink); }
.ev-uso--si::before { border: 0; background-color: var(--success); }

/* Ficha del evento (al lado de la lista en la PC, o en la hoja del celular) */
.ev-visor { min-height: 0; overflow: auto; padding: 14px; border-radius: 16px; background-color: var(--surface); box-shadow: var(--sh-card); overscroll-behavior: contain; }
.ev-visor__vacio { display: grid; justify-items: center; gap: 10px; margin: 0; padding: 60px 16px; text-align: center; color: var(--ink-3); font: 600 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; }
.ev-visor__vacio svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ev-ficha { display: grid; gap: 14px; animation: llega .3s cubic-bezier(.16,1,.3,1) both; }
.ev-foto { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; border-radius: 12px; background-color: var(--surface-2); cursor: zoom-in; }
.ev-foto img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ev-foto--sin { display: grid; place-content: center; justify-items: center; gap: 8px; cursor: default; color: var(--ink-3); font: 600 12.5px Manrope, "Helvetica Neue", Arial, sans-serif; }
.ev-foto--sin svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.ev-ficha__datos { display: grid; gap: 12px; padding: 0 4px 4px; }
.ev-ficha__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ev-ficha__cab h3 { margin: 0; font: 800 19px/24px Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ev-ficha__peso { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 14px; background-color: var(--surface-2); }
.ev-ficha__peso span { font: 600 12px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); }
.ev-ficha__peso b { font: 800 30px/1 Manrope, "Helvetica Neue", Arial, sans-serif; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-ficha__peso small { margin-left: 5px; font: 700 13px Manrope, "Helvetica Neue", Arial, sans-serif; color: var(--ink-3); letter-spacing: 0; }
.ev-ficha__dl { display: grid; gap: 5px; margin: 0; }
.ev-ficha__dl div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; font: 500 13px/18px Manrope, "Helvetica Neue", Arial, sans-serif; }
.ev-ficha__dl dt { color: var(--ink-3); font-weight: 600; }
.ev-ficha__dl dd { margin: 0; font-variant-numeric: tabular-nums; }
.ev-ver { justify-self: start; }
.ev-dlg { width: min(560px, calc(100% - 24px)); }
@media (prefers-reduced-motion: reduce) { .ev-ficha { animation: none; } }

/* Ventana mediana: sin foto al lado (se abre en una ventana al tocar el evento) */
@media (max-width: 999px) {
  .ev-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .ev-visor { display: none; }
}
/* Dentro de Pesar: las pestañas (ahora tres) van arriba a la izquierda; los eventos les dejan lugar */
.incrustada:has(.con-eventos) { --ancho-pestanas: 282px; }
.incrustada .panel--eventos { padding-top: 64px; }

@media (max-width: 640px) {
  /* Barra: con tres secciones, un desplegable en lugar de los botones (mismo lugar, mismo alto) */
  .cabecera--app.con-eventos .pestanas { display: none; }
  .cabecera--app.con-eventos .pestanas-sel { order: 3; flex: 1 1 55%; min-width: 0; position: relative; display: block; }
  .pestanas-sel select {
    width: 100%; height: 36px; padding: 0 34px 0 14px; border: 0; border-radius: 11px; background-color: #1f1f1f; color: #f2f2f2;
    font: 700 14px Manrope, "Helvetica Neue", Arial, sans-serif; -webkit-appearance: none; appearance: none; box-shadow: none; cursor: pointer;
  }
  .pestanas-sel select option { background-color: #1f1f1f; color: #f2f2f2; }
  .pestanas-sel svg { position: absolute; right: 11px; top: 50%; width: 16px; height: 16px; margin-top: -8px; fill: none; stroke: #9a9a9a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

  /* Filtros */
  .ev-filtro { order: 2; flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: 32px; padding: 2px; border-radius: 8px; }
  .ev-filtro button { height: 26px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; }

  /* Una fila por evento: fecha, hora, peso ........ pesada (o "Sin usar") */
  .tabla--eventos thead tr, .tabla--eventos tr[data-ev] {
    display: grid; grid-template-columns: 38px 44px minmax(0, 1fr) auto;
    grid-template-areas: "fec hora peso uso";
    align-items: baseline; column-gap: 10px; padding: 9px 12px;
  }
  .tabla--eventos thead tr { padding-top: 8px; padding-bottom: 7px; }
  .tabla--eventos thead th.c-evfec, .tabla--eventos thead th.c-evhora, .tabla--eventos thead th.c-peso, .tabla--eventos thead th.c-evuso {
    display: block; width: auto; height: auto; padding: 0; border: 0; background: none; text-align: left;
    font-size: 10px; line-height: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
  .tabla--eventos thead th.c-evfec { grid-area: fec; }
  .tabla--eventos thead th.c-evhora { grid-area: hora; }
  .tabla--eventos thead th.c-peso { grid-area: peso; text-align: right; }
  .tabla--eventos thead th.c-evuso { grid-area: uso; }
  .tabla--eventos tr[data-ev] { cursor: pointer; }
  .tabla--eventos tr[data-ev]:nth-child(even) { background-color: var(--surface-2); }
  .tabla--eventos tr[data-ev]:active { background-color: var(--fila-hover); }
  .tabla--eventos tr[data-ev] td { height: auto; padding: 0; border: 0; max-width: none; background: none; line-height: 18px; }
  .tabla--eventos td.c-evfec { display: block; grid-area: fec; font-size: 12px; color: var(--ink-3); white-space: nowrap; }
  .tabla--eventos td.c-evhora { display: block; grid-area: hora; font-size: 12.5px; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
  .tabla--eventos td.c-peso { display: block; grid-area: peso; text-align: right; font-size: 13.5px; font-weight: 800; white-space: nowrap; }
  .tabla--eventos td.c-peso::after { font-size: 10px; }
  .tabla--eventos td.c-evuso { display: block; grid-area: uso; min-width: 86px; }
  .tabla--eventos .ev-uso { font-size: 11.5px; gap: 6px; }
  .tabla--eventos .ev-uso::before { width: 8px; height: 8px; }

  /* Hoja del evento: foto arriba a todo el ancho y los datos debajo */
  .ev-dlg { width: 100%; }
  .ev-ficha--hoja { gap: 12px; }
  .ev-ficha--hoja .ev-ficha__datos { padding: 0; gap: 10px; }
  .ev-ficha--hoja .ev-ficha__peso { padding: 11px 14px; border-radius: 12px; }
  .ev-ficha--hoja .ev-ficha__peso b { font-size: 24px; }
  .ev-ficha--hoja .ev-ficha__dl div { grid-template-columns: 80px minmax(0, 1fr); font-size: 12.5px; line-height: 17px; }
  .ev-ficha--hoja .ev-ver { justify-self: stretch; justify-content: center; }
}

/* Celular (26/10/2026): la fecha de las listas va solo con día y mes (más lugar para el resto) */
@media (max-width: 640px) { .tabla--eventos .c-anio { display: none; } }