/* s3 (18-oct-2026): pantallas de oficina de la app nueva (WP5). Control, Asignaciones, Informe, Plata y el panel «Pasos» de la ficha.
   Todo con prefijo .s3- y SOLO los tokens de css/app.css (claro y oscuro salen de ahí). Teléfono primero: ninguna pantalla
   hace scroll horizontal de página; lo ancho (mapa de calor, columnas de Asignaciones) hace scroll dentro de su propio contenedor.
   Referencia visual aprobada: app-instaladores/maquetas/app-nueva/estilo.css. */

main.vista-s3-control, main.vista-s3-asignaciones, main.vista-s3-plata { max-width: 1400px; }
main.vista-s3-informe { max-width: 920px; }
.s3-control, .s3-asig, .s3-informe, .s3-plata, .s3-pasos { font-variant-numeric: tabular-nums; min-width: 0; }
.s3-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Cabecera de pantalla ---------- */
.s3-cab { margin-bottom: 16px; }
.s3-cab-fila { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-end; justify-content: space-between; }
.s3-lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-3); font-weight: 600; }
.s3-h1 { font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; margin-top: 2px; font-weight: 700; }
.s3-sub { color: var(--texto-2); font-size: 14px; margin: 4px 0 0; max-width: 72ch; }
.s3-sub-bajo { margin: -6px 0 10px; }
.s3-tenue { color: var(--texto-3); }
.s3-acciones { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.s3-nota { font-size: 12.5px; color: var(--texto-3); margin: 10px 0 0; max-width: 80ch; }
.s3-vacio { color: var(--texto-3); font-size: 14px; padding: 14px 4px; text-align: center; }
.s3-vacio-linea { color: var(--texto-3); font-size: 14px; margin: 2px 0; }
.s3-sep-arriba { margin-top: 14px; margin-bottom: 6px; }
.s3-sep-abajo { margin-bottom: 14px; }
.s3-rojo-tx { color: var(--rojo-texto); }
.s3-verde-tx { color: var(--verde-texto); }
.s3-error { color: var(--rojo-texto); background: var(--rojo-fondo); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; margin: 8px 0 0; }
.s3-lnk { color: var(--texto); font-weight: 600; font-size: 13.5px; text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
.s3-lnk:hover { text-decoration-color: currentColor; }

/* ---------- Botones propios (los .btn de app.css son de ancho completo) ---------- */
.s3-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: 11px;
  background: var(--acento); color: var(--acento-texto); font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; margin: 0;
  transition: transform var(--t), background var(--t), opacity var(--t);
}
.s3-btn:active { transform: scale(0.985); }
.s3-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.s3-btn-sec { background: var(--superficie); color: var(--texto); border-color: var(--linea-fuerte); }
.s3-btn-chico { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 9px; }
.s3-btn:focus-visible, .s3-arr:focus-visible, .s3-celda:focus-visible, .s3-ot:focus-visible, .s3-paso-cab:focus-visible, .s3-fila-link:focus-visible, .s3-kpi:focus-visible,
.s3-star:focus-visible, .s3-mini:focus-visible, .s3-enlace:focus-visible, .s3-stat:focus-visible, .s3-nav-b:focus-visible, .s3-nav-hoy:focus-visible, .s3-vertodo summary:focus-visible,
.s3-col-cab:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }

/* ---------- Chips ---------- */
.s3-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.s3-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; line-height: 1.5; padding: 1px 9px; border-radius: 999px;
  background: var(--gris-pill); color: var(--texto-2); white-space: nowrap;
}
.s3-chip.s3-v, .s3-chip.s3-verde { background: var(--verde-fondo); color: var(--verde-texto); }
.s3-chip.s3-ambar { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.s3-chip.s3-rojo { background: var(--rojo-fondo); color: var(--rojo-texto); }
.s3-chip.s3-gris { background: var(--gris-pill); color: var(--texto-2); }
.s3-chip.s3-cliente { background: var(--trabajo-bg); color: var(--texto); box-shadow: inset 0 0 0 1px var(--trabajo-borde); }
.s3-chip.s3-cliente::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--trabajo-punto); }

/* ---------- Bloques, filas, cifras ---------- */
.s3-bloque { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 16px; min-width: 0; box-shadow: var(--sombra); }
.s3-bloque-cab { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 12px; min-width: 0; }
.s3-bloque-cab h2 { font-size: 17px; font-weight: 650; letter-spacing: -0.005em; }
.s3-bloque-cab .s3-sub { margin: 0; font-size: 13px; }
.s3-pila { display: grid; gap: 12px; min-width: 0; align-content: start; }
.s3-dos { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .s3-dos { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
.s3-tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1050px) { .s3-tres { grid-template-columns: minmax(0, 1fr); } }

.s3-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
@media (max-width: 760px) { .s3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s3-kpi { display: block; background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; padding: 12px 14px; text-decoration: none; color: var(--texto); min-width: 0; box-shadow: var(--sombra); }
a.s3-kpi:hover { border-color: var(--linea-fuerte); }
.s3-kpi-v { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.s3-kpi-t { display: block; font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-kpi.s3-r .s3-kpi-v { color: var(--rojo-texto); }

.s3-filas { display: grid; gap: 6px; min-width: 0; }
.s3-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; width: 100%; min-width: 0; padding: 10px 12px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--linea); text-align: left; font: inherit; color: var(--texto); text-decoration: none; margin: 0;
}
.s3-bloque .s3-fila { background: var(--superficie-2); border-color: transparent; }
.s3-fila-link { cursor: pointer; }
.s3-fila-link:hover { border-color: var(--linea-fuerte); }
.s3-fila-t { font-weight: 600; min-width: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.s3-fila-m { font-weight: 700; text-align: right; white-space: nowrap; }
.s3-fila-m.s3-rojo { color: var(--rojo-texto); }
.s3-fila-d { grid-column: 1; font-size: 13px; color: var(--texto-2); min-width: 0; overflow-wrap: anywhere; }
.s3-fila-x { grid-column: 2; grid-row: 2; justify-self: end; }
.s3-linea-dato { margin: 0 0 10px; font-size: 14px; }

.s3-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .s3-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s3-stat { display: block; background: var(--superficie-2); border-radius: 12px; padding: 10px 12px; text-decoration: none; color: var(--texto); min-width: 0; }
.s3-stat-v { display: block; font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.s3-stat-t { display: block; font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-stat.s3-r { background: var(--rojo-fondo); }
.s3-stat.s3-r .s3-stat-v { color: var(--rojo-texto); }

.s3-enlaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 520px) { .s3-enlaces { grid-template-columns: minmax(0, 1fr); } }
.s3-enlace { display: block; text-decoration: none; color: var(--texto); background: var(--superficie-2); border-radius: 12px; padding: 10px 12px; min-width: 0; }
.s3-enlace:hover { background: var(--campo); }
.s3-enlace b { display: block; font-size: 15px; }
.s3-enlace span { display: block; font-size: 12.5px; color: var(--texto-2); }

.s3-lista-ot { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.s3-lista-ot li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; background: var(--superficie-2); border-radius: 10px; }

/* ---------- Avisos con botón (Deshacer) ---------- */
.s3-toast .s3-toast-accion {
  flex: 0 0 auto; background: transparent; color: inherit; border: 1px solid currentColor; border-radius: 8px; padding: 4px 10px; font-size: 13px; font-weight: 600; opacity: 1; cursor: pointer;
}
.s3-toast .s3-toast-accion:disabled { opacity: 0.5; cursor: default; }

/* ---------- Control: propuestas ---------- */
.s3-prop { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; box-shadow: var(--sombra); min-width: 0; }
.s3-prop.s3-hecha { opacity: 0.8; box-shadow: none; }
.s3-prop-1 { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.s3-prop-1 .s3-btn { margin-left: auto; flex: 0 0 auto; }
.s3-prop-ico { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 14px; background: var(--campo); color: var(--texto-2); }
.s3-prop-ico.s3-r { background: var(--rojo-fondo); color: var(--rojo-texto); }
.s3-prop-ico.s3-a { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.s3-prop-ico.s3-z { background: var(--trabajo-bg); color: var(--texto); box-shadow: inset 0 0 0 1px var(--trabajo-borde); }
.s3-prop-ico.s3-v { background: var(--verde-fondo); color: var(--verde-texto); }
.s3-prop-txt { min-width: 0; flex: 1 1 auto; }
.s3-prop-tag { font-size: 11.5px; color: var(--texto-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.s3-prop-t { font-size: 15.5px; line-height: 1.3; font-weight: 650; letter-spacing: 0; margin-top: 1px; }
.s3-prop-d { color: var(--texto-2); font-size: 14px; margin: 3px 0 0; overflow-wrap: anywhere; }
.s3-hecho-tx { font-size: 13.5px; color: var(--verde-texto); font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.s3-arreglos { display: grid; gap: 6px; }
.s3-arr {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; width: 100%; text-align: left; font: inherit; font-size: 14px; color: var(--texto);
  border: 1px solid var(--linea); border-radius: 12px; padding: 9px 11px; background: transparent; cursor: pointer; margin: 0;
}
.s3-arr:hover { border-color: var(--linea-fuerte); }
.s3-arr[aria-checked="true"] { border-color: var(--acento); background: var(--superficie-2); }
.s3-o { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--linea-fuerte); margin-top: 2px; box-sizing: border-box; }
.s3-arr[aria-checked="true"] .s3-o { border: 5px solid var(--acento); }
.s3-arr-txt b { font-weight: 650; }
.s3-arr-txt small { display: block; color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.s3-arr-txt small.s3-avisa { color: var(--texto-3); font-size: 12.5px; }
.s3-grupo { background: var(--superficie-2); border-radius: 16px; padding: 4px; }
.s3-grupo > summary { list-style: none; cursor: pointer; padding: 12px; display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: 14px; border-radius: 12px; }
.s3-grupo > summary::-webkit-details-marker { display: none; }
.s3-grupo > summary::before { content: "▸"; color: var(--texto-3); }
.s3-grupo[open] > summary::before { content: "▾"; }
.s3-grupo > summary span { color: var(--texto-3); font-size: 12.5px; }
.s3-grupo > summary:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.s3-grupo > .s3-pila { padding: 4px 4px 8px; }
.s3-prop-acc { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- Control: mapa de calor ---------- */
.s3-calor-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.s3-calor { border-collapse: separate; border-spacing: 3px; width: 100%; min-width: 300px; font-size: 12.5px; }
.s3-calor th { font-weight: 600; color: var(--texto-3); font-size: 11.5px; text-align: center; padding: 0 0 2px; }
.s3-calor tbody th { text-align: left; color: var(--texto-2); font-size: 12.5px; line-height: 1.2; width: 96px; max-width: 96px; padding-right: 4px; position: sticky; left: 0; background: var(--superficie); z-index: 1; overflow-wrap: break-word; }
.s3-calor-sep th { text-align: left; padding-top: 8px; text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; position: static; }
.s3-calor td { padding: 0; }
.s3-celda {
  display: block; width: 100%; min-width: 30px; min-height: 32px; border: 0; border-radius: 8px; padding: 6px 2px; text-align: center; font: inherit; font-size: 12.5px; font-weight: 650;
  cursor: pointer; margin: 0;
}
.s3-nulo { cursor: default; }
.s3-n0 { background: var(--superficie-2); color: var(--texto-3); }
.s3-n1 { background: var(--verde-fondo); color: var(--verde-texto); }
.s3-n2 { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.s3-n3 { background: var(--rojo-fondo); color: var(--rojo-texto); }
button.s3-celda:hover { box-shadow: inset 0 0 0 1.5px var(--linea-fuerte); }
.s3-leyenda { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--texto-3); margin-top: 8px; }
.s3-leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }

/* ---------- Asignaciones ---------- */
.s3-check { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 500; color: var(--texto-2); cursor: pointer; }
.s3-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--acento); }
.s3-rojo-tx b, b.s3-rojo-tx { font-weight: 650; }
.s3-asig-cols { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.s3-col { flex: 1 0 272px; max-width: 420px; background: var(--superficie-2); border-radius: var(--radio); border: 2px solid transparent; scroll-snap-align: start; min-width: 0; }
@media (max-width: 480px) { .s3-col { flex-basis: 84%; } }
.s3-col.s3-over { border-color: var(--acento); border-style: dashed; }
.s3-col-cab { padding: 12px 12px 10px; display: grid; gap: 6px; border-radius: var(--radio) var(--radio) 0 0; }
.s3-col-cab[data-destino] { cursor: pointer; background: var(--campo); outline: 2px dashed var(--linea-fuerte); outline-offset: -4px; }
.s3-col-cab[data-destino]:hover { outline-color: var(--acento); }
.s3-col-t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.s3-col-t b { font-size: 15.5px; font-weight: 650; }
.s3-col-n { font-size: 12.5px; color: var(--texto-3); font-weight: 600; }
.s3-col-sub { font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-col-sub b { color: var(--texto); font-weight: 650; }
.s3-carga { height: 6px; border-radius: 3px; background: var(--campo); overflow: hidden; }
.s3-carga i { display: block; height: 100%; border-radius: 3px; background: var(--verde); }
.s3-carga.s3-media i { background: var(--amarillo); }
.s3-carga.s3-alta i { background: var(--rojo); }
.s3-col-cuerpo { padding: 0 8px 10px; display: grid; gap: 8px; align-content: start; }
@media (min-width: 700px) { .s3-col-cuerpo { max-height: calc(100vh - 290px); min-height: 80px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; } }

.s3-ot {
  position: relative; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px; padding: 10px 12px; box-shadow: var(--sombra); cursor: pointer; display: grid; gap: 5px; min-width: 0;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.s3-ot:hover { border-color: var(--linea-fuerte); }
.s3-ot[draggable="true"] { cursor: grab; }
.s3-ot.s3-sel { outline: 2px solid var(--acento); outline-offset: 1px; }
.s3-ot.s3-arrastrada { opacity: 0.45; }
.s3-ot.s3-ocupada { opacity: 0.55; pointer-events: none; }
.s3-ot.s3-dormida { opacity: 0.7; border-style: dashed; }
.s3-ot.s3-prio { border-color: var(--amarillo); }
.s3-ot-1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.s3-ot-n { font-weight: 750; font-size: 15px; color: var(--texto); text-decoration: none; flex: 0 0 auto; }
.s3-ot-n:hover { text-decoration: underline; }
.s3-ot-cli { font-weight: 600; font-size: 13.5px; min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-star {
  flex: 0 0 auto; width: 36px; height: 36px; margin: -6px -6px -6px 0; border: 0; background: transparent; color: var(--texto-3); font-size: 19px; line-height: 1; border-radius: 50%; cursor: pointer;
  display: inline-grid; place-items: center; opacity: 0.55;
}
.s3-star[aria-pressed="true"], .s3-star.s3-fija { color: var(--amarillo); opacity: 1; }
.s3-star:hover { background: var(--campo); opacity: 1; }
.s3-star.s3-fija { cursor: default; }
.s3-ot-trab { font-size: 13.5px; color: var(--texto); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.s3-ot-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.s3-ot-meta { font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-ot-est { font-size: 12px; color: var(--texto-3); }

.s3-mover {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom)); width: min(760px, calc(100% - 24px)); z-index: 30;
  background: var(--acento); color: var(--acento-texto); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; box-shadow: var(--sombra-alta);
}
.s3-asig.s3-seleccion { padding-bottom: 150px; }
body:has(.s3-mover) #toast-root { bottom: calc(160px + env(safe-area-inset-bottom)); }
.s3-mover-t span { opacity: 0.85; }
.s3-mover-b { display: flex; flex-wrap: wrap; gap: 6px; }
.s3-mover .s3-btn { background: var(--superficie); color: var(--texto); border-color: transparent; }
.s3-mover .s3-btn-sec { background: transparent; color: inherit; border-color: currentColor; }
.s3-mover .s3-btn:disabled { opacity: 0.55; }

.s3-sug { display: grid; gap: 6px; max-height: 52vh; overflow-y: auto; margin-top: 8px; }
.s3-sug-fila { display: grid; grid-template-columns: 20px minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; padding: 9px 10px; background: var(--superficie-2); border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--texto); cursor: pointer; }
.s3-sug-fila input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--acento); }
.s3-sug-fila small { display: block; font-size: 12.5px; color: var(--texto-2); font-weight: 400; overflow-wrap: anywhere; }
@media (max-width: 520px) { .s3-sug-fila { grid-template-columns: 20px minmax(0, 1fr); } .s3-sug-a { grid-column: 2; } }
#modal-root .modal-botones { margin-top: 14px; }

/* ---------- Informe ---------- */
.s3-informe { display: grid; gap: 14px; }
.s3-informe .s3-cab { margin-bottom: 2px; }
.s3-nav { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--campo); flex: 0 0 auto; }
.s3-nav-b, .s3-nav-hoy { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 34px; padding: 0 12px; border-radius: 999px; color: var(--texto); font-size: 13.5px; font-weight: 600; text-decoration: none; }
.s3-nav-b { padding: 0; font-size: 19px; line-height: 1; }
.s3-nav-b.s3-desact { opacity: 0.3; }
.s3-nav-hoy.s3-activa { background: var(--superficie); box-shadow: var(--sombra); }
.s3-barras { display: grid; gap: 12px; }
.s3-barra-t { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.s3-barra-t span { color: var(--texto-2); font-size: 13px; }
.s3-barra { height: 8px; border-radius: 4px; background: var(--campo); overflow: hidden; margin: 4px 0 3px; }
.s3-barra i { display: block; height: 100%; background: var(--texto-3); border-radius: 4px; }
.s3-barra.s3-lenta i { background: var(--rojo); }
.s3-barra-d { font-size: 12.5px; color: var(--texto-2); }

/* ---------- Plata ---------- */
.s3-tubo { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .s3-tubo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.s3-tubo-paso { background: var(--superficie-2); border-radius: 12px; padding: 12px; min-width: 0; }
.s3-tubo-et { font-size: 12.5px; color: var(--texto-3); overflow-wrap: anywhere; line-height: 1.25; min-height: 2.5em; }
.s3-tubo-mo { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.s3-tubo-di { font-size: 12.5px; color: var(--texto-2); }
.s3-tubo-paso.s3-lento { background: var(--rojo-fondo); }
.s3-tubo-paso.s3-lento .s3-tubo-di { color: var(--rojo-texto); font-weight: 650; }
.s3-tramos { margin: -2px 0 10px; }
.s3-aviso { background: var(--amarillo-fondo); color: var(--amarillo-texto); border-radius: 12px; padding: 9px 12px; font-size: 13.5px; margin-bottom: 12px; }
.s3-mas { margin-top: 8px; }
.s3-plata .s3-fila-m { font-size: 14.5px; }

/* ---------- Ficha por pasos ---------- */
.s3-pasos { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; margin-bottom: 12px; box-shadow: var(--sombra); display: grid; gap: 12px; }
.s3-pasos-skel { display: grid; gap: 8px; }
.s3-pasos-skel .skel.l2 { width: 60%; }
.s3-pasos-cab { min-width: 0; }
.s3-pasos-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.s3-pasos-id { display: flex; align-items: baseline; gap: 8px; }
.s3-ot-grande { font-size: 25px; font-weight: 750; letter-spacing: -0.01em; line-height: 1.1; }
.s3-pasos-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.s3-pasos-cli { font-weight: 650; margin-top: 2px; overflow-wrap: anywhere; }
.s3-pasos-trab { color: var(--texto-2); font-size: 14px; overflow-wrap: anywhere; }
.s3-riel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 12px; }
.s3-riel i { height: 5px; border-radius: 3px; background: var(--campo); }
.s3-riel i.s3-h { background: var(--verde); }
.s3-riel i.s3-ac { background: var(--acento); }
.s3-riel-tx { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 12.5px; color: var(--texto-3); margin-top: 5px; }
.s3-riel-tx b { color: var(--texto); }

.s3-pasos-lista { display: grid; gap: 8px; }
.s3-paso { background: var(--superficie); border: 1px solid var(--linea); border-radius: 14px; min-width: 0; }
.s3-paso.s3-futuro { background: transparent; border-style: dashed; }
.s3-paso.s3-actual { border-color: var(--linea-fuerte); box-shadow: var(--sombra-media); }
.s3-paso-cab {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border: 0; background: transparent; text-align: left;
  font: inherit; color: inherit; margin: 0; border-radius: 14px;
}
button.s3-paso-cab { cursor: pointer; }
.s3-pn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--campo); color: var(--texto-2); }
.s3-paso.s3-hecho .s3-pn { background: var(--verde-fondo); color: var(--verde-texto); }
.s3-paso.s3-actual .s3-pn { background: var(--acento); color: var(--acento-texto); }
.s3-paso-txt { display: grid; min-width: 0; }
.s3-paso-t { font-weight: 650; }
.s3-paso-r { font-size: 13px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-paso.s3-futuro .s3-paso-t, .s3-paso.s3-futuro .s3-paso-r { color: var(--texto-3); }
.s3-paso-plan { font-size: 12.5px; color: var(--texto-3); white-space: nowrap; }
.s3-paso-plan.s3-vencido { color: var(--rojo-texto); font-weight: 650; }
@media (max-width: 420px) { .s3-paso-cab { grid-template-columns: 30px minmax(0, 1fr); } .s3-paso-plan { grid-column: 2; } }
.s3-paso-cuerpo { padding: 0 14px 14px 52px; font-size: 14px; }
@media (max-width: 420px) { .s3-paso-cuerpo { padding-left: 14px; } }
.s3-falta { background: var(--amarillo-fondo); color: var(--amarillo-texto); border-radius: 10px; padding: 9px 11px; font-size: 13.5px; margin: 2px 0 10px; overflow-wrap: anywhere; }
.s3-falta.s3-r { background: var(--rojo-fondo); color: var(--rojo-texto); }
.s3-falta b { display: block; }
.s3-dato { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--linea); font-size: 13.5px; overflow-wrap: anywhere; }
.s3-dato:last-of-type { border-bottom: 0; }
.s3-dato > span:first-child { color: var(--texto-3); }
.s3-resp { display: grid; gap: 8px; margin: 6px 0 4px; }
.s3-resp-f { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; }
.s3-resp-f small, .s3-vm small { display: block; color: var(--texto-3); font-size: 12.5px; overflow-wrap: anywhere; }
.s3-mini {
  width: 48px; height: 48px; border-radius: 9px; padding: 0; overflow: hidden; background: var(--campo); border: 1px solid var(--linea); display: grid; place-items: center;
  color: var(--texto-3); font: inherit; font-size: 10.5px; text-align: center; line-height: 1.15; cursor: default;
}
button.s3-mini { cursor: zoom-in; }
.s3-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s3-mini.s3-sin-foto, .s3-mini.s3-rota { background: transparent; border-style: dashed; }
.s3-vm { margin: 8px 0 2px; padding: 8px 10px; border-radius: 10px; background: var(--rojo-fondo); color: var(--rojo-texto); font-size: 13.5px; overflow-wrap: anywhere; }
.s3-vm small { color: inherit; opacity: 0.85; }
.s3-pasos-acc { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.s3-pasos-acc .s3-sub { margin: 0; font-size: 12.5px; }

.s3-vertodo { margin: 0 0 12px; }
.s3-vertodo > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
  color: var(--texto); padding: 12px 16px; border-radius: 14px; border: 1.5px solid var(--linea-fuerte); background: var(--superficie);
  transition: border-color .15s, background .15s;
}
.s3-vertodo > summary:hover { border-color: var(--texto); }
.s3-vertodo > summary::-webkit-details-marker { display: none; }
.s3-vt-t { display: grid; gap: 2px; min-width: 0; }
.s3-vt-t b { font-size: 15.5px; font-weight: 700; }
.s3-vt-t small { font-weight: 400; color: var(--texto-3); font-size: 12.5px; overflow-wrap: anywhere; }
.s3-vt-cerrar, .s3-vertodo[open] .s3-vt-abrir { display: none; }
.s3-vertodo[open] .s3-vt-cerrar { display: inline; }
.s3-vt-flecha { flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--acento); position: relative; transition: transform .2s; }
.s3-vt-flecha::after { content: ""; position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; border-right: 2px solid var(--acento-texto); border-bottom: 2px solid var(--acento-texto); transform: translate(-50%, -50%) rotate(45deg); }
.s3-vertodo[open] .s3-vt-flecha { transform: rotate(180deg); }
.s3-vertodo[open] > summary { margin-bottom: 12px; }
@media (prefers-reduced-motion: reduce) { .s3-vt-flecha, .s3-vertodo > summary { transition: none; } }

@media (prefers-reduced-motion: reduce) { .s3-btn, .s3-ot, .s3-col { transition: none; } }

/* ---------- Mi cola de diseño (tablero, grupos) y lotes en Asignaciones (19-oct) ---------- */
.s3-q { display: grid; gap: 18px; max-width: 980px; margin: 0 auto; padding-bottom: 24px; }
.s3-q-h { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; margin: 0 0 10px; }
.s3-q-sec-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--gris-pill); color: var(--texto-2); font-size: 12.5px; font-weight: 650; }
.s3-q-ayuda, .s3-q-vacio { color: var(--texto-2); font-size: 14px; margin: -4px 0 10px; }
.s3-q-vacio { margin: 0; padding: 14px; border: 1px dashed var(--linea-fuerte); border-radius: 12px; text-align: center; }
.s3-q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.s3-q-card {
  display: grid; gap: 5px; min-width: 0; padding: 12px; background: var(--superficie); border: 1px solid var(--linea); border-radius: 12px;
  color: inherit; text-decoration: none; box-shadow: var(--sombra);
}
a.s3-q-card:hover, .s3-q-lote-cab:hover { border-color: var(--linea-fuerte); }
.s3-q-card:focus-visible, .s3-q-fila:focus-visible, .s3-q-lote-cab:focus-visible, .s3-q-num:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.s3-q-trab { border-color: var(--acento); }
.s3-q-1 { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.s3-q-n { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.s3-q-cli { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.s3-q-trabajo { font-size: 14px; color: var(--texto-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.s3-q-2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.s3-q-nec { font-size: 13px; color: var(--texto-3); }
.s3-q-3 { display: block; }
.s3-q-acc { display: flex; justify-content: flex-end; margin-top: 2px; }
.s3-q-tomar { min-height: 40px; padding: 8px 18px; border-radius: 10px; border: 0; background: var(--acento); color: var(--acento-texto); font: inherit; font-weight: 650; cursor: pointer; }
.s3-q-tomar:disabled { opacity: 0.5; }
.s3-q-lote { padding: 0; gap: 0; overflow: hidden; border-left: 4px solid var(--acento); }
.s3-q-lote-cab { display: grid; gap: 5px; padding: 12px 12px 8px; color: inherit; text-decoration: none; }
.s3-q-lote-t { flex: none; font-weight: 700; font-size: 12.5px; padding: 2px 8px; border-radius: 8px; background: var(--acento); color: var(--acento-texto); }
.s3-q-nums, .s3-lote-nums { display: flex; flex-wrap: wrap; gap: 6px; }
.s3-q-nums { padding: 0 12px 10px; }
.s3-q-num, .s3-lote-n {
  display: inline-flex; align-items: center; min-height: 32px; padding: 3px 10px; border-radius: 8px; background: var(--campo); border: 1px solid var(--linea);
  color: var(--texto); font-weight: 650; font-size: 13.5px; text-decoration: none; font-variant-numeric: tabular-nums;
}
.s3-q-lote .s3-q-acc { padding: 0 12px 12px; }
.s3-q-sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); font-weight: 650; }
.s3-q-sec > summary::-webkit-details-marker { display: none; }
.s3-q-sec > summary::before { content: "▸"; color: var(--texto-3); }
.s3-q-sec[open] > summary::before { content: "▾"; }
.s3-q-sec[open] > summary { margin-bottom: 8px; }
.s3-q-lista { display: grid; gap: 6px; }
.s3-q-fila {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 10px 12px; background: var(--superficie);
  border: 1px solid var(--linea); border-radius: 12px; color: inherit; text-decoration: none;
}
.s3-q-fila-t { display: grid; min-width: 0; }
.s3-q-fila-t b, .s3-q-fila-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s3-q-fila-t small { color: var(--texto-2); font-size: 13px; }
.s3-q-esp { grid-column: 2; font-size: 12.5px; color: var(--texto-3); }
.s3-q-esp.s3-q-tarde { color: var(--rojo-texto); font-weight: 650; }
@media (min-width: 700px) {
  .s3-q-fila { grid-template-columns: auto minmax(0, 1fr) auto; }
  .s3-q-esp { grid-column: auto; white-space: nowrap; }
}

.s3-iguales { background: var(--campo); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.s3-lote { border-left: 4px solid var(--acento); }
.s3-lote-t { flex: none; font-size: 12.5px; padding: 2px 8px; border-radius: 8px; background: var(--acento); color: var(--acento-texto); }
.s3-lote-nums { margin: 6px 0 2px; }
.s3-iguales-lista { display: grid; gap: 6px; margin: 8px 0 4px; }
.s3-iguales-lista > div { padding: 8px 10px; border-radius: 10px; background: var(--campo); font-size: 14px; overflow-wrap: anywhere; }
.s3-iguales-lista small { display: block; color: var(--texto-3); font-size: 12.5px; }

/* 19-oct: «Hacer consulta al cliente» (modal de js/vb.js) */
.vb-consulta .vbc-pregunta { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; }
.vb-consulta .vbc-pregunta textarea { flex: 1; min-width: 0; resize: vertical; }
.vb-consulta [data-vbc="mas"] { margin-bottom: 12px; }

/* ===== 24-oct-2026: centro de decisiones de la empresa (WP-G). Control «Decide hoy» + Compras + Ajustes + informe Semana ===== */
main.vista-s3-compras, main.vista-s3-ajustes { max-width: 1100px; }
.s3-compras, .s3-ajustes { font-variant-numeric: tabular-nums; min-width: 0; }
.s3-ajustes .s3-pila { max-width: 640px; }

/* Control: tarjetas de plata, cobranza y compras */
.s3-emp-grupo { display: grid; gap: 12px; min-width: 0; }
.s3-emp-grupo:empty { display: none; }
.s3-emp { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; box-shadow: var(--sombra); min-width: 0; }
.s3-emp.s3-emp-ok { box-shadow: none; padding-top: 12px; padding-bottom: 12px; }
.s3-emp-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; min-width: 0; }
.s3-emp-t { min-width: 0; }
.s3-emp-t h3 { font-size: 17px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.s3-emp-t span { display: block; font-size: 13.5px; color: var(--texto-2); margin-top: 1px; }
.s3-emp-cifra { text-align: right; flex: 0 0 auto; line-height: 1.1; }
.s3-emp-cifra b { display: block; font-size: 26px; font-weight: 750; letter-spacing: -0.02em; }
.s3-emp-cifra span { display: block; font-size: 13.5px; font-weight: 650; color: var(--texto-2); }
.s3-emp-cero { color: var(--verde-texto); font-size: 20px; font-weight: 800; }
.s3-emp-auto { font-size: 13.5px; color: var(--verde-texto); background: var(--verde-fondo); border-radius: 10px; padding: 7px 11px; overflow-wrap: anywhere; }
.s3-emp-auto b { font-weight: 700; }
.s3-emp-aviso { margin: 0; }
.s3-emp-items { display: grid; gap: 8px; min-width: 0; }
.s3-emp-it { background: var(--superficie-2); border-radius: 12px; padding: 11px 12px; display: grid; gap: 8px; min-width: 0; }
.s3-emp-it-1 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.s3-emp-it-t { font-weight: 650; font-size: 15px; min-width: 0; overflow-wrap: anywhere; }
.s3-emp-it-m { font-weight: 750; font-size: 15px; text-align: right; white-space: nowrap; }
.s3-emp-it-m small { display: block; font-size: 11.5px; font-weight: 600; color: var(--texto-3); }
.s3-emp-d { grid-column: 1 / -1; font-size: 13px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-emp-d i { color: var(--texto-3); font-style: normal; }
.s3-lnk-ot { color: var(--texto); font-weight: 750; text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
.s3-emp-acc { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.s3-emp .s3-btn-chico { min-height: 40px; }
.s3-emp-pie { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; }
.s3-emp-al { margin: 0; }
.s3-emp-lbl { display: grid; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--texto-3); }
.s3-emp-sel { width: 100%; min-height: 40px; font-size: 14px; padding: 6px 10px; border-radius: 10px; }
.s3-emp-det { font-size: 13px; }
.s3-emp-det > summary { cursor: pointer; color: var(--texto-2); font-weight: 600; padding: 4px 0; list-style: none; }
.s3-emp-det > summary::-webkit-details-marker { display: none; }
.s3-emp-det > summary::before { content: "▸ "; color: var(--texto-3); }
.s3-emp-det[open] > summary::before { content: "▾ "; }
.s3-emp-det ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.s3-emp-det li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 9px; background: var(--superficie); border-radius: 8px; min-width: 0; }
.s3-emp-det li span { min-width: 0; overflow-wrap: anywhere; }
.s3-emp-det li b { white-space: nowrap; }

/* Compras */
.s3-comp { background: var(--superficie); border: 1px solid var(--linea); border-radius: 16px; padding: 14px 16px; display: grid; gap: 10px; box-shadow: var(--sombra); min-width: 0; }
.s3-comp-1 { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; min-width: 0; }
.s3-comp-txt { min-width: 0; flex: 1 1 auto; }
.s3-comp-tot { text-align: right; flex: 0 0 auto; }
.s3-comp-tot b { display: block; font-size: 20px; font-weight: 750; letter-spacing: -0.01em; }
.s3-comp-tot small { font-size: 11.5px; color: var(--texto-3); font-weight: 600; }
.s3-comp-fila { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.s3-comp-cant { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.s3-comp-paso { display: inline-flex; align-items: stretch; }
.s3-comp-paso input { width: 76px; min-height: 44px; text-align: center; border-radius: 0; margin: 0; font-size: 16px; font-weight: 650; border-left: 0; border-right: 0; -moz-appearance: textfield; }
.s3-comp-paso input::-webkit-outer-spin-button, .s3-comp-paso input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.s3-comp-mm { width: 44px; min-height: 44px; border: 1px solid var(--linea-fuerte); background: var(--campo); color: var(--texto); font: inherit; font-size: 20px; font-weight: 600; cursor: pointer; margin: 0; padding: 0; }
.s3-comp-mm:first-child { border-radius: 10px 0 0 10px; }
.s3-comp-mm:last-child { border-radius: 0 10px 10px 0; }
.s3-comp-un { color: var(--texto-3); font-weight: 500; }
.s3-comp-ref { font-size: 13px; color: var(--texto-2); }
.s3-comp-acc { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; justify-content: space-between; }
.s3-comp-bts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.s3-comp .s3-btn-chico { min-height: 44px; padding: 8px 16px; }
.s3-comp-nota { margin: 0; }
.s3-comp-borrador { width: 100%; box-sizing: border-box; font-size: 14px; line-height: 1.4; resize: vertical; margin-bottom: 8px; }

/* Ajustes */
.s3-aj-umbral { display: block; font-size: 13.5px; font-weight: 600; color: var(--texto-2); margin: 0 0 6px; }
.s3-aj-umbral-f { display: flex; align-items: center; gap: 8px; }
.s3-aj-umbral-f input { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 18px; font-weight: 650; margin: 0; }
.s3-aj-peso { font-size: 18px; font-weight: 650; color: var(--texto-2); }
.s3-aj-lista { display: grid; gap: 10px; }
.s3-aj-sw { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; margin: 0; padding: 10px 12px; background: var(--superficie-2); border-radius: 12px; cursor: pointer; position: relative; font-weight: 500; }
.s3-aj-sw input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.s3-aj-pista { width: 48px; height: 28px; border-radius: 14px; background: var(--linea-fuerte); position: relative; transition: background var(--t); flex: none; }
.s3-aj-pista i { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--superficie); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform var(--t); }
.s3-aj-sw input:checked + .s3-aj-pista { background: var(--verde); }
.s3-aj-sw input:checked + .s3-aj-pista i { transform: translateX(20px); }
.s3-aj-sw input:focus-visible + .s3-aj-pista { outline: 2px solid var(--texto); outline-offset: 2px; }
.s3-aj-sw input:disabled + .s3-aj-pista { opacity: 0.5; }
.s3-aj-txt { display: grid; min-width: 0; }
.s3-aj-txt b { font-weight: 650; font-size: 14.5px; }
.s3-aj-txt small { color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.s3-aj-chips { margin-bottom: 14px; }
.s3-aj-chip { padding: 4px 6px 4px 12px; font-size: 13px; white-space: normal; }
.s3-aj-chip button { border: 0; background: transparent; color: var(--texto-2); font: inherit; cursor: pointer; min-width: 32px; min-height: 32px; border-radius: 50%; padding: 0; margin: 0; }
.s3-aj-res { display: grid; gap: 6px; margin-top: 8px; }
.s3-aj-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; align-items: center; text-align: left; font: inherit; color: var(--texto); background: var(--superficie-2); border: 1px solid transparent; border-radius: 12px; padding: 9px 12px; min-height: 48px; cursor: pointer; margin: 0; }
.s3-aj-hit:hover { border-color: var(--linea-fuerte); }
.s3-aj-hit b { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.s3-aj-hit small { grid-column: 1; color: var(--texto-3); font-size: 12.5px; }
.s3-aj-hit span { grid-column: 2; grid-row: 1 / span 2; font-size: 12.5px; font-weight: 650; color: var(--texto-2); }

/* Informe: pestañas Día / Semana */
.s3-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--campo); margin-bottom: 14px; }
.s3-tabs a { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 18px; border-radius: 999px; color: var(--texto-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.s3-tabs a.s3-activa { background: var(--superficie); color: var(--texto); box-shadow: var(--sombra); }
@media (max-width: 640px) { .s3-emp, .s3-comp { padding: 12px; } }

/* ---------- Referencias para facturar: OC, HES y contrato (ficha paso 5, Control › Facturar, Ajustes) ---------- */
.s3-refs { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linea); display: grid; gap: 10px; min-width: 0; }
.s3-refs-t { font-weight: 700; font-size: 14.5px; }
.s3-ref-pide { margin: 0; font-size: 13.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-ref-pide b { color: var(--texto); }
.s3-ref-tenue { color: var(--texto-3); }
.s3-refs .s3-falta { margin: 0; }
.s3-ref-ok { background: var(--verde-fondo); color: var(--verde-texto); border-radius: 10px; padding: 8px 11px; font-size: 13.5px; font-weight: 600; }
.s3-ref-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s3-ref-lista li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; background: var(--superficie-2); border-radius: 10px; min-width: 0; }
.s3-ref-num { display: grid; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.s3-ref-num small, .s3-ref-det-t small { color: var(--texto-3); font-size: 12.5px; overflow-wrap: anywhere; }
.s3-ref-lista .enlace-boton { min-height: 40px; padding: 0 6px; }
.s3-ref-det { display: grid; gap: 6px; }
.s3-ref-det-f { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 10px; background: var(--amarillo-fondo); border-radius: 10px; min-width: 0; }
.s3-ref-det-t { display: grid; gap: 1px; min-width: 0; font-size: 14px; color: var(--amarillo-texto); overflow-wrap: anywhere; }
.s3-ref-det-t small { color: inherit; opacity: 0.85; }
.s3-ref-det-f .s3-btn { min-height: 44px; }
.s3-ref-form > summary { list-style: none; cursor: pointer; }
.s3-ref-form > summary::-webkit-details-marker { display: none; }
.s3-ref-form form { display: grid; grid-template-columns: 1fr; gap: 0 12px; margin-top: 8px; padding: 10px 12px 12px; background: var(--superficie-2); border-radius: 12px; }
.s3-ref-form form label { margin: 8px 0 4px; }
.s3-ref-form form .s3-btn { margin-top: 12px; min-height: 44px; justify-self: start; }
.s3-ref-final { margin: 0; font-size: 13.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-ref-final b { color: var(--texto); }
@media (min-width: 640px) { .s3-ref-form form { grid-template-columns: 1fr 1fr 1fr auto; align-items: end; } .s3-ref-form form .s3-btn { margin-top: 0; } }

/* Control › Facturar: las que no se pueden facturar todavía */
.s3-ref-bloq { display: grid; gap: 8px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--linea-fuerte); min-width: 0; }
.s3-ref-bloq-t { display: grid; gap: 1px; font-size: 13.5px; }
.s3-ref-bloq-t span { color: var(--texto-2); }
.s3-ref-grupo { background: var(--rojo-fondo); border-radius: 12px; min-width: 0; }
.s3-ref-grupo > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 11px 12px; min-height: 48px; border-radius: 12px; }
.s3-ref-grupo > summary::-webkit-details-marker { display: none; }
.s3-ref-grupo > summary:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.s3-ref-g-t { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; font-size: 15px; color: var(--texto); overflow-wrap: anywhere; }
.s3-ref-g-t::before { content: "▸"; color: var(--rojo-texto); }
.s3-ref-grupo[open] .s3-ref-g-t::before { content: "▾"; }
.s3-ref-g-m { font-size: 13.5px; font-weight: 650; color: var(--rojo-texto); white-space: nowrap; }
.s3-ref-g-cuerpo { display: grid; gap: 8px; padding: 0 10px 10px; min-width: 0; }
.s3-ref-g-ayuda { margin: 0 2px; font-size: 13px; color: var(--rojo-texto); overflow-wrap: anywhere; }
.s3-ref-it { background: var(--superficie); }
.s3-ref-falta { font-weight: 600; color: var(--rojo-texto); }
.s3-ref-acc .s3-btn { min-height: 44px; }
.s3-ref-enlazar { height: auto; text-align: left; white-space: normal; line-height: 1.25; overflow-wrap: anywhere; }
.s3-ref-modal select, .s3-ref-modal input { margin-bottom: 2px; }

/* Ajustes › Clientes que facturan con OC o HES */
.s3-ref-clis { display: grid; gap: 8px; margin-bottom: 14px; }
.s3-ref-cli { display: grid; gap: 8px; padding: 11px 12px; background: var(--superficie-2); border-radius: 12px; min-width: 0; }
.s3-ref-cli-1 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.s3-ref-cli-1 b { min-width: 0; overflow-wrap: anywhere; font-size: 14.5px; }
.s3-ref-ops { display: flex; flex-wrap: wrap; gap: 8px; }
.s3-ref-op { display: inline-flex; margin: 0; position: relative; font-weight: 600; cursor: pointer; }
.s3-ref-op input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.s3-ref-op span { display: inline-flex; align-items: baseline; gap: 6px; min-height: 44px; align-items: center; padding: 0 16px; border-radius: 999px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto-2); font-size: 14px; }
.s3-ref-op span small { font-size: 11.5px; color: var(--texto-3); font-weight: 600; }
.s3-ref-op input:checked + span { background: var(--acento); color: var(--acento-texto); border-color: var(--acento); }
.s3-ref-op input:checked + span small { color: inherit; opacity: 0.8; }
.s3-ref-op input:focus-visible + span { outline: 2px solid var(--texto); outline-offset: 2px; }
.s3-ref-op input:disabled + span { opacity: 0.5; }
.s3-ref-cli-nota { color: var(--texto-3); font-size: 12.5px; overflow-wrap: anywhere; }

/* ---------- Presión por OC (fase 2, 24-oct-2026) ----------
   Ficha: banner de lo que hay que hacer con la OC · hoja para responder, ver el correo y destrabar · Control › Facturar › Presión por OC ·
   Ajustes › bloqueos · chip «Bloqueada: sin OC» (tablero, Asignaciones, Lo siguiente). Solo tokens de app.css. */
.s3-oc-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; border-radius: 12px; padding: 11px 13px; margin: 0 0 12px; min-width: 0; }
.s3-oc-b-t { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; font-size: 13.5px; overflow-wrap: anywhere; }
.s3-oc-b-t b { font-size: 14.5px; font-weight: 650; }
.s3-oc-b-t span { opacity: 0.92; }
.s3-oc-b-t .enlace-boton { justify-self: start; min-height: 36px; padding: 0; color: inherit; text-decoration: underline; text-underline-offset: 3px; font: inherit; font-weight: 600; }
.s3-oc-banner .s3-btn { flex: 0 0 auto; min-height: 44px; }
.s3-oc-rojo { background: var(--rojo-fondo); color: var(--rojo-texto); }
.s3-oc-ambar { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.s3-oc-ok { background: var(--verde-fondo); color: var(--verde-texto); }
.s3-oc-rojo .s3-btn-sec, .s3-oc-ambar .s3-btn-sec, .s3-oc-ok .s3-btn-sec { background: var(--superficie); }
.s3-oc-h-lbl { margin-top: 6px; }
.s3-oc-hist { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 0; }
.s3-oc-h-f { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 0; border-top: 1px solid var(--linea); }
.s3-oc-h-f:first-child { border-top: 0; padding-top: 4px; }
.s3-oc-h-p { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--verde, #2f7d4f); }
.s3-oc-h-mal .s3-oc-h-p { background: var(--rojo-texto); }
.s3-oc-h-c { min-width: 0; display: grid; gap: 2px; font-size: 14px; }
.s3-oc-h-c q { color: var(--texto-2); font-size: 13.5px; overflow-wrap: anywhere; }
.s3-oc-h-c small { color: var(--texto-3); font-size: 12.5px; }
.s3-oc-h-f .s3-mini { width: 48px; height: 48px; }

/* Hoja de respuesta / destrabar / correo */
.s3-oc-resp { display: grid; gap: 10px; min-width: 0; }
.s3-oc-sub { margin: 0; font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-oc-sub b { color: var(--texto); }
.s3-oc-opts { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.s3-oc-op { display: block; position: relative; margin: 0; cursor: pointer; }
.s3-oc-op input { position: absolute; opacity: 0; width: 100%; height: 100%; left: 0; top: 0; margin: 0; cursor: pointer; }
.s3-oc-op > span { display: grid; gap: 1px; padding: 11px 14px; min-height: 56px; border: 1px solid var(--linea-fuerte); border-radius: 12px; background: var(--superficie); align-content: center; }
.s3-oc-op b { font-size: 15px; font-weight: 650; color: var(--texto); }
.s3-oc-op small { font-size: 12.5px; color: var(--texto-3); }
.s3-oc-op input:checked + span { background: var(--acento); border-color: var(--acento); }
.s3-oc-op input:checked + span b { color: var(--acento-texto); }
.s3-oc-op input:checked + span small { color: var(--acento-texto); opacity: 0.8; }
.s3-oc-op input:focus-visible + span { outline: 2px solid var(--texto); outline-offset: 2px; }
.s3-oc-campo { display: grid; gap: 0; padding: 10px 12px 12px; background: var(--superficie-2); border-radius: 12px; min-width: 0; }
.s3-oc-campo[hidden] { display: none; }
.s3-oc-campo label { margin: 8px 0 4px; font-size: 13px; font-weight: 600; color: var(--texto-2); }
.s3-oc-campo label:first-child { margin-top: 0; }
.s3-oc-campo input, .s3-oc-campo textarea, .s3-oc-resp textarea { width: 100%; max-width: 100%; box-sizing: border-box; }
.s3-oc-campo input[type=file] { font-size: 14px; min-height: 44px; }
.s3-oc-ots { background: var(--superficie-2); border-radius: 12px; padding: 0 12px; min-width: 0; }
.s3-oc-ots > summary { cursor: pointer; list-style: none; min-height: 44px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.s3-oc-ots > summary::-webkit-details-marker { display: none; }
.s3-oc-ots > summary span { color: var(--texto-3); font-weight: 500; font-size: 12.5px; }
.s3-oc-ots-l { display: grid; gap: 4px; padding-bottom: 10px; max-height: 220px; overflow: auto; }
.s3-oc-ot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; min-height: 44px; padding: 6px 0; font-size: 13.5px; }
.s3-oc-ot input { margin: 3px 0 0; width: 20px; height: 20px; }
.s3-oc-ot small { display: block; color: var(--texto-3); font-size: 12.5px; overflow-wrap: anywhere; }
.s3-oc-error { margin: 0; background: var(--rojo-fondo); color: var(--rojo-texto); border-radius: 10px; padding: 8px 10px; font-size: 13.5px; font-weight: 600; }
.s3-oc-error[hidden] { display: none; }
.s3-oc-botones { display: flex; gap: 10px; margin-top: 4px; }
.s3-oc-botones .s3-btn { flex: 1 1 0; min-height: 48px; font-size: 15.5px; }
.s3-oc-correo { display: grid; gap: 8px; min-width: 0; }
.s3-oc-correo-m { margin: 0; display: grid; gap: 6px; }
.s3-oc-correo-m div { display: grid; gap: 1px; }
.s3-oc-correo-m dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--texto-3); font-weight: 600; }
.s3-oc-correo-m dd { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.s3-oc-iframe { width: 100%; height: min(58vh, 560px); border: 1px solid var(--linea-fuerte); border-radius: 10px; background: #fff; }

/* Control › Facturar › Presión por OC */
.s3-oc-pres { margin-top: 16px; }
.s3-oc-pres-n { margin: 0 2px; }
.s3-oc-cli { background: var(--superficie-2); border-radius: 12px; min-width: 0; }
.s3-oc-cli.s3-oc-riesgo { background: var(--rojo-fondo); }
.s3-oc-cli > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; padding: 11px 12px; min-height: 48px; border-radius: 12px; }
.s3-oc-cli > summary::-webkit-details-marker { display: none; }
.s3-oc-cli > summary:focus-visible { outline: 2px solid var(--texto); outline-offset: 2px; }
.s3-oc-cli[open] .s3-ref-g-t::before { content: "▾"; }
.s3-oc-cli .s3-ref-g-t::before { content: "▸"; color: var(--texto-3); }
.s3-oc-cli.s3-oc-riesgo .s3-ref-g-t::before { color: var(--rojo-texto); }
.s3-oc-cli .s3-ref-g-m { color: var(--texto-2); }
.s3-oc-riesgo-t { display: grid; gap: 1px; margin: 0; font-size: 13.5px; color: var(--rojo-texto); overflow-wrap: anywhere; }
.s3-oc-linea { margin: 0; font-size: 13.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-oc-linea b { color: var(--texto); }
.s3-oc-ots-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.s3-oc-ots-lista li { display: inline-flex; gap: 6px; align-items: baseline; min-width: 0; }
.s3-oc-ots-lista span { color: var(--texto-3); font-size: 12.5px; }

/* Ajustes › bloqueos por OC */
.s3-oc-bl { display: grid; gap: 8px; margin-bottom: 14px; padding: 12px; background: var(--superficie-2); border-radius: 12px; min-width: 0; }
.s3-oc-bl-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 9px 11px; background: var(--rojo-fondo); border-radius: 10px; min-width: 0; }
.s3-oc-bl-f > div { display: grid; gap: 1px; min-width: 0; flex: 1 1 200px; font-size: 13.5px; color: var(--rojo-texto); overflow-wrap: anywhere; }
.s3-oc-bl-f .s3-btn { min-height: 44px; background: var(--superficie); }
.s3-oc-hist-aj > summary { cursor: pointer; list-style: none; min-height: 40px; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.s3-oc-hist-aj > summary::-webkit-details-marker { display: none; }
.s3-oc-hist-aj > summary span { color: var(--texto-3); font-weight: 500; }
.s3-oc-hist-aj ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.s3-oc-hist-aj li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; font-size: 13.5px; }
.s3-oc-hist-aj li small { display: block; color: var(--texto-3); font-size: 12.5px; overflow-wrap: anywhere; }

/* Chip «Bloqueada: sin OC» en el tablero (a.ot-tarjeta) y en Lo siguiente */
.ot-tag.s3-oc-tag { color: var(--rojo-texto); background: var(--rojo-fondo); }
.s3e-chip.sinoc { background: var(--rojo-fondo); color: var(--rojo-texto); }
.s3e-tiene.s3e-sinoc-t { background: var(--rojo-fondo); color: var(--rojo-texto); border-radius: 10px; padding: 8px 10px; }
@media (prefers-reduced-motion: reduce) { .s3-oc-op > span { transition: none; } }

/* ---------- Fase 3 · clientes de confianza y lo que sugiere Parrotfy (24-oct-2026) ---------- */
.s3-ref-confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 9px 11px; border-radius: 10px; background: var(--amarillo-fondo); color: var(--amarillo-texto); font-size: 13px; }
.s3-ref-confirmar span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
.s3-ref-confirmar .s3-btn { min-height: 44px; flex: 0 0 auto; }
.s3-ref-cli .s3-ref-sw { background: var(--superficie); }
.s3-ref-conf { background: var(--amarillo-fondo); color: var(--amarillo-texto); border-radius: 10px; padding: 8px 11px; }
.s3-ref-conf b { color: inherit; }
.s3-oc-confianza { font-style: normal; font-weight: 600; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--superficie); color: var(--texto-2); margin-left: 6px; white-space: nowrap; vertical-align: 1px; }

/* Pausas explicadas (24-oct) */
.s3-pc { display: grid; gap: 12px; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linea); }
.s3-pc[hidden] { display: none; }
.s3-pc-q { display: grid; gap: 6px; font-size: 14px; }
.s3-pc-q input { min-height: 40px; max-width: 100%; box-sizing: border-box; }
.s3-pc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.s3-pc-chip { min-height: 36px; padding: 6px 10px; border-radius: 18px; border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto); font-size: 13.5px; text-align: left; max-width: 100%; }
.s3-pc-chip[aria-pressed="true"] { border-color: var(--acento); background: var(--superficie-2); font-weight: 600; }
.s3-pc-ver { display: grid; gap: 2px; margin: 6px 0 12px; font-size: 13px; font-weight: 400; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-pc-ver b { color: var(--texto); }
.s3-pc-ver em { font-style: normal; }

/* Informe › Causas (24-oct) */
.s3-causas-cab { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 10px 14px; }
.s3-causas-mes { display: grid; gap: 4px; }
.s3-causas-mes input { min-height: 40px; max-width: 100%; }
/* Protocolo firmado (24-oct) */
.com-firma { display: grid; gap: 6px; margin: 12px 0; font-size: 14px; }
.com-firma input { min-height: 44px; width: 100%; box-sizing: border-box; }

/* ---------- Detenidas (pausas explicadas, 24-oct-2026): banner de la ficha y primera columna del tablero. Solo tokens de app.css. ---------- */
.s3-det { flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 12px; }
.s3-det .s3-oc-b-t { flex: 1 1 0; }
.s3-det-foto { flex: 0 0 auto; width: 64px; height: 64px; border-color: var(--rojo-texto); }
.s3-det-venc { color: var(--rojo-texto); font-weight: 700; }
.s3-oc-rojo .s3-det-venc { text-decoration: underline; text-underline-offset: 2px; }
.col-detenidas .col-cab h3 { color: var(--rojo-texto); }
.col-detenidas .col-cab .n { background: var(--rojo-fondo); color: var(--rojo-texto); }
.s3-det-tarjeta { display: grid; gap: 3px; border-left: 3px solid var(--rojo-texto); }
.s3-det-tarjeta.vencida { background: var(--rojo-fondo); }
.s3-det-que { font-weight: 650; font-size: 13.5px; color: var(--rojo-texto); overflow-wrap: anywhere; }
.s3-det-l { font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-det-l b { color: var(--texto); font-weight: 600; }
.s3-det-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 8px; margin-top: 3px; font-size: 12px; color: var(--texto-3); }

/* ---------- «¿Esta compra lleva OC?» (24-oct-2026): estado de la pregunta al cliente en la ficha. Solo tokens de app.css. ---------- */
.s3-ref-sinoc { margin: 0; padding: 8px 11px; border-radius: 10px; background: var(--verde-fondo); color: var(--verde-texto); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.s3-ref-preg { display: grid; gap: 3px; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--linea); border-left: 3px solid var(--amarillo-texto); background: var(--superficie-2); }
.s3-ref-preg.s3-pg-si { border-left-color: var(--verde-texto); }
.s3-ref-preg.s3-pg-no { border-left-color: var(--acento); }
.s3-ref-preg-t { margin: 0; font-size: 13.5px; color: var(--texto); overflow-wrap: anywhere; }
.s3-ref-preg-s { font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.s3-ref-preg-b { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 2px; }
.s3-ref-preg-b .enlace-boton { min-height: 44px; }

/* Etapa B (25-oct-2026): interruptores por módulo y por persona en #ajustes */
.s3-aj-mods { display: grid; gap: 10px; margin-bottom: 12px; }
.s3-aj-mod { padding: 12px 14px; background: var(--superficie-2); border-radius: 12px; display: grid; gap: 8px; }
.s3-aj-mod-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.s3-aj-mod-cab b { font-weight: 650; font-size: 15px; }
.s3-aj-mod-d { color: var(--texto-2); font-size: 13px; line-height: 1.4; }
.s3-aj-mod-ops { display: flex; flex-wrap: wrap; gap: 6px; }
.s3-aj-mod-op { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--linea-fuerte); font-size: 13.5px; cursor: pointer; min-height: 36px; }
.s3-aj-mod-op:has(input:checked) { background: var(--texto); color: var(--superficie); border-color: var(--texto); }
.s3-aj-mod-op input { margin: 0; accent-color: currentColor; }
.s3-aj-mod-personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 10px; padding-top: 4px; border-top: 1px dashed var(--linea-fuerte); }
.s3-aj-mod-p { display: flex; align-items: center; gap: 8px; min-height: 36px; font-size: 14px; cursor: pointer; }
.s3-aj-mod-p small { color: var(--texto-2); }
.s3-aj-sw-oc { margin-top: 4px; }

/* ---------- Informe · Reprocesos: caso abierto con el detalle y la cuenta (rep-, 26-oct) ---------- */
.rep-casos { display: grid; gap: 8px; }
.rep-caso { border: 1px solid var(--linea); border-radius: 12px; background: var(--superficie); min-width: 0; }
.rep-caso[open] { border-color: var(--linea-fuerte); }
.rep-caso summary { list-style: none; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; cursor: pointer; min-height: 48px; }
.rep-caso summary::-webkit-details-marker { display: none; }
.rep-caso summary::after { content: "›"; flex: none; color: var(--texto-3); font-size: 20px; line-height: 1; transition: transform 150ms; }
.rep-caso[open] summary::after { transform: rotate(90deg); }
.rep-cab { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.rep-cab small { display: block; color: var(--texto-3); font-size: 12.5px; margin-top: 2px; }
.rep-total { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-cuerpo { padding: 0 14px 14px; display: grid; gap: 10px; }
.rep-que { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.rep-que > div { flex: 1 1 220px; min-width: 0; }
.rep-que p { margin: 4px 0; overflow-wrap: anywhere; }
.rep-foto { flex: none; }
.rep-foto img { display: block; width: 110px; height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid var(--linea-fuerte); }
.rep-est { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--gris-pill); color: var(--texto-2); }
.rep-est.abierta { background: var(--amarillo-fondo); color: var(--amarillo-texto); }
.rep-est.cerrada { background: var(--verde-fondo); color: var(--verde-texto); }
.rep-lbl { margin-top: 4px; }
.rep-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.rep-tabla td { padding: 8px 0; border-top: 1px solid var(--linea); vertical-align: top; overflow-wrap: anywhere; }
.rep-tabla td small { display: block; color: var(--texto-3); font-size: 12.5px; margin-top: 1px; }
.rep-tabla .rep-m { text-align: right; white-space: nowrap; padding-left: 12px; font-variant-numeric: tabular-nums; font-weight: 600; }
.rep-tabla tfoot td { font-weight: 700; border-top: 2px solid var(--linea-fuerte); }
.rep-ir { justify-self: start; min-height: 44px; }
.rep-pasos { margin: 4px 0 8px; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }

/* 27-oct: OT de trabajo de un reproceso («17465-R1») y, en la original, el aviso de que tiene uno en curso */
.s3-rep-aviso { display: block; margin: 10px 0 2px; padding: 10px 12px; border-radius: var(--radio-chico); background: var(--rojo); color: #fff; font-size: 14px; text-decoration: none; overflow-wrap: anywhere; }
.s3-rep-aviso a { color: inherit; text-decoration: underline; }
.s3-rep-aviso.orig { background: var(--rojo-fondo); color: var(--rojo-texto); border: 1px solid var(--rojo); }

/* 29-oct TEMPORAL: «Revisar fechas» (js/revision.js). Solo tokens de app.css. */
main.vista-revisar-fechas { max-width: 760px; }
.rv { display: grid; gap: 12px; padding-bottom: 24px; min-width: 0; }
.rv-cab h1 { margin: 0; font-size: 24px; }
.rv-cab p { margin: 6px 0 0; color: var(--texto-2); }
.rv-cuenta { margin-top: 8px; font-size: 14px; color: var(--texto-2); }
.rv-cuenta b { font-size: 22px; color: var(--texto); font-variant-numeric: tabular-nums; }
.rv-lista { display: grid; gap: 10px; }
.rv-ot { display: grid; gap: 4px; min-width: 0; margin: 0; }
.rv-ot-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.rv-ot-n { font-weight: 700; font-size: 16px; color: var(--texto); text-decoration: none; }
.rv-ot-n:hover { text-decoration: underline; }
.rv-chip { font-size: 12px; font-weight: 650; padding: 1px 8px; border-radius: 999px; background: var(--gris-pill); color: var(--texto-2); }
.rv-chip.rojo { background: var(--rojo-fondo); color: var(--rojo-texto); }
.rv-ot-cli { font-weight: 650; overflow-wrap: anywhere; }
.rv-ot-tr, .rv-ot-dato { font-size: 14px; color: var(--texto-2); overflow-wrap: anywhere; }
.rv-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.rv-acc .btn { margin: 0; width: auto; min-height: 44px; }
.rv-sub { margin: 18px 0 0; font-size: 18px; }
.rv-nota { margin: 0; font-size: 14px; color: var(--texto-2); }
.rv-anulada { opacity: 0.8; }
.rv-vacio { text-align: center; }