/* ═══════════════════════════════════════════════════════════
   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); }

/* ── 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; }