/* ═══════════════════════════════════════════════════════════
   IAMA ERP — Estilos
   Paleta de marca INSA GPS: naranja #FF4106, grafito #404040
   ═══════════════════════════════════════════════════════════ */

:root {
  --naranja:      #FF4106;
  --naranja-osc:  #E03600;
  --naranja-bg:   #FFF1EC;
  --grafito:      #404040;
  --grafito-osc:  #2A2A2A;
  --texto:        #1F1F1F;
  --gris:         #6E6E6E;
  --gris-claro:   #9A9A9A;
  --borde:        #E3E5E8;
  --fondo:        #F4F5F7;
  --panel:        #FFFFFF;
  --verde:        #137A45;
  --verde-bg:     #E8F5EE;
  --rojo:         #C0281C;
  --rojo-bg:      #FCEBE9;
  --ambar:        #B26A00;
  --ambar-bg:     #FFF4E0;
  --azul:         #1B4F8A;
  --azul-bg:      #EAF1F9;
  --sombra:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --sombra-md:    0 4px 12px rgba(0,0,0,.08);
  --radio:        8px;
  --lateral:      236px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--naranja); text-decoration: none; }

/* ─── Login ─────────────────────────────────────────────── */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #2A2A2A 0%, #404040 55%, #52504E 100%);
  padding: 20px;
}
.login-card {
  width: 100%; max-width: 380px; background: #fff;
  border-radius: 12px; padding: 38px 34px; box-shadow: 0 12px 40px rgba(0,0,0,.28);
}
.login-logo { display: block; height: 66px; margin: 0 auto 8px; }
.login-card h1 { font-size: 17px; text-align: center; color: var(--grafito); margin-bottom: 3px; }
.login-card p.sub { font-size: 12px; text-align: center; color: var(--gris); margin-bottom: 26px; }

/* ─── Estructura ────────────────────────────────────────── */
.app { display: none; min-height: 100vh; }
.app.activo { display: block; }

.lateral {
  position: fixed; inset: 0 auto 0 0; width: var(--lateral);
  background: var(--grafito-osc); display: flex; flex-direction: column;
  z-index: 40; transition: transform .22s ease;
}
.lateral-marca {
  padding: 18px 18px 14px; border-bottom: 1px solid rgba(255,255,255,.09);
  display: flex; align-items: center; gap: 10px;
}
.lateral-marca img { height: 34px; }
.lateral-marca div b { color: #fff; font-size: 13px; display: block; letter-spacing: .2px; }
.lateral-marca div span { color: #9A9A9A; font-size: 10.5px; }

.nav { flex: 1; overflow-y: auto; padding: 10px 0 20px; }
.nav-grupo { padding: 14px 18px 6px; font-size: 10px; letter-spacing: .9px;
             text-transform: uppercase; color: #757575; font-weight: 700; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 18px;
  color: #C8C8C8; font-size: 13.5px; border-left: 3px solid transparent; cursor: pointer;
}
.nav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.nav a.activo { background: rgba(255,65,6,.14); color: #fff; border-left-color: var(--naranja); font-weight: 600; }
.nav a .ic { width: 17px; text-align: center; font-size: 14px; opacity: .95; }

.lateral-pie {
  padding: 12px 18px; border-top: 1px solid rgba(255,255,255,.09);
  font-size: 11px; color: #757575;
  display: flex; align-items: center; gap: 10px;
}
/* La versión que está viendo el navegador AHORA. Discreta pero legible:
   es lo primero que hay que mirar cuando "no se ve el cambio". */
.lateral-version {
  margin-left: auto; font-variant-numeric: tabular-nums;
  color: #6E6E6E; letter-spacing: .3px;
}

.principal { margin-left: var(--lateral); min-height: 100vh; display: flex; flex-direction: column; }

.barra {
  background: #fff; border-bottom: 1px solid var(--borde);
  padding: 0 24px; height: 58px; display: flex; align-items: center;
  gap: 14px; position: sticky; top: 0; z-index: 30;
}
.barra h2 { font-size: 16px; font-weight: 650; color: var(--grafito); }
.barra .esp { flex: 1; }
.sel-empresa {
  padding: 6px 10px; margin-right: 14px;
  border: 1px solid var(--borde); border-radius: 6px;
  background: #fff; font-size: 12.5px; font-weight: 600;
  color: var(--grafito); max-width: 200px; cursor: pointer;
}
.sel-empresa:focus { outline: 2px solid var(--naranja); outline-offset: -1px; }
.usuario { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--naranja);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px;
}
.usuario-datos b { display: block; font-size: 12.5px; line-height: 1.25; }
.usuario-datos span { font-size: 11px; color: var(--gris); }

.contenido { padding: 22px 24px 60px; flex: 1; }

.menu-btn { display: none; background: none; border: 0; font-size: 20px; cursor: pointer; color: var(--grafito); }
.velo { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 35; }

/* ─── Tarjetas ──────────────────────────────────────────── */
.panel { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.panel-cab {
  padding: 13px 17px; border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 12px;
}
.panel-cab h3 { font-size: 13.5px; font-weight: 650; color: var(--grafito); }
.panel-cab .esp { flex: 1; }
.panel-cuerpo { padding: 17px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 13px; margin-bottom: 20px; }
.kpi { background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
       padding: 15px 17px; box-shadow: var(--sombra); position: relative; overflow: hidden; }
.kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background: var(--naranja); }
.kpi.verde::before { background: var(--verde); }
.kpi.rojo::before  { background: var(--rojo); }
.kpi.ambar::before { background: var(--ambar); }
.kpi.azul::before  { background: var(--azul); }
.kpi .et { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--gris); font-weight: 600; }
.kpi .val { font-size: 25px; font-weight: 700; color: var(--grafito); margin-top: 5px; line-height: 1.12; }
.kpi .nota { font-size: 11.5px; color: var(--gris-claro); margin-top: 3px; }
.kpi.clic { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.kpi.clic:hover { transform: translateY(-1px); box-shadow: var(--sombra-md); }

/* ─── Tablas ────────────────────────────────────────────── */
.tabla-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: #FAFBFC; text-align: left; padding: 9px 13px; font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .5px; color: var(--gris);
  font-weight: 700; border-bottom: 1px solid var(--borde); white-space: nowrap;
}
tbody td { padding: 10px 13px; border-bottom: 1px solid #F0F1F3; vertical-align: middle; }
tbody tr:hover { background: #FAFBFC; }
tbody tr.clic { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.vacio { padding: 44px 20px; text-align: center; color: var(--gris-claro); }
.vacio .ic { font-size: 32px; display: block; margin-bottom: 8px; opacity: .5; }

/* ─── Insignias ─────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 2.5px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 650; white-space: nowrap;
}
.tag.gris   { background:#EFF0F2; color:#5A5A5A; }
.tag.verde  { background:var(--verde-bg); color:var(--verde); }
.tag.rojo   { background:var(--rojo-bg);  color:var(--rojo); }
.tag.ambar  { background:var(--ambar-bg); color:var(--ambar); }
.tag.azul   { background:var(--azul-bg);  color:var(--azul); }
.tag.naranja{ background:var(--naranja-bg); color:var(--naranja); }

/* ─── Botones ───────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 15px; border-radius: 6px; border: 1px solid transparent;
  font-size: 13px; font-weight: 600; cursor: pointer; transition: .13s; white-space: nowrap;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-pri { background: var(--naranja); color: #fff; }
.btn-pri:hover:not(:disabled) { background: var(--naranja-osc); }
.btn-sec { background: #fff; color: var(--grafito); border-color: var(--borde); }
.btn-sec:hover:not(:disabled) { background: #F7F8F9; border-color: #CFD2D6; }
.btn-osc { background: var(--grafito); color: #fff; }
.btn-osc:hover:not(:disabled) { background: var(--grafito-osc); }
.btn-peq { padding: 5px 11px; font-size: 12px; }
.btn-bloque { width: 100%; }
/* Un <a> con clase de botón necesita centrarse como botón */
a.btn-bloque { display: block; text-align: center; text-decoration: none; }
label.btn-bloque { display: block; text-align: center; }

/* ── Fotos del trabajo ── */
.fotos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.foto-mini { position: relative; aspect-ratio: 1; border-radius: 7px; overflow: hidden;
             border: 1px solid var(--borde); background: #F4F5F7; }
.foto-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-quitar { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px;
               border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff;
               font-size: 13px; line-height: 1; cursor: pointer; }
.foto-quitar:hover { background: var(--rojo); }

/* ─── Formularios ───────────────────────────────────────── */
.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: 12px; font-weight: 600; color: var(--grafito); margin-bottom: 5px; }
.campo label .req { color: var(--naranja); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--borde);
  border-radius: 6px; background: #fff; transition: border-color .13s, box-shadow .13s;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 0; border-color: var(--naranja); box-shadow: 0 0 0 3px rgba(255,65,6,.11);
}
.campo textarea { resize: vertical; min-height: 74px; }
.campo .ayuda { font-size: 11.5px; color: var(--gris); margin-top: 4px; }
.rejilla { display: grid; gap: 0 14px; }
.rejilla.c2 { grid-template-columns: 1fr 1fr; align-items: start; }
.rejilla.c3 { grid-template-columns: repeat(3, 1fr); }
.rejilla.c4 { grid-template-columns: repeat(4, 1fr); }

.filtros { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 15px; }
.filtros input, .filtros select { padding: 7px 11px; border: 1px solid var(--borde); border-radius: 6px; background: #fff; }
.filtros input[type=search] { min-width: 220px; }

/* ─── Ventanas modales ──────────────────────────────────── */
.modal-fondo {
  position: fixed; inset: 0; background: rgba(25,25,25,.5);
  display: none; align-items: flex-start; justify-content: center;
  z-index: 60; padding: 30px 16px; overflow-y: auto;
}
.modal-fondo.abierto { display: flex; }
.modal {
  background: #fff; border-radius: 11px; width: 100%; max-width: 620px;
  box-shadow: 0 18px 50px rgba(0,0,0,.3); animation: subir .18s ease;
}
.modal.ancho { max-width: 880px; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal-cab { padding: 16px 20px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 12px; }
.modal-cab h3 { font-size: 15.5px; font-weight: 650; flex: 1; color: var(--grafito); }
.modal-cab .cerrar { background: none; border: 0; font-size: 22px; color: var(--gris); cursor: pointer; line-height: 1; }
.modal-cuerpo { padding: 20px; max-height: 68vh; overflow-y: auto; }
.modal-pie { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; gap: 9px; justify-content: flex-end; }

/* ─── Avisos ────────────────────────────────────────────── */
.aviso { padding: 11px 14px; border-radius: 7px; font-size: 13px; margin-bottom: 14px; border: 1px solid; line-height: 1.45; }
.aviso.err  { background: var(--rojo-bg);  border-color:#F3C9C4; color: var(--rojo); }
.aviso.ok   { background: var(--verde-bg); border-color:#BFE3CE; color: var(--verde); }
.aviso.info { background: var(--azul-bg);  border-color:#C6DAEE; color: var(--azul); }
.aviso.adv  { background: var(--ambar-bg); border-color:#F0DCB4; color: var(--ambar); }

.toast-zona { position: fixed; right: 18px; bottom: 18px; z-index: 90; display: flex; flex-direction: column; gap: 9px; }
.toast {
  background: var(--grafito-osc); color: #fff; padding: 12px 17px; border-radius: 8px;
  font-size: 13px; box-shadow: var(--sombra-md); animation: entrar .2s ease; max-width: 380px;
  border-left: 3px solid var(--naranja);
}
.toast.ok  { border-left-color: #35C77B; }
.toast.err { border-left-color: #FF6B5E; }
@keyframes entrar { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

/* ─── Detalle ───────────────────────────────────────────── */
.dl { display: grid; grid-template-columns: 132px 1fr; gap: 0; font-size: 13px; }
.dl dt { padding: 8px 0; color: var(--gris); font-weight: 600; font-size: 12px; border-bottom: 1px solid #F2F3F5; }
.dl dd { padding: 8px 0; border-bottom: 1px solid #F2F3F5; }
.seccion-tit {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--naranja);
  font-weight: 700; margin: 20px 0 9px; padding-bottom: 5px; border-bottom: 2px solid var(--naranja-bg);
}
.seccion-tit:first-child { margin-top: 0; }

.cargando { padding: 44px; text-align: center; color: var(--gris-claro); }
.spin {
  width: 26px; height: 26px; border: 2.5px solid var(--borde); border-top-color: var(--naranja);
  border-radius: 50%; animation: giro .7s linear infinite; margin: 0 auto 11px;
}
@keyframes giro { to { transform: rotate(360deg); } }

.barra-prog { height: 6px; background: #EFF0F2; border-radius: 4px; overflow: hidden; }
.barra-prog i { display: block; height: 100%; background: var(--naranja); }

.paginacion { display: flex; align-items: center; gap: 10px; padding: 12px 17px; border-top: 1px solid var(--borde); font-size: 12.5px; color: var(--gris); }
.paginacion .esp { flex: 1; }

/* ═══ SOLICITUDES ═══════════════════════════════════════════ */

/* Bloques de seguimiento / despacho */
.bloque-tit { display:flex; align-items:center; gap:9px; margin:22px 0 11px; font-size:13px;
  font-weight:700; color:var(--grafito); }
.bloque-tit:first-child { margin-top:4px; }
.bloque-tit .cuenta { background:#EFF0F2; color:#5A5A5A; border-radius:20px; padding:1px 9px;
  font-size:11.5px; font-weight:700; }
.bloque-tit.rojo { color:var(--rojo); }
.bloque-tit.rojo .cuenta { background:var(--rojo-bg); color:var(--rojo); }

/* Tarjeta de una solicitud / orden en las listas */
.sol-linea { background:#fff; border:1px solid var(--borde); border-radius:var(--radio);
  box-shadow:var(--sombra); padding:13px 15px; margin-bottom:10px; cursor:pointer; transition:.12s; }
.sol-linea:hover { box-shadow:var(--sombra-md); border-color:#CFD2D6; }
.sol-linea.alerta { border-left:4px solid var(--rojo); }
.sol-linea.urgente { border-left:4px solid var(--naranja); }
.sol-linea-cab { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.sol-linea-cab .num { font-weight:700; color:var(--grafito); }
.sol-linea-cab .esp { flex:1; }
.sol-linea-sub { font-size:12.5px; color:var(--gris); margin-top:5px; line-height:1.5; }
.sol-reloj { font-variant-numeric:tabular-nums; font-weight:650; }
.sol-reloj.tarde { color:var(--rojo); }
/* Parado a propósito. El reloj se apaga en vez de seguir subiendo:
   dejarlo corriendo sobre algo que se detuvo porque se pidió detenerlo
   acusa de una demora que no es de quien atiende. */
.sol-reloj.quieto { color:var(--gris-claro); font-weight:500; }

/* En la bandeja, lo parado y lo resuelto no se leen como lo activo.
   Antes los tres se veían idénticos —misma caja blanca, mismo borde—
   y había que leer renglón por renglón para saber cuál pedía trabajo.
   El filo de la izquierda lo dice antes de leer. */
.sol-linea.esperando { border-left:4px solid var(--ambar); background:#FFFCF5; }
.sol-linea.resuelta  { border-left:4px solid var(--verde);  background:#FBFDFC; }

/* Progreso de órdenes de una solicitud */
.sol-avance { font-size:12px; color:var(--gris); margin-top:6px; }
.sol-avance b { color:var(--grafito); }

/* Cascada del formulario nuevo */
.cascada-paso { animation: subir .18s ease; }
.preg-dinamica { margin-top:2px; }

/* Renglones de vehículos */
.veh-fila { border:1px solid var(--borde); border-radius:8px; padding:12px; margin-bottom:10px; background:#FAFBFC; }
.veh-fila-cab { display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.veh-fila-cab b { flex:1; font-size:12.5px; }
.veh-quitar { background:none; border:0; color:var(--rojo); cursor:pointer; font-size:16px; line-height:1; }
.chip-acc { display:inline-flex; align-items:center; gap:6px; background:var(--naranja-bg); color:var(--naranja);
  border-radius:20px; padding:3px 10px; font-size:11.5px; font-weight:650; margin:2px 4px 2px 0; }
.chip-acc button { background:none; border:0; color:var(--naranja); cursor:pointer; font-size:13px; line-height:1; }

/* Zona de arrastre de adjuntos */
.dropzona { border:2px dashed var(--borde); border-radius:9px; padding:22px; text-align:center;
  color:var(--gris); font-size:13px; cursor:pointer; transition:.13s; background:#FAFBFC; }
.dropzona.encima { border-color:var(--naranja); background:var(--naranja-bg); color:var(--naranja); }

/* Bitácora de eventos */
.bitacora { list-style:none; margin:0; padding:0; }
.bitacora li { position:relative; padding:0 0 14px 20px; border-left:2px solid var(--borde); }
.bitacora li:last-child { border-left-color:transparent; padding-bottom:0; }
.bitacora li::before { content:''; position:absolute; left:-6px; top:2px; width:10px; height:10px;
  border-radius:50%; background:var(--naranja); border:2px solid #fff; }
.bitacora .b-desc { font-size:13px; color:var(--texto); }
.bitacora .b-meta { font-size:11.5px; color:var(--gris-claro); margin-top:2px; }

/* Segmento para / coordinada */
.segmento { display:inline-flex; border:1px solid var(--borde); border-radius:8px; overflow:hidden; }
.segmento button { background:#fff; border:0; padding:11px 20px; font-size:15px; font-weight:600;
  cursor:pointer; color:var(--gris); }
.segmento button.activo { background:var(--naranja); color:#fff; }

/* Insignia de garantía */
.garantia-caja { border-radius:8px; padding:12px 14px; font-size:13px; line-height:1.5; border:1px solid; }
.garantia-caja.si { background:var(--verde-bg); border-color:#BFE3CE; color:var(--verde); }
.garantia-caja.no { background:var(--ambar-bg); border-color:#F0DCB4; color:var(--ambar); }

/* ═══ EL MÓVIL DEL TÉCNICO ══════════════════════════════════ */
.movil { max-width:520px; margin:0 auto; }
.orden-tarjeta { background:#fff; border:1px solid var(--borde); border-radius:12px;
  box-shadow:var(--sombra); padding:16px; margin-bottom:14px; }
.orden-tarjeta.alerta { border:2px solid var(--rojo); }
.orden-tarjeta h3 { font-size:16px; color:var(--grafito); margin-bottom:4px; }
.orden-dato { display:flex; gap:10px; padding:9px 0; border-bottom:1px solid #F2F3F5; font-size:14px; }
.orden-dato:last-child { border-bottom:0; }
.orden-dato .et { color:var(--gris); min-width:92px; font-size:12.5px; }
.orden-dato .vl { flex:1; font-weight:600; }
.btn-grande { display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  padding:16px; border-radius:11px; border:0; font-size:17px; font-weight:700; cursor:pointer;
  margin-top:10px; }
.btn-grande.pri { background:var(--naranja); color:#fff; }
.btn-grande.verde { background:var(--verde); color:#fff; }
.btn-grande.azul { background:var(--azul); color:#fff; }
.btn-grande.osc { background:var(--grafito); color:#fff; }
.btn-grande.sec { background:#fff; color:var(--grafito); border:1.5px solid var(--borde); }
.btn-grande:disabled { opacity:.5; }
.btn-grande.rojo { background:var(--rojo); color:#fff; }
.mapa-link { display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:13px; border-radius:10px; background:var(--azul-bg); color:var(--azul);
  font-weight:700; font-size:15px; margin-top:8px; }
.tel-link { display:inline-flex; align-items:center; gap:6px; color:var(--verde); font-weight:700; }
.adj-link { display:flex; align-items:center; gap:8px; padding:11px 13px; border:1px solid var(--borde);
  border-radius:9px; margin-bottom:7px; font-size:14px; color:var(--texto); background:#fff; }
.imei-grande { width:100%; padding:15px; font-size:19px; letter-spacing:1px; font-variant-numeric:tabular-nums;
  border:1.5px solid var(--borde); border-radius:10px; text-align:center; }
.paso-marca { display:flex; gap:6px; margin-bottom:12px; }
.paso-marca .p { flex:1; text-align:center; padding:8px 4px; border-radius:8px; font-size:12px;
  font-weight:700; background:#EFF0F2; color:#8A8A8A; }
.paso-marca .p.hecho { background:var(--verde-bg); color:var(--verde); }
.paso-marca .p.activo { background:var(--naranja); color:#fff; }

/* Tabs simples (bandejas, config, reportes) */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--borde); margin-bottom:18px; flex-wrap:wrap; }
.tabs button { background:none; border:0; padding:10px 15px; font-size:13.5px; font-weight:600;
  color:var(--gris); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.tabs button.activo { color:var(--naranja); border-bottom-color:var(--naranja); }
.tabs button:hover { color:var(--grafito); }

/* ─── Móvil ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lateral { transform: translateX(-100%); }
  .lateral.abierto { transform: none; }
  .velo.visible { display: block; }
  .principal { margin-left: 0; }
  .menu-btn { display: block; }
  .contenido { padding: 16px 14px 50px; }
  .barra { padding: 0 14px; }
  .rejilla.c2, .rejilla.c3, .rejilla.c4 { grid-template-columns: 1fr; }
  .usuario-datos { display: none; }
  .sel-empresa { max-width: 130px; margin-right: 8px; font-size: 11.5px; }
  .dl { grid-template-columns: 1fr; }
  .dl dt { padding-bottom: 0; border: 0; }
  .dl dd { padding-top: 2px; }
}

/* ══════════════════════════════════════════════════════════
   ESTILOS QUE FALTABAN
   ══════════════════════════════════════════════════════════
   Descubierto el 23 de agosto de 2026, buscando por qué a Vladi le
   salía la cinta del holding estando en INSA GPS.

   La causa: la cinta existe en index.html desde el 21 de agosto, pero
   NUNCA tuvo regla de CSS. Sin regla, un <div> se muestra siempre. O
   sea que el aviso "está viendo el holding" salía en las tres
   empresas, diciendo algo falso en dos de ellas.

   Al revisarlo apareció que no era la única: la interfaz emite
   decenas de clases que este archivo nunca definió. Las demás solo se
   veían sin adornos —feas, pero legibles— y por eso nadie las notó.
   La de la cinta era distinta porque no se veía mal: se veía MAL
   INFORMADA, que es peor.

   La lección para la próxima: una clase que el JavaScript escribe y
   el CSS no conoce no falla, no avisa y no se ve rota. Se queda
   esperando a que alguien lea el mensaje equivocado.
   ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   LA FRANJA DEL SISTEMA DE PRUEBAS

   El sistema real y la copia de ensayo se ven idénticos: misma
   pantalla de entrada, misma pestaña, mismo navegador. Esta franja
   es lo único que los distingue de un vistazo.

   La enciende franjaPruebas() en app.js.

   Va FIJA arriba de todo y por encima del menú lateral (z-index 60,
   el lateral es 40) a propósito: una marca que se va con el scroll
   no sirve, porque el momento de equivocarse llega media hora
   después de haber entrado.

   Violeta y no roja: rojo en este sistema significa "vencido" o
   "error", y ya se usa en tarjetas y etiquetas. Un color que aquí
   no significa nada más no se confunde con nada.
   ══════════════════════════════════════════════════════════ */
.franja-pruebas {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: #6B2FB5; color: #fff;
  padding: 7px 14px; text-align: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  box-shadow: 0 1px 6px rgba(0,0,0,.22);
}
/* Todo baja lo que mide la franja, para que no tape ni el logo del
   menú ni el botón de la hamburguesa en el teléfono.

   La medida la pone app.js midiendo la franja de verdad: en pantalla
   angosta el texto se parte en dos líneas y mide el doble. El valor
   de aquí es solo el respaldo por si el JS no llegó a medirla. */
body.con-franja-pruebas { padding-top: var(--alto-franja, 34px); }
body.con-franja-pruebas .lateral { top: var(--alto-franja, 34px); }

/* ══════════════════════════════════════════════════════════
   VIENDO COMO OTRO (P-15)

   Misma mecánica que la franja de pruebas y a propósito: quien ya
   aprendió que una franja arriba significa "ojo, esto no es lo
   normal" la entiende sin que nadie se lo explique.

   En ámbar y no en violeta: no es otro sistema, es el mismo mirado
   por otros ojos. Y el ámbar ya significa "atención" en el resto de
   la interfaz.

   Lleva su propio botón de salida DENTRO de la franja. Si la única
   forma de volver a ser uno mismo estuviera en un menú, se le
   olvidaría a cualquiera — y la mitad del riesgo de esta función es
   olvidarse de que está puesta.
   ══════════════════════════════════════════════════════════ */
.franja-como {
  position: fixed; top: 0; left: 0; right: 0; z-index: 61;
  background: #8A6100; color: #fff;
  padding: 7px 14px; text-align: center;
  font-size: 12.5px; font-weight: 700; letter-spacing: .3px;
  box-shadow: 0 1px 6px rgba(0,0,0,.22);
  display: flex; gap: 10px; align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.franja-como button {
  background: #fff; color: #8A6100; border: 0; border-radius: 5px;
  padding: 3px 10px; font-size: 12px; font-weight: 700; cursor: pointer;
}
body.con-franja-como { padding-top: var(--alto-franja-como, 34px); }
body.con-franja-como .lateral { top: var(--alto-franja-como, 34px); }

/* ── El holding: lo que se ve y lo que no ── */

/* La cinta solo cuando de verdad se está mirando el holding.
   `body.holding` lo pone marcarNivelHolding() en app.js. */
.cinta-holding { display: none; }
body.holding .cinta-holding {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 10px 16px;
  background: #FFF8E6; border: 1px solid #F0D48A; border-left: 4px solid #E0A800;
  border-radius: 7px; font-size: 13px; color: var(--grafito); line-height: 1.45;
}
body.holding .cinta-holding > span:first-child { font-size: 16px; color: #B98900; }

/* Los botones que registran trabajo no se muestran desde el holding.
   Un botón apagado invita a preguntar por qué está apagado. */
body.holding .accion-op { display: none !important; }

/* ── La barra de filtros ──
   Los campos a la izquierda, las acciones a la derecha y pegadas
   entre sí. `flex: 1 1 0` y no `1 1 auto`: con `auto` los campos se
   reservan su ancho de contenido completo y las acciones se caen a
   una segunda fila con la barra medio vacía. */
.filtros { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: flex-start; }
.filtros-campos {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  flex: 1 1 0; min-width: 300px;
}
.filtros-acciones {
  display: flex; gap: 8px; align-items: center;
  flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto;
}
.filtro-fecha { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gris); }
.filtro-fecha input { width: auto; }

@media (max-width: 720px) {
  .filtros-acciones { margin-left: 0; width: 100%; flex-wrap: wrap; }
}

/* ── Seguimiento ── */

/* De qué solicitud salió esta orden. Va pegado al número de la OT. */
.de-solicitud {
  display: inline-block; padding: 2px 7px; border-radius: 5px;
  background: var(--gris-suave, #F5F6F7); border: 1px solid var(--borde);
  font-size: 11.5px; color: var(--gris); font-weight: 600;
}

/* Dónde va el técnico ahora mismo. Late despacio para que se note que
   es en vivo, y se queda quieto para quien pidió menos animación. */
.donde-va {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 4px 10px; border-radius: 20px;
  background: #EAF3FF; border: 1px solid #BBD6F5;
  font-size: 12px; font-weight: 600; color: #14508F;
}
.donde-va::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #1F6FD0; animation: latido 1.8s ease-in-out infinite;
}
@keyframes latido { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .donde-va::before { animation: none; }
}

/* Una solicitud detenida a propósito. */
.sol-linea.espera { border-left: 3px solid var(--ambar, #E0A800); }
.espera-motivo {
  margin-top: 4px; font-size: 12px; color: var(--grafito);
  background: #FFF8E6; border-radius: 5px; padding: 5px 9px;
}

/* El bloque de las cerradas, que se abre y se cierra. */
.bloque-plegable { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 8px; }
.bloque-plegable .flecha { font-size: 11px; color: var(--gris); transition: transform .15s; }
.bloque-plegable.abierto .flecha { transform: rotate(90deg); }

/* ── Cantidades de la nueva solicitud ── */
.cantidades { display: flex; gap: 12px; flex-wrap: wrap; }
.cant-caja {
  flex: 1 1 220px; padding: 12px 14px;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
.cant-et { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); }
.cant-pregunta { display: block; margin: 6px 0 8px; font-size: 13px; font-weight: 600; color: var(--grafito); }
.cant-num { display: flex; align-items: center; gap: 8px; }
.cant-num input { width: 92px; text-align: center; font-size: 19px; font-weight: 700; padding: 9px; }
.cant-num button {
  width: 42px; height: 42px; border: 1px solid var(--borde); border-radius: 8px;
  background: #fff; font-size: 20px; line-height: 1; cursor: pointer; color: var(--grafito);
}
.cant-num button:hover { background: #F7F8F9; border-color: #CFD2D6; }
.cant-resultado { margin-top: 10px; font-size: 13px; color: var(--grafito); font-weight: 600; }
.cant-acc { font-size: 12px; color: var(--gris); }

/* Una pregunta de la cascada sin contestar, señalada al intentar guardar. */
.preg-dinamica.falta { border-left: 3px solid var(--naranja); padding-left: 10px; }

/* ── Datos de la empresa: cómo queda antes de guardar ── */
.em-previo {
  padding: 10px 14px; border: 1px dashed var(--borde); border-radius: 7px;
  background: var(--gris-suave, #F5F6F7);
}
.em-linea1 { font-size: 12.5px; color: var(--grafito); font-weight: 600; }
.em-linea2 { font-size: 12px; color: var(--gris); margin-top: 2px; }

/* ── Historial de un equipo / movimientos ── */
.mov-linea { padding: 10px 0 10px 20px; border-left: 2px solid var(--borde); position: relative; }
.mov-cab { font-size: 13px; font-weight: 600; color: var(--grafito); }
.mov-sub { font-size: 12.5px; color: var(--gris); margin-top: 2px; }
.mov-fecha { float: right; font-size: 12px; color: var(--gris); }

/* ══════════════════════════════════════════════════════════
   SEGUNDA TANDA — lo que faltaba y sí se veía
   ══════════════════════════════════════════════════════════
   Vladi, viendo Nueva solicitud: *"algo se desconfiguró"*. Y así era:
   "¿Qué necesita?" y "Tipo de trabajo" salían como botones pelados
   del navegador, mientras "¿Por dónde entró?" y "¿Cuándo?" —que usan
   otra clase— sí se veían bien.

   Estas son las que el JavaScript escribe desde hace semanas y este
   archivo no conocía. Se listan sacando del código todas las clases
   que se emiten y restándole las que aquí están definidas.
   ══════════════════════════════════════════════════════════ */

/* ── Los grupos de opciones de la cascada ──
   Vladi los pidió así: abrir un desplegable para ver siete opciones
   "es un tiempo perdido en darle un clic", y ese clic se paga en cada
   llamada con el cliente esperando. Por eso son botones a la vista y
   no un <select>: tienen que verse como algo que se toca. */
.opciones { display: flex; flex-wrap: wrap; gap: 7px; }
/* Más grandes de lo que pide la vista, a propósito.
   Vladi los quiere así: se tocan con el pulgar mientras se habla por
   teléfono con el cliente. Un botón chiquito en esa situación es un
   clic errado. */
.opcion {
  padding: 11px 20px; border: 1px solid var(--borde); border-radius: 9px;
  background: #fff; color: var(--grafito);
  font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; transition: border-color .12s, background .12s, color .12s;
}
.opcion:hover { border-color: #CFD2D6; background: #F7F8F9; }
.opcion.activo {
  background: var(--naranja); border-color: var(--naranja); color: #fff; font-weight: 600;
}
.opcion.activo:hover { background: var(--naranja-osc); border-color: var(--naranja-osc); }
@media (max-width: 520px) {
  .opcion { flex: 1 1 auto; text-align: center; }
}

/* ── Ranuras del trabajo del técnico (paso a paso) ── */
.ranura {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff; margin-bottom: 7px;
}
.ranura.pendiente { opacity: .62; }
.ranura-ic { flex: 0 0 24px; text-align: center; font-size: 15px; color: var(--gris); }
.ranura-txt { flex: 1; font-size: 13.5px; color: var(--grafito); }
.ranura-ok { color: var(--verde, #137A45); font-weight: 700; }
.volver-trabajos { display: inline-block; margin-bottom: 10px; font-size: 13px; }

/* ── Accesorios de una orden ── */
.orden-accs { margin-top: 8px; padding: 9px 12px; background: var(--gris-suave, #F5F6F7); border-radius: 7px; }
.orden-accs-tit { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--gris); margin-bottom: 5px; }
.orden-acc { font-size: 12.5px; color: var(--grafito); padding: 2px 0; }

/* ── El punto que late en "dónde va el técnico" ──
   Va aquí y no en .donde-va::before porque el HTML trae su propio
   <span class="pt">. Dos puntos serían uno de más. */
.donde-va::before { content: none; }
.donde-va .pt {
  width: 7px; height: 7px; border-radius: 50%; background: #1F6FD0;
  animation: latido 1.8s ease-in-out infinite; flex: 0 0 auto;
}
@media (prefers-reduced-motion: reduce) { .donde-va .pt { animation: none; } }

/* ── El RNC que responde la DGII mientras se escribe ── */
.rnc-aviso { margin-top: 6px; padding: 8px 11px; border-radius: 6px; background: var(--gris-suave, #F5F6F7); border: 1px solid var(--borde); }
.rnc-nombre { font-size: 13px; font-weight: 600; color: var(--grafito); }
.rnc-estado { font-size: 12px; color: var(--gris); margin-top: 2px; }

/* ── Fichas de contacto: quitar una fila ── */
.quitar-persona, .quitar-suc, .quitar-plat, .quitar-rol, .l-quitar {
  border: 0; background: transparent; color: var(--gris);
  font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 5px;
}
.quitar-persona:hover, .quitar-suc:hover, .quitar-plat:hover,
.quitar-rol:hover, .l-quitar:hover { background: var(--rojo-bg, #FCEBE9); color: var(--rojo, #C0281C); }

.ed-funciones, .ed-avisos, .ed-portal { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fn-chk, .av-mail, .av-wa, .po-chk, .p-chk, .c-chk {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--grafito);
}
.fn-chk input, .av-mail input, .av-wa input, .po-chk input, .p-chk input, .c-chk input { width: auto; }

/* ── Líneas de una factura ── */
.l-desc { flex: 1 1 220px; }
.l-cant, .l-prec, .l-itbis, .l-imp, .p-monto, .c-monto { width: 96px; text-align: right; }
.l-serv { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--gris); }
.l-serv input { width: auto; }
.fact-cli { font-size: 13px; font-weight: 600; color: var(--grafito); }
.sin-precio { color: var(--rojo, #C0281C); font-weight: 600; }
.ver-tarifa { font-size: 12px; }

/* ── Historial de precios / cambios ── */
.hist-linea { padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 12.5px; }
.hist-linea:last-child { border-bottom: 0; }
.hist-precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.cambio { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.antes { color: var(--gris); text-decoration: line-through; }
.despues { color: var(--grafito); font-weight: 600; }

/* ── Acumulado plegable ── */
.acumulado { border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; margin-top: 10px; }
.acumulado-cuerpo { padding: 10px 12px; border-top: 1px solid var(--borde); }

/* ── Sueltos ── */
.pista { font-size: 12px; color: var(--gris); margin-top: 4px; }
.men { font-size: 12px; color: var(--gris); }
.txt { font-size: 13px; color: var(--grafito); }
.sin { color: var(--gris); font-style: italic; }
.lista { display: flex; flex-direction: column; gap: 6px; }
.abrible { cursor: pointer; }
.abrible:hover { background: var(--gris-suave, #F5F6F7); }

/* ── Escoger las unidades del contacto (desinstalación, re-instalación,
      cambio y chequeo). No se teclea una placa: se escoge de lo que el
      contacto ya tiene instalado. ── */
.uni-fila {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px;
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
}
.uni-fila.escogida { border-color: var(--naranja); background: var(--naranja-bg, #FFF1EC); }
.uni-tit { font-size: 13.5px; font-weight: 600; color: var(--grafito); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.uni-sub { font-size: 12px; color: var(--gris); margin-top: 2px; }

/* La columna del número de fila. Angosta y en gris: es una referencia
   para decir "el 47" por teléfono, no un dato del expediente. */
.num-fila {
  width: 46px; text-align: right; color: var(--gris);
  font-size: 12px; font-variant-numeric: tabular-nums;
}

/* ── Escoger filas a mano ── */
.sel-caja { width: 36px; text-align: center; padding-left: 10px; }
.sel-caja input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--naranja); }
.sel-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 14px; background: var(--naranja-bg, #FFF1EC);
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  font-size: 13px; color: var(--grafito);
}
.sel-barra b { font-size: 15px; color: var(--naranja); }

/* ── Renovaciones: las unidades de una empresa, por mes ── */
.ren-mes { margin-bottom: 16px; }
.ren-mes-cab {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 9px 12px; font-size: 13px; color: var(--gris);
  border: 1px solid var(--borde); border-radius: 8px; background: #fff;
  cursor: pointer; user-select: none;
}
.ren-mes-cab:hover { background: var(--gris-suave, #F5F6F7); }
.ren-mes-cab .flecha { font-size: 10px; color: var(--gris); transition: transform .15s; }
.ren-mes.abierto .ren-mes-cab { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ren-mes.abierto .ren-mes-cab .flecha { transform: rotate(90deg); }
.ren-mes.abierto .tabla-wrap {
  border: 1px solid var(--borde); border-top: 0;
  border-radius: 0 0 8px 8px; overflow: hidden;
}
.ren-mes-cab b { font-size: 14px; color: var(--grafito); }

/* ═══════════════════════════════════════════════════════════
   BUSCADOR CON SUGERENCIAS

   Vladi, 25 de agosto de 2026: *"que tenga un buscador, para poder
   seleccionar los clientes"*. Antes era un desplegable con los
   primeros 500 — y con más de 500 clientes, los demás no existían.

   La lista va POSICIONADA ENCIMA (`position:absolute`) y no empujando
   lo de abajo. Si empujara, el formulario entero saltaría con cada
   letra y el ratón terminaría encima de otra cosa a mitad de clic.
   ═══════════════════════════════════════════════════════════ */
.lista-sugerencias {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 40;
  max-height: 320px;
  overflow-y: auto;
  background: var(--fondo-panel, #fff);
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

.lista-sugerencias .sug {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--borde-suave, var(--borde));
}
.lista-sugerencias .sug:last-child { border-bottom: 0; }
/* `.marcada` es la que está escogida con las flechas del teclado. Se
   pinta igual que el `:hover` a propósito: quien usa el teclado y
   quien usa el ratón tienen que ver lo mismo resaltado. */
.lista-sugerencias .sug:hover,
.lista-sugerencias .sug.marcada { background: var(--gris-bg, #f4f5f7); }

.lista-sugerencias .sug-nota {
  font-size: 11.5px;
  color: var(--gris);
  margin-top: 1px;
}

/* La salida de emergencia: escribir el nombre a mano. Va separada del
   resto para que no se confunda con un cliente de la lista. */
.lista-sugerencias .sug-libre {
  color: var(--naranja);
  font-size: 12.5px;
  border-top: 1px solid var(--borde);
}

.lista-sugerencias .sug-vacio {
  padding: 9px 12px;
  font-size: 12px;
  color: var(--gris);
}

/* La marca del acuerdo con el cliente habitual.
   Va pegada debajo de la pregunta, no al lado: al lado competía con
   la etiqueta y en el móvil se partía en dos líneas. */
.marca-acuerdo { margin-top: 6px; font-size: 11px; }

/* ══════════════════════════════════════════════════════════
   NUEVA SOLICITUD — DÓNDE ESTOY

   Vladi, 29 de agosto de 2026: *"la estructura está bien hecha, pero
   hay algo, como que me pierdo, porque todo está con el mismo color y
   no sé, no me encuentro... en cuanto a la estructura está perfecto"*.

   Y era verdad. La cascada deja seis u ocho pasos a la vista y todos se
   pintaban igual: caja blanca sobre fondo blanco, borde gris, rótulo
   del mismo tamaño. Lo contestado, lo que toca ahora y lo opcional
   pesaban lo mismo.

   Lo que cambia es SOLO el peso visual. Ni un paso menos, ni uno más,
   ni un orden distinto: eso él lo dio por bueno.

   Tres cosas hacen el trabajo:

    1. Fondo gris bajo cajas blancas. Antes era blanco sobre blanco y
       los bordes finos tenían que hacer solos todo el trabajo de
       separar. Ahora cada paso se lee como una tarjeta sin que haya
       que fijarse.
    2. Un filo de color a la izquierda, que es donde va el ojo al
       bajar: verde lo hecho, naranja lo que toca.
    3. La palabra «Ahora», una sola vez en la pantalla. El color solo
       no basta para quien lo distingue mal, y una palabra se encuentra
       de un vistazo aunque uno vuelva a la pantalla después de
       atender otra cosa.
   ══════════════════════════════════════════════════════════ */
#ns_form { background: var(--fondo); }

.ns-paso {
  position: relative;
  background: #fff;
  border: 1px solid var(--borde);
  border-left: 3px solid #DFE2E6;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.ns-paso:last-child { margin-bottom: 0; }
/* Los títulos de sección (¿Sobre cuáles unidades?, ¿Cuántos?, Adjuntos)
   ya están dentro de una tarjeta: su margen de arriba y su raya de
   abajo sobraban y hacían la caja más alta sin separar nada. */
.ns-paso > .seccion-tit { margin-top: 0; border-bottom: 0; padding-bottom: 0; }
/* Las preguntas propias del tipo traen su propio `.campo` dentro del
   paso. Se le quita el margen de abajo para que la tarjeta no quede
   con un hueco, y su rótulo cuenta como el rótulo del paso. */
.ns-paso > .preg-dinamica { margin-bottom: 0; }

/* ── Hecho ── */
.ns-paso.hecho { border-left-color: var(--verde); background: #FCFDFC; }
.ns-paso.hecho > label,
.ns-paso.hecho > .preg-dinamica > label,
.ns-paso.hecho > .seccion-tit { color: var(--gris); }
.ns-paso.hecho > label::before,
.ns-paso.hecho > .preg-dinamica > label::before,
.ns-paso.hecho > .seccion-tit::before {
  content: '✓'; color: var(--verde); font-weight: 800; margin-right: 5px;
}

/* ── Ahora ──
   El filo naranja es más grueso que el de los demás, no de otro color
   nada más: se ve por el rabillo del ojo al bajar la vista. */
.ns-paso.ahora {
  border-left: 5px solid var(--naranja);
  padding-left: 12px;
  box-shadow: 0 1px 3px rgba(16,18,20,.06), 0 0 0 3px rgba(255,65,6,.07);
}
.ns-paso.ahora > label,
.ns-paso.ahora > .preg-dinamica > label,
.ns-paso.ahora > .seccion-tit { color: var(--grafito); font-size: 13px; }
.ns-paso.ahora::after {
  content: 'Ahora';
  position: absolute; top: 10px; right: 12px;
  background: var(--naranja-bg); color: var(--naranja);
  font-size: 10px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 20px;
}

/* Los opcionales del final —cuándo, urgente, en espera, detalle,
   adjuntos— se quedan en gris a propósito. No llevan ✓ porque no hay
   nada que contestar, y no llevan «Ahora» porque el 95% de las
   llamadas terminan sin tocarlos: marcarlos sería empujar a llenar lo
   que casi nunca se llena. */
.ns-paso[data-opcional] { background: #FAFBFC; }
/* «Adjuntos» venía en naranja mayúscula, como todos los títulos de
   sección. Quedaba siendo lo único de color en la mitad de abajo de la
   pantalla, o sea que el ojo se iba justo al paso que menos importa. */
.ns-paso[data-opcional] > .seccion-tit { color: var(--gris); }

/* Los asuntos del ticket, plegados por título.
   Cinco líneas a la vista, y hasta cuatro botones bajo la abierta.
   Dieciocho de golpe no se leen mientras el cliente habla. */
.tipo-bloque { border: 1px solid var(--borde); border-radius: 8px; margin-bottom: 6px;
  background: #fff; overflow: hidden; }
.tipo-bloque-tit { display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  cursor: pointer; user-select: none; font-size: 13px; font-weight: 600;
  color: var(--grafito); }
.tipo-bloque-tit:hover { background: #FAFAFB; }
.tipo-bloque-tit .flecha { color: var(--gris); font-size: 11px; width: 10px; }
.tipo-bloque-tit .cuantos { margin-left: auto; background: #EFF0F2; color: #5A5A5A;
  border-radius: 20px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.tipo-bloque-caja { display: flex; gap: 7px; flex-wrap: wrap;
  padding: 0 12px 12px; }

/* Los asuntos del ticket, agrupados bajo un título.
   Con 18 sueltos no se leen: hay que barrer la pantalla con la vista
   mientras el cliente habla. Agrupados son cinco bloques de tres o
   cuatro y se va directo al que toca. */
.tipo-grupo { margin-bottom: 10px; }
.tipo-grupo:last-child { margin-bottom: 0; }
.tipo-grupo-tit {
  font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--gris); margin-bottom: 5px;
}
.tipo-grupo-caja { display: flex; gap: 7px; flex-wrap: wrap; }

/* ── Tiempos: cada paso con su dueño (P-37) ────────────────── */
/*
   La celda lleva dos cifras: la mediana grande y, debajo y pequeño,
   de cuántas medidas sale. La segunda importa tanto como la primera —
   una mediana de tres órdenes no es un dato, es una anécdota.
*/
.ti-pie {
  display: block;
  font-size: 11px;
  color: var(--gris);
  font-weight: 400;
  margin-top: 1px;
}
/* Fuera del tiempo esperado. Solo aparece cuando hay meta puesta:
   durante el mes de observación esta clase no se usa nunca. */
.ti-fuera { color: var(--rojo); font-weight: 700; }

/* ── «Tiene 3 tickets tarde», al entrar (P-37) ─────────────── */
/*
   No es un toast a propósito: el toast se va en cuatro segundos y
   esto aparece justo cuando la persona todavía está ubicándose en la
   pantalla. Se queda hasta que lo cierre.

   Abajo y no arriba: arriba ya vive la franja de «viendo como otro»,
   y dos barras apiladas en la cabecera empujan la pantalla entera.
*/
.aviso-retraso {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 18px;
  z-index: 900;
  max-width: min(720px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  background: var(--ambar-bg);
  border: 1px solid #E8C77A;
  color: var(--ambar);
  box-shadow: 0 6px 22px rgba(0,0,0,.14);
}
.aviso-retraso.tarde {
  background: var(--rojo-bg);
  border-color: #E5A49C;
  color: var(--rojo);
}
.aviso-retraso button {
  flex: 0 0 auto;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  border-radius: 7px;
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.aviso-retraso .men { color: inherit; opacity: .75; }

/* ── «No disponible» en la barra de arriba (P-37) ──────────── */
/*
   Se marca al salir y se explica al volver. Vive en la barra porque
   se usa cuando uno se está levantando de la silla: un botón que hay
   que ir a buscar a otra pantalla no se aprieta nunca, y entonces el
   dato no existe.
*/
.btn-nodisp {
  border: 1px solid var(--borde);
  background: transparent;
  color: var(--gris);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  margin-right: 10px;
}
.btn-nodisp:hover { border-color: var(--gris); color: var(--texto); }
/* Fuera: se ve de lejos, para acordarse de volver. */
.btn-nodisp.fuera {
  background: var(--ambar-bg);
  border-color: #E0B450;
  color: var(--ambar);
}

/* ── La pantalla bloqueada mientras alguien está fuera (P-37) ─ */
/*
   Vladi: *"cuando dice ocupado, entonces la pantalla se bloquea para
   que no pueda trabajar en nada"*.

   Esta capa es solo la mitad amable del freno — la que explica lo que
   pasa. La que manda está en el servidor: una pantalla tapada no es
   un sistema bloqueado, y sin el freno de allá bastaría cerrar esta
   capa desde el navegador para seguir trabajando con el tiempo
   descontado.
*/
.capa-nodisp {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(31, 31, 31, .72);
  backdrop-filter: blur(3px);
}
.capa-nodisp-caja {
  background: var(--panel);
  border-radius: 14px;
  padding: 28px 26px 22px;
  width: min(430px, 100%);
  text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,.3);
}
.capa-nodisp-ic {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--ambar);
}
.capa-nodisp-caja h3 { margin: 0 0 6px; font-size: 19px; }
.capa-nodisp-caja p  { margin: 0; font-size: 13.5px; color: var(--gris); line-height: 1.5; }
.capa-nodisp-caja input { width: 100%; }

/* ── Hablar dentro del trabajo (P-32) ──────────────────────── */
/*
   Un hilo corto y con scroll propio: la conversación de un ticket
   puede crecer, y si empujara la ficha hacia abajo, la gente dejaría
   de escribir para no estorbar lo demás.
*/
.conv-hilo {
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 10px;
  background: var(--fondo);
}
.conv-msg {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 9px;
  padding: 8px 10px;
  margin-bottom: 8px;
}
.conv-msg:last-child { margin-bottom: 0; }
/* Lo mío, con el borde naranja de la casa: en un hilo de ocho
   mensajes hay que poder encontrar el propio de un vistazo. */
.conv-msg.mio { border-left: 3px solid var(--naranja); }
.conv-cab {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-size: 12px;
  margin-bottom: 3px;
}
.conv-texto {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--texto);
  white-space: pre-wrap;   /* los saltos de línea que escribió, se respetan */
  word-break: break-word;
}

/* ── Que no pueda decir que no lo vio (P-39) ────────────────── */
/*
   La franja NO tiene botón de cerrar, y es la diferencia con todo lo
   demás de esta hoja: no se puede ignorar con un clic, solo
   atendiendo. Se va sola cuando la persona abre lo que le avisaron.

   Un aviso que se puede cerrar enseña a cerrarlo. Uno que solo se
   quita haciendo el trabajo, enseña a hacer el trabajo.
*/
.franja-novedad {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  font-size: 13px;
  background: var(--grafito-osc);
  color: #fff;
  box-shadow: 0 -4px 18px rgba(0,0,0,.22);
}
.franja-novedad .men { color: #B9B9B9; margin-left: auto; white-space: nowrap; }
.franja-novedad b { color: #fff; }

/* La pantalla grande: solo al volver de una ausencia. */
.capa-novedad {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(31,31,31,.78);
  backdrop-filter: blur(4px);
}
.capa-novedad-caja {
  background: var(--panel);
  border-radius: 14px;
  padding: 24px;
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 20px 55px rgba(0,0,0,.34);
}
.nov-cab { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.nov-ic { font-size: 30px; line-height: 1; }
.nov-cab h3 { margin: 0 0 3px; font-size: 19px; }
.nov-cab p  { margin: 0; font-size: 13px; color: var(--gris); line-height: 1.45; }
.nov-bloque { margin-bottom: 14px; }
.nov-tit {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--gris);
  margin-bottom: 6px;
}
.nov-item {
  border: 1px solid var(--borde);
  border-radius: 9px;
  padding: 9px 11px;
  margin-bottom: 6px;
  font-size: 13.5px;
}
.nov-item.urgente  { border-left: 3px solid var(--rojo); }
/* El aviso de gerencia se ve distinto: es lo único que alguien
   decidió mandarle a todo el mundo. */
.nov-item.destacado { border-left: 3px solid var(--naranja); background: var(--naranja-bg); }

/* ─────────────────────────────────────────────────────────────
   EL AVISO AL PERSONAL, EN GRANDE   (30 de agosto de 2026)

   Vladi: *"los avisos al personal se notan pequeño abajo, me
   gustaría que sea un aviso grande en medio de toda la pantalla."*

   Tenía razón, y el error era de fondo y no de tamaño: yo lo había
   metido en la misma franja que los retrasos y los mensajes. Pero un
   retraso es MÍO —lo arreglo yo, cuando pueda— y un aviso al personal
   es algo que alguien decidió que todo el mundo tiene que saber. Al
   ponerlos en la misma franja los volví la misma cosa, y lo que se ve
   igual que el ruido se lee como ruido.

   Va más ancho que la pantalla del P-39 y con la letra más grande: se
   tiene que poder leer desde parado, sin acercarse a la pantalla.
   ───────────────────────────────────────────────────────────── */
.capa-aviso { z-index: 3200; }        /* por encima de la del P-39 */
.capa-aviso .capa-novedad-caja {
  width: min(680px, 100%);
  border-top: 5px solid var(--naranja);
}
.av-grande-cab {
  display: flex; gap: 14px; align-items: center;
  margin-bottom: 18px;
}
.av-grande-cab .ic { font-size: 40px; line-height: 1; }
.av-grande-cab h3 { margin: 0; font-size: 22px; letter-spacing: -.2px; }
.av-grande-cab .men { font-size: 13px; color: var(--gris); }
.av-grande {
  border: 1px solid var(--borde);
  border-left: 5px solid var(--naranja);
  border-radius: 11px;
  padding: 16px 18px;
  margin-bottom: 12px;
  background: var(--naranja-bg);
}
.av-grande .tit { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; }
.av-grande .txt { font-size: 15.5px; line-height: 1.55; white-space: pre-wrap; }
.av-grande .pie { margin-top: 10px; font-size: 12.5px; color: var(--gris); }

/* ─────────────────────────────────────────────────────────────
   LA FICHA DEL TICKET DE ÁREA, REDISEÑADA   ·  31 ago 2026

   Vladi: *"me gustaría que sea más amigable al momento de
   visualizarlo... solo visual, porque funcional están super
   excelente."* Se le mandaron dos bocetos y pidió la combinación.

   Lo que estaba mal no era el estilo: era el orden. La conversación
   ocupaba la mitad de arriba para decir que estaba vacía, y quién
   llamaba estaba enterrado al final.

   La barra de etapas ocupa UNA línea en vez de una columna, y eso es
   lo que libera la derecha para la conversación — que así ya no hay
   que plegar.
   ───────────────────────────────────────────────────────────── */

.tira-etapas{
  border:1px solid var(--borde); border-radius:10px;
  padding:11px 13px; margin-bottom:14px; background:var(--fondo);
}
.barra-etapas{ display:flex; border:1px solid var(--borde);
  border-radius:8px; overflow:hidden; background:var(--panel); }
.barra-etapas .et2{
  flex:1; text-align:center; font-size:11.5px; font-weight:700;
  padding:8px 4px; color:var(--gris-claro);
  border-right:1px solid var(--borde); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.barra-etapas .et2:last-child{ border-right:none; }
.barra-etapas .et2.hecho{ background:var(--verde-bg); color:var(--verde); }
.barra-etapas .et2.aqui { background:var(--naranja);  color:#fff; }
.reloj-linea{
  display:flex; gap:16px; flex-wrap:wrap; align-items:baseline;
  margin-top:8px; font-size:12.5px; color:var(--gris);
}
.ok-verde{ color:var(--verde); } .ok-rojo{ color:var(--rojo); }

/* Las dos columnas. En pantalla angosta se ponen una debajo de la
   otra, y el orden importa: primero el cliente, después lo que se
   habló. Quien atiende el teléfono necesita el nombre antes que el
   chat. */
.ficha-2col{ display:grid; grid-template-columns:1.2fr .9fr; gap:18px; }
.ficha-2col .col-der{
  border-left:1px solid var(--borde); padding-left:18px;
}
@media (max-width: 900px){
  .ficha-2col{ grid-template-columns:1fr; gap:12px; }
  .ficha-2col .col-der{ border-left:none; padding-left:0;
    border-top:1px solid var(--borde); padding-top:14px; }
}

.tarjeta-cliente{
  border:1px solid var(--borde); border-left:4px solid var(--naranja);
  border-radius:10px; padding:12px 14px; background:var(--panel);
}
.tarjeta-cliente .nom{ font-size:17px; font-weight:800; letter-spacing:-.2px;
  line-height:1.25; word-break:break-word; }
.tarjeta-cliente .men{ margin-top:2px; }
.tels{ display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }

/* El teléfono es un botón: en la computadora lo marca la aplicación
   de la central (P-40). */
.tel-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; text-decoration:none;
  color:var(--texto); background:var(--panel);
  border:1px solid var(--borde); border-radius:7px; padding:6px 11px;
}
.tel-btn:hover{ border-color:var(--naranja); }
.tel-btn .ic{ color:var(--naranja); }

/* Sin teléfono se dice en rojo y con qué hacer. Un guion no se lee, y
   monitoreo tiene al cliente esperando en la línea. */
.sin-tel{
  display:inline-block; font-size:12.5px; font-weight:600;
  color:var(--rojo); background:var(--rojo-bg);
  border:1px solid #F0C9C4; border-radius:7px; padding:6px 11px;
}

.tarjeta-pide{
  border:1px solid var(--borde); border-radius:10px;
  padding:12px 14px; font-size:14px; line-height:1.5;
  white-space:pre-wrap;
}
.uni-fila{
  display:flex; gap:10px; align-items:baseline;
  border:1px solid var(--borde); border-radius:9px;
  padding:8px 12px; margin-bottom:6px; font-size:13.5px;
}