/* CDH Conteo — estilos mobile-first (base copiada de CDH Distribución). Marca: naranja del logo #e2711d, negro y fondo blanco. */
:root {
  /* Marca (escala a partir del naranja del logo #e2711d) */
  --marca-50: #fdf3ea;
  --marca-100: #fbe3cd;
  --marca-300: #f0a868;
  --marca-600: #cc6418;
  --marca: #e2711d;
  --marca-700: #b5560f;   /* texto y enlaces (contraste AA sobre blanco) */
  --marca-900: #6e340a;
  /* Neutros */
  --negro: #1e2124;
  --texto: #1a1a1a;
  --suave: #5c5c5c;
  --borde: #e5e5e5;
  --gris-claro: #f3f3f3;
  --fondo: #ffffff;
  --tarjeta: #ffffff;
  /* Estados (semáforo) */
  --ok: #15803d;
  --ok-claro: #e7f6ec;
  --azul: #1d4ed8;
  --azul-claro: #e0e9ff;
  --ambar: #a16207;
  --ambar-claro: #fef9c3;
  --rojo: #b91c1c;
  --rojo-claro: #fde8e8;
  --sombra: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04);
  --radio: 12px;
  color-scheme: light;
  accent-color: var(--marca);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  background: var(--fondo);
  color: var(--texto);
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--marca-700); }
a:hover { color: var(--marca-900); }
h1, h2 { color: var(--negro); }
h1 { font-size: 1.4rem; margin: .2em 0 .5em; }
h1 small { font-size: .9rem; color: var(--suave); font-weight: normal; }
h2 { font-size: 1.1rem; margin: .8em 0 .5em; }
code { background: var(--gris-claro); padding: 1px 5px; border-radius: 4px; font-size: .9em; }

/* ---------- barra superior ---------- */
.topbar {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; gap: 12px;
  background: var(--negro); color: #fff; border-bottom: 3px solid var(--marca);
  padding: 8px 16px; padding-top: calc(8px + env(safe-area-inset-top));
}
.marca { display: flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; white-space: nowrap; padding: 4px 8px; margin-left: -8px; border-radius: 8px; }
.marca:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.marca img { display: block; height: 34px; width: auto; }
.marca span { font-weight: 400; opacity: .8; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .3); }
.menu { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu a { color: #fff; text-decoration: none; padding: 6px 10px; border-radius: 8px; white-space: nowrap; opacity: .85; }
.menu a:hover { background: rgba(255, 255, 255, .12); opacity: 1; }
.menu a.activo { background: var(--marca); opacity: 1; }
.usuario { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.usuario a { color: #fff; text-decoration: none; }
.usuario a:hover { color: #fff; text-decoration: underline; }
.usuario form { margin: 0; }
.btn-link { background: none; border: 0; color: #fff; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; opacity: .85; }
@media (max-width: 640px) {
  .topbar { flex-wrap: wrap; }
  .menu { order: 3; flex-basis: 100%; }
  .marca span { display: none; }
  .usuario { margin-left: auto; }
}

/* ---------- contenedores ---------- */
.contenedor { max-width: 1100px; margin: 0 auto; padding: 16px; }
.contenedor.ancho { max-width: 1500px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; box-shadow: var(--sombra); margin-bottom: 14px; }
.tarjeta.angosta { max-width: 560px; margin-left: auto; margin-right: auto; }
.centrada { text-align: center; }
.encabezado { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.encabezado h1 { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.botones form { margin: 0; }
.volver { display: inline-block; margin-bottom: 4px; text-decoration: none; font-size: .9rem; }
.vacio { color: var(--suave); text-align: center; padding: 24px 8px; list-style: none; }
.ayuda { color: var(--suave); font-size: .88rem; }

/* ---------- botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 8px 16px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--tarjeta); color: var(--texto);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { filter: brightness(.97); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: default; }
.btn.primario { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn.primario:hover { background: var(--marca-600); border-color: var(--marca-600); filter: none; }
.btn.primario:active { background: var(--marca-700); border-color: var(--marca-700); }
.btn.peligro { background: var(--rojo-claro); border-color: var(--rojo); color: var(--rojo); }
.btn.advertencia { background: var(--ambar-claro); border-color: var(--ambar); color: var(--ambar); }
.btn.grande { min-height: 54px; font-size: 1.05rem; padding: 12px 20px; }
.btn.pequeno { min-height: 32px; padding: 4px 10px; font-size: .85rem; }
.btn.ancho { width: 100%; margin-bottom: 14px; }
.btn-icono { background: none; border: 0; color: var(--suave); font-size: 1.1rem; cursor: pointer; padding: 8px; min-width: 40px; min-height: 40px; }
.btn-icono:hover { color: var(--rojo); }

/* ---------- formularios ---------- */
.formulario { display: grid; gap: 12px; }
.formulario label, .filtros label { display: grid; gap: 4px; font-weight: 600; font-size: .92rem; }
input, select, textarea {
  font: inherit; width: 100%;
  padding: 10px 12px; min-height: 44px;
  border: 1px solid var(--borde); border-radius: 10px;
  background: var(--tarjeta); color: var(--texto);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: normal; }
label.check input { width: 22px; min-height: 22px; height: 22px; }
fieldset.roles-extra, fieldset.grupo-campos { border: 1px solid var(--borde, #ddd); border-radius: 8px; padding: 8px 12px; display: grid; gap: 6px; }
fieldset.roles-extra legend, fieldset.grupo-campos legend { font-weight: 600; font-size: .92rem; padding: 0 4px; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.dos-columnas { grid-template-columns: 1fr; }
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1fr 1fr; gap: 24px; } .dos-columnas > div { display: grid; gap: 12px; align-content: start; } }
.ancho-completo { grid-column: 1 / -1; }
.fila-geo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filtros input[type="search"] { flex: 1 1 260px; }
.filtros select { flex: 0 1 200px; }
.filtros input[type="date"] { width: auto; }
.selector-fecha .dia { font-weight: 600; color: var(--suave); }

/* ---------- alertas y chips ---------- */
.alerta { padding: 12px 14px; border-radius: 10px; margin-bottom: 12px; border: 1px solid; }
.alerta.ok { background: var(--ok-claro); border-color: var(--ok); }
.alerta.error { background: var(--rojo-claro); border-color: var(--rojo); color: var(--rojo); }
.alerta.advertencia { background: var(--ambar-claro); border-color: var(--ambar); color: var(--texto); }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; background: var(--gris-claro); color: var(--suave); text-decoration: none; }
.chip.ok { background: var(--ok-claro); color: var(--ok); }
.chip.azul { background: var(--azul-claro); color: var(--azul); }
.chip.alerta-chip { background: var(--ambar-claro); color: var(--ambar); }
.chip.gris { background: var(--gris-claro); color: var(--suave); }
.chip.rojo { background: var(--rojo-claro); color: var(--rojo); }
/* Estados de una ubicación en el conteo */
.chip.estado-u-pendiente { background: var(--gris-claro); color: var(--suave); }
.chip.estado-u-en_proceso { background: var(--azul-claro); color: var(--azul); }
.chip.estado-u-contada { background: var(--ok-claro); color: var(--ok); }
.chip.estado-u-vacia { background: #ecebe6; color: #57534e; }
.txt-alerta { color: var(--ambar); }
.tabla-scroll { overflow-x: auto; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: top; }
.tabla th { background: var(--gris-claro); font-size: .82rem; text-transform: uppercase; letter-spacing: .3px; color: var(--suave); white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.inactivo td { opacity: .55; }
.tabla .num { text-align: right; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 16px 0; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.kpis > div { background: var(--gris-claro); border-radius: 10px; padding: 12px; text-align: center; }
.kpis strong { display: block; font-size: 1.6rem; }
.kpis span { color: var(--suave); font-size: .85rem; }
.kpis .advertencia { background: var(--ambar-claro); }
.datos { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; }

/* ---------- login ---------- */
.pantalla-login main { min-height: 100vh; display: grid; place-items: center; }
.login { width: 100%; max-width: 400px; }
.login-marca { text-align: center; margin-bottom: 20px; }
.login-marca h1 { margin: 12px 0 0; font-weight: 400; font-size: 1.2rem; color: var(--suave); letter-spacing: .5px; }
.logo-login { display: block; margin: 0 auto; width: 200px; height: auto; }
.login-marca p { color: var(--suave); margin: 4px 0 0; }

/* ---------- rutas ---------- */
.lista-rutas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ruta-item { display: block; color: inherit; text-decoration: none; margin: 0; }
.ruta-item:hover { border-color: var(--marca); }
.ruta-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ruta-nombre { font-weight: 600; margin-top: 6px; }
.ruta-equipo { color: var(--suave); font-size: .92rem; margin: 6px 0; }
.progreso { height: 8px; background: var(--gris-claro); border-radius: 99px; overflow: hidden; margin: 8px 0 6px; }
.progreso > div { height: 100%; background: var(--marca); border-radius: 99px; transition: width .3s; }
.ruta-pie { display: flex; justify-content: space-between; gap: 8px; font-size: .88rem; color: var(--suave); flex-wrap: wrap; }

.menu-mas { position: relative; }
.menu-mas summary { list-style: none; }
.menu-mas summary::-webkit-details-marker { display: none; }
.menu-mas-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 1100; width: min(300px, 90vw); background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); display: grid; gap: 12px; }


/* ---------- app de campo ---------- */
.campo { max-width: 640px; margin: 0 auto; padding: 0 12px 32px; }
.barra-estado { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 0; font-size: .8rem; }
.ind { padding: 2px 10px; border-radius: 99px; background: var(--gris-claro); color: var(--suave); }
.ind.ok { background: var(--ok-claro); color: var(--ok); }
.ind.error { background: var(--rojo-claro); color: var(--rojo); }
.ind.alerta { background: var(--ambar-claro); color: var(--ambar); font-weight: 700; }
.cab-ruta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; margin-bottom: 14px; box-shadow: var(--sombra); }
.cab-ruta > div:first-child { display: flex; gap: 8px; align-items: center; }
.ruta-fecha { margin-top: 6px; font-weight: 600; text-transform: capitalize; }
.titulo-seccion { font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); margin: 18px 0 8px; }
.lista-campo { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.item-campo { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; }
.item-campo.abierta { border: 2px solid var(--marca); }
.item-campo .tarjeta { border: 0; border-top: 1px solid var(--borde); border-radius: 0; box-shadow: none; margin: 0; }
.item-cab { width: 100%; display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 10px 12px; text-align: left; font: inherit; color: inherit; cursor: pointer; min-height: 56px; }
.item-cab .num { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--gris-claro); display: grid; place-items: center; font-weight: 700; font-size: .85rem; }
.item-cab .info { flex: 1; min-width: 0; display: grid; }
.item-cab .info strong, .item-cab .info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-cab .info small { color: var(--suave); }
.opciones-campo { display: grid; gap: 12px; margin-top: 20px; }


.dialogo { border: 0; border-radius: 16px; padding: 18px; width: min(480px, calc(100vw - 32px)); background: var(--tarjeta); color: var(--texto); box-shadow: 0 20px 50px rgba(0, 0, 0, .35); }
.dialogo::backdrop { background: rgba(0, 0, 0, .45); }
.dialogo form { display: grid; gap: 12px; }
.dialogo h2 { margin: 0; }
.opciones-estado { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.opciones-estado label { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--borde); border-radius: 10px; font-weight: 600; }
.opciones-estado input { width: 22px; min-height: 22px; height: 22px; }

/* ---------- toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translate(-50%, 150%); z-index: 3000; background: var(--negro); color: #fff; padding: 12px 18px; border-radius: 12px; max-width: calc(100vw - 32px); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: transform .25s; }
.toast.visible { transform: translate(-50%, 0); }
.toast.error { background: var(--rojo); }
.toast.ok { background: var(--ok); }

/* Campo de contraseña con botón de ojo (lo arma pwa.js) */
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 48px; }
.campo-clave .ver-clave {
  position: absolute; top: 0; right: 0; width: 44px; height: 100%;
  display: grid; place-items: center; padding: 0;
  background: none; border: 0; color: var(--suave); cursor: pointer;
}
.campo-clave .ver-clave:hover, .campo-clave .ver-clave[aria-pressed="true"] { color: var(--marca-700); }
.campo-clave .ver-clave svg { width: 22px; height: 22px; }
.acciones.izquierda { justify-content: flex-start; }
.acciones form { margin: 0; }

.resumen-pagos { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 8px 0; }
.resumen-pagos td { padding: 4px 0; border-bottom: 1px solid var(--borde); }
.resumen-pagos td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
.resumen-pagos small { color: var(--suave); }
.resumen-pagos tfoot td { border-bottom: 0; font-weight: 700; padding-top: 6px; }

/* ---------- buscador con resultados ---------- */
.buscador { position: relative; margin-bottom: 10px; }
.resultados { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1100; list-style: none; margin: 0; padding: 4px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 8px 24px rgba(0, 0, 0, .15); max-height: 60vh; overflow-y: auto; }
.resultados button { width: 100%; text-align: left; background: none; border: 0; padding: 10px; border-radius: 8px; cursor: pointer; color: inherit; font: inherit; display: grid; gap: 2px; }
.resultados button:hover:not(:disabled) { background: var(--marca-50); }
.resultados button:disabled { opacity: .55; cursor: default; }
.resultados small { color: var(--suave); }

.resultados button span { font-weight: 600; }

/* ---------- app del contador ---------- */
.buscar-grande { font-size: 1.15rem; min-height: 52px; margin-bottom: 10px; }
.chips-filtro { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 4px; scrollbar-width: none; }
.chips-filtro::-webkit-scrollbar { display: none; }
.chips-filtro button { flex: none; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); border-radius: 99px; padding: 6px 14px; min-height: 38px; font: inherit; font-weight: 600; font-size: .9rem; cursor: pointer; }
.chips-filtro button.activo { background: var(--negro); border-color: var(--negro); color: #fff; }
.lista-campo .titulo-seccion { margin: 14px 0 2px; }
.cod-ubic { flex: none; min-width: 84px; font: 800 1.15rem ui-monospace, Consolas, monospace; letter-spacing: .5px; }
.item-campo.estado-contada .item-cab, .item-campo.estado-vacia .item-cab { opacity: .65; }
.item-campo.estado-en_proceso { border-left: 4px solid var(--azul); }
.ubic-cab { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }
.ubic-cab h1 { margin: 0; font: 800 1.6rem ui-monospace, Consolas, monospace; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ubic-cab h1 .chip { font-family: system-ui, sans-serif; letter-spacing: 0; }
.tarjeta.anterior { background: var(--marca-50); border-color: var(--marca-100); }
.tarjeta.anterior h3 { margin: 0 0 6px; font-size: 1rem; }
.tarjeta.anterior h3 small { color: var(--suave); font-weight: normal; }
.tarjeta.anterior ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tarjeta.anterior li { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; }
.tarjeta.anterior li small { grid-column: 1 / -1; color: var(--suave); font-size: .8rem; }
.form-registro { display: grid; gap: 8px; margin-top: 14px; }
.form-registro h2 { margin: 0; }
.form-registro > label, .form-registro .buscador > label { font-weight: 600; font-size: .92rem; }
.form-registro .buscador { margin: 0; display: grid; gap: 4px; }
.form-registro details summary { cursor: pointer; color: var(--marca-700); font-weight: 600; padding: 6px 0; }
.form-registro details .formulario { padding-top: 6px; }
.cantidad-grande { font-size: 2rem; font-weight: 800; min-height: 64px; text-align: center; letter-spacing: 1px; }
.prod-elegido { display: flex; align-items: center; gap: 8px; border: 2px solid var(--marca); border-radius: 10px; padding: 8px 10px; background: var(--marca-50); }
.prod-elegido[hidden] { display: none; }
.prod-elegido > div { flex: 1; min-width: 0; display: grid; }
.prod-elegido small { color: var(--suave); }
.prod-rapidos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-prod { border: 1px solid var(--borde); background: var(--gris-claro); border-radius: 8px; padding: 6px 10px; font: inherit; font-size: .82rem; text-align: left; cursor: pointer; color: var(--texto); max-width: 100%; }
.chip-prod.activo { background: var(--marca); border-color: var(--marca); color: #fff; }
.resultados li.vacio { padding: 10px; }
.acciones-ubic { display: grid; gap: 8px; margin: 14px 0 32px; }
.acciones-ubic .btn[hidden] { display: none; }
.btn.ok-btn { background: var(--ok); border-color: var(--ok); color: #fff; }

.lista-productos { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.lista-productos > li { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--tarjeta); display: grid; gap: 8px; }
.prod-cab { display: flex; align-items: center; gap: 10px; }
.prod-cab > div { flex: 1; min-width: 0; display: grid; }
.prod-cab strong { font-size: .98rem; }
.prod-cab small { color: var(--suave); font-size: .8rem; }
.prod-total { font-size: 1.6rem; font-weight: 800; white-space: nowrap; }
.partes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.parte { display: inline-flex; align-items: center; gap: 6px; background: var(--gris-claro); border: 1px solid var(--borde); border-radius: 99px; padding: 2px 4px 2px 12px; font-size: .95rem; }
.parte small { color: var(--suave); font-size: .78rem; }
.parte.pendiente { border-style: dashed; border-color: var(--ambar); background: var(--ambar-claro); }
.parte button { border: 0; background: none; color: var(--suave); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: .95rem; }
.parte button:hover { color: var(--rojo); background: var(--rojo-claro); }

/* ---------- panel del supervisor ---------- */
.interruptor-anterior { padding: 12px 16px; }
.interruptor { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor .deslizador { flex: none; width: 52px; height: 30px; border-radius: 99px; background: #c9c9c9; position: relative; transition: background .2s; }
.interruptor .deslizador::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.interruptor input:checked + .deslizador { background: var(--marca); }
.interruptor input:checked + .deslizador::after { transform: translateX(22px); }
.interruptor input:focus-visible + .deslizador { outline: 2px solid var(--marca); outline-offset: 2px; }
.interruptor input:disabled + .deslizador { opacity: .5; }
.pestanas { display: flex; gap: 4px; align-items: center; border-bottom: 2px solid var(--borde); margin: 4px 0 12px; overflow-x: auto; }
.pestana { border: 0; background: none; font: inherit; font-weight: 600; padding: 10px 14px; cursor: pointer; color: var(--suave); border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap; }
.pestana.activa { color: var(--negro); border-bottom-color: var(--marca); }
.pestanas .actualizado { margin-left: auto; white-space: nowrap; padding-left: 8px; }
.tabla-panel td { vertical-align: top; }
.tabla-panel tr.fila-ubic { cursor: pointer; }
.tabla-panel tr.fila-ubic:hover td { background: var(--marca-50); }
.tabla-panel .prods div, .tabla-panel .num div { line-height: 1.5; white-space: nowrap; }
.tabla-panel .prods div { white-space: normal; }
.dif-pos { color: var(--azul); font-weight: 700; }
.dif-neg { color: var(--rojo); font-weight: 700; }
tr.con-dif td:first-child { box-shadow: inset 4px 0 0 var(--rojo); }
.kpis .kpi-ok { background: var(--ok-claro); }
.kpis .kpi-azul { background: var(--azul-claro); }
.kpis .kpi-rojo { background: var(--rojo-claro); }
.dialogo-ancho { width: min(760px, calc(100vw - 24px)); max-height: 88vh; overflow-y: auto; }
.dlg-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dlg-cab h2 { margin: 0; }
.tabla tr.anulado td { text-decoration: line-through; opacity: .55; }
.ronda-titulo { font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); margin: 14px 0 6px; }
.botones .menu-mas:first-child .menu-mas-panel { left: 0; right: auto; }
.menu[hidden] { display: none; }