/* =====================================================================
   Gestión Vial CCO · Bosquejo web
   Lenguaje visual: señalización vial colombiana.
   - Overpass (derivada de Highway Gothic, la tipografía de las señales)
   - Verde informativo = ubicación (placa de abscisa), amarillo preventivo = acción,
     rojo reglamentario = rechazo/cierre, asfalto = estructura.
   ===================================================================== */

:root {
  --asfalto: #22272B;
  --asfalto-2: #30373C;
  --asfalto-3: #454E54;
  --concreto: #ECEDEA;
  --papel: #FFFFFF;
  --linea: #D3D6D0;
  --tinta: #15191C;
  --tinta-2: #535B61;
  --tinta-3: #80888D;

  --amarillo: #F4B400;
  --amarillo-hover: #FFC61A;
  --amarillo-tinta: #2B2000;
  --verde: #0A6B4B;
  --verde-suave: #E1F0E9;
  --rojo: #B3261E;
  --rojo-suave: #F8E3E1;
  --azul: #1C4F8A;
  --azul-suave: #E2EAF4;

  --r-placa: 5px;
  --r-control: 8px;
  --r-bloque: 12px;

  --sombra: 0 1px 0 rgba(21, 25, 28, .06), 0 6px 18px -10px rgba(21, 25, 28, .35);
  --foco: 0 0 0 3px var(--papel), 0 0 0 6px var(--azul);

  --t-xs: .78rem;
  --t-s: .875rem;
  --t-m: 1rem;
  --t-l: 1.25rem;
  --t-xl: 1.75rem;
  --t-xxl: 2.5rem;

  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Overpass", system-ui, sans-serif;
  font-size: var(--t-m);
  line-height: 1.45;
  color: var(--tinta);
  background: var(--concreto);
  font-variant-numeric: tabular-nums;
}
h1, h2, h3 { margin: 0; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-l); }
h3 { font-size: var(--t-m); }
p { margin: 0; }
a { color: var(--azul); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--r-control); }
[hidden] { display: none !important; }

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

/* ---------------------------------------------------------------------
   Placa de abscisa (poste de referencia) — el elemento de identidad
   --------------------------------------------------------------------- */
.placa {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 8px 3px;
  background: var(--verde);
  color: #fff;
  border-radius: var(--r-placa);
  box-shadow: inset 0 0 0 2px var(--verde), inset 0 0 0 3.5px #fff;
  line-height: 1;
  white-space: nowrap;
}
.placa__via { font-size: .66rem; font-weight: 600; opacity: .92; }
.placa__k { font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; }
.placa--grande { padding: 9px 14px 7px; box-shadow: inset 0 0 0 3px var(--verde), inset 0 0 0 5px #fff; }
.placa--grande .placa__via { font-size: .8rem; }
.placa--grande .placa__k { font-size: 2.1rem; }
.placa--sin { background: var(--asfalto-3); box-shadow: inset 0 0 0 2px var(--asfalto-3), inset 0 0 0 3.5px #fff; }

/* ---------------------------------------------------------------------
   Controles
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  border: 2px solid transparent; border-radius: var(--r-control);
  font-weight: 700; cursor: pointer; text-decoration: none;
  background: var(--papel); color: var(--tinta); border-color: var(--linea);
}
.btn:hover { border-color: var(--tinta-3); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--accion { background: var(--amarillo); border-color: var(--amarillo); color: var(--amarillo-tinta); }
.btn--accion:hover { background: var(--amarillo-hover); border-color: var(--amarillo-hover); }
.btn--peligro { color: var(--rojo); border-color: var(--rojo); background: var(--papel); }
.btn--peligro:hover { background: var(--rojo-suave); border-color: var(--rojo); }
.btn--oscuro { background: var(--asfalto); color: #fff; border-color: var(--asfalto); }
.btn--plano { background: transparent; border-color: transparent; color: var(--azul); padding: 0 8px; }
.btn--plano:hover { border-color: transparent; text-decoration: underline; }
.btn--bloque { width: 100%; }

.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__etq { font-size: var(--t-s); font-weight: 700; color: var(--tinta-2); }
.campo__etq b { color: var(--rojo); font-weight: 800; }
.campo__ayuda { font-size: var(--t-xs); color: var(--tinta-3); }
.campo__error { font-size: var(--t-xs); color: var(--rojo); font-weight: 700; }
.control {
  width: 100%; min-height: 44px; padding: 9px 12px;
  background: var(--papel); border: 2px solid var(--linea); border-radius: var(--r-control);
}
.control:hover { border-color: var(--tinta-3); }
.control:focus-visible { border-color: var(--azul); box-shadow: none; outline: 3px solid var(--azul-suave); }
textarea.control { min-height: 96px; resize: vertical; }
.campo--error .control { border-color: var(--rojo); }

.rejilla { display: grid; gap: 16px; }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .rejilla--2 { grid-template-columns: 1fr; } }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 99px;
  font-size: var(--t-xs); font-weight: 700; white-space: nowrap;
  background: var(--concreto); color: var(--tinta-2);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip--ok { background: var(--verde-suave); color: var(--verde); }
.chip--alerta { background: #FFF3CC; color: #7A5A00; }
.chip--mal { background: var(--rojo-suave); color: var(--rojo); }
.chip--info { background: var(--azul-suave); color: var(--azul); }
.chip--neutro::before { display: none; }

.estado-evento { font-size: var(--t-xs); font-weight: 800; padding: 3px 8px; border-radius: 4px; }
.estado-evento--ABIERTO { background: var(--amarillo); color: var(--amarillo-tinta); }
.estado-evento--CERRADO { background: var(--concreto); color: var(--tinta-2); }

.bloque { background: var(--papel); border-radius: var(--r-bloque); padding: 18px; box-shadow: var(--sombra); }
.bloque__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vacio { color: var(--tinta-2); padding: 18px 0; }

.mapa { height: 280px; border-radius: var(--r-bloque); overflow: hidden; background: var(--linea); z-index: 0; }
.mapa--alto { height: 420px; }

/* Aviso flotante */
.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  max-width: min(92vw, 520px); padding: 12px 18px; border-radius: var(--r-control);
  background: var(--asfalto); color: #fff; font-weight: 600; z-index: 2000;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
}
.aviso--error { background: var(--rojo); }
.aviso--ok { background: var(--verde); }

/* Aviso de conexión (RF-104): franja fija arriba */
.red-aviso {
  position: fixed; top: 0; left: 0; right: 0; z-index: 2100;
  padding: 8px 16px; text-align: center; color: #fff; font-weight: 700; font-size: .95rem;
  box-shadow: 0 6px 18px -10px rgba(0,0,0,.5);
}
.red-aviso[hidden] { display: none; }
body.sin-red { padding-top: 56px; }
.red-aviso--sin { background: var(--rojo); }
.red-aviso--ok { background: var(--verde); }

/* Diálogo */
dialog.dlg { border: 0; border-radius: var(--r-bloque); padding: 0; width: min(94vw, 480px); box-shadow: 0 24px 60px -20px rgba(0,0,0,.5); }
dialog.dlg::backdrop { background: rgba(21, 25, 28, .55); }
.dlg__cuerpo { padding: 20px; display: grid; gap: 14px; }
.dlg__pie { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; background: var(--concreto); }

/* ---------------------------------------------------------------------
   Login
   --------------------------------------------------------------------- */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
  background:
    linear-gradient(to bottom, var(--amarillo) 0 55%, transparent 55%) center top / 6px 72px repeat-y,
    var(--asfalto);
}
.login__caja { width: min(100%, 400px); background: var(--papel); border-radius: var(--r-bloque); padding: 28px 24px; display: grid; gap: 18px; position: relative; }
.login__marca { display: grid; justify-items: center; gap: 14px; text-align: center; padding-bottom: 6px; border-bottom: 2px dashed var(--linea); }
.login__marca h1 { font-size: var(--t-l); }
.login__marca p { color: var(--tinta-2); font-size: var(--t-s); }
.login__demo { display: grid; gap: 8px; padding-top: 14px; border-top: 2px dashed var(--linea); }
.login__demo p { font-size: var(--t-s); color: var(--tinta-2); }
.login__demo .btn { justify-content: space-between; text-align: left; padding: 8px 14px; }
.login__demo .btn span { text-transform: capitalize; }
.login__demo small { color: var(--tinta-3); font-weight: 600; white-space: nowrap; }

/* Logo de la Concesión Túnel Aburrá Oriente (assets/img/logo-tunel-oriente.png, 301×162) */
.logo-completo { display: block; width: 220px; max-width: 100%; height: auto; }
.logo-placa { background: #fff; border-radius: var(--r-control); padding: 10px 12px; display: grid; place-items: center; }
.logo-placa .logo-completo { width: 170px; }
/* Solo el ícono del túnel: recorte de la parte superior del PNG (ícono ≈ x 72–228, y 0–80 en el original) */
.logo-icono {
  display: inline-block; width: 30px; height: 17px; flex: none;
  background: url("img/logo-tunel-oriente.png") no-repeat;
  background-size: 58px auto;                 /* 301 × (30 / 156) */
  background-position: -14px 0;               /* 72 × (30 / 156) */
}
.logo-icono-placa { width: 38px; height: 38px; border-radius: 9px; background: #fff; display: grid; place-items: center; flex: none; }

.sello { width: 44px; height: 44px; border-radius: 9px; background: var(--amarillo); display: grid; place-items: center; flex: none; transform: rotate(45deg); }
.sello span { transform: rotate(-45deg); font-weight: 800; color: var(--amarillo-tinta); font-size: .95rem; }

/* ---------------------------------------------------------------------
   OPERADOR (móvil, guantes, sol): alto contraste, objetivos ≥ 64 px
   --------------------------------------------------------------------- */
.op { max-width: 560px; margin: 0 auto; min-height: 100vh; background: var(--concreto); padding-bottom: 32px; }
.op__barra {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--asfalto); color: #fff;
}
.op__barra { flex-wrap: wrap; row-gap: 6px; }
.op__unidad { flex: 1; min-width: 0; }
.op__unidad strong { display: block; font-size: var(--t-m); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op__unidad span { display: block; font-size: var(--t-xs); opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op__indicadores { display: flex; gap: 6px; flex-wrap: wrap; order: 3; width: 100%; }
/* Almacenamiento local (RF-105) */
.almacen { flex-basis: 100%; display: grid; gap: 4px; font-size: .8rem; color: #D7DCDF; }
.almacen__barra { display: block; height: 6px; border-radius: 3px; background: var(--asfalto-3); overflow: hidden; }
.almacen__relleno { display: block; height: 100%; border-radius: 3px; background: #6FD3A8; transition: width .3s; }
.almacen--alerta .almacen__relleno { background: var(--amarillo); }
.almacen--alerta .almacen__texto { color: var(--amarillo); }
.almacen--mal .almacen__relleno { background: #FF6B5E; }
.almacen--mal .almacen__texto { color: #FF8A80; font-weight: 700; }
.op__barra .chip { background: var(--asfalto-2); color: #D7DCDF; }
.op__barra .chip--ok { color: #6FD3A8; }
.op__barra .chip--alerta { color: var(--amarillo); }
.op__barra .chip--mal { color: #FF8A80; }
.op__salir { background: transparent; border: 0; color: #fff; min-width: 44px; min-height: 44px; cursor: pointer; font-weight: 700; }
.op__cuerpo { padding: 16px 14px; display: grid; gap: 16px; }
.op__volver { justify-self: start; min-height: 44px; }

.servicio { background: var(--papel); border-radius: var(--r-bloque); box-shadow: var(--sombra); overflow: hidden; }
.servicio__cab { padding: 16px; display: grid; gap: 12px; }
.servicio__cab .placa { justify-self: start; }
.servicio__cod { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.servicio__cod strong { font-size: var(--t-xl); font-weight: 800; }
.servicio__cod span { color: var(--tinta-2); font-weight: 600; }
.servicio__sitio { font-size: var(--t-l); font-weight: 700; }
.servicio__meta { font-size: var(--t-s); color: var(--tinta-2); }
.servicio__pie { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; }
.servicio__pie .btn { min-height: 64px; font-size: var(--t-l); }
.servicio__franja { height: 8px; background: repeating-linear-gradient(-45deg, var(--amarillo) 0 14px, var(--asfalto) 14px 28px); }

/* Secuencia de estados (es una secuencia real → numerada) */
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.paso {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 12px;
  min-height: 72px; padding: 10px 14px 10px 10px;
  background: var(--papel); border: 3px solid var(--linea); border-radius: var(--r-bloque);
  text-align: left; width: 100%;
}
.paso__n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: var(--t-l); background: var(--concreto); color: var(--tinta-2); }
.paso__txt strong { display: block; font-size: var(--t-l); line-height: 1.1; }
.paso__txt span { font-size: var(--t-s); color: var(--tinta-2); }
.paso__hora { font-weight: 800; font-size: var(--t-l); }
.paso--hecho { border-color: var(--verde-suave); background: #F6FBF8; }
.paso--hecho .paso__n { background: var(--verde); color: #fff; }
.paso--hecho .paso__hora { color: var(--verde); }
.paso--siguiente { border-color: var(--amarillo); background: var(--amarillo); cursor: pointer; box-shadow: 0 6px 0 #C99400; transform: translateY(-2px); }
.paso--siguiente:hover { background: var(--amarillo-hover); }
.paso--siguiente:active { transform: translateY(2px); box-shadow: 0 1px 0 #C99400; }
.paso--siguiente .paso__n { background: var(--amarillo-tinta); color: var(--amarillo); }
.paso--siguiente .paso__txt span { color: var(--amarillo-tinta); }
.paso--bloqueado { opacity: .5; }
.paso--omitido { opacity: .5; border-style: dashed; }
.paso--omitido .paso__txt strong { text-decoration: line-through; }

.accesos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acceso { color: var(--tinta); text-decoration: none; min-height: 88px; display: grid; align-content: center; justify-items: start; gap: 4px; padding: 14px; text-align: left; background: var(--papel); border: 3px solid var(--linea); border-radius: var(--r-bloque); cursor: pointer; }
.acceso:hover { border-color: var(--tinta-3); }
.acceso strong { font-size: var(--t-l); }
.acceso span { font-size: var(--t-s); color: var(--tinta-2); }
/* Pacientes por diligenciar (RF-075) */
.acceso .acceso__cuenta { display: inline-grid; place-items: center; min-width: 26px; height: 26px; margin-left: 8px; padding: 0 7px;
  border-radius: 13px; background: var(--rojo); color: #fff; font-size: var(--t-s); font-weight: 800; vertical-align: middle; }
.acceso .acceso__cuenta[hidden] { display: none; }

/* Formularios pendientes de la unidad (RF-086) */
.pendientes { display: grid; gap: 8px; padding: 14px; background: #FFF3CC; border: 3px solid var(--amarillo); border-radius: var(--r-bloque); }
.pendientes h2 { margin: 0; font-size: var(--t-l); color: #7A5A00; }
.pendientes__item { display: grid; gap: 2px; padding: 12px; background: var(--papel); border-radius: var(--r-control); color: var(--tinta); text-decoration: none; }
.pendientes__item small { color: var(--tinta-2); }
.historial { display: grid; gap: 8px; }
.historial__item { display: flex; gap: 12px; align-items: center; padding: 12px; background: var(--papel); border-radius: var(--r-control); }
.historial__item div { flex: 1; min-width: 0; }
.historial__item small { color: var(--tinta-2); }

.form-motor { display: grid; gap: 16px; }
.form-seccion { display: grid; gap: 14px; padding: 0; min-width: 0; }
.op .form-seccion { background: var(--papel); border-radius: var(--r-bloque); padding: 16px; }
.detalle__col--fija { position: sticky; top: 20px; }
.op .control { min-height: 52px; font-size: 1.05rem; }
.op .btn { min-height: 56px; }
.gps-captura { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--linea); display: block; }
.fotos--sup { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.fotos > .vacio { grid-column: 1 / -1; }
.foto-mini { padding: 0; border: 0; background: none; border-radius: 6px; cursor: zoom-in; display: block; }
.foto-mini:focus-visible { outline: none; box-shadow: var(--foco); }
.foto-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--linea); display: block; }
.mini-fotos { display: flex; gap: 4px; align-items: center; }
.mini-fotos img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; background: var(--linea); display: block; flex: none; }
.mini-fotos--tabla img { width: 44px; height: 44px; }
.mini-fotos__mas { font-size: var(--t-s); font-weight: 700; color: var(--neutro); padding: 0 4px; }
.fotos-acc { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.fotos-acc input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* Visor de fotos a pantalla completa (RF-049) */
dialog.visor { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0;
  background: #0E1113; color: #fff; display: grid; grid-template-rows: auto 1fr; }
dialog.visor:not([open]) { display: none; }
dialog.visor::backdrop { background: #0E1113; }
.visor__barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 10px 16px; background: var(--asfalto); }
.visor__n { font-weight: 800; font-size: var(--t-l); color: var(--amarillo); }
.visor__info { display: flex; flex-direction: column; font-size: var(--t-s); line-height: 1.3; min-width: 0; flex: 1; }
.visor__info span { color: #C9CED1; overflow-wrap: anywhere; }
.visor__acc { display: flex; gap: 8px; flex-wrap: wrap; }
.visor__escena { position: relative; display: grid; place-items: center; min-height: 0; padding: 8px 56px; }
.visor__img { max-width: 100%; max-height: calc(100dvh - 110px); object-fit: contain; touch-action: pan-y; user-select: none; }
.visor__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff; font-size: 2.2rem; line-height: 1; cursor: pointer; }
.visor__nav:hover { background: rgba(255,255,255,.22); }
.visor__nav:focus-visible { outline: 3px solid var(--amarillo); }
.visor__nav--ant { left: 6px; }
.visor__nav--sig { right: 6px; }
@media (max-width: 560px) { .visor__escena { padding: 8px 4px; } .visor__nav { width: 36px; height: 52px; background: rgba(0,0,0,.45); } }

/* Etiqueta fija del punto de una unidad en el mapa (RF-048) */
.leaflet-tooltip.mk-etq { background: var(--asfalto); color: #fff; border: 0; border-radius: 4px; padding: 2px 6px;
  font: 700 11px/1.25 Overpass, system-ui, sans-serif; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.leaflet-tooltip.mk-etq::before { border-top-color: var(--asfalto); }

/* Botón 7 «Servicio cancelado» (RF-052) */
.paso--cancelar.paso--siguiente { background: var(--papel); border-color: var(--rojo); box-shadow: 0 6px 0 #7A1A14; }
.paso--cancelar.paso--siguiente:hover { background: var(--rojo-suave); }
.paso--cancelar.paso--siguiente .paso__n { background: var(--rojo); color: #fff; }
.paso--cancelar.paso--siguiente .paso__txt span { color: var(--rojo); }
.paso--cancelar.paso--hecho { border-color: var(--rojo-suave); background: #FDF5F4; }
.paso--cancelar.paso--hecho .paso__n { background: var(--rojo); }
.paso--cancelar.paso--hecho .paso__hora { color: var(--rojo); }

/* Formulario de la unidad en el detalle del CCO (RF-050) */
.form-tabla { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 4px 12px; margin: 8px 0 0; font-size: var(--t-s); }
.form-tabla dt { color: var(--tinta-2); }
.form-tabla dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.form-tabla__sec { grid-column: 1 / -1; margin-top: 8px; font-size: var(--t-xs); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-3); }
dialog.dlg--ancho { width: min(96vw, 720px); }
dialog.dlg--ancho .dlg__cuerpo { max-height: 70dvh; overflow: auto; }
.camara { position: relative; min-height: 96px; font-size: var(--t-l); }
.camara input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
/* RF-103: carga de fotos bloqueada sin conexión */
.btn--bloqueado { opacity: .45; cursor: not-allowed; filter: grayscale(.6); }
.btn--bloqueado input { cursor: not-allowed; }
.fotos-sin-red { margin: 6px 0 0; color: var(--rojo); font-weight: 700; }
.fotos-sin-red[hidden] { display: none; }

/* ---------------------------------------------------------------------
   SUPERVISOR (escritorio)
   --------------------------------------------------------------------- */
.sup { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.sup__rail {
  background: var(--asfalto); color: #fff; padding: 18px 14px;
  display: flex; flex-direction: column; gap: 22px; position: sticky; top: 0; height: 100vh;
}
.sup__marca { display: grid; gap: 10px; padding: 0 4px; }
.sup__marca strong { display: block; line-height: 1.1; }
.sup__marca > div > span { font-size: var(--t-xs); opacity: .7; }
.sup__icono { display: none; }
.sup__nav { display: grid; gap: 4px; }
.sup__nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--r-control);
  color: #D7DCDF; text-decoration: none; font-weight: 600;
}
.sup__nav a:hover { background: var(--asfalto-2); color: #fff; }
.sup__nav a[aria-current="page"] { background: var(--asfalto-2); color: #fff; box-shadow: inset 4px 0 0 var(--amarillo); }
.sup__nav .cuenta { background: var(--amarillo); color: var(--amarillo-tinta); font-size: var(--t-xs); font-weight: 800; padding: 1px 7px; border-radius: 99px; }
.sup__yo { margin-top: auto; padding: 12px; border-top: 1px solid var(--asfalto-3); font-size: var(--t-s); }
.sup__yo strong { display: block; }
.sup__yo span { opacity: .7; font-size: var(--t-xs); }
.sup__yo .btn { margin-top: 10px; min-height: 36px; width: 100%; background: transparent; color: #fff; border-color: var(--asfalto-3); }
.sup__main { padding: 26px 30px 40px; min-width: 0; display: grid; gap: 20px; align-content: start; }
.sup__cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sup__cab p { color: var(--tinta-2); margin-top: 4px; }

@media (max-width: 900px) {
  .sup { grid-template-columns: 1fr; }
  .sup__rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; }
  .sup__nav { display: flex; flex-wrap: wrap; }
  .sup__yo { margin: 0 0 0 auto; border: 0; padding: 0; display: flex; gap: 10px; align-items: center; }
  .sup__yo .btn { margin: 0; width: auto; }
  .sup__main { padding: 18px 16px 32px; }
  .sup__marca { display: flex; align-items: center; }
  .sup__logo { display: none; }
  .sup__icono { display: grid; }
}

.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; background: var(--papel); padding: 14px; border-radius: var(--r-bloque); box-shadow: var(--sombra); }
.filtros .campo { min-width: 140px; }
.filtros .campo--q { flex: 1; min-width: 200px; }
.segmento { display: inline-flex; border: 2px solid var(--linea); border-radius: var(--r-control); overflow: hidden; }
.segmento button { border: 0; background: var(--papel); padding: 0 14px; min-height: 40px; font-weight: 700; cursor: pointer; color: var(--tinta-2); }
.segmento button + button { border-left: 2px solid var(--linea); }
.segmento button[aria-pressed="true"] { background: var(--asfalto); color: #fff; }

.tabla-caja { background: var(--papel); border-radius: var(--r-bloque); box-shadow: var(--sombra); overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.tabla th { text-align: left; font-weight: 700; color: var(--tinta-2); padding: 12px 14px; border-bottom: 2px solid var(--linea); white-space: nowrap; }
.tabla td { padding: 10px 14px; border-bottom: 1px solid var(--concreto); vertical-align: middle; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover td { background: #F7F8F6; }
.tabla .rad { font-weight: 800; font-size: var(--t-m); }
.tabla .cod strong { display: block; }
.tabla .cod span { color: var(--tinta-2); font-size: var(--t-xs); }
.tabla .suave { color: var(--tinta-2); }
.paginas { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; color: var(--tinta-2); font-size: var(--t-s); }

.detalle-cab { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; background: var(--papel); border-radius: var(--r-bloque); padding: 20px 22px; box-shadow: var(--sombra); }
.detalle-cab__rad { font-size: var(--t-xxl); font-weight: 800; line-height: 1; }
.detalle-cab__cod { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.detalle-cab__cod strong { font-size: var(--t-l); }
.detalle-cab__acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
@media (max-width: 720px) { .detalle-cab { grid-template-columns: 1fr; } }

.detalle { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.detalle__col { display: grid; gap: 20px; }
@media (max-width: 1100px) { .detalle { grid-template-columns: 1fr; } }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; font-size: var(--t-s); }
.datos dt { color: var(--tinta-2); font-weight: 600; }
.datos dd { margin: 0; font-weight: 600; }

/* Pista de hitos de la unidad (secuencia) */
.pista { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-top: 10px; }
.pista__h { display: grid; gap: 4px; font-size: .7rem; color: var(--tinta-3); }
.pista__h::before { content: ""; height: 6px; border-radius: 3px; background: var(--linea); }
.pista__h--hecho { color: var(--verde); font-weight: 700; }
.pista__h--hecho::before { background: var(--verde); }
.asig { padding: 12px 0; border-top: 1px solid var(--concreto); }
.asig:first-of-type { border-top: 0; padding-top: 0; }
.asig__cab { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.asig__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/* Bitácora (cronológica) */
.bitacora { list-style: none; margin: 0 0 0 8px; padding: 0 0 0 18px; border-left: 3px solid var(--linea); display: grid; gap: 14px; }
.bitacora li { position: relative; padding-left: 6px; }
.bitacora li::before { content: ""; position: absolute; left: -27px; top: 4px; width: 13px; height: 13px; border-radius: 50%; background: var(--papel); border: 3px solid var(--tinta-3); }
.bitacora li[data-accion="ACEPTO"]::before, .bitacora li[data-accion="LLEGUE"]::before,
.bitacora li[data-accion="INICIO_TRASLADO"]::before, .bitacora li[data-accion="TERMINA_TRASLADO"]::before,
.bitacora li[data-accion="SUPERADO"]::before, .bitacora li[data-accion="DISPONIBLE"]::before { border-color: var(--verde); background: var(--verde); }
.bitacora li[data-accion="ASIGNACION"]::before { border-color: var(--amarillo); background: var(--amarillo); }
.bitacora li[data-accion="CIERRE"]::before, .bitacora li[data-accion="RECHAZADO"]::before { border-color: var(--rojo); background: var(--rojo); }
.bitacora__meta { font-size: var(--t-xs); color: var(--tinta-2); display: flex; gap: 10px; flex-wrap: wrap; }
.bitacora__meta strong { color: var(--tinta); }
.bitacora__txt { font-size: var(--t-s); white-space: pre-line; margin-top: 2px; overflow-wrap: anywhere; }

.unidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.unidad { background: var(--papel); border-radius: var(--r-bloque); padding: 16px; box-shadow: var(--sombra); display: grid; gap: 10px; border-top: 6px solid var(--verde); }
.unidad--ocupada { border-top-color: var(--amarillo); }
.unidad strong { font-size: var(--t-l); }
.unidad small { color: var(--tinta-2); }

.matriz th, .matriz td { text-align: center; }
.matriz th:first-child, .matriz td:first-child { text-align: left; }
.matriz td { cursor: default; }
.matriz tbody tr { cursor: default; }
.matriz .cat td { background: var(--concreto); font-weight: 800; text-align: left; }
.matriz .prod { display: inline-block; width: 18px; height: 18px; border-radius: 4px; background: var(--azul); }
.matriz .conf { color: var(--verde); font-weight: 800; font-size: 1.1rem; }
.leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--t-s); color: var(--tinta-2); align-items: center; }

.resultado-ubicacion { font-size: var(--t-s); padding: 10px 12px; border-radius: var(--r-control); background: var(--concreto); display: flex; gap: 12px; align-items: center; }
.resultado-ubicacion--ok { background: var(--verde-suave); }
.resultado-ubicacion--mal { background: var(--rojo-suave); color: var(--rojo); }
/* Perfil Solo consulta */
.insignia-consulta { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 4px; background: var(--azul); color: #fff; font-size: var(--t-xs); font-weight: 800; opacity: 1 !important; }
.roles-consulta { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.rol-consulta { display: flex; gap: 10px; align-items: center; padding: 8px 12px; border: 2px solid var(--linea); border-radius: var(--r-control); cursor: pointer; }
.rol-consulta input { width: 20px; height: 20px; accent-color: var(--azul); flex: none; }
.rol-consulta span { display: grid; line-height: 1.2; }
.rol-consulta strong { font-size: var(--t-s); }
.rol-consulta small { font-size: var(--t-xs); color: var(--tinta-2); }
.rol-consulta--on { border-color: var(--azul); background: var(--azul-suave); }
.rol-consulta--bloq { opacity: .55; cursor: not-allowed; }

/* Usuarios activos */
.conexion { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: var(--t-s); white-space: nowrap; }
.conexion::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--tinta-3); }
.conexion--EN_LINEA { color: var(--verde); }
.conexion--EN_LINEA::before { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-suave); }
.conexion--INACTIVO { color: #7A5A00; }
.conexion--INACTIVO::before { background: var(--amarillo); }
.conexion--CERRADA, .conexion--EXPIRADA { color: var(--tinta-3); }

/* Panel de vías */
.estado-via { display: inline-block; padding: 5px 12px; border-radius: 6px; font-weight: 800; font-size: var(--t-s); white-space: nowrap; }
.estado-via--OPERANDO { background: var(--verde); color: #fff; }
.estado-via--CIERRE_PARCIAL { background: var(--amarillo); color: var(--amarillo-tinta); }
.estado-via--PARE_Y_SIGA { background: #E8710A; color: #fff; }
.estado-via--CIERRE_TOTAL { background: var(--rojo); color: #fff; }
.estado-via__origen { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--tinta-2); max-width: 340px; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-chip { display: grid; text-align: left; gap: 1px; padding: 5px 10px; border: 2px solid var(--linea); border-radius: 6px; background: var(--papel); cursor: pointer; line-height: 1.15; }
.ev-chip:hover { border-color: var(--rojo); }
.ev-chip strong { font-size: var(--t-s); }
.ev-chip span { font-size: .7rem; color: var(--tinta-2); }
.vias__acc { white-space: nowrap; text-align: right; }
.tabla.vias td { vertical-align: top; }

/* Limpieza de pruebas (provisional) */
.sup__nav .cuenta--prov { background: var(--asfalto-3); color: #D7DCDF; }
.aviso-limpieza { border-left: 6px solid var(--rojo); display: grid; gap: 6px; }

/* Edición de trazabilidad y auditoría */
.bitacora__acc { margin-left: auto; display: inline-flex; gap: 10px; }
.lnk { background: none; border: 0; padding: 0; color: var(--azul); font-weight: 700; font-size: var(--t-xs); cursor: pointer; }
.lnk:hover { text-decoration: underline; }
.lnk--peligro { color: var(--rojo); }
.editado { padding: 0 6px; border-radius: 4px; background: #FFF3CC; color: #7A5A00; font-weight: 800; }
.editado--del { background: var(--rojo-suave); color: var(--rojo); }
.auditoria { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auditoria li { padding-bottom: 10px; border-bottom: 1px solid var(--concreto); }
.aud__antes, .aud__despues { margin-top: 4px; padding: 6px 10px; border-radius: 6px; font-size: var(--t-s); white-space: pre-line; overflow-wrap: anywhere; }
.aud__antes { background: var(--rojo-suave); text-decoration: line-through; text-decoration-color: rgba(179,38,30,.35); }
.aud__despues { background: var(--verde-suave); }

/* Subevento (COD/SUB) */
.subev { display: inline-block; margin-right: 4px; padding: 1px 7px; border-radius: 4px; background: var(--azul); color: #fff; font-size: var(--t-xs); font-weight: 800; }
.bitacora li[data-accion="SUBEVENTO"]::before { border-color: var(--azul); background: var(--azul); }

/* Widget «Unidades en evento» */
.enevento { display: grid; gap: 6px; width: 100%; order: 4; padding: 8px 10px; border-radius: var(--r-control); background: var(--asfalto-2); }
.enevento__tit { font-size: var(--t-xs); font-weight: 700; color: var(--amarillo); }
.enevento__lista { display: flex; flex-wrap: wrap; gap: 6px; }
.enevento__u { display: grid; gap: 1px; padding: 5px 9px; border-radius: 6px; background: var(--asfalto-3); color: #fff; line-height: 1.15; border-left: 4px solid var(--tinta-3); }
.enevento__u strong { font-size: .8rem; }
.enevento__u span { font-size: .7rem; opacity: .85; }
.enevento__u--propia { border-left-color: var(--amarillo); }
.enevento__u--acepto, .enevento__u--llegue, .enevento__u--inicio_traslado, .enevento__u--termina_traslado { border-left-color: #4FA3F7; }
.enevento__u--superado, .enevento__u--disponible { border-left-color: #6FD3A8; }
.enevento__u--rechazado { border-left-color: #FF8A80; }
.enevento__vacio { font-size: var(--t-xs); color: #D7DCDF; }
/* Dentro de la tarjeta del inicio (fondo claro) */
.servicio__cab .enevento { background: var(--concreto); }
.servicio__cab .enevento__tit { color: var(--tinta-2); }
.servicio__cab .enevento__u { background: var(--papel); color: var(--tinta); }

/* Unidad operativa del turno (operador) */
.turno-cab { display: grid; gap: 6px; }
.unidades-turno { display: grid; gap: 10px; }
.unidad-turno {
  display: grid; gap: 4px; text-align: left; min-height: 80px; padding: 14px 16px;
  background: var(--papel); border: 3px solid var(--linea); border-radius: var(--r-bloque); cursor: pointer;
}
.unidad-turno strong { font-size: var(--t-l); }
.unidad-turno span { font-size: var(--t-s); color: var(--tinta-2); }
.unidad-turno:hover { border-color: var(--amarillo); }
.unidad-turno--actual { border-color: var(--verde); background: var(--verde-suave); }
.unidad-turno--ocupada { border-style: dashed; }
.unidad-turno--ocupada span { color: var(--rojo); font-weight: 600; }
.unidad-turno:disabled { opacity: .6; cursor: not-allowed; }
.unidad-turno:disabled:hover { border-color: var(--linea); }
/* Compañeros en el vehículo (RF-071) */
.companeros { display: grid; gap: 8px; }
.companeros h2 { font-size: var(--t-l); margin: 0; }
.companeros__campos { display: grid; gap: 8px; }
.companeros__fila { display: flex; gap: 8px; align-items: end; }
.companeros__fila .campo { flex: 1; min-width: 0; }
.companeros__quitar { min-width: 48px; min-height: 48px; font-size: var(--t-l); background: var(--papel); border: 2px solid var(--linea); border-radius: var(--r-bloque); cursor: pointer; }
a.op__salir { display: inline-grid; place-items: center; text-decoration: none; padding: 0 6px; }

/* Número de radicado previsto (placa asfalto con borde preventivo) */
.rad-previsto {
  display: grid; justify-items: end; gap: 2px; padding: 8px 16px 7px;
  background: var(--asfalto); color: #fff; border-radius: var(--r-placa);
  box-shadow: inset 0 0 0 3px var(--asfalto), inset 0 0 0 5px var(--amarillo);
}
.rad-previsto__etq { font-size: var(--t-xs); font-weight: 700; color: var(--amarillo); }
.rad-previsto__n { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: .01em; }
.rad-previsto__nota { font-size: .68rem; opacity: .75; }

/* Selección múltiple de unidades */
.unis { display: grid; gap: 12px; }
.unis__grupo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.unis__tit { grid-column: 1 / -1; font-size: var(--t-xs); font-weight: 700; color: var(--tinta-2); }
.uni { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 8px 12px; border: 2px solid var(--linea); border-radius: var(--r-control); cursor: pointer; background: var(--papel); }
.uni:hover { border-color: var(--tinta-3); }
.uni input { width: 20px; height: 20px; accent-color: var(--verde); flex: none; }
.uni span { display: grid; line-height: 1.2; }
.uni strong { font-size: var(--t-s); }
.uni small { font-size: var(--t-xs); color: var(--tinta-2); }
.uni:has(input:checked) { border-color: var(--verde); background: var(--verde-suave); }
.uni--off { opacity: .55; cursor: not-allowed; }
.encabezado-prev { margin: 0; padding: 14px; background: var(--concreto); border-radius: var(--r-control); font: inherit; font-size: var(--t-s); white-space: pre-wrap; overflow-wrap: anywhere; }

.form-dinamico { display: grid; gap: 14px; padding: 16px; border: 2px dashed var(--amarillo); border-radius: var(--r-bloque); background: #FFFBEE; }
.form-dinamico h3 { display: flex; gap: 8px; align-items: center; }
.campo--na { opacity: .5; }

/* Pacientes de la ambulancia (RF-056) */
.paciente { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--linea); border-radius: var(--r-bloque); background: var(--papel); color: inherit; text-decoration: none; box-shadow: var(--sombra); }
.paciente:hover { border-color: var(--azul); }
.paciente__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }

/* ---------- Historia clínica de la brigada (RF-062) ---------- */
.hc { display: grid; gap: 12px; }
.hc-sec { background: var(--papel); border-radius: var(--r-bloque); box-shadow: var(--sombra); }
.hc-sec > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 700; cursor: pointer; list-style: none; min-height: 52px; }
.hc-sec > summary::-webkit-details-marker { display: none; }
.hc-sec > summary::after { content: "▾"; margin-left: auto; color: var(--tinta-3); transition: transform .15s; }
.hc-sec:not([open]) > summary::after { transform: rotate(-90deg); }
.hc-sec__n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--asfalto); color: var(--papel); font-size: var(--t-s); flex: none; }
.hc-sec__cuerpo { display: grid; gap: 14px; padding: 0 16px 16px; min-width: 0; }
.hc-sec__cuerpo h3 { font-size: var(--t-m); margin: 6px 0 0; }
.hc-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.hc-dato { font-size: var(--t-l); }
.hc-casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 12px; }
.hc-casilla { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 40px; }
.hc-casilla input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: var(--verde); }
.hc-casilla--texto { grid-column: 1 / -1; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.hc-casilla--texto label { font-size: var(--t-s); line-height: 1.45; flex: 1; }
.hc-casilla__det { flex: 1 1 100%; min-height: 40px; }
.hc-signos { display: grid; gap: 6px; overflow-x: auto; }
.hc-signos__fila { display: grid; grid-template-columns: minmax(78px, 1.3fr) repeat(5, minmax(42px, 1fr)); gap: 4px; align-items: center; }
.hc-signos__cab { font-size: .7rem; font-weight: 700; color: var(--tinta-2); }
.hc-signos__fila > span[role=rowheader] { font-size: var(--t-s); font-weight: 600; }
.hc-signos .control { min-height: 44px; padding: 4px 2px; text-align: center; min-width: 0; }
.hc-glasgow__total { font-weight: 800; font-size: var(--t-l); }
.hc-silueta { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; }
.hc-silueta__fig { margin: 0; display: grid; justify-items: center; gap: 4px; position: relative; }
.hc-silueta__svg { width: 150px; height: 300px; }
.hc-silueta__fig figcaption { font-weight: 700; font-size: var(--t-s); }
.hc-lado { font-size: 9px; font-weight: 700; fill: var(--tinta-3); }
.hc-zona { fill: #E6E8E4; stroke: var(--tinta-3); stroke-width: 1; cursor: pointer; }
.hc-zona:hover { fill: #F6E3A6; }
.hc-zona:focus-visible { outline: none; stroke: var(--azul); stroke-width: 2.5; }
.hc-zona--on { fill: var(--rojo); stroke: #7A1A14; }
.hc-zona--on:hover { fill: #C9463E; }
.firma { display: grid; gap: 6px; }
.firma__cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.firma__zona { border: 2px dashed var(--tinta-3); border-radius: var(--r-control); background: #FCFCFA; }
.firma__lienzo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; touch-action: none; cursor: crosshair; }
.firma__zona--previa { display: grid; place-items: center; min-height: 90px; border-style: solid; }
.firma__zona--previa img { max-width: 100%; max-height: 140px; }
.hc-firma { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--linea); border-radius: var(--r-bloque); }

/* Vista imprimible (formato OMT.GEM-FOR002, A4) */
.hcp { background: #8A9095; min-height: 100vh; padding: 16px; display: grid; justify-items: center; gap: 16px; }
.hcp-acciones { display: flex; gap: 10px; position: sticky; top: 8px; z-index: 2; }
.hcp-pag { background: #fff; color: #000; width: min(210mm, 100%); min-height: 297mm; padding: 10mm 12mm; box-shadow: 0 4px 18px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 6px; font-size: 10.5pt; }
.hcp-pag h3 { background: #1F3B57; color: #fff; font-size: 10.5pt; padding: 3px 8px; margin: 8px 0 4px; }
.hcp-pag h4 { font-size: 9.5pt; margin: 4px 0; }
.hcp-cab { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto; gap: 4px 10px; border: 1px solid #000; padding: 6px; align-items: center; }
.hcp-logo { grid-row: 1 / 3; width: 110px; height: auto; }
.hcp-titulo { display: grid; text-align: center; font-size: 10pt; }
.hcp-meta { border-collapse: collapse; width: 100%; font-size: 8pt; text-align: center; }
.hcp-meta th, .hcp-meta td { border: 1px solid #000; padding: 2px; }
.hcp-pie { margin-top: auto; padding-top: 6px; border-top: 1px solid #000; font-size: 8pt; text-align: right; }
.hcp-par { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; min-width: 0; }
.hcp-par b { font-size: 9pt; }
.hcp-val { flex: 1; min-width: 60px; border-bottom: 1px solid #000; min-height: 1.2em; overflow-wrap: anywhere; }
.hcp-x { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid #000; font-size: 9pt; font-weight: 800; line-height: 1; vertical-align: middle; }
.hcp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.hcp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 12px; }
.hcp-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.hcp-estado { display: grid; grid-template-columns: 1fr 1.3fr 1.2fr; gap: 10px; font-size: 9pt; }
.hcp-tabla { border-collapse: collapse; width: 100%; font-size: 8.5pt; }
.hcp-tabla th, .hcp-tabla td { border: 1px solid #000; padding: 2px 3px; text-align: center; }
.hcp-glas { display: grid; font-size: 8.5pt; margin-bottom: 4px; }
.hcp-lesiones { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.hcp-lesiones .hc-zona { cursor: default; }
.hcp-consent { display: grid; grid-template-columns: 18px 1fr; gap: 8px; text-align: justify; font-size: 9.5pt; }
.hcp-consent p { margin: 0; }
.hcp-firmas3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
.hcp-firma-caja { display: grid; gap: 4px; align-content: end; text-align: center; font-size: 9pt; }
.hcp-firma { width: 100%; height: 70px; object-fit: contain; border-bottom: 1px solid #000; }
.hcp-firma--vacia { height: 70px; }
.hcp-verif { font-size: 7.5pt; color: #333; margin-top: 10px; }
@media (max-width: 700px) {
  .hcp { padding: 8px; }
  .hcp-pag { min-height: 0; padding: 12px; }
  .hcp-estado, .hcp-grid2, .hcp-grid3, .hcp-firmas3, .hcp-lesiones { grid-template-columns: 1fr; }
}
@media print {
  @page { size: A4; margin: 0; }
  body { background: #fff; }
  .hcp { background: #fff; padding: 0; gap: 0; display: block; }
  .hcp-acciones, .aviso, .red-aviso { display: none !important; }
  .hcp-pag { box-shadow: none; width: 210mm; height: 297mm; break-after: page; }
  .hcp-pag:last-child { break-after: auto; }
}
.servicio--atendido .servicio__franja { background: repeating-linear-gradient(-45deg, var(--verde) 0 14px, var(--asfalto) 14px 28px); }
/* Radicado grande en la app de las unidades */
.servicio__rad { display: flex; flex-direction: column; line-height: 1.05; }
.servicio__rad span,
.servicio__rad strong { font-size: var(--t-xxl); font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.historial__rad { font-size: var(--t-l); font-weight: 800; }