/* =====================================================================
   TOKENS DE DISEÑO
   ===================================================================== */
:root{
  --rojo: #C1272D;
  --rojo-oscuro: #8E1A1F;
  --carbon: #1F2430;
  --carbon-2: #2B3140;
  --papel: #F5F2EC;
  --papel-2: #FFFFFF;
  --ambar: #F2A93B;
  --verde: #2F8F5B;
  --gris-linea: #D8D2C4;
  --texto: #23262E;
  --texto-suave: #6B6F7A;

  --fuente-display: 'Oswald', 'Segoe UI', sans-serif;
  --fuente-cuerpo: 'Inter', 'Segoe UI', sans-serif;

  --radio: 4px;
  --sombra: 0 2px 10px rgba(31,36,48,0.08);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--papel);
  color:var(--texto);
  font-family:var(--fuente-cuerpo);
  min-height:100vh;
  padding-bottom:60px;
}

/* franja de peligro - elemento de firma visual, evoca la cinta de vehículos de emergencia */
.franja-riesgo{
  height:10px;
  width:100%;
  background: repeating-linear-gradient(
    135deg,
    var(--rojo), var(--rojo) 18px,
    #fff 18px, #fff 36px
  );
}

/* =====================================================================
   ENCABEZADO
   ===================================================================== */
header.app-header{
  background:var(--carbon);
  color:#fff;
  padding:22px 28px 20px;
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}
.logo-caja{
  width:66px;
  height:66px;
  flex:none;
  border-radius:50%;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3px;
  box-shadow:0 0 0 2px var(--ambar);
}
.logo-caja img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
.titulo-caja h1{
  font-family:var(--fuente-display);
  font-weight:600;
  font-size:1.5rem;
  letter-spacing:.5px;
  margin:0 0 2px;
  text-transform:uppercase;
}
.titulo-caja p{
  margin:0;
  color:#C7CBD6;
  font-size:.85rem;
  letter-spacing:.4px;
}
.reloj{
  margin-left:auto;
  text-align:right;
  font-family:var(--fuente-display);
  color:var(--ambar);
  font-size:.95rem;
  letter-spacing:.5px;
}

/* =====================================================================
   BARRA DE TURNO / RESPONSABLE
   ===================================================================== */
.barra-turno{
  background:var(--papel-2);
  border-bottom:1px solid var(--gris-linea);
  padding:16px 28px;
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  align-items:flex-end;
}
.campo{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.campo label{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--texto-suave);
  font-weight:600;
}
.campo input[type=text], .campo select, .campo input[type=date]{
  padding:9px 11px;
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  font-family:var(--fuente-cuerpo);
  font-size:.9rem;
  min-width:190px;
  background:#fff;
  color:var(--texto);
}
.campo input:focus, .campo select:focus{
  outline:2px solid var(--rojo);
  outline-offset:1px;
}
.jornada-selector{
  display:flex;
  gap:8px;
}
.jornada-btn{
  padding:9px 16px;
  border:1px solid var(--gris-linea);
  background:#fff;
  border-radius:var(--radio);
  cursor:pointer;
  font-size:.85rem;
  font-weight:600;
  color:var(--texto-suave);
  display:flex;
  align-items:center;
  gap:6px;
}
.jornada-btn.activo-mañana{
  background:#FFF4DD;
  border-color:var(--ambar);
  color:#8A5B00;
}
.jornada-btn.activo-noche{
  background:#26304A;
  border-color:var(--carbon-2);
  color:#fff;
}

/* =====================================================================
   CONTENEDOR PRINCIPAL
   ===================================================================== */
main{
  max-width:1100px;
  margin:0 auto;
  padding:26px 28px 0;
}
.seccion-titulo{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:14px;
  flex-wrap:wrap;
  gap:10px;
}
.seccion-titulo h2{
  font-family:var(--fuente-display);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:1.15rem;
  margin:0;
  color:var(--carbon);
  border-left:5px solid var(--rojo);
  padding-left:10px;
}
.btn{
  border:none;
  border-radius:var(--radio);
  padding:10px 18px;
  font-family:var(--fuente-cuerpo);
  font-weight:600;
  font-size:.85rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.btn-primario{background:var(--rojo);color:#fff;}
.btn-primario:hover{background:var(--rojo-oscuro);}
.btn-secundario{background:#fff;color:var(--carbon);border:1px solid var(--gris-linea);}
.btn-secundario:hover{border-color:var(--carbon);}
.btn-verde{background:var(--verde);color:#fff;}
.btn-texto{background:none;color:var(--rojo);padding:6px 4px;}
.btn-peligro{background:#fff;color:var(--rojo);border:1px solid var(--rojo);}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* =====================================================================
   PANTALLA INICIAL: SELECCIÓN DE MÓDULO
   ===================================================================== */
.intro-inicio{
  text-align:center;
  max-width:560px;
  margin:0 auto 30px;
  color:var(--texto-suave);
  font-size:.95rem;
}

/* ---- Tablero de estado del día ---- */
.tablero-encabezado{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.tablero-encabezado h2{
  font-family:var(--fuente-display);
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:1.1rem;
  margin:0;
  color:var(--carbon);
  border-left:5px solid var(--rojo);
  padding-left:10px;
}
.tablero-fecha{
  font-size:.82rem;
  color:var(--texto-suave);
  text-transform:capitalize;
}
.resumen-tablero{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.chip-resumen{
  padding:8px 14px;
  border-radius:20px;
  font-size:.82rem;
  font-weight:600;
}
.chip-resumen.chip-ok{ background:#E4F5EC; color:var(--verde); }
.chip-resumen.chip-alerta{ background:#FBE7E7; color:var(--rojo); }

.tabla-tablero{ margin-bottom:38px; }
.tabla-tablero tr.fila-pendiente td{ background:#FFF6ED; }
.tabla-tablero td{ vertical-align:middle; }
.pill-jornadas{
  display:flex;
  flex-direction:column;
  gap:5px;
  align-items:flex-start;
}
.pill-jornada{ white-space:nowrap; }
.pill-clicable{ cursor:pointer; }
.pill-clicable:hover{ filter:brightness(0.94); text-decoration:underline; }

.grid-modulos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
  max-width:820px;
  margin:10px auto 40px;
}
.tarjeta-modulo{
  background:var(--papel-2);
  border:1px solid var(--gris-linea);
  border-top:6px solid var(--rojo);
  border-radius:6px;
  padding:34px 26px;
  text-align:center;
  cursor:pointer;
  box-shadow:var(--sombra);
  transition:transform .15s ease, box-shadow .15s ease;
}
.tarjeta-modulo:nth-child(2){ border-top-color:var(--carbon-2); }
.tarjeta-modulo:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 22px rgba(31,36,48,0.14);
}
.tarjeta-modulo .icono-modulo{
  font-size:2.4rem;
  margin-bottom:10px;
}
.tarjeta-modulo h2{
  font-family:var(--fuente-display);
  text-transform:uppercase;
  letter-spacing:.4px;
  font-size:1.15rem;
  margin:0 0 10px;
  color:var(--carbon);
}
.tarjeta-modulo p{
  margin:0;
  color:var(--texto-suave);
  font-size:.85rem;
  line-height:1.5;
}
.tarjeta-modulo .entrar-modulo{
  display:inline-block;
  margin-top:16px;
  font-size:.78rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:var(--rojo);
}

/* =====================================================================
   TARJETAS DE VEHÍCULOS
   ===================================================================== */
.grid-vehiculos{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:16px;
  margin-bottom:36px;
}
.tarjeta-vehiculo{
  background:var(--papel-2);
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  padding:16px;
  cursor:pointer;
  position:relative;
  box-shadow:var(--sombra);
  transition:transform .12s ease;
  border-top:4px solid var(--rojo);
}
.tarjeta-vehiculo:hover{transform:translateY(-2px);}
.tarjeta-vehiculo .placa{
  font-family:var(--fuente-display);
  font-size:1.3rem;
  letter-spacing:1px;
  color:var(--carbon);
}
.tarjeta-vehiculo .nombre{
  color:var(--texto-suave);
  font-size:.85rem;
  margin:2px 0 12px;
}
.tarjeta-vehiculo .meta{
  font-size:.75rem;
  color:var(--texto-suave);
  display:flex;
  justify-content:space-between;
  border-top:1px dashed var(--gris-linea);
  padding-top:8px;
}
.tarjeta-vehiculo .eliminar-vehiculo{
  position:absolute;
  top:10px;
  right:10px;
  background:none;
  border:none;
  color:var(--texto-suave);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.tarjeta-vehiculo .eliminar-vehiculo:hover{color:var(--rojo);}
.tarjeta-vehiculo .editar-vehiculo{
  position:absolute;
  top:10px;
  right:34px;
  background:none;
  border:none;
  color:var(--texto-suave);
  cursor:pointer;
  font-size:1rem;
  line-height:1;
}
.tarjeta-vehiculo .editar-vehiculo:hover{color:var(--rojo);}
.tarjeta-nueva{
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed var(--gris-linea);
  border-radius:var(--radio);
  color:var(--texto-suave);
  min-height:110px;
  cursor:pointer;
  font-weight:600;
  font-size:.9rem;
}
.tarjeta-nueva:hover{border-color:var(--rojo);color:var(--rojo);}

.nota-ayuda{
  font-size:.83rem;
  color:var(--texto-suave);
  background:#FFF8EA;
  border:1px solid #F0DFB0;
  border-radius:var(--radio);
  padding:10px 14px;
  margin:0 0 16px;
}
/* =====================================================================
   GRUPOS / GAVETAS
   ===================================================================== */
.grupo-card{
  background:var(--papel-2);
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  margin-bottom:16px;
  overflow:hidden;
}
.grupo-header{
  display:flex;
  align-items:center;
  gap:10px;
  background:#F4EEDF;
  padding:10px 14px;
  border-bottom:1px solid var(--gris-linea);
  border-left:4px solid var(--ambar);
}
.grupo-header input.grupo-nombre-input{
  flex:1;
  border:none;
  background:transparent;
  font-family:var(--fuente-display);
  font-size:1rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--carbon);
  padding:4px 2px;
}
.grupo-header input.grupo-nombre-input:focus{ outline:1px solid var(--rojo); background:#fff; border-radius:2px; }
.grupo-body{ padding:14px; }
.grupo-form-item{
  display:grid;
  grid-template-columns:2fr 90px auto;
  gap:8px;
  margin-bottom:12px;
}
.grupo-form-item input{
  padding:8px 10px;
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  font-family:var(--fuente-cuerpo);
  font-size:.85rem;
}
.grupo-vacio{ font-size:.82rem; color:var(--texto-suave); margin:0; }

.grupo-checklist{ margin-bottom:22px; }
.grupo-checklist-titulo{
  font-family:var(--fuente-display);
  text-transform:uppercase;
  letter-spacing:.4px;
  font-size:.92rem;
  color:var(--carbon);
  background:#F4EEDF;
  border-left:4px solid var(--ambar);
  padding:8px 12px;
  border-radius:var(--radio) var(--radio) 0 0;
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  user-select:none;
}
.grupo-checklist-titulo:hover{ background:#EFE6CE; }
.grupo-checklist-titulo .nombre-grupo-titulo{ flex:1; }
.grupo-checklist-titulo .conteo-grupo-titulo{
  font-family:var(--fuente-cuerpo);
  text-transform:none;
  letter-spacing:0;
  font-size:.75rem;
  font-weight:600;
  color:var(--texto-suave);
}
.flecha-grupo{
  display:inline-flex;
  transition:transform .18s ease;
  font-size:.7rem;
  color:var(--rojo);
}
.grupo-checklist-titulo.colapsado{ border-radius:var(--radio); }
.grupo-checklist-titulo.colapsado .flecha-grupo{ transform:rotate(-90deg); }
.grupo-checklist-contenido.oculto{ display:none; }
.grupo-checklist table.lista-items{ border-radius:0 0 var(--radio) var(--radio); margin-bottom:0; }

.vacio{
  padding:34px;
  text-align:center;
  color:var(--texto-suave);
  background:#fff;
  border:1px dashed var(--gris-linea);
  border-radius:var(--radio);
  margin-bottom:30px;
}

/* =====================================================================
   VISTA DETALLE DE VEHÍCULO
   ===================================================================== */
#vista-detalle{display:none;}
#vista-lista{display:none;}
.volver{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--rojo);
  cursor:pointer;
  font-weight:600;
  font-size:.85rem;
  margin-bottom:14px;
  background:none;
  border:none;
  padding:0;
}
.encabezado-vehiculo{
  background:#fff;
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  padding:18px 20px;
  margin-bottom:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.encabezado-vehiculo h2{
  font-family:var(--fuente-display);
  margin:0 0 4px;
  font-size:1.4rem;
  letter-spacing:.5px;
}
.encabezado-vehiculo .sub{color:var(--texto-suave);font-size:.85rem;}

.form-item{
  background:#fff;
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  padding:16px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr auto;
  gap:10px;
  margin-bottom:18px;
  align-items:end;
}
.form-item .campo{min-width:0;}
.form-item input, .form-item select{width:100%;min-width:0;}

table.lista-items{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  overflow:hidden;
  margin-bottom:30px;
}
table.lista-items th{
  background:var(--carbon);
  color:#fff;
  text-align:left;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:10px 12px;
}
table.lista-items td{
  padding:10px 12px;
  border-top:1px solid var(--gris-linea);
  font-size:.88rem;
  vertical-align:middle;
}
table.lista-items tr:nth-child(even) td{background:#FAF8F4;}
.etiqueta-estado{
  display:inline-block;
  padding:3px 10px;
  border-radius:20px;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.estado-bueno{background:#E4F5EC;color:var(--verde);}
.estado-malo{background:#FBE7E7;color:var(--rojo);}
.estado-falta{background:#FFF2DC;color:#8A5B00;}
select.select-estado{
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  padding:6px 8px;
  font-size:.82rem;
  background:#fff;
}
.cantidad-input{
  width:60px;
  padding:6px 8px;
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  text-align:center;
}
.obs-input{
  width:100%;
  padding:6px 8px;
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  font-size:.82rem;
}
.icono-btn{
  background:none;border:none;cursor:pointer;color:var(--texto-suave);font-size:1rem;
}
.icono-btn:hover{color:var(--rojo);}

.barra-guardar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  background:#fff;
  border:1px solid var(--gris-linea);
  border-radius:var(--radio);
  padding:16px 18px;
  margin-bottom:30px;
}
.resumen-conteo{
  display:flex;
  gap:16px;
  font-size:.8rem;
  color:var(--texto-suave);
  flex-wrap:wrap;
}
.resumen-conteo b{color:var(--carbon);}

/* Historial */
.historial-item{
  background:#fff;
  border:1px solid var(--gris-linea);
  border-left:4px solid var(--carbon);
  border-radius:var(--radio);
  padding:12px 16px;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  font-size:.85rem;
}
.historial-item.jornada-mañana{border-left-color:var(--ambar);}
.historial-item.jornada-noche{border-left-color:#26304A;}
.historial-item .info b{display:block;color:var(--carbon);font-size:.9rem;}
.historial-item .info span{color:var(--texto-suave);}

footer.app-footer{
  text-align:center;
  color:var(--texto-suave);
  font-size:.78rem;
  padding:30px 20px 10px;
}

/* Modal */
.overlay{
  position:fixed;inset:0;background:rgba(20,22,28,.55);
  display:none;align-items:center;justify-content:center;z-index:50;padding:16px;
}
.overlay.abierto{display:flex;}
.modal{
  background:#fff;border-radius:6px;padding:24px;max-width:420px;width:100%;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
}
.modal h3{
  font-family:var(--fuente-display);
  margin:0 0 16px;text-transform:uppercase;letter-spacing:.4px;color:var(--carbon);
  border-left:5px solid var(--rojo);padding-left:10px;
}
.modal .campo{margin-bottom:14px;width:100%;}
.modal .campo input,.modal .campo select{width:100%;}
.modal-acciones{display:flex;justify-content:flex-end;gap:10px;margin-top:6px;}

.toast{
  position:fixed;bottom:22px;left:50%;transform:translateX(-50%);
  background:var(--carbon);color:#fff;padding:12px 20px;border-radius:6px;
  font-size:.85rem;box-shadow:var(--sombra);z-index:100;display:none;
}
.toast.mostrar{display:block;}

/* =====================================================================
   LOGIN
   ===================================================================== */
.modal-login{max-width:380px;text-align:center;}
.modal-login .logo-login{width:70px;height:70px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--ambar);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;padding:3px;}
.modal-login .logo-login img{width:100%;height:100%;object-fit:contain;border-radius:50%;}
.modal-login h3{border-left:none;padding-left:0;text-align:center;}
.error-login{color:var(--rojo);font-size:.82rem;min-height:18px;margin:-6px 0 8px;}
.demo-login{font-size:.75rem;color:var(--texto-suave);margin-top:10px;}
#overlay-login{
  background:
    linear-gradient(180deg, rgba(20,22,28,.72), rgba(20,22,28,.85)),
    url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%20900%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22cielo%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%232B3140%22%2F%3E%3Cstop%20offset%3D%2260%25%22%20stop-color%3D%22%231F2430%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%23161A22%22%2F%3E%3C%2FlinearGradient%3E%3ClinearGradient%20id%3D%22pisograd%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%25%22%20stop-color%3D%22%2312151c%22%2F%3E%3Cstop%20offset%3D%22100%25%22%20stop-color%3D%22%230c0e13%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%221600%22%20height%3D%22900%22%20fill%3D%22url%28%23cielo%29%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22700%22%20width%3D%221600%22%20height%3D%22200%22%20fill%3D%22url%28%23pisograd%29%22%2F%3E%3C%21--%20linea%20de%20horizonte%20con%20textura%20de%20estacion%20--%3E%3Crect%20x%3D%220%22%20y%3D%22690%22%20width%3D%221600%22%20height%3D%2214%22%20fill%3D%22%233a4256%22%20opacity%3D%220.5%22%2F%3E%3C%21--%20pared%20de%20fondo%20tipo%20estacion%20de%20bomberos%20--%3E%3Crect%20x%3D%220%22%20y%3D%22120%22%20width%3D%221600%22%20height%3D%22580%22%20fill%3D%22%23252b38%22%20opacity%3D%220.55%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%22120%22%20width%3D%221600%22%20height%3D%2210%22%20fill%3D%22%23C1272D%22%20opacity%3D%220.5%22%2F%3E%3C%21--%20puerta%20grande%20de%20la%20estacion%20--%3E%3Crect%20x%3D%2260%22%20y%3D%22180%22%20width%3D%22430%22%20height%3D%22510%22%20rx%3D%2214%22%20fill%3D%22%231a1f29%22%20opacity%3D%220.65%22%2F%3E%3Cg%20opacity%3D%220.35%22%20stroke%3D%22%234a5266%22%20stroke-width%3D%223%22%3E%3Cline%20x1%3D%22150%22%20y1%3D%22180%22%20x2%3D%22150%22%20y2%3D%22690%22%2F%3E%3Cline%20x1%3D%22240%22%20y1%3D%22180%22%20x2%3D%22240%22%20y2%3D%22690%22%2F%3E%3Cline%20x1%3D%22330%22%20y1%3D%22180%22%20x2%3D%22330%22%20y2%3D%22690%22%2F%3E%3Cline%20x1%3D%22420%22%20y1%3D%22180%22%20x2%3D%22420%22%20y2%3D%22690%22%2F%3E%3C%2Fg%3E%3C%21--%20CAMION%20DE%20BOMBEROS%20--%3E%3Cg%20transform%3D%22translate%28870%2C430%29%22%3E%3C%21--%20sombra%20--%3E%3Cellipse%20cx%3D%22230%22%20cy%3D%22272%22%20rx%3D%22330%22%20ry%3D%2226%22%20fill%3D%22%23000%22%20opacity%3D%220.35%22%2F%3E%3C%21--%20cuerpo%20principal%20--%3E%3Crect%20x%3D%220%22%20y%3D%2260%22%20width%3D%22560%22%20height%3D%22150%22%20rx%3D%2218%22%20fill%3D%22%23C1272D%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%2260%22%20width%3D%22560%22%20height%3D%2242%22%20fill%3D%22%238E1A1F%22%2F%3E%3C%21--%20cabina%20--%3E%3Cpath%20d%3D%22M420%2C60%20L420%2C-40%20Q420%2C-70%20452%2C-70%20L560%2C-70%20Q590%2C-70%20590%2C-40%20L590%2C60%20Z%22%20fill%3D%22%23C1272D%22%2F%3E%3Cpath%20d%3D%22M420%2C60%20L420%2C-40%20Q420%2C-70%20452%2C-70%20L560%2C-70%20Q590%2C-70%20590%2C-40%20L590%2C60%20Z%22%20fill%3D%22none%22%20stroke%3D%22%238E1A1F%22%20stroke-width%3D%224%22%2F%3E%3C%21--%20ventana%20--%3E%3Crect%20x%3D%22450%22%20y%3D%22-45%22%20width%3D%22120%22%20height%3D%2260%22%20rx%3D%228%22%20fill%3D%22%23BFD8EA%22%20opacity%3D%220.85%22%2F%3E%3C%21--%20franja%20amarilla%20reflectiva%20--%3E%3Crect%20x%3D%220%22%20y%3D%22150%22%20width%3D%22560%22%20height%3D%2216%22%20fill%3D%22%23F2A93B%22%2F%3E%3C%21--%20escalera%20%2F%20equipo%20lateral%20--%3E%3Crect%20x%3D%2230%22%20y%3D%2295%22%20width%3D%22360%22%20height%3D%2245%22%20rx%3D%226%22%20fill%3D%22%238E1A1F%22%20opacity%3D%220.7%22%2F%3E%3Cg%20stroke%3D%22%23F2A93B%22%20stroke-width%3D%223%22%20opacity%3D%220.8%22%3E%3Cline%20x1%3D%2245%22%20y1%3D%2295%22%20x2%3D%2245%22%20y2%3D%22140%22%2F%3E%3Cline%20x1%3D%2285%22%20y1%3D%2295%22%20x2%3D%2285%22%20y2%3D%22140%22%2F%3E%3Cline%20x1%3D%22125%22%20y1%3D%2295%22%20x2%3D%22125%22%20y2%3D%22140%22%2F%3E%3Cline%20x1%3D%22165%22%20y1%3D%2295%22%20x2%3D%22165%22%20y2%3D%22140%22%2F%3E%3Cline%20x1%3D%22205%22%20y1%3D%2295%22%20x2%3D%22205%22%20y2%3D%22140%22%2F%3E%3Cline%20x1%3D%22245%22%20y1%3D%2295%22%20x2%3D%22245%22%20y2%3D%22140%22%2F%3E%3Cline%20x1%3D%22285%22%20y1%3D%2295%22%20x2%3D%22285%22%20y2%3D%22140%22%2F%3E%3Cline%20x1%3D%22325%22%20y1%3D%2295%22%20x2%3D%22325%22%20y2%3D%22140%22%2F%3E%3Cline%20x1%3D%22365%22%20y1%3D%2295%22%20x2%3D%22365%22%20y2%3D%22140%22%2F%3E%3C%2Fg%3E%3C%21--%20luces%20--%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%22560%22%20height%3D%2218%22%20rx%3D%226%22%20fill%3D%22%2326304A%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2239%22%20r%3D%229%22%20fill%3D%22%23F2A93B%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2239%22%20r%3D%229%22%20fill%3D%22%23C1272D%22%2F%3E%3Ccircle%20cx%3D%22140%22%20cy%3D%2239%22%20r%3D%229%22%20fill%3D%22%23F2A93B%22%2F%3E%3C%21--%20ruedas%20--%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22220%22%20r%3D%2246%22%20fill%3D%22%23141821%22%2F%3E%3Ccircle%20cx%3D%22110%22%20cy%3D%22220%22%20r%3D%2220%22%20fill%3D%22%234a5266%22%2F%3E%3Ccircle%20cx%3D%22470%22%20cy%3D%22220%22%20r%3D%2246%22%20fill%3D%22%23141821%22%2F%3E%3Ccircle%20cx%3D%22470%22%20cy%3D%22220%22%20r%3D%2220%22%20fill%3D%22%234a5266%22%2F%3E%3C%2Fg%3E%3C%21--%20CAJAS%20%2F%20EQUIPO%20EN%20EL%20SUELO%20%28elementos%20de%20inventario%29%20--%3E%3Cg%20transform%3D%22translate%281000%2C640%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2290%22%20height%3D%2270%22%20rx%3D%226%22%20fill%3D%22%233D5A99%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2290%22%20height%3D%2218%22%20fill%3D%22%2326304A%22%2F%3E%3Ctext%20x%3D%2245%22%20y%3D%2250%22%20font-family%3D%22Arial%22%20font-size%3D%2226%22%20fill%3D%22%23fff%22%20text-anchor%3D%22middle%22%20opacity%3D%220.85%22%3E%E2%9C%93%3C%2Ftext%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%281105%2C655%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2270%22%20height%3D%2255%22%20rx%3D%226%22%20fill%3D%22%232F8F5B%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2270%22%20height%3D%2215%22%20fill%3D%22%231f5f3c%22%2F%3E%3Ctext%20x%3D%2235%22%20y%3D%2240%22%20font-family%3D%22Arial%22%20font-size%3D%2222%22%20fill%3D%22%23fff%22%20text-anchor%3D%22middle%22%20opacity%3D%220.85%22%3E%E2%9C%93%3C%2Ftext%3E%3C%2Fg%3E%3Cg%20transform%3D%22translate%281185%2C635%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2260%22%20height%3D%2275%22%20rx%3D%226%22%20fill%3D%22%23F2A93B%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23a86f16%22%2F%3E%3C%2Fg%3E%3C%21--%20BOMBERO%201%3A%20de%20pie%2C%20con%20el%20tablero%20de%20inventario%20--%3E%3Cg%20transform%3D%22translate%28560%2C470%29%22%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%22298%22%20rx%3D%2270%22%20ry%3D%2214%22%20fill%3D%22%23000%22%20opacity%3D%220.3%22%2F%3E%3C%21--%20piernas%20--%3E%3Crect%20x%3D%2220%22%20y%3D%22200%22%20width%3D%2226%22%20height%3D%2295%22%20rx%3D%2210%22%20fill%3D%22%2326304A%22%2F%3E%3Crect%20x%3D%2262%22%20y%3D%22200%22%20width%3D%2226%22%20height%3D%2295%22%20rx%3D%2210%22%20fill%3D%22%2326304A%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%22288%22%20width%3D%2238%22%20height%3D%2214%22%20rx%3D%226%22%20fill%3D%22%23141821%22%2F%3E%3Crect%20x%3D%2256%22%20y%3D%22288%22%20width%3D%2238%22%20height%3D%2214%22%20rx%3D%226%22%20fill%3D%22%23141821%22%2F%3E%3C%21--%20torso%20%2F%20chaqueta%20de%20turnout%20--%3E%3Crect%20x%3D%228%22%20y%3D%22105%22%20width%3D%2294%22%20height%3D%22105%22%20rx%3D%2218%22%20fill%3D%22%23C1272D%22%2F%3E%3Crect%20x%3D%228%22%20y%3D%22150%22%20width%3D%2294%22%20height%3D%2218%22%20fill%3D%22%23F2A93B%22%2F%3E%3C%21--%20brazo%20sosteniendo%20el%20tablero%20--%3E%3Crect%20x%3D%2286%22%20y%3D%22120%22%20width%3D%2224%22%20height%3D%2280%22%20rx%3D%2212%22%20fill%3D%22%238E1A1F%22%2F%3E%3C%21--%20tablero%20%2F%20checklist%20--%3E%3Cg%20transform%3D%22translate%2896%2C150%29%20rotate%288%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2270%22%20height%3D%2290%22%20rx%3D%226%22%20fill%3D%22%23F5F2EC%22%20stroke%3D%22%238E1A1F%22%20stroke-width%3D%223%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2220%22%20x2%3D%2258%22%20y2%3D%2220%22%20stroke%3D%22%236B6F7A%22%20stroke-width%3D%224%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2238%22%20x2%3D%2258%22%20y2%3D%2238%22%20stroke%3D%22%236B6F7A%22%20stroke-width%3D%224%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2256%22%20x2%3D%2258%22%20y2%3D%2256%22%20stroke%3D%22%236B6F7A%22%20stroke-width%3D%224%22%2F%3E%3Cline%20x1%3D%2212%22%20y1%3D%2274%22%20x2%3D%2240%22%20y2%3D%2274%22%20stroke%3D%22%236B6F7A%22%20stroke-width%3D%224%22%2F%3E%3Cpath%20d%3D%22M8%2C20%20l5%2C6%20l9%2C-11%22%20stroke%3D%22%232F8F5B%22%20stroke-width%3D%224%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2C38%20l5%2C6%20l9%2C-11%22%20stroke%3D%22%232F8F5B%22%20stroke-width%3D%224%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%21--%20otro%20brazo%20--%3E%3Crect%20x%3D%22-14%22%20y%3D%22120%22%20width%3D%2224%22%20height%3D%2270%22%20rx%3D%2212%22%20fill%3D%22%23C1272D%22%2F%3E%3C%21--%20cabeza%20y%20casco%20--%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%2280%22%20r%3D%2234%22%20fill%3D%22%23e8c39e%22%2F%3E%3Cpath%20d%3D%22M15%2C75%20A40%2C34%200%200%201%2095%2C75%20L95%2C60%20A40%2C34%200%200%200%2015%2C60%20Z%22%20fill%3D%22%23F2A93B%22%2F%3E%3Cellipse%20cx%3D%2255%22%20cy%3D%2258%22%20rx%3D%2242%22%20ry%3D%2216%22%20fill%3D%22%23F2A93B%22%2F%3E%3Crect%20x%3D%2247%22%20y%3D%2240%22%20width%3D%2216%22%20height%3D%2214%22%20rx%3D%224%22%20fill%3D%22%238A5B00%22%2F%3E%3C%2Fg%3E%3C%21--%20BOMBERO%202%3A%20agachado%20revisando%20una%20caja%20de%20equipo%20--%3E%3Cg%20transform%3D%22translate%28760%2C560%29%22%3E%3Cellipse%20cx%3D%2260%22%20cy%3D%22196%22%20rx%3D%2280%22%20ry%3D%2214%22%20fill%3D%22%23000%22%20opacity%3D%220.3%22%2F%3E%3C%21--%20pierna%20doblada%20--%3E%3Cpath%20d%3D%22M20%2C80%20Q10%2C140%2030%2C190%20L60%2C190%20Q50%2C140%2060%2C90%20Z%22%20fill%3D%22%2326304A%22%2F%3E%3Cpath%20d%3D%22M80%2C80%20Q95%2C130%2090%2C190%20L120%2C190%20Q120%2C130%20105%2C85%20Z%22%20fill%3D%22%2326304A%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%22184%22%20width%3D%2242%22%20height%3D%2214%22%20rx%3D%226%22%20fill%3D%22%23141821%22%2F%3E%3Crect%20x%3D%2286%22%20y%3D%22184%22%20width%3D%2242%22%20height%3D%2214%22%20rx%3D%226%22%20fill%3D%22%23141821%22%2F%3E%3C%21--%20torso%20inclinado%20--%3E%3Cpath%20d%3D%22M10%2C20%20Q60%2C-10%20120%2C30%20L110%2C95%20Q60%2C75%2020%2C90%20Z%22%20fill%3D%22%23C1272D%22%2F%3E%3Crect%20x%3D%2220%22%20y%3D%2245%22%20width%3D%2290%22%20height%3D%2214%22%20fill%3D%22%23F2A93B%22%20opacity%3D%220.9%22%2F%3E%3C%21--%20brazo%20hacia%20la%20caja%20--%3E%3Crect%20x%3D%2295%22%20y%3D%2255%22%20width%3D%2260%22%20height%3D%2220%22%20rx%3D%2210%22%20fill%3D%22%238E1A1F%22%20transform%3D%22rotate%2818%2095%2065%29%22%2F%3E%3C%21--%20cabeza%20y%20casco%20--%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2215%22%20r%3D%2230%22%20fill%3D%22%23e8c39e%22%2F%3E%3Cellipse%20cx%3D%2230%22%20cy%3D%22-3%22%20rx%3D%2236%22%20ry%3D%2214%22%20fill%3D%22%23F2A93B%22%2F%3E%3Cpath%20d%3D%22M0%2C10%20A30%2C26%200%200%201%2060%2C10%20L60%2C-2%20A30%2C26%200%200%200%200%2C-2%20Z%22%20fill%3D%22%23F2A93B%22%2F%3E%3C%2Fg%3E%3C%21--%20caja%20que%20revisa%20el%20bombero%202%20--%3E%3Cg%20transform%3D%22translate%28895%2C635%29%22%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2285%22%20height%3D%2265%22%20rx%3D%226%22%20fill%3D%22%236B6F7A%22%2F%3E%3Crect%20x%3D%220%22%20y%3D%220%22%20width%3D%2285%22%20height%3D%2216%22%20fill%3D%22%234a5266%22%2F%3E%3Cpath%20d%3D%22M20%2C40%20l8%2C10%20l18%2C-20%22%20stroke%3D%22%232F8F5B%22%20stroke-width%3D%225%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fg%3E%3C%21--%20franja%20de%20peligro%20decorativa%20abajo%2C%20coherente%20con%20la%20identidad%20visual%20de%20la%20app%20--%3E%3Crect%20x%3D%220%22%20y%3D%22885%22%20width%3D%221600%22%20height%3D%2215%22%20fill%3D%22%23C1272D%22%2F%3E%3Cg%20opacity%3D%220.9%22%3E%3Crect%20x%3D%220%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%22120%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%22240%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%22360%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%22480%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%22600%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%22720%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%22840%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%22960%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%221080%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%221200%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%221320%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%221440%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3Crect%20x%3D%221560%22%20y%3D%22885%22%20width%3D%2260%22%20height%3D%2215%22%20fill%3D%22%23F5F2EC%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') center/cover no-repeat,
    var(--carbon);
}

/* =====================================================================
   BARRA DE SESIÓN / NAV ADMIN
   ===================================================================== */
.barra-sesion{
  background:var(--carbon-2); color:#fff; padding:8px 28px; display:flex;
  align-items:center; gap:14px; flex-wrap:wrap; font-size:.82rem;
}
.chip-rol{
  padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.4px;
}
.chip-rol-admin{background:var(--ambar); color:#5A3B00;}
.chip-rol-conductor{background:#2F8F5B; color:#fff;}
.chip-rol-tripulante{background:#3D5A99; color:#fff;}
.nav-admin{display:flex; gap:8px; flex-wrap:wrap; margin-left:8px;}
.nav-admin button{
  background:none; border:1px solid #4A5266; color:#C7CBD6; padding:6px 12px;
  border-radius:var(--radio); cursor:pointer; font-size:.8rem; font-weight:600;
}
.nav-admin button:hover, .nav-admin button.activo{background:var(--rojo); border-color:var(--rojo); color:#fff;}
.btn-cerrar-sesion{margin-left:auto; background:none; border:1px solid #4A5266; color:#C7CBD6; padding:6px 12px; border-radius:var(--radio); cursor:pointer; font-size:.8rem;}
.btn-cerrar-sesion:hover{border-color:var(--rojo); color:#fff;}

/* =====================================================================
   ALERTAS DE DOCUMENTOS (SOAT / TECNOMECÁNICA)
   ===================================================================== */
.badge-alerta-doc{
  display:inline-block; background:#FBE7E7; color:var(--rojo); border:1px solid var(--rojo);
  padding:2px 8px; border-radius:20px; font-size:.68rem; font-weight:700; text-transform:uppercase;
  margin-left:6px;
}
.badge-proximo-doc{
  display:inline-block; background:#FFF2DC; color:#8A5B00; border:1px solid var(--ambar);
  padding:2px 8px; border-radius:20px; font-size:.68rem; font-weight:700; text-transform:uppercase;
  margin-left:6px;
}
.panel-alertas-doc{
  background:#FFF4DD; border:1px solid var(--ambar); border-radius:var(--radio);
  padding:14px 16px; margin-bottom:24px;
}
.panel-alertas-doc.panel-vencidos{background:#FBE7E7; border-color:var(--rojo);}
.panel-alertas-doc.panel-vencidos h3{color:var(--rojo);}
.panel-alertas-doc.panel-vencidos li{color:#8E1A1F;}
.panel-alertas-doc h3{margin:0 0 8px; font-family:var(--fuente-display); font-size:.95rem; color:#8A5B00; text-transform:uppercase; letter-spacing:.4px;}
.panel-alertas-doc ul{margin:0; padding-left:18px; font-size:.85rem; color:#5A3B00;}
.panel-alertas-doc li{margin-bottom:4px;}

/* =====================================================================
   NOVEDADES / PLANES / USUARIOS
   ===================================================================== */
#vista-usuarios, #vista-novedades, #vista-planes { display:none; }
.check-lista-modulos{display:flex; flex-direction:column; gap:6px; max-height:260px; overflow-y:auto; border:1px solid var(--gris-linea); border-radius:var(--radio); padding:10px; background:#fff;}
.check-lista-modulos label{font-size:.82rem; display:flex; gap:8px; align-items:center;}
.check-lista-modulos .veh-grupo{font-weight:700; margin-top:6px; color:var(--carbon); font-size:.8rem;}
.estado-plan-pendiente{background:#FFF2DC;color:#8A5B00;}
.estado-plan-ejecutado{background:#E4F5EC;color:var(--verde);}

/* =====================================================================
   REPORTE DE INVENTARIO PARA EXPORTAR A PDF (vía impresión del navegador)
   ===================================================================== */
#area-impresion-registro{ display:none; }

.pdf-encabezado{
  display:flex;
  align-items:center;
  gap:16px;
  border-bottom:3px solid var(--rojo);
  padding-bottom:14px;
  margin-bottom:18px;
}
.pdf-encabezado img{ width:64px; height:64px; object-fit:contain; }
.pdf-encabezado h1{
  font-family:var(--fuente-display);
  font-size:1.2rem;
  text-transform:uppercase;
  letter-spacing:.4px;
  margin:0 0 2px;
  color:var(--carbon);
}
.pdf-encabezado p{ margin:0; color:var(--texto-suave); font-size:.85rem; }

table.pdf-datos{ width:100%; border-collapse:collapse; margin-bottom:18px; font-size:.88rem; }
table.pdf-datos td{ padding:5px 8px; border-bottom:1px solid var(--gris-linea); }
table.pdf-datos td:first-child{ font-weight:600; color:var(--texto-suave); width:200px; }

table.pdf-tabla-items{ width:100%; border-collapse:collapse; margin-bottom:22px; font-size:.85rem; }
table.pdf-tabla-items th{
  background:var(--carbon); color:#fff; text-align:left; padding:8px 10px;
  text-transform:uppercase; letter-spacing:.4px; font-size:.7rem;
}
table.pdf-tabla-items td{ padding:7px 10px; border-bottom:1px solid var(--gris-linea); }
table.pdf-tabla-items tr:nth-child(even) td{ background:#FAF8F4; }

.pdf-resumen{
  font-size:.85rem; font-weight:600; color:var(--carbon);
  border-top:1px solid var(--gris-linea); padding-top:10px; margin-bottom:40px;
}
.pdf-firma{ display:flex; justify-content:space-between; gap:40px; margin-top:50px; }
.linea-firma{ flex:1; border-top:1px solid var(--texto); padding-top:6px; font-size:.8rem; text-align:center; color:var(--texto-suave); }

@media print{
  header, .barra-turno, .btn, .volver, footer, .form-item, .franja-riesgo, .icono-btn{display:none !important;}
  body{background:#fff;}
  table.lista-items th{background:#333 !important;-webkit-print-color-adjust:exact;}

  /* Al exportar un registro puntual del historial, se oculta toda la app
     y solo se imprime el reporte armado en #area-impresion-registro */
  body.modo-registro > *:not(#area-impresion-registro){ display:none !important; }
  body.modo-registro #area-impresion-registro{
    display:block !important;
    padding:20px;
  }
  table.pdf-tabla-items th{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
@media (max-width:640px){
  .form-item{grid-template-columns:1fr;}
  .encabezado-vehiculo{flex-direction:column;align-items:flex-start;}
  .reloj{margin-left:0;text-align:left;}
}