/* Panel Dilimpro — tema «hielo» (por defecto) y «noche».
   Tokens: temas.css (copia exacta de skills/dilimpro-design/tokens/temas.css).
   Guía: skills/dilimpro-design/TEMA.md. Aquí solo hay componentes: ningún color suelto,
   salvo los de la barra lateral y la tarjeta de NEO, que son marinos en los dos temas. */
@import url("/estatico/fuentes.css");
@import url("/estatico/temas.css");

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--fuente);
  background: var(--fondo-decorado);
  background-attachment: fixed;
  color: var(--txt);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(39, 181, 224, .25); }
a { color: var(--acento-texto); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3, h4 { color: var(--titulo); text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 14.5px; font-weight: 700; }
p { margin: 0; }
svg.ic { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mono, .num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tenue { color: var(--txt-2); }
.micro { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-2); }
.micro a { color: var(--txt-2); }
.micro a:hover { color: var(--acento-texto); }

/* ── Franja de ensayo ── */
.ensayo {
  background: repeating-linear-gradient(135deg, #F6D79E 0 12px, #FBEBC9 12px 24px);
  color: #4A300C; text-align: center; font: 600 12.5px/1.3 var(--fuente); padding: 6px 16px;
  position: relative; z-index: 50;
}

/* ── Maqueta: barra lateral + columna ── */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
.lateral {
  position: sticky; top: 0; display: flex; flex-direction: column;
  /* El panel aplica su zoom (A−/A+) a toda la página, y el zoom también agranda 100vh: se divide
     para que el menú mida exactamente la ventana (con 125 % se salía lo de abajo, 23-sep). */
  height: calc(100vh / var(--zoom, 1)); height: calc(100dvh / var(--zoom, 1));
  background: var(--barra-lateral); border-right: 1px solid rgba(255, 255, 255, .06); z-index: 40;
}
/* Lo de abajo (plegar, cuota, NEO, usuario) se ve SIEMPRE: solo se desplaza la lista de botones, que
   encoge hasta un mínimo; si la pantalla es tan baja que ni eso cabe, se desplaza el menú entero. */
.lateral > * { flex: none; }
.lateral > .nav { flex: 1 1 auto; min-height: 96px; overscroll-behavior: contain; }
.nav.con-mas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.lateral-bajo .marca-casa { padding: 14px 22px 8px; }
.lateral-bajo .nav-rotulo { padding: 10px 10px 5px; }
.lateral-bajo .tarjeta-neo { padding: 9px 14px; margin-bottom: 8px; }
.lateral-bajo .tarjeta-neo p, .lateral-bajo .cuota-pie, .lateral-bajo .cuota-edad { display: none; }
.lateral-bajo .usuario { margin-bottom: 10px; padding: 7px 12px; }
.lateral-minimo .lateral { overflow-y: auto; }
.lateral-minimo .lateral > .nav { flex: none; min-height: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.marca-casa { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 22px 14px; color: #fff; }
.logo-oficial { display: block; height: 36px; width: auto; }
.acceso .logo-oficial { height: 44px; }
.logo-oscuro { display: none; }
:root[data-tema="noche"] .logo-claro { display: none; }
:root[data-tema="noche"] .logo-oscuro { display: block; }
.marca-casa:hover { text-decoration: none; }
.gota {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none;
  background: rgba(39, 181, 224, .14); border: 1px solid rgba(39, 181, 224, .45);
  box-shadow: 0 0 18px rgba(39, 181, 224, .25), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.gota svg { width: 20px; height: 20px; fill: var(--marca); stroke: none; filter: drop-shadow(0 0 6px rgba(39, 181, 224, .7)); }
.marca-nombre { font-weight: 800; font-size: 16px; letter-spacing: .14em; color: #fff; }
.marca-nombre em { font-style: normal; color: var(--marca); }
.marca-sub { font-family: var(--mono); font-size: 10px; color: rgba(174, 199, 215, .7); letter-spacing: .14em; text-transform: uppercase; padding-left: 2px; }
.nav { flex: 1; overflow-y: auto; padding: 4px 12px 12px; }
.nav-rotulo { font-family: var(--mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(174, 199, 215, .6); padding: 16px 10px 8px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 11px; border-radius: var(--r-interior);
  color: var(--barra-lateral-txt); font-size: 13.5px; font-weight: 500; position: relative;
  transition: background .18s, color .18s, transform .18s; margin-bottom: 2px;
}
.nav-item:hover { background: rgba(255, 255, 255, .07); color: #fff; transform: translateX(2px); text-decoration: none; }
.nav-item[aria-current="page"] { background: rgba(39, 181, 224, .16); color: #fff; }
.nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 99px;
  background: var(--marca); box-shadow: 0 0 10px var(--marca);
}
/* Grupo desplegable del menú (sección «Claudio», D-112) */
.nav-grupo > summary { list-style: none; cursor: pointer; }
.nav-grupo > summary::-webkit-details-marker { display: none; }
.nav-flecha { margin-left: auto; width: 14px; height: 14px; opacity: .7; transition: transform .18s; }
.nav-grupo[open] > summary .nav-flecha { transform: rotate(180deg); }
.nav-sub { padding-left: 24px; font-size: 13px; }
.nav-sub-rotulo { padding-left: 34px; padding-top: 10px; font-size: 9px; }
:root[data-lateral="plegado"] .nav-flecha { display: none; }
/* Secciones «Operación» y «Gestión» plegables (Pablo, 26-oct-2026) */
.nav-seccion > summary { list-style: none; cursor: pointer; display: flex; align-items: center; user-select: none; }
.nav-seccion > summary::-webkit-details-marker { display: none; }
.nav-seccion > summary:hover { color: #fff; }
.nav-seccion > summary .nav-flecha { width: 13px; height: 13px; margin-right: 1px; }
.nav-seccion[open] > summary .nav-flecha { transform: rotate(180deg); }
.contador { margin-left: auto; font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  padding: 2px 7px; border-radius: 99px; min-width: 22px; text-align: center; }
.contador.acento { color: #4FC6EA; background: rgba(39, 181, 224, .16); border: 1px solid rgba(39, 181, 224, .4); }
.contador.aviso { color: #E8C57C; background: rgba(196, 155, 85, .18); border: 1px solid rgba(196, 155, 85, .4); }
.tarjeta-neo {
  margin: 8px 14px 12px; padding: 13px 14px; border-radius: 13px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 95% 0, #247197 0, transparent 52%), linear-gradient(120deg, #103B59, #0D304D);
  border: 1px solid rgba(39, 181, 224, .35); color: #fff; display: block;
}
.tarjeta-neo:hover { text-decoration: none; border-color: rgba(39, 181, 224, .6); }
.tarjeta-neo::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(39, 181, 224, .7), transparent); }
.neo-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; }
.tarjeta-neo p { font-size: 11.5px; color: #AEC7D7; margin-top: 6px; line-height: 1.5; }
.tarjeta-neo .mono { color: #4FC6EA; font-size: 11px; }
.latido { width: 7px; height: 7px; border-radius: 50%; background: #1A9C83; position: relative; flex: none; }
.latido::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #1A9C83; animation: latido 2s ease-out infinite; }
.latido.aviso { background: #C49B55; }
.latido.aviso::after { border-color: #C49B55; }
.latido.crit { background: #C9556B; }
.latido.crit::after { border-color: #C9556B; }
@keyframes latido { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
/* ── Cuota de Claude de NEO (abajo del menú) ── */
.cuota { margin: 2px 14px 8px; padding: 9px 12px 9px; border-radius: 12px; color: #fff;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); }
.cuota-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(174, 199, 215, .75); }
.cuota-edad { letter-spacing: .02em; text-transform: none; font-size: 10px; color: rgba(174, 199, 215, .55); }
.cuota-fila { display: grid; grid-template-columns: 4.6em 1fr 2.8em; column-gap: 8px; align-items: center; }
.cuota-fila + .cuota-fila { margin-top: 5px; }
.cuota-rotulo { font-size: 11.5px; color: #D5E4EE; }
.cuota-pct { font-family: var(--mono); font-size: 11px; color: #4FC6EA; text-align: right; }
.cuota-barra { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .10); overflow: hidden; }
.cuota-barra i { display: block; height: 100%; border-radius: inherit; background: #27B5E0;
  box-shadow: 0 0 8px rgba(39, 181, 224, .55); transition: width .4s; }
.cuota-barra i.aviso { background: #C49B55; box-shadow: 0 0 8px rgba(196, 155, 85, .5); }
.cuota-barra i.crit { background: #C9556B; box-shadow: 0 0 8px rgba(201, 85, 107, .55); }
.cuota-pie { font-size: 10.5px; color: rgba(174, 199, 215, .7); margin-top: 6px; line-height: 1.35; }
.cuota-lleno { font-size: 11px; color: #E8C57C; margin-top: 6px; line-height: 1.45; }
.cuota.vieja .cuota-barra i { opacity: .45; box-shadow: none; }
.cuota.vieja .cuota-edad { color: #E8C57C; }
.usuario {
  margin: 0 14px 16px; padding: 10px 12px; border-radius: 12px; display: flex; align-items: center; gap: 11px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); color: #fff;
}
.usuario b { display: block; font-size: 12.5px; }
.usuario span { font-size: 11px; color: #AEC7D7; }
.usuario form { margin-left: auto; }
.usuario button { color: #AEC7D7; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; }
.usuario button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.avatar {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none;
  font-size: 11.5px; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(135deg, #27B5E0, #159FC9);
}
.avatar.pablo { background: linear-gradient(135deg, #3E8BB3, #2E6DA3); }
.avatar.miguel { background: linear-gradient(135deg, #5D6CA8, #3E4F8F); }
.avatar.xs { width: 24px; height: 24px; font-size: 9.5px; border-radius: 7px; }
.comercial { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--txt-2); white-space: nowrap; }

.principal-col { display: flex; flex-direction: column; min-width: 0; }
.superior {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px;
  padding: 11px 28px; border-bottom: 1px solid var(--linea);
  background: var(--barra-superior); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.miga { font-family: var(--mono); font-size: 11.5px; color: var(--txt-3); letter-spacing: .04em; white-space: nowrap; }
.miga b { color: var(--txt); font-weight: 500; }
.buscador {
  margin-left: auto; display: flex; align-items: center; gap: 9px; min-width: 260px;
  padding: 7px 12px; border-radius: 11px; background: var(--superficie-3); border: 1px solid var(--linea);
  color: var(--txt-4); transition: all .2s;
}
.buscador:focus-within { border-color: var(--acento-linea); box-shadow: 0 0 0 3px rgba(39, 181, 224, .12); }
.buscador.de-pagina { margin-left: 0; min-width: 0; flex: none; }
.buscador input { background: none; border: none; outline: none; box-shadow: none; color: var(--txt); font: inherit;
  font-size: 13px; width: 100%; padding: 2px 0; min-width: 0; }
.buscador input:focus { box-shadow: none; }
.buscador input::placeholder { color: var(--txt-3); }
kbd { font-family: var(--mono); font-size: 10px; color: var(--txt-3); border: 1px solid var(--linea-fuerte);
  border-bottom-width: 2px; border-radius: 5px; padding: 1px 5px; white-space: nowrap; }
.boton-icono {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; position: relative;
  color: var(--txt-2); border: 1px solid transparent; transition: all .18s; flex: none;
}
.boton-icono:hover { background: var(--superficie-3); color: var(--txt); border-color: var(--linea); text-decoration: none; }
.boton-icono .punto-alarma { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--crit); box-shadow: 0 0 0 3px var(--crit-fondo); }
.separador { width: 1px; height: 22px; background: var(--linea); flex: none; }
.reloj { font-family: var(--mono); font-size: 12.5px; color: var(--txt); letter-spacing: .04em; white-space: nowrap; text-align: right; }
.reloj small { color: var(--txt-3); font-size: 10.5px; display: block; }
.boton-menu { display: none; }
.icono-noche { display: none; }
:root[data-tema="noche"] .icono-noche { display: block; }
:root[data-tema="noche"] .icono-dia { display: none; }

.contenido { flex: 1; padding: 26px 28px 40px; max-width: 1480px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px; }
.contenido > * { min-width: 0; }

/* ── Cabecera de página ── */
.cabecera { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cabecera.con-acciones { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.cabecera > div { min-width: 0; }
.cabecera h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.cabecera h1 span, .cabecera h1 em { color: var(--acento); font-style: normal; }
.cabecera p { font-size: 13px; color: var(--txt-2); }
.cabecera p.micro { font-size: 10.5px; color: var(--txt-3); }
.subtitulo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--txt-2); margin-top: 5px; }
.subtitulo .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--txt-4); }
.bien-txt { color: var(--ok-texto); font-weight: 600; }
.mal-txt { color: var(--crit-texto); font-weight: 600; }
.aviso-txt { color: var(--aviso-texto); font-weight: 600; }

/* ── Botones ── */
.boton, .contenido button:not([class]), .contenido button.principal, .contenido button.grande, .contenido button.discreto, .acceso button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; min-height: 40px;
  border-radius: var(--r-boton); font-size: 13px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  color: var(--txt-2); border: 1px solid var(--linea-fuerte); background: var(--superficie); box-shadow: var(--sombra);
  transition: all .18s;
}
.boton:hover, .contenido button:not([class]):hover, .contenido button.discreto:hover {
  color: var(--acento-texto); border-color: var(--acento-linea); background: var(--acento-fondo); text-decoration: none;
}
.boton .ic, .contenido button .ic { width: 15px; height: 15px; }
.principal, .contenido button.principal, .acceso button.principal {
  color: var(--boton-principal-tinta); border: none; background: var(--boton-principal); box-shadow: var(--boton-principal-sombra);
}
.boton.principal:hover, .contenido button.principal:hover, .acceso button.principal:hover {
  color: var(--boton-principal-tinta); background: var(--boton-principal); transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(21, 159, 201, .65);
}
.grande { width: 100%; font-size: 15px !important; min-height: 50px !important; }
.boton.discreto, .contenido button.discreto { background: transparent; border-color: transparent; box-shadow: none; color: var(--acento-texto); padding-inline: 8px; }
button[disabled], .ocupado { opacity: .55; pointer-events: none; }
.boton-mini {
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--linea-fuerte); color: var(--txt-2); background: var(--superficie); transition: all .16s;
  display: inline-flex; align-items: center; gap: 5px; min-height: 30px;
}
.boton-mini:hover { color: var(--acento-texto); border-color: var(--acento-linea); background: var(--acento-fondo); text-decoration: none; }
.boton-mini.solido { color: var(--acento-texto); border-color: var(--acento-linea); background: var(--acento-fondo); }
.boton-mini .ic { width: 13px; height: 13px; }
.boton-hecho {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; white-space: nowrap;
  color: var(--boton-principal-tinta); padding: 7px 12px; border-radius: 9px; background: var(--boton-principal);
  box-shadow: 0 4px 12px -4px rgba(21, 159, 201, .55); transition: all .18s;
}
.boton-hecho:hover { transform: translateY(-1px); text-decoration: none; color: var(--boton-principal-tinta); }
.boton-hecho .ic { width: 13px; height: 13px; }
.accion-fantasma {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none;
  color: var(--txt-2); border: 1px solid var(--linea); background: var(--superficie); transition: all .16s;
}
.accion-fantasma:hover { color: var(--acento-texto); border-color: var(--acento-linea); background: var(--acento-fondo); }
.accion-fantasma .ic { width: 14px; height: 14px; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acciones form { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acciones-fila { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }

/* ── Tarjetas ── */
.tarjeta {
  background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra); position: relative; padding: 17px 20px; min-width: 0;
}
:root[data-tema="noche"] .tarjeta::before { content: ""; position: absolute; top: 0; left: 14px; right: 14px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(160, 205, 245, .22), transparent); pointer-events: none; }
.tarjeta.sin-relleno { padding: 0; }
.tarjeta-cab { display: flex; align-items: center; gap: 12px; padding: 17px 20px 0; flex-wrap: wrap; }
.tarjeta-cab .sub { font-size: 12px; color: var(--txt-2); margin-top: 2px; }
.crece { flex: 1; }
.enlace { color: var(--acento-texto); font-size: 12.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; transition: gap .18s; }
.enlace:hover { gap: 8px; text-decoration: none; }
.enlace .ic { width: 13px; height: 13px; }
.tarjeta-cuerpo { padding: 12px 20px 16px; }

.bloque { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bloque > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.bloque > header .tenue, .bloque > header > span { font-size: 12.5px; color: var(--txt-2); }

.rejilla { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla-a { display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.rejilla-b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.pila { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }

/* ── Cifras ── */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.kpi { padding: 18px 20px 14px; transition: transform .22s, box-shadow .22s, border-color .22s;
  animation: sube .6s cubic-bezier(.22, .8, .3, 1) both; display: block; color: inherit; }
a.kpi:hover { text-decoration: none; }
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--acento-linea); }
.kpi:nth-child(2) { animation-delay: .06s; } .kpi:nth-child(3) { animation-delay: .12s; } .kpi:nth-child(4) { animation-delay: .18s; }
.kpi-arriba { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 8px; }
.kpi-rotulo { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--txt-2); }
.kpi-icono { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none;
  color: var(--acento); background: var(--acento-fondo); border: 1px solid var(--acento-linea); }
.kpi-icono.info { color: var(--info); background: var(--info-fondo); border-color: var(--info-linea); }
.kpi-icono.ok { color: var(--ok); background: var(--ok-fondo); border-color: var(--ok-linea); }
.kpi-icono.crit { color: var(--crit); background: var(--crit-fondo); border-color: var(--crit-linea); }
.kpi-valor, .cifra { font-family: var(--mono); font-size: 27px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; color: var(--titulo); }
.kpi-valor small, .cifra small { font-size: 15px; color: var(--txt-2); font-weight: 500; }
.kpi-pie { display: flex; align-items: center; gap: 8px; margin-top: 11px; flex-wrap: wrap; }
.kpi-nota, .cifra-etq { font-size: 11.5px; color: var(--txt-2); }
.cifra-etq { margin-top: 6px; }
.variacion { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; font-weight: 600;
  padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.variacion .ic { width: 11px; height: 11px; stroke-width: 2.4; }
.variacion.sube { color: var(--ok-texto); background: var(--ok-fondo); }
.variacion.baja { color: var(--crit-texto); background: var(--crit-fondo); }
.variacion.igual { color: var(--txt-2); background: var(--superficie-3); }
.minigrafica { display: block; margin-top: 12px; width: 100%; height: 34px; }
.mg-acento { color: var(--grafica-1); } .mg-info { color: var(--info); } .mg-ok { color: var(--ok); } .mg-crit { color: var(--crit); }
.minigrafica-vacia { margin-top: 12px; height: 34px; border-radius: 6px; font-size: 10.5px; color: var(--txt-3);
  font-family: var(--mono); display: grid; place-items: center; border: 1px dashed var(--linea-fuerte); }

/* ── Gráfica ── */
.pestanas { display: flex; gap: 4px; background: var(--superficie-3); border: 1px solid var(--linea); padding: 4px; border-radius: 11px; }
.pestana { padding: 6px 13px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--txt-2); transition: all .18s; }
.pestana:hover { color: var(--txt); }
.pestana.activa { background: var(--superficie); color: var(--acento-texto); box-shadow: 0 1px 4px rgba(24, 59, 92, .12); }
:root[data-tema="noche"] .pestana.activa { background: var(--acento-fondo); box-shadow: inset 0 0 0 1px var(--acento-linea); }
.rangos { display: flex; gap: 6px; }
.rango { font-family: var(--mono); font-size: 11px; color: var(--txt-2); padding: 5px 9px; border-radius: 8px; border: 1px solid transparent; }
.rango:hover { color: var(--txt); }
.rango.activa { color: var(--acento-texto); border-color: var(--acento-linea); background: var(--acento-fondo); }
.grafica-caja { padding: 10px 14px 6px; height: 300px; position: relative; }
.leyenda { display: flex; gap: 18px; padding: 0 20px 14px; font-size: 11.5px; color: var(--txt-2); flex-wrap: wrap; }
.leyenda i { width: 18px; height: 3px; border-radius: 99px; display: inline-block; margin-right: 7px; vertical-align: middle; }
.leyenda i.principal-serie { background: var(--grafica-1); }
.leyenda i.discontinua { background: repeating-linear-gradient(90deg, var(--grafica-2) 0 5px, transparent 5px 8px); }
.pie-grafica { margin: 0 16px 16px; padding: 11px 16px; border-radius: 11px; display: flex; gap: 22px; flex-wrap: wrap;
  background: var(--superficie-2); border: 1px solid var(--linea); }
.mini-cifra b { font-family: var(--mono); font-size: 14px; display: block; color: var(--titulo); }
.mini-cifra span { font-size: 11px; color: var(--txt-2); }

/* ── Avisos ── */
.lista-avisos { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.aviso-item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding: 12px 13px; border-radius: 12px;
  border: 1px solid var(--linea); background: var(--superficie-2); transition: border-color .2s, transform .2s; position: relative;
}
.aviso-item:hover { border-color: var(--linea-fuerte); transform: translateX(2px); }
.aviso-icono { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; margin-top: 2px; }
.aviso-icono .ic { width: 16px; height: 16px; }
.t-crit { color: var(--crit); background: var(--crit-fondo); border: 1px solid var(--crit-linea); }
.t-aviso { color: var(--aviso-texto); background: var(--aviso-fondo); border: 1px solid var(--aviso-linea); }
.t-acento { color: var(--acento-texto); background: var(--acento-fondo); border: 1px solid var(--acento-linea); }
.t-info { color: var(--info); background: var(--info-fondo); border: 1px solid var(--info-linea); }
.t-ok { color: var(--ok); background: var(--ok-fondo); border: 1px solid var(--ok-linea); }
.aviso-item h4 { font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--txt); overflow-wrap: anywhere; }
.aviso-item p { font-size: 12px; color: var(--txt-2); line-height: 1.5; margin-top: 3px; overflow-wrap: anywhere; }
code, .dato { font-family: var(--mono); font-size: .88em; color: var(--acento-texto); background: var(--acento-fondo);
  padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.aviso-meta { font-family: var(--mono); font-size: 10.5px; color: var(--txt-3); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.aviso-acciones { display: flex; gap: 7px; margin-top: 9px; flex-wrap: wrap; align-items: center; }
.aviso-acciones form { margin: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.aviso-acciones select, .aviso-acciones input { width: auto; padding: 4px 8px; font-size: 12px; min-height: 30px; }
.aviso-acciones input { min-width: 14ch; flex: 1; }

/* ── Conexiones ── */
.conexiones { padding: 8px 20px 14px; }
.conexion { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.conexion:last-child { border-bottom: none; }
.conexion .ic { width: 15px; height: 15px; color: var(--txt-2); }
.conexion b { font-size: 13px; font-weight: 600; color: var(--txt); white-space: nowrap; }
.conexion .nota { font-family: var(--mono); font-size: 10.5px; color: var(--txt-3); margin-left: auto; text-align: right; }
.estado-punto { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--txt-4); }
.estado-punto.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fondo); }
.estado-punto.aviso { background: var(--aviso); box-shadow: 0 0 0 3px var(--aviso-fondo); animation: parpadeo 1.6s infinite; }
.estado-punto.crit { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-fondo); }
.estado-punto.nada { background: transparent; border: 1.5px dashed var(--txt-4); }
@keyframes parpadeo { 50% { opacity: .35; } }

/* ── Pastillas ── */
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.25;
  padding: 3.5px 10px; border-radius: 99px; max-width: 100%;
  color: var(--txt-2); background: var(--superficie-3); border: 1px solid var(--linea);
}
.chip.mono { font-family: var(--mono); font-weight: 500; font-size: 11px; }
.chip .punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip.crit { color: var(--crit-texto); background: var(--crit-fondo); border-color: var(--crit-linea); }
.chip.aviso { color: var(--aviso-texto); background: var(--aviso-fondo); border-color: var(--aviso-linea); }
.chip.ok { color: var(--ok-texto); background: var(--ok-fondo); border-color: var(--ok-linea); }
.chip.marca, .chip.acento { color: var(--acento-texto); background: var(--acento-fondo); border-color: var(--acento-linea); }
.chip.info { color: var(--info-texto); background: var(--info-fondo); border-color: var(--info-linea); }
.chip.violeta { color: var(--violeta); background: var(--violeta-fondo); border-color: var(--violeta-linea); }
a.chip:hover { text-decoration: none; border-color: var(--acento-linea); }
.etiqueta-web { font-family: var(--mono); font-size: 9.5px; color: var(--info-texto); border: 1px solid var(--info-linea);
  background: var(--info-fondo); padding: 1.5px 6px; border-radius: 5px; margin-left: 7px; vertical-align: 1px; }

/* Montajes (D-100): pedidos con un aparato que instalar o cambiar — llevar herramientas, más tiempo. */
.etiqueta-montaje { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--violeta); border: 1px solid var(--violeta-linea);
  background: var(--violeta-fondo); padding: 1.5px 6px; border-radius: 5px; margin-left: 7px; vertical-align: 1px; white-space: nowrap; }
.fila.montaje, .reparto-fila.montaje, tr.montaje > td:first-child { border-left: 4px solid var(--violeta); }
/* Urgentes (etiqueta «URGENTE» de Odoo, Claudio 6-oct-2026): primeros de la lista y en rojo. */
.etiqueta-urgente { font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--crit-texto); border: 1px solid var(--crit-linea);
  background: var(--crit-fondo); padding: 1.5px 6px; border-radius: 5px; margin-left: 7px; vertical-align: 1px; white-space: nowrap; }
.fila.urgente, .reparto-fila.urgente, tr.urgente > td:first-child { border-left: 4px solid var(--crit); }
/* Notas del pedido (líneas «nota» de Odoo, Claudio 6-oct-2026) */
.notas-pedido { margin: 6px 0; padding: 6px 9px; border-radius: 7px; color: var(--aviso-texto); background: var(--aviso-fondo);
  border: 1px solid var(--aviso-linea); font-size: 13.5px; font-weight: 600; }
.notas-pedido p { margin: 0; white-space: pre-line; }
.notas-pedido p + p { margin-top: 3px; }
.notas-pedido p.dia-entrega { font-size: 15px; font-weight: 800; color: var(--crit-texto); letter-spacing: .02em; }
.reparto-notas { flex-basis: 100%; width: 100%; }

/* ── Filtros ── */
.filtros { display: flex; gap: 7px; flex-wrap: wrap; }
.filtros a {
  font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 99px; color: var(--txt-2);
  border: 1px solid var(--linea); background: var(--superficie); transition: all .18s;
}
.filtros a:hover { color: var(--txt); border-color: var(--linea-fuerte); text-decoration: none; }
.filtros a[aria-current="true"] { color: var(--acento-texto); background: var(--acento-fondo); border-color: var(--acento-linea); }
.filtros a b { font-family: var(--mono); font-weight: 600; margin-left: 4px; }

/* ── Fichas en lista ── */
.lista { display: flex; flex-direction: column; gap: 10px; }
.fila {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; box-shadow: var(--sombra);
  padding: 13px 16px 13px 20px; color: inherit; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.fila::before { content: ""; position: absolute; left: 0; top: 13px; bottom: 13px; width: 3px; border-radius: 0 3px 3px 0; background: var(--linea-fuerte); }
.fila.vencida::before, .fila.aviso-1::before { background: var(--crit); }
.fila.aviso-2::before { background: var(--aviso); }
.fila.hoy::before { background: var(--marca); }
a.fila:hover { text-decoration: none; border-color: var(--acento-linea); box-shadow: var(--sombra-alta); transform: translateY(-1px); }
.fila-arriba { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; min-width: 0; }
.fila-cliente { font-weight: 700; color: var(--txt); font-size: 14.5px; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.fila-importe { font-family: var(--mono); font-weight: 600; font-size: 14px; color: var(--titulo); white-space: nowrap; }
.fila-sub { font-size: 12.5px; color: var(--txt-2); overflow-wrap: anywhere; }
.vacio {
  border-radius: 14px; padding: 22px; text-align: center; color: var(--txt-2); font-size: 13px;
  border: 1px dashed var(--linea-fuerte); background: var(--superficie-2);
}

/* ── Tablas ── */
.tabla, .tabla-caja { overflow-x: auto; }
.tabla { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); box-shadow: var(--sombra); }
.tabla-caja { padding: 6px 8px 10px; }
table { width: 100%; border-collapse: collapse; min-width: 640px; }
thead th {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-2);
  font-weight: 500; text-align: left; padding: 12px; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap;
}
tbody td { padding: 12px; border-bottom: 1px solid var(--linea-fila); font-size: 13px; vertical-align: middle; }
tbody tr { transition: background .18s; }
tbody tr:hover { background: var(--superficie-2); }
tbody tr:last-child td { border-bottom: none; }
td.num { text-align: right; white-space: nowrap; font-family: var(--mono); }
.ref { font-family: var(--mono); font-size: 12px; color: var(--txt-2); white-space: nowrap; }
.celda-cliente b { display: block; font-weight: 700; font-size: 13.2px; color: var(--txt); }
.celda-cliente span { font-size: 11.5px; color: var(--txt-3); }
.celda-carga { font-family: var(--mono); font-size: 11.5px; color: var(--txt-2); max-width: 30ch; }

/* Qué lleva un pedido o un presupuesto: cantidad delante, producto detrás, sin precios.
   Se lee en el móvil, de un vistazo, para cargar la furgoneta (Pablo, 23-09-2026). */
.carga-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; }
.carga-lista li { display: flex; gap: 8px; align-items: baseline; color: var(--txt); overflow-wrap: anywhere; }
.carga-lista b { flex: none; min-width: 3.2em; text-align: right; color: var(--acento-texto); font-weight: 600; }
.celda-carga .carga-lista { font-family: var(--fuente); font-size: 12.5px; }
td .chip { white-space: nowrap; }
.celda-fecha { font-family: var(--mono); font-size: 12px; color: var(--txt-2); white-space: nowrap; }
.celda-fecha.crit { color: var(--crit-texto); }
.celda-fecha.hoy { color: var(--acento-texto); }
.solo-escritorio { display: block; }
.solo-movil { display: none; }

/* ── Línea de tiempo ── */
.linea-tiempo { padding: 8px 20px 16px; position: relative; }
.linea-tiempo::before { content: ""; position: absolute; left: 24px; top: 20px; bottom: 24px; width: 1px;
  background: linear-gradient(180deg, var(--grafica-2), transparent); }
.hito { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 9px 0; position: relative; }
.hito-punto { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; z-index: 1; background: var(--marca); box-shadow: 0 0 0 3px var(--acento-fondo); }
.hito-punto.ok { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-fondo); }
.hito-punto.aviso { background: var(--aviso); box-shadow: 0 0 0 3px var(--aviso-fondo); }
.hito-punto.crit { background: var(--crit); box-shadow: 0 0 0 3px var(--crit-fondo); }
.hito b { font-size: 12.8px; font-weight: 600; display: block; line-height: 1.4; color: var(--txt); overflow-wrap: anywhere; }
.hito b .ref { color: var(--acento-texto); }
.hito span { font-family: var(--mono); font-size: 10.5px; color: var(--txt-3); }

/* ── Mensajes ── */
.flash { border-radius: 12px; padding: 11px 14px; background: var(--acento-fondo); color: var(--txt);
  border: 1px solid var(--acento-linea); font-size: 13px; }
.flash.error { background: var(--crit-fondo); border-color: var(--crit-linea); }
.flash.ok { background: var(--ok-fondo); border-color: var(--ok-linea); }
.flash.aviso { background: var(--aviso-fondo); border-color: var(--aviso-linea); }
.tostadas { position: fixed; bottom: 22px; right: 22px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.tostada {
  display: flex; align-items: flex-start; gap: 12px; width: min(380px, calc(100vw - 32px)); padding: 13px 15px; border-radius: 13px;
  background: var(--superficie); border: 1px solid var(--linea); box-shadow: var(--sombra-flotante);
  animation: entra .4s cubic-bezier(.22, 1.2, .3, 1) both;
}
:root[data-tema="noche"] .tostada { background: linear-gradient(140deg, #0E1E3C, #0A172E); border-color: var(--acento-linea); }
.tostada.sale { animation: sale .35s ease both; }
.tostada-icono { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none;
  color: var(--ok); background: var(--ok-fondo); border: 1px solid var(--ok-linea); }
.tostada-icono .ic { width: 15px; height: 15px; }
.tostada b { font-size: 13px; display: block; color: var(--txt); }
.tostada p { font-size: 12px; color: var(--txt-2); margin-top: 2px; line-height: 1.45; }
@keyframes entra { from { opacity: 0; transform: translateX(40px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes sale { to { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes sube { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.entra { animation: sube .6s cubic-bezier(.22, .8, .3, 1) both; }

/* ── Formularios ── */
label { display: grid; gap: 6px; font-size: 13px; color: var(--txt); font-weight: 600; }
input, select, textarea {
  font: 400 15px/1.3 var(--fuente); color: var(--txt); background: var(--superficie-2);
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-interior); padding: 10px 12px; width: 100%;
  transition: border-color .18s, box-shadow .18s;
}
:root[data-tema="noche"] input, :root[data-tema="noche"] select, :root[data-tema="noche"] textarea { background: rgba(8, 15, 29, .55); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--acento-linea); box-shadow: 0 0 0 3px rgba(39, 181, 224, .14); }
input::placeholder, textarea::placeholder { color: var(--txt-3); }
input[type="number"] { font-family: var(--mono); text-align: right; }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--acento); margin: 1px 0 0; flex: none; }
.opcion { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; padding: 10px 12px; border-radius: var(--r-interior);
  border: 1px solid var(--linea); background: var(--superficie-2); cursor: pointer; transition: all .16s; }
.opcion:has(input:checked) { border-color: var(--acento-linea); background: var(--acento-fondo); }
.opcion span { display: grid; gap: 2px; }
.opcion small { color: var(--txt-2); font-size: 12px; font-weight: 400; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
fieldset[hidden] { display: none; } /* el display:grid de arriba se comía el «hidden» (bloque de «lo que falta», 25-sep) */
legend { font-weight: 700; color: var(--titulo); margin-bottom: 6px; font-size: 14px; }
.form { display: flex; flex-direction: column; gap: 14px; }
.dos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
details.mas summary { cursor: pointer; color: var(--acento-texto); font-size: 12.5px; font-weight: 600; list-style: none; padding: 4px 0; }
details.mas summary::-webkit-details-marker { display: none; }
details.mas summary::before { content: "+ "; }
details.mas[open] summary::before { content: "− "; }
details.mas .form { padding-top: 10px; gap: 10px; }

/* ── Líneas de detalle ── */
.lineas { display: flex; flex-direction: column; }
.linea { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; align-items: center;
  padding: 10px 0; border-top: 1px solid var(--linea); }
.linea:first-child { border-top: 0; }
.linea-nombre { color: var(--txt); font-size: 13.5px; line-height: 1.35; overflow-wrap: anywhere; font-weight: 500; }
.linea-sub { font-size: 11.5px; color: var(--txt-2); font-family: var(--mono); }
.linea.falta .linea-sub { color: var(--aviso-texto); }

/* ── Acceso ── */
.acceso { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.acceso .tarjeta { width: min(420px, 100%); padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.acceso .marca-casa { padding: 0; color: var(--titulo); }
.acceso .marca-nombre { color: var(--titulo); }
.acceso .marca-sub { color: var(--txt-3); }
.acceso h1 { font-size: 22px; font-weight: 800; }
.acceso p { color: var(--txt-2); font-size: 13px; }
.qr { background: #fff; border-radius: 14px; padding: 6px; align-self: center; line-height: 0; width: min(240px, 100%); border: 1px solid var(--linea); }
.qr svg { width: 100%; height: auto; aspect-ratio: 1; display: block; }
.secreto { font: 500 15px/1.5 var(--mono); letter-spacing: .06em; color: var(--txt); text-align: center;
  background: var(--superficie-3); border-radius: 10px; padding: 8px; overflow-wrap: anywhere; }

.pie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--txt-3); padding-top: 8px; }
.pie .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--txt-4); }

/* ── Adaptación ── */
@media (max-width: 1240px) {
  .rejilla-a { grid-template-columns: minmax(0, 1fr); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: fixed; left: 0; top: 0; bottom: 0; width: 264px; transform: translateX(-105%);
    transition: transform .32s cubic-bezier(.22, .8, .3, 1), box-shadow .32s; box-shadow: none; }
  .lateral.abierta { transform: none; box-shadow: 24px 0 60px rgba(8, 44, 75, .35); }
  .boton-menu { display: grid; }
  .superior .buscador { min-width: 0; flex: 1; }
  .reloj, .miga, .separador { display: none; }
  .col2, .rejilla-b { grid-template-columns: minmax(0, 1fr); }
  .solo-escritorio { display: none; }
  .solo-movil { display: flex; }
}
@media (max-width: 680px) {
  .contenido { padding: 18px 16px 32px; gap: 16px; }
  .superior { padding: 9px 12px; gap: 8px; }
  .kpis { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
  .kpi { padding: 14px 14px 12px; }
  .kpi-arriba { margin-bottom: 10px; }
  .kpi-valor { font-size: 21px; }
  .kpi-valor small { font-size: 12px; }
  .kpi-icono { width: 28px; height: 28px; }
  .kpi-icono .ic { width: 15px; height: 15px; }
  .kpi-rotulo { font-size: 9.5px; letter-spacing: .08em; }
  .cabecera h1 { font-size: 21px; }
  .cabecera > .acciones { width: 100%; }
  .cabecera > .acciones .boton { flex: 1; }
  .buscador kbd { display: none; }
  .tarjeta { padding: 15px 16px; }
  .tarjeta.sin-relleno { padding: 0; }
  .tarjeta-cab { padding: 15px 16px 0; }
  .grafica-caja { height: 240px; padding: 8px 6px 4px; }
  .pestana { padding: 6px 9px; }
}
@media (max-width: 380px) {
  .kpis { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Almacén: barras de stock (maqueta, «Señales de almacén») ── */
.barra { height: 6px; border-radius: 99px; background: var(--superficie-3); overflow: hidden; position: relative; }
.barra > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #3E8BB3, #33BEE2); }
.barra > i.aviso { background: linear-gradient(90deg, #D9B171, var(--aviso)); }
.barra > i.crit { background: linear-gradient(90deg, var(--crit), #E07A8C); }
.barra .marca-min { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--titulo); opacity: .35; }
.producto { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--linea); }
.producto:last-child { border-bottom: none; }
.producto-nombre { font-weight: 700; color: var(--txt); font-size: 13.5px; overflow-wrap: anywhere; }
.producto-dato { font-family: var(--mono); font-size: 11px; color: var(--txt-2); text-align: right; white-space: nowrap; }
.producto .barra { grid-column: 1 / -1; }
.producto .notas-prod { grid-column: 1 / -1; font-size: 12px; color: var(--txt-2); display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: center; }
.formulario-linea { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0; }
.formulario-linea input { width: 7.5em; padding: 6px 8px; font-size: 14px; min-height: 34px; }
.formulario-linea input.ancho { width: auto; flex: 1; min-width: 10ch; }
.recuento-fila { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--linea); }
.recuento-fila form { display: flex; gap: 6px; align-items: center; margin: 0; }
.recuento-fila input[type="number"] { width: 6.5em; font-size: 18px; min-height: 46px; }
.recuento-fila button { min-height: 46px !important; }
.linea-compra { display: grid; grid-template-columns: auto minmax(0, 1fr) 7em; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linea); }
.linea-compra input[type="number"] { padding: 6px 8px; }
@media (max-width: 680px) {
  .recuento-fila { grid-template-columns: minmax(0, 1fr); }
  .recuento-fila form { justify-content: flex-end; }
}

/* ── Tamaño del texto ── */
.zoom { display: flex; align-items: center; gap: 2px; padding: 2px; border-radius: 10px; border: 1px solid var(--linea); flex: none; }
.boton-zoom { width: 28px; height: 28px; border-radius: 8px; font: 700 12px/1 var(--fuente); color: var(--txt-2); }
.boton-zoom:hover { background: var(--superficie-3); color: var(--acento-texto); }
.zoom-valor { font-family: var(--mono); font-size: 10px; color: var(--txt-3); min-width: 3.4em; text-align: center; }

/* ── Menú lateral plegable ── */
.plegar { display: flex; align-items: center; gap: 11px; margin: 0 12px 6px; padding: 8px 11px; border-radius: var(--r-interior);
  color: rgba(174, 199, 215, .7); font-size: 12.5px; font-weight: 500; }
.plegar:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.plegar .icono-desplegar { display: none; }
.app { transition: grid-template-columns .25s cubic-bezier(.22, .8, .3, 1); }
@media (min-width: 961px) {
  :root[data-lateral="plegado"] .app { grid-template-columns: 72px minmax(0, 1fr); }
  :root[data-lateral="plegado"] .nav-texto,
  :root[data-lateral="plegado"] .marca-sub,
  :root[data-lateral="plegado"] .nav-rotulo,
  :root[data-lateral="plegado"] .tarjeta-neo p,
  :root[data-lateral="plegado"] .neo-cab .nav-texto,
  :root[data-lateral="plegado"] .usuario > div,
  :root[data-lateral="plegado"] .usuario form { display: none; }
  :root[data-lateral="plegado"] .marca-casa { padding: 20px 10px 14px; align-items: center; }
  :root[data-lateral="plegado"] .logo-oficial { height: auto; width: 50px; }
  :root[data-lateral="plegado"] .nav { padding: 4px 10px 12px; }
  :root[data-lateral="plegado"] .nav-rotulo + .nav-item, :root[data-lateral="plegado"] .nav-item:first-child { margin-top: 10px; }
  :root[data-lateral="plegado"] .nav-item { justify-content: center; padding: 10px 0; }
  :root[data-lateral="plegado"] .nav-item:hover { transform: none; }
  :root[data-lateral="plegado"] .nav-item[aria-current="page"]::before { left: -10px; }
  :root[data-lateral="plegado"] .contador { position: absolute; top: 2px; right: 4px; min-width: 16px; padding: 0 4px;
    font-size: 9px; line-height: 15px; margin: 0; }
  :root[data-lateral="plegado"] .plegar { justify-content: center; margin: 0 10px 6px; padding: 8px 0; }
  :root[data-lateral="plegado"] .plegar .icono-plegar { display: none; }
  :root[data-lateral="plegado"] .plegar .icono-desplegar { display: block; }
  :root[data-lateral="plegado"] .tarjeta-neo { margin: 6px 10px 10px; padding: 12px 0; display: grid; place-items: center; }
  :root[data-lateral="plegado"] .neo-cab { font-size: 0; gap: 0; }
  :root[data-lateral="plegado"] .usuario { margin: 0 10px 14px; padding: 8px 0; justify-content: center; }
  :root[data-lateral="plegado"] .cuota { margin: 2px 10px 8px; padding: 9px 9px; }
  :root[data-lateral="plegado"] .cuota-cab { display: none; }
  :root[data-lateral="plegado"] .cuota-fila { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .plegar { display: none; }
}
@media (max-width: 680px) {
  .zoom-valor { display: none; }
  .boton-zoom { width: 26px; }
}

/* ── Documentos (la nube, D-54) ───────────────────────────────────────────────────────── */
table.docs { min-width: 0; width: 100%; }
table.docs td { vertical-align: middle; }
.doc-nombre a { display: inline-flex; align-items: center; gap: 8px; overflow-wrap: anywhere; font-weight: 500; }
.doc-nombre .ic { width: 17px; height: 17px; flex: none; color: var(--acento-texto); }
.doc-ruta { font-size: 12px; margin: 2px 0 0 25px; overflow-wrap: anywhere; }
.doc-fecha { white-space: nowrap; }
.menu-doc { position: relative; }
.menu-doc summary { list-style: none; cursor: pointer; }
.menu-doc summary::-webkit-details-marker { display: none; }
.menu-doc-caja { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: min(290px, 80vw);
  background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 12px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14); display: flex; flex-direction: column; gap: 8px; }
.subida { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.subida label.boton { cursor: pointer; }
.form.en-linea { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.form.en-linea input { flex: 1 1 200px; }
@media (max-width: 640px) { table.docs .doc-fecha { display: none; } }
.en-linea-mini { display: inline; }
.tostada.error { border-color: var(--crit-linea); background: var(--crit-fondo); }
.tostada.error .tostada-icono { background: var(--crit-texto); color: #fff; }
button.enlace { background: none; border: 0; padding: 0; color: var(--acento-texto); font: inherit; text-decoration: underline; cursor: pointer; }
:root[data-tema="noche"] .tostada.error { background: var(--crit-fondo); border-color: var(--crit-linea); }

/* ── Revisión 16-sep ─────────────────────────────────────────────────────────────────── */
/* El menú de cada documento no se corta dentro de la tabla y se abre hacia arriba al final */
.tabla-caja:has(table.docs) { overflow: visible; }
table.docs tr:nth-last-child(-n+2) .menu-doc-caja { top: auto; bottom: calc(100% + 6px); }
/* En el móvil, las columnas secundarias de las listas se esconden en vez de desbordar */
@media (max-width: 640px) {
  table.compacta { min-width: 0; }
  table.compacta .solo-ancho { display: none; }
  .aviso-meta, .celda-cliente span, .pie { color: var(--txt-2); }
}
.subiendo { opacity: .6; pointer-events: none; }
.subiendo::after { content: " · subiendo…"; }

/* ── Gestor (Pablo, 5-oct-2026): casillas de «mandado» por mes; el nombre queda fijo al deslizar ── */
table.gestor { min-width: 760px; table-layout: fixed; }   /* columnas iguales: los meses cuadran entre tablas */
table.gestor col.c-nombre { width: 200px; }
table.gestor th, table.gestor td { padding: 6px 4px; text-align: center; }
table.gestor .gestor-nombre { text-align: left; position: sticky; left: 0; background: var(--superficie); z-index: 1;
  padding-left: 10px; font-weight: 600; overflow-wrap: anywhere; }
table.gestor .casilla { width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--linea-fuerte);
  background: var(--superficie-2); color: transparent; font-size: 17px; font-weight: 700; cursor: pointer; }
table.gestor .casilla.mandado { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok-texto); }
/* No aplica ese mes (Claudio, 10-oct): ni blanca (pendiente) ni verde (mandada); gris rayada con una raya. */
table.gestor .casilla.na { border-style: dashed; border-color: var(--linea); color: var(--txt-3); font-size: 0; opacity: .7;
  background: repeating-linear-gradient(135deg, var(--superficie) 0 5px, var(--superficie-2) 5px 10px); }
table.gestor .casilla.na::before { content: "–"; font-size: 17px; }
/* Facturas de proveedores para Félix (Pablo, 4-nov-2026): una fila por factura; las mandadas, apagadas. */
table.gestor-facturas { min-width: 520px; }
table.gestor-facturas td, table.gestor-facturas th { padding: 8px 6px; vertical-align: middle; }
table.gestor-facturas .num { text-align: right; white-space: nowrap; }
table.gestor-facturas .casilla { width: 34px; height: 34px; border-radius: 9px; border: 1.5px solid var(--linea-fuerte);
  background: var(--superficie-2); color: transparent; font-size: 17px; font-weight: 700; cursor: pointer; }
table.gestor-facturas .casilla.mandado { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok-texto); }
table.gestor-facturas tr.gf-hecha td:not(:first-child) { opacity: .55; }
.gf-num { font-size: 12.5px; color: var(--txt-3); }
.gf-sinpdf { font-size: 12.5px; color: var(--txt-3); font-style: italic; }
.gf-pend { font-size: 13px; font-weight: 700; padding: 2px 10px; border-radius: 999px; margin-left: 6px; vertical-align: middle;
  color: var(--acento-texto); background: var(--acento-fondo); border: 1px solid var(--acento-linea); }
.gf-ayuda { margin: 0 0 8px; color: var(--txt-3); font-size: 13.5px; }

/* El local del pedido/factura en clientes de varios locales (Claudio, 5-oct-2026): mismo aspecto que en Mi reparto. */
.local-ref { display: inline-block; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; margin-left: 4px;
  color: var(--acento-texto); background: var(--acento-fondo); border: 1px solid var(--acento-linea); vertical-align: middle; }

/* Compartir (Claudio, 5-oct-2026): que se vea y se pueda tocar bien, separado del icono de imprimir. */
.boton-compartir { min-height: 36px; padding: 6px 12px; margin-left: 8px; font-size: 13.5px; white-space: nowrap; }

/* ── Cuentas (Pablo, 6-oct-2026): tablas compactas (casilla · concepto · día · importe), cifras en una franja ── */
.casilla-pago { margin: 0; }
.casilla-pago input[type="checkbox"] { width: 22px; height: 22px; cursor: pointer; accent-color: var(--ok); }
.cuenta-franja { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cuenta-franja > div { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--linea-fila); }
.cuenta-franja > div:first-child { border-left: none; }
.cuenta-franja span { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--txt-2); }
.cuenta-franja b { font-family: var(--mono); font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cuenta-franja small { font-size: 11px; color: var(--txt-3); }
table.cuenta-tabla { min-width: 0; }
table.cuenta-tabla th, table.cuenta-tabla td { padding: 7px 8px; font-size: 13.5px; }
table.cuenta-tabla .c-casilla { width: 34px; text-align: center; }
table.cuenta-tabla .c-dia { width: 1%; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--txt-2); }
table.cuenta-tabla .c-imp { width: 1%; text-align: right; white-space: nowrap; font-family: var(--mono); }
table.cuenta-tabla .c-concepto { overflow-wrap: anywhere; }
table.cuenta-tabla .editable { cursor: pointer; }
table.cuenta-tabla tr.pagada td:not(.c-casilla) { color: var(--txt-3); }
table.cuenta-tabla tr.vencida td { background: var(--crit-fondo); }
table.cuenta-tabla tr.cuenta-edicion td { background: var(--superficie-2); }
table.cuenta-tabla tr.cuenta-edicion form + form { margin-top: 6px; }
table.cuenta-tabla tfoot td { padding: 8px; font-weight: 700; border-top: 1px solid var(--linea-fuerte); }
table.cuenta-tabla button.discreto { padding: 2px 6px; min-height: 0; }
.marca { font-size: 10.5px; color: var(--txt-3); border: 1px solid var(--linea); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.marca.crit { color: var(--crit-texto); border-color: var(--crit-linea); }
.marca.aviso { color: var(--aviso-texto, var(--txt-2)); }
.cuenta-plegable > summary { cursor: pointer; font-size: 13.5px; color: var(--acento-texto); padding: 4px 0; }
.cuenta-plegable > form { margin-top: 8px; }
.cuenta-pos { color: var(--ok-texto); } .cuenta-neg { color: var(--crit); }
.cuenta-meses { margin: 4px 0; }
.cuenta-nota textarea { width: 100%; }
.cuenta-nota { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (max-width: 640px) {
  .cuenta-franja > div { padding: 8px; }
  .cuenta-franja b { font-size: 14.5px; }
  table.cuenta-tabla th, table.cuenta-tabla td { padding: 6px 5px; font-size: 13px; }
}
/* TO-DO (Pablo, 20-oct-2026): mismo aspecto que Cuentas */
table.todo-tabla tr.todo-hoy td { background: var(--aviso-fondo, rgba(196, 155, 85, .14)); }
table.todo-tabla tr.todo-hecha .c-concepto { text-decoration: line-through; }
/* Pantalla «Web» (Pablo, 26-oct-2026) */
.gw { display: flex; align-items: stretch; gap: 3px; height: 210px; padding-top: 4px; }
.gw-col { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.gw-col i { display: block; width: 100%; max-width: 34px; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--acento); }
.gw-finde i { opacity: .45; }
.gw-hoy i { background: repeating-linear-gradient(135deg, var(--acento) 0 3px, transparent 3px 6px); border: 1px solid var(--acento); }
.gw-n { flex: none; font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--titulo); margin-bottom: 3px; }
.gw-d { flex: none; font-family: var(--mono); font-size: 10px; color: var(--txt-2); height: 16px; line-height: 16px; margin-top: 4px; }
.gw-muchas .gw-n { font-size: 9.5px; }
.solo-movil-txt { display: none; }
@media (max-width: 680px) { .gw { gap: 2px; height: 180px; } .gw-muchas .gw-n { display: none; } .solo-movil-txt { display: inline; } }
.web-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.web-lista li { position: relative; display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px;
  border-radius: 8px; font-size: 13px; overflow: hidden; }
.web-lista li i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acento-fondo); z-index: 0; border-radius: 8px; }
.web-lista li span { position: relative; z-index: 1; }
.web-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.web-n { flex: none; font-weight: 600; }
.web-n small { color: var(--txt-2); font-weight: 500; }
.nota-web { font-size: 12px; margin: 0; }

/* «Tareas con NEO» en Avisos (Pablo, 28-oct-2026) */
.nota-neo { color: var(--txt-3); margin: 12px 0 4px; }
.seccion-neo { font-size: 1rem; margin: 18px 0 8px; }
.seccion-neo span { color: var(--txt-3); font-weight: normal; }

/* ── Facturas mensuales y trimestrales (Pablo, 30-oct-2026): F = facturado · sobre/impresora = le ha llegado · R = recibo ── */
table.seg-fac { min-width: 1240px; }
table.seg-fac.trimestral { min-width: 560px; }
table.seg-fac col.c-nombre { width: 150px; }
table.seg-fac th, table.seg-fac td { padding: 6px 2px; text-align: center; vertical-align: middle; }
/* Pablo, 30-oct-2026: en horizontal y cuadradas de una fila a otra (huecos invisibles donde falta una). */
table.seg-fac .cf { margin: 1px; }
table.seg-fac th.en-curso, table.seg-fac td.en-curso { background: var(--acento-fondo); }
table.seg-fac .seg-doc { display: block; font-weight: 400; font-size: 11.5px; color: var(--txt-3); }
table.seg-fac .local-ref { margin-left: 0; }
.cf { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 26px; margin: 1px;
  border-radius: 7px; border: 1.5px solid var(--linea-fuerte); background: var(--superficie-2); font-style: normal;
  font-size: 12.5px; font-weight: 700; color: var(--txt-3); vertical-align: middle; }
.cf .ic { width: 14px; height: 14px; }
.cf.ok { background: var(--ok-fondo); border-color: var(--ok); color: var(--ok-texto); }
.cf.mal { background: var(--crit-fondo); border-color: var(--crit); color: var(--crit-texto); }
.cf.curso, .cf.falta { background: var(--aviso-fondo); border-color: var(--aviso-linea); color: var(--aviso-texto); }
.cf.vacia { color: transparent; }
.cf.nada { border-style: dashed; border-color: var(--linea); opacity: .7;
  background: repeating-linear-gradient(135deg, var(--superficie) 0 5px, var(--superficie-2) 5px 10px); }
.celda-fac { display: inline-block; }
.celda-fac > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.celda-fila { white-space: nowrap; }
.cf.hueco { visibility: hidden; }
.celda-fac > summary::-webkit-details-marker { display: none; }
.celda-fac[open] > summary .cf { box-shadow: 0 0 0 2px var(--acento-linea); }
/* La ficha de la casilla, fija abajo: dentro de la tabla (que se desliza) se cortaba. */
.celda-pop { position: fixed; z-index: 60; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(360px, 92vw);
  max-height: 70vh; overflow: auto; padding: 12px 14px; text-align: left; font-size: 14px; background: var(--superficie);
  border: 1px solid var(--linea-fuerte); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.celda-pop .pop-cerrar { float: right; border: 0; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: var(--txt-2); }
.celda-pop p { margin: 6px 0 0; }
.celda-pop .pop-fac { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linea); }
.celda-pop form { margin-top: 6px; }
.leyenda-fac { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 4px; font-size: 12.5px; color: var(--txt-2); }
.leyenda-fac .cf { width: 20px; height: 21px; font-size: 11px; margin-right: 4px; }
.celda-pop .ok-txt { color: var(--ok-texto); font-weight: 600; }
.celda-pop .pop-cobro { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.celda-pop .pop-cobro input[type="date"] { padding: 4px 6px; }