/* ============================================================
     SISTEMA DE DISEÑO — Preventa & Despacho
     Paleta, tipografía y componentes reutilizables (variables CSS).
     El HTML generado por los .js no cambia de nombres de clase; este
     archivo solo redefine cómo se ven esas mismas clases.
     ============================================================ */
  :root{
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    --c-bg:#f2f4f7;
    --c-surface:#ffffff;
    --c-surface-2:#f7f8fa;
    --c-border:#e3e6eb;
    --c-text:#1a1d24;
    --c-text-muted:#667085;
    --c-navy:#152233;
    --c-navy-2:#1e3049;
    --c-primary:#2563eb;
    --c-primary-dark:#1d4ed8;
    --c-primary-light:#e8f0fe;
    --c-success:#15803d;
    --c-success-bg:#dcf5e5;
    --c-danger:#dc2626;
    --c-danger-bg:#fbdada;
    --c-warn:#b45309;
    --c-warn-bg:#fdeccb;
    --c-info:#0b5aa3;
    --c-info-bg:#d3ecff;
    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:14px;
    --shadow-sm:0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    --shadow-md:0 4px 12px rgba(16,24,40,.12);
    --shadow-lg:0 12px 32px rgba(16,24,40,.20);
  }

  * { box-sizing: border-box; }
  body { margin:0; font-family: var(--font-sans); background:var(--c-bg); color:var(--c-text); -webkit-font-smoothing:antialiased; }
  ::selection{ background:var(--c-primary-light); color:var(--c-primary-dark); }
  /* 100dvh (con 100vh como respaldo en navegadores viejos que no lo entienden):
     en el celular, 100vh mide el alto de la pantalla completa como si la barra
     de direcciones/barra inferior del navegador NO estuvieran ahí — el
     resultado real queda más alto de lo que en verdad se ve, así que
     cualquier cosa pegada abajo (como el botón flotante "Ruta finalizada" del
     vendedor) terminaba tapada detrás de esa barra del navegador, invisible,
     sin forma de hacer scroll para verla porque el mapa no se desplaza.
     100dvh sí se recalcula cuando esa barra aparece o desaparece. */
  #app { display:flex; flex-direction:column; height:100vh; height:100dvh; }

  /* ---------------- Encabezado ---------------- */
  header { background:linear-gradient(180deg,var(--c-navy) 0%,var(--c-navy-2) 100%); color:#fff; padding:10px 18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; box-shadow:0 2px 8px rgba(0,0,0,.18); position:relative; z-index:10; }
  .brand { display:flex; align-items:center; gap:9px; margin-right:4px; }
  .brand-mark { width:30px; height:30px; border-radius:9px; background:var(--c-primary); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; box-shadow:0 1px 3px rgba(0,0,0,.3); }
  header h1 { font-size:15.5px; font-weight:700; margin:0; letter-spacing:.1px; white-space:nowrap; }
  .who { font-size:12.5px; color:#c3ceda; margin-left:auto; display:flex; align-items:center; gap:10px; }
  .hdr-select { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
  .hdr-select label { font-size:12px; color:#aebbc9; margin-right:4px; }
  /* Fila con la fecha de Seguimiento del supervisor + su botón "Salir",
     ambos juntos en el encabezado (ver renderHeader() en app.js) — se
     empuja a la derecha, donde antes quedaba el "Salir" de .who. */
  .hdr-select.hdr-select-compact { margin-left:auto; }
  .hdr-date-row { display:flex; align-items:center; gap:8px; }
  .hdr-date-row label { font-size:12px; color:#c3ceda; }
  .hdr-date-row input[type=date] { border:1px solid rgba(255,255,255,.35); border-radius:6px; padding:4px 6px; font-size:12px; font-family:var(--font-sans); background:#fff; }

  select, input[type=text], input[type=password], input[type=date] {
    padding:7px 9px; border-radius:var(--radius-sm); border:1px solid #ccd1d9; font-size:13px;
    font-family:var(--font-sans); background:#fff; color:var(--c-text);
    transition:border-color .15s, box-shadow .15s;
  }
  select:focus, input[type=text]:focus, input[type=password]:focus, input[type=date]:focus {
    outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-light);
  }

  main { flex:1; display:flex; overflow:hidden; position:relative; }

  /* ---------------- Barra lateral ---------------- */
  #sidebar { width:340px; background:var(--c-surface); border-right:1px solid var(--c-border); overflow-y:auto; padding:14px; flex-shrink:0; }
  #sidebar::-webkit-scrollbar{ width:9px; }
  #sidebar::-webkit-scrollbar-track{ background:transparent; }
  #sidebar::-webkit-scrollbar-thumb{ background:#d3d7de; border-radius:6px; }
  #sidebar::-webkit-scrollbar-thumb:hover{ background:#b7bcc6; }

  /* SIN transition acá a propósito: cuando gira con dos dedos, rotateMainMap()
     actualiza style.transform en cada cuadro (varias veces por segundo). Si
     el giro tuviera transición, cada una de esas actualizaciones arrancaba
     su propia animación de .15s montada sobre la anterior — el giro se
     sentía "atrasado" respecto al dedo y descontrolado (a veces hasta se
     pasaba de la posición y regresaba). La animación suave para el giro por
     BOTONES (que sí se ve bien, porque es un solo salto discreto de 15°) se
     agrega aparte con la clase .map-rotate-anim, ver rotateMainMap(). */
  #map { position:absolute; top:50%; left:50%; transform-origin:center center; }
  #map.map-rotate-anim { transition:transform .15s; }
  .mapwrap { overflow:hidden; background:#e8eaee; }

  /* ---------------- Controles flotantes del mapa ---------------- */
  .mapctrl { position:absolute; z-index:950; display:flex; align-items:center; gap:4px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-radius:10px; padding:4px; box-shadow:var(--shadow-md); border:1px solid rgba(255,255,255,.6); }
  .mapctrl button { width:32px; height:32px; border:none; background:var(--c-navy); color:#fff; border-radius:7px; font-size:16px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s, transform .1s; }
  .mapctrl button:hover { background:var(--c-primary); }
  .mapctrl button:active { transform:scale(.92); }
  .mapctrl-zoom { top:10px; left:10px; flex-direction:column; }
  .mapctrl-rotate { top:10px; right:10px; }
  #mapRotateLabel { font-size:11px; color:#444; min-width:28px; text-align:center; font-weight:600; }

  /* ---------------- Vendedor: mapa a pantalla completa ---------------- */
  /* Para este rol el mapa ocupa toda la pantalla (sin panel lateral) y los
     controles viven flotando encima, en tres piezas: la barra de arriba
     (vendedor-topbar), el panel de clientes (vendedor-clients-panel) y el
     botón de abajo (vendedor-bottombar) — ver renderVendedor() en
     vendedor.js. El control de zoom/giro se corre más abajo para no quedar
     tapado por la barra de arriba. */
  #app.vendedor-fullmap #sidebar { display:none; }
  #app.vendedor-fullmap .mapctrl-zoom,
  #app.vendedor-fullmap .mapctrl-rotate { top:64px; }

  .vendedor-topbar { position:absolute; top:10px; left:10px; right:10px; z-index:960; display:flex; gap:6px; flex-wrap:wrap; }
  .vendedor-topbar button {
    flex:1 1 0; min-width:0; border:none; border-radius:var(--radius-md);
    background:linear-gradient(135deg,var(--c-navy-2),var(--c-navy)); color:#fff;
    font-size:10.5px; line-height:1.25; font-weight:700; letter-spacing:.1px; text-transform:uppercase;
    padding:9px 4px; cursor:pointer; box-shadow:var(--shadow-md);
    white-space:normal; word-break:break-word; overflow-wrap:break-word;
    transition:background .15s, transform .1s;
  }
  .vendedor-topbar button:active { transform:scale(.96); }
  .vendedor-topbar button.active { background:linear-gradient(135deg,#4f8fd1,#3b7bc4); }
  .vendedor-topbar button.warn { background:linear-gradient(135deg,#c9670f,var(--c-warn)); }
  .vendedor-topbar .vendedor-topbar-hint {
    flex:1 1 100%; background:#fffbe6; border:1px solid #f0d878; color:#7a5c00;
    font-size:11.5px; padding:6px 10px; border-radius:var(--radius-sm); margin-top:2px;
    cursor:pointer; user-select:none;
  }

  .vendedor-bottombar { position:absolute; bottom:10px; left:10px; z-index:960; }
  .vendedor-bottombar button {
    border:none; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--c-navy-2),var(--c-navy));
    color:#fff; font-size:12px; font-weight:700; letter-spacing:.2px; text-transform:uppercase;
    padding:11px 18px; cursor:pointer; box-shadow:var(--shadow-md);
  }
  .vendedor-bottombar button:active { transform:scale(.96); }

  .vendedor-clients-panel {
    position:absolute; top:64px; left:10px; width:270px; max-width:calc(100% - 20px);
    max-height:min(64vh, 520px); overflow-y:auto; background:var(--c-surface);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--c-border);
    z-index:955; padding:12px;
  }
  .vendedor-clients-panel h3 { margin:0 0 10px; font-size:14px; }
  .vendedor-clients-panel .vc-row {
    display:flex; justify-content:space-between; align-items:center; gap:8px;
    background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:var(--radius-sm);
    padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:12.5px; font-weight:600;
    transition:background .15s;
  }
  .vendedor-clients-panel .vc-row:last-child { margin-bottom:0; }
  .vendedor-clients-panel .vc-row:hover { background:#eef1f5; }
  .vendedor-clients-panel .vc-row span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ---------------- Transportista: mapa a pantalla completa ---------------- */
  /* Mismo esquema que el vendedor (arriba), pero con un panel extra de solo
     lectura para las zonas de la ruta (ver renderTransportista() en
     transportista.js): el transportista puede ver el nombre de cada zona y
     su vendedor, y elegir "Todas" o una sola para filtrar tanto el mapa
     como la lista de clientes — no puede editarlas ni borrarlas. */
  #app.transportista-fullmap #sidebar { display:none; }
  #app.transportista-fullmap .mapctrl-zoom,
  #app.transportista-fullmap .mapctrl-rotate { top:64px; }

  .transportista-topbar { position:absolute; top:10px; left:10px; right:10px; z-index:960; display:flex; gap:6px; flex-wrap:wrap; }
  .transportista-topbar button {
    flex:1 1 0; min-width:0; border:none; border-radius:var(--radius-md);
    background:linear-gradient(135deg,var(--c-navy-2),var(--c-navy)); color:#fff;
    font-size:10.5px; line-height:1.25; font-weight:700; letter-spacing:.1px; text-transform:uppercase;
    padding:9px 4px; cursor:pointer; box-shadow:var(--shadow-md);
    white-space:normal; word-break:break-word; overflow-wrap:break-word;
    transition:background .15s, transform .1s;
  }
  .transportista-topbar button:active { transform:scale(.96); }
  .transportista-topbar button.active { background:linear-gradient(135deg,#4f8fd1,#3b7bc4); }

  .transportista-bottombar { position:absolute; bottom:10px; left:10px; z-index:960; }
  .transportista-bottombar button {
    border:none; border-radius:var(--radius-md); background:linear-gradient(135deg,var(--c-navy-2),var(--c-navy));
    color:#fff; font-size:12px; font-weight:700; letter-spacing:.2px; text-transform:uppercase;
    padding:11px 18px; cursor:pointer; box-shadow:var(--shadow-md);
  }
  .transportista-bottombar button:active { transform:scale(.96); }

  .transportista-zonas-panel, .transportista-clients-panel {
    position:absolute; top:64px; left:10px; width:270px; max-width:calc(100% - 20px);
    max-height:min(64vh, 520px); overflow-y:auto; background:var(--c-surface);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--c-border);
    z-index:955; padding:12px;
  }
  .transportista-zonas-panel h3, .transportista-clients-panel h3 { margin:0 0 10px; font-size:14px; }
  .transportista-zonas-panel .tz-row {
    display:flex; align-items:center; gap:8px;
    background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:var(--radius-sm);
    padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:12.5px; font-weight:600;
    transition:background .15s;
  }
  .transportista-zonas-panel .tz-row:hover { background:#eef1f5; }
  .transportista-zonas-panel .tz-row.active { background:#e3edfb; border-color:#4f8fd1; }
  .transportista-zonas-panel .tz-note { border-top:1px solid var(--c-border); margin-top:10px; padding-top:2px; }

  /* Panel de clientes: nombre más grande, botones de marcar más chicos
     (pedido explícito: menos protagonismo para los botones, más para el
     nombre del cliente que se está entregando). */
  .transportista-clients-panel .tc-card {
    background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:var(--radius-sm);
    padding:10px 12px; margin-bottom:10px;
  }
  .transportista-clients-panel .tc-card:last-child { margin-bottom:0; }
  .transportista-clients-panel .tc-name { margin:0 0 3px; font-size:15px; font-weight:800; color:var(--c-text); }
  .transportista-clients-panel .tc-actions { margin-top:6px; }
  .transportista-clients-panel .tc-actions button.btn { flex:1 1 0; min-width:0; padding:5px 4px; font-size:10.5px; }

  /* ---------------- Supervisor: mapa a pantalla completa ---------------- */
  /* Mismo esquema que vendedor/transportista (arriba), pero de solo
     lectura: 3 botones arriba (Vendedores/Transportistas/Informes) y un
     solo panel flotante que reutiliza tal cual renderSeguimiento()/
     renderInformes() — las mismas pantallas que ya usan admin/logístico/
     observador desde su panel lateral, ver renderSupervisor() en
     admin-despacho.js. Sin barra de abajo (no hay ruta que iniciar o
     finalizar). El panel va de borde a borde (no un ancho fijo como el del
     vendedor) porque adentro trae tablas de reporte que necesitan más
     espacio en la pantalla del celular. */
  #app.supervisor-fullmap #sidebar { display:none; }
  #app.supervisor-fullmap .mapctrl-zoom,
  #app.supervisor-fullmap .mapctrl-rotate { top:64px; }

  .supervisor-topbar { position:absolute; top:10px; left:10px; right:10px; z-index:960; display:flex; gap:6px; flex-wrap:wrap; }
  .supervisor-topbar button {
    flex:1 1 0; min-width:0; border:none; border-radius:var(--radius-md);
    background:linear-gradient(135deg,var(--c-navy-2),var(--c-navy)); color:#fff;
    font-size:10.5px; line-height:1.25; font-weight:700; letter-spacing:.1px; text-transform:uppercase;
    padding:9px 4px; cursor:pointer; box-shadow:var(--shadow-md);
    white-space:normal; word-break:break-word; overflow-wrap:break-word;
    transition:background .15s, transform .1s;
  }
  .supervisor-topbar button:active { transform:scale(.96); }
  .supervisor-topbar button.active { background:linear-gradient(135deg,#4f8fd1,#3b7bc4); }

  .supervisor-panel {
    position:absolute; top:64px; left:10px; right:10px;
    max-height:min(70vh, 560px); overflow-y:auto; overflow-x:auto; background:var(--c-surface);
    border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); border:1px solid var(--c-border);
    z-index:955; padding:12px;
  }
  .supervisor-panel h3 { margin:0 0 10px; font-size:14px; }
  /* Lista para elegir a quién ver (o "Todos") — mismo estilo que .tz-row del
     transportista (filtro de ZONAS), reutilizado aquí para el mismo tipo de
     interacción: tocar una fila, la ventana se cierra sola. */
  .supervisor-panel .tz-row {
    display:flex; align-items:center; gap:8px;
    background:var(--c-surface-2); border:1px solid var(--c-border); border-radius:var(--radius-sm);
    padding:10px 12px; margin-bottom:8px; cursor:pointer; font-size:12.5px; font-weight:600;
    transition:background .15s;
  }
  .supervisor-panel .tz-row:hover { background:#eef1f5; }
  .supervisor-panel .tz-row.active { background:#e3edfb; border-color:#4f8fd1; }

  /* ---------------- Navegación por pestañas ---------------- */
  .subtabs { display:flex; gap:4px; margin-bottom:12px; flex-wrap:wrap; background:var(--c-surface-2); padding:4px; border-radius:var(--radius-md); border:1px solid var(--c-border); }
  .subtabs button { flex:1; min-width:90px; background:transparent; border:none; padding:8px 6px; border-radius:7px; font-size:12px; cursor:pointer; font-weight:600; color:var(--c-text-muted); font-family:var(--font-sans); transition:background .15s, color .15s; }
  .subtabs button:hover:not(.active) { background:rgba(0,0,0,.04); color:var(--c-text); }
  .subtabs button.active { background:var(--c-navy); color:#fff; box-shadow:var(--shadow-sm); }

  /* ---------------- Tarjetas ---------------- */
  .card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:12px 14px; margin-bottom:10px; box-shadow:var(--shadow-sm); }
  .card h3 { margin:0 0 8px; font-size:13px; font-weight:700; color:var(--c-text); letter-spacing:.1px; }
  .card p { margin:3px 0; font-size:12.5px; color:#555; line-height:1.45; }

  .row { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }

  /* ---------------- Botones ---------------- */
  button.btn {
    background:var(--c-primary); color:#fff; border:none; padding:8px 12px; border-radius:var(--radius-sm);
    font-size:12px; cursor:pointer; font-weight:600; font-family:var(--font-sans);
    transition:background .15s, transform .08s, box-shadow .15s; box-shadow:0 1px 2px rgba(0,0,0,.08);
  }
  button.btn:hover { background:var(--c-primary-dark); }
  button.btn:active { transform:translateY(1px); }
  button.btn:focus-visible { outline:2px solid var(--c-primary-dark); outline-offset:2px; }
  button.btn.secondary { background:var(--c-surface-2); color:var(--c-text); border:1px solid var(--c-border); box-shadow:none; }
  button.btn.secondary:hover { background:#eceef2; }
  button.btn.success { background:var(--c-success); }
  button.btn.success:hover { background:#0f6b32; }
  button.btn.success::before { content:'\2713\00A0'; }
  button.btn.danger { background:var(--c-danger); }
  button.btn.danger:hover { background:#b91c1c; }
  button.btn.danger::before { content:'\2715\00A0'; }
  button.btn.warn { background:var(--c-warn); }
  button.btn.warn:hover { background:#92400a; }
  button.btn:disabled { opacity:.5; cursor:default; transform:none; }
  a.btn { display:inline-block; text-decoration:none; }

  /* ---------------- Menú de "Zonas y mapas" (Zonas / Dibujar zonas / Agregar clientes) ---------------- */
  .zonas-menu { display:flex; flex-direction:column; gap:14px; padding-top:6px; }
  .zonas-menu-btn {
    width:100%; padding:20px 18px; border:none; border-radius:var(--radius-lg);
    background:linear-gradient(135deg,var(--c-navy-2),var(--c-navy)); color:#fff;
    font-size:15px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
    font-family:var(--font-sans); cursor:pointer; box-shadow:var(--shadow-md);
    transition:transform .12s, box-shadow .15s;
  }
  .zonas-menu-btn:hover { box-shadow:var(--shadow-lg); transform:translateY(-1px); }
  .zonas-menu-btn:active { transform:translateY(0); }
  .zonas-back-btn {
    width:100%; padding:13px 16px; border:none; border-radius:var(--radius-md);
    background:linear-gradient(135deg,var(--c-navy-2),var(--c-navy)); color:#fff;
    font-size:13px; font-weight:700; letter-spacing:.2px; text-transform:uppercase;
    font-family:var(--font-sans); cursor:pointer; margin-bottom:12px; text-align:left;
    box-shadow:var(--shadow-sm); transition:box-shadow .15s;
  }
  .zonas-back-btn:hover { box-shadow:var(--shadow-md); }

  /* ---------------- Estados (badges) ---------------- */
  .badge { display:inline-flex; align-items:center; gap:3px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.1px; }
  .b-pendiente { background:#eef0f2; color:#565d68; }
  .b-pendiente::before { content:'\25CB'; }
  .b-visitado { background:var(--c-warn-bg); color:#8a5a06; }
  .b-visitado::before { content:'\25D0'; }
  .b-venta { background:var(--c-success-bg); color:var(--c-success); }
  .b-venta::before { content:'\2713'; }
  .b-rechazado { background:var(--c-danger-bg); color:#a11d1d; }
  .b-rechazado::before { content:'\2715'; }
  .b-entregado { background:var(--c-info-bg); color:var(--c-info); }
  .b-entregado::before { content:'\2713'; }
  .b-cerrado { background:#e4e6ea; color:#3a3a3a; }
  .b-cerrado::before { content:'\25A0'; font-size:8px; }

  /* ---------------- Formularios ---------------- */
  .field { margin-bottom:10px; }
  .field label { display:block; font-size:11.5px; color:#666; margin-bottom:4px; font-weight:600; }
  .field select, .field input { width:100%; }
  .legend-dot { width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; vertical-align:middle; }
  .hint { font-size:11.5px; color:#888; margin-top:4px; line-height:1.4; }
  .listitem { display:flex; justify-content:space-between; align-items:center; padding:7px 2px; border-bottom:1px solid #eee; font-size:12.5px; border-radius:6px; transition:background .15s; }
  .listitem:hover { background:var(--c-surface-2); }
  .small { font-size:11px; color:#888; }

  table.report { width:100%; border-collapse:collapse; font-size:12px; }
  table.report th, table.report td { text-align:left; padding:7px 6px; border-bottom:1px solid #eee; }
  table.report th { color:#667085; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; background:var(--c-surface-2); }
  table.report tr:hover td { background:var(--c-surface-2); }

  /* ---------------- Panel flotante (formularios sobre el mapa) ---------------- */
  #floatform { position:absolute; z-index:1000; background:var(--c-surface); padding:12px; border-radius:var(--radius-md); box-shadow:var(--shadow-lg); border:1px solid var(--c-border); top:14px; left:356px; width:230px; display:none; }
  #geoNote { position:absolute; bottom:10px; left:356px; background:#fffbe6; border:1px solid #f0d878; padding:7px 11px; border-radius:var(--radius-sm); font-size:11.5px; color:#7a5c00; display:none; z-index:900; box-shadow:var(--shadow-sm); }

  .listitem.selected { background:#fff3cd; outline:2px solid var(--c-warn); border-radius:6px; padding-left:6px; padding-right:6px; }
  .card.selected { background:#fffaf0; border-color:var(--c-warn); box-shadow:0 0 0 2px var(--c-warn); }

  /* ---------------- Menú de clic derecho sobre una zona (Rutas reparto) ---------------- */
  .zone-print-menu { position:fixed; z-index:3000; background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-sm); box-shadow:var(--shadow-lg); padding:4px; }
  .zone-print-menu button { display:block; width:100%; white-space:nowrap; text-align:left; background:none; border:none; padding:8px 12px; font-size:13px; font-family:var(--font-sans); color:var(--c-text); cursor:pointer; border-radius:4px; }
  .zone-print-menu button:hover { background:var(--c-surface-2); }

  .daychips { display:flex; gap:4px; flex-wrap:wrap; }
  .daychip { flex:1; min-width:44px; background:var(--c-surface-2); border:1px solid var(--c-border); padding:8px 4px; border-radius:var(--radius-sm); font-size:12px; font-weight:600; color:#444; cursor:pointer; font-family:var(--font-sans); transition:background .15s, color .15s; }
  .daychip:hover:not(.active) { background:#eceef2; }
  .daychip.active { background:var(--c-navy); color:#fff; border-color:var(--c-navy); }

  /* ---------------- Pantalla de acceso ---------------- */
  #loginScreen { position:fixed; inset:0; background:radial-gradient(circle at 20% 20%, var(--c-navy-2) 0%, var(--c-navy) 55%, #0d1622 100%); display:flex; align-items:center; justify-content:center; z-index:5000; padding:20px; }
  .loginbox { background:var(--c-surface); border-radius:var(--radius-lg); padding:32px 28px; width:320px; max-width:100%; box-shadow:var(--shadow-lg); text-align:center; }
  .login-mark { width:52px; height:52px; border-radius:14px; background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark)); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 14px; box-shadow:var(--shadow-md); }
  .loginbox h2 { margin:0 0 4px; font-size:19px; font-weight:700; }
  .loginbox p.small { margin:0 0 18px; text-align:center; }
  .loginbox input { width:100%; margin-bottom:10px; padding:10px 11px; font-size:14px; text-align:center; }
  .loginbox button.btn { width:100%; padding:11px; font-size:13px; border-radius:var(--radius-sm); }
  .loginbox .err { color:var(--c-danger); font-size:12px; min-height:16px; margin-bottom:6px; font-weight:600; }
  .demo-codes { margin-top:18px; border-top:1px solid #eee; padding-top:12px; font-size:11px; color:#888; text-align:left; line-height:1.8; }

  /* ============================================================
     RESPONSIVE — tres franjas: celular, tablet y escritorio
     ============================================================ */

  /* ---- Tablet: barra lateral más angosta, mismo layout horizontal ---- */
  @media (min-width:769px) and (max-width:1100px) {
    #sidebar { width:280px; padding:12px; }
    header { padding:9px 14px; gap:12px; }
    #floatform, #geoNote { left:296px; }
  }

  /* ---- Celular: prioriza el mapa, controles más grandes para el dedo ---- */
  @media (max-width: 768px) {
    main { flex-direction: column; }
    #sidebar { width:100%; height:40vh; order:2; border-right:none; border-top:1px solid var(--c-border); flex-shrink:0; }
    .mapwrap { order:1; flex:1 1 auto; min-height:0; }
    header { padding:8px 10px; gap:8px; }
    .brand-mark { width:26px; height:26px; font-size:13px; }
    header h1 { font-size:14px; }
    .who { font-size:11.5px; margin-left:0; width:100%; justify-content:space-between; }
    .hdr-select { width:100%; }
    /* La fila de fecha+Salir del supervisor sí cabe junto al logo en la
       misma línea (no necesita todo el ancho como las pestañas de admin). */
    .hdr-select.hdr-select-compact { width:auto; }
    .subtabs { gap:3px; }
    .subtabs button { min-width:0; font-size:10.5px; padding:8px 3px; }
    button.btn, button.btn.secondary, .daychip { min-height:40px; }
    .mapctrl button { width:36px; height:36px; }
    #floatform { left:8px; right:8px; width:auto; top:auto; bottom:8px; }
    #geoNote { left:8px; right:8px; }
  }