:root {
  --fondo: #f4f5f7; --papel: #fff; --tinta: #1c2330; --tenue: #667085; --linea: #d7dbe2;
  --accion: #0b5cad; --alerta: #b42318; --alerta-fondo: #fef3f2; --aviso: #b54708; --bien: #067647;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.4 system-ui, sans-serif; color: var(--tinta); background: var(--fondo); }
a { color: var(--accion); }
h1 { font-size: 1.3rem; margin: 0 0 .75rem; }
h2 { font-size: 1rem; margin: 0 0 .5rem; }
main { padding: 1rem; max-width: 1500px; margin: 0 auto; }
small, .nota { color: var(--tenue); font-weight: normal; }

.cabecera { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .5rem 1rem;
  background: var(--tinta); color: #fff; }
.cabecera a { color: #fff; text-decoration: none; }
.cabecera nav { display: flex; gap: 1rem; flex: 1; flex-wrap: wrap; }
.marca { font-weight: 700; letter-spacing: .02em; }
.contador[data-total]:not([data-total="0"]) { background: var(--alerta); border-radius: 1rem; padding: 0 .6rem; }

button, .boton { font: inherit; padding: .45rem .8rem; min-height: 2.4rem; border: 1px solid var(--accion);
  border-radius: .35rem; background: var(--accion); color: #fff; cursor: pointer; text-decoration: none;
  display: inline-block; }
button.discreto, .boton.discreto { background: transparent; color: inherit; border-color: currentColor; }
button.peligro { background: var(--alerta); border-color: var(--alerta); }
button.mini { min-height: 1.8rem; padding: .1rem .5rem; }
input, select, textarea { font: inherit; padding: .4rem; border: 1px solid var(--linea); border-radius: .3rem;
  max-width: 100%; background: #fff; }
label { display: block; margin: .4rem 0; color: var(--tenue); font-size: .85rem; }
label > input, label > select, label > textarea { display: block; margin-top: .15rem; color: var(--tinta); }
label.casilla > input { display: inline; margin: 0 .3rem 0 0; }
form.linea { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; }
form.linea label { margin: 0; }
details { margin: .4rem 0; }
summary { cursor: pointer; color: var(--accion); }

.mensaje { margin: .5rem 1rem; padding: .6rem .8rem; border-radius: .35rem; background: #eef4ff;
  border: 1px solid #b2ccff; }
.mensaje.error { background: var(--alerta-fondo); border-color: #fda29b; color: var(--alerta); }
.mensaje.success { background: #ecfdf3; border-color: #abefc6; color: var(--bien); }
.oculto { display: none; }
.aviso { grid-column: 1 / -1; margin: 0; color: var(--aviso); font-size: .85rem; }
.aviso.origen { color: var(--tenue); }
.mapeo table { font-size: .85rem; }

.acceso { display: grid; place-items: center; min-height: 100vh; }
.ficha { background: var(--papel); border: 1px solid var(--linea); border-radius: .5rem; padding: 1rem; }
.acceso .ficha { width: min(22rem, 92vw); }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .25rem 1rem; }
.bloque { margin-bottom: 1rem; }

.dias { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.tablon-cuerpo { display: grid; grid-template-columns: 1fr 19rem; gap: 1rem; align-items: start; }
.columnas { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; align-items: start; }
.columna { background: #e9ecf1; border-radius: .5rem; padding: .5rem; min-height: 6rem; }
.vacio { color: var(--tenue); margin: .25rem; }
.tarjeta { background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--linea);
  border-radius: .4rem; padding: .5rem; margin-bottom: .5rem; }
.tarjeta p { margin: .2rem 0; }
.tarjeta.alerta { border-left-color: var(--alerta); background: var(--alerta-fondo); }
.tarjeta[draggable="true"] { cursor: grab; }
.tarjeta.arrastrando { opacity: .4; }
.tarjeta .numero { font-weight: 700; font-variant-numeric: tabular-nums; }
.tarjeta .tipo, .franja, .quien { color: var(--tenue); font-size: .85rem; }
.marca-alerta, .marca-atrasado, .marca-nota { display: inline-block; font-size: .75rem; border-radius: .25rem;
  padding: 0 .35rem; margin: .15rem .15rem 0 0; border: 1px solid; }
.marca-alerta { color: var(--alerta); }
.marca-atrasado { color: var(--aviso); }
.marca-nota { color: var(--tenue); }

.mensajeros { display: grid; gap: .6rem; }
.mensajero { background: var(--papel); border: 1px solid var(--linea); border-radius: .5rem; padding: .5rem; }
.mensajero.destino { outline: 3px solid var(--accion); }
.mensajero ol { margin: .3rem 0 0; padding-left: 1.2rem; }
.mensajero li { margin: .2rem 0; }
.mensajero form { display: inline; }

table { border-collapse: collapse; width: 100%; background: var(--papel); }
th, td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
th { color: var(--tenue); font-size: .85rem; font-weight: 600; }
tr.no-aplicado td { color: var(--alerta); }
.parada { border-top: 1px solid var(--linea); padding: .6rem 0; }
.parada img { max-width: 14rem; max-height: 8rem; border: 1px solid var(--linea); background: #fff; }
.estado { font-size: .8rem; border: 1px solid var(--linea); border-radius: .25rem; padding: 0 .35rem; }

@media (max-width: 900px) {
  .tablon-cuerpo, .columnas { grid-template-columns: 1fr; }
  main { padding: .5rem; }
  .cabecera nav { order: 3; flex-basis: 100%; gap: .25rem 1rem; }
  .marca { flex: 1; }
  table { display: block; overflow-x: auto; }
}