/* Panel de agentes de Qoorder Arahal. Tokens de color para claro y oscuro; todo el color sale de aquí. */
:root {
  /* Marca Qoorder: verde #44B176, morado #6245BC, índigo #211649 */
  --marca-indigo: #211649; --marca-verde: #44B176; --marca-morado: #6245BC;
  --bg: #F5F6FA; --surface: #FFFFFF; --surface-2: #F0EEF9; --fg: #1E1747; --muted: #6A6791; --line: #E3E1F0;
  --accent: #6245BC; --accent-fg: #FFFFFF; --accent-soft: #EDE9FE;
  --ok: #2B8A5A; --ok-soft: #E1F4EA; --work: #A15C07; --work-soft: #FBEBD3; --bad: #C4372F; --bad-soft: #FCE6E3;
  --warn: #8A6A00; --warn-soft: #FAF0CC; --info: #5B3FD6; --info-soft: #EDE9FE;
  --floor: #F4F2FC; --floor-side: #C9C4E2; --road: #D3CFE8; --desk: #FFFFFF; --desk-2: #DAD6EC; --chair: #3A3560; --screen: #211649;
  --stage: #EEECF8; --shadow: 0 1px 2px rgba(33,22,73,.06), 0 8px 24px rgba(33,22,73,.08);
  /* Fases de un pedido: nuevo negro, en preparación celeste, listo naranja, en la moto verde (color, fondo suave y texto de cada una) */
  --f-n: #17171C; --f-n-soft: #17171C; --f-n-fg: #FFFFFF; --f-n-ring: transparent;
  --f-p: #2FB1EA; --f-p-soft: #DDF3FC; --f-p-fg: #0A6A94;
  --f-l: #F28C28; --f-l-soft: #FDEBD3; --f-l-fg: #9A5200;
  --f-m: #2FA866; --f-m-soft: #E1F4EA; --f-m-fg: #1F7A4C;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --marca-indigo: #1E1B2E;
    --bg: #0D0F12; --surface: #161920; --surface-2: #1E2130; --fg: #ECEBFA; --muted: #9A98BC; --line: #2A2D3A;
    --accent: #A78BFA; --accent-fg: #1A1040; --accent-soft: #2D1B69;
    --ok: #34D399; --ok-soft: #12332A; --work: #E9AB4A; --work-soft: #382B15; --bad: #F2796F; --bad-soft: #3B1F1C;
    --warn: #E2C45C; --warn-soft: #373013; --info: #B7A4FF; --info-soft: #2D1B69;
    --floor: #1E1B2E; --floor-side: #14121F; --road: #121019; --desk: #2E2B40; --desk-2: #24213A; --chair: #4A4570; --screen: #0D0F12;
    --stage: #14121F; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.4);
    /* En oscuro el negro necesita un borde claro para verse */
    --f-n: #05060A; --f-n-soft: #05060A; --f-n-fg: #FFFFFF; --f-n-ring: rgba(255,255,255,.6);
    --f-p: #4DC3F5; --f-p-soft: #12313D; --f-p-fg: #7FD3F7;
    --f-l: #F59B3B; --f-l-soft: #382B15; --f-l-fg: #F2A64A;
    --f-m: #34D399; --f-m-soft: #12332A; --f-m-fg: #34D399;
  }
}
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("fonts/Inter-latin.woff2") format("woff2"); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3, h4 { margin: 0; }
.muted { color: var(--muted); }
.error { color: var(--bad); margin: 0; }
.num { font-variant-numeric: tabular-nums; }

.btn { border: 1px solid var(--line); background: var(--surface); border-radius: 9px; padding: 7px 14px; font-weight: 500; }
.btn:hover { border-color: var(--accent); }
.btn.pri { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); font-weight: 600; }
.btn.pri:hover { filter: brightness(1.08); border-color: var(--accent); }
.btn.flojo { color: var(--muted); }
.btn[disabled] { opacity: .5; cursor: progress; }

/* Acceso */
.login { min-height: 100%; display: grid; place-items: center; padding: 16px; background: linear-gradient(160deg, #211649 0%, #3B2A8F 100%); }
.login-caja { width: min(380px, 100%); display: grid; gap: 10px; background: var(--surface); border-radius: 20px; padding: 28px; box-shadow: 0 24px 60px rgba(10,5,40,.45); }
.login-logo { width: 180px; height: auto; margin-bottom: 4px; }
.login-caja h1 { font-size: 20px; letter-spacing: -.02em; }
.login-caja label { font-weight: 600; font-size: 13px; }
.login-caja input { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); }
.login-caja input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

/* Estructura */
.app { height: 100%; display: flex; flex-direction: column; }
.pagina { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; }

/* Barra superior de marca: índigo con el logo, y las pestañas con el verde de Qoorder */
.barra { background: var(--marca-indigo); color: #fff; box-shadow: 0 2px 12px rgba(20,10,60,.25); position: relative; z-index: 10; }
.barra-in { display: flex; align-items: center; gap: 14px; padding: 9px 18px; flex-wrap: wrap; }
.barra-logo { display: flex; align-items: center; }
.barra-logo img { height: 26px; width: auto; display: block; }
.barra-titulo { font-size: 13px; color: rgba(255,255,255,.72); padding-left: 14px; border-left: 1px solid rgba(255,255,255,.2); }
.barra-titulo b { color: #fff; font-weight: 600; }
.barra-usuario { font-size: 12.5px; color: rgba(255,255,255,.72); margin-left: auto; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw; }
@media (max-width: 640px) { .barra-usuario { display: none; } }
.barra .chip { border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.75); }
.tabs { display: inline-flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.tabs button { border: 0; background: none; padding: 7px 14px; border-radius: 999px; font-weight: 500; color: rgba(255,255,255,.75); }
.tabs button:hover { background: rgba(255,255,255,.1); color: #fff; }
.tabs button[aria-selected="true"] { background: var(--marca-verde); color: var(--marca-indigo); font-weight: 650; }
.btn-barra { border: 1px solid rgba(255,255,255,.3); background: none; color: rgba(255,255,255,.85); border-radius: 999px; padding: 6px 14px; }
.btn-barra:hover { background: rgba(255,255,255,.1); color: #fff; }
.barra :focus-visible { outline-color: #fff; }

.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.hello h1 { font-size: 38px; line-height: 1; letter-spacing: -.03em; font-weight: 800; }
.fecha { margin: 6px 0 0; font-weight: 500; }
.sub { margin: 2px 0 0; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 13px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill b { font-weight: 700; }
.pill.mal { background: var(--bad); border-color: var(--bad); color: #fff; }
.pill.bien { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.pill.trab { background: var(--work-soft); border-color: transparent; color: var(--work); }
.pill.info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.banner { padding: 9px 14px; border-radius: 10px; background: var(--bad-soft); color: var(--bad); font-weight: 500; border: 1px solid var(--bad); }
.banner.aviso { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }

.cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 12px; }
.escenario { position: relative; min-width: 0; min-height: 0; border-radius: 18px; background: var(--stage); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--shadow); }
.vista { position: absolute; inset: 0; }
.vista.lista { overflow: auto; padding: 16px; display: block; }

/* Carril de actividad */
.carril { display: flex; flex-direction: column; min-height: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); }
.carril-cab { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.carril h2 { font-size: 15px; }
.reloj { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.feed { list-style: none; margin: 0; padding: 4px 0; overflow: auto; flex: 1; min-height: 0; }
.feed li { padding: 8px 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 6px; font-size: 12.5px; }
.feed li + li { border-top: 1px solid var(--line); }
.feed time { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-top: 2px; }
.feed p { margin: 0; overflow-wrap: anywhere; }
.feed li.aviso { background: var(--bad-soft); }
.feed li.recomendacion p { color: var(--accent); }
.feed li.anulado p { color: var(--muted); text-decoration: line-through; }
.vacio { color: var(--muted); padding: 16px; margin: 0; }

.sq { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: var(--c, var(--muted)); flex: none; }
.est { font-size: 10.5px; font-weight: 600; padding: 0 6px; border-radius: 999px; white-space: nowrap; background: var(--surface-2); color: var(--muted); }
.est.trabajando, .est.ruta, .est.recoger { background: var(--work-soft); color: var(--work); }
.est.necesita, .est.retraso { background: var(--bad); color: #fff; }
.est.cerrado, .est.inactivo { background: var(--surface-2); color: var(--muted); }
.est.libre, .est.espera, .est.creada { background: var(--ok-soft); color: var(--ok); }
.est.pendiente, .est.distinta { background: var(--warn-soft); color: var(--warn); }
.est.duplicada, .est.desconocido { background: var(--bad-soft); color: var(--bad); }
.burbuja { position: absolute; left: 0; top: 0; max-width: 240px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--c, var(--accent)); border-radius: 10px; padding: 6px 9px; box-shadow: var(--shadow); font-size: 11.5px; line-height: 1.35; transition: opacity .3s; }
.burbuja.fuera { opacity: 0; }

/* Listas y tarjetas */
.titulo-vista { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; }
.titulo-vista h2 { font-size: 18px; letter-spacing: -.01em; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; align-items: start; }
.tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 13px 15px; display: grid; gap: 9px; min-width: 0; }
.tarjeta.alerta { border-color: var(--bad); }
.tarjeta h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.tarjeta h3 .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cifras { display: flex; gap: 16px; flex-wrap: wrap; }
.cifra { display: grid; }
.cifra b { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.cifra span { font-size: 11px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.etiqueta { font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.etiqueta.n1 { background: var(--f-n-soft); color: var(--f-n-fg); border-color: var(--f-n-ring); }
.etiqueta.n2 { background: var(--f-p-soft); color: var(--f-p-fg); border-color: transparent; }
.etiqueta.n3 { background: var(--f-l-soft); color: var(--f-l-fg); border-color: transparent; }
.etiqueta.n4 { background: var(--f-m-soft); color: var(--f-m-fg); border-color: transparent; }
.mini { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; font-size: 12.5px; }
.mini li { display: flex; gap: 8px; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 3px; }
.mini li:first-child { border-top: 0; padding-top: 0; }
.mini .t { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mini .t.mal { color: var(--bad); font-weight: 600; }
.sub-h { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 2px 0 0; }

.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-caja { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.tabla th, .tabla td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; white-space: nowrap; }
.tabla td.d, .tabla th.d { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }
.tabla .avisos { margin: 4px 0 0; padding-left: 16px; color: var(--bad); font-size: 12px; }
.nota { background: var(--info-soft); color: var(--info); border-radius: 10px; padding: 9px 13px; margin: 0 0 12px; font-size: 13px; }
.nota.aviso { background: var(--warn-soft); color: var(--warn); }
.nota.mal { background: var(--bad-soft); color: var(--bad); }
.herramientas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.herramientas input { border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; background: var(--surface); }
.bloque { margin-top: 16px; }
.bloque h3 { font-size: 14px; margin-bottom: 8px; }

@media (max-width: 1100px) {
  html, body { height: auto; }
  .app { height: auto; min-height: 100%; }
  .pagina { flex: none; }
  .cuerpo { display: flex; flex-direction: column; }
  .escenario { height: min(78vh, 720px); min-height: 520px; }
  .carril { height: 380px; }
  .pills { justify-content: flex-start; }
  .tabs { margin-left: 0; }
}
@media (max-width: 640px) {
  .hello h1 { font-size: 32px; }
  .pagina { padding: 12px; }
  .barra-in { padding: 8px 12px; }
  .barra-titulo { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }


/* ================= Oficina: zonas separadas, primero para el móvil ================= */
.zonas { display: grid; gap: 16px; align-items: start; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "oficina oficina" "locales repartidores"; }
.z-oficina { grid-area: oficina; --z: #3B2A8F; }
.z-locales { grid-area: locales; --z: #6245BC; }
.z-repartidores { grid-area: repartidores; --z: #2F9E67; }
@media (prefers-color-scheme: dark) { .z-oficina { --z: #8F86E0; } .z-locales { --z: #A78BFA; } .z-repartidores { --z: #34D399; } }
.zona { border: 1px solid var(--line); border-radius: 20px; background: color-mix(in srgb, var(--z) 5%, var(--surface)); overflow: hidden; box-shadow: var(--shadow); scroll-margin-top: 54px; }
.zona-cab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: color-mix(in srgb, var(--z) 14%, var(--surface)); border-bottom: 1px solid var(--line); border-left: 6px solid var(--z); flex-wrap: wrap; }
.zona-icono { width: 40px; height: 40px; border-radius: 12px; background: var(--z); color: #fff; display: grid; place-items: center; flex: none; }
@media (prefers-color-scheme: dark) { .zona-icono { color: #14102B; } }
.zona-tit { flex: 1; min-width: 160px; }
.zona-tit h2 { font-size: 18px; letter-spacing: -.01em; }
.zona-tit p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.zona-chips { display: flex; gap: 6px; }
.chip-zona { font-size: 12.5px; font-weight: 650; padding: 4px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--z); font-variant-numeric: tabular-nums; white-space: nowrap; }

.agentes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.agente { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 8px; align-content: start; border-top: 5px solid var(--bien, var(--ok)); min-width: 0; }
.agente.n-mal { border-top-color: var(--bad); }
.agente.n-trab { border-top-color: var(--work); }
.agente.n-bien { border-top-color: var(--ok); }
.agente-cab { display: flex; gap: 12px; align-items: center; }
.agente-avatar { width: 74px; height: 74px; flex: none; }
.agente-tit h3 { font-size: 16px; }
.agente-tit p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.gran { margin: 4px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.g-mal { color: var(--bad); } .g-trab { color: var(--work); } .g-bien { color: var(--ok); }
.apoyo { margin: 0; color: var(--muted); font-size: 12.5px; }
.apoyo.mal { color: var(--bad); }
.agente .btn { justify-self: start; margin-top: 4px; }
.robot { width: 100%; height: 100%; display: block; }
.sirena.alerta { animation: parpadeo .8s steps(2, jump-none) infinite; }
@keyframes parpadeo { 50% { opacity: .25; } }

.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; padding: 16px; align-items: start; }
.z-repartidores .fichas { grid-template-columns: minmax(0, 1fr); }
.ficha-det { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; min-width: 0; overflow: hidden; }
.ficha-det.alerta { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft); }
.ficha-det summary { list-style: none; cursor: pointer; padding: 12px; }
.ficha-det summary::-webkit-details-marker { display: none; }
.ficha-det summary:hover { background: color-mix(in srgb, var(--z) 6%, var(--surface)); }
.ficha-det[open] summary { border-bottom: 1px dashed var(--line); }
.ficha-detalle { padding: 12px; display: grid; gap: 10px; }
.cara { display: flex; gap: 10px; align-items: flex-start; }
.cara-avatar { width: 52px; height: 52px; flex: none; }
.cara-cuerpo { flex: 1; min-width: 0; display: grid; gap: 6px; }
.cara-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.cara-tit h4 { margin: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; min-width: 0; }
.cara-tit .est { flex: none; }
.cara-num { display: flex; align-items: baseline; gap: 6px; }
.cara-num b { font-size: 28px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cara-num span { font-size: 12px; color: var(--muted); }

.saltos { display: none; }
.cerrados { margin: 0 16px 16px; border: 1px dashed var(--line); border-radius: 12px; padding: 8px 12px; }
.cerrados summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.cerrados .chips { margin-top: 8px; }
.ficha-det .cifras { gap: 18px; }

/* Móvil y tabletas: una sola columna, la página se desplaza entera y la barra de zonas queda fija arriba */
@media (max-width: 1100px) {
  .zonas { grid-template-columns: minmax(0, 1fr); grid-template-areas: "oficina" "locales" "repartidores"; }
  .escenario { height: auto; min-height: 0; }
  .vista { position: static; }
  .vista.lista { overflow: visible; padding: 12px; }
  .saltos { display: flex; gap: 6px; position: sticky; top: 0; z-index: 5; padding: 8px 0; margin: -4px 0 8px; background: var(--stage); overflow-x: auto; }
  .salto { flex: none; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; font-weight: 600; font-size: 13px; }
  .salto:hover { border-color: var(--accent); }
}
@media (max-width: 760px) {
  .agentes { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .fichas { padding: 12px; grid-template-columns: minmax(0, 1fr); }
  .gran { font-size: 27px; }
  .zona-cab { padding: 12px; }
  .cerrados { margin: 0 12px 12px; }
}

/* ================= Vida: personajes, cajitas, bocadillos y calles ================= */
.tile { position: relative; min-width: 0; }
.tile:has(.bocadillo.ver) { z-index: 6; }
.pop { animation: pop .45s ease; }
.cara-num b, .gran, .cifra b { display: inline-block; transform-origin: left center; }
@keyframes pop { 40% { transform: scale(1.16); } }

/* Robots: respiran, parpadean y reaccionan a su estado */
.robot { overflow: visible; }
.rob { transform-box: fill-box; transform-origin: 50% 100%; animation: respira 3.4s ease-in-out infinite; }
.ficha-det .robot { animation-delay: calc(var(--i, 0) * .3s); }
@keyframes respira { 50% { transform: scaleY(1.035); } }
.ojos { transform-box: fill-box; transform-origin: center; animation: parpadea 5.2s infinite; }
@keyframes parpadea { 0%, 91%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.08); } }
.zzz { opacity: 0; }
.est-trabajando .rob, .agente.n-trab .rob { animation: trabaja .5s ease-in-out infinite alternate; }
@keyframes trabaja { to { transform: translateY(-2.2px); } }
.est-necesita .rob { animation: salta .75s ease-in-out infinite; }
@keyframes salta { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-6px); } }
.est-cerrado .rob { animation: none; filter: grayscale(.7) brightness(.92); }
.est-cerrado .ojos { animation: none; transform: scaleY(.1); }
.est-cerrado .zzz { animation: zzz 2.6s ease-in-out infinite; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 4px); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -8px); } }
.toldo { transform-box: fill-box; transform-origin: 50% 0; }
.est-trabajando .toldo, .est-necesita .toldo { animation: ondea 1.8s ease-in-out infinite alternate; }
@keyframes ondea { to { transform: skewX(3deg); } }
.papel { animation: papel 2.2s ease-in-out infinite alternate; }
.consultando .papel { animation-duration: .35s; }
@keyframes papel { to { translate: 0 -2.5px; } }
.haz { opacity: 0; }
.haz.alerta { opacity: 1; transform-origin: 32px 3px; animation: barre 1.1s linear infinite; }
@keyframes barre { to { transform: rotate(360deg); } }
.sirena.alerta { animation: parpadeo .8s steps(2, jump-none) infinite; }
.bombilla { animation: bombilla 2.4s ease-in-out infinite; }
@keyframes bombilla { 50% { opacity: .45; } }
.agente.alarma { animation: alarma .5s 6; }
@keyframes alarma { 50% { box-shadow: 0 0 0 4px var(--bad-soft), 0 0 24px var(--bad); } }
.est-necesita .ficha-det { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft); }

/* Una cajita por cada pedido pendiente: cae al llegar uno nuevo */
.cajas { display: flex; flex-wrap: wrap; gap: 4px; min-height: 16px; align-items: flex-end; }
.caja { width: 18px; height: 14px; border-radius: 3px; position: relative; box-shadow: inset 0 -3px 0 rgba(0,0,0,.16); }
.caja::after { content: ""; position: absolute; left: 3px; right: 3px; top: 3px; height: 2px; border-radius: 1px; background: rgba(255,255,255,.55); }
.c-n { background: var(--f-n); box-shadow: 0 0 0 1px var(--f-n-ring); } .c-p { background: var(--f-p); } .c-l { background: var(--f-l); } .c-m { background: var(--f-m); }
.caja.nueva { animation: cae .55s cubic-bezier(.3, 1.7, .5, 1) both; }
@keyframes cae { from { transform: translateY(-20px) rotate(-14deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* Bocadillos y marcas flotantes que saltan con los eventos en directo */
.bocadillo { position: absolute; top: -12px; right: 10px; max-width: 80%; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--z, var(--accent)); border-radius: 10px; padding: 6px 10px; font-size: 12px; line-height: 1.35; box-shadow: var(--shadow); opacity: 0; transform: translateY(6px) scale(.96); pointer-events: none; transition: opacity .25s, transform .25s; z-index: 4; }
.bocadillo.ver { opacity: 1; transform: none; }
.flota { position: absolute; left: 50%; top: 34%; font-weight: 700; font-size: 13px; padding: 3px 11px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); pointer-events: none; animation: sube 1.9s ease-out forwards; z-index: 7; white-space: nowrap; }
.flota.nuevo { color: var(--info); } .flota.ok { color: var(--ok); } .flota.mal { color: var(--bad); } .flota.moto { color: var(--accent); } .flota.info { color: var(--muted); }
@keyframes sube { 0% { opacity: 0; transform: translate(-50%, 12px) scale(.8); } 15% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -52px); } }

/* La calle de cada repartidor: base, local y clientes; la moto circula de verdad */
.calle-via { --road-bg: #D9D5EC; position: relative; height: 94px; margin-top: 4px; border-radius: 14px; overflow: hidden; background: linear-gradient(to bottom, color-mix(in srgb, var(--z) 9%, var(--surface)) 0 56%, var(--road-bg) 56% 100%); }
@media (prefers-color-scheme: dark) { .calle-via { --road-bg: #24213A; } }
.parada { position: absolute; top: 6px; transform: translateX(-50%); display: grid; justify-items: center; color: var(--muted); font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; }
.parada em { font-style: normal; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-base { left: 10%; } .p-local { left: 50%; } .p-clientes { left: 90%; }
.rep-recoger .p-local { color: var(--accent); font-weight: 700; }
.rep-ruta .p-clientes { color: var(--z); font-weight: 700; }
.calle-via::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.75) 0 10px, transparent 10px 22px); animation: carretera .55s linear infinite; animation-play-state: paused; }
.rep-ruta .calle-via::after { animation-play-state: running; }
@keyframes carretera { to { background-position: -22px 0; } }
.moto-pos { position: absolute; bottom: 4px; left: 14%; width: 72px; margin-left: -36px; transition: left 2.6s cubic-bezier(.45, 0, .2, 1); }
.moto-giro { transform-origin: 50% 85%; }
.moto { width: 100%; display: block; overflow: visible; }
.rep-recoger .moto-pos { left: 50%; }
.rep-recoger .moto-giro { animation: espera 1.1s ease-in-out infinite alternate; }
@keyframes espera { to { transform: translateY(-3px); } }
.rep-ruta .moto-pos { animation: patrulla 10s ease-in-out infinite; }
@keyframes patrulla { 0% { left: 58%; } 46% { left: 90%; } 50% { left: 90%; } 96% { left: 58%; } 100% { left: 58%; } }
.rep-ruta .moto-giro { animation: voltea 10s steps(1, end) infinite; }
@keyframes voltea { 0% { transform: scaleX(1); } 48% { transform: scaleX(-1); } 98% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
.rueda { transform-box: fill-box; transform-origin: center; }
.rep-ruta .rueda { animation: giro .45s linear infinite; }
@keyframes giro { to { transform: rotate(360deg); } }
.rep-ruta .chasis { animation: vibra .28s ease-in-out infinite alternate; }
@keyframes vibra { to { transform: translateY(-1.2px); } }
.rep-libre .moto-giro { animation: respira 3.4s ease-in-out infinite; }
.rep-inactivo .moto-pos { filter: grayscale(1) opacity(.55); }
.rep-ruta .ficha-det, .rep-recoger .ficha-det { border-color: color-mix(in srgb, var(--z) 45%, var(--line)); }

/* Con cuatro pestañas, en el móvil caben todas en la barra */
@media (max-width: 640px) { .tabs button { padding-inline: 11px; } .barra-in { gap: 8px; } }

/* Revisión de facturas: pastillas nuevas, botón pequeño y diálogo */
.est.ignorada { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.est.rehacer { background: var(--info-soft); color: var(--info); }
.avisos-ocultos { margin: 4px 0 0; font-size: 12.5px; }
.btn.peq { padding: 3px 10px; font-size: 12.5px; margin-top: 6px; }
.dlg-factura { border: 1px solid var(--line); border-radius: 16px; padding: 18px; width: min(520px, calc(100vw - 32px)); background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.dlg-factura::backdrop { background: rgba(20, 14, 50, .45); }
.dlg-factura h3 { margin: 0 0 4px; }
.dlg-factura p { margin: 6px 0; }
.dlg-factura .avisos { margin: 8px 0; padding-left: 18px; }
.dlg-opciones { display: grid; gap: 8px; margin-top: 12px; }
.dlg-opcion { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); background: var(--surface-2); border-radius: 12px; padding: 10px 14px; }
.dlg-opcion b { font-size: 14px; }
.dlg-opcion span { color: var(--muted); font-size: 12.5px; }
.dlg-opcion:hover, .dlg-opcion:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.dlg-opcion.vuelve { border-style: dashed; }
.dlg-pie { display: flex; justify-content: flex-end; margin-top: 12px; }