/* Fuente corporativa: Roboto (alojada en el propio servidor, sin depender de Google) */
@font-face { font-family: 'Roboto'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('roboto.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --fondo: #f4f5f7; --tarjeta: #fff; --texto: #1d2330; --suave: #5d6677;
  --marca: #0b3a6e; --borde: #dde1e8; --error: #b3261e; --ok: #1e7b3a;
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fondo); color: var(--texto); }
.barra { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--marca); color: #fff; }
.barra a, .barra .enlace { color: #fff; text-decoration: none; }
.marca { font-weight: 700; letter-spacing: .5px; }
.marca span { font-weight: 400; opacity: .8; }
nav { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 15px; }
.quien { opacity: .85; }
.enlinea { display: inline; margin: 0; }
.enlace { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
main { max-width: 980px; margin: 0 auto; padding: 24px 16px; }
h1 { font-size: 1.5rem; margin: 0 0 16px; }
h2 { font-size: 1.15rem; margin: 0 0 12px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.estrecha { max-width: 420px; margin: 40px auto; }
label { display: block; margin-bottom: 14px; font-weight: 600; font-size: 15px; }
input { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; border: 1px solid var(--borde); border-radius: 8px; }
input:focus { outline: 2px solid var(--marca); outline-offset: 1px; }
button[type=submit]:not(.enlace):not(.boton-peq) { width: 100%; padding: 12px; font: inherit; font-weight: 600; color: #fff; background: var(--marca); border: 0; border-radius: 8px; cursor: pointer; }
.aviso { padding: 10px 12px; border-radius: 8px; }
.aviso.error { background: #fdecea; color: var(--error); }
.aviso.ok { background: #e8f5ec; color: var(--ok); }
.nota { color: var(--suave); font-size: 14px; margin-top: -6px; }
.tabla-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { color: var(--suave); font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
select { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; font: inherit; border: 1px solid var(--borde); border-radius: 8px; background: #fff; }
.acciones select { display: inline-block; width: auto; margin: 2px 4px 2px 0; padding: 4px 6px; font-size: 14px; }
.acciones { white-space: normal; min-width: 260px; }
.boton-peq { margin: 2px 4px 2px 0; padding: 4px 10px; font: inherit; font-size: 14px; color: var(--marca); background: #fff; border: 1px solid var(--marca); border-radius: 6px; cursor: pointer; }
.boton-peq:hover { background: #eef3fa; }
.apagado td { color: var(--suave); }
.rojo { color: var(--error); font-weight: 600; }
.destacada { border: 2px solid var(--marca); }
.clave { font: 700 1.6rem/1.2 ui-monospace, Consolas, monospace; letter-spacing: 1px; margin: 8px 0 12px; }
.estrecha-izq { max-width: 480px; }
td { vertical-align: top; }
textarea { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; border: 1px solid var(--borde); border-radius: 8px; resize: vertical; }
a.boton-peq { display: inline-block; text-decoration: none; }
.boton-peq.activo, .boton-peq.primario { color: #fff; background: var(--marca); }
.atajos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 14px; align-items: end; }
.rejilla label { margin-bottom: 12px; }
.casilla { display: flex; gap: 8px; align-items: center; font-weight: 400; }
.casilla input { display: inline-block; width: auto; margin: 0; }
.botones { margin-bottom: 12px; }
.resumen-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.resumen-cifras div { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 12px 16px; color: var(--suave); font-size: 14px; }
.resumen-cifras span { display: block; color: var(--texto); font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
table.servicios td { font-size: 14px; }
table.servicios a { color: var(--marca); font-weight: 600; text-decoration: none; }
.ruta { white-space: normal; min-width: 220px; }
.dos-columnas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .dos-columnas { grid-template-columns: 1fr; } }
table.ficha th { width: 40%; color: var(--suave); font-weight: 600; white-space: normal; }
table.ficha td { white-space: normal; }
main { max-width: 1200px; }
.fecha-peq { display: inline-block; width: auto; padding: 4px 6px; margin: 0; font-size: 14px; }
details { margin-bottom: 14px; }
summary { cursor: pointer; color: var(--marca); font-weight: 600; margin-bottom: 10px; }
.aviso ul { margin: 6px 0 0 18px; padding: 0; }
.barra nav a { white-space: nowrap; }
/* App de conductores */
.servicio-movil .cabeza { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.servicio-movil p { margin: 8px 0; }
.servicio-movil a { color: var(--marca); }
.servicio-movil.hecho { opacity: .65; }
.etiqueta { font-size: 13px; padding: 2px 8px; border-radius: 999px; background: #e8ecf2; white-space: nowrap; }
.estado-en_curso { background: #fff3cd; } .estado-entregado { background: #e8f5ec; color: var(--ok); }
.estado-incidencia { background: #fdecea; color: var(--error); }
.botones-movil { display: grid; gap: 8px; margin-top: 12px; }
.boton-grande { display: block; width: 100%; padding: 14px; font: inherit; font-weight: 700; font-size: 17px; text-align: center; text-decoration: none; color: #fff !important; background: var(--marca); border: 0; border-radius: 10px; cursor: pointer; }
.boton-grande.verde { background: var(--ok); } .boton-grande.gris { background: #6b7280; }
.boton-grande:disabled { opacity: .6; }
.vista-foto { max-width: 100%; max-height: 240px; border-radius: 8px; margin-bottom: 14px; }
.firma-caja { margin-bottom: 14px; font-weight: 600; font-size: 15px; }
#lienzo-firma { display: block; width: 100%; height: 180px; margin: 4px 0 6px; background: #fff; border: 1px dashed var(--suave); border-radius: 8px; touch-action: none; }
.prueba { border-top: 1px solid var(--borde); padding-top: 10px; margin-top: 10px; }
.imagenes-prueba { display: flex; flex-wrap: wrap; gap: 12px; }
.imagenes-prueba img { max-width: 260px; max-height: 260px; border: 1px solid var(--borde); border-radius: 8px; }
.imagenes-prueba img.firma { background: #fff; }
@media print { .barra, .no-imprimir, .atajos { display: none !important; } body { background: #fff; } .tarjeta { border: 0; padding: 0; } }
/* Borrador de factura */
.hoja { position: relative; max-width: 860px; overflow: hidden; }
.marca-agua { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-25deg); font-size: 48px; font-weight: 800; color: rgba(179, 38, 30, .12); white-space: nowrap; pointer-events: none; }
.hoja-cabeza { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.derecha { text-align: right; }
.hoja-cliente { margin-bottom: 20px; padding: 12px; border: 1px solid var(--borde); border-radius: 8px; max-width: 420px; }
table.lineas td { white-space: normal; font-size: 14px; }
table.lineas tfoot th, table.lineas tfoot td { border: 0; }
@media print { .marca-agua { color: rgba(0,0,0,.12); } }
/* Tablas de tarifas */
table.tarifas th { white-space: normal; min-width: 150px; }
table.tarifas td { min-width: 110px; }
table.tarifas input[type=text] { margin: 0; padding: 6px 8px; text-align: right; }
table.tarifas input::placeholder { color: #a0a7b4; }
.fila-fijo { border-bottom: 1px solid var(--borde); padding-bottom: 6px; margin-bottom: 10px; }
input:disabled, select:disabled, textarea:disabled { background: #f7f8fa; color: var(--texto); }
/* Fase 3 · Tiempo real, conectar y avisos */
.conexion.conectado { border-left: 6px solid var(--ok); }
.conexion.desconectado { border-left: 6px solid #9aa3af; }
.conexion form { margin: 12px 0 6px; }
.conexion .boton-peq { margin-top: 6px; }
.boton-peq.avisos-on { color: #fff; background: var(--ok); border-color: var(--ok); }
.por-aceptar { border: 2px solid var(--marca); box-shadow: 0 0 0 3px #e3ecf8; }
.rechazo summary { list-style: none; margin: 0; color: #fff; }
.rechazo summary::-webkit-details-marker { display: none; }
.rechazo form { margin-top: 10px; }
.globo { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--error); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.conexiones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 16px; }
.etiqueta.apagada { color: var(--suave); }
.aviso-trafico { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.aviso-trafico a { color: inherit; font-weight: 700; }
.bandera-cambios { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 50; padding: 12px 18px; font: inherit; font-weight: 700; color: #fff; background: var(--marca); border: 0; border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.25); cursor: pointer; }
/* Mapa de conductores */
.mapa-caja { display: grid; grid-template-columns: 1fr 260px; gap: 16px; align-items: start; }
@media (max-width: 760px) { .mapa-caja { grid-template-columns: 1fr; } }
#mapa { height: 70vh; min-height: 380px; border: 1px solid var(--borde); border-radius: 10px; }
.mapa-lista ul { list-style: none; margin: 8px 0 0; padding: 0; }
.mapa-lista li { padding: 6px 0; border-bottom: 1px solid var(--borde); white-space: normal; }
.mapa-lista li.clic { cursor: pointer; }
.mapa-lista li.clic:hover { background: #eef3fa; }
.pin-caja { background: none; border: 0; }
.pin { position: relative; display: inline-block; transform: translate(-50%, -100%); padding: 3px 8px; font: 700 12px/1.3 system-ui, sans-serif; color: #fff; white-space: nowrap; background: var(--ok); border: 2px solid #fff; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.pin::after { content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ok); }
.pin-gris { background: #8a929c; }
.pin-gris::after { border-top-color: #8a929c; }
/* Fase 4 · Paradas, navegación y resumen del mes */
.parada { border-top: 1px dashed var(--borde); padding-top: 6px; margin-top: 6px; }
.parada p { margin: 4px 0; }
.navegar { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.navegar .boton-peq { margin: 0; padding: 8px 12px; font-size: 15px; }
.parada-boton { display: block; width: 100%; margin: 6px 0 2px; padding: 10px; font-size: 16px; font-weight: 700; }
table.paradas input[type=time] { display: inline-block; width: auto; margin: 0; padding: 4px 6px; }
.barra-dia { width: 100%; height: 12px; vertical-align: middle; }
.cifra-hoy { border-left: 4px solid var(--ok); }
details.marca { border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
details.marca summary { margin: 0; }
details.marca ol { margin: 8px 0 4px 18px; padding: 0; }
details.marca li { margin-bottom: 6px; }
.aviso-config { display: block; text-decoration: none; font-weight: 700; }
.oculto { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.etiqueta-campo { font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.boton-foto { margin-bottom: 8px; background: #374151; }
.boton-foto + .boton-peq { margin-bottom: 10px; }
.camara-capa { position: fixed; inset: 0; z-index: 100; background: #000; display: flex; flex-direction: column; }
.camara-capa video { flex: 1; width: 100%; min-height: 0; object-fit: cover; background: #000; }
.camara-barra { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; padding: 12px; background: #111; }
/* Justificante de entrega (POD) */
.logo-pod { max-height: 64px; max-width: 220px; margin-bottom: 6px; }
.titulo-pod { font-size: 1.1rem; letter-spacing: .5px; }
table.ficha-pod th { width: 26%; color: var(--suave); white-space: normal; vertical-align: top; }
table.ficha-pod td { white-space: normal; }
.pod-imagenes { display: flex; flex-wrap: wrap; gap: 20px; margin: 18px 0 10px; }
.pod-imagenes figure { margin: 0; }
.pod-imagenes figcaption { font-size: 13px; color: var(--suave); margin-top: 4px; }
.pod-firma { max-width: 300px; max-height: 140px; border-bottom: 1px solid var(--texto); background: #fff; }
.pod-foto { max-width: 320px; max-height: 320px; border: 1px solid var(--borde); border-radius: 6px; }
.pod-pie { border-top: 1px solid var(--borde); padding-top: 8px; margin-top: 14px; }
#enlace-pod { font-size: 14px; }
@media print {
  @page { size: A4; margin: 10mm; }
  main { padding: 0; max-width: none; }
  .pod { font-size: 12px; padding: 0 6px; margin: 0; break-inside: avoid; page-break-inside: avoid; }
  .pod .hoja-cabeza { margin-bottom: 10px; }
  .pod .hoja-cliente { margin-bottom: 10px; padding: 8px; }
  .pod table.lineas th, .pod table.lineas td { padding: 4px 6px; font-size: 12px; }
  .pod .logo-pod { max-height: 48px; }
  .pod-imagenes { flex-wrap: nowrap; align-items: flex-start; gap: 14px; margin: 10px 0 6px; }
  .pod-firma { max-width: 230px; max-height: 95px; }
  .pod-foto { max-width: 300px; max-height: 240px; }
  .pod-imagenes figcaption { font-size: 10px; }
  .pod-pie { font-size: 9px; margin-top: 6px; padding-top: 4px; white-space: normal; }
}
.paradas-extra { border: 1px dashed var(--borde); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.fila-parada { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items: start; margin-bottom: 8px; }
.fila-parada select, .fila-parada textarea { margin-top: 0; }
@media (max-width: 560px) { .fila-parada { grid-template-columns: 1fr auto; } .fila-parada textarea { grid-column: 1 / -1; } }
.parada-hecha { opacity: .7; }
/* Documentos (justificante de entrega, borrador de factura, liquidación): Roboto y color corporativo #0a2847 */
.hoja, .hoja * { font-family: 'Roboto', Arial, sans-serif; }
.hoja, .hoja *:not(.marca-agua) { color: #0a2847; }
.hoja a { color: #0a2847; }
.hoja table th, .hoja table td { border-bottom-color: #c9d2de; }
.pod-firma { border-bottom-color: #0a2847; }


/* --- Fase 9: facturas, DeCA y verificación (DIARIO NAJESA 1.2) --- */
.salto-pagina { break-before: page; page-break-before: always; height: 0; }
.factura .legal { font-size: .7rem; line-height: 1.25; margin-top: 12px; color: #444; }
.etiqueta.estado-emitida { background: #ffeb9c; color: #5c4700; }
.etiqueta.estado-aprobada { background: #c6efce; color: #14532d; }
.etiqueta.estado-enviada { background: #bdd7ee; color: #0b3a6e; }
td.botones form { display: inline; }
td.botones .boton-peq { margin: 1px 0; }
.linea-rellenar { display: inline-block; min-width: 260px; border-bottom: 1px solid #888; height: 1em; }
.firmas p { margin-top: 24px; }
@media print { .factura .lineas th, .factura .lineas td { padding: 3px 6px; } }

.lista-calidad { columns: 2; column-gap: 24px; padding-left: 18px; }
.lista-calidad li { break-inside: avoid; margin: 2px 0; }
details.rectificar { display: inline-block; vertical-align: top; }
details.rectificar[open] { display: block; border: 1px solid #d9e1ea; border-radius: 8px; padding: 8px; margin: 6px 0; background: #fff; }
details.rectificar summary { list-style: none; cursor: pointer; }
details.rectificar label { display: block; margin: 4px 0; }
.etiqueta.estado-incidencia { background: #fbd5d5; color: #8a1c1c; }
@media (max-width: 700px) { .lista-calidad { columns: 1; } }

/* ===== Chat interno ===== */
.chat-badge{display:inline-block;min-width:1.4em;padding:0 .4em;border-radius:1em;background:#d93025;color:#fff;font-size:.75em;font-weight:700;text-align:center;line-height:1.4em;vertical-align:middle}
.chat-app{display:grid;grid-template-columns:1fr;gap:1rem;max-width:1100px;margin:0 auto}
.chat-app.chat-oficina{grid-template-columns:260px minmax(0,1fr)}
.chat-lista{background:#fff;border:1px solid #d7dfea;border-radius:10px;padding:.8rem;max-height:75vh;overflow:auto}
.chat-lista h1{font-size:1.2rem;margin:0 0 .6rem}
.chat-lista input{width:100%;box-sizing:border-box;margin-bottom:.5rem}
.chat-lista ul{list-style:none;margin:0;padding:0}
.chat-lista li a{display:flex;justify-content:space-between;align-items:center;padding:.5rem .6rem;border-radius:6px;text-decoration:none;color:#0a2847}
.chat-lista li.activo a,.chat-lista li a:hover{background:#e6ebf2}
.chat-conversacion{display:flex;flex-direction:column;background:#fff;border:1px solid #d7dfea;border-radius:10px;min-width:0}
.chat-cab{display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding:.7rem 1rem;border-bottom:1px solid #d7dfea;background:#0a2847;color:#fff;border-radius:10px 10px 0 0}
.chat-cab span{font-size:.8rem;opacity:.85}
.chat-mensajes{flex:1;height:55vh;overflow-y:auto;padding:1rem;background:#f4f6fa;display:flex;flex-direction:column;gap:.5rem}
.chat-msg{max-width:78%;padding:.5rem .7rem;border-radius:12px;box-shadow:0 1px 1px rgba(0,0,0,.06);word-wrap:break-word;overflow-wrap:anywhere}
.chat-msg p{margin:.1rem 0;white-space:pre-wrap}
.chat-msg.propio{align-self:flex-end;background:#d9e7ff;border-bottom-right-radius:3px}
.chat-msg.ajeno{align-self:flex-start;background:#fff;border-bottom-left-radius:3px}
.chat-msg img{max-width:100%;max-height:260px;border-radius:8px;display:block;margin-top:.3rem}
.chat-autor{display:block;font-size:.72rem;font-weight:700;color:#0b3a6e}
.chat-serv{display:inline-block;font-size:.72rem;background:#0a2847;color:#fff;border-radius:4px;padding:0 .4rem;text-decoration:none}
.chat-hora{display:block;text-align:right;font-size:.68rem;color:#667}
.chat-escribir{display:flex;gap:.5rem;align-items:flex-end;padding:.6rem;border-top:1px solid #d7dfea;flex-wrap:wrap}
.chat-escribir textarea{flex:1;min-width:160px;resize:vertical;min-height:2.4rem;font:inherit}
.chat-escribir select{max-width:100%}
.chat-adjuntar{cursor:pointer;font-size:1.4rem;padding:.2rem .4rem;border-radius:6px}
.chat-adjuntar.lista{background:#cfe8d4}
.chat-error{color:#b00020;margin:.3rem 1rem}
.chat-vacio{color:#667;text-align:center;padding:2rem 1rem}
.chat-legal{font-size:.72rem;color:#667;padding:.5rem 1rem;margin:0}
@media (max-width:700px){.chat-app.chat-oficina{grid-template-columns:1fr}.chat-lista{max-height:30vh}.chat-mensajes{height:60vh}.chat-msg{max-width:90%}}

.chat-escribir input[type=file]{display:none!important}
.chat-escribir select{flex:1 1 100%;width:100%;margin:0}
.chat-escribir textarea{flex:1 1 200px;width:auto;margin:0}
.chat-escribir .boton,.chat-escribir button{flex:0 0 auto;width:auto;margin:0}
.chat-adjuntar{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:2.6rem;height:2.6rem;border:1px solid #d7dfea;background:#f4f6fa}