/*
  base.css — Mugi v2. Extensión de tokens (pasteles semánticos) + componentes base.
  Se carga DESPUÉS de tokens.css (Core literal). Sesión A, 2026-09-03.
  Reglas: neutros a chroma 0; color SOLO donde significa un dato; pasteles solo en chips/estados/
  franjas pequeñas; cortes rectos (excepciones: spinner y palanca on/off); sombra = hairline;
  dark por elevación; cero emojis; cifras en IBM Plex Mono.
  Contrastes texto-sobre-pastel calculados (WCAG): claro 4.51-6.81:1, oscuro 4.51-4.56:1.
*/

/* ---------- 1. Extensión de tokens (claro) ---------- */
:root{
  /* warn se libera a ámbar (en Mugi sí se acepta amarillo); info es nuevo */
  --ok:   oklch(0.550 0.155 152); --ok-bg:   oklch(0.955 0.045 152); --ok-border:   oklch(0.850 0.095 152); --ok-text:   oklch(0.450 0.135 152);
  --warn: oklch(0.550 0.155 70);  --warn-bg: oklch(0.955 0.045 70);  --warn-border: oklch(0.850 0.095 70);  --warn-text: oklch(0.450 0.135 70);
  --bad:  oklch(0.550 0.155 22);  --bad-bg:  oklch(0.955 0.045 22);  --bad-border:  oklch(0.850 0.095 22);  --bad-text:  oklch(0.450 0.135 22);
  --info: oklch(0.550 0.155 258); --info-bg: oklch(0.955 0.045 258); --info-border: oklch(0.850 0.095 258); --info-text: oklch(0.450 0.135 258);

  /* Etapas del cliente */
  --nuevo:        oklch(0.550 0.155 295); --nuevo-bg:        oklch(0.955 0.045 295); --nuevo-border:        oklch(0.850 0.095 295); --nuevo-text:        oklch(0.450 0.135 295);
  --conversacion: oklch(0.550 0.155 215); --conversacion-bg: oklch(0.955 0.045 215); --conversacion-border: oklch(0.850 0.095 215); --conversacion-text: oklch(0.450 0.135 215);
  --pedido:       oklch(0.550 0.155 40);  --pedido-bg:       oklch(0.955 0.045 40);  --pedido-border:       oklch(0.850 0.095 40);  --pedido-text:       oklch(0.450 0.135 40);
  --pagado:       oklch(0.550 0.155 165); --pagado-bg:       oklch(0.955 0.045 165); --pagado-border:       oklch(0.850 0.095 165); --pagado-text:       oklch(0.450 0.135 165);
  --entregado:    oklch(0.550 0.155 277); --entregado-bg:    oklch(0.955 0.045 277); --entregado-border:    oklch(0.850 0.095 277); --entregado-text:    oklch(0.450 0.135 277);

  /* Canales (identidad, no semáforo) */
  --whatsapp:  oklch(0.550 0.155 150); --whatsapp-bg:  oklch(0.955 0.045 150); --whatsapp-border:  oklch(0.850 0.095 150); --whatsapp-text:  oklch(0.450 0.135 150);
  --instagram: oklch(0.550 0.155 350); --instagram-bg: oklch(0.955 0.045 350); --instagram-border: oklch(0.850 0.095 350); --instagram-text: oklch(0.450 0.135 350);
  --messenger: oklch(0.550 0.155 258); --messenger-bg: oklch(0.955 0.045 258); --messenger-border: oklch(0.850 0.095 258); --messenger-text: oklch(0.450 0.135 258);

  /* Layout */
  --sidebar-w: 232px; --ficha-w: 340px; --lista-w: 320px; --header-h: 52px;
  --overlay: oklch(0 0 0 / .45);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink);
}

/* ---------- 2. Extensión de tokens (oscuro, elevación) ---------- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ok:   oklch(0.780 0.135 152); --ok-bg:   oklch(0.280 0.055 152); --ok-border:   oklch(0.420 0.090 152); --ok-text:   oklch(0.640 0.130 152);
    --warn: oklch(0.780 0.135 70);  --warn-bg: oklch(0.280 0.055 70);  --warn-border: oklch(0.420 0.090 70);  --warn-text: oklch(0.655 0.130 70);
    --bad:  oklch(0.780 0.135 22);  --bad-bg:  oklch(0.280 0.055 22);  --bad-border:  oklch(0.420 0.090 22);  --bad-text:  oklch(0.660 0.130 22);
    --info: oklch(0.780 0.135 258); --info-bg: oklch(0.280 0.055 258); --info-border: oklch(0.420 0.090 258); --info-text: oklch(0.650 0.130 258);
    --nuevo:        oklch(0.780 0.135 295); --nuevo-bg:        oklch(0.280 0.055 295); --nuevo-border:        oklch(0.420 0.090 295); --nuevo-text:        oklch(0.660 0.130 295);
    --conversacion: oklch(0.780 0.135 215); --conversacion-bg: oklch(0.280 0.055 215); --conversacion-border: oklch(0.420 0.090 215); --conversacion-text: oklch(0.640 0.130 215);
    --pedido:       oklch(0.780 0.135 40);  --pedido-bg:       oklch(0.280 0.055 40);  --pedido-border:       oklch(0.420 0.090 40);  --pedido-text:       oklch(0.660 0.130 40);
    --pagado:       oklch(0.780 0.135 165); --pagado-bg:       oklch(0.280 0.055 165); --pagado-border:       oklch(0.420 0.090 165); --pagado-text:       oklch(0.640 0.130 165);
    --entregado:    oklch(0.780 0.135 277); --entregado-bg:    oklch(0.280 0.055 277); --entregado-border:    oklch(0.420 0.090 277); --entregado-text:    oklch(0.655 0.130 277);
    --whatsapp:  oklch(0.780 0.135 150); --whatsapp-bg:  oklch(0.280 0.055 150); --whatsapp-border:  oklch(0.420 0.090 150); --whatsapp-text:  oklch(0.640 0.130 150);
    --instagram: oklch(0.780 0.135 350); --instagram-bg: oklch(0.280 0.055 350); --instagram-border: oklch(0.420 0.090 350); --instagram-text: oklch(0.665 0.130 350);
    --messenger: oklch(0.780 0.135 258); --messenger-bg: oklch(0.280 0.055 258); --messenger-border: oklch(0.420 0.090 258); --messenger-text: oklch(0.650 0.130 258);
    --overlay: oklch(0 0 0 / .6);
  }
}
:root[data-theme="dark"]{
  --ok:   oklch(0.780 0.135 152); --ok-bg:   oklch(0.280 0.055 152); --ok-border:   oklch(0.420 0.090 152); --ok-text:   oklch(0.640 0.130 152);
  --warn: oklch(0.780 0.135 70);  --warn-bg: oklch(0.280 0.055 70);  --warn-border: oklch(0.420 0.090 70);  --warn-text: oklch(0.655 0.130 70);
  --bad:  oklch(0.780 0.135 22);  --bad-bg:  oklch(0.280 0.055 22);  --bad-border:  oklch(0.420 0.090 22);  --bad-text:  oklch(0.660 0.130 22);
  --info: oklch(0.780 0.135 258); --info-bg: oklch(0.280 0.055 258); --info-border: oklch(0.420 0.090 258); --info-text: oklch(0.650 0.130 258);
  --nuevo:        oklch(0.780 0.135 295); --nuevo-bg:        oklch(0.280 0.055 295); --nuevo-border:        oklch(0.420 0.090 295); --nuevo-text:        oklch(0.660 0.130 295);
  --conversacion: oklch(0.780 0.135 215); --conversacion-bg: oklch(0.280 0.055 215); --conversacion-border: oklch(0.420 0.090 215); --conversacion-text: oklch(0.640 0.130 215);
  --pedido:       oklch(0.780 0.135 40);  --pedido-bg:       oklch(0.280 0.055 40);  --pedido-border:       oklch(0.420 0.090 40);  --pedido-text:       oklch(0.660 0.130 40);
  --pagado:       oklch(0.780 0.135 165); --pagado-bg:       oklch(0.280 0.055 165); --pagado-border:       oklch(0.420 0.090 165); --pagado-text:       oklch(0.640 0.130 165);
  --entregado:    oklch(0.780 0.135 277); --entregado-bg:    oklch(0.280 0.055 277); --entregado-border:    oklch(0.420 0.090 277); --entregado-text:    oklch(0.655 0.130 277);
  --whatsapp:  oklch(0.780 0.135 150); --whatsapp-bg:  oklch(0.280 0.055 150); --whatsapp-border:  oklch(0.420 0.090 150); --whatsapp-text:  oklch(0.640 0.130 150);
  --instagram: oklch(0.780 0.135 350); --instagram-bg: oklch(0.280 0.055 350); --instagram-border: oklch(0.420 0.090 350); --instagram-text: oklch(0.665 0.130 350);
  --messenger: oklch(0.780 0.135 258); --messenger-bg: oklch(0.280 0.055 258); --messenger-border: oklch(0.420 0.090 258); --messenger-text: oklch(0.650 0.130 258);
  --overlay: oklch(0 0 0 / .6);
}

/* ---------- 3. Reset y base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); font-size:13.5px; line-height:1.45; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600; color:var(--ink); }
h1{ font-size:22px; line-height:1.2; letter-spacing:-.02em; }
h2{ font-size:18px; line-height:1.25; letter-spacing:-.015em; }
h3{ font-size:14px; line-height:1.3; }
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
svg{ display:block; }
:focus-visible{ outline:none; box-shadow:var(--focus); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.suave{ color:var(--ink-soft); } .tenue{ color:var(--ink-faint); }
.eyebrow{ font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); }
.oculto{ display:none !important; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- 4. Botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; padding:0 14px; border:1px solid var(--border-strong); background:var(--surface); color:var(--ink); font-size:13px; font-weight:600; border-radius:var(--radius-md); cursor:pointer; white-space:nowrap; transition:background .12s; }
.btn:hover{ background:var(--surface-hover); }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn svg{ width:15px; height:15px; }
.btn.primario{ background:var(--cta-bg); color:var(--cta-fg); border-color:var(--cta-bg); }
.btn.primario:hover{ background:var(--cta-hover); border-color:var(--cta-hover); }
.btn.fantasma{ border-color:transparent; background:transparent; }
.btn.fantasma:hover{ background:var(--surface-hover); }
.btn.peligro{ color:var(--bad-text); border-color:var(--bad-border); }
.btn.peligro:hover{ background:var(--bad-bg); }
.btn.chico{ height:28px; padding:0 10px; font-size:12px; }
.btn.icono{ width:34px; padding:0; }
.btn.icono.chico{ width:28px; }

/* ---------- 5. Formularios ---------- */
.campo{ display:flex; flex-direction:column; gap:6px; }
.campo > label{ font-size:12.5px; font-weight:600; color:var(--ink); }
.campo .ayuda{ font-size:12px; color:var(--ink-faint); }
.campo .error{ font-size:12px; color:var(--bad-text); }
.input, .campo input:not([type=checkbox]):not([type=radio]), .campo select, .campo textarea{
  width:100%; min-height:36px; padding:7px 10px; border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:var(--radius-md); font-size:13.5px; }
.campo textarea{ min-height:96px; resize:vertical; line-height:1.45; border-radius:var(--radius-md); }
.campo input:focus, .campo select:focus, .campo textarea:focus, .input:focus{ border-color:var(--border-strong); box-shadow:none; outline:none; }
.campo.invalido input, .campo.invalido textarea{ border-color:var(--bad); }
.fila-campos{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:14px; }
/* palanca on/off: única excepción de radio (decisión de Nestor 31-ago-2026) */
.switch{ position:relative; width:38px; height:22px; flex:none; background:var(--neutral-border); border-radius:999px; cursor:pointer; transition:background .15s; border:0; padding:0; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:16px; height:16px; background:var(--surface); border-radius:50%; transition:transform .15s; box-shadow:0 0 0 1px var(--border); }
.switch[aria-checked="true"]{ background:var(--ink); }
.switch[aria-checked="true"]::after{ transform:translateX(16px); }
.check{ display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:13.5px; }
.check input{ appearance:none; width:16px; height:16px; margin:0; border:1px solid var(--border-strong); background:var(--surface); border-radius:var(--radius-sm); display:grid; place-content:center; }
.check input::before{ content:""; width:8px; height:8px; background:var(--ink); transform:scale(0); transition:transform .1s; }
.check input:checked::before{ transform:scale(1); }
.segmentado{ display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.segmentado button{ height:30px; padding:0 12px; border:0; background:transparent; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; border-right:1px solid var(--border); }
.segmentado button:last-child{ border-right:0; }
.segmentado button[aria-pressed="true"]{ background:var(--ink); color:var(--bg); }

/* ---------- 6. Chips ---------- */
.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; font-size:11px; font-weight:600; letter-spacing:.01em; white-space:nowrap; border:1px solid var(--neutral-border); background:var(--neutral-bg); color:var(--ink-soft); border-radius:var(--radius-pill, 0px); }
.chip svg{ width:11px; height:11px; }
.chip.ok{ background:var(--ok-bg); border-color:var(--ok-border); color:var(--ok-text); }
.chip.warn{ background:var(--warn-bg); border-color:var(--warn-border); color:var(--warn-text); }
.chip.bad{ background:var(--bad-bg); border-color:var(--bad-border); color:var(--bad-text); }
.chip.info{ background:var(--info-bg); border-color:var(--info-border); color:var(--info-text); }
.chip.nuevo{ background:var(--nuevo-bg); border-color:var(--nuevo-border); color:var(--nuevo-text); }
.chip.conversacion{ background:var(--conversacion-bg); border-color:var(--conversacion-border); color:var(--conversacion-text); }
.chip.pedido{ background:var(--pedido-bg); border-color:var(--pedido-border); color:var(--pedido-text); }
.chip.pagado{ background:var(--pagado-bg); border-color:var(--pagado-border); color:var(--pagado-text); }
.chip.entregado{ background:var(--entregado-bg); border-color:var(--entregado-border); color:var(--entregado-text); }
.chip.whatsapp{ background:var(--whatsapp-bg); border-color:var(--whatsapp-border); color:var(--whatsapp-text); }
.chip.instagram{ background:var(--instagram-bg); border-color:var(--instagram-border); color:var(--instagram-text); }
.chip.messenger{ background:var(--messenger-bg); border-color:var(--messenger-border); color:var(--messenger-text); }
/* punto de estado (8px) para semáforos discretos */
.punto{ display:inline-block; width:8px; height:8px; background:var(--neutral); flex:none; }
.punto.ok{ background:var(--ok); } .punto.warn{ background:var(--warn); } .punto.bad{ background:var(--bad); } .punto.info{ background:var(--info); }

/* ---------- 7. Tarjetas, paneles, tablas ---------- */
.tarjeta{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); }
.tarjeta > .cabecera{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border-bottom:1px solid var(--border); }
.tarjeta > .cuerpo{ padding:16px; }
.kpi{ padding:14px 16px; border:1px solid var(--border); background:var(--surface); border-radius:var(--radius-lg); }
.kpi .valor{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:600; line-height:1.1; margin-top:6px; }
.kpi .delta{ font-size:12px; margin-top:4px; color:var(--ink-faint); }
.kpi .delta.sube{ color:var(--ok-text); } .kpi .delta.baja{ color:var(--bad-text); }
.tabla{ width:100%; border-collapse:collapse; font-size:13px; }
.tabla th{ text-align:left; font-size:10.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-faint); padding:9px 12px; border-bottom:1px solid var(--border); background:var(--surface); position:sticky; top:0; z-index:2; }
.tabla td{ padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
.tabla tbody tr:hover{ background:var(--surface-hover); }
.tabla tr.seleccionada{ background:var(--accent-soft); }
.tabla td.num, .tabla th.num{ text-align:right; font-family:var(--font-mono); font-variant-numeric:tabular-nums; }
.tabla-scroll{ overflow-x:auto; }
.tabs{ display:flex; gap:0; border-bottom:1px solid var(--border); }
.tabs button{ height:38px; padding:0 14px; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; background:transparent; font-size:13px; font-weight:600; color:var(--ink-soft); cursor:pointer; }
.tabs button[aria-selected="true"]{ color:var(--ink); border-bottom-color:var(--ink); }
.lista-definicion{ display:grid; grid-template-columns:minmax(110px,max-content) 1fr; gap:6px 14px; font-size:13px; }
.lista-definicion dt{ color:var(--ink-faint); } .lista-definicion dd{ margin:0; }

/* ---------- 8. Chat ---------- */
.msg{ max-width:72%; padding:9px 12px; font-size:13.5px; line-height:1.45; border-radius:var(--radius-lg); word-wrap:break-word; }
.msg.entrante{ background:var(--surface-2); border:1px solid var(--border); color:var(--ink); align-self:flex-start; }
.msg.saliente{ background:var(--accent-soft); border:1px solid var(--accent-soft-border); color:var(--ink); align-self:flex-end; } /* respond.io: saliente en azul suave, no tinta */
.msg.bot{ background:var(--surface); border:1px solid var(--border-strong); color:var(--ink); align-self:flex-end; }
.msg.nota{ background:var(--warn-bg); border:1px solid var(--warn-border); color:var(--warn-text); align-self:center; max-width:88%; font-size:12.5px; }
.msg .hora{ display:block; margin-top:4px; font-family:var(--font-mono); font-size:10.5px; color:var(--ink-faint); }
.msg.saliente .hora{ color:var(--ink-faint); }
.avatar{ width:34px; height:34px; flex:none; display:grid; place-content:center; background:var(--surface-2); border:1px solid var(--border); font-size:12px; font-weight:600; color:var(--ink-soft); overflow:hidden; border-radius:var(--radius-avatar, 0px); }
.avatar img{ width:100%; height:100%; object-fit:cover; }
.avatar.chico{ width:26px; height:26px; font-size:10px; }

/* ---------- 9. Checklist de puesta en marcha ---------- */
.onboarding{ border:1px solid var(--border); background:var(--surface); }
.onb-item{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--border); }
.onb-item:last-child{ border-bottom:0; }
.onb-check{ width:20px; height:20px; flex:none; border:1px solid var(--border-strong); display:grid; place-content:center; }
.onb-check svg{ width:12px; height:12px; stroke:var(--bg); stroke-width:2.5; fill:none; opacity:0; }
.onb-item.hecho .onb-check{ background:var(--ink); border-color:var(--ink); }
.onb-item.hecho .onb-check svg{ opacity:1; }
.onb-item.hecho .onb-texto{ color:var(--ink-faint); text-decoration:line-through; }
.onb-texto{ font-size:13.5px; flex:1; }
.onb-cta{ font-size:12px; font-weight:600; color:var(--accent-strong); }
.progreso{ height:4px; background:var(--surface-2); border:1px solid var(--border); }
.progreso > span{ display:block; height:100%; background:var(--ink); }

/* ---------- 10. Modales, hojas, toasts, estados ---------- */
.overlay{ position:fixed; inset:0; background:var(--overlay); z-index:60; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal{ width:min(560px,100%); max-height:92vh; overflow:auto; background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--shadow-2); border-radius:var(--radius-lg); }
.modal > .cabecera{ display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid var(--border); }
.modal > .cuerpo{ padding:18px; } .modal > .pie{ display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid var(--border); }
.hoja{ position:fixed; right:0; top:0; bottom:0; width:min(480px,100%); background:var(--surface); border-left:1px solid var(--border-strong); z-index:61; display:flex; flex-direction:column; }
.toasts{ position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:80; }
.toast{ min-width:240px; max-width:380px; padding:10px 14px; background:var(--surface); border:1px solid var(--border-strong); font-size:13px; box-shadow:var(--shadow-1); border-radius:var(--radius-md); }
.toast.ok{ border-color:var(--ok-border); border-left:3px solid var(--ok); }
.toast.bad{ border-color:var(--bad-border); border-left:3px solid var(--bad); }
.toast.warn{ border-color:var(--warn-border); border-left:3px solid var(--warn); }
.vacio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:48px 20px; text-align:center; color:var(--ink-soft); }
.vacio svg{ width:36px; height:36px; stroke:var(--ink-faint); stroke-width:1.5; fill:none; }
.vacio h3{ color:var(--ink); } .vacio p{ max-width:380px; font-size:13px; }
.aviso{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--border); border-left:3px solid var(--ink); background:var(--surface); font-size:13px; border-radius:var(--radius-md); }
.aviso.warn{ border-left-color:var(--warn); } .aviso.bad{ border-left-color:var(--bad); } .aviso.ok{ border-left-color:var(--ok); } .aviso.info{ border-left-color:var(--info); }
.spinner{ width:18px; height:18px; border:2px solid var(--border); border-top-color:var(--ink); border-radius:50%; animation:girar .8s linear infinite; }
@keyframes girar{ to{ transform:rotate(360deg); } }
.esqueleto{ background:linear-gradient(90deg, var(--surface-2) 25%, var(--surface-hover) 50%, var(--surface-2) 75%); background-size:200% 100%; animation:brillo 1.2s infinite; min-height:14px; }
@keyframes brillo{ to{ background-position:-200% 0; } }
kbd{ font-family:var(--font-mono); font-size:11px; padding:1px 5px; border:1px solid var(--border); background:var(--surface-2); }

/* ---------- 11. Recorrido interactivo (Driver.js con piel propia) ---------- */
.driver-popover.mugi{ background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); border-radius:var(--radius-lg); box-shadow:var(--shadow-2); padding:16px; max-width:340px; font-family:var(--font-body); }
.driver-popover.mugi .driver-popover-title{ font-size:14px; font-weight:600; margin-bottom:6px; }
.driver-popover.mugi .driver-popover-description{ font-size:13px; color:var(--ink-soft); line-height:1.45; }
.driver-popover.mugi .driver-popover-progress-text{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); }
.driver-popover.mugi button{ border-radius:var(--radius-md); text-shadow:none; font-weight:600; font-size:12.5px; padding:6px 12px; background:var(--surface); color:var(--ink); border:1px solid var(--border-strong); }
.driver-popover.mugi .driver-popover-next-btn{ background:var(--cta-bg); color:var(--cta-fg); border-color:var(--cta-bg); }
.driver-popover.mugi .driver-popover-arrow{ border-color:var(--border-strong); }

/* ---------- 12. Móvil ---------- */
@media (max-width:820px){
  :root{ --sidebar-w:0px; }
  .modal{ width:100%; max-height:100vh; }
  .fila-campos{ grid-template-columns:1fr; }
  .msg{ max-width:86%; }
}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* ---------- 13. Buscador global (busqueda.js) ---------- */
.bq-overlay{ align-items:flex-start; padding-top:10vh; }
.bq{ width:min(640px,100%); max-height:70vh; display:flex; flex-direction:column; }
.bq-cab{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
.bq-cab .input{ flex:1; border:0; min-height:36px; font-size:15px; background:transparent; }
.bq-cab .input:focus{ box-shadow:none; }
.bq-res{ overflow:auto; }
.bq-fila{ width:100%; display:flex; align-items:center; gap:12px; padding:10px 14px; border:0; border-bottom:1px solid var(--border); background:transparent; text-align:left; font:inherit; color:var(--ink); cursor:pointer; }
.bq-fila:hover, .bq-fila:focus-visible{ background:var(--surface-hover); }
.bq-txt{ flex:1; display:flex; flex-direction:column; min-width:0; }
.bq-txt span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bq-pie{ padding:8px 14px; border-top:1px solid var(--border); font-size:11px; }

/* ---------- 14. Notificaciones (notificaciones.js) ---------- */
.nt-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:var(--radius-pill, 0px); background:var(--ink); color:var(--bg); font-family:var(--font-mono); font-size:10px; font-weight:600; display:grid; place-content:center; }
.nt-badge.urgente{ background:var(--bad); color:#fff; }
.nt-panel{ position:fixed; width:min(380px, calc(100vw - 16px)); max-height:70vh; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--shadow-2); border-radius:var(--radius-lg); z-index:70; overflow:hidden; }
.nt-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom:1px solid var(--border); }
.nt-cab h3{ font-size:14px; }
.nt-lista{ overflow:auto; }
.nt-item{ width:100%; display:flex; align-items:center; gap:10px; padding:10px 14px; border:0; border-bottom:1px solid var(--border); background:transparent; text-align:left; font:inherit; color:var(--ink); cursor:pointer; }
.nt-item:hover{ background:var(--surface-hover); }
.nt-item.vista{ opacity:.6; }
.nt-txt{ flex:1; display:flex; flex-direction:column; min-width:0; font-size:13px; }
.nt-txt span{ color:var(--ink-soft); font-size:12px; }

/* ---------- 15. Diálogos propios (ui.js) ---------- */
.ui-dialogo{ width:min(440px,100%); }
.ui-dialogo .cabecera h3{ font-size:15px; }
.ui-form .cuerpo.fila-campos{ display:grid; gap:12px; grid-template-columns:1fr; }