/* ══ RESET & TOKENS ══════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased}
:root{
  /* 2026-09-26 (revisión móvil, cola de baja prioridad): color-scheme
     global — sin esto, los controles nativos del navegador (selector de
     fecha/hora, checkboxes, el menú de autocompletar) asumen el tema
     CLARO del sistema operativo por defecto, así que en modo oscuro salían
     con iconos oscuros sobre su propio fondo oscuro (ilegibles) en Android/
     Chrome. Cada :root[data-theme="light"] de abajo lo reescribe a "light". */
  color-scheme:dark;
  /* 2026-09-24: los tres tonos de panel (fondo de pagina, tarjetas,
     ventanas flotantes) y el blanco de las superposiciones de vidrio
     ahora viven como TRIOS "r,g,b" sin alpha (--bg-rgb, --panel-rgb,
     --window-rgb, --navy-rgb, --overlay-rgb) en vez de estar escritos
     a mano como rgba(...) en cada selector. Eso es lo que permite el
     modo claro de mas abajo: reescribe estos 5 numeros nada mas, y
     cada rgba(var(--xxx-rgb),ALPHA) del resto de la hoja cambia de
     color solo, sin tocar selector por selector. */
  --bg-rgb:6,13,26;
  --bg:rgb(var(--bg-rgb));
  --bg2:#0b1628;
  --navy:#0f2235;
  --navy-lt:#1a3a5c;
  --navy-rgb:15,34,53;
  --panel-rgb:11,22,40;
  --window-rgb:8,16,30;
  --overlay-rgb:255,255,255;
  --glass:rgba(var(--navy-rgb),.7);
  --glass2:rgba(var(--overlay-rgb),.04);
  --glass3:rgba(var(--overlay-rgb),.07);
  --border:rgba(var(--overlay-rgb),.08);
  --border2:rgba(var(--overlay-rgb),.14);
  --border3:rgba(var(--overlay-rgb),.2);
  --accent:#e8650a;
  --accent2:#f97316;
  --red:#ef4444;
  --green:#22c55e;
  --blue:#3b82f6;
  --purple:#a78bfa;
  --yellow:#f59e0b;
  /* Variantes de TEXTO de cada color de estado: para las pastillas tipo
     "background:rgba(239,68,68,.12);color:var(--txt-red)" Y para cuando
     el color va directo sobre el fondo de la pagina/tarjeta (numeros,
     iconos, enlaces). El fondo tintado (rgba de un color saturado a poca
     alpha) se ve bien sobre claro u oscuro sin tocarlo — lo que NO se ve
     bien en los dos es el texto: en oscuro tiene que ser un tono claro
     del color (2.1–2.7:1 de contraste si se usara --red/--green/--purple
     tal cual sobre un fondo CLARO, por debajo del minimo de 3:1 incluso
     para texto grande), en claro tiene que ser un tono oscuro, o el
     contraste se cae. */
  --badge-blue-bg:#1e3a6e;
  --txt-accent:#e8650a;
  --txt-red:#f87171;
  --txt-blue:#93c5fd;
  --txt-green:#4ade80;
  --txt-yellow:#fbbf24;
  --txt-purple:#c4b5fd;
  /* Text ladder — raised 2026-09-16 ("mejor visibilidad de las letras").
     These are ALPHA colors, so they composite over whatever panel they sit
     on. The old values measured, by WCAG 2.1 contrast against --bg #060d1a:
       --text2 .75 -> 10.02  (fine)
       --text3 .45 ->  4.20  FAILS AA (4.5 needed), used 129 times
       --text4 .25 ->  2.08  FAILS everything incl. the 3:1 large-text floor,
                             used 64 times
     i.e. 193 text elements were below the legibility threshold, including
     every field label in the pharmacy detail panel, every table column
     header, and the city + note on every pharmacy card. New values measured:
       --text2 .86 -> 13.09  AAA
       --text3 .64 ->  7.51  AAA
       --text4 .50 ->  4.91  AA
     Do NOT push --text4 past .55: .ms-task-row.done uses opacity:.55 and
     completed items would stop reading as completed. Hierarchy is carried by
     weight/size/uppercase as well as dimness, so the ladder still separates.
     --purple also moved #8b5cf6 -> #a78bfa (4.43 -> 6.5 on panel backgrounds). */
  --text:#f0f4ff;
  --text2:rgba(240,244,255,.86);
  --text3:rgba(240,244,255,.64);
  --text4:rgba(240,244,255,.50);
  /* Placeholders keep the OLD dimness on purpose — at --text4's new .50 an
     empty input would read as if it were already filled in. */
  --placeholder:rgba(240,244,255,.34);
  --mono:"JetBrains Mono",monospace;
  --sans:"Inter",system-ui,sans-serif;
  --r:10px;--r2:16px;--r3:22px;--r4:28px;
  --glow-o:0 0 40px rgba(232,101,10,.25);
  --glow-b:0 0 40px rgba(59,130,246,.2);
}

/* ══ MODO CLARO ══════════════════════════════════════════════
   2026-09-24, a peticion de Hector ("light mode y night mode"). Un
   atributo en <html> (data-theme="light", puesto por toggleTheme() —
   ver toggleTheme() mas abajo) reescribe estos tokens; el resto de la
   hoja usa var(--...) para todo lo que cambia, asi que cada pantalla
   se repinta sola, sin un selector [data-theme="light"] por cada
   componente.
   Contraste verificado igual que la escalera de --text/2/3/4 de
   arriba (WCAG 2.1), esta vez de texto oscuro sobre fondo claro
   (#0f172a sobre ~#f4f6fa):
     --text2 .80 -> 9.07  AAA
     --text3 .72 -> 6.85  a un pelo de AAA (7.00), muy por encima de AA
     --text4 .60 -> 4.57  AA — mismo margen que el modo oscuro (.50->4.91)
   --placeholder se deja igualmente tenue que en oscuro (a proposito:
   un placeholder no tiene que pasar AA, tiene que leerse como "vacio").
   Los colores de marca y de estado (--accent, --red, --green, --blue,
   --purple, --yellow) NO cambian — son saturados, se ven bien como
   fondo de boton, borde o pastilla tintada sobre claro u oscuro. Lo que
   si cambia son sus variantes de TEXTO (--txt-accent, --txt-red y
   compania), usadas donde el color va como texto — en una pastilla o
   directo sobre el fondo de la pagina/tarjeta: en oscuro son un tono
   claro del color (como ya estaban), en claro tienen que ser un tono
   oscuro o el contraste se cae (--accent/--red/--green/--purple/
   --yellow tal cual sobre blanco dan 2.2–3.8:1, por debajo del minimo
   incluso para texto grande). Contraste verificado contra blanco:
   naranja 5.18, rojo 6.47, azul 6.70, verde 5.02, amarillo/ambar 7.09,
   morado 7.10 — todos pasan AA, la mayoria AAA.
   --navy / --navy-lt NO cambian: son el fondo solido de un avatar/
   insignia con texto blanco encima, no un panel de la pagina — se
   quedan oscuros para que ese blanco siga contrastando en los dos
   modos. */
:root[data-theme="light"]{
  color-scheme:light;
  --bg-rgb:244,246,250;
  --bg2:#eef1f6;
  --navy-rgb:226,232,240;
  --panel-rgb:255,255,255;
  --window-rgb:255,255,255;
  --overlay-rgb:15,23,42;
  --badge-blue-bg:#dbeafe;
  --txt-accent:#c2410c;
  --txt-red:#b91c1c;
  --txt-blue:#1d4ed8;
  --txt-green:#15803d;
  --txt-yellow:#92400e;
  --txt-purple:#6d28d9;
  --text:#0f172a;
  --text2:rgba(15,23,42,.80);
  --text3:rgba(15,23,42,.72);
  --text4:rgba(15,23,42,.60);
  --placeholder:rgba(15,23,42,.42);
}
/* 2026-09-26 (revisión móvil, cola de baja prioridad): 100vh en Safari de
   iOS mide el viewport GRANDE (barras ocultas) — con las barras visibles
   (el caso normal al cargar), el alto real disponible es menor, así que
   min-height:100vh se pasaba del alto visible. 100svh (small viewport
   height) usa el alto chico de forma estable, sin saltos cuando las barras
   aparecen/desaparecen. Se declara DESPUES de 100vh a propósito: un
   navegador que no entiende "svh" ignora esa línea y se queda con el vh de
   respaldo. */
html,body{min-height:100vh;min-height:100svh;background:var(--bg);font-family:var(--sans);color:var(--text);font-size:16px;line-height:1.5;overflow-x:clip}

/* ══ ANIMATED BACKGROUND ═════════════════════════════════════ */
.bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-orb{position:absolute;border-radius:50%;filter:blur(90px);animation:drift 18s ease-in-out infinite}
.bg-orb:nth-child(1){width:700px;height:700px;background:rgba(37,99,168,.18);top:-200px;left:-200px;animation-delay:0s}
.bg-orb:nth-child(2){width:600px;height:600px;background:rgba(232,101,10,.12);bottom:-150px;right:-100px;animation-delay:-6s}
.bg-orb:nth-child(3){width:400px;height:400px;background:rgba(139,92,246,.1);top:40%;left:30%;animation-delay:-12s}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.05)}66%{transform:translate(-30px,20px) scale(0.97)}}
.bg-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(var(--overlay-rgb),.025) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--overlay-rgb),.025) 1px,transparent 1px);background-size:48px 48px}

/* ══ SIDEBAR ══════════════════════════════════════════════════ */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:220px;z-index:50;
  background:rgba(var(--bg-rgb),.85);
  backdrop-filter:blur(20px);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  box-shadow:8px 0 40px rgba(0,0,0,.4);
  transition:transform .2s cubic-bezier(.34,1,.64,1);
}
.sb-logo{padding:20px 18px 16px;border-bottom:1px solid var(--border);flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sb-logo img{height:28px;width:auto}
/* 2026-09-25 — "pin" del menu izquierdo: "que se esconda para ver pantalla
   completa... si quiero que se mantenga lo decido". Boton dentro del sidebar
   para ocultarlo (deja de ocupar los 220px, .main se estira a pantalla
   completa) y un boton flotante para volver a traerlo. Guarda la eleccion en
   localStorage (mismo patron que mdTheme) para que se quede como Hector la
   dejo la proxima vez que entre. Solo en escritorio (>800px): por debajo de
   eso el sidebar ya tiene su propio comportamiento automatico (rail de
   iconos en tablet, drawer con hamburguesa en telefono) y no hay que
   pisarlo con un tercer mecanismo. */
.sb-pin-btn{background:transparent;border:1px solid var(--border2);color:var(--text3);border-radius:6px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:12px;flex:none;transition:all .15s}
.sb-pin-btn:hover{background:var(--glass3);color:var(--text2)}
#sidebar-expand-btn{
  display:none;position:fixed;top:16px;left:16px;z-index:60;
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border2);
  background:rgba(var(--window-rgb),.9);backdrop-filter:blur(16px);color:var(--text);
  align-items:center;justify-content:center;font-size:14px;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
@media(min-width:801px){
  html[data-sidebar="hidden"] .sidebar{transform:translateX(-100%)}
  html[data-sidebar="hidden"] .main{margin-left:0}
  html[data-sidebar="hidden"] #sidebar-expand-btn{display:flex}
}
@media(max-width:800px){#sb-pin-toggle,#sidebar-expand-btn,#sidebar-hover-zone{display:none!important}}
/* 2026-09-25 — "si la escondo pero coloco el mouse en esa esquina pues se
   presente": con el sidebar oculto, un borde invisible pegado al canto
   izquierdo de la pantalla (#sidebar-hover-zone) detecta cuando el mouse se
   acerca y lo hace "asomarse" (data-sidebar-peek) ENCIMA del contenido, sin
   empujarlo (.main se queda en margin-left:0 igual que oculto -- que se
   asome no debe mover nada de sitio). Se queda asomado mientras el mouse
   siga sobre esa franja o sobre el sidebar mismo (para poder mover el mouse
   hacia el y hacer clic en un item), y se esconde solo con un pequeno
   retraso (_sidebarPeekHideSoon, ver JS) para que cruzar de la franja al
   sidebar no cuente como "el mouse se fue" a mitad de camino. Un clic en el
   boton ◀ de adentro lo deja fijo/visible de verdad (toggleSidebarPinned).
   Sigue sin aplicar por debajo de 800px, mismo motivo que el resto de este
   sistema de pin. */
#sidebar-hover-zone{display:none}
@media(min-width:801px){
  html[data-sidebar="hidden"] #sidebar-hover-zone{
    display:block;position:fixed;left:0;top:0;bottom:0;width:18px;z-index:45;
  }
  html[data-sidebar="hidden"][data-sidebar-peek="1"] .sidebar{
    transform:translateX(0);
    box-shadow:8px 0 60px rgba(0,0,0,.6),0 0 0 1px var(--border2);
  }
  /* NO se oculta #sidebar-expand-btn al asomarse. Antes intentaba mostrar
     SOLO uno de los dos (el boton mientras esta oculto sin asomar, el
     sidebar mientras se asoma) escondiendo el boton via CSS justo cuando
     el asomo empezaba -- pero el asomo lo disparaba el propio hover del
     boton, asi que un clic normal (hover+click) lo escondia debajo del
     cursor a mitad de camino y el clic nunca llegaba (lo agarro una prueba
     de Playwright que no podia hacerle clic; a Hector con el mouse real le
     habria pasado igual). Ahora el boton ya NO dispara su propio asomo
     (ver el comentario junto a su onclick en el HTML) -- solo lo dispara
     #sidebar-hover-zone o el sidebar mismo -- asi que se puede dejar
     visible siempre sin ese riesgo: se ve encima del sidebar cuando este
     se asoma (queda como un atajo de un clic, redundante con el ◀ de
     adentro, pero nunca desaparece a medio clic). */
}
.sb-user{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex:none}
.sb-av{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#c4530a);display:grid;place-items:center;font-weight:700;font-size:14.25px;color:#fff;flex:none;box-shadow:0 0 0 2px rgba(232,101,10,.4)}
.sb-info .sb-name{font-size:14.25px;font-weight:600;color:var(--text)}
.sb-info .sb-role{font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 6px;border-radius:3px;background:rgba(34,197,94,.15);color:var(--txt-green);border:1px solid rgba(34,197,94,.25);text-transform:uppercase;letter-spacing:.06em;display:inline-block}
.sb-nav{flex:1;padding:12px 10px;overflow-y:auto;overscroll-behavior:contain}
.sb-section{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text4);padding:8px 8px 4px;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 10px;
  border-radius:var(--r);cursor:pointer;transition:all .15s;
  color:var(--text3);font-size:14.75px;font-weight:500;
  background:transparent;border:0;width:100%;text-align:left;
  margin-bottom:1px;position:relative;
}
.nav-item:hover{background:var(--glass3);color:var(--text2)}
.nav-item.active{background:rgba(232,101,10,.15);color:var(--text);border:1px solid rgba(232,101,10,.2)}
.nav-item.active::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:3px;border-radius:0 2px 2px 0;background:var(--accent)}
.nav-icon{font-size:17px;flex:none;width:22px;text-align:center}
.nav-badge{margin-left:auto;background:var(--red);color:#fff;border-radius:99px;font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 6px;animation:pulse-badge 2s infinite}
@keyframes pulse-badge{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.4)}50%{box-shadow:0 0 0 4px rgba(239,68,68,0)}}
.sb-footer{padding:12px 10px;border-top:1px solid var(--border);flex:none}
.sb-signout{width:100%;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border2);background:transparent;color:var(--text3);font-size:13.75px;font-weight:500;cursor:pointer;transition:all .15s;text-align:left;display:flex;align-items:center;gap:8px}
.sb-signout:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.3);color:var(--txt-red)}
.lang-toggle-btn{width:100%;padding:7px 10px;margin-bottom:8px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.04);color:var(--text3);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}
.lang-toggle-btn:hover{background:var(--glass3);color:var(--text2)}

/* ══ MOBILE NAV (hamburger drawer) ═══════════════════════════ */
#mobile-nav-toggle{display:none}

/* ── AI Assistant floating button + chat panel ────────────────────────── */
#ai-fab{
  position:fixed;bottom:22px;right:22px;z-index:250;
  width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(145deg,var(--accent),#c2410c);
  color:#fff;font-size:26px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(232,101,10,.45),0 0 0 1px rgba(var(--overlay-rgb),.08);
  transition:transform .18s cubic-bezier(.34,1.4,.64,1);
  animation:aiFabPulse 3s ease-in-out infinite;
  /* 2026-09-26 (revisión móvil M2): sin esto, arrastrar el botón con el
     dedo también arrastraba (scrolleaba) la página entera por debajo,
     porque el navegador trata el gesto como un posible scroll hasta que
     decide lo contrario. touch-action:none le dice de entrada que este
     elemento maneja su propio gesto táctil. */
  touch-action:none;
}
#ai-fab:hover{transform:scale(1.08)}
@keyframes aiFabPulse{0%,100%{box-shadow:0 8px 24px rgba(232,101,10,.45),0 0 0 1px rgba(var(--overlay-rgb),.08)}50%{box-shadow:0 8px 30px rgba(232,101,10,.7),0 0 0 5px rgba(232,101,10,.12)}}

#ai-chat-panel{
  position:fixed;bottom:90px;right:22px;z-index:250;
  width:360px;max-width:calc(100vw - 32px);height:500px;max-height:70vh;
  background:rgba(var(--window-rgb),.97);backdrop-filter:blur(20px);
  border:1px solid var(--border2);border-radius:var(--r3);
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(var(--overlay-rgb),.04);
  display:flex;flex-direction:column;overflow:hidden;
  animation:winIn .2s cubic-bezier(.34,1.2,.64,1);
}
#ai-chat-panel.hidden{display:none}
.ai-chat-header{
  padding:12px 14px;background:rgba(var(--overlay-rgb),.03);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14.75px;color:var(--text);
  flex-shrink:0;
}
.ai-chat-close{background:none;border:none;color:var(--text3);font-size:17px;cursor:pointer;padding:4px 6px;border-radius:6px}
.ai-chat-close:hover{background:rgba(var(--overlay-rgb),.06);color:var(--text)}
#ai-chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;overscroll-behavior:contain}
.ai-msg{max-width:85%;padding:9px 12px;border-radius:12px;font-size:14.25px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.ai-msg-user{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:3px}
.ai-msg-assistant{align-self:flex-start;background:rgba(var(--overlay-rgb),.06);color:var(--text2);border-bottom-left-radius:3px}
.ai-msg-assistant.ai-msg-error{background:rgba(239,68,68,.12);color:var(--txt-red);border:1px solid rgba(239,68,68,.25)}
.ai-msg-assistant.ai-msg-thinking{color:var(--text4);font-style:italic}
.ai-msg-empty{color:var(--text3);font-size:13.75px;text-align:center;padding:30px 10px}
.ai-chat-input-row{
  display:flex;gap:8px;padding:10px;border-top:1px solid var(--border);flex-shrink:0;background:rgba(var(--overlay-rgb),.02);
}
.ai-chat-input-row textarea{
  flex:1;resize:none;max-height:80px;padding:9px 12px;border-radius:var(--r);
  border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text);
  font-family:inherit;font-size:14.25px;line-height:1.4;
}
.ai-chat-input-row textarea:focus{outline:none;border-color:var(--accent)}
#ai-chat-send{
  width:38px;height:38px;flex-shrink:0;border-radius:50%;border:none;cursor:pointer;
  background:var(--accent);color:#fff;font-size:16px;display:flex;align-items:center;justify-content:center;
  transition:transform .12s;
}
#ai-chat-send:hover{transform:scale(1.08)}
#ai-chat-send:disabled{opacity:.5;cursor:default;transform:none}
#mobile-nav-backdrop{display:none}

/* ══ MAIN CONTENT ════════════════════════════════════════════ */
.main{margin-left:220px;min-height:100vh;min-height:100svh;position:relative;z-index:1}
.content{padding:24px;max-width:1280px;}

/* ══ GLASS CARD ══════════════════════════════════════════════ */
.gc{
  background:rgba(var(--panel-rgb),.75);
  backdrop-filter:blur(20px);
  border:1px solid var(--border2);
  border-radius:var(--r2);
  box-shadow:0 8px 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(var(--overlay-rgb),.06);
}
.gc-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.gc-title{font-size:14.75px;font-weight:700;color:var(--text);flex:1}
.gc-sub{font-size:12.5px;color:var(--text3);font-family:var(--mono)}
.gc-body{padding:14px 18px}
#pharmacy-map{border-radius:0 0 var(--r3) var(--r3);background:#0b1220}
.leaflet-tooltip{background:rgba(var(--window-rgb),.95)!important;color:#fff!important;border:1px solid var(--border2)!important;font-family:var(--mono)!important;font-size:12.5px!important;box-shadow:0 4px 16px rgba(0,0,0,.4)!important}
.leaflet-tooltip-top:before{border-top-color:rgba(var(--window-rgb),.95)!important}

/* ══ SCREEN PAGES ════════════════════════════════════════════ */
.screen{display:none}.screen.active{display:block}

/* ══ DASHBOARD ════════════════════════════════════════════════ */
.dash-hero{
  background:linear-gradient(135deg,rgba(var(--panel-rgb),.9) 0%,rgba(var(--navy-rgb),.95) 100%);
  border:1px solid var(--border2);
  border-radius:var(--r4);
  padding:32px 28px 26px;
  position:relative;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(var(--overlay-rgb),.07);
  margin-bottom:20px;
}
.dash-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 80% at 90% 0%,rgba(232,101,10,.18),transparent 60%),radial-gradient(ellipse 50% 60% at 0% 100%,rgba(59,130,246,.15),transparent 50%);pointer-events:none}
.dash-hero::after{content:"";position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent),var(--accent2),var(--accent),transparent)}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;position:relative;z-index:1}
.hero-left{}
.hero-logo-wrap{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.hero-logo-wrap img{height:60px;width:auto;filter:drop-shadow(0 0 20px rgba(232,101,10,.5))}
.hero-tag{}
.hero-tag .ht-eye{font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--text4);display:block;margin-bottom:4px}
.hero-tag .ht-main{font-size:22px;font-weight:800;color:var(--text);line-height:1.1;letter-spacing:-.01em}
.hero-tag .ht-sub{font-size:14.25px;color:var(--text3);margin-top:4px}
.hero-search-wrap{position:relative;margin-bottom:14px}
.hero-search{width:100%;padding:13px 16px 13px 46px;border-radius:14px;font-size:16px;font-weight:500;background:rgba(var(--overlay-rgb),.07);border:1px solid var(--border3);color:var(--text);box-shadow:0 4px 20px rgba(0,0,0,.3);transition:all .2s}
.hero-search:focus{background:rgba(var(--overlay-rgb),.1);border-color:var(--accent);outline:none;box-shadow:0 4px 20px rgba(0,0,0,.3),0 0 0 3px rgba(232,101,10,.2)}
.hero-search::placeholder{color:var(--placeholder)}
.hs-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:17px;pointer-events:none}
.hero-pills{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.hero-pill{padding:5px 13px;border-radius:99px;font-size:13.25px;font-weight:600;cursor:pointer;background:rgba(var(--overlay-rgb),.06);border:1px solid var(--border2);color:var(--text2);transition:all .18s;backdrop-filter:blur(8px)}
.hero-pill:hover{background:var(--accent);border-color:var(--accent2);color:#fff;transform:translateY(-1px);box-shadow:0 4px 16px rgba(232,101,10,.4)}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap}
.ha-btn{padding:9px 16px;border-radius:var(--r);font-size:14.25px;font-weight:600;cursor:pointer;transition:all .18s;border:0}
.ha-btn.primary{background:var(--accent);color:#fff;box-shadow:0 4px 16px rgba(232,101,10,.4)}
.ha-btn.primary:hover{background:var(--accent2);transform:translateY(-1px)}
.ha-btn.ghost{background:rgba(var(--overlay-rgb),.07);border:1px solid var(--border2);color:var(--text2)}
.ha-btn.ghost:hover{background:rgba(var(--overlay-rgb),.12)}
/* Hero right */
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.hs-card{background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border2);border-radius:var(--r2);padding:12px 14px;position:relative;overflow:hidden;transition:all .22s cubic-bezier(.34,1.2,.64,1);cursor:pointer;user-select:none}
.hs-card:hover{background:rgba(var(--overlay-rgb),.09);transform:translateY(-4px) scale(1.02);box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 0 1px rgba(var(--overlay-rgb),.08)}
.hs-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--sc)}
/* --sc (la rayita de arriba) se queda saturado a proposito — es decoracion,
   se ve bien igual en los dos modos. El numero grande es TEXTO sobre la
   tarjeta, y ese si necesita el tono ajustado por tema: --sc-text, que cada
   .hs-card pone junto a --sc (ej. --sc:var(--purple);--sc-text:var(--txt-purple)).
   2026-09-24: sin esto, en modo claro "12 StarPlus" se veia en morado claro
   sobre fondo claro — 2.7:1 de contraste, ilegible. */
.hs-val{font-family:var(--mono);font-size:28px;font-weight:700;color:var(--sc-text,var(--sc));display:block;line-height:1;margin-bottom:4px}
/* 2026-09-26 (revisión móvil, cola de baja prioridad): en la franja de
   700–844px (donde el logo de la izquierda le quita espacio a esta
   columna — ver .hero-grid) una etiqueta larga como "Necesita
   Actualización" no hacía salto de línea con display:inline (el navegador
   la deja correr en una sola línea y .hs-card, con overflow:hidden, se
   come el resto) — display:block sí respeta el ancho de la tarjeta.
   max-width:100% es solo un cinturón de seguridad. */
.hs-lbl{display:block;max-width:100%;font-size:12px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.hs-hint{position:absolute;bottom:7px;right:9px;font-size:11px;color:var(--text4);font-family:var(--mono)}
.hero-cities-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text4);display:block;margin-bottom:8px}
/* 2026-09-22 — franja "necesita atención" (ver el markup del dashboard).
   Misma familia visual que .hs-card pero con el color del borde izquierdo
   marcando la urgencia, para que se lea como una fila de avisos y no como
   otra tanda de estadísticas. */
.attn-row{display:flex;flex-wrap:wrap;gap:10px}
.attn-card{display:flex;align-items:center;gap:10px;background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border2);border-left:3px solid var(--ac,var(--accent));border-radius:var(--r2);padding:10px 14px;cursor:pointer;user-select:none;transition:all .18s cubic-bezier(.34,1.2,.64,1)}
.attn-card:hover{background:rgba(var(--overlay-rgb),.09);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.35)}
.attn-ico{font-size:17px;line-height:1}
.attn-n{font-family:var(--mono);font-size:21px;font-weight:700;color:var(--ac,var(--accent));line-height:1}
.attn-lbl{font-size:12.5px;color:var(--text2);font-weight:600;line-height:1.25}
.attn-clear{font-size:13px;color:var(--text3);display:flex;align-items:center;gap:7px}
.city-chips{display:flex;gap:5px;flex-wrap:wrap}
.city-chip{font-family:var(--mono);font-size:11.5px;padding:4px 10px;border-radius:99px;cursor:pointer;background:rgba(var(--overlay-rgb),.05);border:1px solid var(--border);color:var(--text2);transition:all .15s;display:flex;align-items:center;gap:5px}
.city-chip:hover{background:var(--accent);border-color:var(--accent2);color:#fff;transform:translateY(-1px)}
.city-chip b{color:var(--text4);font-weight:400}
/* Dashboard grid */
.dash-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:20px}
.dash-grid .updates-gc{grid-column:span 3}
@media(max-width:1100px){.dash-grid{grid-template-columns:1fr 1fr}.dash-grid .updates-gc{grid-column:span 2}.hs-hint{display:none}.hs-card{padding:12px 12px 22px}}
/* 2026-09-26 (revisión móvil, cola de baja prioridad): "las tarjetas de
   números del Dashboard cortan el texto a 700–844 px" — en esa franja el
   sidebar pasa de riel de 60px (641–800px, ver A5) a la barra completa de
   ~220px (>800px), y en los dos casos el logo + eslogan de la izquierda
   (columna 1 de .hero-grid, con una imagen de altura fija que no se
   encoge) le deja a las tarjetas de la derecha (columna 2) tan poco
   ancho que una etiqueta larga como "Necesita Actualización" no cabe ni
   en dos líneas. Apilar .hero-grid en una sola columna en esta franja
   (igual que ya se hace en el teléfono) le da a las tarjetas todo el
   ancho de .hero-grid en vez de la mitad peleada con el logo. */
@media(min-width:641px) and (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:18px}}
/* Version bars */
.rb-row{display:flex;align-items:center;gap:12px;padding:8px 4px;cursor:pointer;border-radius:var(--r);transition:background .12s}
.rb-row:hover{background:var(--glass3)}
.rb-ver{font-family:var(--mono);font-size:15.5px;font-weight:700;min-width:128px;display:flex;align-items:center;gap:5px}
.rb-lat{font-size:13px}
.rb-track{flex:1;height:7px;background:rgba(var(--overlay-rgb),.07);border-radius:3px;overflow:hidden}
.rb-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.34,1.4,.64,1)}
.rb-n{font-family:var(--mono);font-size:15.5px;font-weight:700;color:var(--text2);min-width:30px;text-align:right}
/* Pending updates mini */
.wr{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border);transition:background .12s;cursor:default}
.wr:hover{background:var(--glass2)}
.wr:last-child{border-bottom:0}
.wr-info{flex:1;min-width:0}
.wr-name{font-size:13.75px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wr-loc{font-size:12.5px;color:var(--text3);margin-bottom:4px}
.wr-iss{display:flex;gap:5px;flex-wrap:wrap}
.wi-sw{font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 5px;background:rgba(var(--overlay-rgb),.07);border:1px solid var(--border2);border-radius:3px;color:var(--text2);text-transform:uppercase}
.wi-cur{font-family:var(--mono);font-size:11.5px;color:var(--txt-red);font-weight:700}
.wi-arr{color:var(--text4);font-size:11.5px}
.wi-lat{font-family:var(--mono);font-size:11.5px;color:var(--txt-green);font-weight:700}
.wr-btn{padding:4px 10px;border-radius:6px;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text2);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;flex:none;transition:all .15s}
.wr-btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}

/* ══ PHARMACY CARDS ══════════════════════════════════════════ */
.toolbar{
  background:rgba(var(--bg-rgb),.9);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:40;padding:10px 24px;
  display:flex;gap:8px;flex-wrap:wrap;align-items:center;
}
.tb-srch{position:relative;flex:1 1 200px;min-width:150px}
.tb-srch input{width:100%;padding:8px 12px 8px 34px;border-radius:var(--r);background:rgba(var(--overlay-rgb),.07);border:1px solid var(--border2);color:var(--text);font-size:14.25px;transition:all .15s}
.tb-srch input:focus{background:rgba(var(--overlay-rgb),.1);border-color:var(--accent);outline:none}
.tb-srch input::placeholder{color:var(--placeholder)}
.tb-srch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text4)}
.tb-sel{padding:8px 10px;border-radius:var(--r);background:rgba(var(--overlay-rgb),.07);border:1px solid var(--border2);color:var(--text);font-size:13.75px;cursor:pointer;max-width:140px}
.tb-sel option{background:var(--bg2)}
.tb-sep{width:1px;height:28px;background:var(--border);flex:none}
.tb-action{padding:7px 13px;border-radius:var(--r);font-size:13.75px;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.06);color:var(--text2)}
.tb-action:hover{background:rgba(var(--overlay-rgb),.12)}
.tb-action.primary{background:var(--accent);border-color:var(--accent2);color:#fff;box-shadow:0 2px 10px rgba(232,101,10,.3)}
.tb-action.primary:hover{background:var(--accent2)}
.pharm-status{padding:5px 24px;font-size:13.25px;color:var(--text3);background:rgba(var(--bg-rgb),.6);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:7px}
.live-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 2s infinite;flex:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.cards-wrap{padding:16px 24px 100px}
.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(286px,1fr));gap:12px}
/* Pharmacy card */
.pcard{
  background:rgba(var(--panel-rgb),.8);
  border:1px solid var(--border2);
  border-radius:var(--r2);
  overflow:hidden;position:relative;
  cursor:pointer;
  transition:all .22s cubic-bezier(.34,1,.64,1);
  animation:cardIn .3s both;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pcard.selectable{cursor:pointer}
.pcard.selected{border-color:var(--accent);box-shadow:0 0 0 2px rgba(232,101,10,.4),0 8px 30px rgba(0,0,0,.4)}
.pcard-select-cb{
  position:absolute;top:10px;right:10px;z-index:5;
  width:20px;height:20px;accent-color:var(--accent);cursor:pointer;
}
.bulk-bar{
  position:sticky;bottom:0;z-index:45;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 20px;margin-top:12px;
  background:rgba(var(--window-rgb),.97);backdrop-filter:blur(16px);
  border:1px solid var(--border2);border-radius:var(--r2);
  box-shadow:0 -8px 30px rgba(0,0,0,.4);
  animation:winIn .2s cubic-bezier(.34,1.2,.64,1);
}
.bulk-bar.hidden{display:none}
.pcard:hover{
  transform:translateY(-4px) scale(1.01);
  border-color:var(--accent);
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 0 1px rgba(232,101,10,.3),var(--glow-o);
  background:rgba(var(--navy-rgb),.9);
}
.pcard[data-warn="1"]{border-color:rgba(239,68,68,.3)}
.pcard[data-warn="1"]:hover{border-color:var(--red);box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 20px rgba(239,68,68,.2)}
.pcard-stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.pcard-inner{padding:14px 14px 12px 17px}
.c-head{display:flex;align-items:flex-start;gap:6px;margin-bottom:3px}
.c-name{font-size:14.75px;font-weight:700;color:var(--text);line-height:1.3;flex:1}
.wb{font-family:var(--mono);font-size:11px;font-weight:700;padding:2px 6px;border-radius:3px;background:rgba(239,68,68,.15);color:var(--txt-red);border:1px solid rgba(239,68,68,.3);flex:none}
.c-loc{font-size:12.5px;color:var(--text3);margin-bottom:2px}
.c-phone{font-size:12.5px;color:var(--text2);font-family:var(--mono);margin-bottom:8px}
.c-ids{display:flex;gap:5px;margin-bottom:8px}
.cid{font-family:var(--mono);font-size:11.5px;padding:3px 7px;border-radius:5px;background:rgba(var(--overlay-rgb),.05);border:1px solid var(--border);color:var(--text2)}
.cid-empty{color:var(--text4);border-color:transparent}
.c-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.vtag{font-family:var(--mono);font-size:11.5px;font-weight:700;padding:3px 8px;border-radius:5px;display:inline-flex;align-items:center;background:color-mix(in srgb,var(--tc) 12%,transparent);border:1px solid color-mix(in srgb,var(--tc) 35%,transparent);color:var(--tc)}
.c-svcs{display:flex;gap:3px;flex-wrap:wrap;margin-bottom:7px}
.sc{font-family:var(--mono);font-size:11px;font-weight:600;padding:2px 6px;border-radius:4px;background:var(--badge-blue-bg);border:1px solid rgba(59,130,246,.3);color:var(--txt-blue)}
.sc-dim{background:rgba(var(--overlay-rgb),.04);border-color:var(--border);color:var(--text4)}
/* Pharmacy tags (agrupar farmacias, 2026-09-16). Misma tecnica de color que
   .vtag: un solo --tc pinta fondo, borde y texto, asi cada etiqueta lleva su
   color sin necesitar una clase por color. */
.ptag{font-family:var(--sans);font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--tc) 16%,transparent);border:1px solid color-mix(in srgb,var(--tc) 40%,transparent);color:var(--tc);white-space:nowrap}
.c-ptags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.ptag-row{display:flex;align-items:center;gap:8px;padding:7px 4px;border-bottom:1px solid var(--border)}
.ptag-row:last-child{border-bottom:0}
.ptag-row input[type=text]{flex:1;min-width:0;padding:6px 9px;border-radius:7px;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text);font-size:13.5px}
.ptag-count{font-family:var(--mono);font-size:11px;color:var(--text3);flex:none}
.ptag-pick{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.04);cursor:pointer;font-size:12.5px;font-weight:600;color:var(--text2);user-select:none}
.ptag-pick.on{background:color-mix(in srgb,var(--tc) 18%,transparent);border-color:color-mix(in srgb,var(--tc) 45%,transparent);color:var(--tc)}
.c-note{font-size:12px;color:var(--text3);font-style:italic;border-left:2px solid var(--accent);padding-left:6px;margin-bottom:7px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-foot{display:flex;gap:5px;padding-top:7px;border-top:1px solid var(--border)}
.c-btn{padding:5px 10px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text2);transition:all .15s}
.c-btn:hover{background:rgba(var(--overlay-rgb),.12);border-color:var(--border3)}
.c-log{color:var(--txt-blue);border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.08)}
.c-log:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.c-edit:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ══ FLOATING WINDOWS ════════════════════════════════════════ */
.win-overlay{position:fixed;inset:0;z-index:200;pointer-events:none}
#refresh-now-btn{transition:transform .4s ease}
#live-dot{transition:background .3s ease}
.win-overlay.has-windows{pointer-events:auto}
.fwin{
  position:fixed;z-index:300;
  background:rgba(var(--window-rgb),.95);
  backdrop-filter:blur(30px);
  border:1px solid var(--border3);
  border-radius:var(--r3);
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(var(--overlay-rgb),.04),inset 0 1px 0 rgba(var(--overlay-rgb),.08);
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:box-shadow .2s,opacity .2s;
  min-width:360px;max-width:540px;
  cursor:auto;
  animation:winIn .25s cubic-bezier(.34,1.2,.64,1);
}
@keyframes winIn{from{opacity:0;transform:scale(.93) translateY(12px)}to{opacity:1;transform:none}}
.fwin.minimized{height:44px!important;overflow:hidden}
.fwin-titlebar{
  padding:11px 14px;
  background:rgba(var(--overlay-rgb),.03);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:10px;
  cursor:move;user-select:none;flex:none;
}
.win-dots{display:flex;gap:6px;flex:none}
.win-dot{width:12px;height:12px;border-radius:50%;cursor:pointer;transition:opacity .15s}
.win-dot.close{background:#ff5f57;box-shadow:0 0 6px rgba(255,95,87,.4)}
.win-dot.min{background:#febc2e;box-shadow:0 0 6px rgba(254,188,46,.4)}
.win-dot.max{background:#28c840;box-shadow:0 0 6px rgba(40,200,64,.4)}
.win-dot:hover{filter:brightness(1.2)}
.fwin-title{font-size:14.25px;font-weight:600;color:var(--text2);flex:1;text-align:center}
.fwin-title-icon{font-size:15px}
.win-close-btn{width:24px;height:24px;border-radius:50%;border:0;background:transparent;color:var(--text3);cursor:pointer;font-size:17px;display:grid;place-items:center;transition:all .15s;flex:none}
.win-close-btn:hover{background:rgba(239,68,68,.2);color:var(--txt-red)}
.fwin-body{flex:1;overflow-y:auto;padding:18px 20px;overscroll-behavior:contain}
/* 2026-09-26 (revisión móvil M3): bloquea el scroll de <html> mientras hay
   una ventana flotante, el cajón lateral o el chat de IA abiertos —
   arrastrar sobre la zona atenuada detrás (que solo bloquea CLICS, no el
   "scroll chaining" del navegador) ya no mueve la página de fondo. */
html.md-scroll-lock{overflow:hidden}
.fwin-body::-webkit-scrollbar{width:4px}
.fwin-body::-webkit-scrollbar-track{background:transparent}
.fwin-body::-webkit-scrollbar-thumb{background:var(--border3);border-radius:2px}
.fwin-foot{padding:14px 20px;border-top:1px solid var(--border);background:rgba(0,0,0,.2);display:flex;gap:8px;flex:none}
.fwin-save{flex:1;padding:10px;border:0;border-radius:var(--r);cursor:pointer;font-weight:700;font-size:15px;color:#fff;background:var(--accent);box-shadow:0 2px 12px rgba(232,101,10,.4);transition:all .15s}
.fwin-save:hover{background:var(--accent2)}
.fwin-cancel{padding:10px 16px;border:1px solid var(--border2);border-radius:var(--r);cursor:pointer;font-weight:600;font-size:14.75px;background:rgba(var(--overlay-rgb),.05);color:var(--text2);transition:all .15s}
.fwin-cancel:hover{background:rgba(var(--overlay-rgb),.1)}
/* Form fields inside windows */
.wf-section{margin-bottom:4px}
.wf-legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text4);padding:8px 0 6px;border-bottom:1px solid var(--border);margin-bottom:10px;width:100%}
.wf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wf-field{margin-bottom:10px}
.wf-field label{display:block;font-size:12.5px;font-weight:600;color:var(--text3);margin-bottom:4px;text-transform:uppercase;letter-spacing:.05em;font-family:var(--mono)}
.wf-field input,.wf-field select,.wf-field textarea{width:100%;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text);font-size:14.75px;transition:all .15s}
.wf-field input:focus,.wf-field select:focus,.wf-field textarea:focus{border-color:var(--accent);outline:none;background:rgba(var(--overlay-rgb),.07);box-shadow:0 0 0 3px rgba(232,101,10,.15)}
.wf-field input::placeholder{color:var(--placeholder)}
.wf-field select option{background:var(--bg2)}
.wf-field textarea{resize:vertical;min-height:64px}
.svc-checks{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.svc-check{display:flex;align-items:center;gap:7px;padding:6px 8px;border-radius:var(--r);background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border);cursor:pointer;font-size:13.75px;color:var(--text2);transition:all .15s}
.svc-check:hover{background:rgba(59,130,246,.1);border-color:rgba(59,130,246,.3)}
.svc-check input{accent-color:var(--blue);width:13px;height:13px}
/* Call log in window */
.cl-pharm-banner{background:rgba(232,101,10,.1);border:1px solid rgba(232,101,10,.2);border-radius:var(--r);padding:10px 12px;margin-bottom:14px}
.cl-pharm-banner h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px}
.cl-pharm-banner p{font-size:13px;color:var(--text3)}
.cl-hist-hd{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text4);margin:14px 0 6px;padding-top:12px;border-top:1px solid var(--border)}
.cl-entry{background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:7px}
.cl-entry-head{display:flex;align-items:center;gap:7px;margin-bottom:5px;flex-wrap:wrap}
.cl-badge{font-family:var(--mono);font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:4px}
.out-answered{background:rgba(34,197,94,.15);color:var(--txt-green);border:1px solid rgba(34,197,94,.3)}
.out-no_answer{background:rgba(239,68,68,.12);color:var(--txt-red);border:1px solid rgba(239,68,68,.25)}
.out-scheduled{background:rgba(59,130,246,.12);color:var(--txt-blue);border:1px solid rgba(59,130,246,.25)}
.out-updated{background:rgba(34,197,94,.15);color:var(--txt-green);border:1px solid rgba(34,197,94,.3)}
.out-refused{background:rgba(239,68,68,.12);color:var(--txt-red);border:1px solid rgba(239,68,68,.25)}
.cl-pharm-name{font-size:13.75px;font-weight:700;color:var(--text)}
.cl-date{font-family:var(--mono);font-size:12px;color:var(--text3)}
.cl-sw{font-family:var(--mono);font-size:11px;padding:2px 5px;background:rgba(var(--overlay-rgb),.06);border:1px solid var(--border);border-radius:3px;color:var(--text3)}
.cl-notes-txt{font-size:13.25px;color:var(--text2);margin-bottom:3px}
.cl-meta-txt{font-size:11.5px;color:var(--text4);font-family:var(--mono)}
/* Card detail window */
.detail-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--border)}
.detail-av{width:44px;height:44px;border-radius:var(--r);background:linear-gradient(135deg,var(--navy-lt),var(--navy));display:grid;place-items:center;font-size:20px;flex:none;border:1px solid var(--border2)}
.detail-name{font-size:17px;font-weight:800;color:var(--text);line-height:1.2;margin-bottom:4px}
.detail-loc{font-size:13.75px;color:var(--text3)}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border)}
.detail-row:last-child{border-bottom:0}
.dr-key{font-family:var(--mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text4)}
.dr-val{font-family:var(--mono);font-size:13.25px;color:var(--text2);font-weight:500;text-align:right}
.dr-val.good{color:var(--txt-green)}.dr-val.warn{color:var(--txt-yellow)}.dr-val.bad{color:var(--txt-red)}
/* Admin window */
.admin-tabs{display:flex;align-items:center;gap:2px;margin-bottom:16px;background:rgba(var(--overlay-rgb),.04);border-radius:var(--r);padding:3px}
.atab-divider{width:1px;align-self:stretch;background:var(--border2);margin:4px 4px;flex-shrink:0}
.home-card{background:rgba(var(--overlay-rgb),.02);border:1px solid var(--border);border-radius:var(--r2);padding:16px;cursor:pointer;transition:all .15s}
.home-card:hover{background:rgba(var(--overlay-rgb),.045);border-color:var(--border2);transform:translateY(-1px)}
.home-card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.home-card-val{font-size:26px;font-weight:800;font-family:var(--mono);color:var(--text);line-height:1.1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.home-card-lbl{font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-top:6px}
.home-card-sub{font-size:12.5px;color:var(--text4);margin-top:6px}
.atab{flex:1;padding:7px;border-radius:7px;border:0;background:transparent;color:var(--text3);font-size:13.25px;font-weight:600;cursor:pointer;transition:all .15s;text-align:center}
.atab.active{background:rgba(232,101,10,.2);color:var(--text);border:1px solid rgba(232,101,10,.3)}
.atab:hover{color:var(--text2)}
.atab-panel{display:none}.atab-panel.active{display:block}
.users-tbl{width:100%;border-collapse:collapse}
.users-tbl th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text4);padding:5px 6px;border-bottom:1px solid var(--border)}
.users-tbl td{padding:8px 6px;border-bottom:1px solid var(--border);font-size:13.75px;vertical-align:middle}
.users-tbl tr:last-child td{border-bottom:0}
.u-av2{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-weight:700;font-size:12.5px;color:#fff;margin-right:7px;vertical-align:middle}
.role-tag{font-family:var(--mono);font-size:11.5px;font-weight:700;padding:2px 7px;border-radius:4px}
.rt-admin{background:rgba(34,197,94,.12);color:var(--txt-green);border:1px solid rgba(34,197,94,.25)}
.rt-user{background:rgba(var(--overlay-rgb),.06);color:var(--text3);border:1px solid var(--border)}
.urt-btn{padding:3px 8px;border-radius:5px;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.urt-btn:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ver-tbl{width:100%;border-collapse:collapse}
.vr-bk{display:inline-block;font-size:11px;font-weight:700;margin-top:2px;padding:1px 7px;border-radius:99px;border:1px solid var(--border2);color:var(--text3)}
.vr-bk.ok{color:var(--txt-green);border-color:rgba(34,197,94,.35)}
.vr-bk.bad{color:var(--txt-red);border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08)}
.ver-tbl th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text4);padding:5px 6px;border-bottom:1px solid var(--border);vertical-align:middle}
.ver-tbl th.vr-sort{cursor:pointer;user-select:none;transition:color .12s}
.ver-tbl th.vr-sort:hover{color:var(--text2)}
/* 2026-09-25 — "no me gusto" el intento anterior (columnas fijas +
   compactar: texto muy chico, columnas fijas raras, seguia viendose
   amontonado). Segundo intento, "agrupar en secciones": SIN ocultar ni
   achicar nada, un renglon extra de encabezado agrupa las columnas de
   componentes en dos secciones -- "PrimeRx" (lo que reporta PrimeRx
   directamente) y "Otros programas · solo lectura" (SQL Version,
   StarPlus, EPatch, DB Size -- vienen de otro lado, ver
   versionReportComponentExtra / VERSION_REPORT_EXTRA_COMPONENTS en el
   backend). Farmacia/Site ID/Hostname y las columnas finales (backup,
   ultimo reporte, ficha, acciones) usan rowspan=2 para no duplicarse en
   ambos renglones de encabezado. .vr-grp-start marca SOLO la primera
   columna del grupo "extra" (en el encabezado de columna Y en cada fila
   de datos) para que el borde divisorio se vea como una sola linea
   continua de arriba a abajo, no repetida en cada columna extra. */
.ver-tbl th.vr-grp{font-size:9.5px;letter-spacing:.08em;font-weight:700;padding:4px 6px;color:var(--text3);background:rgba(var(--overlay-rgb),.03)}
.ver-tbl th.vr-grp-extra{background:rgba(var(--overlay-rgb),.055)}
.ver-tbl th.vr-grp-extra,.ver-tbl th.vr-grp-start,.ver-tbl td.vr-grp-start{border-left:1px solid var(--border3)}
/* 2026-09-25 — "si tengo el menu fijo, se esconde el sync": la columna de
   Acciones (el boton Sincronizar), al ser la ultima de la tabla, quedaba a
   cientos de pixeles de scroll horizontal con el sidebar en su ancho
   normal. Se fija SOLO esta columna al borde derecho (position:sticky,
   right:0) -- una sola columna, en el borde opuesto al intento anterior
   que no le gusto, igual que una columna congelada en una hoja de calculo.
   Fondo opaco (incluso en hover) por la misma razon que las demas columnas
   fijas: para que no se transparente sobre lo que va pasando por debajo al
   hacer scroll. */
.ver-tbl .vr-act-stk{position:sticky;right:0;background:var(--bg2);z-index:2;border-left:1px solid var(--border2)}
.ver-tbl th.vr-act-stk{z-index:3}
.ver-tbl tr:hover td.vr-act-stk{background:var(--bg2)}
/* 2026-09-25 — "el more info... que abra mediante un click en el nombre de
   la farmacia, asi tenemos mas espacio": se quito la columna "Ficha" (un
   boton) y el nombre de la farmacia mismo abre la ficha. Como ya no hay un
   boton visible que lo diga, el nombre necesita su propia señal de que se
   puede hacer click -- color de enlace + subrayado en hover, igual que
   cualquier link de la pagina. */
.ver-tbl td.vr-name-link{cursor:pointer;color:var(--txt-blue)}
.ver-tbl td.vr-name-link:hover{text-decoration:underline}
/* 2026-09-25 — "Need a drop down filter to filter each column result,
   aditional que peda asignarle un color a una columna o no": cada
   encabezado real (todas las columnas de datos, no el renglon de grupo ni
   Acciones) tiene un boton ⋮ que abre #vr-colmenu -- un popover UNICO
   compartido (no uno por columna) que vive FUERA de #versionreports-table
   a proposito: esa tabla se reemplaza entera via innerHTML en cada
   renderVersionReportsPage(), lo que destruiria un popover que viviera
   adentro apenas se repintara la tabla (por ejemplo, al tildar un
   filtro). El boton se reubica debajo de si mismo cada vez que se abre
   (ver vrRenderColMenu), asi que sigue funcionando aunque la tabla se haya
   vuelto a pintar entre clicks. */
.vr-col-menu-btn{border:none;background:transparent;color:var(--text4);cursor:pointer;font-size:13px;font-weight:700;padding:0 3px;margin-left:3px;border-radius:3px;line-height:1;vertical-align:middle}
.vr-col-menu-btn:hover,.vr-col-menu-btn.active{background:rgba(var(--overlay-rgb),.12);color:var(--text2)}
.ver-tbl th.vr-sort.vr-filtered .vr-th-label{color:var(--txt-blue)}
.ver-tbl th.vr-sort.vr-filtered .vr-th-label::after{content:" ▾";font-size:9px}
.vr-colmenu-pop{position:fixed;z-index:500;min-width:220px;max-width:280px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);box-shadow:0 8px 28px rgba(0,0,0,.35);padding:10px;font-size:12.75px}
.vr-cm-title{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text4);font-weight:700;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.vr-cm-section{margin-bottom:10px}
.vr-cm-label{font-size:11px;font-weight:700;color:var(--text3);margin-bottom:6px}
.vr-cm-swatches{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.vr-cm-swatch{width:20px;height:20px;border-radius:5px;border:2px solid transparent;cursor:pointer;padding:0}
.vr-cm-swatch.sel{border-color:var(--text1)}
.vr-cm-swatch.none{background:transparent;border:1px dashed var(--border3);color:var(--text4);font-size:12px;display:flex;align-items:center;justify-content:center}
.vr-cm-custom{width:20px;height:20px;border-radius:5px;border:1px solid var(--border2);padding:0;cursor:pointer;background:transparent}
.vr-cm-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.vr-cm-link{background:none;border:none;color:var(--txt-blue);font-size:11.5px;cursor:pointer;padding:0}
.vr-cm-link:hover{text-decoration:underline}
.vr-cm-values{max-height:190px;overflow-y:auto;border:1px solid var(--border);border-radius:6px;padding:4px 8px}
.vr-cm-row{display:flex;align-items:center;gap:7px;padding:4px 0;cursor:pointer;user-select:none}
.vr-cm-row input{margin:0}
.vr-cm-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vr-cm-empty{color:var(--text4);padding:6px 0;font-size:11.5px}
.vrc-wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,320px));gap:14px;margin-bottom:6px}
.vrc-card{background:rgba(var(--overlay-rgb),.02);border:1px solid var(--border);border-radius:var(--r2);padding:12px 14px}
.vrc-title{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.vrc-big{font-family:var(--mono);font-size:26px;font-weight:700;line-height:1;margin-bottom:4px}
.vrc-sub{font-size:12px;color:var(--text3)}
.vrc-list{max-height:170px;overflow-y:auto;margin-top:8px}
.vrc-item{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--border);font-size:12.75px}
.vrc-item:last-child{border-bottom:0}
.vrc-item .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vrc-item .d{font-family:var(--mono);font-size:11px;color:var(--text3);flex:none}
.vrc-bar{height:7px;border-radius:5px;background:rgba(var(--overlay-rgb),.07);overflow:hidden;margin:7px 0 5px}
.vrc-bar span{display:block;height:100%;border-radius:5px;background:var(--green)}
.ver-tbl td{padding:7px 6px;border-bottom:1px solid var(--border);font-family:var(--mono);font-size:13px;vertical-align:middle}
.ver-tbl tr:last-child td{border-bottom:0}
.ver-tbl tr:hover td{background:var(--glass2)}
.vt-lat{color:var(--txt-green);font-weight:700}
.badge-lat{background:rgba(34,197,94,.12);color:var(--txt-green);border:1px solid rgba(34,197,94,.25);font-family:var(--mono);font-size:11px;font-weight:700;padding:1px 5px;border-radius:3px}
.vt-act{padding:2px 7px;border-radius:4px;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);font-size:11.5px;font-weight:700;cursor:pointer;color:var(--text2);font-family:var(--mono);transition:all .12s}
.vt-act:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
.add-ver{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.add-ver input{flex:1;padding:6px 9px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text);font-family:var(--mono);font-size:13.25px}
.add-ver input:focus{border-color:var(--accent);outline:none}
.sys-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.sys-stat{background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border);border-radius:var(--r);padding:10px 12px}
.sys-stat b{display:block;font-family:var(--mono);font-size:22px;font-weight:700;margin-bottom:2px}
.sys-stat span{font-size:11.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.07em}
.pw-form{display:flex;flex-direction:column;gap:10px}
.pw-save{padding:10px;border-radius:var(--r);border:0;cursor:pointer;font-weight:700;font-size:14.75px;color:#fff;background:var(--navy-lt);width:100%;transition:all .15s}
.pw-save:hover{background:var(--blue)}

/* ══ CALL LOG PAGE ════════════════════════════════════════════ */
.calls-grid{padding:16px 24px 100px;display:grid;gap:10px}
.call-card{background:rgba(var(--panel-rgb),.8);border:1px solid var(--border2);border-radius:var(--r2);padding:14px 16px;transition:all .18s;animation:cardIn .3s both}
.call-card:hover{background:rgba(var(--navy-rgb),.9);border-color:var(--border3);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.cc-head{display:flex;align-items:center;gap:9px;margin-bottom:7px;flex-wrap:wrap}
.cc-pharm{font-weight:700;font-size:15px;color:var(--text)}
.cc-date{font-family:var(--mono);font-size:12.5px;color:var(--text3)}
.cc-sw{font-family:var(--mono);font-size:11.5px;padding:2px 6px;background:rgba(var(--overlay-rgb),.06);border:1px solid var(--border);border-radius:3px;color:var(--text3)}
.cc-notes{font-size:14.25px;color:var(--text2);margin-bottom:4px;line-height:1.5}
.cc-meta{font-size:12px;color:var(--text4);font-family:var(--mono)}

/* ══ UPDATES PAGE ════════════════════════════════════════════ */
.updates-grid{padding:16px 24px 100px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.upd-card{background:rgba(var(--panel-rgb),.8);border:1px solid rgba(239,68,68,.2);border-radius:var(--r2);padding:14px 16px;transition:all .18s;animation:cardIn .3s both;position:relative;overflow:hidden}
.upd-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--red),transparent)}
.upd-card:hover{background:rgba(var(--navy-rgb),.9);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 20px rgba(239,68,68,.1)}
.uc-name{font-weight:700;font-size:14.75px;color:var(--text);margin-bottom:3px}
.uc-loc{font-size:12.5px;color:var(--text3);margin-bottom:8px}
.uc-issues{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.uc-issue{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12.5px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);border-radius:6px;padding:5px 8px}
.uc-foot{display:flex;gap:7px}
.uc-btn{flex:1;padding:7px;border-radius:var(--r);font-size:13.25px;font-weight:600;cursor:pointer;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text2);transition:all .15s;text-align:center}
.uc-btn:hover{background:rgba(var(--overlay-rgb),.1)}
.uc-btn.primary{background:var(--accent);border-color:var(--accent2);color:#fff}
.uc-btn.primary:hover{background:var(--accent2)}
/* Data quality panel (2026-09-16) */
.dq-card{background:rgba(var(--overlay-rgb),.02);border:1px solid var(--border);border-radius:var(--r2);padding:14px 16px;margin-bottom:12px}
.dq-h{font-size:15px;font-weight:800;color:var(--text);margin-bottom:3px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dq-sub{font-size:12.5px;color:var(--text3);margin-bottom:11px}
.dq-count{font-family:var(--mono);font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:rgba(var(--overlay-rgb),.06);border:1px solid var(--border2);color:var(--text2)}
.dq-count.bad{background:rgba(239,68,68,.16);border-color:rgba(239,68,68,.4);color:var(--txt-red)}
.dq-count.ok{background:rgba(34,197,94,.14);border-color:rgba(34,197,94,.4);color:var(--txt-green)}
.dq-group{border:1px solid var(--border);border-radius:var(--r);padding:10px 12px;margin-bottom:9px;background:rgba(var(--overlay-rgb),.015)}
.dq-row{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:13px;flex-wrap:wrap}
.dq-row+.dq-row{border-top:1px solid var(--border)}
.dq-row .nm{flex:1;min-width:140px;color:var(--text)}
.dq-row .mt{font-size:11.5px;color:var(--text3);font-family:var(--mono)}
.dq-btn{padding:4px 10px;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text2)}
.dq-btn:hover{background:rgba(var(--overlay-rgb),.1)}
.dq-btn.go{border-color:rgba(232,101,10,.45);color:var(--txt-accent)}
.dq-empty{font-size:13px;color:var(--text3)}
/* Worklist bits (2026-09-16) */
.uc-tier{font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:2px 7px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.uc-tier.escalate{background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.45);color:var(--txt-red)}
.uc-tier.watch{background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.45);color:var(--txt-yellow)}
.uc-tier.new{background:rgba(var(--overlay-rgb),.06);border:1px solid var(--border2);color:var(--text3)}
.uc-lastcall{font-size:12px;color:var(--text3);margin-bottom:7px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.uc-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:3px}
.upd-card.selectable{cursor:pointer}
.upd-card.selected{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.upd-card-cb{position:absolute;top:12px;right:12px;width:17px;height:17px;accent-color:var(--accent);cursor:pointer;z-index:2}

/* ══ TOAST ════════════════════════════════════════════════════ */
/* 2026-09-26 (revisión móvil, cola de baja prioridad): el informe midió
   el aviso a solo 195px de ancho, con un mensaje largo convertido en un
   bloque de 137px de alto — mucho más angosto que el max-width de abajo.
   width:fit-content fuerza el ancho "encoge-a-su-contenido" acotado por
   max-width de forma explícita, en vez de depender del cálculo por
   defecto de un elemento position:fixed sin width (que en algunos
   motores/casos se queda más angosto de lo esperado). */
.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%,20px);z-index:9999;
  opacity:0;pointer-events:none;
  transition:.22s cubic-bezier(.34,1.2,.64,1);
  background:rgba(var(--window-rgb),.97);
  border:1px solid var(--border3);
  backdrop-filter:blur(20px);
  color:var(--text);padding:11px 20px;border-radius:14px;
  font-size:15px;font-weight:500;
  box-shadow:0 20px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(var(--overlay-rgb),.06);
  width:fit-content;max-width:min(440px,90vw);text-align:center;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ══ MISC ════════════════════════════════════════════════════ */
.back-bar{background:rgba(var(--bg-rgb),.7);border-bottom:1px solid var(--border);padding:10px 24px;display:flex;align-items:center;gap:12px;backdrop-filter:blur(10px);position:sticky;top:0;z-index:40}
.back-btn-dark{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.06);color:var(--text2);font-size:14.25px;font-weight:600;cursor:pointer;transition:all .15s}
.back-btn-dark:hover{background:rgba(var(--overlay-rgb),.1);transform:translateX(-2px)}
.page-title{font-size:17.5px;font-weight:800;color:var(--text)}
.page-sub{font-size:13.25px;color:var(--text3)}
.empty-state{text-align:center;padding:80px 24px;color:var(--text3)}
.empty-state h2{font-size:20px;font-weight:700;color:var(--text2);margin-bottom:8px}

/* Scrollbar */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border3);border-radius:3px}

.atab{padding:7px 14px;border-radius:7px;border:0;background:transparent;color:var(--text3);font-size:13.25px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.atab.active{background:rgba(232,101,10,.2);color:var(--text);border:1px solid rgba(232,101,10,.3)}
.atab:hover:not(.active){color:var(--text2)}
.atab-panel{display:none}.atab-panel.active{display:block}
/* 2026-09-26 (revisión móvil A3): #admin-tabs vivía sin overflow propio, así
   que cuando la fila de pestañas + el botón "← Dashboard" no cabían en el
   ancho del .back-bar, el navegador simplemente las empujaba fuera de la
   pantalla — medido incluso en escritorio a 1280/1366/1440px, no solo en
   móvil. Antes esta regla solo existía dentro de @media(max-width:640px);
   ahora es la regla base (el media query de abajo la puede seguir afinando). */
#admin-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;min-width:0}
@media(max-width:800px){
  .sidebar{width:60px}
  .sb-info,.sb-section,.nav-item span:not(.nav-icon){display:none}
  .main{margin-left:60px}
  /* 2026-09-26 (revisión móvil A5): angostar el sidebar a 60px no ajustaba
     nada más adentro — el logo (pensado para una franja de ~210px) y los
     botones del pie (que llevan texto además del emoji) seguían con su
     ancho de siempre y se salían del riel hacia la derecha. */
  .sb-logo{padding:14px 6px;justify-content:center}
  .sb-logo img{max-width:100%;width:auto;height:auto;max-height:26px}
  .sb-footer{padding:10px 6px}
  .lang-toggle-btn,.sb-signout{
    width:40px;height:40px;padding:0;margin:0 auto 8px;
    display:flex;align-items:center;justify-content:center;
    text-align:center;white-space:nowrap;overflow:hidden;font-size:0;
  }
  .sb-signout span:first-child{font-size:15px}
  .sb-signout span:last-child{display:none}
  /* #sb-account-btn no envuelve el emoji "👤" en su propio span (solo el
     texto "My account" lo está), así que el font-size:0 heredado de
     .lang-toggle-btn de arriba también lo apagaría a él — se restaura aquí
     y solo se esconde el span de texto. */
  #sb-account-btn{font-size:15px}
  #sb-account-btn span{display:none}
  #lang-toggle-btn::before{content:"🌐";font-size:15px}
  html:not([data-theme="light"]) #theme-toggle-btn::before{content:"☀️";font-size:15px}
  html[data-theme="light"] #theme-toggle-btn::before{content:"🌙";font-size:15px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* 2026-09-26 (revisión móvil M5): los 3 .bg-orb decorativos son círculos de
   hasta 700px con blur(90px) animándose sin parar — caro de recomponer en
   una GPU de teléfono (jank, batería) para algo puramente decorativo que
   casi no se nota en pantallas chicas. El pulso del botón de IA es el mismo
   tipo de costo por un efecto igual de prescindible ahí. Se pausan (quedan
   quietos, no desaparecen) solo en teléfono; en escritorio siguen igual. */
@media(max-width:640px){
  .bg-orb{animation:none}
  #ai-fab{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   PHONE OPTIMIZATION (≤640px) — drawer nav, stacked hero, full-
   screen floating windows, scrollable tables, bigger tap targets
   ══════════════════════════════════════════════════════════════ */
@media(max-width:640px){
  /* 2026-09-26 (revisión móvil A1): overflow-x:hidden en un ancestro de scroll
     rompe TODO position:sticky descendiente (el navegador deja de tratarlo
     como sticky y lo trata como static) — así que .back-bar, #bulk-action-bar
     y #upd-bulk-bar no se pegaban en real móvil aunque el CSS decía sticky.
     overflow-x:clip recorta el desborde horizontal igual que hidden pero no
     desactiva sticky. Ya heredado de html,body arriba; esta redeclaración en
     body ya no hacía falta salvo para test manual, se deja igual por si algo
     la esperaba pero ahora en clip.*/
  body{overflow-x:clip}

  /* Hamburger + off-canvas sidebar drawer */
  #mobile-nav-toggle{
    display:flex;align-items:center;justify-content:center;
    position:fixed;
    /* 2026-09-26 (revisión móvil A6, arreglo mínimo sin confirmar en iPhone
       real): con viewport-fit=cover el contenido puede quedar bajo el
       notch/isla dinámica; max() mantiene los 12px de siempre en un
       telefono normal y solo agrega mas en uno con recorte real. */
    top:max(12px, env(safe-area-inset-top, 0px));
    left:max(12px, env(safe-area-inset-left, 0px));
    z-index:210;
    width:42px;height:42px;border-radius:12px;border:1px solid var(--border2);
    background:rgba(var(--window-rgb),.9);backdrop-filter:blur(16px);color:var(--text);
    font-size:18.5px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.4);
  }
  .sidebar{
    width:250px!important;transform:translateX(-100%);
    transition:transform .25s cubic-bezier(.34,1,.64,1);z-index:205;
  }
  .sidebar.open{transform:translateX(0)}
  .sb-info,.sb-section,.nav-item span:not(.nav-icon){display:inline!important}
  #mobile-nav-backdrop{
    display:none;position:fixed;inset:0;z-index:204;
    background:rgba(0,0,0,.55);backdrop-filter:blur(2px);
  }
  #mobile-nav-backdrop.open{display:block}
  .main{margin-left:0!important}
  /* Sticky headers must clear the hamburger button themselves — ancestor
     padding doesn't affect where a position:sticky element pins to */
  .back-bar{top:54px!important}
  .toolbar{top:118px!important}
  /* 2026-09-26 (revisión móvil M2): 24px abajo alcanzaba para que la
     última fila de una lista/tabla no quedara pegada al borde, pero el
     botón flotante de IA (50-56px + su margen) se queda fijo encima de
     TODO el contenido — con solo 24px, tapaba justo esa última fila. */
  .content{padding:12px 12px 88px}

  /* Admin panel: the back-bar here also holds the tab row, and tab-panel
     headers hold a title + action button — both use a fixed-width flex row
     that overflows on narrow screens. Let them wrap / scroll instead of
     clipping content off the edge of the viewport. */
  #sc-admin .back-bar{flex-wrap:wrap;height:auto}
  #admin-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;width:100%;justify-content:flex-start}
  .admin-panel-head{flex-wrap:wrap;gap:8px}
  #sc-admin > div:nth-child(2){padding:16px 12px}

  /* Dashboard: stack everything to one column */
  .hero-grid{grid-template-columns:1fr;gap:18px}
  /* 2026-09-26 (revisión móvil M2): Dashboard es la única pantalla sin
     .back-bar (las demás ya reservan sitio para el hamburger con
     margin-left en su primer hijo, ver A1/2026-09-23 arriba) — sin este
     padding-top extra el botón ☰ fijo en la esquina quedaba encima del
     logo/título del hero. */
  .dash-hero{padding:56px 16px 18px}
  .hero-logo-wrap img{height:44px}
  .hero-tag .ht-main{font-size:19.5px}
  .hero-stats{grid-template-columns:1fr 1fr;gap:7px}
  .hs-val{font-size:24px}
  .hs-card{padding:12px 12px 22px}
  .hs-hint{display:none}
  .dash-grid{grid-template-columns:1fr!important}
  .dash-grid .updates-gc{grid-column:span 1!important}
  .hero-actions .ha-btn{flex:1 1 auto;text-align:center}

  /* Toolbar: dropdowns become an even wrap-grid instead of squeezed */
  .toolbar{padding:8px 12px}
  .tb-sel{flex:1 1 44%;max-width:none}
  .tb-srch{flex:1 1 100%}
  .back-bar{padding:10px 12px}

  /* Pharmacy cards: explicit single column */
  .cards-grid{grid-template-columns:1fr!important}

  /* Floating windows → full-screen sheets instead of small draggable panels */
  .fwin{
    position:fixed!important;inset:0!important;top:0!important;left:0!important;
    width:100%!important;height:100%!important;
    max-width:100%!important;max-height:100%!important;min-width:0!important;
    border-radius:0!important;transform:none!important;
  }
  .fwin-titlebar{cursor:default}
  .fwin.minimized{height:100%!important} /* minimizing doesn't make sense full-screen — ignore it */
  .win-dot.min{display:none}

  /* AI chat panel → also full-screen on phones, same reasoning as .fwin */
  #ai-fab{bottom:max(16px, env(safe-area-inset-bottom, 0px));right:max(16px, env(safe-area-inset-right, 0px));width:50px;height:50px;font-size:22px}
  #ai-chat-panel{
    position:fixed!important;inset:0!important;bottom:0!important;right:0!important;
    width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
    border-radius:0!important;
  }

  /* Tables: allow horizontal scroll instead of squashing columns unreadably */
  /* Only the wide TABLES scroll horizontally on their own — not the whole
     tab panel, which would otherwise drag titles/descriptions/buttons
     sideways along with them the moment someone scrolls to see a table's
     cut-off columns. Each table is wrapped in a .tbl-wrap div (see HTML). */
  .fwin-body{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .users-tbl,.ver-tbl,.audit-tbl,.calls-tbl{min-width:520px}

  /* Bigger, easier tap targets */
  .c-btn,.nav-icon{min-width:36px;min-height:36px}
  /* 2026-09-23: los puntos rojo/amarillo/verde de las ventanas salian como
     circulos de 36px (heredaban el min-width de arriba) y en pantalla
     completa no aportan nada: minimizar no aplica y "max" es decorativo.
     Todas las ventanas tienen su ✕ a la derecha, que es lo que se usa. */
  .win-dots{display:none}
  .u-email-edit{display:inline-block;padding:10px 8px;margin:-10px -4px}
  .tb-action,.urt-btn,.wr-btn{padding:9px 14px}

  /* ══ Revisión móvil 2026-09-23 ════════════════════════════════════════
     Hecha con capturas reales a 375px (Playwright) de las 24 pantallas y
     ventanas. Casi todo salía de DOS causas, así que se arregla en la
     causa y no pantalla por pantalla. */

  /* 1) CABECERAS QUE TAPABAN EL CONTENIDO. .back-bar usaba top:54px para
     librar el botón de menú. Pero un sticky cuyo sitio natural está por
     encima de su umbral se desplaza hacia abajo INCLUSO SIN SCROLL, así que
     tapaba los primeros ~54px de lo que venía debajo (el título "System
     Overview" detrás de las pestañas de Admin, "Orden: Prioridad" asomando
     en Pending Updates, los botones Lista/Tablero de My Space). Ahora se
     pega arriba del todo y el hueco para el menú se reserva empujando SOLO
     su primer hijo: las filas que se envuelven debajo usan todo el ancho. */
  .back-bar{top:0!important;flex-wrap:wrap!important;height:auto!important;
            row-gap:8px;padding:calc(10px + env(safe-area-inset-top, 0px)) 12px 10px!important;min-height:62px}
  .back-bar > :first-child{margin-left:52px}
  .back-bar > div:not(.bb-actions){flex:1 1 170px;min-width:0}

  /* 2) BOTONES CORTADOS POR LA DERECHA. La fila no se envolvía (solo Admin
     tenía el arreglo), así que "Sincronizar todos" y el selector "All
     software" quedaban fuera de pantalla. No se notaba en ningún análisis
     automático porque body{overflow-x:clip} ESCONDE ese desborde en vez
     de arreglarlo: los botones seguían ahí, solo que inalcanzables. */
  .bb-actions{width:100%;margin-left:0!important;flex-wrap:wrap}
  #myspace-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;width:100%;justify-content:flex-start}
  #myspace-tabs > *{flex:none}

  /* 3) Una sola barra fija. Con la cabecera envuelta, el top:118px fijo de
     la toolbar ya no puede ser correcto, y dos barras pegadas se comían un
     tercio de la pantalla del teléfono (la de Farmacias mide ~250px). */
  .toolbar{position:static!important;top:auto!important}

  /* 4) Cabecera del dashboard: el logo ocupaba media pantalla y el título
     quedaba estrujado a la derecha en siete líneas. Apilado y centrado —
     centrado a propósito: alineado a la izquierda, el logo caería justo
     debajo del botón de menú. */
  .hero-logo-wrap{flex-direction:column;align-items:center;text-align:center;gap:8px}
  .hero-live{justify-content:center}

  /* 5) Objetivos táctiles que se quedaban cortos (medidos: WCAG 2.5.8 pide
     24px como mínimo; iOS recomienda 44). El peor: el teléfono de cada
     tarjeta, que medía 14px de alto — y tocar para llamar a una farmacia es
     justo lo que más se hace desde el móvil. Se agranda el área de toque
     con padding + margen negativo, así la tarjeta no cambia de tamaño. */
  a[href^="tel:"],a[href^="mailto:"]{display:inline-block;padding:11px 6px;margin:-11px -6px}
  .city-chip,.hero-pill{min-height:36px;display:inline-flex;align-items:center}
  .tb-action,.vt-act,.ms-completed-toggle,.win-close-btn{min-height:36px}
  .win-close-btn{min-width:36px}
  /* !important a proposito: la regla base de .ms-task-check esta MAS ABAJO
     en el archivo que este bloque, y a igual especificidad gana la ultima. */
  .ms-task-check{width:26px!important;height:26px!important}
  .hero-live button{min-width:36px;min-height:36px}

  /* 6) El aviso de "Configurar PIN" tiene su ajuste móvil junto a su regla
     base (busca .pin-offer): aquí no ganaría, porque esa regla está más
     abajo en el archivo y a igual especificidad gana la última. */
}

/* 2026-09-26 (revisión móvil A5): las reglas de pantalla completa de arriba
   (.fwin, #ai-chat-panel) solo regían por debajo de 640px de ANCHO. Un
   teléfono en horizontal (844×390) tiene más de 640px de ancho pero solo
   390px de alto, así que las ventanas seguían en modo "flotante de
   escritorio" — arrastrables, con su ancho/alto fijo — inutilizables en una
   pantalla tan baja. La franja de tablet en modo retrato (641-800px, que ya
   usa el riel de iconos de 60px como si fuera móvil, ver arriba) tiene el
   mismo problema. Se repiten aquí las mismas reglas bajo una condición más
   amplia en vez de ensanchar el bloque de 640px de arriba, que trae consigo
   mucho CSS de reflow (grid de una columna, toolbar apilada, etc.) que NO
   corresponde en ese rango de ancho. */
@media(max-width:800px),(max-height:520px){
  .fwin{
    position:fixed!important;inset:0!important;top:0!important;left:0!important;
    width:100%!important;height:100%!important;
    max-width:100%!important;max-height:100%!important;min-width:0!important;
    border-radius:0!important;transform:none!important;
  }
  .fwin-titlebar{cursor:default}
  .fwin.minimized{height:100%!important}
  .win-dot.min{display:none}
  #ai-chat-panel{
    position:fixed!important;inset:0!important;bottom:0!important;right:0!important;
    width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
    border-radius:0!important;
  }
  /* 2026-09-26 (A6, arreglo minimo): en pantalla completa la barra de titulo
     y el pie de la ventana SI tocan el borde fisico del telefono, asi que
     conviene dejarles sitio para el notch / la isla dinamica / el indicador
     de inicio — sin confirmar en un iPhone real, se deja el minimo seguro
     (max() nunca resta espacio en un telefono sin recorte). */
  .fwin-titlebar{padding-top:max(11px, env(safe-area-inset-top, 0px))}
  .fwin-foot{padding-bottom:max(14px, env(safe-area-inset-bottom, 0px))}
}

/* 2026-09-26 (revisión móvil A2): Safari en iOS hace zoom automático al
   enfocar cualquier campo con font-size menor a 16px. Se fuerza el mínimo
   solo en teléfono / puntero grueso (pointer:coarse cubre tablets y el modo
   horizontal de un teléfono, que no siempre cae bajo max-width:640px) para
   no tocar la densidad de las tablas en escritorio. */
@media(max-width:640px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
  select,textarea{font-size:16px!important}
}

/* 2026-09-26 (revisión móvil, cola de baja prioridad): "Botones pequeños
   para el dedo" — una lista de controles medidos por debajo de los 36px
   recomendados para un dedo (checkboxes nativos de 13×13, el ⋮ de
   Version Reports a 19×13, "Borrar" en Llamadas a 43×14, "Ver"/"Buscar
   ficha" en Calidad de datos a 41×24, los swatches de color a 20×20, la
   ✕ del chat de IA a 26×29, las pestañas de Admin/My Space a 31px de
   alto). Solo en teléfono/puntero grueso — en escritorio, con mouse,
   estos mismos controles se quedan exactamente como estaban (más
   densidad de tabla es una ventaja ahí, no un problema). Donde el
   control ya vive dentro de un <label> que cubre todo el renglón
   (.inv-check, .acct-check, .svc-check) el "target" real ya es más
   grande que el cuadrito dibujado — igual se le da más alto de renglón
   para que el dedo tenga margen de sobra. Donde es un <span> de texto
   suelto (Borrar/✕ en Llamadas, ✏/🗑 sueltos) se usa la misma técnica de
   padding + margen negativo que ya se usa en los enlaces tel:/mailto:
   de arriba, para agrandar el área de toque SIN mover el texto de su
   sitio ni empujar a sus vecinos. */
@media(max-width:640px),(pointer:coarse){
  button,.tb-action,.atab,.mstab,.dq-btn,.urt-btn,.vr-col-menu-btn,.hs-card,
  .city-chip,.attn-card,a{touch-action:manipulation}

  input[type=checkbox],input[type=radio]{width:18px;height:18px}
  .svc-check input{width:18px;height:18px}
  .upd-card-cb{width:22px;height:22px}
  .inv-check,.svc-check{min-height:36px;padding-top:5px;padding-bottom:5px}
  .acct-check{min-height:36px;padding:5px 0 5px}

  /* pestañas de Admin / My Space: 31px de alto -> 36px+. !important
     porque .atab/.mstab tienen otra declaración más abajo en la hoja
     (fuera de cualquier media query) que si no, gana por venir después
     en el archivo con la misma especificidad. */
  .atab,.mstab{padding-top:10px!important;padding-bottom:10px!important}

  /* ⋮ de Version Reports: 19×13 -> área de toque de 36×36 (invisible,
     el icono se queda del mismo tamaño) */
  .vr-col-menu-btn{display:inline-block;padding:11px 10px;margin:-11px -7px}

  /* swatches de color: 20×20 -> 32×32 de verdad (no hace falta el truco
     del margen negativo — un swatch más grande en el teléfono es una
     mejora visual, no un defecto) */
  .vr-cm-swatch{width:32px;height:32px}

  /* "Ver"/"Buscar ficha" en Calidad de datos y "Delete" en Admin: más
     alto sin cambiar la densidad del botón en escritorio */
  .dq-btn{padding:9px 12px}
  .urt-btn{padding:9px 10px}

  /* ✕ del chat de IA: 26×29 -> ~40×40 */
  .ai-chat-close{padding:11px 12px}

  /* "Borrar"/"✕" sueltos como texto (Llamadas: reabrir/resolver/borrar
     un seguimiento, borrar una llamada del historial) */
  .tap-target-sm{display:inline-block;padding:10px 6px;margin:-10px -6px}
}

/* ══ AUTH SCREEN (added) ══════════════════════════════════════ */
#auth-screen{min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;padding:24px}
.auth-wrap{width:100%;max-width:400px;position:relative;z-index:1}
.auth-logo-wrap{text-align:center;margin-bottom:22px}
.auth-logo-wrap img{height:44px;width:auto;filter:drop-shadow(0 0 20px rgba(232,101,10,.4))}
.auth-logo-wrap p{color:var(--text3);font-size:13.75px;margin-top:10px;letter-spacing:.04em}
.auth-card{background:rgba(var(--panel-rgb),.85);backdrop-filter:blur(24px);border:1px solid var(--border2);border-radius:var(--r3);padding:26px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(var(--overlay-rgb),.06)}
.auth-tabs{display:flex;margin-bottom:20px;border-radius:var(--r);background:rgba(var(--overlay-rgb),.04);padding:3px;border:1px solid var(--border)}
.auth-tab{flex:1;padding:9px;border:0;border-radius:7px;background:transparent;cursor:pointer;font-weight:600;font-size:14.75px;color:var(--text3);transition:all .15s}
.auth-tab.active{background:rgba(232,101,10,.2);color:var(--text);border:1px solid rgba(232,101,10,.3)}
.auth-form{display:none}.auth-form.active{display:block}
.af{display:block;margin-bottom:13px}
.af>span{display:block;font-size:12.5px;font-weight:600;color:var(--text3);margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em;font-family:var(--mono)}
.af input{width:100%;padding:11px 13px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text);font-size:15.5px;transition:all .15s}
.af input:focus{border-color:var(--accent);outline:none;background:rgba(var(--overlay-rgb),.08);box-shadow:0 0 0 3px rgba(232,101,10,.15)}
.af input::placeholder{color:var(--placeholder)}
.auth-btn{width:100%;padding:12px;border:0;border-radius:var(--r);cursor:pointer;font-weight:700;font-size:15.5px;color:#fff;background:var(--accent);box-shadow:0 4px 20px rgba(232,101,10,.4);transition:all .15s;margin-top:4px}
.auth-btn:hover{background:var(--accent2);transform:translateY(-1px)}
.auth-btn:disabled{opacity:.6;pointer-events:none}
.auth-msg{font-size:13.75px;margin-top:8px;min-height:0;padding:0;border-radius:8px}
/* 2026-09-23 — login con PIN. El campo es un <input> real con
   inputmode="numeric" (en el telefono abre el teclado numerico nativo, que
   es mejor que cualquier teclado dibujado: vibra, es el de siempre) y los
   puntos de abajo solo marcan cuantos digitos faltan. */
/* 2026-09-23: ventana Mi cuenta */
.acct-who{padding:2px 0 12px;border-bottom:1px solid var(--border);margin-bottom:4px}
.acct-name{font-size:16px;font-weight:800;color:var(--text)}
.acct-sub{font-size:12.5px;font-family:var(--mono);color:var(--text4);margin-top:2px}
.acct-h{font-size:12px;font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text4);margin:18px 0 8px}
.acct-help{font-size:11.75px;color:var(--text4);margin:0 0 8px}
.acct-check{display:flex;align-items:flex-start;gap:8px;font-size:13.25px;color:var(--text2);cursor:pointer;margin:2px 0 12px}
.acct-check input{margin-top:2px}
.pin-hello{text-align:center;font-size:17px;font-weight:800;color:var(--text);margin:2px 0 3px}
.pin-sub{text-align:center;font-size:13.25px;color:var(--text3);margin-bottom:16px}
.pin-input{width:100%;padding:13px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text);font-family:var(--mono);font-size:26px;letter-spacing:.5em;text-align:center;transition:all .15s}
.pin-input:focus{border-color:var(--accent);outline:none;background:rgba(var(--overlay-rgb),.08);box-shadow:0 0 0 3px rgba(232,101,10,.15)}
.pin-dots{display:flex;justify-content:center;gap:11px;margin:14px 0 6px}
.pin-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--border2);transition:all .12s}
.pin-dot.on{background:var(--accent);border-color:var(--accent)}
.pin-alt{display:block;width:100%;margin-top:12px;padding:10px;background:none;border:0;color:var(--text3);font-size:13.25px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pin-alt:hover{color:var(--text)}
.pin-dev-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border)}
.pin-dev-row:last-child{border-bottom:0}
.pin-dev-lbl{flex:1;min-width:0;font-size:13.25px;color:var(--text2)}
.pin-dev-when{display:block;font-size:11.75px;color:var(--text4);margin-top:2px}
.pin-offer{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:900;display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:calc(100vw - 32px);padding:12px 14px;background:var(--bg2);border:1px solid var(--border2);border-radius:var(--r2);box-shadow:0 12px 34px rgba(0,0,0,.5);font-size:13.25px;color:var(--text2)}
/* En el teléfono salía como una caja estrecha en medio de la pantalla,
   tapando las tarjetas y chocando con el botón del asistente: ancho
   completo y por encima de ese botón. Va AQUÍ, detrás de su regla base, a
   propósito — en el bloque móvil general de más arriba perdería por orden. */
@media(max-width:640px){.pin-offer{left:16px;right:16px;transform:none;max-width:none;bottom:calc(92px + env(safe-area-inset-bottom, 0px))}}
/* 2026-10-01 ("que en el dashboard indique un floating que hay una
   version nueva que si quiero instalarla"): mismo patron que .pin-offer
   de arriba (misma posicion/sombra/caja), pero con su propio nombre de
   clase -- son independientes (una es por dispositivo/no-admin, esta es
   solo para admins) y z-index un punto mas alto para que, si alguna vez
   coinciden en pantalla, esta quede encima (es la mas urgente de las
   dos: una instalacion pendiente importa mas que ofrecer un PIN). */
.update-offer{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:901;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:min(560px,calc(100vw - 32px));padding:14px 16px;background:var(--bg2);border:1px solid var(--accent);border-radius:var(--r2);box-shadow:0 12px 34px rgba(0,0,0,.5);font-size:13.25px;color:var(--text2)}
.update-offer-body{flex:1;min-width:200px}
.update-offer-changelog{margin-top:6px;font-size:12px;color:var(--text3);white-space:pre-wrap;max-height:120px;overflow:auto}
.update-offer-actions{display:flex;gap:8px;flex-wrap:wrap}
.update-offer-status{flex-basis:100%;font-size:12px;color:var(--text3);margin-top:4px;white-space:pre-wrap;max-height:160px;overflow:auto}
@media(max-width:640px){.update-offer{left:16px;right:16px;transform:none;max-width:none;bottom:calc(92px + env(safe-area-inset-bottom, 0px))}}
.auth-msg.err{color:var(--txt-red);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);padding:8px 11px;margin-top:10px}
.auth-msg.ok{color:var(--txt-green);background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);padding:8px 11px;margin-top:10px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(var(--overlay-rgb),.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hidden{display:none!important}
/* Due date on cards */
.c-due{font-size:12px;color:var(--text3);margin-bottom:6px;display:flex;align-items:center;gap:4px}
.c-due.overdue{color:var(--txt-red);font-weight:600}
/* Audit log tab */
.audit-tbl{width:100%;border-collapse:collapse}
.audit-tbl th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text4);padding:5px 6px;border-bottom:1px solid var(--border)}
.audit-tbl td{padding:7px 6px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top}
.audit-tbl tr:last-child td{border-bottom:0}
.audit-tbl tr:hover td{background:var(--glass2)}
.audit-action{font-family:var(--mono);font-size:11px;font-weight:700;padding:2px 6px;border-radius:4px;text-transform:uppercase;white-space:nowrap}
.aa-create{background:rgba(34,197,94,.15);color:var(--txt-green)}
.aa-update{background:rgba(245,158,11,.15);color:var(--txt-yellow)}
.aa-delete{background:rgba(239,68,68,.15);color:var(--txt-red)}
.aa-login,.aa-logout,.aa-register{background:rgba(59,130,246,.15);color:var(--txt-blue)}
.empty-row td{text-align:center;color:var(--text3);padding:20px!important}
.mono{font-family:var(--mono)}
.vt-n{color:var(--text2)}

/* ══ MY SPACE ═══════════════════════════════════════════════
   Uses its own .mstab/.mstab-panel classes (never .atab/.atab-panel —
   those are scoped globally by adTab() and would fight the Admin
   panel's own tabs if reused here). */
.mstab-divider{width:1px;align-self:stretch;background:var(--border2);margin:4px 4px;flex-shrink:0}
.mstab{padding:7px 14px;border-radius:7px;border:0;background:transparent;color:var(--text3);font-size:13.25px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.mstab.active{background:rgba(232,101,10,.2);color:var(--text);border:1px solid rgba(232,101,10,.3)}
.mstab:hover:not(.active){color:var(--text2)}
.mstab-panel{display:none}.mstab-panel.active{display:block}
.ms-view-toggle{display:flex;gap:3px;background:rgba(var(--overlay-rgb),.04);border-radius:10px;padding:3px;border:1px solid var(--border)}
.ms-view-btn{padding:6px 12px;border-radius:7px;border:0;background:transparent;color:var(--text3);font-size:13.25px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.ms-view-btn.active{background:rgba(232,101,10,.2);color:var(--text);border:1px solid rgba(232,101,10,.3)}
.ms-view-btn:hover:not(.active){color:var(--text2)}

.ms-viewing-banner{display:none;align-items:center;gap:8px;padding:9px 16px;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);border-radius:var(--r);color:var(--txt-yellow);font-size:13px;font-weight:600;margin:0 24px 16px}
.ms-viewing-banner.on{display:flex}
.ms-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.ms-toolbar .grow{flex:1;min-width:160px}
.ms-search{width:100%;padding:8px 12px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text);font-size:13.75px}
.ms-search:focus{border-color:var(--accent);outline:none}
.ms-select{padding:7px 10px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text2);font-size:13.25px}
.ms-select option{background:var(--bg2)}
.ms-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ms-chip{font-family:var(--mono);font-size:11.75px;font-weight:700;padding:5px 11px;border-radius:99px;cursor:pointer;background:rgba(var(--overlay-rgb),.05);border:1px solid var(--border2);color:var(--text3);transition:all .15s}
.ms-chip:hover{color:var(--text2)}
.ms-chip.active{background:color-mix(in srgb,var(--tc,var(--accent)) 18%,transparent);border-color:color-mix(in srgb,var(--tc,var(--accent)) 45%,transparent);color:var(--tc,var(--accent))}

.ms-overdue{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);border-radius:var(--r2);padding:12px 14px;margin-bottom:16px}
.ms-overdue-title{font-family:var(--mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--txt-red);margin-bottom:8px}

.ms-task-row{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:var(--r);border:1px solid var(--border);background:rgba(var(--overlay-rgb),.02);margin-bottom:7px;transition:all .15s}
.ms-task-row:hover{background:rgba(var(--overlay-rgb),.045);border-color:var(--border2)}
.ms-task-row.done{opacity:.55}
.ms-task-row.done .ms-task-title{text-decoration:line-through}
.ms-task-check{width:19px;height:19px;border-radius:6px;border:2px solid var(--border3);background:transparent;cursor:pointer;flex:none;margin-top:1px;display:grid;place-items:center;color:#fff;font-size:12px;transition:all .15s}
.ms-task-check.checked{background:var(--green);border-color:var(--green)}
.ms-task-check:disabled{cursor:not-allowed;opacity:.5}
.ms-task-body{flex:1;min-width:0}
.ms-task-title{font-size:14.25px;font-weight:600;color:var(--text)}
.ms-task-desc{font-size:12.75px;color:var(--text3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-task-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.ms-due{font-family:var(--mono);font-size:11.5px;padding:2px 7px;border-radius:5px;background:rgba(var(--overlay-rgb),.05);border:1px solid var(--border);color:var(--text3)}
.ms-due.overdue{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.35);color:var(--txt-red);font-weight:700}
.ms-pri{font-family:var(--mono);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase}
.ms-pri-low{background:rgba(59,130,246,.15);color:var(--txt-blue)}
.ms-pri-normal{background:rgba(var(--overlay-rgb),.06);color:var(--text3)}
.ms-pri-high{background:rgba(239,68,68,.15);color:var(--txt-red)}
.ms-repeat{font-size:12px;color:var(--text4)}
.ms-task-actions{display:flex;gap:4px;flex:none}
.ms-icon-btn{width:28px;height:28px;border-radius:7px;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.04);color:var(--text3);cursor:pointer;display:grid;place-items:center;font-size:13px;transition:all .15s}
.ms-icon-btn:hover{background:rgba(var(--overlay-rgb),.1);color:var(--text2)}

.mst-sub{margin-top:18px;padding-top:14px;border-top:1px solid var(--border)}
.mst-sub-title{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.mst-sub-title.clickable{cursor:pointer;user-select:none}
.mst-sub-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid rgba(var(--overlay-rgb),.04);font-size:13px}
.mst-sub-row:last-child{border-bottom:none}
.mst-sub-empty{font-size:12.5px;color:var(--text4);padding:4px 0}
.mst-sub-add{display:flex;gap:7px;margin-top:8px}
.mst-sub-add input[type=text],.mst-sub-add textarea{flex:1;min-width:0}
.mst-chk-item{width:17px;height:17px;border-radius:5px;border:2px solid var(--border3);background:transparent;cursor:pointer;flex:none;display:grid;place-items:center;color:#fff;font-size:10px}
.mst-chk-item.checked{background:var(--green);border-color:var(--green)}
.mst-chk-text{flex:1;font-size:13px;min-width:0;word-break:break-word}
.mst-chk-text.done{text-decoration:line-through;color:var(--text4)}
.mst-locked-note{font-size:12.5px;color:var(--text4);font-style:italic;padding:6px 0}
.mst-att-meta{font-size:11.5px;color:var(--text4);font-family:var(--mono)}
.mst-att-name-link{cursor:zoom-in;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:var(--text4)}
.mst-att-name-link:hover{color:var(--txt-accent)}
/* 2026-09-17 — lightbox del preview de imagen (click en el título del
   adjunto). Overlay simple, ajeno al sistema de fwin/win-overlay que usan
   las demás ventanas — solo necesita mostrar una imagen y cerrarse, no
   arrastre ni minimizar. */
#ms-img-preview-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;align-items:center;justify-content:center;flex-direction:column;gap:10px;cursor:zoom-out}
#ms-img-preview-img{max-width:90vw;max-height:82vh;border-radius:10px;box-shadow:0 12px 48px rgba(0,0,0,.6);cursor:default}
#ms-img-preview-name{color:var(--text2);font-size:13px;font-family:var(--mono)}
#ms-img-preview-close{position:absolute;top:18px;right:22px;background:rgba(var(--overlay-rgb),.08);border:1px solid var(--border);color:var(--text);width:34px;height:34px;border-radius:50%;font-size:16px;cursor:pointer}
#ms-img-preview-close:hover{background:rgba(var(--overlay-rgb),.15)}
.mst-com-body{flex:1;min-width:0}
.mst-com-meta{font-size:11px;color:var(--text4);margin-bottom:2px}
.mst-com-text{font-size:13px;color:var(--text2);white-space:pre-wrap;word-break:break-word}

.ms-board-wrap{position:relative}
.ms-board{display:flex;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-behavior:smooth}
.ms-board-fade{position:absolute;top:0;bottom:8px;width:52px;pointer-events:none;z-index:2;opacity:1;transition:opacity .15s}
.ms-board-fade.hide{opacity:0}
.ms-board-fade-l{left:0;background:linear-gradient(to right,var(--bg) 0%,rgba(var(--bg-rgb),0) 100%)}
.ms-board-fade-r{right:0;background:linear-gradient(to left,var(--bg) 0%,rgba(var(--bg-rgb),0) 100%)}
.ms-board-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:rgba(var(--panel-rgb),.92);color:var(--text);font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .15s,background .15s;padding:0}
.ms-board-nav:hover{background:rgba(232,101,10,.25);border-color:rgba(232,101,10,.4)}
.ms-board-nav.hide{opacity:0;pointer-events:none}
.ms-board-nav-l{left:6px}
.ms-board-nav-r{right:6px}
/* 2026-09-29 (pedido de Hector): "que la columna este mas larga hacia
   abajo" -- antes min-height era un fijo de 260px, asi que con pocas
   tarjetas la columna quedaba corta y dejaba mucho espacio en blanco
   debajo en pantallas altas. max() deja que crezca con el alto de la
   ventana (menos ~260px de cabecera/toolbar arriba) pero nunca baje de
   260px en pantallas bajas o si el contenido es mas alto que eso. */
/* 2026-10-01 ("que pueda seguir acumulandose hacia abajo y hacer scroll
   dentro de la lista, para que no se achique mientras mas informacion
   hay"): antes esto era min-height, asi que una columna con muchas tareas
   simplemente crecia sin limite -- y como .ms-board usa flexbox normal
   (align-items:stretch por defecto), TODAS las columnas se estiraban para
   igualar a la mas alta, dejando a las columnas vacias con un espacio en
   blanco enorme y empujando la franja de color de abajo lejos de donde se
   ve. Ahora es height (un tope real, no un piso) y el scroll vive adentro,
   en .ms-board-col-list -- ver mas abajo.*/
.ms-board-col{background:var(--colbg,rgba(var(--overlay-rgb),.02));border:1px solid var(--border);border-radius:var(--r2);padding:12px;height:max(260px,calc(100vh - 260px));flex:0 0 290px;width:290px;overflow:hidden;display:flex;flex-direction:column}
@media(max-width:760px){.ms-board-col{flex:0 0 220px;width:220px;height:min(420px,60vh)}}
/* flex:1 + min-height:0 es lo que de verdad permite que esto se encoja por
   debajo de su contenido y por lo tanto scrollee -- sin min-height:0 un
   hijo de flex nunca se achica mas alla de su propio contenido (default
   min-height:auto) y .ms-board-col-list simplemente seguiria empujando la
   columna entera hacia abajo, exactamente el problema que esto arregla. */
.ms-board-col-list{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden}
/* Boton "+ Add task" pegado al pie de cada columna (fuera del area que
   scrollea, para que este siempre a la vista sin tener que bajar hasta el
   final de la lista) -- crear la tarea desde aqui le aplica la categoria
   de esa columna automaticamente (ver msOpenNewTaskInCategory()). */
.ms-board-col-add{display:block;width:100%;text-align:left;margin-top:8px;padding:7px 9px;border:1px dashed var(--border2);border-radius:var(--r);background:transparent;color:var(--text3);font-size:12.5px;cursor:pointer;flex-shrink:0;font-family:inherit}
.ms-board-col-add:hover{background:rgba(var(--overlay-rgb),.05);color:var(--text2);border-color:var(--accent)}
/* 2026-09-15: "quepan 3 mas a la derecha" — while the Board sub-view is
   active, the shared 1100px content wrapper (id ms-content-wrap) widens so
   more columns are visible without horizontal scrolling; toggled by
   msSyncContentWidth(). Only affects the Tasks tab while in board mode —
   List/Notes/Calendar/Dashboard/Trash keep the original 1100px cap.
   NOTE (2026-09-15, same-day fix): #ms-content-wrap has its own inline
   max-width:1100px (see the element itself), and an inline style always
   outranks a class selector's rule regardless of specificity — so this
   ".ms-wide" class rule never actually took effect; the widening below was
   silently a no-op the whole time. msSyncContentWidth() now sets
   wrap.style.maxWidth directly instead, which DOES win (same element,
   same style property, last write wins) — this class is kept only in
   case something else wants a CSS hook for "board view is wide" later. */
#ms-content-wrap.ms-wide{max-width:min(2200px,97vw)}
.ms-board-col.dragover{border-color:var(--accent);background:rgba(232,101,10,.06)}
.ms-board-col-head{font-family:var(--mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text3);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.ms-board-col-head-label{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 2026-09-16: era un puntito de 8px junto al nombre; luego una barrita
   vertical en el mismo lugar; ahora, a pedido de Hector ("que sea de
   esquina a esquina, tambien en la parte de abajo"), dos franjas
   horizontales de ancho completo, una arriba y otra abajo de la columna
   entera — no ya un adorno junto al texto. El overflow:hidden + el
   display:flex;flex-direction:column en .ms-board-col hacen el trabajo:
   cada franja sobresale de la columna via margen negativo (para llegar
   borde a borde) y el padre la recorta con su propio border-radius en vez
   de calcular el radio exacto a mano; la de abajo lleva margin-top:auto
   para quedar pegada al borde inferior real de la columna (incluyendo
   cuando esta vacia y su alto lo da min-height, no el contenido). */
.ms-board-colorbar-top{height:10px;margin:-12px -12px 10px -12px;background:var(--tc,transparent);flex-shrink:0}
.ms-board-colorbar-bottom{height:10px;margin:auto -12px -12px -12px;background:var(--tc,transparent);flex-shrink:0}
.ms-board-card{padding:9px 10px;border-radius:var(--r);border:1px solid var(--border);background:var(--bg2);margin-bottom:7px;cursor:grab;font-size:13.25px}
.ms-board-card:hover{border-color:var(--border2)}
.ms-board-card.dragging{opacity:.4}
.ms-board-col.dragging-col{opacity:.4}
/* 2026-09-29: "agrandar mas el area de escoger la columna para arrastrar" --
   el header original no tenia padding, asi que el hit-box para agarrar el
   drag era solo la altura de la linea de texto (~16px), muy fino. El
   padding + margin negativo de igual magnitud agranda la zona clickeable
   sin mover nada visualmente (el margen negativo cancela el padding). El
   icono ⠿ al inicio da una pista visual de donde agarrar. */
.ms-board-col-head{padding:9px 6px;margin:-9px -6px 3px -6px;border-radius:6px}
.ms-board-col-head[draggable="true"]{cursor:grab}
.ms-board-col-head[draggable="true"]:hover{background:rgba(var(--overlay-rgb),.06)}
.ms-board-col-head[draggable="true"]:active{cursor:grabbing}
.ms-board-col-draghandle{opacity:.5;font-size:13px;line-height:1;flex:none;margin-right:1px}
.ms-board-col-head[draggable="true"]:hover .ms-board-col-draghandle{opacity:.9}
/* 2026-09-29 ("la descripcion y el checklist tenga una opcion de display
   para... verlo en la pantalla inicial sin tener que entrar"): toggle
   chiquito junto a la etiqueta de Description/Checklist en el editor de
   tarea. Selector con element+class (misma especificidad que ".wf-field
   label" de mas arriba) puesto DESPUES en la hoja de estilos para ganar por
   orden de aparicion -- si no, ".wf-field label" lo pisaria (bloque,
   mayusculas, etc.) dentro del modal de tarea. */
label.mst-card-toggle{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text3);cursor:pointer;font-family:var(--mono);margin:0}
label.mst-card-toggle:hover{color:var(--text2)}
label.mst-card-toggle input{width:auto;margin:0;flex:none}
/* Previsualizacion del checklist en la tarjeta (Board y List) cuando la
   tarea tiene "Show on card" activado para su checklist -- items chequeables
   sin abrir la tarea (event.stopPropagation() en cada uno evita que el click
   abra la tarea, ya que la tarjeta entera es clickeable). */
.ms-chk-prev{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.ms-chk-prev-item{display:flex;align-items:flex-start;gap:6px;font-size:12px;color:var(--text3);cursor:pointer;line-height:1.35}
.ms-chk-prev-item input{width:auto;margin:2px 0 0 0;flex:none;cursor:pointer}
.ms-chk-prev-item.done span{text-decoration:line-through;opacity:.6}
.ms-chk-prev-more{font-size:11px;color:var(--text4);margin-top:2px;font-style:italic}
/* 2026-09-26 (revisión móvil, cola de baja prioridad): el arrastre
   HTML5 nativo (draggable=""/ondragstart) no dispara con el dedo en
   iOS/Android — solo funciona con mouse. En vez de reescribir el drag
   & drop entero para tacto (autoscroll, feedback visual, etc. — mucho
   riesgo para la cola de baja prioridad), se agrega esta alternativa
   explícita que el informe ya sugería ("existe la alternativa de
   cambiar la categoría dentro de la tarea, pero no es obvia"): un
   botón ⇄ en cada tarjeta, visible con mouse Y con dedo, que abre un
   popover para moverla a otra columna con un toque — mismo endpoint
   que ya usa soltar la tarjeta (msBoardMoveTaskTo). */
.ms-board-card-move{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;padding:9px;margin:-9px -9px -9px 3px;border-radius:6px;border:0;background:transparent;color:var(--text4);font-size:13px;cursor:pointer;line-height:1}
.ms-board-card-move:hover{background:rgba(var(--overlay-rgb),.08);color:var(--text2)}

.ms-notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.ms-note-card{background:rgba(var(--overlay-rgb),.02);border:1px solid var(--border);border-radius:var(--r2);padding:14px;cursor:pointer;transition:all .15s;min-height:100px;display:flex;flex-direction:column}
.ms-note-card:hover{background:rgba(var(--overlay-rgb),.045);border-color:var(--border2);transform:translateY(-1px)}
.ms-note-title{font-size:14.25px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:6px}
.ms-note-body{font-size:12.75px;color:var(--text3);margin-top:6px;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}
.ms-note-date{font-size:11px;color:var(--text4);margin-top:8px;font-family:var(--mono)}

.ms-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ms-cal-title{font-size:16px;font-weight:700}
.ms-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:stretch}
.ms-cal-dow{font-family:var(--mono);font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--text4);text-align:center;padding-bottom:4px}
.ms-cal-day{min-height:76px;border-radius:var(--r);border:1px solid var(--border);background:rgba(var(--overlay-rgb),.02);padding:6px;cursor:pointer;transition:all .15s}
.ms-cal-day:hover{border-color:var(--border2)}
.ms-cal-day.empty{background:transparent;border-color:transparent;cursor:default}
.ms-cal-day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset}
.ms-cal-day.selected{background:rgba(232,101,10,.1);border-color:var(--accent)}
.ms-cal-daynum{font-family:var(--mono);font-size:12px;color:var(--text3)}
.ms-cal-dots{display:flex;flex-wrap:wrap;gap:2px;margin-top:5px}
.ms-cal-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ms-cal-dot.overdue{background:var(--red)}
.ms-cal-daylist{margin-top:16px}
.ms-cal-bar{align-self:start;height:16px;line-height:16px;padding:0 6px;font-size:10.75px;font-weight:600;color:#fff;background:var(--accent);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:pointer;margin-bottom:2px}
.ms-cal-bar.overdue{background:var(--red)}
.ms-cal-bar.cap-l{border-top-left-radius:5px;border-bottom-left-radius:5px;margin-left:3px}
.ms-cal-bar.cap-r{border-top-right-radius:5px;border-bottom-right-radius:5px;margin-right:3px}
.ms-cal-bar.event{background:var(--blue)}

.tb-action.on{background:rgba(232,101,10,.2);border-color:rgba(232,101,10,.4);color:var(--text)}
#ms-cal-view-month.active,#ms-cal-view-agenda.active{background:rgba(232,101,10,.2);border-color:rgba(232,101,10,.3);color:var(--text)}

.ms-agenda-section{margin-bottom:22px}
.ms-agenda-section-title{font-family:var(--mono);font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text3);margin-bottom:10px}
.ms-agenda-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);border:1px solid var(--border);background:rgba(var(--overlay-rgb),.02);margin-bottom:7px;cursor:pointer;transition:all .15s}
.ms-agenda-row:hover{background:rgba(var(--overlay-rgb),.045);border-color:var(--border2)}
.ms-agenda-row.done .ms-agenda-title{text-decoration:line-through;color:var(--text4)}
.ms-agenda-date{width:44px;height:44px;border-radius:9px;background:rgba(var(--overlay-rgb),.06);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:none}
.ms-agenda-daynum{font-family:var(--mono);font-size:15px;font-weight:700;color:var(--text)}
.ms-agenda-mon{font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text4)}
.ms-agenda-body{flex:1;min-width:0}
.ms-agenda-title{font-size:14px;font-weight:600;color:var(--text)}
.ms-agenda-meta{display:flex;gap:6px;align-items:center;margin-top:4px}
.ms-agenda-kind{font-family:var(--mono);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text4);background:rgba(var(--overlay-rgb),.05);border:1px solid var(--border);border-radius:5px;padding:2px 6px}
.ms-agenda-kind.event{color:var(--txt-blue);border-color:rgba(59,130,246,.3);background:rgba(59,130,246,.12)}

.ms-dash-bar-row{display:flex;align-items:center;gap:10px;padding:7px 0}
.ms-dash-bar-label{width:130px;flex:none;font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-dash-bar-track{flex:1;height:8px;border-radius:5px;background:rgba(var(--overlay-rgb),.06);overflow:hidden}
.ms-dash-bar-fill{height:100%;border-radius:5px;background:var(--accent)}
.ms-dash-bar-n{width:26px;flex:none;text-align:right;font-family:var(--mono);font-size:12.5px;color:var(--text3)}
.ms-dash-upcoming-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13.25px}
.ms-dash-activity-row{padding:7px 0;border-bottom:1px solid var(--border);font-size:12.75px;color:var(--text2)}
.ms-dash-activity-row .t{color:var(--text4);font-size:11px;margin-top:2px}

.ms-cat-row{display:flex;flex-direction:column;align-items:stretch;gap:7px;padding:8px 4px;border-bottom:1px solid var(--border)}
.ms-cat-row:last-child{border-bottom:0}
.ms-cat-row input[type=text]{flex:1;padding:6px 9px;border-radius:7px;border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text);font-size:13.5px}
.ms-color-picker{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ms-color-swatch{width:20px;height:20px;border-radius:50%;cursor:pointer;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 0 0 2px transparent;transition:box-shadow .12s}
.ms-color-swatch:hover{box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 0 0 2px rgba(255,255,255,.35)}
.ms-color-swatch.active{box-shadow:0 0 0 1px rgba(255,255,255,.15) inset,0 0 0 2px var(--text)}
.ms-color-custom{width:22px;height:22px;padding:0;border:none;border-radius:50%;cursor:pointer;flex:none;background:none}
.ms-color-custom::-webkit-color-swatch-wrapper{padding:0;border-radius:50%;overflow:hidden}
.ms-color-custom::-webkit-color-swatch{border:1px solid rgba(255,255,255,.25)}
.ms-color-custom::-moz-color-swatch{border:1px solid rgba(255,255,255,.25);border-radius:50%}

.ms-completed-toggle{font-size:12.75px;color:var(--text3);cursor:pointer;user-select:none;margin:14px 0 8px;display:inline-flex;align-items:center;gap:5px}
.ms-completed-toggle:hover{color:var(--text2)}
/* ══ Inventario (2026-09-24) ══════════════════════════════════════ */
.inv-muted{color:var(--text3);font-size:13px}
.mono{font-family:var(--mono)}
.inv-scan-box{background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border2);border-radius:var(--r2);padding:14px 16px;margin-bottom:16px}
.inv-scan-lbl{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text4);margin-bottom:8px}
.inv-scan-row{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.25);border:1px solid var(--border2);border-radius:var(--r);padding:4px 4px 4px 12px;transition:border-color .15s, box-shadow .15s}
.inv-scan-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,101,10,.15)}
.inv-scan-row input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-family:var(--mono);font-size:16px;letter-spacing:.04em;padding:9px 0;outline:none}
.inv-scan-row input::placeholder{color:var(--placeholder);letter-spacing:0;font-family:inherit}
.inv-scan-ico{color:var(--text4);font-size:13px;letter-spacing:-1px;flex:none}
.inv-op-scan{margin-top:4px}
.inv-op-scan.flash-ok{animation:invFlashOk .6s}
.inv-op-scan.flash-err{animation:invFlashErr .6s}
@keyframes invFlashOk{0%{box-shadow:0 0 0 3px rgba(34,197,94,.55)}100%{box-shadow:0 0 0 3px rgba(34,197,94,0)}}
@keyframes invFlashErr{0%{box-shadow:0 0 0 3px rgba(239,68,68,.6)}100%{box-shadow:0 0 0 3px rgba(239,68,68,0)}}
.inv-scan-card{margin-top:12px;padding:12px 14px;border-radius:var(--r);background:rgba(var(--overlay-rgb),.05);border:1px solid var(--border2)}
.inv-scan-card.err{color:var(--txt-red)}
.inv-scan-top{display:flex;align-items:flex-start;gap:10px}
.inv-scan-title{font-weight:800;font-size:16px;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inv-scan-sub{font-size:12.5px;color:var(--text3);margin-top:2px;overflow-wrap:anywhere}
.inv-scan-line{font-size:13.75px;color:var(--text2);margin:8px 0}
.inv-scan-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.tb-action.danger{color:var(--txt-red);border-color:rgba(239,68,68,.3)}
.tb-action.danger:hover{background:rgba(239,68,68,.12)}
.fwin-cancel.danger{color:var(--txt-red);border-color:rgba(239,68,68,.35)}
.fwin-cancel.danger:hover{background:rgba(239,68,68,.12)}
.tb-action.sm{padding:4px 9px;font-size:12.5px}
.inv-status{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 8px;border-radius:99px;border:1px solid}
.inv-status.ok{color:var(--txt-green);border-color:rgba(34,197,94,.35);background:rgba(34,197,94,.1)}
.inv-status.sold{color:var(--txt-blue);border-color:rgba(59,130,246,.35);background:rgba(59,130,246,.1)}
.inv-status.off{color:var(--text3);border-color:var(--border2)}
.inv-hist-hd,.inv-sec-hd{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text4);margin:14px 0 6px}
.inv-hist{display:flex;flex-direction:column;gap:2px}
.inv-hist-row{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13px;align-items:baseline}
.inv-hist-row:last-child{border-bottom:0}
.inv-hist-row .inv-hist-when{grid-column:2;font-size:11.5px;color:var(--text4)}
.inv-hist-row.voided .inv-hist-txt{text-decoration:line-through;opacity:.7}
.inv-mtype{font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:5px;border:1px solid var(--border2);white-space:nowrap;color:var(--text2)}
.inv-mtype.sale{color:var(--txt-blue);border-color:rgba(59,130,246,.35)}
.inv-mtype.receive{color:var(--txt-green);border-color:rgba(34,197,94,.35)}
.inv-mtype.transfer{color:var(--txt-purple);border-color:rgba(167,139,250,.35)}
.inv-mtype.adjust{color:var(--txt-yellow);border-color:rgba(245,158,11,.35)}
.inv-mtype.void{color:var(--txt-red);border-color:rgba(239,68,68,.35)}
.inv-tabs{display:flex;gap:3px;background:rgba(var(--overlay-rgb),.04);border-radius:10px;padding:3px;border:1px solid var(--border);margin-bottom:14px;width:max-content;max-width:100%;overflow-x:auto}
.inv-toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.inv-toolbar .tb-srch input{width:100%}
.inv-check{display:flex;align-items:center;gap:6px;font-size:13.25px;color:var(--text2);cursor:pointer;white-space:nowrap}
.inv-check input{accent-color:var(--accent)}
.inv-date{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text3)}
.inv-date input{padding:7px 8px;border-radius:var(--r);background:rgba(var(--overlay-rgb),.07);border:1px solid var(--border2);color:var(--text);font-size:13.5px}
/* 2026-09-26 (revisión móvil, cola de baja prioridad): esto forzaba
   color-scheme:dark SIEMPRE, así que en modo claro el selector nativo de
   fecha salía oscuro sobre una página clara (mal contraste/inconsistente).
   Ahora sigue el mismo modo que el resto de la app. */
html:not([data-theme="light"]) .inv-date input{color-scheme:dark}
html[data-theme="light"] .inv-date input{color-scheme:light}
.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.inv-card{background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border2);border-radius:var(--r2);padding:13px 14px;cursor:pointer;transition:all .18s;display:flex;flex-direction:column;gap:7px;position:relative;overflow:hidden}
.inv-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.inv-card.low::before{background:var(--yellow)}
.inv-card.inactive{opacity:.55}
.inv-card:hover{background:rgba(var(--overlay-rgb),.08);transform:translateY(-2px)}
.inv-card-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.inv-card-name{font-weight:800;font-size:15px;color:var(--text);line-height:1.25}
.inv-card-model{font-family:var(--mono);font-size:12px;color:var(--text3);margin-top:2px;overflow-wrap:anywhere}
.inv-card-desc{font-size:13px;color:var(--text3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.inv-qty{display:flex;flex-direction:column;align-items:flex-end;flex:none;text-align:right}
.inv-qty b{font-size:26px;font-weight:800;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.inv-qty span{font-size:11px;color:var(--text4);margin-top:3px;max-width:120px}
.inv-qty.big b{font-size:34px}
.inv-card-badges{display:flex;gap:5px;flex-wrap:wrap}
.inv-badge{font-size:11px;font-weight:600;padding:2px 8px;border-radius:99px;background:rgba(var(--overlay-rgb),.06);border:1px solid var(--border2);color:var(--text3)}
.inv-badge.low{color:var(--txt-yellow);border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.1)}
.inv-badge.off{color:var(--text4)}
.inv-badge.res{color:var(--txt-purple);border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.1)}
/* 2026-09-24: apartados y conteo fisico */
.inv-res-row{display:flex;align-items:flex-start;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.inv-res-row .inv-res-main{flex:1;min-width:0}
.inv-res-row .inv-res-when{font-size:12px;color:var(--text3);text-align:right;flex:none}
.inv-res-row.expiring .inv-res-when{color:var(--txt-yellow)}
.inv-match{font-size:12px;color:var(--txt-accent);font-family:var(--mono);overflow-wrap:anywhere}
.invc-sec{margin:10px 0}
.invc-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.invc-row .invc-name{flex:1;min-width:0;overflow-wrap:anywhere}
.invc-row input[type=number]{width:80px;padding:6px 7px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.06);color:var(--text);font-size:13.5px;text-align:right}
.invc-sum{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.invc-pill{font-size:12px;font-weight:700;padding:3px 9px;border-radius:99px;border:1px solid var(--border2)}
.invc-pill.ok{color:var(--txt-green);border-color:rgba(34,197,94,.4)}
.invc-pill.bad{color:var(--txt-red);border-color:rgba(239,68,68,.4)}
.invc-pill.warn{color:var(--txt-yellow);border-color:rgba(245,158,11,.4)}
.invc-diff.neg{color:var(--txt-red);font-weight:700}
.invc-diff.pos{color:var(--txt-green);font-weight:700}
.inv-card-split{font-size:12.5px;color:var(--text3)}
.inv-card-split b{color:var(--text2);font-variant-numeric:tabular-nums}
.inv-card-foot{display:flex;gap:14px;font-size:12.5px;color:var(--text3);border-top:1px solid var(--border);padding-top:7px;margin-top:auto}
.inv-card-foot b{color:var(--text)}
.inv-p-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.inv-hold-row,.inv-unit-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13.5px}
.inv-hold-row b{margin-left:auto;font-variant-numeric:tabular-nums}
.inv-unit-row .inv-muted{flex:1;min-width:0}
.inv-serial-link{background:none;border:0;color:var(--txt-accent);cursor:pointer;font-size:13px;padding:2px 0;text-decoration:underline;text-underline-offset:2px}
.inv-lines{display:flex;flex-direction:column;gap:6px;margin:8px 0}
.inv-line{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r);background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border)}
.inv-line-name{font-weight:700;font-size:13.5px;color:var(--text)}
.inv-line-sub{font-size:12px;color:var(--text3);overflow-wrap:anywhere}
.inv-line-qty{font-family:var(--mono);font-weight:700;min-width:28px;text-align:center}
.inv-line-qty-in,.inv-line-price{width:78px;padding:6px 7px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.06);color:var(--text);font-size:13.5px;text-align:right}
.inv-line-qty-in{width:58px}
.inv-x{background:none;border:1px solid var(--border2);color:var(--text3);border-radius:8px;min-width:32px;min-height:32px;cursor:pointer;flex:none}
.inv-x:hover{color:var(--txt-red);border-color:rgba(239,68,68,.35)}
.inv-add-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.inv-add-row select,.inv-add-row input{padding:8px 9px;border-radius:var(--r);border:1px solid var(--border2);background:rgba(var(--overlay-rgb),.05);color:var(--text);font-size:13.5px;min-width:0}
.inv-add-row select option{background:var(--bg2)}
#invop-add-prod{flex:2 1 180px}#invop-add-from{flex:1 1 130px}#invop-add-qty{flex:0 0 64px}
.inv-total{text-align:right;font-size:14.5px;color:var(--text2);margin:4px 0 10px}
.inv-total b{font-size:18px;color:var(--text)}
.inv-count{font-family:var(--mono);color:var(--txt-accent);text-transform:none;letter-spacing:0}
.inv-ph-chip{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:var(--r);border:1px solid rgba(232,101,10,.4);background:rgba(232,101,10,.08);font-size:14px}
.inv-ph-res{display:flex;flex-direction:column;gap:3px;margin-top:5px}
.inv-ph-hit{display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;padding:8px 10px;border-radius:var(--r);border:1px solid var(--border);background:rgba(var(--overlay-rgb),.04);color:var(--text);cursor:pointer;font-size:13.5px}
.inv-ph-hit span{font-size:12px;color:var(--text3)}
.inv-ph-hit:hover{border-color:var(--accent)}
.inv-mv{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:10px 12px;border-bottom:1px solid var(--border);background:rgba(var(--overlay-rgb),.02)}
.inv-mv:first-of-type{border-top-left-radius:var(--r);border-top-right-radius:var(--r)}
.inv-mv.voided .inv-mv-main{text-decoration:line-through;opacity:.6}
.inv-mv-prod{font-weight:700;font-size:14px;color:var(--text)}
.inv-mv-sub{font-size:12.5px;color:var(--text3);overflow-wrap:anywhere}
.inv-mv-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:12px;color:var(--text4);text-align:right}
.inv-mv-side b{font-size:14px;color:var(--text)}
.inv-voided-tag{color:var(--txt-red);font-weight:700;font-family:var(--mono);font-size:10.5px;text-transform:uppercase}
.inv-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-bottom:14px}
.inv-kpi{background:rgba(var(--overlay-rgb),.04);border:1px solid var(--border2);border-radius:var(--r2);padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.inv-kpi-l{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text4)}
.inv-kpi b{font-size:22px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}
.inv-kpi-s{font-size:12px;color:var(--text3)}
.inv-kpi.accent b{color:var(--txt-accent)}
.inv-kpi.good b{color:var(--txt-green)}
.inv-kpi.neg b{color:var(--txt-red)}
.inv-rp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.inv-rp-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13.25px}
.inv-rp-row:last-child{border-bottom:0}
.inv-rp-row.clickable{cursor:pointer}
.inv-rp-row.clickable:hover .inv-rp-name{color:var(--txt-accent)}
.inv-rp-name{flex:1 1 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text2)}
.inv-rp-bar{flex:0 0 70px;height:6px;border-radius:3px;background:rgba(var(--overlay-rgb),.07);overflow:hidden}
.inv-rp-bar i{display:block;height:100%;background:var(--accent)}
.inv-rp-n{color:var(--text3);font-size:12.5px;white-space:nowrap}
.inv-rp-money{font-variant-numeric:tabular-nums;white-space:nowrap}
.inv-rp-margin{font-size:12px;color:var(--txt-green);white-space:nowrap;font-variant-numeric:tabular-nums}
.inv-rp-margin.neg{color:var(--txt-red)}
.inv-det-line{padding:2px 0}
#inv-cam-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:9999;display:none;align-items:center;justify-content:center;padding:16px}
#inv-cam-overlay.open{display:flex}
.inv-cam-box{position:relative;width:min(520px,100%);display:flex;flex-direction:column;gap:12px;align-items:center}
.inv-cam-box video{width:100%;border-radius:var(--r2);background:#000}
.inv-cam-frame{position:absolute;left:12%;right:12%;top:30%;height:22%;border:2px solid var(--accent);border-radius:10px;pointer-events:none}
@media(max-width:640px){
  .inv-scan-box{padding:12px}
  .inv-scan-row input{font-size:16px}
  .inv-grid{grid-template-columns:1fr}
  .inv-toolbar .tb-sel{max-width:none!important;flex:1 1 140px}
  .inv-rp-grid{grid-template-columns:1fr}
  .inv-mv{grid-template-columns:1fr;gap:4px}
  .inv-mv-side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 10px;text-align:left}
  .inv-kpis{grid-template-columns:1fr 1fr}
  .inv-line{flex-wrap:wrap}
  .inv-line > div:first-child{flex:1 1 100%!important}  /* !important: el div lleva flex:1 en línea */
  .inv-line-price,.inv-line-qty-in{flex:1 1 80px}
  .inv-date{flex:1 1 140px}
  .inv-date input{flex:1;min-width:0}
}