:root {
  --violeta: var(--color-accent);
  --rosa: var(--color-accent-light);
  --navy: var(--color-dark-bg);
  --fondo: var(--color-bg);
  --tinte: var(--color-tint);
  --borde: var(--color-border);
  --texto: var(--color-ink);
  --texto-suave: var(--color-ink-muted);
  --ok: var(--color-status-good);
  --warn: var(--color-status-warning);
  --critico: var(--color-status-critical);
  --neutro-estado: var(--color-status-neutral);
  /* Escala de espaciado (shell/sidebar/header) — realineada a la escala
     general 4/8/12/16/24/32/40/56 de tokens.css (los valores no cambian,
     8/16/24/32 ya eran parte de esa escala). */
  --sp-1: var(--space-2);
  --sp-2: var(--space-4);
  --sp-3: var(--space-5);
  --sp-4: var(--space-6);
  --sidebar-w: 256px;
}
* { box-sizing: border-box; }
html { height: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.55;
  /* Shell de 2 columnas: sidebar fija a la izquierda + contenido a la derecha.
     Páginas imprimibles (sin sidebar incluida) quedan a ancho completo solas. */
  display: flex;
  align-items: stretch;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; color: var(--texto); }

/* ================= Sidebar — "Menú de herramientas" ================= */
.sidebar {
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
  background: var(--color-surface);
  border-right: 1px solid var(--borde);
  padding: var(--sp-3) var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  z-index: 30;
}
.sidebar-brand { display: flex; align-items: center; gap: var(--sp-1); padding: 0 var(--sp-1); }
.sidebar-brand-mark {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  background: var(--violeta);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 1.05rem; font-weight: 800;
}
.sidebar-brand strong { display: block; font-size: 0.85rem; line-height: 1.25; }
.sidebar-brand span { display: block; font-size: 0.68rem; color: var(--texto-suave); }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav-label {
  margin: 0 0 var(--sp-1); padding: 0 var(--sp-1);
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texto-suave);
}
.sidebar-link {
  display: flex; align-items: center; gap: var(--sp-1);
  padding: 0.6rem var(--sp-1);
  margin: 0 calc(var(--sp-1) * -1);
  border-radius: 10px;
  border-left: 3px solid transparent;
  color: var(--texto); text-decoration: none; font-size: 0.82rem; font-weight: 600;
}
.sidebar-link:hover { background: rgba(139, 92, 246, 0.08); color: var(--violeta); }
.sidebar-link.activo {
  background: var(--color-surface); color: var(--violeta); border-left-color: var(--violeta);
}

.sidebar-link-fijo {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.65rem var(--sp-1); margin: 0 calc(var(--sp-1) * -1);
  border-radius: 10px; border-left: 3px solid transparent;
  color: var(--texto); text-decoration: none; font-size: 0.86rem; font-weight: 700;
}
.sidebar-link-fijo:hover { background: rgba(139, 92, 246, 0.08); color: var(--violeta); }
.sidebar-link-fijo.activo {
  background: var(--color-surface); color: var(--violeta); border-left-color: var(--violeta);
}
.sidebar-icono { font-size: 1.1rem; line-height: 1; flex: 0 0 auto; }
.sidebar-link-fijo-icono { justify-content: center; }
.sidebar-link-fijo-icono .sidebar-icono { font-size: 1.3rem; }
.sidebar-separador { height: 1px; background: var(--borde); margin: 0.3rem calc(var(--sp-1) * -1) 0.5rem; }

.sidebar-foot { margin: 0; padding: 0 var(--sp-1); font-size: 0.66rem; color: var(--texto-suave); line-height: 1.4; }

.side-grupo { display: flex; flex-direction: column; }
.side-grupo-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.4rem;
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  background: none; border: none; padding: 0.5rem var(--sp-1) 0.3rem;
  font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texto-suave);
}
.side-grupo-head:hover { color: var(--violeta); }
.side-grupo-label { display: flex; align-items: center; gap: 0.55rem; }
.side-grupo-icono {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 8px; background: rgba(255,255,255,.1);
}
.side-grupo-icono svg { width: 14px; height: 14px; }
.ic-plan { color: #A9C4EC; }
.ic-op { color: #8FE0B3; }
.ic-met { color: #F2C083; }
.ic-sis { color: #D3D6E8; }
.side-grupo-chevron { font-size: 0.6rem; transition: transform 0.15s; }
.side-grupo-head[aria-expanded="false"] .side-grupo-chevron { transform: rotate(-90deg); }
.side-grupo + .side-grupo { margin-top: 1rem; }
.side-grupo-body { display: flex; flex-direction: column; gap: 2px; margin-bottom: 0.5rem; padding-left: 2.5rem; }
.side-grupo-body[hidden] { display: none; }

/* Botón hamburguesa + fondo, ocultos en escritorio */
.sidebar-toggle {
  display: none;
  position: fixed; top: var(--sp-2); left: var(--sp-2); z-index: 40;
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--borde);
  background: var(--color-surface); box-shadow: var(--shadow-float);
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  cursor: pointer; padding: 0;
}
.sidebar-toggle span { display: block; width: 18px; height: 2px; background: var(--texto); border-radius: 2px; }
.sidebar-backdrop { display: none; }

/* ================= Columna principal ================= */
.app-main { flex: 1 1 auto; min-width: 0; }

header.top {
  background: var(--color-surface);
  border-bottom: 1px solid var(--borde);
  padding: var(--sp-3) var(--sp-4);
}
header.top .crumb { font-size: 0.72rem; color: var(--texto-suave); margin: 0 0 var(--sp-1); letter-spacing: 0.02em; }
header.top h1 { margin: 0 0 var(--sp-1); font-size: var(--text-screen); line-height: 1.2; }
/* Responsive: la sidebar pasa a off-canvas con botón hamburguesa */
@media (max-width: 880px) {
  body { display: block; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; height: 100vh;
    width: min(var(--sidebar-w), 82vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 18px rgba(0, 0, 0, 0.2);
  }
  .sidebar.abierta { transform: translateX(0); }
  .sidebar-toggle { display: flex; }
  .sidebar-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35);
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 25;
  }
  .sidebar-backdrop.visible { opacity: 1; pointer-events: auto; }
  .app-main { width: 100%; }
  header.top { padding-left: calc(var(--sp-4) + 44px); }
}

/* Calendario de referencia (Catálogo) — ahora vive arriba del contenido, no en el header */
.cal-dock { display: flex; justify-content: flex-end; margin-bottom: var(--sp-3); }
.cal {
  flex: 0 0 240px;
  width: 240px;
  background: var(--color-surface);
  border: 1px solid var(--borde);
  border-radius: var(--radius-card);
  padding: 0.6rem 0.75rem 0.5rem;
}
.cal-head {
  text-align: center;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--violeta);
  margin-bottom: 0.35rem;
}
.cal-head::first-letter { text-transform: uppercase; }
.cal-grid { width: 100%; border-collapse: collapse; font-size: 0.72rem; table-layout: fixed; }
.cal-grid th {
  text-align: center;
  padding: 0.2rem 0;
  border: none;
  color: var(--texto-suave);
  font-weight: 600;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0;
}
.cal-grid td {
  text-align: center;
  padding: 0.24rem 0;
  border: none;
  color: var(--texto);
}
.cal-grid td.vacio { color: transparent; }
.cal-grid td.hoy {
  background: var(--violeta);
  color: #fff;
  border-radius: 6px;
  font-weight: 700;
}
.cal-nota {
  margin: 0.4rem 0 0;
  text-align: center;
  font-size: 0.64rem;
  color: var(--texto-suave);
  font-style: italic;
}
main { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }
.panel {
  background: var(--color-surface); border: 1px solid var(--borde); border-radius: var(--radius-card);
  padding: 1rem 1.25rem; margin-bottom: 1.25rem;
}
.panel h2 { margin: 0 0 0.6rem; font-size: var(--text-section); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-table); }
th, td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--borde); }
th { color: var(--texto-suave); font-weight: 600; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.02em; }
a.link-producto { color: var(--violeta); text-decoration: none; font-weight: 600; }
a.link-producto:hover { text-decoration: underline; }
a.volver { color: var(--texto-suave); text-decoration: none; font-size: 0.82rem; }
.chip { display: inline-block; font-size: var(--text-xs); font-weight: 700; padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); }
a.chip { text-decoration: none; }
a.chip:hover { filter: brightness(0.95); }
.chip.sin-clasificar { background: var(--color-tint-warning); color: var(--warn); }
.chip.clasificado { background: var(--tinte); color: var(--violeta); }
/* Chips extra para la validación de muestra del Estudio de Tiempos */
.chip.ok { background: var(--color-tint-good); color: var(--ok); }
.chip.neutro { background: var(--color-surface-muted); color: var(--texto-suave); }
h3.sub { font-size: var(--text-subtitle); margin: 0 0 0.4rem; }
.bloque-etapa { margin-bottom: 1.1rem; }
.bloque-etapa:last-child { margin-bottom: 0; }
ul.atipicos { margin: 0.2rem 0 0.5rem 1.1rem; padding: 0; font-size: var(--text-table); }
/* El plano viene dibujado al revés del layout oficial del área: se gira 180° (grupo .plano-giro, atributo en el
   propio SVG) y cada rótulo DE ESE GRUPO se endereza sobre su propio centro, para que quede legible. */
.plano-svg-inner .plano-giro text, .plano-svg-inner .plano-giro tspan {
  transform: rotate(180deg);
  transform-box: fill-box;
  transform-origin: center;
}
.plano-svg-inner .plano-giro .titulo-plano text, .plano-svg-inner .plano-giro .titulo-plano tspan {
  transform: none;
}

/* Mini-cronograma de la propuesta de reprogramación: cómo queda cada día/espacio que el plan toca.
   Prefijo "repro-cal" (no "mini-cal": ese nombre ya lo usa el calendario mensual de otra pantalla). */
.repro-cal { display: flex; flex-direction: column; gap: 1.1rem; margin: 0.8rem 0 1.2rem; }
.repro-cal-fila { display: flex; flex-direction: column; gap: 0.3rem; }
.repro-cal-titulo { font-size: var(--text-xs); font-weight: 700; color: var(--texto-suave); text-transform: uppercase; }
.repro-cal-eje { position: relative; height: 42px; margin-top: 1.1rem; background: var(--color-surface-muted); border: 1px solid var(--borde); border-radius: var(--radius-card); }
.repro-cal-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--borde); }
.repro-cal-tick span { position: absolute; top: -1.15rem; left: 2px; font-size: 10px; color: var(--texto-suave); white-space: nowrap; }
.repro-cal-limite { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--warn); opacity: 0.55; }
.repro-cal-bloque {
  position: absolute; top: 5px; bottom: 5px; min-width: 3px; border-radius: 6px; overflow: hidden; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; color: #fff; display: flex; align-items: center; padding: 0 0.3rem;
}
.repro-cal-bloque.sin_cambio { background: var(--color-status-neutral); }
.repro-cal-bloque.demora, .repro-cal-bloque.mismo_dia, .repro-cal-bloque.adelanta { background: var(--ok); }
.repro-cal-bloque.otro_espacio, .repro-cal-bloque.otro_dia { background: var(--violeta); }
.repro-cal-bloque.turno_extra { background: var(--warn); }
.repro-cal-bloque.evento { background: var(--color-status-critical); }
.repro-cal-leyenda { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-size: var(--text-xs); color: var(--texto-suave); }
.repro-cal-leyenda i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.3rem; vertical-align: -1px; }

/* Mini-cronograma de la propuesta de asignación óptima de técnicos: cómo le queda la semana a cada uno. */
.asig-cal-leyenda { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-size: var(--text-xs); color: var(--texto-suave); margin-top: 0.5rem; }
.asig-cal-leyenda i { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.3rem; vertical-align: -1px; }
.asig-cal { display: flex; flex-direction: column; gap: 0.3rem; margin: 0.5rem 0 1.1rem; }
.asig-cal-fila { display: flex; align-items: center; gap: 0.6rem; }
.asig-cal-nombre { width: 7.5rem; flex: 0 0 7.5rem; font-size: var(--text-xs); font-weight: 700; color: var(--texto-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asig-cal-eje { position: relative; flex: 1 1 auto; height: 26px; background: var(--color-surface-muted); border: 1px solid var(--borde); border-radius: 7px; }
.asig-cal-eje-head { height: 1.1rem; background: none; border: none; }
.asig-cal-dia { position: absolute; top: 0; font-size: 10px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; white-space: nowrap; }
.asig-cal-sep { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--borde); }
.asig-cal-bloque {
  position: absolute; top: 3px; bottom: 3px; min-width: 3px; border-radius: 5px; overflow: hidden; white-space: nowrap;
  font-size: 10px; font-weight: 700; color: #fff; display: flex; align-items: center; padding: 0 0.25rem;
}
.asig-cal-bloque.igual { background: var(--color-status-neutral); }
.asig-cal-bloque.cambia { background: var(--violeta); }

.escenario-modo { display: flex; align-items: center; gap: 0.6rem; margin: 0.2rem 0 0.8rem; font-size: 0.85rem; }
.escenario-caja { border: 1px solid var(--violeta); background: var(--tinte); border-radius: var(--radius-card); padding: 0.8rem 0.9rem; margin-bottom: 0.9rem; }
.escenario-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.tablero-bloque.bloque-probado { box-shadow: 0 0 0 2px var(--violeta), 0 0 0 4px var(--color-surface); }

.dlg-impacto { border: none; border-radius: var(--radius-card); padding: 1.2rem 1.3rem; max-width: 46rem; width: calc(100% - 2rem); box-shadow: 0 18px 50px rgba(31, 35, 71, 0.22); }
.dlg-impacto::backdrop { background: rgba(31, 35, 71, 0.35); }
.dlg-impacto h3 { margin: 0 0 0.6rem; font-size: var(--text-subtitle); }
.dlg-impacto #imp-mov { margin: 0 0 0.6rem; }
.dlg-impacto #imp-avisos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.7rem; }
.dlg-impacto #imp-avisos .msg { flex: 1 0 100%; margin: 0.2rem 0 0; }
.dlg-impacto .tabla-scroll { max-height: 40vh; }
.dlg-acciones { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }

.pedidos-accion-principal { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 0.9rem; }

.tablero { width: 100%; border-collapse: separate; border-spacing: 4px; }
.tablero th { font-size: var(--text-xs); color: var(--texto-suave); text-transform: uppercase; text-align: left; }
.tablero-lbl { white-space: nowrap; font-weight: 700; padding-right: 0.5rem; }
.tablero-celda { border: 1px dashed var(--borde); border-radius: 8px; padding: 3px; height: 58px; vertical-align: middle; min-width: 118px; }
/* las dos áreas van en el MISMO tablero para poder arrastrar de una a la otra; el encabezado separa los bloques */
.tablero-area th { padding: 0.5rem 0 0.1rem; font-size: 0.82rem; font-weight: 700; color: var(--violeta); letter-spacing: 0.02em; }
.tablero-hora { font-size: 9.5px; font-weight: 700; opacity: 0.95; letter-spacing: 0.01em; }
.tablero-celda.ocupada { border-style: solid; }
.tablero-celda.bloqueada { background: var(--color-surface-muted); border-style: solid; text-align: center; }
.tablero-celda.libre { text-align: center; }
.tablero-libre { font-size: 10px; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.tablero-celda.destino { border-color: var(--violeta); background: var(--tinte); }
.tablero-celda.encima { border-color: var(--violeta); background: var(--color-tint); box-shadow: inset 0 0 0 2px var(--violeta); }
.tablero-bloque {
  display: flex; flex-direction: column; gap: 1px; border-radius: 6px; padding: 0.3rem 0.4rem; cursor: grab;
  color: #fff; font-size: 11px; line-height: 1.25; user-select: none;
}
.tablero-bloque span { font-size: 10px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tablero-bloque:active { cursor: grabbing; }
.tablero-bloque.arrastrando { opacity: 0.45; }
.tablero-bloque.elegido { outline: 2px solid var(--ink, #1F2347); outline-offset: 2px; }

/* Tarjetas de disparador del asistente de reprogramación (paso 1: ¿qué pasó?). */
.disparador-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.7rem; }
.disparador {
  display: flex; flex-direction: column; gap: 0.3rem; text-align: left; text-decoration: none; color: inherit;
  border: 1px solid var(--borde); border-radius: var(--radius-card); padding: 0.9rem 1rem; background: var(--color-surface);
  font: inherit; cursor: pointer; transition: transform 0.15s, border-color 0.15s;
}
.disparador:hover { transform: translateY(-1px); border-color: var(--violeta); }
.disparador-t { font-weight: 700; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.7rem; }
.kpi-mas { margin-top: 0.8rem; }
.kpi-mas-resumen { cursor: pointer; font-weight: 700; font-size: 0.82rem; color: var(--violeta); list-style: none; }
.kpi-mas-resumen::-webkit-details-marker { display: none; }
.kpi-mas-resumen::before { content: "+ "; }
.kpi-mas[open] .kpi-mas-resumen::before { content: "− "; }
.stat { border: 1px solid var(--borde); border-radius: var(--radius-card); padding: 0.6rem 0.7rem; }
.stat .v { font-size: var(--text-subtitle); font-weight: 700; }
.stat .l { font-size: var(--text-xs); color: var(--texto-suave); text-transform: uppercase; }
.stat-kpi { border: none; box-shadow: var(--shadow-card); padding: 1.1rem 1.25rem; display: flex; flex-direction: column; gap: 0.3rem; }
.stat-kpi .l { font-size: 0.7rem; letter-spacing: 0.04em; font-weight: 700; order: -1; }
.stat-kpi .v { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; }
.stat-tendencia { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 700; width: fit-content; }
.stat-tendencia svg { width: 11px; height: 11px; }
.stat-tendencia.tendencia-sube { color: var(--color-status-good); }
.stat-tendencia.tendencia-baja { color: var(--color-status-critical); }
.destacado { border: 1px solid var(--violeta); background: var(--tinte); }

.carga-tec-lista { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; }
.carga-tec-fila { display: grid; grid-template-columns: minmax(90px, 140px) 1fr 80px; gap: 0.7rem; align-items: center; }
.carga-tec-nombre { font-size: 0.8rem; font-weight: 600; }
.carga-tec-barra { position: relative; height: 14px; background: var(--color-surface-muted); border-radius: var(--radius-pill); overflow: hidden; }
.carga-tec-relleno { position: absolute; inset: 0; width: 0; background: var(--ok); border-radius: var(--radius-pill); }
.carga-tec-relleno.sobrecarga { background: var(--warn); }
.carga-tec-valor { font-size: 0.75rem; color: var(--texto-suave); text-align: right; white-space: nowrap; }
@media (max-width: 640px) { .carga-tec-fila { grid-template-columns: 1fr; } .carga-tec-valor { text-align: left; } }
a.stat { display: block; text-decoration: none; color: inherit; transition: transform 0.15s; }
a.stat:hover { transform: translateY(-1px); }
.stat-alerta { border: 1px solid var(--color-border-warning); background: var(--color-tint-warning); }
.stat-alerta .v { color: var(--warn); }
.aviso { font-size: 0.82rem; color: var(--texto-suave); font-style: italic; }

.info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%; flex: 0 0 auto;
  background: var(--tinte); color: var(--violeta); font-size: 0.66rem; font-weight: 700;
  font-style: normal; cursor: help; vertical-align: middle; margin-left: 0.3rem;
}
.nc { color: var(--texto-suave); font-style: italic; }

.spark-svg { display: block; margin-top: 0.3rem; overflow: visible; }
.spark-linea { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark-punto { fill: var(--color-accent); cursor: default; }
.spark-punto.actual { stroke: var(--color-surface); stroke-width: 1.5; }

.mini-barras { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 0.3rem; }
.mini-barras .mini-barra {
  flex: 1 1 auto; min-width: 6px; min-height: 2px; border-radius: 2px 2px 0 0; cursor: default;
  background: color-mix(in srgb, var(--color-accent) 35%, var(--color-surface-muted));
}
.mini-barras .mini-barra.actual { background: var(--color-accent); }

.barra-vs-promedio {
  position: relative; height: 0.5rem; background: var(--color-surface-muted);
  border-radius: var(--radius-pill); margin-top: 0.35rem; cursor: default;
}
.barra-vs-promedio .relleno { position: absolute; top: 0; left: 0; bottom: 0; border-radius: var(--radius-pill); background: var(--color-accent); }
.barra-vs-promedio .marca-promedio { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--color-ink-muted); }

/* ---- Panel principal (dashboard) ---- */
.panel-tight { margin-bottom: 0.8rem; padding: 0.8rem 1.1rem; }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; }
.dash-card {
  display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none;
  background: var(--color-surface); border: 1px solid var(--borde); border-radius: var(--radius-card);
  padding: 0.6rem 0.5rem; transition: border-color 0.15s, transform 0.15s;
}
.dash-card:hover { border-color: var(--violeta); transform: translateY(-2px); }
.dash-card strong { font-size: 0.82rem; color: var(--texto); }
.dash-card span.d { font-size: 0.74rem; color: var(--texto-suave); }
.dash-grid-fila { grid-template-columns: repeat(6, 1fr); gap: 0.5rem; }
.dash-grid-fila .dash-card { text-align: center; align-items: center; }
.dash-grid-fila .dash-card {
  border-top: 3px solid var(--accent, var(--violeta));
  background: var(--color-surface);
}
.dash-grid-fila .dash-card:nth-child(6n+1) { --accent: var(--violeta); }
.dash-grid-fila .dash-card:nth-child(6n+2) { --accent: color-mix(in srgb, var(--violeta) 80%, var(--rosa) 20%); }
.dash-grid-fila .dash-card:nth-child(6n+3) { --accent: color-mix(in srgb, var(--violeta) 60%, var(--rosa) 40%); }
.dash-grid-fila .dash-card:nth-child(6n+4) { --accent: color-mix(in srgb, var(--violeta) 40%, var(--rosa) 60%); }
.dash-grid-fila .dash-card:nth-child(6n+5) { --accent: color-mix(in srgb, var(--violeta) 20%, var(--rosa) 80%); }
.dash-grid-fila .dash-card:nth-child(6n+6) { --accent: var(--rosa); }
.dash-grid-fila .dash-card:hover { border-top-color: var(--accent, var(--violeta)); }
@media (max-width: 720px) { .dash-grid-fila { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px) { .dash-grid-fila { grid-template-columns: repeat(2, 1fr); } }

.tendencia { font-size: 0.68rem; font-weight: 700; margin-top: 0.15rem; }
.tendencia-alta { color: var(--rosa); }
.tendencia-baja { color: var(--ok); }

.seg-bar { display: flex; width: 100%; height: 1.4rem; border-radius: 7px; overflow: hidden; border: 1px solid var(--borde); }
.seg-bar > div { display: flex; align-items: center; justify-content: center; font-size: 0.64rem; font-weight: 700; color: #fff; overflow: hidden; white-space: nowrap; }
.seg-valida { background: var(--ok); }
.seg-insuficiente { background: var(--warn); }
.seg-unica { background: var(--neutro-estado); }
.seg-sin_tomas {
  color: var(--texto-suave);
  background: repeating-linear-gradient(45deg, var(--color-surface-muted), var(--color-surface-muted) 4px, var(--borde) 4px, var(--borde) 8px);
}
.seg-leyenda { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; margin-top: 0.5rem; font-size: 0.72rem; color: var(--texto-suave); }
.seg-leyenda .pt { width: 9px; height: 9px; border-radius: 3px; display: inline-block; margin-right: 0.3rem; }
.seg-leyenda .pt-valida { background: var(--ok); }
.seg-leyenda .pt-insuficiente { background: var(--warn); }
.seg-leyenda .pt-unica { background: var(--neutro-estado); }
.seg-leyenda .pt-sintomas {
  background: repeating-linear-gradient(45deg, var(--color-surface-muted), var(--color-surface-muted) 3px, var(--borde) 3px, var(--borde) 6px);
  border: 1px solid var(--borde);
}

.cal-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cal-semana-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; text-align: center; min-height: 3.6rem; position: relative; }
.cal-semana-n { font-size: 1.2rem; font-weight: 700; color: var(--texto); }
.cal-clickeable { cursor: pointer; }
.cal-detalle-panel {
  position: relative; margin-top: 0.7rem; text-align: left;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
  padding: 0.7rem 0.8rem; font-size: 0.78rem; font-style: normal; white-space: normal;
}
.cal-detalle-item { padding: 0.3rem 0; border-top: 1px dashed var(--borde); }
.cal-detalle-item:first-child { margin-top: 0.3rem; }
.cal-detalle-link { display: inline-block; margin-top: 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--violeta); text-decoration: none; }
.cal-detalle-link:hover { text-decoration: underline; }
.cal-detalle-cerrar {
  position: absolute; top: 0.5rem; right: 0.6rem; border: none; background: none;
  font-size: 1.1rem; line-height: 1; color: var(--texto-suave); cursor: pointer; padding: 0.1rem 0.3rem;
}
.cal-detalle-cerrar:hover { color: var(--texto); }

/* ---- Análisis del proceso: pestañas Diagrama de Proceso / Cursograma Analítico ---- */
.tabs { display: flex; gap: 0.25rem; border-bottom: 1px solid var(--borde); margin-bottom: 1rem; }
.tab {
  appearance: none; border: none; background: none; cursor: pointer;
  font: inherit; color: var(--texto-suave);
  padding: 0.5rem 0.9rem; border-bottom: 2px solid transparent;
  margin-bottom: -1px; border-radius: 8px 8px 0 0;
}
.tab:hover { color: var(--texto); background: var(--tinte); }
.tab.activo { color: var(--violeta); border-bottom-color: var(--violeta); font-weight: 700; }
.tabla-scroll { overflow-x: auto; position: relative; }   /* relative: los interruptores y los textos ocultos (position:absolute) de adentro no deben ensanchar la página en el celular */

/* Diagrama de Proceso: lista numerada de los 12 pasos */
ol.diagrama { list-style: none; margin: 0; padding: 0; }
.paso { display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px solid var(--borde); }
.paso:last-child { border-bottom: none; }
.paso-num {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 999px;
  background: var(--violeta); color: #fff;
  font-size: 0.78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.simbolo-oit {
  flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border: 1px solid var(--borde);
  border-radius: 6px; display: flex; align-items: center; justify-content: center;
  font-size: 0.95rem; color: var(--violeta); background: var(--tinte);
}
.paso-desc { font-size: 0.9rem; }
.paso-meta { display: block; font-size: 0.72rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.02em; margin-top: 0.15rem; }

/* Cursograma Analítico: marca en la columna del símbolo */
table.cursograma th.marca, table.cursograma td.marca { text-align: center; }
table.cursograma td.marca { color: var(--violeta); font-size: 0.9rem; }
table.cursograma th { text-align: center; }
table.cursograma th:nth-child(-n+3) { text-align: left; }
/* Los chips de valor añadido (TVA / TNVA / TNVAN) reutilizan .chip.ok /
   .chip.neutro / .chip.sin-clasificar ya definidos arriba. */

/* ================= Ficha de Ingeniería de Métodos (1 pantalla, 3 pestañas) ================= */

/* Tabla de cabecera 2 columnas (etiqueta / valor) x N filas */
.meta-ficha { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.84rem; }
.meta-ficha th {
  text-align: left; background: var(--color-surface-muted); color: var(--texto-suave);
  font-weight: 600; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.02em;
  width: 14%; padding: 0.45rem 0.6rem; border: 1px solid var(--borde); vertical-align: top;
}
.meta-ficha td { padding: 0.45rem 0.6rem; border: 1px solid var(--borde); width: 36%; vertical-align: top; }
.meta-ficha-input {
  font: inherit; font-size: 0.84rem; border: none; border-bottom: 1px dashed var(--borde);
  background: transparent; padding: 0.1rem 0.2rem; width: 100%; color: var(--texto);
}
.meta-ficha-input:focus { border-bottom-color: var(--violeta); outline: none; }
.punto-cat { display: inline-block; width: 9px; height: 9px; border-radius: var(--radius-pill); margin-right: 6px; vertical-align: middle; background: var(--texto-suave); }
.punto-liquido { background: var(--color-accent); }
.punto-solido { background: var(--warn); }
.punto-semisolido { background: var(--ok); }

/* --- Pestaña 1: Descripción de actividad + swimlanes --- */
.diagrama-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .diagrama-2col { grid-template-columns: 1fr; } }
.flujo { min-width: 0; }
.desc-actividad { border: 1px solid var(--borde); border-radius: 10px; padding: 0.6rem 0.85rem; }
.desc-actividad-full { margin-bottom: 1rem; }
.desc-lista { list-style: none; margin: 0; padding: 0; }
.desc-item { display: flex; gap: 0.6rem; padding: 0.5rem 0; border-bottom: 1px solid var(--borde); }
.desc-item:last-child { border-bottom: none; }
.desc-rotulo {
  flex: 0 0 auto; width: 1.5rem; height: 1.5rem; border-radius: 6px;
  background: var(--tinte); color: var(--violeta); font-weight: 700; font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
}
.desc-item.es-decision .desc-rotulo { background: var(--color-tint-warning); color: var(--warn); }
.desc-titulo { margin: 0; font-weight: 600; font-size: 0.82rem; color: var(--violeta); }
.desc-item.es-decision .desc-titulo { color: var(--warn); }
.desc-parrafo { margin: 0.15rem 0 0; font-size: 0.79rem; color: var(--texto-suave); }

/* --- Diagrama de Proceso como flujo real (SVG) --- */
.dp-svg-scroll { border: 1px solid var(--borde); border-radius: 10px; overflow: auto; max-height: 720px; }
.dp-svg { display: block; min-width: 640px; }
.dp-lane-bg { fill: var(--fondo); stroke: var(--borde); stroke-width: 1; }
.dp-lane-titulo { fill: var(--texto-suave); font-size: 11px; font-weight: 700; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.02em; }
.dp-flecha { fill: none; stroke: var(--violeta); stroke-width: 2; }
.dp-flecha-no { stroke: var(--rosa); }
.dp-flecha-loop { stroke: var(--rosa); stroke-dasharray: 4 3; }
.dp-rama-label { font-size: 11px; font-weight: 700; }
.dp-rama-si { fill: var(--ok); }
.dp-rama-no { fill: var(--rosa); }
.dp-nodo-terminal { fill: var(--navy); }
.dp-terminal-txt { fill: var(--color-surface); font-size: 11px; font-weight: 700; text-anchor: middle; }
.dp-nodo-decision { fill: var(--color-tint-warning); stroke: var(--warn); stroke-width: 1.5; }
.dp-decision-txt { fill: var(--warn); font-size: 11px; font-weight: 700; text-anchor: middle; }
.dp-decision-sub { font-size: 9px; font-weight: 600; }
.dp-nodo-paso { fill: var(--color-surface); stroke: var(--borde); stroke-width: 1.5; }
.dp-nodo-num {
  fill: var(--violeta); font-size: 11px; font-weight: 700; text-anchor: middle;
}
.dp-nodo-txt { fill: var(--texto); font-size: 10.5px; }
.dp-nodo-retenido { fill: var(--color-tint-warning); stroke: var(--rosa); stroke-width: 1.5; stroke-dasharray: 3 2; }
.dp-retenido-txt { fill: var(--rosa); font-weight: 700; text-anchor: middle; }

/* --- Pestaña 2: Cursograma Analítico --- */
.leyenda { font-size: 0.8rem; color: var(--texto-suave); margin: 0.2rem 0 0.8rem; }
.leyenda .sim { color: var(--violeta); font-weight: 700; }
/* Línea de conexión estándar del Cursograma Analítico (Ingeniería de
   Métodos/OIT): un SVG por fila, detrás de los símbolos, que se estira sólo
   al alto real de esa fila (preserveAspectRatio="none" en el SVG) — como
   sólo dibuja tramos horizontales/verticales, estirarlo no lo deforma. */
td.td-conector { position: relative; padding-top: 0; padding-bottom: 0; min-width: 5.6rem; }
.simbolos-conector { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: 0; }
.simbolos-conector path { fill: none; stroke: var(--violeta); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.simbolos-mini { position: relative; z-index: 1; display: inline-flex; gap: 0.15rem; align-items: center; }
.simbolos-mini span { position: relative; width: 1.1rem; text-align: center; color: var(--color-border); font-size: 0.8rem; background: var(--color-surface); }
.simbolos-mini span.on { color: var(--violeta); font-weight: 700; }
table.cursograma-full { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 860px; }
table.cursograma-full td:first-child { border-left: 4px solid var(--borde); }
tr.lane-supervisor-de-pesaje td:first-child { border-left-color: var(--violeta); }
tr.lane-auxiliar-de-almacén  td:first-child { border-left-color: var(--rosa); }
tr.lane-operario-de-pesaje   td:first-child { border-left-color: var(--ok); }
tr.lane-analista-de-pesaje   td:first-child { border-left-color: var(--warn); }
tr.lane-auxiliar-de-pesaje   td:first-child { border-left-color: var(--critico); }
tr.fila-decision td { background: var(--tinte); }
tr.fila-foco td { box-shadow: inset 3px 0 0 var(--violeta); font-weight: 700; }
.cursograma-full .obs { color: var(--texto-suave); font-size: 0.78rem; }

.resumen-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; margin-top: 1rem; }
@media (max-width: 820px) { .resumen-2col { grid-template-columns: 1fr; } }
.panel-sub { border: 1px solid var(--borde); border-radius: 10px; padding: 0.7rem 0.9rem; }
tr.fila-total td { font-weight: 700; border-top: 2px solid var(--borde); }
table.mini td { padding: 0.35rem 0.5rem; }
.bullet { display: inline-block; width: 8px; height: 8px; border-radius: 999px; margin-right: 6px; background: var(--texto-suave); }
.bullet-operacion { background: var(--violeta); }
.bullet-transporte { background: var(--rosa); }
.bullet-espera { background: var(--warn); }
.bullet-inspeccion { background: var(--ok); }
.bullet-almacenamiento { background: var(--texto-suave); }
.bullet-total { background: var(--navy); }

/* --- Pestaña 3: Estudio de Tiempos (tarjetas + secuencia) --- */
.badges-linea { font-size: 0.85rem; }
.secuencia { display: flex; align-items: stretch; gap: 0.6rem; flex-wrap: wrap; }
.secuencia .stat { flex: 1 1 170px; }
.flecha { color: var(--violeta); font-size: 1.3rem; font-weight: 700; align-self: center; }

.pipeline-et { display: flex; align-items: stretch; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.pipeline-paso {
  flex: 1 1 130px; border: 1px solid var(--borde); border-radius: var(--radius-card);
  padding: 0.5rem 0.6rem; text-align: center; background: var(--color-surface);
}
.pipeline-paso.destacado { border-color: var(--violeta); background: var(--tinte); }
.pipeline-paso .v { font-size: 1rem; font-weight: 700; }
.pipeline-paso .l { font-size: 0.66rem; color: var(--texto-suave); text-transform: uppercase; margin-top: 0.15rem; }
.input-lotes { width: 4rem; padding: 0.2rem 0.35rem; border: 1px solid var(--borde); border-radius: 6px; font: inherit; }
.nota-mini { display: block; font-size: 0.72rem; color: var(--texto-suave); font-style: italic; }

/* La navegación horizontal (.nav / _nav.html) quedó reemplazada por la
   sidebar (.sidebar-* / _sidebar.html) — ver arriba. Reglas retiradas. */

/* ================= Balanceo de Líneas ================= */
.bal-barras { display: flex; flex-direction: column; gap: 0.9rem; }
.bal-row { display: grid; grid-template-columns: minmax(160px, 220px) 1fr; gap: 0.8rem; align-items: center; }
@media (max-width: 720px) { .bal-row { grid-template-columns: 1fr; } }
.bal-row.es-cuello .bal-label strong { color: var(--violeta); }
.bal-label { font-size: 0.83rem; display: flex; flex-direction: column; gap: 0.1rem; }
.bal-label .nc { font-size: 0.74rem; }
.bal-track {
  display: flex; height: 1.9rem; border: 1px solid var(--borde); border-radius: 8px;
  overflow: hidden; background: var(--fondo);
}
.bal-activo {
  background: var(--violeta); color: #fff;
  font-size: 0.72rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  white-space: nowrap; min-width: 0;
}
.bal-activo.maquina { background: var(--color-accent-light); }
.bal-ocio {
  background: repeating-linear-gradient(45deg, var(--color-surface-muted), var(--color-surface-muted) 6px, var(--color-border) 6px, var(--color-border) 12px);
  color: var(--texto-suave); font-size: 0.7rem; font-style: italic;
  display: flex; align-items: center; justify-content: center; white-space: nowrap; min-width: 0;
}

/* ================= Cronograma / Programación de Espacios ================= */
.msg { border-radius: var(--radius-control); padding: 0.6rem 0.9rem; font-size: 0.86rem; margin: 0 0 1rem; }
.msg-ok { background: var(--color-tint-good); color: var(--ok); border: 1px solid var(--color-border-good); }
.msg-conflicto { background: var(--color-tint-critical); color: var(--critico); border: 1px solid var(--color-border-critical); }
.msg-error { background: var(--color-tint-warning); color: var(--warn); border: 1px solid var(--color-border-warning); }

.dia-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.4rem 0 0.9rem; }
.dia-tabs a {
  font-size: 0.8rem; font-weight: 600; text-decoration: none; color: var(--texto-suave);
  padding: 0.28rem 0.7rem; border: 1px solid var(--borde); border-radius: 999px;
}
.dia-tabs a:hover { background: var(--tinte); color: var(--violeta); }
.dia-tabs a.actual { background: var(--tinte); color: var(--violeta); border-color: var(--violeta); }

.grid-semana {
  display: grid;
  grid-template-columns: 92px repeat(var(--cols), minmax(120px, 1fr));
  gap: 4px; overflow-x: auto; align-items: stretch;
}
.gs-corner { background: transparent; }
.gs-colhead {
  background: var(--color-surface-muted); color: var(--texto-suave);
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 0.4rem 0.45rem; border-radius: var(--radius-control); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
}
.gs-rowhead {
  background: var(--color-surface-muted); color: var(--texto-suave);
  font-size: 0.72rem; font-weight: 700; padding: 0.4rem 0.45rem; border-radius: var(--radius-control);
  display: flex; align-items: center;
}
.gs-cell { background: var(--fondo); border: 1px solid var(--borde); border-radius: 8px; padding: 0.35rem; min-height: 3rem; }
.gs-cell.ocupado { background: var(--tinte); border-color: var(--violeta); }

.gs-almuerzo-rowhead, .gs-almuerzo-cell {
  background: repeating-linear-gradient(45deg, var(--color-surface-muted), var(--color-surface-muted) 5px, var(--color-border) 5px, var(--color-border) 10px);
  border-radius: var(--radius-control); min-height: 1.5rem;
}
.gs-almuerzo-rowhead {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 0.62rem; font-weight: 700; color: var(--texto-suave); padding: 0.2rem;
}
.gs-rowhead.gs-rowhead-multilinea { flex-direction: column; align-items: flex-start; gap: 0.1rem; }
.gs-rowhead-turno-extra {
  font-size: 0.58rem; font-weight: 700; color: var(--warn); text-transform: none;
  letter-spacing: normal;
}
.slot-card {
  background: var(--color-surface); border: 1px solid var(--borde); border-radius: var(--radius-control);
  padding: 0.35rem 0.45rem; margin-bottom: 0.35rem; font-size: 0.78rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.slot-card:last-child { margin-bottom: 0; }
.slot-card .nc { font-size: 0.72rem; }
.slot-card .chip { align-self: flex-start; }

.tarjeta-caja {
  display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start;
  border: 1px solid var(--borde); border-left-width: 3px; border-radius: var(--radius-control);
  padding: 0.3rem 0.45rem; background: var(--color-surface-muted);
}
.caja-titulo { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-suave); }
.caja-producto { border-left-color: var(--violeta); }
.caja-pesaje { border-left-color: var(--rosa); }
.caja-limpieza { border-left-color: color-mix(in srgb, var(--violeta) 50%, var(--rosa)); }
.caja-turno-extra { border-left-color: var(--warn); background: var(--color-tint-warning); }
.slot-card .tarjeta-caja .chip { align-self: flex-start; }

/* Versión condensada de las mismas 4 cajas para la grilla semanal del Panel
   Principal (celda compacta con detalle completo en el popover). */
.cal-caja-cond {
  display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.62rem;
  font-weight: 700; padding: 0.05rem 0.35rem; border-radius: var(--radius-pill);
  border: 1px solid var(--borde); border-left-width: 2.5px; background: var(--color-surface);
}
.cal-detalle-item .tarjeta-caja { margin-top: 0.3rem; }

.form-inline { display: flex; flex-wrap: wrap; gap: 0.7rem 0.9rem; align-items: flex-end; }
.form-inline label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.75rem; color: var(--texto-suave); font-weight: 600; }
.campo-condicional[hidden] { display: none; }
.campo-duracion-fila { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: flex-end; }
.form-inline select, .form-inline input {
  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.4rem;
  border: 1px solid var(--borde); border-radius: var(--radius-control); background: var(--color-surface); color: var(--texto);
}
.form-inline button {
  font: inherit; font-weight: 700; font-size: 0.82rem; cursor: pointer;
  padding: 0.4rem 1rem; border: none; border-radius: var(--radius-control);
  background: var(--violeta); color: #fff;
}
.form-inline button:hover { filter: brightness(1.05); }

/* ================= Técnicos ================= */
.tec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.8rem; }
.tec-card {
  border: 1px solid var(--borde); border-radius: var(--radius-card); padding: 0.8rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.5rem; background: var(--color-surface);
}
.tec-card.sobrecargado { border-color: var(--warn); background: var(--color-tint-warning); }
a.tec-card { text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; }
a.tec-card:hover { border-color: var(--violeta); transform: translateY(-2px); }
.tec-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.tec-head strong { font-size: 0.95rem; }
.tec-caracteristicas { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.tec-carga { margin-top: 0.2rem; }
.tec-num { font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--violeta); }
.tec-card.sobrecargado .tec-num { color: var(--warn); }
.tec-num-l { font-size: 0.68rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.35rem; }
.tec-carga .bal-activo { font-size: 0.66rem; }
.tec-carga .chip { margin-top: 0.4rem; }

/* ================= Mapa de Planta ================= */
.mapa-resumen { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.8rem; color: var(--texto-suave); margin: 0.6rem 0 0.2rem; }
.mapa-resumen span { display: inline-flex; align-items: center; gap: 0.35rem; }
.est-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.estado-badge {
  display: inline-block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.02em; padding: 0.12rem 0.5rem; border-radius: var(--radius-pill);
}
.est-disponible { background: var(--color-tint-good); color: var(--ok); }
.est-ocupado    { background: var(--tinte); color: var(--violeta); }
.est-mantenimiento { background: var(--color-tint-warning); color: var(--warn); }
.est-pesaje { background: var(--tinte); color: var(--violeta); }
.est-limpieza_ordinaria { background: var(--tinte); color: var(--violeta); }
.est-limpieza_radical { background: var(--color-tint-critical); color: var(--critico); }
.est-dot.est-disponible { background: var(--ok); }
.est-dot.est-ocupado { background: var(--violeta); }
.est-dot.est-mantenimiento { background: var(--warn); }
.mapa-card { cursor: pointer; }
.mapa-card[data-estado="mantenimiento"] { border-color: var(--warn); background: var(--color-tint-warning); }
.mapa-card[data-estado="ocupado"] { border-color: var(--violeta); }
.mapa-ocupante { font-size: 0.76rem; }
.mapa-inline-form { margin: 0; }
.btn-chip {
  font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer;
  padding: 0.2rem 0.6rem; border: 1px solid var(--borde); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--texto-suave);
}
.btn-chip:hover { background: var(--tinte); color: var(--violeta); border-color: var(--violeta); }
.mapa-eventos-lista { list-style: none; margin: 0.2rem 0 0; }
.mapa-eventos-lista li { padding: 0.25rem 0; border-bottom: 1px solid var(--borde); }
.mapa-eventos-lista li:last-child { border-bottom: none; }
.mapa-hint { font-size: 0.66rem; margin: 0.4rem 0 0; font-style: italic; }
.reprog-acciones { display: flex; flex-direction: column; gap: 0.35rem; align-items: flex-start; }
.reprog-acciones .mapa-inline-form { margin: 0; }
.reprog-acciones a.btn-chip { text-decoration: none; display: inline-block; }

.retraso-confirmado { margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.retraso-override summary.link-ajustar {
  list-style: none; cursor: pointer; font-size: 0.78rem; font-weight: 600;
  color: var(--violeta); display: inline-flex; align-items: center; gap: 0.3rem;
}
.retraso-override summary.link-ajustar::-webkit-details-marker { display: none; }
.retraso-override summary.link-ajustar::after { content: "▸"; font-size: 0.68rem; transition: transform 0.15s; }
.retraso-override[open] summary.link-ajustar::after { transform: rotate(90deg); }
.retraso-override summary.link-ajustar:hover { text-decoration: underline; }
.retraso-atajos { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.3rem; }
.retraso-atajos .chip-atajo { font-weight: 600; }

/* Reprogramación Reactiva rediseñada (18-punto, punto 12) — guía de pasos
   didáctica + tarjetas en vez de tabla densa, para que se entienda sin
   tener que leer cada tooltip. */
.reprog-pasos { margin: 0.3rem 0 0; padding-left: 1.15rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; }
.reprog-callout { border: 1px solid var(--violeta); background: var(--tinte); border-radius: var(--radius-card); padding: 0.8rem 1rem; margin-bottom: 0.9rem; }
.reprog-callout h3 { margin-top: 0; }
.reprog-cards { display: flex; flex-direction: column; gap: 0.7rem; }
.reprog-card {
  display: flex; gap: 1rem 1.4rem; flex-wrap: wrap; justify-content: space-between;
  border: 1px solid var(--borde); border-radius: var(--radius-card); padding: 0.8rem 1rem;
  background: var(--color-surface);
}
.reprog-card-foco { box-shadow: inset 3px 0 0 var(--violeta); border-color: var(--violeta); }
.reprog-card-info { flex: 1 1 220px; min-width: 200px; }
.reprog-card-titulo { font-weight: 700; margin-bottom: 0.2rem; }
.reprog-card-decision { flex: 1 1 280px; min-width: 240px; display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.estado-hora-atencion { color: var(--warn); }
.estado-hora-atencion .estado-hora-punto { background: var(--warn); }

.plano-svg-wrap { margin-top: 0.8rem; max-width: 1400px; overflow-x: clip; }   /* un rótulo pegado al borde derecho no debe ensanchar la página en el celular */
.plano-svg-inner { position: relative; width: 100%; line-height: 0; }
.plano-svg-inner svg { display: block; width: 100%; height: auto; }

.plano-overlay {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border: none; background: none; padding: 0; margin: 0; font: inherit; cursor: pointer;
  line-height: normal;
}
.plano-overlay-pesaje1 { left: 12%; width: 20%; top: 51%; height: 19%; }
.plano-overlay-pesaje2 { left: 33%; width: 13%; top: 19%; height: 17%; }
.plano-overlay-badge {
  font-size: 0.7rem; padding: 0.3rem 0.65rem; border: 2px solid transparent;
  box-shadow: var(--shadow-float); white-space: nowrap; text-transform: none;
}
.plano-overlay[data-estado="disponible"] .plano-overlay-badge { border-color: var(--ok); }
.plano-overlay[data-estado="pesaje"] .plano-overlay-badge { border-color: var(--violeta); }
.plano-overlay[data-estado="limpieza_ordinaria"] .plano-overlay-badge { border-color: var(--violeta); }
.plano-overlay[data-estado="limpieza_radical"] .plano-overlay-badge { border-color: var(--critico); }
.plano-overlay[data-estado="mantenimiento"] .plano-overlay-badge { border-color: var(--warn); }
.plano-overlay:hover .plano-overlay-badge { filter: brightness(0.97); }

.modal-sala {
  border: none; border-radius: var(--radius-card); padding: 1.1rem 1.2rem 1.3rem;
  max-width: 480px; width: 92vw; max-height: 82vh; overflow-y: auto;
  box-shadow: var(--shadow-float);
}
.modal-sala::backdrop { background: rgba(0, 0, 0, 0.45); }
.modal-sala-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; }
.modal-sala-head h3 { margin: 0; font-size: var(--text-subtitle); flex: 1 1 auto; }
.modal-sala-sub { font-size: 0.74rem; margin: 1.1rem 0 0.5rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.modal-sala-detalle { margin: 0 0 0.6rem; font-size: 0.8rem; }
.modal-cerrar {
  background: none; border: none; font-size: 1.05rem; cursor: pointer; line-height: 1;
  color: var(--texto-suave); padding: 0.25rem 0.45rem; border-radius: var(--radius-control);
}
.modal-cerrar:hover { background: var(--tinte); color: var(--violeta); }
.modal-equipos-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.modal-equipo-fila.mapa-card { cursor: default; }
.modal-eventos-lista { margin: 0; }
.modal-sala-foot { margin-top: 1.1rem; text-align: right; }

/* ================= Estudio de Tiempos General (reporte) ================= */
table.reporte { border-collapse: collapse; font-size: 0.76rem; }
table.reporte th, table.reporte td { border: 1px solid var(--borde); padding: 0.35rem 0.5rem; vertical-align: top; }
table.reporte thead th { background: var(--color-surface-muted); color: var(--texto-suave); font-weight: 700; font-size: 0.68rem; text-transform: none; letter-spacing: 0; text-align: center; }
table.reporte th.grp { background: var(--tinte); color: var(--violeta); }
table.reporte td.txt { white-space: normal; min-width: 130px; }
table.reporte tbody tr:nth-child(even) td { background: var(--color-surface-muted); }
.panel-head-flex { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.6rem; }
.panel-head-flex h2 { margin: 0; }
.btn-export {
  margin-left: auto; align-self: flex-end;
  font-weight: 700; font-size: 0.82rem; text-decoration: none;
  padding: 0.4rem 0.95rem; border-radius: var(--radius-control);
  background: var(--violeta); color: #fff;
}
.btn-export:hover { filter: brightness(1.05); }

/* Ficha Técnica imprimible (Exportar Ficha Técnica) */
.ficha-imp-seccion { page-break-inside: avoid; }
.ficha-imp-footer {
  margin-top: 1.5rem; padding-top: 0.8rem; border-top: 1px solid var(--borde);
  font-size: 0.74rem; color: var(--texto-suave); text-align: center;
}

@media print {
  .no-print, .top .crumb, .nav { display: none !important; }
  header.top { background: none; border: none; padding: 0 0 0.5rem; }
  main { max-width: none; padding: 0; }
  .panel { border: none; border-radius: 0; padding: 0; margin: 0; }
  .tabla-scroll { overflow: visible; }
  body { font-size: 10px; }
  table.reporte { font-size: 8px; }
  table.reporte th, table.reporte td { padding: 2px 3px; }
  .chip { border: 1px solid currentColor; }
}

details summary { cursor: pointer; }
details summary h2 { display: inline; }
details summary::marker { color: var(--violeta); }
.bar-chart { display: flex; flex-direction: column; gap: 0.8rem; }
.bar-chart-fila { display: flex; flex-direction: column; gap: 0.25rem; }
.bar-chart-tarea { font-size: 0.82rem; font-weight: 700; }
.bar-chart-barra { display: flex; align-items: center; gap: 0.5rem; }
.bar-chart-barra .pista { flex: 1; background: var(--color-surface-muted); border-radius: var(--radius-control); height: 1.1rem; overflow: hidden; }
.bar-chart-barra .relleno { height: 100%; border-radius: var(--radius-control); }
.bar-chart-barra.normal .relleno { background: color-mix(in srgb, var(--violeta) 45%, var(--color-surface)); }
.bar-chart-barra.estandar .relleno { background: var(--violeta); }
.bar-chart-barra .val { font-size: 0.7rem; color: var(--texto-suave); min-width: 6.8rem; text-align: right; }

/* ================= Cronograma — vista Gantt y Johnson ================= */
.msg-ilustrativo { background: var(--tinte); color: var(--texto); border: 1px solid var(--violeta); }

.regla-selector { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0.6rem 0 0.4rem; }
.regla-lbl { font-size: 0.78rem; font-weight: 700; color: var(--texto-suave); margin-right: 0.3rem; }
.regla-selector a {
  font-size: 0.8rem; font-weight: 700; text-decoration: none; color: var(--texto-suave);
  padding: 0.25rem 0.7rem; border: 1px solid var(--borde); border-radius: var(--radius-pill);
}
.regla-selector a:hover { background: var(--tinte); color: var(--violeta); }
.regla-selector a.actual { background: var(--violeta); color: #fff; border-color: transparent; }
.regla-desc { font-size: 0.82rem; color: var(--texto-suave); margin: 0.2rem 0 0.9rem; }
.regla-desc sup { font-size: 0.7em; }

.prio-leyenda { display: flex; flex-wrap: wrap; gap: 0.9rem; font-size: 0.76rem; color: var(--texto-suave); margin-bottom: 0.6rem; }
.prio-leyenda span { display: inline-flex; align-items: center; gap: 0.3rem; }
.prio-punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.prio-alta { background: var(--critico); }
.prio-media { background: var(--violeta); }
.prio-baja { background: var(--neutro-estado); }

.gantt-lane { display: grid; grid-template-columns: 120px 1fr; gap: 0.6rem; align-items: center; margin-bottom: 0.4rem; }
.gantt-lane-head { font-size: 0.74rem; font-weight: 700; display: flex; flex-direction: column; }
.gantt-lane-head .nc { font-weight: 400; font-size: 0.68rem; }
.gantt-track { position: relative; height: 2rem; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radius-control); overflow: hidden; }
.gantt-marca-almuerzo, .gantt-marca-turno-extra {
  position: absolute; top: 0; bottom: 0; z-index: 0; pointer-events: none;
  display: flex; align-items: center; overflow: hidden; white-space: nowrap;
  font-size: 0.58rem; font-weight: 700;
}
.gantt-marca-almuerzo {
  justify-content: center; color: var(--texto-suave);
  background: repeating-linear-gradient(45deg, var(--color-surface-muted), var(--color-surface-muted) 5px, var(--color-border) 5px, var(--color-border) 10px);
  border-left: 1px dashed var(--borde); border-right: 1px dashed var(--borde);
}
.gantt-marca-turno-extra {
  justify-content: flex-start; padding-left: 0.3rem; color: var(--warn);
  background: var(--color-tint-warning); border-left: 1px dashed var(--warn);
}
.gantt-bar {
  position: absolute; top: 3px; bottom: 3px; min-width: 2px;
  border-radius: 5px; color: #fff; font-size: 0.68rem; font-weight: 700;
  display: flex; align-items: center; padding: 0 0.35rem; overflow: hidden; white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.gantt-bar.prio-alta { background: var(--critico); }
.gantt-bar.prio-media { background: var(--violeta); }
.gantt-bar.prio-baja { background: var(--neutro-estado); }
.gantt-vacio { position: absolute; left: 0.5rem; top: 50%; transform: translateY(-50%); font-size: 0.72rem; color: var(--texto-suave); font-style: italic; }

.gantt-lane-limpieza { margin-top: -0.15rem; margin-bottom: 0.6rem; }
.gantt-track-limpieza { position: relative; height: 1.3rem; background: var(--fondo); border: 1px dashed var(--borde); border-radius: var(--radius-control); overflow: hidden; }
.limpieza-bar {
  position: absolute; top: 2px; bottom: 2px; min-width: 2px;
  border-radius: 4px; color: #fff; font-size: 0.62rem; font-weight: 700;
  display: flex; align-items: center; padding: 0 0.3rem; overflow: hidden; white-space: nowrap;
}
.limpieza-bar.ordinaria { background: var(--violeta); }
.limpieza-bar.radical { background: var(--critico); }
.limpieza-bloqueo {
  position: absolute; top: 2px; bottom: 2px; min-width: 3px;
  border-radius: 4px; font-size: 0.6rem; font-weight: 700; color: var(--warn);
  display: flex; align-items: center; padding: 0 0.3rem; overflow: hidden; white-space: nowrap;
  background: repeating-linear-gradient(45deg, var(--color-tint-warning), var(--color-tint-warning) 5px, var(--color-border-warning) 5px, var(--color-border-warning) 10px);
  border: 1px solid var(--color-border-warning);
}

.gantt-bar.riel-verde { border-left: 4px solid var(--ok); }
.gantt-bar.riel-ambar { border-left: 4px solid var(--warn); }
.gantt-bar.riel-rojo { border-left: 4px solid var(--critico); }
.gantt-bar.riel-gris { border-left: 4px solid var(--neutro-estado); }
.riel-punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.riel-punto.riel-verde { background: var(--ok); }
.riel-punto.riel-ambar { background: var(--warn); }
.riel-punto.riel-rojo { background: var(--critico); }
.riel-punto.riel-gris { background: var(--neutro-estado); }

/* Línea "Hoy" en el eje del Gantt (Módulo 2b) — sólo referencia visual,
   recalculada en cada carga de página con la hora real. */
.gantt-linea-hoy { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--rosa); z-index: 2; }
.gantt-linea-hoy span {
  position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%);
  font-size: 0.58rem; font-weight: 700; color: #fff; background: var(--rosa);
  padding: 0.05rem 0.35rem; border-radius: 4px; white-space: nowrap;
}

.gantt-grupo { border-radius: var(--radius-card); margin-bottom: 1rem; overflow: hidden; border: 1px solid var(--borde); }
.gantt-grupo-head {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; cursor: pointer;
  font: inherit; border: none; padding: 0.55rem 0.8rem; color: #fff;
  background: var(--violeta);
}
.gantt-grupo-pesajei { background: var(--violeta); }
.gantt-grupo-pesajeii { background: var(--rosa); }
.gantt-grupo-campana { background: var(--texto-suave); }
.gantt-grupo-nombre { font-weight: 700; font-size: 0.88rem; }
.gantt-grupo-rango { font-size: 0.74rem; opacity: 0.9; }
.gantt-grupo-total { margin-left: auto; font-size: 0.7rem; opacity: 0.9; }
.gantt-grupo-chevron { font-size: 0.7rem; transition: transform 0.15s; }
.gantt-grupo-head[aria-expanded="false"] .gantt-grupo-chevron { transform: rotate(-90deg); }
.gantt-grupo-body { padding: 0.7rem 0.8rem 0.2rem; }

.avatar-tec {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; color: #fff;
  font-size: 0.62rem; font-weight: 700; line-height: 1;
}
.avatar-tec-sm { width: 1.25rem; height: 1.25rem; font-size: 0.54rem; }
.avatar-tec-lg { width: 2.3rem; height: 2.3rem; font-size: 0.86rem; }
.gantt-grupo-body[hidden] { display: none; }

.gantt-prod-tabla { border: 1px solid var(--borde); border-radius: var(--radius-card); overflow: hidden; }
.gantt-prod-cols { display: grid; grid-template-columns: minmax(210px, 2fr) 84px 132px minmax(220px, 3fr); align-items: stretch; }
.gantt-prod-colhead {
  background: var(--color-surface-muted); color: var(--texto-suave);
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
}
.gantt-prod-grupo { border-top: 1px solid var(--borde); }
.gantt-prod-grupo:first-child { border-top: none; }
.gantt-prod-row-header {
  width: 100%; border: none; background: var(--color-surface); color: var(--texto); cursor: pointer; font: inherit; text-align: left;
  padding: 0;
}
.gantt-prod-row-header:hover { background: var(--color-surface-muted); }
.gantt-prod-row-header-compacta { cursor: default; }
.gantt-prod-row-header-compacta:hover { background: var(--color-surface); }
.gantt-prod-row-hija { padding: 0; border-top: 1px dashed var(--borde); background: var(--color-surface); }
.gantt-prod-col-pad { padding: var(--space-2) var(--space-3); display: flex; align-items: center; }
.gantt-prod-col-tarea { gap: var(--space-2); font-size: var(--text-sm); flex-wrap: wrap; }
.gantt-prod-rama { color: var(--texto-suave); }

.gantt-prod-dias-fila { display: flex; }
.gantt-prod-dia-celda {
  position: relative; flex: 1 1 0; min-width: 0; border-left: 1px solid var(--borde);
  min-height: 2.4rem; padding: 0.3rem;
}
.gantt-prod-dia-celda-header { display: flex; align-items: center; justify-content: center; min-height: 0; padding: var(--space-2) 0.3rem; }
.gantt-prod-dia-celda-track { display: flex; align-items: center; }

/* Avatares junto a una fila (padre o hija) — mismo avatar-tec de siempre,
   sólo agrupados horizontalmente. */
.fila-avatares { display: flex; gap: 0.2rem; align-items: center; flex-wrap: wrap; }

.estado-hora { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.estado-hora-punto { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.estado-hora-pendiente { color: var(--color-status-neutral); }
.estado-hora-pendiente .estado-hora-punto { background: var(--color-status-neutral); }
.estado-hora-en_curso { color: var(--color-accent); }
.estado-hora-en_curso .estado-hora-punto { background: var(--color-accent); }
.estado-hora-completado { color: var(--color-status-good); }
.estado-hora-completado .estado-hora-punto { background: var(--color-status-good); }
.estado-hora-atrasado { color: var(--color-status-critical); }
.estado-hora-atrasado .estado-hora-punto { background: var(--color-status-critical); }

.gantt-bar { gap: 0.3rem; }
.gantt-bar-punto { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 999px; }
.gantt-bar-txt { overflow: hidden; text-overflow: ellipsis; }

/* Conector en codo Limpieza → Pesaje siguiente (Módulo 2e) — overlay puro,
   posicionado por JS con las coordenadas ya renderizadas de las barras. */
.gantt-dia-par { position: relative; }
.gantt-conector { position: absolute; width: 2px; background: var(--texto-suave); pointer-events: none; z-index: 1; }
.gantt-conector::after { content: "▲"; position: absolute; top: -7px; left: -4px; font-size: 8px; line-height: 1; color: var(--texto-suave); }

/* Zoom Día/Semana/Mes (Módulo 2f). */
.gantt-zoom { display: flex; align-items: center; gap: 0.3rem; }
.gantt-zoom-btn {
  font: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer;
  padding: 0.28rem 0.7rem; border: 1px solid var(--borde); border-radius: var(--radius-pill);
  background: var(--color-surface); color: var(--texto-suave);
}
.gantt-zoom-btn.actual { background: var(--violeta); color: #fff; border-color: transparent; }
.gantt-dia-picker { margin: 0.5rem 0; }
.gantt-zoom-mes .gantt-track { height: 1.1rem; }
.gantt-zoom-mes .gantt-track-limpieza { height: 0.75rem; }
.gantt-zoom-mes .gantt-bar-txt { display: none; }
.gantt-zoom-mes .limpieza-bar { font-size: 0.55rem; }
.gantt-zoom-mes .gantt-lane { margin-bottom: 0.25rem; }
.gantt-zoom-mes .gantt-lane-limpieza { margin-bottom: 0.5rem; }

.modo-gantt-toggle { display: flex; gap: 0.4rem; margin: 0.8rem 0 1rem; }
.modo-gantt-btn {
  font-size: 0.82rem; font-weight: 700; text-decoration: none; color: var(--texto-suave);
  padding: 0.35rem 0.9rem; border: 1px solid var(--borde); border-radius: var(--radius-pill);
}
.modo-gantt-btn:hover { background: var(--tinte); color: var(--violeta); }
.modo-gantt-btn.actual { background: var(--violeta); color: #fff; border-color: transparent; }

/* Cronograma consolidado (18-punto, punto 10) — Gantt + ranking de reglas
   lado a lado en una sola pantalla, en vez de pestañas separadas. */
.cronograma-layout { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.cronograma-main { flex: 3 1 480px; min-width: 0; }
.cronograma-ranking { flex: 1 1 260px; min-width: 240px; position: sticky; top: 1rem; }
.ranking-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.ranking-lista li { border: 1px solid var(--borde); border-radius: var(--radius-control); padding: 0.5rem 0.6rem; }
.ranking-lista li.ranking-recomendada { border-color: var(--color-status-good); background: var(--color-tint-good, var(--tinte)); }
.ranking-lista a { display: block; color: var(--texto); text-decoration: none; }
.ranking-lista a.actual { color: var(--violeta); }
.ranking-lista a:hover strong { text-decoration: underline; }

.cal-semana-nav { display: flex; align-items: center; gap: 0.7rem; font-size: 0.82rem; }
.cal-semana-nav a { color: var(--violeta); text-decoration: none; font-weight: 600; }
.cal-semana-nav a:hover { text-decoration: underline; }

.cal-leyenda { display: flex; flex-wrap: wrap; gap: 0.7rem 1.1rem; font-size: 0.76rem; color: var(--texto-suave); margin: 0.6rem 0; }
.cal-leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.cal-punto { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

.cal-grid-wrap { overflow-x: auto; }
table.cal-grid { width: 100%; border-collapse: collapse; min-width: 900px; }
table.cal-grid th, table.cal-grid td { border: 1px solid var(--borde); padding: 0; }
table.cal-grid thead th {
  padding: 0.5rem 0.4rem; background: var(--color-surface-muted); color: var(--texto-suave);
  font-size: 0.74rem; font-weight: 700; text-transform: uppercase; text-align: center;
}
table.cal-grid thead th.cal-col-no-habil { background: var(--borde); color: var(--texto-suave); }
.cal-esquina { background: var(--color-surface) !important; border: none !important; }
.cal-rowhead {
  background: var(--color-surface-muted); padding: 0.6rem 0.7rem; text-align: left; font-size: 0.82rem;
  font-weight: 700; white-space: nowrap; vertical-align: top;
}
.cal-celda { position: relative; width: 12.5%; vertical-align: top; padding: var(--space-2); }
.cal-celda-no-habil {
  background: repeating-linear-gradient(45deg, var(--color-surface-muted), var(--color-surface-muted) 6px, var(--borde) 6px, var(--borde) 12px);
}
.cal-celda-vacia { font-size: 0.72rem; }
.cal-celda-lista { display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-start; }

/* Tarjeta compacta (punto 3): máximo 3 líneas de datos (pill de fase, hora,
   producto/lote) con padding de la escala de espaciado del Bloque A; el
   texto se envuelve a una 2ª línea en vez de cortarse, y recién si con dos
   líneas no entra se trunca con "…" al final de la última palabra
   completa (line-clamp, nunca a mitad de palabra). */
.cal-bloque {
  width: 100%; border: none; border-left: 3px solid transparent; border-radius: var(--radius-control);
  color: var(--texto); text-align: left; cursor: pointer; background: var(--color-surface);
  box-shadow: inset 0 0 0 1px var(--borde);
  padding: var(--space-1) var(--space-2); font: inherit; line-height: 1.3;
  display: flex; flex-direction: column; gap: 2px;
}
.cal-bloque-pill {
  align-self: flex-start; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 1px 0.4rem; border-radius: var(--radius-pill); color: #fff;
}
.cal-bloque-hora { font-size: 0.64rem; font-weight: 700; color: var(--texto-suave); }
.cal-bloque-label {
  font-size: 0.68rem; overflow: hidden; overflow-wrap: normal; word-break: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.cal-bloque-pesaje { background: var(--tinte); border-left-color: var(--violeta); }
.cal-bloque-pesaje .cal-bloque-pill { background: var(--violeta); }
.cal-bloque-limpieza_ordinaria { background: color-mix(in srgb, var(--rosa) 14%, var(--color-surface)); border-left-color: var(--rosa); }
.cal-bloque-limpieza_ordinaria .cal-bloque-pill { background: var(--rosa); }
.cal-bloque-limpieza_radical { background: var(--color-tint-critical); border-left-color: var(--critico); }
.cal-bloque-limpieza_radical .cal-bloque-pill { background: var(--critico); }
.cal-bloque-mantenimiento { background: var(--color-tint-neutral); border-left-color: var(--neutro-estado); }
.cal-bloque-mantenimiento .cal-bloque-pill { background: var(--neutro-estado); }
.cal-bloque-turno_extra { background: var(--color-tint-warning); border-left-color: var(--warn); }
.cal-bloque-turno_extra .cal-bloque-pill { background: var(--warn); }
/* Los puntos de la leyenda quedan sólidos (necesitan color vivo para
   leerse a ese tamaño) aunque la tarjeta real ahora sea clara. */
.cal-punto.cal-bloque-pesaje, .cal-punto.cal-bloque-limpieza_ordinaria, .cal-punto.cal-bloque-limpieza_radical,
.cal-punto.cal-bloque-mantenimiento, .cal-punto.cal-bloque-turno_extra { border-radius: 3px; border-left: none; box-shadow: none; }
.cal-punto.cal-bloque-pesaje { background: var(--violeta); }
.cal-punto.cal-bloque-limpieza_ordinaria { background: var(--rosa); }
.cal-punto.cal-bloque-limpieza_radical { background: var(--critico); }
.cal-punto.cal-bloque-mantenimiento { background: var(--neutro-estado); }
.cal-punto.cal-bloque-turno_extra { background: var(--warn); }

/* Indicador "+N más" (punto 3) — mismo trato visual que un chip neutro,
   abre el mismo popover de detalle que ya usan las tarjetas (Módulo 16). */
.cal-bloque-mas {
  width: 100%; border: 1px dashed var(--borde); border-radius: var(--radius-control);
  background: var(--color-surface-muted); color: var(--texto-suave); font: inherit; font-weight: 700; font-size: 0.68rem;
  padding: var(--space-1) var(--space-2); cursor: pointer; text-align: center;
}
.cal-bloque-mas:hover { background: var(--tinte); color: var(--violeta); }

.modal-detalle-lista li { padding: 0.3rem 0; border-bottom: 1px solid var(--borde); font-size: 0.82rem; }
.modal-detalle-lista li:last-child { border-bottom: none; }

.secuencia-johnson { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.jgantt { border: 1px solid var(--borde); border-radius: 10px; padding: 0.7rem 0.85rem; }
.jg-row { display: grid; grid-template-columns: 80px 1fr; gap: 0.6rem; align-items: center; margin-bottom: 0.45rem; }
.jg-head { font-size: 0.74rem; font-weight: 700; color: var(--texto-suave); }
.jg-track { position: relative; height: 1.8rem; background: var(--fondo); border: 1px solid var(--borde); border-radius: var(--radius-control); }
.jg-bar {
  position: absolute; top: 3px; bottom: 3px; border-radius: 5px; color: #fff;
  font-size: 0.66rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.4);
}
.jg-p { background: var(--violeta); }
.jg-l { background: var(--rosa); }
.jg-eje { display: flex; justify-content: space-between; font-size: 0.68rem; color: var(--texto-suave); margin-left: 80px; }

.comparador-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.8rem; }
.comparador-col { border: 1px solid var(--borde); border-radius: 10px; padding: 0.7rem 0.8rem; }
.comparador-lista { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.comparador-lista li { font-size: 0.8rem; padding: 0.3rem 0.4rem; border-radius: 6px; }
.comparador-lista li.cambia { background: var(--color-tint-warning); border: 1px solid var(--color-border-warning); }
.comparador-lista li strong { display: block; }

.cal-laboral-mes { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 0.6rem; }
.cal-laboral-mes th { padding: 0.3rem; font-size: var(--text-xs); color: var(--texto-suave); text-transform: uppercase; text-align: center; }
.cal-laboral-dia { border: 1px solid var(--borde); height: 4.2rem; vertical-align: top; padding: 2px; }
.cal-laboral-fuera { background: var(--color-surface-muted); opacity: 0.55; }
.cal-laboral-hoy { box-shadow: inset 0 0 0 2px var(--violeta); }
.cal-laboral-btn {
  width: 100%; height: 100%; border: none; background: transparent; cursor: pointer; font: inherit;
  text-align: left; padding: 0.25rem; border-radius: var(--radius-control);
  display: flex; flex-direction: column; gap: 2px; color: var(--texto);
}
.cal-laboral-btn:hover { background: var(--color-surface-muted); }
.cal-laboral-num { font-size: 0.8rem; font-weight: 700; }
.cal-laboral-motivo { font-size: 0.62rem; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-laboral-btn.cal-laboral-feriado { background: var(--color-tint-critical); color: var(--critico); }
.cal-laboral-btn.cal-laboral-feriado:hover { background: color-mix(in srgb, var(--critico) 20%, var(--color-surface)); }
.cal-laboral-btn.cal-laboral-evento { background: var(--color-tint-warning); color: var(--warn); }
.cal-laboral-btn.cal-laboral-evento:hover { background: color-mix(in srgb, var(--warn) 20%, var(--color-surface)); }
.cal-punto.cal-laboral-feriado { background: var(--critico); border-radius: 3px; }
.cal-punto.cal-laboral-evento { background: var(--warn); border-radius: 3px; }

.chip-codigo {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; padding: 0.1rem 0.4rem; border-radius: var(--radius-pill);
  background: var(--color-dark-bg); color: #fff; font-size: 0.66rem; font-weight: 700;
}

.mapa-card-apoyo { display: flex; flex-direction: column; gap: 0.3rem; }
.mapa-limpieza-alerta { padding: 0.3rem 0.5rem; border-radius: var(--radius-control); }
.mapa-limpieza-alerta.mapa-limpieza-radical { background: var(--color-tint-critical); }
.mapa-limpieza-alerta.mapa-limpieza-ordinaria { background: var(--color-tint-good); }

body { background: var(--fondo); }
.sidebar {
  background: #0F2A5C;
  border-right: none; color: #E6EEFA;
}
.sidebar-brand strong { color: #fff; }
.sidebar-brand span { color: #A9C4EC; }
.sidebar-brand-mark { background: rgba(255,255,255,.18); }
.sidebar-separador { background: rgba(255,255,255,.14); }
.side-grupo-head { color: #F5B544; }
.side-grupo-head:hover { color: #fff; }
.sidebar-link { color: #E3E1FF; border-left: none; }
.sidebar-link:hover { background: rgba(255,255,255,.10); color: #fff; }
.sidebar-link.activo { background: #fff; color: var(--violeta); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.sidebar-link-fijo { color: #fff; border-left: none; }
.sidebar-link-fijo:hover { background: rgba(255,255,255,.10); color: #fff; }
.sidebar-link-fijo.activo { background: #fff; color: var(--violeta); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.sidebar-foot { color: #A9A5E6; }

header.top { background: var(--color-surface); border-bottom: 1px solid var(--borde); }
header.top h1 { font-weight: 800; letter-spacing: -0.01em; }
.panel { border: none; box-shadow: var(--shadow-card); border-radius: 18px; }
.stat { border-color: var(--borde); background: var(--color-surface); }
.stat.destacado { background: var(--tinte); border-color: transparent; }
.btn-chip { border-radius: var(--radius-pill); }
th { background: transparent; }

.kpi-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.kpi-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 0.15rem;
  padding: 1rem 1.1rem 1.05rem; border-radius: 18px; color: #fff; text-decoration: none;
  box-shadow: var(--shadow-card); transition: transform .15s;
}
.kpi-tile:hover { transform: translateY(-3px); }
.kpi-tile::before, .kpi-tile::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.14); pointer-events: none;
}
.kpi-tile::before { width: 120px; height: 120px; right: -30px; bottom: -40px; }
.kpi-tile::after { width: 80px; height: 80px; right: 40px; bottom: -50px; }
.kpi-indigo { background: #123E82; }
.kpi-violeta { background: #8A63E8; }
.kpi-durazno { background: #F28C28; }
.kpi-turquesa { background: #1FB39A; }
.kpi-icono { font-size: 1.15rem; opacity: .9; }
.kpi-titulo { font-size: 0.8rem; font-weight: 600; opacity: .95; }
.kpi-valor { font-family: var(--font-heading); font-size: 2rem; line-height: 1.1; font-weight: 800; }
.kpi-valor small { font-size: 0.9rem; font-weight: 600; }
.kpi-sub { font-size: 0.72rem; opacity: .9; }

.dash-fila { display: grid; grid-template-columns: 300px minmax(0, 1fr) 230px; gap: 1rem; margin-bottom: 1.25rem; align-items: stretch; }
.dash-fila .panel { margin-bottom: 0; }
.dash-fila h2 { font-size: var(--text-subtitle); font-weight: 800; }

.mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 0.78rem; }
.mini-cal-dow { color: var(--texto-suave); font-weight: 700; font-size: 0.7rem; padding-bottom: 4px; }
.mini-cal-dia { padding: 0.35rem 0; border-radius: 50%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.mini-cal-dia.fuera { color: #C3C6DD; }
.mini-cal-dia.en-semana { background: var(--tinte); font-weight: 600; }
.mini-cal-dia.evento { box-shadow: inset 0 0 0 2px #F5B544; }
.mini-cal-dia.hoy { background: var(--violeta); color: #fff; font-weight: 700; }
.mini-cal-leyenda { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.7rem; color: var(--texto-suave); margin: 0.6rem 0 0; }
.mini-cal-punto { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.mini-cal-punto.sem { background: var(--tinte); border: 1px solid var(--violeta); }
.mini-cal-punto.ev { border: 2px solid #F5B544; }

.chart-leyenda { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: var(--texto-suave); }
.chart-leyenda span { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ch-pes { background: #2F9E44; } .ch-lim { background: #F28C28; margin-left: 0.5rem; }
.col-chart {
  display: flex; align-items: flex-end; gap: 0.8rem; height: 230px; padding: 0.4rem 0.2rem 0;
  background: repeating-linear-gradient(to top, transparent 0, transparent 44px, var(--borde) 44px, var(--borde) 45px);
}
.col-chart-dia { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; height: 100%; }
.col-chart-barras { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 6px; }
.col-bar { width: 42%; max-width: 34px; min-height: 3px; border-radius: 8px 8px 0 0; position: relative; }
.col-bar span { position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%); font-size: 0.68rem; font-weight: 700; color: var(--texto-suave); }
.col-bar.pes { background: #3B82E0; }
.col-bar.lim { background: #FFB08F; }
.col-chart-lbl { font-size: 0.72rem; color: var(--texto-suave); padding-top: 0.4rem; white-space: nowrap; }

.dash-donuts { display: flex; flex-direction: column; gap: 1rem; }
.dash-donuts h2 { margin: 0; }
.donut-item { display: flex; align-items: center; gap: 0.8rem; }
.donut-item strong { display: block; font-size: 0.85rem; }
.donut {
  --c: #1F5FBF; flex: 0 0 auto; width: 82px; height: 82px; border-radius: 50%; position: relative;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), #E9EAF6 0);
  display: flex; align-items: center; justify-content: center;
}
.donut::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--color-surface); }
.donut span { position: relative; font-weight: 800; font-size: 0.85rem; }
.donut-b { --c: #1FB39A; }

@media (max-width: 1180px) {
  .kpi-tiles { grid-template-columns: repeat(2, 1fr); }
  .dash-fila { grid-template-columns: minmax(0, 1fr); }
  .dash-donuts { flex-direction: row; flex-wrap: wrap; }
}

.kpi-violeta { background: #1E4FA0; }
.kpi-durazno { background: #A85A12; }
.kpi-turquesa { background: #0F766E; }
.kpi-sub, .kpi-titulo { opacity: 1; }
.kpi-tile:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--violeta) 55%, #fff); outline-offset: 2px;
}
.sidebar a:focus-visible, .sidebar button:focus-visible { outline-color: #fff; }

.btn-chip, .modo-gantt-btn, .regla-selector a, .dia-tabs a { min-height: 34px; display: inline-flex; align-items: center; transition: background .15s, color .15s, border-color .15s, transform .1s; }
.btn-chip:active, button:active { transform: scale(.97); }
button[type="submit"], .btn-export { transition: filter .15s, transform .1s; }
button[type="submit"]:hover, .btn-export:hover { filter: brightness(1.08); }
button.enviando { opacity: .65; cursor: progress; pointer-events: none; }
button.enviando::after { content: " …"; }

tbody tr:hover td { background: color-mix(in srgb, var(--tinte) 60%, transparent); }
.panel { transition: box-shadow .2s; }
.panel:hover { box-shadow: 0 10px 28px rgba(15, 42, 92, .10); }

.msg { transition: opacity .4s, transform .4s; }
.msg.msg-saliendo { opacity: 0; transform: translateY(-6px); }

.col-bar { transform-origin: bottom; animation: col-crece .6s cubic-bezier(.2,.8,.2,1) both; }
.col-chart-dia:nth-child(2) .col-bar { animation-delay: .06s; }
.col-chart-dia:nth-child(3) .col-bar { animation-delay: .12s; }
.col-chart-dia:nth-child(4) .col-bar { animation-delay: .18s; }
.col-chart-dia:nth-child(5) .col-bar { animation-delay: .24s; }
@keyframes col-crece { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.col-chart-dia:hover .col-chart-lbl { color: var(--violeta); font-weight: 700; }
.col-chart-dia:hover .col-bar { filter: brightness(1.12); }
.mini-cal-dia:not(.fuera):hover { background: var(--tinte); }

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

.cal-area-pesajei { --area: #2F9E44; --area-tinte: #E5F5E8; }
.cal-area-pesajeii { --area: #1B7A34; --area-tinte: #D9EFDD; }
.cal-area-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--area); margin-right: 0.45rem; }
th.cal-rowhead.cal-area-pesajei, th.cal-rowhead.cal-area-pesajeii { background: var(--area-tinte); color: var(--area); box-shadow: inset 4px 0 0 var(--area); }
.cal-bloque-pesaje.cal-area-pesajei, .cal-bloque-pesaje.cal-area-pesajeii { background: var(--area-tinte); border-left-color: var(--area); }
.cal-bloque-pesaje.cal-area-pesajei .cal-bloque-pill, .cal-bloque-pesaje.cal-area-pesajeii .cal-bloque-pill { background: var(--area); }
.cal-punto.cal-area-pesajei-punto { background: #1F5FBF; }
.cal-punto.cal-area-pesajeii-punto { background: #0F927E; }
.cal-tecs { display: flex; gap: 3px; margin-top: 2px; }
.cal-tec {
  width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 0.55rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; border: 2px solid #fff; cursor: help;
  box-shadow: 0 0 0 1px var(--borde);
}
.cal-tec-vacio { background: #C3C6DD; color: #fff; }

@media (min-width: 881px) {
  .sidebar { position: sticky; }
}
.sidebar-colapsar {
  position: absolute; top: 14px; right: 10px; width: 30px; height: 30px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.sidebar-colapsar:hover { background: rgba(255,255,255,.28); }
.sidebar-abrir {
  display: none; position: fixed; top: 14px; left: 14px; z-index: 45; width: 40px; height: 40px;
  border-radius: 12px; border: none; cursor: pointer; color: #fff;
  background: #0F2A5C; box-shadow: var(--shadow-card);
  align-items: center; justify-content: center;
}
@media (min-width: 881px) {
  body.sidebar-oculta .sidebar { display: none; }
  body.sidebar-oculta .sidebar-abrir { display: flex; }
  body.sidebar-oculta header.top { padding-left: 4.2rem; }
}
@media (max-width: 880px) { .sidebar-colapsar, .sidebar-abrir { display: none !important; } }
.sidebar-link-fijo-icono { justify-content: center; }
.sidebar-icono-svg { flex: 0 0 auto; }
.sidebar-icono-txt { font-size: 0.86rem; font-weight: 700; }
.side-grupo-n { font-weight: 600; opacity: .8; letter-spacing: 0; }
.sidebar-brand { padding-right: 3.2rem; }

.home-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; background: var(--color-surface); padding: 0.35rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-card); width: fit-content; max-width: 100%; }
.home-tab {
  font: inherit; font-size: 0.85rem; font-weight: 700; border: none; background: transparent; color: var(--texto-suave);
  padding: 0.5rem 1.1rem; border-radius: var(--radius-pill); cursor: pointer; transition: background .15s, color .15s;
}
.home-tab:hover { background: var(--tinte); color: var(--violeta); }
.home-tab.actual { background: #0F2A5C; color: #fff; }
.home-panel[hidden] { display: none; }
.home-panel[data-panel="kpis"], .home-panel[data-panel="gantt"], .home-panel[data-panel="calendario"] {
  max-height: calc(100vh - 290px); overflow: auto; padding: 2px;
}
.sidebar-brand .sidebar-brand-mark { display: flex; width: 34px; height: 34px; font-size: 1.05rem; color: #fff; align-items: center; justify-content: center; }

.gs-leyenda { display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; font-size: 0.76rem; color: var(--texto-suave); margin: 0 0 0.7rem; align-items: center; }
.gs-leyenda span { display: inline-flex; align-items: center; gap: 0.35rem; }
.gs-k { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: 0 0 auto; }
.gs-k.gs-pesajei { background: #1F5FBF; } .gs-k.gs-pesajeii { background: #0F927E; }
.gs-k.gs-limpieza_ordinaria { background: #56A6E0; } .gs-k.gs-limpieza_radical { background: #C9463A; }
.gs-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radius-card); }
.gs-tabla { min-width: 980px; }
.gs-row { display: grid; grid-template-columns: 290px 96px 118px repeat(5, minmax(0, 1fr)); align-items: stretch; }
.gs-c { padding: 0.45rem 0.7rem; display: flex; align-items: center; gap: 0.4rem; min-width: 0; border-top: 1px solid var(--borde); font-size: 0.8rem; }
.gs-head .gs-c { background: var(--color-surface-muted); color: var(--texto-suave); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-top: none; }
.gs-dia { position: relative; border-left: 1px solid var(--borde); padding: 0; min-height: 2.5rem; }
.gs-dia-head { justify-content: center; padding: 0.45rem 0.2rem; }
.gs-hoy-col.gs-dia-head { color: var(--violeta); }
.gs-hoy-col:not(.gs-dia-head) { background: color-mix(in srgb, var(--tinte) 45%, transparent); }
.gs-padre { cursor: pointer; background: var(--color-surface); }
.gs-padre:hover { background: var(--color-surface-muted); }
.gs-padre .gs-c-tarea { flex-wrap: wrap; }
.gs-padre .gs-c-tarea strong { font-size: 0.86rem; }
.gs-chev { display: inline-block; transition: transform .15s; color: var(--texto-suave); }
.gs-padre[aria-expanded="false"] .gs-chev { transform: rotate(-90deg); }
.gs-hijas[hidden] { display: none; }
.gs-hija { background: #FBFBFE; }
.gs-hija .gs-c-tarea { padding-left: 1.6rem; align-items: flex-start; }
.gs-hija .gs-c-tarea > span { display: flex; flex-direction: column; line-height: 1.25; }
.gs-c-tec { flex-wrap: wrap; gap: 3px; }
.gs-barra { position: absolute; top: 50%; transform: translateY(-50%); height: 1.15rem; min-width: 6px; border-radius: 5px; box-shadow: 0 0 0 1px rgba(255,255,255,.7); }
.gs-barra.gs-pesajei { background: #1F5FBF; } .gs-barra.gs-pesajeii { background: #0F927E; }
.gs-barra.gs-limpieza_ordinaria { background: #56A6E0; } .gs-barra.gs-limpieza_radical { background: #C9463A; }
.gs-padre .gs-barra { height: 0.9rem; }
.gs-hoy { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--violeta); z-index: 2; pointer-events: none; }

/* Accesos rápidos del Resumen: chips limpios en una sola fila */
.dash-grid-fila { grid-template-columns: repeat(6, 1fr); gap: 0.6rem; }
.dash-grid-fila .dash-card {
  flex-direction: row; justify-content: center; gap: 0.5rem; padding: 0.65rem 0.8rem; min-height: 0;
  background: var(--color-surface); border: 1px solid var(--borde); border-top: 1px solid var(--borde);
  border-radius: var(--radius-pill); box-shadow: none; text-align: center;
}
.dash-grid-fila .dash-card::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, var(--violeta)); flex: 0 0 auto; }
.dash-grid-fila .dash-card:hover { background: var(--tinte); border-color: var(--accent, var(--violeta)); transform: translateY(-2px); }
.dash-grid-fila .dash-card strong { font-size: 0.82rem; }
@media (max-width: 1100px) { .dash-grid-fila { grid-template-columns: repeat(3, 1fr); } }

.gc-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radius-card); background: var(--color-surface); }
.gc-tabla { position: relative; min-width: 940px; }
.gc-c-n { white-space: nowrap; }
.gc-row { display: grid; grid-template-columns: 34px 196px 92px 62px 46px 92px minmax(420px, 1fr); align-items: stretch; }
.gc-c { padding: 0.3rem 0.55rem; display: flex; align-items: center; gap: 0.35rem; min-width: 0; border-top: 1px solid var(--borde); border-right: 1px solid var(--borde); font-size: 0.78rem; }
.gc-c-id { justify-content: center; color: var(--texto-suave); background: var(--color-surface-muted); padding: 0.3rem 0; }
.gc-c-n { justify-content: center; text-align: center; }
.gc-c-tec { flex-wrap: wrap; gap: 3px; }
.gc-head .gc-c { background: var(--color-surface-muted); color: var(--texto-suave); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-top: none; min-height: 2.9rem; }
.gc-padre .gc-c { font-weight: 600; background: #FAFAFF; }
.gc-padre .gc-c-id { background: var(--color-surface-muted); }
.gc-hija .gc-c { min-height: 2.2rem; }
.gc-c-sub { padding-left: 1.5rem; align-items: center; line-height: 1.2; }
.gc-c-sub > span { display: flex; flex-direction: column; }
.gc-c-tarea strong { font-size: 0.82rem; }
.gc-chev { border: none; background: none; cursor: pointer; color: var(--texto-suave); font-size: 0.8rem; padding: 0 0.15rem; transition: transform .15s; }
.gc-chev[aria-expanded="false"] { transform: rotate(-90deg); }
.gc-hijas[hidden] { display: none; }
.gc-row[data-sel] { cursor: pointer; }
.gc-row[data-sel]:hover .gc-c:not(.gc-tl) { background: var(--tinte); }
.gc-row.gc-sel .gc-c { background: #FFF3E6; box-shadow: none; }
.gc-row.gc-sel .gc-c-id { background: #FFE1BF; }
.gc-prio { width: 20px; height: 20px; border-radius: 50%; color: #fff; font-size: 0.68rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.gc-p1 { background: #D8432F; } .gc-p2 { background: #E88B2E; } .gc-p3 { background: #3F8F5D; }

.gc-tl { position: relative; padding: 0; border-right: none; overflow: hidden; }
/* Más específico a propósito: .gc-padre/.gc-hija/.gc-head .gc-c ya ponen su propio "background" (shorthand,
   pisa background-image) con esa misma especificidad de 2 clases — esto necesita ganarles siempre, no
   depender del orden en el archivo. */
.gc-row .gc-c.gc-tl { background-image: var(--gc-lineas-h, none); }
.gc-dias { position: absolute; inset: 0; display: flex; }
.gc-d { flex: 1 1 0; border-left: 1px solid #C9CDE3; display: block; font-style: normal; }
.gc-d:first-child { border-left: none; }
.gc-d:nth-child(even) { background: rgba(31, 95, 191, .045); }
.gc-tl-head { align-items: flex-start; }
.gc-tl-head .gc-d { border-left-color: #C9CDE3; }
.gc-tl-head .gc-d b { display: block; text-align: center; font-size: 0.72rem; color: var(--texto); padding: 0.3rem 0; border-bottom: 1px solid var(--borde); }
.gc-tick { position: absolute; bottom: 0.2rem; transform: translateX(-50%); font-style: normal; font-size: 0.62rem; color: var(--texto-suave); }
.gc-hoy { position: absolute; top: 0; bottom: 0; width: 2px; background: #D8432F; z-index: 3; pointer-events: none; }

.gc-barra { position: absolute; top: 50%; height: 1.15rem; margin-top: -0.575rem; min-width: 8px; border-radius: 4px; overflow: hidden; z-index: 2; }
.gc-barra i, .gc-resumen i { position: absolute; left: 0; top: 0; bottom: 0; }
.gc-barra.gs-pesajei { background: #C4D7F2; } .gc-barra.gs-pesajei i { background: #1F5FBF; }
.gc-barra.gs-pesajeii { background: #B5E4DA; } .gc-barra.gs-pesajeii i { background: #0F927E; }
.gc-barra.gs-limpieza_ordinaria { background: #D5E8F7; } .gc-barra.gs-limpieza_ordinaria i { background: #56A6E0; }
.gc-barra.gs-limpieza_radical { background: #F3C6C1; } .gc-barra.gs-limpieza_radical i { background: #C9463A; }
.gc-resumen { position: absolute; top: 50%; height: 0.7rem; margin-top: -0.35rem; background: #B9BCD3; border-radius: 3px; z-index: 2; overflow: hidden; }
.gc-resumen i { background: #0A1E44; }
.gc-flechas { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 4; }

.gc-info { margin-top: 0.8rem; border: 1px solid var(--borde); border-radius: var(--radius-card); padding: 0.7rem 1rem; background: var(--color-surface); }
.gc-info h3 { margin: 0 0 0.4rem; font-size: 0.9rem; }
.gc-info dl { margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem 1.2rem; }
.gc-info dl[hidden] { display: none; }
.gc-info dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); font-weight: 700; }
.gc-info dd { margin: 0; font-size: 0.82rem; font-weight: 600; }
.gc-progbar { display: inline-block; width: 70px; height: 8px; border-radius: 4px; background: #E4E6F2; vertical-align: middle; overflow: hidden; margin-right: 0.3rem; }
.gc-progbar i { display: block; height: 100%; background: #3F8F5D; }
.carta-ctl svg { width: 100%; height: auto; max-height: 230px; margin-top: 0.4rem; }

.home-tab-n { opacity: .8; font-weight: 600; }
.alertas-ie { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.alerta-ie { display: flex; align-items: center; gap: 0.8rem; border: 1px solid var(--borde); border-left-width: 5px; border-radius: var(--radius-control); padding: 0.55rem 0.8rem; background: var(--color-surface); }
.alerta-ie-nivel { flex: 0 0 5.2rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.alerta-ie-cuerpo { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.alerta-alta { border-left-color: var(--critico); } .alerta-alta .alerta-ie-nivel { color: var(--critico); }
.alerta-media { border-left-color: var(--warn); } .alerta-media .alerta-ie-nivel { color: #A56A12; }
.alerta-baja { border-left-color: var(--neutro-estado); } .alerta-baja .alerta-ie-nivel { color: var(--texto-suave); }
.alerta-info { border-left-color: var(--violeta); } .alerta-info .alerta-ie-nivel { color: var(--violeta); }
.auto-panel { border: 1px solid var(--borde); background: var(--tinte); border-radius: var(--radius-card); padding: 0.8rem 1rem; margin: 0.6rem 0 0.9rem; }
.auto-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.auto-tabla tr.fila-rec td { background: var(--color-tint-good); font-weight: 600; }
.k-barrido { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.orden-atc { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.3rem; }
.alertas-resumen { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.9rem; margin-bottom: 0.9rem; border: 1px solid var(--borde); border-radius: var(--radius-pill); background: var(--color-surface); box-shadow: var(--shadow-card); }
.alertas-resumen.con-altas { border-color: var(--color-border-critical); background: var(--color-tint-critical); }
.alertas-resumen-tit { font-weight: 800; font-size: 0.82rem; }
.alertas-resumen-top { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ing-nav { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem; background: var(--color-surface); padding: 0.35rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-card); width: fit-content; max-width: 100%; }
.ing-nav a { font-size: 0.84rem; font-weight: 700; text-decoration: none; color: var(--texto-suave); padding: 0.5rem 1rem; border-radius: var(--radius-pill); }
.ing-nav a:hover { background: var(--tinte); color: var(--violeta); }
.ing-nav a.actual { background: #0F2A5C; color: #fff; }
.flujo { list-style: none; margin: 0.8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; position: relative; }
.flujo li { display: flex; gap: 0.9rem; align-items: flex-start; padding: 0.55rem 0; position: relative; }
.flujo li:not(:last-child)::before { content: ""; position: absolute; left: 15px; top: 2.6rem; bottom: -0.3rem; width: 2px; background: var(--borde); }
.flujo-n { flex: 0 0 32px; height: 32px; border-radius: 50%; background: #0F2A5C; color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; z-index: 1; }
.flujo li > div { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.86rem; }
.flujo li > div span { color: var(--texto-suave); }
.bar-chart-barra.critico .relleno { background: var(--critico); }

.ing-resumen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.ing-resumen .panel { margin-bottom: 0; }
.ing-resumen h2 { font-size: var(--text-subtitle); font-weight: 800; margin: 0; }
.alertas-ie-compacta { margin-top: 0.4rem; }
.alertas-ie-compacta .alerta-ie { padding: 0.4rem 0.7rem; }
.ing-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 0.5rem; }
.ing-kpi { display: flex; flex-direction: column; gap: 0.3rem; text-decoration: none; color: var(--texto); border: none; border-radius: var(--radius-card); padding: 1.15rem 1.3rem; background: var(--color-surface); box-shadow: var(--shadow-card); transition: transform .15s ease, box-shadow .15s ease; }
.ing-kpi:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(15, 42, 92, .16); }
.ing-kpi strong { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.ing-kpi strong small { font-weight: 600; font-size: 0.72rem; color: var(--texto-suave); }
.ing-kpi-l { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 700; }
.ing-kpi-s { font-size: 0.76rem; color: var(--texto-suave); }

.ing-kpi-mal { border-color: var(--color-border-critical); background: var(--color-tint-critical); }
.kpi-bar { height: 5px; border-radius: 3px; background: var(--borde); overflow: hidden; margin: 0.2rem 0 0.05rem; }
.kpi-bar-fill { height: 100%; border-radius: 3px; background: var(--color-status-good); }
.kpi-bar-fill.kpi-bar-mal { background: var(--color-status-critical); }
.kpi-bar-fill.kpi-bar-neutro { background: var(--color-accent); }
.kpi-gauge { width: 44px; height: 44px; flex-shrink: 0; }
.kpi-gauge-fondo { fill: none; stroke: var(--borde); stroke-width: 3.2; }
.kpi-gauge-valor { fill: none; stroke: var(--color-status-good); stroke-width: 3.2; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.kpi-gauge-valor.kpi-bar-mal { stroke: var(--color-status-critical); }
.kpi-gauge-txt { font-size: 0.62rem; font-weight: 700; fill: var(--texto); text-anchor: middle; dominant-baseline: middle; }
.ing-kpi-graf { display: flex; align-items: center; gap: 0.5rem; }
.ing-kpi-graf .ing-kpi-textos { flex: 1; min-width: 0; }
@media (max-width: 1100px) { .ing-resumen { grid-template-columns: 1fr; } }
.asistente-form { align-items: flex-end; gap: 0.7rem 1rem; }
.propuesta { margin-top: 1rem; border-top: 1px dashed var(--borde); padding-top: 0.8rem; }
.opciones-repro { list-style: none; margin: 0.4rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.opcion-repro { display: flex; gap: 0.8rem; align-items: center; justify-content: space-between; border: 1px solid var(--borde); border-radius: var(--radius-control); padding: 0.6rem 0.8rem; background: var(--color-surface); }
.opcion-repro.recomendada { border-color: var(--color-status-good); background: var(--color-tint-good); }
.opcion-repro.no-viable { opacity: .7; }
.opcion-repro-cuerpo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.avanzado-repro summary { cursor: pointer; }

.campana-wrap { position: fixed; top: 14px; right: 18px; z-index: 60; }
.campana { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--borde); background: var(--color-surface); color: var(--texto); cursor: pointer; box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; }
.campana:hover { border-color: var(--violeta); color: var(--violeta); }
.campana-n { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--color-status-neutral); color: #fff; font-size: 0.68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.campana-n-alta { background: var(--critico); }
.campana-panel { position: absolute; top: 50px; right: 0; width: min(380px, 92vw); max-height: 70vh; overflow: auto; background: var(--color-surface); border: 1px solid var(--borde); border-radius: var(--radius-card); box-shadow: 0 14px 34px rgba(40, 35, 110, .18); padding: 0.7rem 0.8rem; }
.campana-panel[hidden] { display: none; }
.campana-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; margin-bottom: 0.4rem; }
.campana-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.campana-item a { display: flex; flex-direction: column; gap: 0.05rem; text-decoration: none; color: var(--texto); padding: 0.4rem 0.6rem; border-radius: var(--radius-control); border-left: 4px solid var(--borde); font-size: 0.8rem; }
.campana-item a:hover { background: var(--tinte); }
.campana-item a span { font-size: 0.7rem; color: var(--texto-suave); }
.campana-alta a { border-left-color: var(--critico); } .campana-media a { border-left-color: var(--warn); }
.campana-baja a { border-left-color: var(--neutro-estado); } .campana-info a { border-left-color: var(--violeta); }
.toast-notif { position: fixed; right: 18px; top: 66px; z-index: 59; background: #0A1E44; color: #fff; padding: 0.55rem 0.9rem; border-radius: var(--radius-control); font-size: 0.8rem; font-weight: 600; box-shadow: 0 10px 26px rgba(0,0,0,.25); cursor: pointer; max-width: 320px; }
.toast-notif[hidden] { display: none; }
body.sidebar-oculta .campana-wrap { right: 18px; }
.grilla-cabe td, .grilla-cabe th { font-size: 0.78rem; }
.avanzado-repro-cuerpo .panel { box-shadow: none; border: 1px solid var(--borde); }
.explica-mc { background: var(--tinte); border-radius: var(--radius-control); padding: 0.6rem 0.9rem; margin: 0.5rem 0 0.8rem; font-size: 0.84rem; }
.explica-mc p { margin: 0.25rem 0; }
.ciclos-reorden { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.ciclo-reorden { border: 1px solid var(--borde); border-radius: var(--radius-card); padding: 0.6rem 0.8rem; background: var(--color-surface); }
.ciclo-reorden svg { width: 100%; height: auto; margin-top: 0.3rem; }

/* Avisos chicos del Panel Principal */
.notif-strip { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.notif-strip-tit { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.notif-chip { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; color: var(--texto); background: var(--color-surface); border: 1px solid var(--borde); border-radius: var(--radius-pill); padding: 0.3rem 0.75rem; font-size: 0.78rem; font-weight: 600; box-shadow: var(--shadow-card); max-width: 100%; }
.notif-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--neutro-estado); flex: 0 0 auto; }
.notif-alta i { background: var(--critico); } .notif-media i { background: var(--warn); } .notif-info i { background: var(--violeta); }
.notif-chip:hover { border-color: var(--violeta); }
.notif-mas { font: inherit; font-size: 0.78rem; font-weight: 700; color: var(--violeta); background: var(--tinte); border: none; border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; cursor: pointer; }
.ing-kpis-ancho { margin-bottom: 1rem; }
.ing-kpi-grid-6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 1250px) { .ing-kpi-grid-6 { grid-template-columns: repeat(3, 1fr); } }

/* Guía de metodologías */
.guia-indice { columns: 2; column-gap: 2rem; margin: 0.4rem 0 0; padding-left: 1.2rem; font-size: 0.88rem; }
.guia-indice a { color: var(--violeta); text-decoration: none; font-weight: 600; }
.guia p, .guia li { font-size: 0.88rem; line-height: 1.55; }
.guia-tabla { width: 100%; font-size: 0.8rem; margin: 0.5rem 0; }
.guia-tabla th, .guia-tabla td { padding: 0.35rem 0.55rem; border: 1px solid var(--borde); text-align: left; }
.guia-tabla th { background: var(--color-surface-muted); }
.fila-rec-guia td { background: var(--color-tint-good); }
.guia-lista { margin: 0.3rem 0 0.6rem; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 0.25rem; }
.formula { background: var(--tinte); border-left: 4px solid var(--violeta); padding: 0.5rem 0.8rem; border-radius: var(--radius-control); font-family: var(--font-heading); font-weight: 600; margin: 0.5rem 0; }
@media print {
  .sidebar, .sidebar-abrir, .sidebar-toggle, .campana-wrap, .toast-notif, .no-print, .sidebar-backdrop { display: none !important; }
  body { display: block; background: #fff; }
  .app-main { margin: 0; }
  .panel { box-shadow: none; border: 1px solid #ccc; break-inside: avoid-page; page-break-inside: auto; }
  header.top { background: #fff; }
  main { max-width: none; padding: 0; }
}

/* Limpieza de áreas de apoyo (Cronograma) */
.apoyo-semana { margin-bottom: 1rem; }
.apoyo-dias { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0.6rem; margin-top: 0.5rem; }
.apoyo-dia-card { border: 1px solid var(--borde); border-radius: var(--radius-card); background: var(--color-surface); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.apoyo-dia-fecha { font-weight: 600; font-size: 0.85rem; }
.apoyo-dia-hora { font-size: 0.82rem; }
.apoyo-dia-tec { font-size: 0.8rem; }
.apoyo-dia { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.6rem 0.75rem; border: 1px solid var(--borde); border-left: 4px solid var(--violeta); border-radius: var(--radius-control); background: var(--color-surface); font-size: 0.82rem; }
.apoyo-dia.apoyo-radical { border-left-color: var(--critico); }
.apoyo-hora { font-weight: 700; }

/* Logo = enlace al Panel Principal (sin fila de ícono aparte) */
a.sidebar-brand { text-decoration: none; color: inherit; border-radius: 12px; padding: 0.35rem var(--sp-1); margin: 0 calc(var(--sp-1) * -1); transition: background .15s; }
a.sidebar-brand:hover { background: rgba(255, 255, 255, 0.10); }
a.sidebar-brand.activo { background: rgba(255, 255, 255, 0.14); }
.sidebar { gap: var(--sp-2); }

/* Secciones de página (pestañas): cada pantalla larga se muestra de a una sección */
.sec-nav { display: flex; gap: 0.4rem; flex-wrap: nowrap; overflow-x: auto; position: sticky; top: 0; z-index: 12; padding: 0.55rem 0; margin: 0 0 0.9rem; background: var(--color-bg); scrollbar-width: thin; }
.sec-btn { flex: 0 0 auto; font: inherit; font-size: 0.82rem; font-weight: 700; padding: 0.45rem 0.95rem; border-radius: 999px; border: 1px solid var(--borde); background: var(--color-surface); color: var(--texto); cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; }
.sec-btn:hover { border-color: var(--violeta); color: var(--violeta); }
.sec-btn.activo { background: var(--violeta); border-color: transparent; color: #fff; }
.sec-btn .sec-n { font-size: 0.68rem; opacity: .85; font-weight: 700; }
[data-sec][hidden] { display: none !important; }
@media print { .sec-nav { display: none !important; } [data-sec][hidden] { display: block !important; } }

/* Calendario semanal con hora real */
.tg-wrap { overflow-x: auto; }
.cal-aprobar-fila { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0; }
.cal-aprobar-item { display: flex; align-items: center; gap: 0.5rem; border: 1px solid var(--borde); border-radius: var(--radius-control); padding: 0.4rem 0.6rem; background: var(--color-surface-muted); }
.tg { display: grid; grid-template-columns: 46px repeat(5, minmax(150px, 1fr)); min-width: 860px; border: 1px solid var(--borde); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; }
.tg-esquina { background: var(--color-surface-muted); border-bottom: 1px solid var(--borde); }
.tg-cab { padding: 0.5rem 0.4rem 0.4rem; border-bottom: 1px solid var(--borde); border-left: 1px solid var(--borde); background: var(--color-surface-muted); font-size: 0.78rem; display: flex; flex-direction: column; gap: 0.25rem; }
.tg-cab-nohabil { background: repeating-linear-gradient(135deg, var(--color-surface-muted), var(--color-surface-muted) 6px, var(--borde) 6px, var(--borde) 7px); }
.tg-cab-esp { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; font-size: 0.68rem; font-weight: 700; color: var(--texto-suave); text-align: center; }
.tg-cab-tecs { display: flex; flex-wrap: wrap; gap: 0.2rem; min-height: 1.3rem; }
.tg-tec { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.66rem; font-weight: 700; background: var(--color-surface); border: 1px solid var(--borde); border-radius: 999px; padding: 1px 6px 1px 1px; }
.tg-tec i { width: 15px; height: 15px; border-radius: 50%; color: #fff; font-style: normal; font-size: 0.55rem; display: inline-flex; align-items: center; justify-content: center; }
.tg-tec b { color: var(--critico); }
.tg-tec-extra { border-color: var(--color-border-critical); background: var(--color-tint-critical); }
.tg-horas { position: relative; height: 720px; background: var(--color-surface-muted); }
.tg-horas span { position: absolute; right: 4px; transform: translateY(-50%); font-size: 0.64rem; color: var(--texto-suave); font-weight: 700; }
.tg-dia { position: relative; height: 720px; border-left: 1px solid var(--borde); }
.tg-dia-nohabil { background: repeating-linear-gradient(135deg, var(--color-surface), var(--color-surface) 8px, var(--color-surface-muted) 8px, var(--color-surface-muted) 9px); }
.tg-linea { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid color-mix(in srgb, var(--borde) 70%, transparent); pointer-events: none; }
.tg-banda { position: absolute; left: 0; right: 0; pointer-events: none; display: flex; align-items: center; justify-content: center; }
.tg-banda em { font-size: 0.62rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tg-banda-antes { background: color-mix(in srgb, var(--color-surface-muted) 80%, transparent); border-bottom: 1px dashed var(--borde); }
.tg-banda-almuerzo { background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--warn) 22%, transparent), color-mix(in srgb, var(--warn) 22%, transparent) 6px, transparent 6px, transparent 12px); color: var(--warn); z-index: 1; }
.tg-banda-extra { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--critico) 12%, transparent), color-mix(in srgb, var(--critico) 12%, transparent) 6px, transparent 6px, transparent 12px); border-top: 2px solid var(--critico); color: var(--critico); align-items: flex-start; padding-top: 2px; }
.tg-cols { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 0 2px; }
.tg-col { position: relative; }
.tg-bloque { position: absolute; left: 0; right: 0; z-index: 2; box-sizing: border-box; border-left: 4px solid var(--violeta); border-radius: 6px; padding: 2px 4px; overflow: hidden; display: flex; flex-direction: column; gap: 1px; font-size: 0.66rem; line-height: 1.2; cursor: default; box-shadow: 0 1px 2px rgba(15, 42, 92, .12); }
.tg-bloque.cal-editable { cursor: pointer; }
.tg-bloque.cal-editable:hover, .tg-bloque.cal-editable:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.tg-b-tit { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-b-hora { color: var(--texto-suave); white-space: nowrap; }
.tg-b-tecs { display: flex; gap: 2px; margin-top: auto; }
.tg-b-tecs i { width: 15px; height: 15px; border-radius: 50%; color: #fff; font-style: normal; font-size: 0.55rem; display: inline-flex; align-items: center; justify-content: center; }
.tg-b-tecs i.tg-sin { background: var(--neutro-estado); }
.tg-extra { outline: 2px solid var(--critico); outline-offset: -2px; background-image: repeating-linear-gradient(135deg, rgba(181, 72, 58, .16), rgba(181, 72, 58, .16) 5px, transparent 5px, transparent 10px); }
.tg-apoyo { left: 2px; right: 2px; z-index: 3; flex-direction: row; align-items: center; gap: 0.5rem; }
.tg-leyenda-almuerzo { background: repeating-linear-gradient(90deg, var(--warn), var(--warn) 3px, transparent 3px, transparent 6px); }
.tg-leyenda-extra { background: repeating-linear-gradient(135deg, var(--critico), var(--critico) 3px, transparent 3px, transparent 6px); }

/* Regla de horas del Gantt del Cronograma */
.gantt-tick { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed color-mix(in srgb, var(--borde) 80%, transparent); pointer-events: none; z-index: 0; }
.gantt-tick::before { content: attr(data-h); position: absolute; top: 1px; left: 2px; font-size: 0.56rem; font-style: normal; color: var(--texto-suave); font-weight: 700; }

.chip-datos { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 700; text-decoration: none; color: var(--warn); background: var(--color-tint-warning); border: 1px solid var(--color-border-warning); border-radius: var(--radius-pill); padding: 0.15rem 0.6rem; margin-left: 0.5rem; }
.chip-datos:hover { filter: brightness(0.95); }

.ing-kpi-grid-6 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1250px) { .ing-kpi-grid-6 { grid-template-columns: repeat(3, 1fr); } }


main.main-ancho { max-width: none; }
.home-tabs { width: 100%; border-radius: var(--radius-lg, 18px); }
.kpi-grupo { margin: 1.6rem 0 0.7rem; font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-suave); font-weight: 800; }
.kpi-grupo:first-of-type { margin-top: 0.4rem; }
.kpi-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.1rem; }
.kpi-fila .ing-kpi { min-height: 96px; }
.acceso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.7rem; }
.acceso { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.9rem 1rem; border: 1px solid var(--borde, #e3e2f0); border-radius: 14px;
  background: var(--color-surface, #fff); text-decoration: none; color: var(--texto); border-left: 4px solid var(--violeta); transition: transform .15s, box-shadow .15s; }
.acceso:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); background: var(--tinte); }
.acceso strong { font-size: 0.92rem; }
.acceso span { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.35; }
@media (min-width: 1181px) { .dash-fila { grid-template-columns: 300px minmax(0, 1fr) 260px; } }
.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1rem; margin-top: 0.8rem; }


.curso-cab { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; align-items: start; margin-bottom: 1rem; }
.curso-cab .meta-ficha { margin-bottom: 0; }
.curso-resumen { border: 1px solid var(--borde); border-radius: 12px; padding: 0.7rem 0.9rem; background: var(--color-surface); }
.curso-resumen h3 { margin: 0 0 0.4rem; }
.curso-conteo { list-style: none; margin: 0; padding: 0; font-size: 0.82rem; }
.curso-conteo li { display: flex; justify-content: space-between; padding: 0.22rem 0; border-bottom: 1px dashed var(--borde); }
.curso-conteo li.total { font-weight: 800; border-bottom: none; }
.curso-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.6rem; }
.curso-cifras div { background: var(--tinte); border-radius: 8px; padding: 0.4rem 0.5rem; display: flex; flex-direction: column; }
.curso-cifras b { font-size: 0.9rem; }
.curso-cifras span { font-size: 0.66rem; color: var(--texto-suave); text-transform: uppercase; }
@media (max-width: 1000px) { .curso-cab { grid-template-columns: 1fr; } }

.et-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.et-kpis .kpi-tile { min-height: 110px; cursor: default; }
.et-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.et-graficos .panel { margin: 0; }
.et-leyenda { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.74rem; color: var(--texto-suave); margin: 0.3rem 0 0.6rem; align-items: center; }
.et-leyenda span[class^="c-"] { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: -0.5rem; }
.c-obs { background: #9DB6DD; } .c-nor { background: #4F7FCB; } .c-est { background: #0F2A5C; }
.c-tva { background: #1e9e7f; } .c-tnva { background: #4F7FCB; } .c-tnvan { background: #e08a4c; }
.c-ok { background: #1e9e7f; } .c-mal { background: #d9534f; }
.et-grupo { margin-bottom: 0.8rem; }
.et-fila { display: grid; grid-template-columns: minmax(0, 1fr) 84px; gap: 0.5rem; align-items: center; font-size: 0.78rem; margin-top: 0.2rem; }
.et-pista { background: var(--tinte); border-radius: 6px; height: 14px; overflow: hidden; }
.et-barra { height: 100%; border-radius: 6px; }
.et-apilada { display: flex; height: 34px; border-radius: 8px; overflow: hidden; color: #fff; font-weight: 800; font-size: 0.8rem; }
.et-apilada div { display: flex; align-items: center; justify-content: center; }
.et-muestra { grid-template-columns: 110px minmax(0, 1fr) 60px; }
.subtabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0 1rem; padding: 0.3rem; background: var(--color-surface); border-radius: 999px; box-shadow: var(--shadow-card); width: fit-content; max-width: 100%; }
.subtab { border: none; background: transparent; padding: 0.45rem 0.95rem; border-radius: 999px; font-weight: 700; font-size: 0.82rem; color: var(--texto-suave); cursor: pointer; }
.subtab:hover { background: var(--tinte); color: var(--violeta); }
.subtab.actual { background: #0F2A5C; color: #fff; }
@media print { .subtabs { display: none !important; } .subpanel[hidden] { display: none !important; } }

.kpis-avisos { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 1rem; margin-bottom: 1.25rem; align-items: stretch; }
.kpis-avisos .panel { margin-bottom: 0; }
.avisos-lista h2 { font-size: var(--text-subtitle); margin: 0 0 0.5rem; }
.avisos-lista ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.avisos-lista a { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.8rem; text-decoration: none; color: var(--texto); padding: 0.4rem 0.55rem; border-radius: 10px; background: var(--tinte); line-height: 1.3; }
.avisos-lista a i { flex: 0 0 8px; height: 8px; border-radius: 50%; margin-top: 0.3rem; background: #c98a2e; }
.avisos-lista a.notif-alta i { background: #c0392b; }
.avisos-lista .notif-mas { margin-top: 0.5rem; }
@media (max-width: 1100px) { .kpis-avisos { grid-template-columns: 1fr; } }
.acceso-columnas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.9rem; align-items: start; }
.acceso-caja { border: 1px solid var(--borde, #e3e2f0); border-radius: 16px; padding: 0.3rem 0.8rem 0.8rem; background: var(--tinte); }
.acceso-caja .acceso-grid { grid-template-columns: 1fr; }
.acceso-caja-titulo { display: flex; align-items: center; gap: 0.5rem; }
.acceso-caja-icono { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; }
.acceso-caja-icono svg { width: 15px; height: 15px; }
.acceso-caja-plan { background: var(--color-tint); }
.acceso-caja-plan .acceso-caja-icono { background: color-mix(in srgb, var(--color-accent) 18%, transparent); color: var(--color-accent); }
.acceso-caja-op { background: var(--color-tint-good); }
.acceso-caja-op .acceso-caja-icono { background: color-mix(in srgb, var(--color-status-good) 20%, transparent); color: var(--color-status-good); }
.acceso-caja-met { background: var(--color-tint-warning); }
.acceso-caja-met .acceso-caja-icono { background: color-mix(in srgb, var(--color-status-warning) 20%, transparent); color: var(--color-status-warning); }
.acceso-caja-sis { background: var(--color-tint-neutral); }
.acceso-caja-sis .acceso-caja-icono { background: color-mix(in srgb, var(--color-status-neutral) 22%, transparent); color: var(--color-status-neutral); }
@media (max-width: 1300px) { .acceso-columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .acceso-columnas { grid-template-columns: 1fr; } }
.curso-conteo { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
.curso-cab { align-items: stretch; }
.curso-cab .meta-ficha td, .curso-cab .meta-ficha th { padding: 0.5rem 0.6rem; }
.curso-cifras b { font-size: 0.85rem; white-space: nowrap; }
.kpi-fila { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1250px) { .kpi-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gc-barra { height: 1.6rem; margin-top: -0.8rem; border-radius: 6px; box-shadow: 0 1px 2px rgba(20, 20, 60, .25); }
.gc-resumen { height: 0.55rem; }
.gc-hija .gc-c { min-height: 3rem; }
.gc-padre .gc-c { min-height: 3.2rem; }
.gc-c-id { font-weight: 700; font-size: 0.78rem; }
.gc-nlotes { margin-left: 0.4rem; font-size: 0.7rem; color: var(--texto-suave); font-weight: 600; background: var(--tinte); padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.gc-row { grid-template-columns: 44px 220px 92px 62px 46px 92px minmax(520px, 1fr); }

.tg { min-width: 0; grid-template-columns: 52px repeat(5, minmax(0, 1fr)); }
.tg-horas, .tg-dia { height: 840px; }
.tg-bloque { padding: 3px 6px; font-size: 0.72rem; }
.tg-b-tit { font-size: 0.74rem; }
.tg-cab { font-size: 0.85rem; padding: 0.6rem 0.6rem; }
.cal-filtro { margin: 0.2rem 0 0.8rem; }

.plano-apoyo { position: absolute; transform: translate(-50%, -50%); font-size: 0.62rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 999px;
  background: #fff; border: 2px solid var(--ok); color: var(--texto); box-shadow: var(--shadow-float); white-space: nowrap; pointer-events: auto; }
.plano-apoyo[data-estado="ordinaria"] { border-color: var(--violeta); }
.plano-apoyo[data-estado="radical"] { border-color: var(--critico); }
.plano-apoyo[data-estado="pendiente"] { border-color: var(--warn); }

.btn-imprimir { position: fixed; top: 0.9rem; right: 4.6rem; z-index: 30; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.45rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--color-surface); color: var(--violeta); font-weight: 700; font-size: 0.78rem; cursor: pointer; box-shadow: var(--shadow-card); }
.btn-imprimir:hover { background: var(--tinte); }
@page { size: A4 landscape; margin: 10mm; }
@media print {
  .sidebar, .sidebar-toggle, .sidebar-backdrop, .sidebar-abrir, .campana-wrap, .toast-notif, .btn-imprimir, .home-tabs, .ing-nav, .subtabs, .cal-nav, .btn-chip, .btn-export { display: none !important; }
  .app-main { width: 100% !important; margin: 0 !important; padding: 0 !important; }
  main, main.main-ancho { max-width: none !important; padding: 0 !important; }
  .panel { break-inside: avoid; box-shadow: none !important; border: 1px solid #ccc !important; }
  .home-panel[hidden], .subpanel[hidden] { display: block !important; }
  body { background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

.resumen-semana-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.2rem; align-items: stretch; }
.resumen-donuts { display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
.resumen-kpis { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
.resumen-barras .col-chart { height: 150px; }
@media (max-width: 1150px) { .resumen-semana-grid { grid-template-columns: 1fr; } .resumen-donuts { flex-direction: row; } }

.tg-horas, .tg-dia { height: 960px; }
.tg-bloque { flex-direction: row; flex-wrap: wrap; align-content: flex-start; align-items: center; column-gap: 0.5rem; row-gap: 0; padding: 2px 6px; line-height: 1.25; }
.tg-b-tit { flex: 0 1 auto; max-width: 100%; }
.tg-b-tecs { margin-top: 0; margin-left: auto; }
.tg-apoyo { align-content: center; }

.plano-apoyo { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; line-height: 1.3; padding: 0.2rem 0.6rem; }
.plano-apoyo .chip-codigo { flex: 0 0 auto; min-width: 2.2rem; text-align: center; font-size: 0.66rem; line-height: 1.3; padding: 0.1rem 0.35rem; }
.resumen-barras .chart-leyenda { margin-bottom: 1.2rem; }
.resumen-barras .col-chart { margin-top: 0.4rem; }

.tg-bloque.cal-bloque-pesaje.tg-esp-pesajei { background: #1F5FBF; border-left-color: #123E82; color: #fff; }
.tg-bloque.cal-bloque-pesaje.tg-esp-pesajeii { background: #0F927E; border-left-color: #0A6B5C; color: #fff; }
.tg-bloque.cal-bloque-limpieza_ordinaria { background: #56A6E0; border-left-color: #2F7FC1; color: #fff; }
.tg-bloque.cal-bloque-limpieza_radical { background: #C9463A; border-left-color: #8F2A20; color: #fff; }
.tg-bloque.cal-bloque-pesaje .tg-b-hora, .tg-bloque.cal-bloque-limpieza_ordinaria .tg-b-hora, .tg-bloque.cal-bloque-limpieza_radical .tg-b-hora { color: rgba(255, 255, 255, .85); }
.tg-bloque.cal-bloque-turno_extra { background: #E7A93B; color: #3a2a00; border-left-color: #b57d12; }
.tg-bloque.cal-bloque-mantenimiento { background: #8A9199; color: #fff; border-left-color: #5b6269; }
/* Áreas de apoyo: mismo color por tipo de limpieza, pero transparente y con borde punteado */
.tg-bloque.tg-apoyo { border: 2px dashed currentColor; border-left-width: 2px; opacity: .6; color: #1d1b4a; }
.tg-bloque.tg-apoyo.cal-bloque-limpieza_ordinaria { background: rgba(86, 166, 224, .45); border-color: #2F7FC1; }
.tg-bloque.tg-apoyo.cal-bloque-limpieza_radical { background: rgba(201, 70, 58, .40); border-color: #8F2A20; }
.tg-bloque.tg-apoyo .tg-b-hora { color: #1d1b4a; }
.gs-k.gs-apoyo { background: rgba(86, 166, 224, .4); border: 2px dashed #2F7FC1; }
/* el apoyo va a todo el ancho del día, transparente y con borde punteado (queda encima de los bloques de las salas) */
.tg-dia .tg-cols { left: 0; }
.tg-bloque.tg-apoyo { left: 2px; right: 2px; width: auto; padding: 2px 6px; justify-content: flex-start; align-content: center; opacity: .6; z-index: 3; }
.tg-bloque.tg-apoyo .tg-b-tit { writing-mode: horizontal-tb; transform: none; font-size: 0.74rem; letter-spacing: 0; }
.tg-bloque.tg-apoyo .tg-b-hora { display: inline; }

.tabla-pedidos input, .tabla-pedidos select { font-size: 0.78rem; padding: 0.25rem 0.35rem; }
.tabla-pedidos td { vertical-align: top; }
.tabla-pedidos form[id^="g-"], .tabla-pedidos form[id^="c-"], .tabla-pedidos form[id^="alta-"] { display: none; }
.fila-cambio td { background: #FFF6BF; }
.chip.cambio-amarillo { background: #F5D742; color: #4a3b00; }
.fila-alta td { background: var(--tinte); border-bottom: 2px solid var(--violeta); }
.fila-alta button { background: var(--violeta); color: #fff; border: none; border-radius: var(--radius-pill); padding: 0.3rem 0.7rem; font-weight: 700; cursor: pointer; white-space: nowrap; }

.switch-form { display: inline-block; margin: 0; }
.switch { position: relative; display: inline-block; width: 34px; height: 20px; vertical-align: middle; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .slider { position: absolute; inset: 0; background: var(--borde, #ccc); transition: background .15s; border-radius: 999px; cursor: pointer; }
.switch .slider::before { content: ""; position: absolute; height: 14px; width: 14px; left: 3px; top: 3px; background: #fff; transition: transform .15s; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.switch input:checked + .slider { background: var(--ok, #1e9e5b); }
.switch input:checked + .slider::before { transform: translateX(14px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--violeta); outline-offset: 2px; }
tr.fila-apagada { opacity: .55; }

.pedido-alta-card {
  border: 1px solid var(--borde); border-left: 3px solid var(--violeta); border-radius: var(--radius-card);
  background: var(--tinte); padding: 0.9rem 1rem 1rem; margin: 0.7rem 0 1rem;
}
.pedido-alta-card h3.sub { margin: 0 0 0.6rem; }
.pedido-alta-card .form-inline label { min-width: 6rem; }

.pedido-historial { display: flex; flex-direction: column; gap: 0.5rem; }
.pedido-card { border: 1px solid var(--borde); border-radius: var(--radius-card); background: var(--color-surface); overflow: hidden; }
.pedido-card[open] { border-color: var(--violeta); }
.pedido-card.fila-cambio { border-left: 3px solid var(--warn); }
.pedido-card-resumen {
  display: grid; grid-template-columns: 84px minmax(160px, 1.6fr) 84px minmax(110px, 1fr) minmax(130px, 1.2fr) auto auto auto;
  gap: 0.5rem 0.7rem; align-items: center; padding: 0.6rem 0.9rem; cursor: pointer; list-style: none;
}
.pedido-card-resumen::-webkit-details-marker { display: none; }
.pedido-card-resumen::marker { content: ""; }
.pedido-card-lote { font-weight: 700; }
.pedido-card-campo { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pedido-card-etq { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--texto-suave); }
.pedido-card-toggle { font-size: 0.75rem; font-weight: 700; color: var(--violeta); white-space: nowrap; }
.pedido-card[open] .pedido-card-toggle::after { content: " ▴"; }
.pedido-card:not([open]) .pedido-card-toggle::after { content: " ▾"; }
.pedido-card-edicion { border-top: 1px solid var(--borde); padding: 0.8rem 0.9rem; background: var(--color-surface-muted); }
.pedido-card-acciones { display: flex; gap: 0.6rem; margin-top: 0.7rem; }
@media (max-width: 900px) {
  .pedido-card-resumen { grid-template-columns: 1fr 1fr; }
}

@media screen {
  body { background: var(--color-bg); font-family: var(--font-body); color: var(--color-ink); }
  h1, h2, h3, .panel h2 { font-family: var(--font-heading); }

  /* Encabezado de cada pantalla: banda azul marino (Power BI "Executive Sales Overview"). */
  header.top {
    background: #0F2A5C;
    border-bottom: none; color: #fff; padding-top: 1.1rem; padding-bottom: 1.2rem; padding-right: 13rem;
    box-shadow: 0 6px 20px rgba(10, 30, 68, .18);
  }
  header.top .crumb { color: #9DB6DD; font-weight: 500; }
  header.top h1 { color: #fff; font-weight: 700; letter-spacing: -0.01em; font-size: 1.85rem; }

  /* Títulos de sección: mayúscula, pesados, con barra de acento debajo (Qineqt). */
  .panel h2 {
    font-size: 1.02rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-ink); padding-bottom: 0.45rem; position: relative; margin-bottom: 1rem;
  }
  .panel h2::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 38px; height: 3px;
    border-radius: 3px; background: var(--color-accent);
  }
  .panel h2 .nc, .panel h2 small { text-transform: none; letter-spacing: 0; font-weight: 500; }
  .panel-head-flex h2 { margin-bottom: 0.6rem; }

  /* Tarjetas: blancas, sin borde, sombra doble suave, radio grande. */
  .panel { border: none; border-radius: 14px; box-shadow: var(--shadow-card); background: var(--color-surface); }
  .panel:hover { box-shadow: 0 2px 4px rgba(15, 42, 92, .05), 0 12px 30px rgba(15, 42, 92, .11); }

  /* Banner de bienvenida del Panel Principal: bloque azul sólido con texto blanco (no un tinte pálido). */

  /* Pastillas de "Operación de la semana": misma paleta de las referencias (azul, naranja, verde, marino). */

  /* Números: tinta oscura y peso fuerte (en las referencias el dato es negro/azul marino, no de color). */
  .ing-kpi strong, .stat-kpi .v, .stat .v { font-family: var(--font-heading); color: var(--color-ink); }
  .kpi-fila.kpi-fila-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ing-kpi strong { white-space: nowrap; }
  .ing-kpi strong.ing-kpi-compuesto { font-size: 1.4rem; }
  @media (max-width: 1250px) { .kpi-fila.kpi-fila-3 { grid-template-columns: 1fr; } }
  .ing-kpi-l, .stat .l, .kpi-grupo { font-family: var(--font-heading); }
  .kpi-grupo { color: var(--color-accent); }

  /* Pestañas y botones principales en azul real. */
  .home-tabs, .subtabs { background: var(--color-surface); box-shadow: var(--shadow-card); }
  .btn-export, button[type="submit"]:not(.btn-chip):not(.subtab):not(.link-producto) {
    background: #0F2A5C; color: #fff; border: none;
  }
  .btn-chip { border-color: var(--color-border); }
  .btn-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }

  /* Tablas: encabezado gris azulado, filas cebra suaves (Power BI "Top 5 Products"). */
  th { background: #F3F6FB; color: #3D4F6E; }
  tbody tr:nth-child(even) td { background: #FAFBFD; }
  tbody tr:hover td { background: #EEF4FC; }
}


/* Foco visible (accesibilidad): el anillo anterior (acento al 55% con blanco, #84A7DC) medía 2,46:1
   contra el blanco de las tarjetas — por debajo del 3:1 que pide WCAG para un indicador de foco.
   El acento sólido mide 6,09:1 sobre blanco y 5,42:1 sobre el fondo. */
.kpi-tile:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--color-accent); outline-offset: 2px;
}
/* La campana y "Imprimir" flotan sobre la banda azul marino del encabezado (y sobre blanco al bajar):
   un halo blanco por fuera del anillo lo hace visible sobre los dos fondos. */
.campana:focus-visible, .btn-imprimir:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; box-shadow: 0 0 0 7px #fff; }

@media screen {
  /* Números tabulares (tipografía): los dígitos de ancho parejo no "bailan" entre tarjetas y columnas. */
  table, .ing-kpi strong, .stat .v, .stat-kpi .v, .kpi-gauge-txt, .donut span, .col-bar span,
  .mini-cal-dia, .campana-n, .acc-hoy-n { font-variant-numeric: tabular-nums; }

  /* Jerarquía de títulos (tipografía): h3.sub medía 18px y el h2 de su panel 16px — el hijo le ganaba al padre. */
  h3.sub { font-size: 0.95rem; font-weight: 700; }

  /* Radios anidados (UI): el panel tenía 3 radios según la regla que ganara (16, 18 y 14px) y las tarjetas
     de adentro (16px) eran MÁS redondas que el panel que las contiene. Ahora: panel 20px, tarjeta interna 12px,
     y en "Ir a" la caja 16px con 8px de relleno lateral y el acceso de adentro 8px (16 = 8 + 8). */
  .panel { border-radius: 20px; }
  .ing-kpi, .stat, .stat-kpi { border-radius: 12px; }
  .acceso-caja { border-radius: 16px; padding: 0.3rem 8px 8px; }
  .acceso { border-radius: 8px; }

  /* El acento azul significa "se puede tocar": un rótulo estático no lo lleva (colores). */
  .kpi-grupo { color: var(--color-ink); }

  /* Un panel estático no se levanta al pasar el mouse (parecía clicable); sí las tarjetas que son enlaces. */
  .panel:hover { box-shadow: var(--shadow-card); }

  /* Contraste del texto blanco sobre las pastillas de color (colores): naranja #F7A955 medía 1,95:1 y
     verde #34C27A 2,30:1. Se oscureció la luminosidad (no el tono) hasta >= 4,5:1 en los dos extremos
     del degradé, y el texto chico pasa a blanco pleno. */

  /* Banner: el subtítulo #E1ECFA sobre el extremo celeste medía 2,22:1. */

  /* Respuesta al presionar (UI): 0.96 exacto, también en las tarjetas que son enlaces. */
  a.ing-kpi, a.acceso { transition-property: transform, box-shadow; transition-duration: .15s; transition-timing-function: ease-out; }
  .btn-chip:active, button:active, a.ing-kpi:active, a.acceso:active { transform: scale(.96); }
}

/* Pantallas angostas (diseño): con la etiqueta viewport, el encabezado guardaba 13rem a la derecha para
   "Imprimir" y la campana — a 320px el título quedaba en una columna de 80px. Abajo de 640px esos dos
   botones flotan ARRIBA del título en vez de al costado. */
@media screen and (max-width: 640px) {
  header.top { padding-top: 4.2rem; padding-right: var(--sp-4); }
  header.top h1 { font-size: 1.5rem; }
}

.acc-hoy-resumen { font-size: 0.85rem; color: var(--texto-suave); }
.acc-hoy-n { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--color-ink); }
.acc-hoy-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.acc-hoy-item { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px; background: var(--color-surface-muted); }
.acc-hoy-icono { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; }
.acc-hoy-icono svg { width: 20px; height: 20px; }
.acc-hoy-alta .acc-hoy-icono { background: var(--color-tint-critical); color: #9B1C1C; }
.acc-hoy-media .acc-hoy-icono { background: var(--color-tint-warning); color: #8A4B0C; }
.acc-hoy-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-hoy-textos strong { font-size: 0.95rem; color: var(--color-ink); text-wrap: pretty; }
.acc-hoy-textos span { font-size: 0.82rem; color: var(--texto-suave); overflow-wrap: anywhere; }
.acc-hoy-nivel { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.acc-hoy-alta .acc-hoy-nivel { background: var(--color-tint-critical); color: #9B1C1C; }
.acc-hoy-media .acc-hoy-nivel { background: var(--color-tint-warning); color: #8A4B0C; }
.acc-hoy-btn { white-space: nowrap; }
.acc-hoy-vacio { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px; border-radius: 12px; background: var(--color-tint-good); }
.acc-hoy-vacio strong { color: #14532D; }
.acc-hoy-vacio span { color: var(--texto-suave); font-size: 0.85rem; flex: 1 1 16rem; }
@media (max-width: 640px) {
  .acc-hoy-item { grid-template-columns: auto 1fr; }
  .acc-hoy-nivel { grid-column: 2; justify-self: start; }
  .acc-hoy-btn { grid-column: 1 / -1; justify-content: center; }
}

.aviso-estancados { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: 1.25rem; border-radius: 12px;
  background: var(--color-tint-warning); color: #8A4B0C; box-shadow: inset 4px 0 0 #B45309; }
.aviso-estancados-critico { background: var(--color-tint-critical); color: #9B1C1C; box-shadow: inset 4px 0 0 #B42318; }
.aviso-estancados svg { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
/* Avisos de la programación: siempre a la vista (no se esconden solos como los .msg) */
.avisos-prog { display: grid; gap: .6rem; margin-bottom: 1.25rem; }
.avisos-prog > h2 { margin: 0; font-size: 1rem; }
.avisos-prog-grupo { border-radius: 12px; padding: .7rem 1rem; font-size: .88rem; }
.avisos-prog-grupo ul { margin: .35rem 0 0; padding-left: 1.2rem; }
.avisos-prog-critico { background: var(--color-tint-critical); color: #9B1C1C; box-shadow: inset 4px 0 0 #B42318; }
.avisos-prog-extra { background: var(--color-tint-warning); color: var(--warn); box-shadow: inset 4px 0 0 var(--warn); }
.avisos-prog-sug { background: var(--tinte); color: var(--texto); box-shadow: inset 4px 0 0 var(--violeta); }
.aviso-estancados strong { display: block; }
.aviso-estancados-lotes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aviso-estancados-lotes a { font-size: 0.8rem; font-weight: 600; color: inherit; background: rgba(255, 255, 255, .7); padding: 2px 10px; border-radius: 999px; text-decoration: none; font-variant-numeric: tabular-nums; }
.aviso-estancados-lotes a:hover { background: #fff; text-decoration: underline; }
.chip.chip-vencido { background: var(--color-tint-critical); color: #9B1C1C; }
.chip.chip-proximo { background: var(--color-tint-warning); color: #8A4B0C; }

select { max-width: 100%; }
@media (max-width: 640px) {
  .tabs { flex-wrap: wrap; }
  .form-inline label { max-width: 100%; }
}

.cal-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0.2rem 0 1rem; }
.cal-acciones .btn-export { margin: 0; }
.cal-probar { margin: 0 0 0 auto; }
.cal-chip-riesgo { background: var(--color-tint-critical); color: #9B1C1C; border-color: transparent; }
body.cal-modo-repro .tg-col[data-fecha] { cursor: cell; }    /* en Reprogramación un hueco se toca para registrar un paro */
.tg-bloque.cal-editable { cursor: grab; }
.tg-bloque.cal-editable:active { cursor: grabbing; }
.tg-bloque.cal-riesgo { box-shadow: inset 0 0 0 2px #B42318, 0 1px 2px rgba(15, 42, 92, .12); }
.tg-b-riesgo { color: #B42318; font-weight: 800; }
.tg-bloque.cal-movido { outline: 2px dashed var(--color-accent); outline-offset: 1px; }
/* Casilleros para soltar: invisibles hasta que se arrastra un lote. */
.tg-slot { position: absolute; left: 0; right: 0; z-index: 1; border-radius: 6px; pointer-events: none; opacity: 0;
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 2px 4px; }
.tg-slot span { font-size: 0.6rem; font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
body.cal-arrastrando .tg-slot { pointer-events: auto; opacity: 1; z-index: 3; border: 2px dashed color-mix(in srgb, var(--color-accent) 45%, #fff);
  background: color-mix(in srgb, var(--color-accent) 6%, transparent); }
body.cal-arrastrando .tg-slot.encima { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
/* Pedidos en riesgo e Historial: plegables debajo del Calendario. */
.cal-plegable > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; }
.cal-plegable > summary::-webkit-details-marker { display: none; }
.cal-plegable > summary::before { content: "▸"; color: var(--texto-suave); transition: transform .15s ease-out; }
.cal-plegable[open] > summary::before { transform: rotate(90deg); }
.cal-plegable > summary h2 { margin: 0; }
.cal-plegable[open] > summary { margin-bottom: 0.8rem; }
/* Diálogos */
.cal-impacto { margin-top: 0.8rem; }
.cal-impacto:empty { display: none; }
.cal-impacto p { margin: 0 0 0.5rem; }
.cal-impacto .msg { margin: 0.3rem 0; }
.cal-dlg-riesgo { background: var(--color-tint-critical); color: #9B1C1C; border-radius: 12px; padding: 10px 12px; margin-bottom: 0.9rem; }
.cal-dlg-riesgo p { margin: 0 0 0.5rem; }
.cal-dlg-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.paro-duracion { border: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex-basis: 100%; }
.paro-duracion legend { font-size: 0.8rem; color: var(--texto-suave); padding: 0; margin-bottom: 4px; }
.paro-dur-op input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.paro-dur-op span { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--color-border);
  background: var(--color-surface); font-size: 0.85rem; font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums; }
.paro-dur-op input:checked + span { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.paro-dur-op input:focus-visible + span { outline: 3px solid var(--color-accent); outline-offset: 2px; }
.paro-dur-otro { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--texto-suave); }
.paro-dur-otro input { width: 5.5rem; }
#form-paro .dlg-acciones { flex-basis: 100%; flex-wrap: wrap; }
#form-paro .cal-impacto { flex-basis: 100%; }

.tec-operaciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 8px; margin: 0 0 1rem; }
.tec-op { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--color-surface-muted); }
.tec-op-n { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 1.25rem; color: #fff; background: var(--color-accent); font-variant-numeric: tabular-nums; }
.tec-op-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tec-op-t strong { font-size: 0.9rem; color: var(--color-ink); }
.tec-op-t span { font-size: 0.78rem; color: var(--texto-suave); }
.tec-reparto-accion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 1rem; }
.tec-reparto-accion .btn-export { margin: 0; }
.tec-detalle { margin-top: 1rem; }
.tec-detalle > summary { cursor: pointer; padding: 6px 0; }
.tec-roles select { min-width: 10rem; }

.kanban-tabla td { vertical-align: middle; }
.kanban-stock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
.kanban-stock input[type=number] { width: 6.5rem; }
.kanban-ref { margin-top: 1.3rem; }
.kanban-ref > summary { cursor: pointer; padding: 6px 0; }
/* mini balde de la fila: relleno = nivel al final, rayita = MÍN */
.mini-balde { position: relative; display: inline-block; vertical-align: middle; width: 26px; height: 32px; margin-right: 8px;
  border: 2px solid #8A96AB; border-top-width: 3px; border-radius: 3px 3px 7px 7px; background: #F3F6FB; overflow: hidden; }
.mini-balde i { position: absolute; left: 0; right: 0; bottom: 0; background: #1E9E5A; }
.mini-balde-justo i { background: #B45309; }
.mini-balde-falta i { background: #B42318; }
.mini-balde b { position: absolute; left: -2px; right: -2px; height: 0; border-top: 2px dashed #B42318; }

/* simulador */
.simu { margin-top: 1.2rem; border-radius: 16px; padding: 14px 16px 10px; background: #F7F9FC; box-shadow: inset 0 0 0 1px var(--color-border); }
.simu-barra { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-bottom: 10px; }
.simu-barra label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; color: var(--texto-suave); }
.simu-btn { width: 64px; height: 64px; border-radius: 50%; border: none; color: #fff; font-weight: 800; font-size: 0.78rem; letter-spacing: .05em; cursor: pointer;
  box-shadow: 0 4px 10px rgba(15, 42, 92, .18), inset 0 -4px 0 rgba(0, 0, 0, .18); transition-property: transform, filter; transition-duration: .15s; }
.simu-start { background: radial-gradient(circle at 35% 30%, #34C27A, #157A45); }
.simu-stop { background: radial-gradient(circle at 35% 30%, #E86A6A, #B42318); }
.simu-start.activo { filter: brightness(1.15); box-shadow: 0 0 0 4px rgba(30, 158, 90, .35), inset 0 -4px 0 rgba(0, 0, 0, .18); }
.simu-btn:active { transform: scale(.96); }
.simu-cuerpo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 820px) { .simu-cuerpo { grid-template-columns: minmax(0, 1fr); } }
.simu-planta { width: 100%; height: auto; background: #fff; border-radius: 12px; box-shadow: var(--shadow-card); }
.simu-caja { fill: #F3F6FB; stroke: #B8C2D3; stroke-width: 1.5; }
.simu-rot { font: 700 10px var(--font-body); fill: #3D4F6E; letter-spacing: .04em; }
.simu-dato { font: 600 11px var(--font-body); fill: var(--color-ink); font-variant-numeric: tabular-nums; }
.simu-estado { font: 800 12px var(--font-body); fill: #8A96AB; }
.simu-balde-lleno { fill: #3B82E0; stroke: #1F5FBF; }
.simu-cano { fill: none; stroke: #9AA6B8; stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; }
.simu-cano.fluye { stroke: #56A6E0; stroke-dasharray: 14 8; animation: simu-fluir .6s linear infinite; }
@keyframes simu-fluir { to { stroke-dashoffset: -22; } }
.simu-bomba { fill: #C9D2DF; stroke: #6B7A92; stroke-width: 2; }
.simu-bomba.on { fill: #1E9E5A; stroke: #157A45; }
.simu-bomba-txt { font: 800 12px var(--font-body); fill: #fff; pointer-events: none; }
.simu-valvula { fill: #C9D2DF; stroke: #6B7A92; stroke-width: 2; }
.simu-valvula.on { fill: #B42318; stroke: #8A1B12; }
.simu-tanque { fill: #E6EBF2; stroke: #6B7A92; stroke-width: 3; }
.simu-liquido { fill: #1E9E5A; }
.simu-liquido.simu-verde { fill: #1E9E5A; }
.simu-liquido.simu-ambar { fill: #D97706; }
.simu-liquido.simu-rojo { fill: #B42318; }
.simu-max { stroke: #1F5FBF; stroke-width: 2; }
.simu-min { stroke: #B42318; stroke-width: 2; stroke-dasharray: 6 4; }
.simu-lim { font: 800 10px var(--font-body); fill: #1F5FBF; }
.simu-lim-min { fill: #B42318; }
.simu-lit { fill: #0F2A5C; stroke: #0A1E44; }
.simu-lit-txt { font: 800 13px var(--font-body); fill: #7CF3B4; font-variant-numeric: tabular-nums; }
.simu-panel { background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 8px; }
.simu-reloj { margin: 0; font: 800 1.2rem var(--font-heading); color: var(--color-ink); font-variant-numeric: tabular-nums; }
.simu-evento { margin: 0; font-size: 0.85rem; color: var(--texto-suave); min-height: 2.4em; }
.simu-datos { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.simu-datos div { background: var(--color-surface-muted); border-radius: 10px; padding: 6px 10px; }
.simu-datos dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); font-weight: 700; }
.simu-datos dd { margin: 2px 0 0; font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.simu-veredicto { margin: 0; padding: 8px 10px; border-radius: 10px; font-weight: 700; font-size: 0.88rem; }
.simu-veredicto:empty { display: none; }
.simu-veredicto.verde { background: var(--color-tint-good); color: #14532D; }
.simu-veredicto.ambar { background: var(--color-tint-warning); color: #8A4B0C; }
.simu-veredicto.rojo { background: var(--color-tint-critical); color: #9B1C1C; }
.simu-curva { width: 100%; height: auto; margin-top: 10px; background: #fff; border-radius: 12px; box-shadow: var(--shadow-card); }
.simu-eje { stroke: #C9D2DF; }
.simu-linea { fill: none; stroke: #1F5FBF; stroke-width: 2.5; stroke-linejoin: round; }
.simu-tick { font: 600 10px var(--font-body); fill: #5B6B85; }
.simu-pt-repone { fill: #1E9E5A; stroke: #fff; stroke-width: 2; }
.simu-pt-quiebre { fill: #B42318; stroke: #fff; stroke-width: 2; }
.simu-cursor { stroke: #0F2A5C; stroke-width: 1.5; stroke-dasharray: 3 3; }

.alta-producto { display: flex; flex-direction: column; gap: 12px; }
.alta-fila { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.alta-fila label, .alta-producto label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.alta-fila .alta-ancho { flex: 1 1 14rem; }
.alta-fila .alta-ancho input { width: 100%; }
.alta-tiempos { border: none; margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--color-surface-muted); }
.alta-tiempos legend { font-weight: 700; font-size: 0.9rem; padding: 0; margin-bottom: 6px; }
.alta-tiempos-grid { display: grid; grid-template-columns: auto minmax(6rem, 9rem) minmax(6rem, 9rem); gap: 6px 12px; align-items: center; }
.alta-tiempos-grid strong { font-size: 0.78rem; color: var(--texto-suave); }
.alta-tiempos-grid input { font-variant-numeric: tabular-nums; }

.tg-bloque.cal-bloque-paro, .cal-punto.cal-bloque-paro {
  background: repeating-linear-gradient(135deg, #B42318 0 6px, #C9463A 6px 12px); color: #fff; border-left-color: #7A1A12; z-index: 3; }
.tg-bloque.cal-bloque-paro .tg-b-tit, .tg-bloque.cal-bloque-paro .tg-b-hora { color: #fff; }
.cal-aprobar-unico { display: flex; align-items: center; gap: 10px; margin: 0; }
.cal-aprobar-unico .btn-export { margin: 0; }
.paro-sug { margin: 0 0 1rem; padding: 12px 14px; border-radius: 12px; background: var(--color-tint-critical); box-shadow: inset 4px 0 0 #B42318; }
.paro-sug h3 { color: #7A1A12; }
.paro-sug table { background: #fff; border-radius: 8px; }
.paro-duracion .hm { width: 5.5rem; font-variant-numeric: tabular-nums; }
.paro-atajo { min-height: 30px; }

a.tec-card-link { display: block; text-decoration: none; color: inherit; transition-property: transform, box-shadow; transition-duration: .15s; }
a.tec-card-link:hover { box-shadow: var(--shadow-card); }
a.tec-card-link:active { transform: scale(.96); }
.tec-card-ver { display: block; margin-top: 0.6rem; font-size: 0.8rem; font-weight: 700; color: var(--color-accent); }
.tec-perfil { display: flex; gap: 16px; align-items: flex-start; }
.tec-perfil-avatar { width: 56px; height: 56px; font-size: 1.2rem; flex: 0 0 auto; }
.tec-perfil-datos { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tec-perfil-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tec-perfil-carga { display: grid; grid-template-columns: auto minmax(8rem, 1fr) auto auto; align-items: center; gap: 10px; }
@media (max-width: 640px) { .tec-perfil-carga { grid-template-columns: 1fr; } }
.cat-indicadores { margin-bottom: 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }

.dp-svg-scroll { max-height: none; overflow: visible; }
.dp-svg { width: 100%; height: auto; min-width: 0; max-width: 955px; margin: 0 auto; }
.ficha-imp-diagrama { border: 1px solid var(--color-border); border-radius: 10px; padding: 8px; background: #fff; }
.ficha-imp-diagrama .dp-svg { max-height: 23cm; }

.simu-unidades .simu-repo { display: none; }
.mini-estante { position: relative; display: inline-block; vertical-align: middle; width: 70px; height: 14px; margin-right: 8px;
  border: 2px solid #8A96AB; border-radius: 4px; background: #F3F6FB; overflow: hidden; }
.mini-estante i { position: absolute; left: 0; top: 0; bottom: 0; background: #1E9E5A; }
.mini-estante.mini-balde-justo i { background: #B45309; }
.mini-estante.mini-balde-falta i { background: #B42318; }
.mini-estante b { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 2px dashed #B42318; }
.kanban-comprar td { vertical-align: middle; }

.param-tabla td:first-child { width: 70%; }
.param-tabla td label { font-weight: 500; color: var(--color-ink); }
.param-tabla td { vertical-align: middle; }

body.pagina-sola { display: block; }
@media print {
  @page { margin: 12mm; }
  body, body.pagina-sola { display: block !important; background: #fff !important; font-size: 9.5pt; }
  [data-sec][hidden], .home-panel[hidden], .tab-panel[hidden], .cal-una-sala[hidden] { display: none !important; }
  .panel { break-inside: auto !important; page-break-inside: auto !important; border: none !important; box-shadow: none !important;
           padding: 0 !important; margin: 0 0 10px !important; }
  tr, .stat, .ing-kpi, .tec-card, .acceso, .apoyo-dia-card, .tec-op, .cal-bloque, .tg-bloque, .simu, .ciclo-reorden, .desc-item { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  thead { display: table-header-group; }
  table { font-size: 8.5pt; }
  th, td { padding: 3px 5px !important; }
  .tabla-scroll, .tg-wrap, .cal-grid-wrap, .gs-scroll, .gc-scroll, .dp-svg-scroll { overflow: visible !important; max-height: none !important; }
  .home-panel { max-height: none !important; overflow: visible !important; padding: 0 !important; }      /* las pestañas del Panel tienen alto máximo en pantalla; en papel no */
  header.top { background: none !important; box-shadow: none !important; color: #000 !important; padding: 0 0 6px !important; margin: 0 0 8px !important;
               border-bottom: 2px solid #0F2A5C !important; }
  header.top h1 { color: #0F2A5C !important; font-size: 16pt !important; margin: 0 !important; }
  .panel h2 { font-size: 11pt !important; margin-bottom: 6px !important; }
  .panel h2::after { display: none !important; }
  .msg, .sec-nav, .cal-acciones, .cal-aprobar-unico, dialog, .simu-barra, .escenario-caja form, .paro-sug form,
  .kanban-tabla td:last-child, .kanban-tabla th:last-child, form button, .alta-producto, .pedido-alta-card { display: none !important; }
  .kpi-fila, .kpi-fila.kpi-fila-3 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .ing-kpi { padding: 6px 8px !important; box-shadow: none !important; border: 1px solid #ccd !important; }
  .ing-kpi strong { font-size: 13pt !important; }
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .tec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px !important; }
  .tec-card { padding: 6px !important; box-shadow: none !important; border: 1px solid #ccd !important; }
  /* calendario: una semana desde hoy, a lo ancho de la hoja */
  .tg-no-print { display: none !important; }
  .tg { width: 100% !important; min-width: 0 !important; grid-template-columns: 34px repeat(var(--dias-print, 7), minmax(0, 1fr)) !important; }
  .tg-horas, .tg-dia { height: 15cm !important; }
  .tg-bloque { font-size: 6.5pt !important; box-shadow: none !important; }
  .tg-slot { display: none !important; }
  /* diagramas y planos: completos, dentro de una hoja */
  .dp-svg { width: auto !important; max-width: 100% !important; max-height: 21cm !important; }
  .ficha-imp-diagrama .dp-svg { max-height: 21cm !important; }
  .mapa-plano svg, svg.plano, .plano-wrap svg { max-height: 16cm !important; width: auto !important; max-width: 100% !important; }
  .simu-cuerpo { grid-template-columns: 1.4fr 1fr !important; }
  .simu-planta, .simu-curva { max-height: 8cm; }
}
@media print {
  /* lo que en pantalla tiene un ancho mínimo para desplazarse, en papel se ajusta a la hoja */
  .gc-tabla, table.cursograma-full, table.cal-grid, .tablero, .gs-tabla { min-width: 0 !important; width: 100% !important; }
  .gc-tabla { font-size: 7pt; }
  table.cursograma-full, table.cal-grid { table-layout: fixed; font-size: 7.5pt; }
  table.cal-grid td, table.cal-grid th { word-break: break-word; }
  .tec-card .chip { white-space: normal; }
  .tec-head { flex-wrap: wrap; }
}
@media print {
  /* Gantt: en papel la línea de tiempo toma lo que queda de la hoja (en pantalla pide 520 px mínimo) */
  .gc-row { grid-template-columns: 22px 130px 56px 40px 30px 56px minmax(0, 1fr) !important; }
  .gc-c { font-size: 7pt; }
}
@media print { .gc-flechas { display: none !important; } }
.diagrama-2col { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); }
@media (max-width: 900px) { .diagrama-2col { grid-template-columns: 1fr; } }
@media print { .diagrama-2col { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr) !important; } }


:root { --c-pes1: #2F9E44; --c-pes2: #1B7A34; --c-ord: #F2C230; --c-rad: #7B3FC4; --c-paro: #B42318; --c-extra: #F28C28; --c-mant: #7A828C; }
.tg-bloque.cal-bloque-pesaje.tg-esp-pesajei { background: var(--c-pes1); border-left-color: #1E6E31; color: #fff; }
.tg-bloque.cal-bloque-pesaje.tg-esp-pesajeii { background: var(--c-pes2); border-left-color: #0F5724; color: #fff; }
.tg-bloque.cal-bloque-limpieza_ordinaria { background: var(--c-ord); border-left-color: #B58900; color: #3A2A00; }
.tg-bloque.cal-bloque-limpieza_radical { background: var(--c-rad); border-left-color: #4F2588; color: #fff; }
.tg-bloque.cal-bloque-limpieza_ordinaria .tg-b-hora { color: rgba(58, 42, 0, .85); }
.tg-bloque.cal-bloque-pesaje .tg-b-hora, .tg-bloque.cal-bloque-limpieza_radical .tg-b-hora { color: rgba(255, 255, 255, .92); }
.tg-bloque.cal-bloque-turno_extra { background: var(--c-extra); color: #3A1F00; border-left-color: #B85F0A; }
.tg-bloque.cal-bloque-mantenimiento { background: repeating-linear-gradient(45deg, #8A9199 0 6px, #79808A 6px 12px); color: #fff; border-left-color: #565D66; }
/* un lote que un paro pausó o corrió: borde rojo + ⛔ (el bloque sigue visible, no queda tapado) */
.tg-bloque.cal-en-paro { outline: 2px solid var(--c-paro); outline-offset: -2px; }
.tg-b-paro { font-weight: 800; }
.tg-b-extra { font-size: .6rem; font-weight: 800; letter-spacing: .03em; background: var(--c-extra, #F28C28); color: #3A1F00; border-radius: 3px; padding: 0 .28rem; }
/* el PARO: una franja roja rayada por DETRÁS de los lotes, con su etiqueta arriba; nunca tapa un lote */
.tg-bloque.cal-bloque-paro { left: 0; right: 0; z-index: 1; pointer-events: none; box-shadow: none; padding: 0; gap: 0;
  background: repeating-linear-gradient(135deg, rgba(180, 35, 24, .40) 0 7px, rgba(180, 35, 24, .14) 7px 14px);
  border: 2px solid var(--c-paro); border-left-width: 4px; color: #7A1A12; }
.tg-bloque.cal-bloque-paro .tg-b-tit { align-self: flex-start; background: var(--c-paro); color: #fff; padding: 1px 7px; border-radius: 0 0 6px 0; font-size: 0.62rem; letter-spacing: .05em; text-transform: uppercase; }
.tg-bloque.cal-bloque-paro .tg-b-hora { display: none; }
/* APOYO: una franja angosta a la izquierda del día (antes se dibujaba encima de los lotes de las dos salas) */
.tg-dia .tg-cols { left: 26px; }
.tg-bloque.tg-apoyo { left: 2px; right: auto; width: 22px; padding: 0; opacity: 1; z-index: 3; align-items: center; justify-content: center; overflow: hidden;
  border: 2px dashed #64748B; border-left-width: 2px; color: #334155; background: repeating-linear-gradient(135deg, rgba(100, 116, 139, .18) 0 5px, rgba(100, 116, 139, .06) 5px 10px); }
.tg-bloque.tg-apoyo.cal-bloque-limpieza_ordinaria { background: rgba(242, 194, 48, .35); border-color: #B58900; color: #6B4E00; }
.tg-bloque.tg-apoyo.cal-bloque-limpieza_radical { background: rgba(123, 63, 196, .28); border-color: var(--c-rad); color: #4F2588; }
.tg-bloque.tg-apoyo .tg-b-tit { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.6rem; letter-spacing: .08em; text-transform: uppercase; }
.tg-bloque.tg-apoyo .tg-b-hora { display: none; }
/* leyenda con los colores reales */
.cal-leyenda-color { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0.4rem 0 0.8rem; }
.cal-leyenda-color .ley { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; color: #fff; }
.ley-pesajei { background: var(--c-pes1); } .ley-pesajeii { background: var(--c-pes2); }
.ley-ord { background: var(--c-ord); color: #3A2A00 !important; } .ley-rad { background: var(--c-rad); }
.ley-extra { background: var(--c-extra); color: #3A1F00 !important; }
.ley-mant { background: repeating-linear-gradient(45deg, #8A9199 0 6px, #79808A 6px 12px); }
.ley-paro { background: repeating-linear-gradient(135deg, var(--c-paro) 0 7px, #C9463A 7px 14px); }
.ley-apoyo { background: rgba(100, 116, 139, .16); border: 2px dashed #64748B; color: #334155 !important; }
.cal-leyenda-color .ley-suave { display: inline-flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--texto-suave); }
/* Gantt y calendarios de tabla: mismos colores */
.gs-k.gs-pesajei, .gs-barra.gs-pesajei { background: var(--c-pes1); }
.gs-k.gs-pesajeii, .gs-barra.gs-pesajeii { background: var(--c-pes2); }
.gs-k.gs-limpieza_ordinaria, .gs-barra.gs-limpieza_ordinaria { background: var(--c-ord); }
.gs-k.gs-limpieza_radical, .gs-barra.gs-limpieza_radical { background: var(--c-rad); }
.gs-k.gs-apoyo { background: rgba(100, 116, 139, .16); border: 2px dashed #64748B; }
.gc-barra.gs-pesajeii { background: #B8DFC0; } .gc-barra.gs-pesajeii i { background: var(--c-pes2); }
.gc-barra.gs-pesajei { background: #C9EBD1; } .gc-barra.gs-pesajei i { background: var(--c-pes1); }
.gc-barra.gs-limpieza_ordinaria { background: #FBEBB5; } .gc-barra.gs-limpieza_ordinaria i { background: #E0A800; }
.gc-barra.gs-limpieza_radical { background: #DCCBF3; } .gc-barra.gs-limpieza_radical i { background: var(--c-rad); }
.cal-bloque-limpieza_ordinaria { background: #FFF4CC; border-left-color: #E0A800; }
.cal-bloque-limpieza_ordinaria .cal-bloque-pill, .cal-punto.cal-bloque-limpieza_ordinaria { background: #E0A800; }
.cal-bloque-limpieza_radical { background: #EFE4FA; border-left-color: var(--c-rad); }
.cal-bloque-limpieza_radical .cal-bloque-pill, .cal-punto.cal-bloque-limpieza_radical { background: var(--c-rad); }
.cal-bloque-paro { background: var(--color-tint-critical); border-left-color: var(--c-paro); }
.cal-bloque-paro .cal-bloque-pill, .cal-punto.cal-bloque-paro { background: var(--c-paro); }
.paro-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0.5rem 0; }
.paro-tabla .paro-hora { white-space: nowrap; font-variant-numeric: tabular-nums; }
.paro-tabla s { color: var(--texto-suave); }
/* la zona de horas extra y el borde de un lote en turno extra son NARANJA (turno extra); el rojo queda sólo para paros */
.tg-banda-extra { background: repeating-linear-gradient(135deg, rgba(242, 140, 40, .16), rgba(242, 140, 40, .16) 6px, transparent 6px, transparent 12px); border-top: 2px solid var(--c-extra); color: #B85F0A; }
.tg-extra { outline-color: var(--c-extra); background-image: repeating-linear-gradient(135deg, rgba(242, 140, 40, .28), rgba(242, 140, 40, .28) 5px, transparent 5px, transparent 10px); }
.tg-leyenda-extra { background: repeating-linear-gradient(135deg, var(--c-extra), var(--c-extra) 3px, transparent 3px, transparent 6px); }

@media print {
  .gc-row .gc-c.gc-tl { background-image: none !important; }
  .gc-row { grid-template-columns: 20px 124px 56px 46px 28px 46px minmax(0, 1fr) !important; }
  .gc-c { padding: 2px 3px !important; gap: 2px !important; }
  .gc-c-sub { padding-left: 8px !important; }
  .gc-head .gc-c { font-size: 5.5pt !important; letter-spacing: 0 !important; min-height: 2rem !important; }
  .gc-hija .gc-c, .gc-padre .gc-c { min-height: 1.5rem !important; }
  .gc-tl-head .gc-d b { font-size: 6.5pt !important; padding: 2px 0 !important; }
  .gc-tick { font-size: 5pt !important; }
  .gc-barra { height: 0.8rem !important; margin-top: -0.4rem !important; box-shadow: none !important; }
  .gc-d { border-left: 1px solid #b8bdd6 !important; }
  .gc-c-tarea strong { font-size: 7pt !important; }
  .gc-nlotes, .gc-chev { display: none !important; }
  .gc-info { display: none !important; }
  .gc-c, .gc-barra, .gc-resumen, .tg-bloque, .ley, .gs-k { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@page ficha { size: A4 portrait; margin: 12mm; }
@media print {
  body.pagina-sola { page: ficha; }
  .ficha-imp-seccion { break-inside: auto !important; page-break-inside: auto !important; }
  .ficha-imp-diagrama { padding: 4px !important; text-align: center; }
  .ficha-imp-diagrama .dp-svg { max-height: 17cm !important; width: auto !important; max-width: 100% !important; margin: 0 auto; }
  .ficha-imp-seccion .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
  .tg-horas, .tg-dia { height: 12.5cm !important; }
}
@media print {
  table.cursograma-full { table-layout: fixed !important; font-size: 7pt !important; }
  table.cursograma-full th { font-size: 6pt !important; letter-spacing: 0 !important; overflow-wrap: anywhere; }
  table.cursograma-full td, table.cursograma-full th { overflow-wrap: anywhere; padding: 2px 3px !important; }
  table.cursograma-full th:nth-child(1) { width: 4%; }  table.cursograma-full th:nth-child(2) { width: 7%; }
  table.cursograma-full th:nth-child(3) { width: 12%; } table.cursograma-full th:nth-child(4) { width: 19%; }
  table.cursograma-full th:nth-child(5) { width: 11%; } table.cursograma-full th:nth-child(6) { width: 9%; }
  table.cursograma-full th:nth-child(7) { width: 9%; }  table.cursograma-full th:nth-child(8) { width: 9%; }
  table.cursograma-full th:nth-child(9) { width: 20%; }
}
@media print {
  table.cursograma-full th:nth-child(8) { width: 11%; } table.cursograma-full th:nth-child(9) { width: 18%; }
  /* Ficha en pantalla → papel: la descripción en 2 columnas y el diagrama solo, en su propia hoja */
  .diagrama-2col { display: block !important; }
  .diagrama-2col .desc-lista { columns: 2; column-gap: 14px; }
  .diagrama-2col .desc-item { break-inside: avoid; }
  .diagrama-2col .flujo { break-before: page; page-break-before: always; text-align: center; }
  .diagrama-2col .flujo .dp-svg { max-height: 15.5cm !important; width: auto !important; max-width: 100% !important; margin: 0 auto; }
  .diagrama-2col .flujo .dp-svg-scroll { border: none !important; }
}
@media print {
  /* Panel Principal: el calendario del mes sale desarmado en papel (círculos enormes) y ya está en Cronograma */
  .dash-cal { display: none !important; }
  .dash-fila { grid-template-columns: 1fr !important; }
  /* Pedidos: las tarjetas en 2 columnas (una sola columna alargaba el impreso a 4 hojas) */
  .pedido-historial { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .pedido-card { margin: 0 !important; }
  .pedido-card-resumen { grid-template-columns: 1fr 1fr !important; gap: 2px 8px !important; padding: 4px 6px !important; }
  .pedido-card-toggle { display: none !important; }
}

@media screen and (max-width: 880px), screen and (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea {
    min-height: 42px; font-size: 16px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  button, .btn-chip, .btn-export, .subtab, .home-tab, .tab, .regla-lbl, a.link-producto, a.volver, summary {
    min-height: 40px; }
  .btn-chip, .btn-export, .subtab, .regla-lbl, a.link-producto, a.volver { display: inline-flex; align-items: center; justify-content: center; }
  .gc-chev, .sidebar-colapsar, .modal-cerrar, .campana-btn { min-height: 0; }
  .gc-chev { min-width: 32px; min-height: 32px; }
  .modal-cerrar { min-width: 40px; min-height: 40px; }
  th, td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  table a { display: inline-block; padding: 0.35rem 0; }
  /* textos que quedaban por debajo de lo legible */
  .campana-n, .side-grupo-label, .side-grupo-n, .sidebar-foot, .kpi-mas-resumen { font-size: 0.78rem; }
  .side-grupo-chevron { font-size: 0.8rem; }
  .sidebar a, .side-grupo { min-height: 44px; }
  /* contenedores que se desplazan: con el dedo, fluido y sin arrastrar la página entera */
  .tabla-scroll, .tg-wrap, .cal-grid-wrap, .gs-scroll, .gc-scroll, .dp-svg-scroll, .tablero-wrap {
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  /* diálogos: que quepan en el alto de un celular (también acostado) y se desplacen por dentro */
  dialog { max-height: 90dvh; overflow-y: auto; }
  .modal-sala { width: calc(100vw - 24px); max-height: 90dvh; }
  .dlg-impacto { width: calc(100vw - 24px); padding: 1rem; }
  .dlg-impacto form, .dlg-impacto .dlg-acciones { flex-wrap: wrap; }
}
/* teléfonos */
@media screen and (max-width: 640px) {
  main { padding-left: 12px; padding-right: 12px; }
  .panel { padding: 1rem 0.9rem; border-radius: 16px; }
  .stat-grid, .kpi-fila, .kpi-fila.kpi-fila-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .tec-grid { grid-template-columns: 1fr; }
  .tec-head { flex-wrap: wrap; }
  .chip { white-space: normal; }
  .notif-info, .chip-datos { display: inline-flex; align-items: center; min-height: 36px; }
  .stat .v, .ing-kpi strong { overflow-wrap: anywhere; }
  .panel-head-flex { flex-wrap: wrap; gap: 0.5rem; }
  .cal-acciones > *, .cal-probar { margin-left: 0; }
  .subtabs, .home-tabs { width: 100%; }
  .form-inline { flex-direction: column; align-items: stretch; }
  .form-inline > * { width: 100%; }
  .gc-tabla { min-width: 760px; }
}
/* toda tabla suelta (sin contenedor propio) se desplaza en su lugar en vez de empujar la página */
@media screen and (max-width: 880px) {
  .panel table:not(.cal-laboral-mes):not(.cal-grid) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* celulares y tablets: Imprimir y las notificaciones se quedan arriba con el encabezado (fijas tapaban el contenido al
   bajar); el botón del menú sigue fijo para poder navegar desde cualquier punto. En teléfono, Imprimir es sólo el ícono. */
@media screen and (max-width: 880px) {
  .btn-imprimir, .campana-wrap { position: absolute; }
}
@media screen and (max-width: 520px) {
  .btn-imprimir-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .btn-imprimir { padding: 0; width: 44px; height: 44px; justify-content: center; }
}

.ficha-imp-2col { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 14px; align-items: start; margin-top: 10px; }
.ficha-imp-meta { width: 100%; margin-bottom: 4px; }
@media print {
  .ficha-imp-2col { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr) !important; gap: 10px !important; }
  .ficha-imp-2col .desc-lista { columns: 1 !important; }
  .ficha-imp-2col .desc-item { padding: 3px 0 !important; break-inside: avoid; }
  .ficha-imp-2col .desc-titulo { font-size: 7.5pt !important; margin: 0 !important; }
  .ficha-imp-2col .desc-parrafo { font-size: 6.6pt !important; margin: 1px 0 0 !important; line-height: 1.25 !important; }
  .ficha-imp-2col .ficha-imp-diagrama { border: none !important; padding: 0 !important; }
  .ficha-imp-2col .dp-svg { width: 100% !important; height: auto !important; max-height: none !important; max-width: 100% !important; }
  .ficha-imp-meta th, .ficha-imp-meta td { font-size: 7.5pt !important; padding: 2px 4px !important; }
  .ficha-imp-2col h3.sub { font-size: 9pt !important; margin: 0 0 4px !important; }

  form[method="get"], .panel button[type="submit"], input[type="submit"] { display: none !important; }   /* filtros y botones no se imprimen */
  /* Catálogo (25 fichas) y Técnicos: 5 por fila y fluyen entre hojas (una grilla entera saltaba a la hoja siguiente) */
  .tec-grid { display: flex !important; flex-wrap: wrap; gap: 6px !important; }
  .tec-grid > .tec-card { flex: 0 0 calc(20% - 5px); box-sizing: border-box; padding: 4px 6px !important; font-size: 7pt !important; }
  /* el plano del Mapa cabe en la 1ª hoja: se reduce TODO junto (el dibujo y los rótulos que van encima, en %) */
  #equipos .plano-svg-wrap { zoom: 0.68; margin-top: 0.3rem; }
  .panel-head-flex { break-after: auto !important; display: block !important; }
  .no-print, .escenario-caja { display: none !important; }                          /* formularios de carga y el borrador no se imprimen */
  .bal-row, .bal-barras, .tabla-scroll > table tr, .kpi-fila { break-inside: avoid !important; }
  .tg-horas, .tg-dia { height: 11.5cm !important; }                                 /* el calendario cabe con el encabezado en 1 hoja */
  table.reporte .chip { font-size: 5.5pt !important; padding: 0 3px !important; white-space: nowrap; }
  table.reporte { font-size: 5.8pt !important; }
  table.reporte th, table.reporte td { padding: 1px 2px !important; }
  .ficha-imp-nueva-hoja { break-before: page; page-break-before: always; }          /* Ficha Técnica: hoja 1 = descripción + diagrama */
  table.cursograma-full th:nth-child(4) { width: 17%; } table.cursograma-full th:nth-child(5) { width: 9%; }
  table.cursograma-full th:nth-child(6) { width: 7%; }  table.cursograma-full th:nth-child(7) { width: 8%; }
  table.cursograma-full th:nth-child(8) { width: 9%; }  table.cursograma-full th:nth-child(9) { width: 27%; }
  .ficha-imp-footer { margin-top: 8px !important; }
}

@page {
  @bottom-left { content: "LAFAR · Ingeniería de Métodos › Área de Pesaje"; font: 7pt Inter, Arial, sans-serif; color: #667; }
  @bottom-right { content: "Hoja " counter(page) " de " counter(pages); font: 7pt Inter, Arial, sans-serif; color: #667; }
}
@media print { .panel.accesos { display: none !important; } }   /* "Ir a" es navegación: en papel no sirve */

.tg { overflow: clip; }
.tg-esquina, .tg-horas { position: sticky; left: 0; z-index: 8; box-shadow: 1px 0 0 var(--borde), 6px 0 8px -6px rgba(15, 42, 92, .28); }
@media print { .tg-esquina, .tg-horas { position: static; box-shadow: none; } }

.plano-rotulo { position: absolute; transform: translate(-50%, -50%); font-size: 0.6rem; font-weight: 600; color: #111; line-height: 1.15; white-space: nowrap; pointer-events: none; }
.plano-rotulo-v { writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); }
.plano-apoyo[data-estado="fuera"] { border: 2px dashed #94A3B8; color: var(--texto-suave); }

:root { --c-especial: #D6336C; --c-especial-tinte: #FDE8F0; }
.chip-codigo-especial { background: var(--c-especial) !important; color: #fff !important; }
.panel-area-especial { border-top: 4px solid var(--c-especial); }
.chip-area-especial { background: var(--c-especial-tinte); color: #A61E4D; border-color: transparent; }
.pedidos-area-tecnicos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
/* sala especial (208) DIBUJADA en el plano: como una sala más, pero de otro color y en otro sector de la planta */
.plano-sala-especial { position: absolute; box-sizing: border-box; border: 3px solid var(--c-especial); background: var(--c-especial-tinte); border-radius: 3px;
  padding: 0.35rem 0.5rem; display: flex; flex-direction: column; gap: 0.35rem; line-height: 1.2; overflow: hidden; z-index: 2; }
.plano-sala-especial::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgba(214, 51, 108, .35); pointer-events: none; }
.pse-cab { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.pse-cab strong { font-size: 0.62rem; color: #A61E4D; letter-spacing: .02em; }
.pse-balanzas { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; }
.pse-balanza { flex: 1 1 0; min-width: 2.6rem; text-align: center; background: #fff; border: 2px solid var(--c-especial); color: #A61E4D; border-radius: 4px;
  font-size: 0.5rem; font-weight: 700; padding: 3px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pse-balanza.sin-cargar { border-style: dashed; color: #B78BA0; background: rgba(255, 255, 255, .55); }
.pse-balanza.en-mant { border-color: #7A828C; color: #565D66; }
.pse-tecnicos { display: flex; flex-wrap: wrap; gap: 3px; }
.pse-tec { background: var(--c-especial); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 0.5rem; font-weight: 700; }
.pse-sin { font-size: 0.5rem; color: #A61E4D; text-decoration: underline; }
@media print { .plano-sala-especial { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
th.th-especial { color: #A61E4D; box-shadow: inset 0 -3px 0 var(--c-especial); }

@media print {
  html { zoom: 0.85; }
  .tg-esquina, .tg-horas { position: relative !important; left: auto !important; box-shadow: none !important; z-index: auto !important; }
  .tg-horas, .tg-dia { height: 15.5cm !important; }        /* con el 85 % queda de ~13 cm reales: cabe con el encabezado y la leyenda */
}

.panel, .ing-kpi, .stat, .stat-kpi, .kpi-tile, .home-tabs, .subtabs, .ing-nav, .alertas-resumen, .tec-card, .acceso, .acceso-caja,
.notif-chip, .simu-planta, .simu-panel, .simu-curva, .pedido-card, .pedido-alta-card, .apoyo-dia-card { box-shadow: none; }
.panel, .ing-kpi, .stat, .kpi-tile, .tec-card, .acceso-caja, .pedido-card, .pedido-alta-card, .apoyo-dia-card { border: 1px solid var(--borde); }
.panel { border-radius: var(--radius-card); }
.ing-kpi, .stat, .stat-kpi, .kpi-tile, .tec-card, .acceso-caja, .acceso, .pedido-card, .pedido-alta-card, .apoyo-dia-card,
.avisos-lista li a, .acc-hoy-item { border-radius: var(--radius-inner); }
.panel:hover, .ing-kpi:hover, a.tec-card-link:hover, .acceso:hover { box-shadow: none; }
.ing-kpi:hover, a.tec-card-link:hover, .acceso:hover { border-color: var(--color-accent); }
header.top { box-shadow: none; }
.sidebar-link.activo, .sidebar-link-fijo.activo { box-shadow: none; }

/* 3 · jerarquía de los indicadores: 1 principal, el resto pequeño */
.kpi-fila { display: grid; gap: 0.7rem; grid-template-columns: 1.7fr repeat(3, 1fr); align-items: stretch; }
.kpi-fila.kpi-fila-3 { grid-template-columns: 1.7fr 1fr 1fr; }
.ing-kpi strong { font-size: 1.3rem; font-weight: 700; }
.ing-kpi strong.ing-kpi-compuesto { font-size: 1.15rem; }
.ing-kpi-primario strong, .ing-kpi-primario strong.ing-kpi-compuesto { font-size: 2.6rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.ing-kpi { padding: 0.8rem 0.9rem; }
.ing-kpi-primario { padding: 1.1rem 1.2rem; }
@media (max-width: 880px) { .kpi-fila, .kpi-fila.kpi-fila-3 { grid-template-columns: 1fr 1fr; } .ing-kpi-primario { grid-column: 1 / -1; } }
@media (max-width: 520px) { .kpi-fila, .kpi-fila.kpi-fila-3 { grid-template-columns: 1fr; } }
.ing-kpi, .stat .v, .stat-kpi .v, .kpi-tile strong { font-variant-numeric: tabular-nums; }

/* 5 · una línea con las últimas semanas, en vez de una insignia con el porcentaje */
.stat-kpi .v { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; }
.spark { display: block; width: 96px; height: 26px; margin-top: 0.4rem; overflow: visible; }
.spark polyline { fill: none; stroke: var(--texto-suave); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--color-accent); stroke: none; }
.spark-mejora polyline { stroke: var(--ok); }
.spark-empeora polyline { stroke: var(--critico); }
.stat-previo { margin-top: 0.25rem; font-size: 0.72rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

/* + esqueletos de carga: la forma de lo que va a aparecer, no una pantalla en blanco */
.skeleton { position: relative; overflow: hidden; display: block; min-height: 0.9rem; border-radius: var(--radius-control); background: var(--color-surface-muted, #EEF2F8); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent); animation: skeleton-brillo 1.25s ease-in-out infinite; }
.skeleton-linea { height: 0.9rem; margin: 0.45rem 0; }
.skeleton-linea:nth-child(2n) { width: 82%; }
.skeleton-linea:nth-child(3n) { width: 64%; }
.skeleton-caja { height: 4.2rem; margin: 0.5rem 0; }
@keyframes skeleton-brillo { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; display: none; } }
@media print { .skeleton { display: none; } }

.pagina-ingreso { background: var(--fondo); min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.ingreso { width: 100%; max-width: 380px; }
.ingreso-caja { padding: 1.6rem 1.5rem; }
.ingreso-marca { margin: 0; font-size: 1.5rem; letter-spacing: -0.02em; }
.ingreso-caja h2 { margin-top: 1rem; }
.ingreso-form { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 0.6rem; }
.ingreso-form label { display: flex; flex-direction: column; gap: 0.25rem; font-weight: 600; font-size: 0.85rem; }
.ingreso-form input { width: 100%; }
.ingreso-form .btn-export { margin-top: 0.3rem; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.th-quitar, .td-quitar { width: 2.6rem; text-align: center; }
.form-quitar { margin: 0; }
.td-quitar .form-quitar button.btn-quitar[type="submit"] { width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%; border: 1px solid var(--borde); background: none; box-shadow: none; filter: none; color: var(--texto-suave); font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.td-quitar .form-quitar button.btn-quitar[type="submit"]:hover, .td-quitar .form-quitar button.btn-quitar[type="submit"]:focus-visible { background: var(--critico); border-color: var(--critico); color: #fff; filter: none; }
.programar-desde { display: flex; align-items: flex-end; gap: 0.7rem; flex-wrap: wrap; }
.programar-desde label { margin: 0; }

.btn-camara { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--borde); background: var(--color-surface); color: var(--violeta); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.btn-camara:hover, .btn-camara:focus-visible { background: var(--tinte); border-color: var(--violeta); }
.modal-lector { max-width: min(1180px, 96vw); width: 96vw; }
.lector-zona { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: 9rem; padding: 1rem; border: 2px dashed var(--borde); border-radius: var(--radius-card); color: var(--texto-suave); text-align: center; cursor: pointer; }
.lector-zona strong { color: var(--texto); }
.lector-zona:hover, .lector-zona:focus-visible, .lector-zona.arrastrando { border-color: var(--violeta); background: var(--tinte); outline: none; }
.lector-zona img { max-width: 100%; max-height: 16rem; margin-top: 0.5rem; border: 1px solid var(--borde); border-radius: var(--radius-control); }
.lector-opciones { margin-top: 0.8rem; align-items: flex-end; }
.lector-error { color: var(--critico); font-weight: 600; }
.modal-lector .lector-tabla input, .modal-lector .lector-tabla select { font-size: 0.78rem; padding: 0.25rem 0.35rem; }
.lector-tabla td { vertical-align: top; }
.lector-tabla .lec-cand { display: block; margin-top: 0.25rem; max-width: 16rem; }
.lector-tabla tr.lec-dudosa td { background: color-mix(in srgb, var(--warn) 10%, transparent); }
.lec-avisos { display: flex; flex-direction: column; gap: 0.2rem; min-width: 9rem; }
.modal-lector .lector-tabla th, .modal-lector .lector-tabla td { padding: 0.35rem 0.3rem; }
.modal-lector .lector-tabla .lec-cand { max-width: 12.5rem; }
.lec-avisos .chip { white-space: normal; text-align: left; }
@media print { .btn-camara, .modal-lector { display: none !important; } }


.tg-banda-cena { background: repeating-linear-gradient(135deg, rgba(242, 140, 40, .22), rgba(242, 140, 40, .22) 4px, transparent 4px, transparent 8px); }
.tg-banda-finde { background: rgba(242, 140, 40, .10); border-top: 0; }

.modal-horario { max-width: 640px; }
.horario-caja { border: 1px solid var(--borde); border-radius: var(--radius-card); padding: 0.6rem 0.8rem 0.8rem; margin: 0.6rem 0; }
.horario-caja legend { font-weight: 700; padding: 0 0.3rem; font-size: 0.85rem; }
.horario-caja .form-inline { margin-top: 0.4rem; align-items: flex-end; }

.tg-bloque.cal-bloque-reserva { background: repeating-linear-gradient(135deg, #DCE3EE, #DCE3EE 6px, #EEF2F8 6px, #EEF2F8 12px); border-left: 4px solid #4C5B73; color: #1B2A44; }
.ley-reserva { background: #4C5B73; }
.cal-bloque-reserva .cal-bloque-pill { background: #4C5B73; }

.plano-tecs { display: flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 0.25rem; pointer-events: none; }
.plano-tecs:empty { display: none; }
.plano-tec { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-style: normal; font-size: 0.62rem; font-weight: 800; border: 2px solid #fff; box-shadow: var(--shadow-float); }
.plano-tec-txt { font-size: 0.66rem; font-weight: 700; background: #fff; color: var(--texto); border-radius: 999px; padding: 0.1rem 0.45rem; box-shadow: var(--shadow-float); white-space: nowrap; }
.modal-sala-quien { margin: 0.2rem 0 0.4rem; }
.plano-overlay-pesaje1, .plano-overlay-pesaje2 { flex-direction: column; }

.gantt-bar.esp-pesajei { background: var(--c-pes1); }
.gantt-bar.esp-pesajeii { background: var(--c-pes2); }
.gantt-bar.prio-alta::after { content: "!"; margin-left: auto; padding: 0 0.3rem 0 0.2rem; font-weight: 800; }
.limpieza-bar.ordinaria { background: var(--c-ord); color: #3A2A00; }
.limpieza-bar.radical { background: var(--c-rad); color: #fff; }

.solo-impresion { display: none; }
.cal-imprimir { margin: 0.2rem 0 0.6rem; align-items: flex-end; gap: 0.8rem; }
@media print {
  .solo-impresion { display: block; }
  .cal-sala-titulo { font-size: 12pt; margin: 4px 0 6px; color: #0F2A5C; }
  .cal-print-titulo { font-size: 11pt; font-weight: 700; margin: 0 0 6px; }
  .cal-filtro, .cal-imprimir { display: none !important; }
  .cal-una-sala + .cal-una-sala { break-before: page; page-break-before: always; }
}

.rep-tipos { flex-wrap: wrap; margin: 0.4rem 0 0.8rem; }
.rep-filtros { align-items: flex-end; }
.rep-encabezado { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.rep-acciones { display: flex; gap: 0.5rem; align-items: flex-start; }
.rep-tabla { font-size: 0.78rem; }
.rep-tabla th { position: sticky; top: 0; }
@media print { .rep-tabla { font-size: 7.5pt; } .rep-tabla th { position: static; } .rep-hoja .rep-encabezado { border-bottom: 2px solid #0F2A5C; padding-bottom: 6px; } }

.cal-area-pesajei-punto { background: var(--c-pes1) !important; }
.cal-area-pesajeii-punto { background: var(--c-pes2) !important; }
.cal-bloque-limpieza_ordinaria { background: color-mix(in srgb, var(--c-ord) 28%, #fff); border-left-color: var(--c-ord); }
.cal-punto.cal-bloque-limpieza_ordinaria { background: var(--c-ord); }
@media print {
  /* cada sala en UNA hoja horizontal (el calendario ahora va de 07:00 a 22:00) */
  .cal-una-sala .tg-horas, .cal-una-sala .tg-dia { height: 12.3cm !important; }
}

.rep-panel .rep-hoja { margin-top: 0.6rem; }


.historial-semana { margin: 1rem 0 .4rem; }
.historial-detalle { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .5rem 1.2rem; margin: 0 0 .8rem; }
.historial-detalle dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.historial-detalle dd { margin: .1rem 0 0; font-size: .86rem; }
.pedido-pasado { opacity: .92; }


.tg-bloque.cal-bloque-beta, .cal-bloque.cal-bloque-beta { background: var(--c-especial); border-left: 4px solid #A61E4D; color: #fff; }
.ley-beta { background: var(--c-especial); }
.cal-bloque-beta .cal-bloque-pill { background: #A61E4D; color: #fff; }
.tg-bloque.cal-bloque-beta .tg-b-hora, .tg-bloque.cal-bloque-beta .tg-b-tit { color: #fff; opacity: 1; }


.tg-b-det { display: none; }
@page calendario { size: A4 landscape; margin: 7mm; }
@media print {
  body:has(.cal-filtrada) { page: calendario; }          /* toda la hoja apaisada (si solo el calendario lo fuera, el navegador fuerza un salto de página antes) */
  .cal-filtrada .tg { grid-template-columns: 30px repeat(var(--dias-print, 7), minmax(0, 1fr)) !important; font-size: 7pt; }
  .cal-filtrada .tg-horas, .cal-filtrada .tg-dia { height: 14.6cm !important; }
  .cal-filtrada .tg-cab { padding: 3px 4px; font-size: 8.5pt; }
  .tg-bloque { -webkit-print-color-adjust: exact; print-color-adjust: exact; overflow: hidden; padding: 2px 4px 2px 5px !important; line-height: 1.15; }
  .tg-bloque .tg-b-tit { font-size: 7.5pt !important; font-weight: 700; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; display: block; }
  .tg-bloque .tg-b-hora { font-size: 7pt !important; display: block; opacity: 1 !important; }
  .tg-bloque .tg-b-det { display: block; font-size: 6.6pt; line-height: 1.15; }
  .tg-bloque .tg-b-tecs { display: none !important; }
  .cal-print-titulo { font-size: 12pt; }
  .cal-leyenda-color { font-size: 7pt; gap: 3px 6px; margin-bottom: 4px; }
  .cal-leyenda-color .ley { padding: 1px 6px; font-size: 7pt; }
}


:root { --c-muestreo: #8A5A2B; --c-muestreo-oscuro: #6B4220; }
.tg-bloque.cal-bloque-muestreo, .cal-bloque.cal-bloque-muestreo { background: var(--c-muestreo); border-left: 4px solid var(--c-muestreo-oscuro); color: #fff; }
.ley-muestreo { background: var(--c-muestreo); }
.cal-bloque-muestreo .cal-bloque-pill { background: var(--c-muestreo-oscuro); color: #fff; }
.tg-bloque.cal-bloque-muestreo .tg-b-hora, .tg-bloque.cal-bloque-muestreo .tg-b-tit { color: #fff; opacity: 1; }
.chip-muestreo { background: #F6EBDD; color: var(--c-muestreo-oscuro); border-color: transparent; }

.muestreo-panel { border-top: 4px solid var(--c-muestreo); }
.nota-suave { color: var(--color-text-muted, #5B6B8A); font-size: .9rem; margin: .2rem 0 .9rem; }
.muestreo-tecnicos { list-style: none; margin: .4rem 0 1rem; padding: 0; display: grid; gap: .45rem; }
.muestreo-tecnicos li { border: 1px solid var(--color-border, #D5DDEB); border-radius: var(--radius-inner, 8px); padding: .55rem .8rem; background: #fff; }
.muestreo-tecnicos li.libre { border-left: 4px solid var(--color-status-good, #1E9E5A); }
.muestreo-tecnicos li.ocupado { border-left: 4px solid var(--color-status-warning, #F28C28); }
.muestreo-tecnicos label { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; cursor: pointer; }
.muestreo-tecnicos input[type="radio"] { width: 1.1rem; height: 1.1rem; }
.chip-ok { background: var(--color-tint-good, #E3F5EB); color: #17653C; border-color: transparent; }
.chip-aviso { background: var(--color-tint-warning, #FDEFD9); color: #8A4B0B; border-color: transparent; }
tr.fila-cancelada td { opacity: .55; text-decoration: line-through; }

/* Ronda 79: paneles agrupados en una sola pestaña; los secundarios van plegados */
.sec-sub { margin: 0.8rem 0; border: 1px solid var(--borde); border-radius: 10px; background: var(--color-surface); }
.sec-sub > summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 700; font-size: 0.92rem; }
.sec-sub > summary:hover { color: var(--violeta); }
.sec-sub[open] > summary { border-bottom: 1px solid var(--borde); }
.sec-sub > .panel, .sec-sub > .tab-panel { margin: 0; border: 0; box-shadow: none; }

/* Ronda 80: el calendario más ancho y con letra más chica para que se lea el lote Y el nombre del producto en cada bloque */
.tg-bloque { font-size: 0.68rem; }
.tg-b-tit { font-size: 0.7rem; }
.tg-b-prod { flex: 0 0 100%; font-size: 0.62rem; line-height: 1.15; opacity: .95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media print { .tg-b-prod { font-size: 6.2pt; white-space: normal; overflow: visible; } }

/* Ronda 80: el bloque que se acaba de mover parpadea unos segundos para que se vea dónde quedó */
.tg-bloque.cal-recien { outline: 3px solid #ffd166; outline-offset: 1px; z-index: 5; animation: cal-recien-pulso 1s ease-in-out 9; }
@keyframes cal-recien-pulso { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, .9); } 50% { box-shadow: 0 0 0 8px rgba(255, 209, 102, 0); } }

/* Ronda 80: arrastre continuo: ya no hay huecos fijos; una guía muestra dónde queda el bloque y a qué hora */
.tg-slot { display: none !important; }
.tg-col { position: relative; }
.cal-fantasma { position: absolute; left: 2px; right: 2px; z-index: 6; pointer-events: none; border: 2px dashed var(--violeta); border-radius: 6px; background: color-mix(in srgb, var(--violeta) 14%, transparent); min-height: 14px; }
.cal-fantasma span { position: absolute; top: -1px; right: 2px; background: var(--violeta); color: #fff; font-size: 0.7rem; font-weight: 800; padding: 0 5px; border-radius: 0 0 4px 4px; font-variant-numeric: tabular-nums; }
body.cal-arrastrando .tg-bloque:not(.cal-editable) { pointer-events: none; }

/* ===================================================================================================================
   Ronda 81 — Panel Principal «Centro de control»: KPIs con su gráfico (anillos, bala, columnas, barras, dona).
   Verde = bien · naranja = ojo · rojo = mal, siempre acompañado de texto/símbolo. Todo en CSS/SVG, sin librerías.
   =================================================================================================================== */
.dx { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 1rem; margin-bottom: 1.25rem; align-items: start; }
.dx-principal { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.dx-lateral { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0.75rem; }
.dx-cab { margin: 0; }
.dx-cab h2 { margin: 0; }
.dx-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 14px; padding: 1.1rem 1.25rem; min-width: 0; color: var(--color-ink); }
.dx-card h2, .dx-card h3 { margin: 0; }
.dx-card h3 { font-size: 0.98rem; font-family: var(--font-heading); }
.dx-bien { --dx-c: var(--color-status-good); --dx-t: var(--color-tint-good); }
.dx-ojo  { --dx-c: var(--color-status-warning); --dx-t: var(--color-tint-warning); }
.dx-mal  { --dx-c: var(--color-status-critical); --dx-t: var(--color-tint-critical); }
.dx-nd   { --dx-c: var(--color-status-neutral); --dx-t: var(--color-tint-neutral); }

/* ---- 4 KPIs grandes ---- */
.dx-hero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.dx-kpi { display: flex; flex-direction: column; gap: 0.45rem; text-decoration: none; border-top: 4px solid var(--dx-c, var(--color-border)); transition: transform .15s ease, border-color .15s ease; }
.dx-kpi:hover { transform: translateY(-2px); }
.dx-etq { font-size: 0.72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-ink-muted); }
.dx-valor { font-family: var(--font-heading); font-size: 2.1rem; font-weight: 800; line-height: 1.05; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; }
.dx-valor small { font-size: 0.8rem; font-weight: 600; color: var(--color-ink-muted); }
.dx-costo { margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--color-status-warning); }
.dx-delta { font-size: 0.78rem; color: var(--color-ink-muted); }
.dx-pill { align-self: flex-start; font-size: 0.72rem; font-weight: 800; padding: 0.15rem 0.6rem; border-radius: 999px; background: var(--dx-t, var(--color-tint-neutral)); color: var(--dx-c, var(--color-ink-muted)); }
.dx-anillo-fila { display: flex; align-items: center; gap: 0.8rem; }
.dx-anillo { width: 104px; height: 104px; flex: 0 0 auto; }
.dx-anillo-fondo { fill: none; stroke: var(--color-border); stroke-width: 11; }
.dx-anillo-valor { fill: none; stroke: var(--dx-c, var(--color-accent)); stroke-width: 11; stroke-linecap: round; transition: stroke-dasharray .9s ease; }
.dx-anillo-num { font-family: var(--font-heading); font-size: 30px; font-weight: 800; fill: var(--color-ink); text-anchor: middle; }
.dx-anillo-num-s { font-size: 26px; }
.dx-anillo-pct { font-size: 15px; font-weight: 700; fill: var(--color-ink-muted); }
.dx-anillo-sub { font-size: 9.5px; fill: var(--color-ink-muted); text-anchor: middle; letter-spacing: .04em; }
.dx-anillo-txt { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.dx-anillo-txt strong { font-size: 1.05rem; font-family: var(--font-heading); }
.dx-anillo-txt span:not(.dx-pill):not(.dx-delta) { font-size: 0.78rem; color: var(--color-ink-muted); margin-top: -0.25rem; }
/* gráfico de bala: ciclo (barra) contra takt (marca) */
.dx-bala { position: relative; height: 16px; border-radius: 8px; background: var(--color-surface-muted); margin: 0.9rem 0 0.7rem; }
.dx-bala-barra { height: 100%; border-radius: 8px; background: var(--color-status-good); transition: width .9s ease; }
.dx-bala-mal { background: var(--color-status-critical); }
.dx-bala-meta { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--color-ink); border-radius: 2px; }
.dx-bala-meta span { position: absolute; top: -17px; left: 50%; transform: translateX(-50%); font-size: 0.68rem; font-weight: 800; white-space: nowrap; color: var(--color-ink); }
/* mini columnas: horas extra por día */
.dx-mini { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 0.25rem; }
.dx-mini-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; min-width: 0; }
.dx-mini-col i { width: 100%; border-radius: 4px 4px 0 0; display: block; }
.dx-mini-ex { background: var(--color-status-warning); }
.dx-mini-0 { background: var(--color-border); }
.dx-mini-col em { font-style: normal; font-size: 0.62rem; color: var(--color-ink-muted); }
/* barra apilada de estados */
.dx-apilada { display: flex; height: 16px; border-radius: 8px; overflow: hidden; gap: 2px; background: var(--color-surface-muted); margin-top: 0.5rem; }
.dx-apilada i { display: block; min-width: 6px; }
.dx-seg-bueno, .dx-pt-bueno { background: var(--color-status-good); }
.dx-seg-aviso, .dx-pt-aviso { background: var(--color-status-warning); }
.dx-seg-malo, .dx-pt-malo { background: var(--color-status-critical); }
.dx-seg-neutro, .dx-pt-neutro { background: var(--color-status-neutral); }
.dx-leyenda { font-size: 0.74rem; color: var(--color-ink-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem; }
.dx-leyenda b, .dx-dona-leyenda b { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 3px; }
.dx-leyenda-pie { margin-top: 0.7rem; }
.dx-pt-norm { background: var(--color-accent); } .dx-pt-ex { background: var(--color-status-warning); }
.dx-pt-disp { background: transparent; border: 2px dashed var(--color-ink-muted); width: 14px !important; height: 8px !important; border-radius: 2px !important; }

/* ---- tira de operación ---- */
.dx-tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.dx-mini-kpi { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: var(--color-ink); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: 0.8rem 1rem; transition: border-color .15s ease; }
.dx-mini-kpi:hover { border-color: var(--color-accent); }
.dx-mini-kpi > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dx-mini-kpi strong { font-family: var(--font-heading); font-size: 1.5rem; line-height: 1.1; }
.dx-mini-kpi em { font-style: normal; font-size: 0.78rem; font-weight: 700; }
.dx-mini-kpi small { font-size: 0.7rem; color: var(--color-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-ico { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--color-tint); color: var(--color-accent); }
.dx-ico svg { width: 21px; height: 21px; }
.dx-mini-kpi.dx-mal { border-color: var(--color-border-critical); } .dx-mini-kpi.dx-mal .dx-ico { background: var(--color-tint-critical); color: var(--color-status-critical); }
.dx-mini-kpi.dx-ojo { border-color: var(--color-border-warning); } .dx-mini-kpi.dx-ojo .dx-ico { background: var(--color-tint-warning); color: var(--color-status-warning); }

/* ---- gráficos ---- */
.dx-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dx-ancha { grid-column: 1 / -1; }
.dx-gcab { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.dx-gcab .nc { font-size: 0.74rem; }
.dx-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dx-chip { font-size: 0.74rem; padding: 0.22rem 0.65rem; border-radius: 999px; background: var(--color-surface-muted); color: var(--color-ink-muted); white-space: nowrap; }
.dx-chip b { color: var(--color-ink); font-size: 0.82rem; }
.dx-chip.dx-bien, .dx-chip.dx-ojo, .dx-chip.dx-mal { background: var(--dx-t); color: var(--dx-c); } .dx-chip.dx-bien b, .dx-chip.dx-ojo b, .dx-chip.dx-mal b { color: var(--dx-c); }
/* columnas apiladas: carga por día */
.dx-columnas { display: flex; align-items: stretch; gap: 0.8rem; height: 230px; }
.dx-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dx-col-val { font-size: 0.74rem; font-weight: 800; color: var(--color-ink-muted); }
.dx-t-mal { color: var(--color-status-critical) !important; }
.dx-col-pista { position: relative; flex: 1; width: 100%; max-width: 74px; }
.dx-col-disp { position: absolute; left: -4px; right: -4px; bottom: 0; border-top: 2px dashed var(--color-ink-muted); background: color-mix(in srgb, var(--color-ink-muted) 6%, transparent); border-radius: 4px 4px 0 0; }
.dx-col-pila { position: absolute; left: 6px; right: 6px; bottom: 0; top: 0; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.dx-col-pila i { display: block; width: 100%; transition: height .8s ease; }
.dx-col-norm { background: linear-gradient(180deg, color-mix(in srgb, var(--color-accent) 85%, #fff), var(--color-accent)); border-radius: 0 0 3px 3px; }
.dx-col-ex { background: repeating-linear-gradient(135deg, var(--color-status-warning), var(--color-status-warning) 6px, color-mix(in srgb, var(--color-status-warning) 70%, #fff) 6px, color-mix(in srgb, var(--color-status-warning) 70%, #fff) 12px); border-radius: 4px 4px 0 0; }
.dx-col:hover .dx-col-norm { filter: brightness(1.12); }
.dx-col-lbl { font-size: 0.72rem; color: var(--color-ink-muted); white-space: nowrap; }
/* barras horizontales: carga por técnico */
.dx-barras { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.dx-barras li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 82px; align-items: center; gap: 0.6rem; font-size: 0.8rem; }
.dx-barras-nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-barras-nom small { margin-left: 4px; font-size: 0.62rem; font-weight: 800; padding: 0 4px; border-radius: 4px; background: var(--color-tint); color: var(--color-accent); }
.dx-barras-pista { height: 12px; border-radius: 6px; background: var(--color-surface-muted); overflow: hidden; }
.dx-barras-pista i { display: block; height: 100%; border-radius: 6px; transition: width .9s ease; }
.dx-b-bien { background: var(--color-status-good); } .dx-b-ojo { background: var(--color-status-warning); }
.dx-b-mal { background: repeating-linear-gradient(135deg, var(--color-status-critical), var(--color-status-critical) 6px, color-mix(in srgb, var(--color-status-critical) 75%, #fff) 6px, color-mix(in srgb, var(--color-status-critical) 75%, #fff) 12px); }
.dx-barras-num { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.dx-barras-num em { font-style: normal; font-size: 0.68rem; color: var(--color-status-critical); }
/* dona de estados + entregas */
.dx-dona-fila { display: flex; align-items: center; gap: 1.1rem; }
.dx-dona { position: relative; width: 112px; height: 112px; border-radius: 50%; flex: 0 0 auto; }
.dx-dona::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: var(--color-surface); }
.dx-dona span { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.66rem; color: var(--color-ink-muted); }
.dx-dona span b { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-ink); line-height: 1; }
.dx-dona-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; flex: 1; font-size: 0.8rem; }
.dx-dona-leyenda li { display: flex; align-items: center; }
.dx-dona-leyenda strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.dx-entregas { display: flex; align-items: flex-end; gap: 6px; height: 68px; margin-top: 1rem; }
.dx-ent { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; min-width: 0; }
.dx-ent-pila { flex: 1; width: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.dx-ent-pila i { display: block; width: 100%; }
.dx-ent-prog { background: var(--color-status-good); border-radius: 0 0 3px 3px; } .dx-ent-pend { background: var(--color-status-neutral); border-radius: 3px 3px 0 0; }
.dx-ent em { font-style: normal; font-size: 0.6rem; color: var(--color-ink-muted); white-space: nowrap; }
.dx-ent-hoy em { color: var(--color-accent); font-weight: 800; }
/* salas */
.dx-salas { display: flex; justify-content: space-around; gap: 1rem; flex-wrap: wrap; }
.dx-sala { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.dx-sala svg { width: 112px; height: 112px; }
.dx-sala strong { font-family: var(--font-heading); }
/* lateral */
.dx-lateral .avisos-lista h2 { font-size: 1rem; margin-bottom: 0.6rem; }
.dx-lateral .dash-cal { padding: 1rem; }
@media (max-width: 1250px) { .dx-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-tira { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .dx { grid-template-columns: 1fr; } .dx-lateral { position: static; } }
@media (max-width: 720px) { .dx-hero, .dx-tira, .dx-graficos { grid-template-columns: 1fr; } .dx-columnas { height: 190px; } }
@media print { .dx-lateral { display: none; } .dx { grid-template-columns: 1fr; } .dx-card { break-inside: avoid; } }

.dx-ancha .dx-salas { justify-content: center; gap: 5rem; }

/* Ronda 82 — Mapa: lo que pasa AHORA en el área de betalactámicos (208) */
.pse-ahora { display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid rgba(214, 51, 108, .45); border-left: 4px solid var(--color-status-neutral); border-radius: 5px; padding: 3px 6px; font-size: 0.56rem; line-height: 1.2; }
.pse-ahora.pse-pesaje { border-left-color: var(--c-pes1, #2F9E44); }
.pse-ahora.pse-limpieza { border-left-color: #7B3FBF; }
.pse-estado { font-weight: 800; font-size: 0.6rem; color: #1b1b1b; text-transform: uppercase; letter-spacing: .02em; }
.pse-estado em { font-style: normal; font-weight: 600; text-transform: none; color: #5B6B85; }
.pse-lote { font-weight: 700; color: #A61E4D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pse-quien { display: flex; align-items: center; gap: 3px; font-weight: 700; color: #0F1E3D; }
.pse-quien-ic { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--c-especial); color: #fff; font-style: normal; font-size: 0.5rem; font-weight: 800; }
.pse-sig { color: #5B6B85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pse-tec-tit { font-size: 0.5rem; color: #A61E4D; font-weight: 700; align-self: center; }

/* Cartas de control: tomas recientes */
.carta-ctl .carta-reciente { fill: #DCEBFB; opacity: .75; }
.chip.reciente { background: #DCEBFB; color: #0F2A5C; border: 1px solid #9DBDE8; }

/* Previsión de insumos: mini dashboard */
.ins-kpis { margin-bottom: 1rem; }
.ins-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.1rem; margin-bottom: 1rem; }
.ins-grafico { background: var(--panel, #fff); border: 1px solid var(--borde, #D8E0EE); border-radius: var(--radius-inner, 8px); padding: 0.8rem 1rem; min-width: 0; }
.ins-svg { width: 100%; height: auto; max-height: 190px; }
.ins-leyenda { font-size: 0.78rem; color: var(--texto-suave, #5B6B85); margin: 0.3rem 0 0; }
.ins-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 8px; vertical-align: middle; }
.ins-cobertura { display: grid; gap: 0.45rem; }
.ins-cob-fila { display: grid; grid-template-columns: minmax(7rem, 1fr) 2fr auto; gap: 0.6rem; align-items: center; font-size: 0.85rem; }
.ins-cob-pista { height: 12px; background: #E6ECF6; border-radius: 6px; overflow: hidden; }
.ins-cob-pista i { display: block; height: 100%; border-radius: 6px; }
.ins-cob-ok { background: #1E9E5A; } .ins-cob-justo { background: #B45309; } .ins-cob-falta { background: #D64545; }
.ins-cob-v { font-variant-numeric: tabular-nums; min-width: 4.5rem; text-align: right; }
.ins-dias { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.ins-dia-chip { display: inline-flex; flex-direction: column; align-items: center; min-width: 3.1rem; padding: 0.15rem 0.35rem; background: #EEF2F8; border-radius: 6px; line-height: 1.15; }
.ins-dia-chip small { font-size: 0.68rem; color: var(--texto-suave, #5B6B85); }
.ins-dia-cero { opacity: .55; }
.ins-detalle { margin-top: 1rem; border-top: 1px solid var(--borde, #D8E0EE); padding-top: 0.6rem; }
.ins-detalle > summary { cursor: pointer; }

.tomas-detalle { margin: 0.5rem 0 1rem; } .tomas-detalle > summary { cursor: pointer; font-size: 0.86rem; }
tr.toma-reciente td { background: #EAF2FD; }

/* Previsión de insumos (v3): indicadores con gráfico */
.ins-hero { margin-bottom: 1rem; }
.ins-rad { background: #7B4FC2; } .ins-ord { background: #E7B416; } .ins-cero { background: var(--color-border, #D8E0EE); } .ins-uni { background: #1F5FBF; }
.ins-apil { display: flex; align-items: flex-end; gap: 6px; height: 74px; margin-top: 0.25rem; }
.ins-apil-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; min-width: 0; }
.ins-apil-n { font-size: 0.66rem; font-weight: 700; color: var(--color-ink-muted, #5B6B85); min-height: 0.9rem; }
.ins-apil-pila { width: 100%; display: flex; flex-direction: column; border-radius: 4px 4px 0 0; overflow: hidden; min-height: 4px; }
.ins-apil-pila i { display: block; min-height: 3px; }
.ins-apil-col em { font-style: normal; font-size: 0.62rem; color: var(--color-ink-muted, #5B6B85); }
.dx-leyenda b.ins-rad, .dx-leyenda b.ins-ord { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; }
.ins-sub { font-size: 0.72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--color-ink-muted, #5B6B85); margin: 0.5rem 0 0.2rem; }
@media (max-width: 1100px) { .ins-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Historial de bitácora de la ficha: tipo de limpieza diferenciado */
.tipo-chip { display: inline-block; font-weight: 700; font-size: 0.72rem; padding: 0.1rem 0.5rem; border-radius: 999px; }
.tipo-rad { background: #EFE6FA; color: #4C2A8C; } .tipo-ord { background: #FFF1BF; color: #6B4F00; }
tr.toma-depurada td { opacity: .55; text-decoration: line-through; }
.hb-tabla thead th { position: sticky; top: 0; background: var(--color-surface-muted, #EEF2F8); }

/* Alta rápida de producto */
#dlg-alta-rapida { border: 0; border-radius: 12px; padding: 1.2rem 1.4rem; width: min(34rem, 94vw); box-shadow: 0 20px 60px rgba(15, 30, 61, .35); }
#dlg-alta-rapida::backdrop { background: rgba(15, 30, 61, .45); }
.alta-rapida { display: grid; gap: 0.7rem; }
.alta-rapida h3 { margin: 0; }
.alta-rapida label { display: grid; gap: 0.25rem; font-weight: 600; font-size: 0.86rem; }
.alta-rapida input, .alta-rapida select { width: 100%; }
.alta-rapida-pie { display: flex; justify-content: flex-end; gap: 0.6rem; }

.ins-registro { margin-top: 1.6rem; }

/* Pedidos: ✕ para eliminar un lote (el selector repite los :not de los botones de envío para ganarles en especificidad) */
.pedido-card-resumen button.pedido-eliminar[type="submit"]:not(.btn-chip):not(.subtab):not(.link-producto) {
  margin-left: 0.5rem; background: transparent; color: #b42318; border: 1px solid transparent; border-radius: 6px;
  font-size: 1rem; line-height: 1; padding: 0.25rem 0.5rem; cursor: pointer; box-shadow: none;
}
.pedido-card-resumen button.pedido-eliminar[type="submit"]:not(.btn-chip):not(.subtab):not(.link-producto):hover,
.pedido-card-resumen button.pedido-eliminar[type="submit"]:not(.btn-chip):not(.subtab):not(.link-producto):focus-visible {
  background: #fde8e8; border-color: #f0b4b4; filter: none;
}

/* ---------------------------------------------------------------------------------------------------------------
   Roles y accesos (ronda 91)
   --------------------------------------------------------------------------------------------------------------- */
.sin-permiso { max-width: 42rem; }
.sin-permiso h2 { margin-top: 0; }
.sin-permiso-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2, 0.75rem); align-items: center; margin-top: var(--sp-3, 1rem); }
.sin-permiso-acciones button.link-producto, .sidebar-sesion button.link-producto { background: none; border: 0; padding: 0; color: var(--violeta); font: inherit; font-weight: 600; cursor: pointer; }
.sin-permiso-acciones button.link-producto:hover, .sidebar-sesion button.link-producto:hover { text-decoration: underline; }
.sidebar-sesion { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 var(--sp-1); margin: 0 0 0.6rem; font-size: 0.72rem; color: var(--texto-suave); }
.sidebar-sesion strong { color: inherit; }
.sidebar-sesion form { margin: 0; }
a.enlace-sin-permiso { color: inherit; text-decoration: none; cursor: default; pointer-events: none; }
.chip-off { background: var(--color-tint-warning); color: var(--warn); border-color: transparent; }
.form-en-linea { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0; }
.form-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.75rem; align-items: end; }
.form-grilla label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.8rem; }
td.centro { text-align: center; }
tr.fila-alerta td { background: var(--color-tint-warning); }
.pagina-entrada { background: var(--color-bg, #EEF2F8); min-height: 100vh; display: grid; place-items: center; margin: 0; }
.entrada { width: 100%; max-width: 24rem; padding: 1rem; }
.entrada-caja { display: flex; flex-direction: column; gap: 0.6rem; }
.entrada-caja h1 { margin: 0.4rem 0 0; font-size: 1.3rem; }
.entrada-caja form { display: flex; flex-direction: column; gap: 0.5rem; }
.entrada-caja label { font-size: 0.8rem; font-weight: 600; }
.entrada-marca { display: flex; gap: 0.6rem; align-items: center; }
.entrada-marca span:not(.sidebar-brand-mark) { display: block; font-size: 0.7rem; color: var(--texto-suave); }
.entrada-marca .sidebar-brand-mark { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; background: var(--color-dark-bg, #0F2A5C); color: #fff; font-weight: 800; border-radius: 8px; }
[data-sin-permiso] { display: none !important; }
.sidebar-sesion { color: #C5CEE8; }
.sidebar-sesion-nombre { color: #A9B6D9; }
.sidebar-sesion button.link-producto { color: #9CC2FF; }