/*
 * Portal CIF — hoja de estilos compartida.
 * La usan todas las paginas del portal con sesion (index.php, admin/,
 * clientes/, productos/, etc.). mockup-studio/ tiene su propia hoja de
 * estilos inline y no la carga, pero si carga assets/sidebar.css aparte
 * para tener el mismo menu lateral (ver mas abajo).
 *
 * Tema: variables CSS en :root (oscuro, default) con un override completo
 * bajo :root[data-theme="light"]. El atributo data-theme lo escribe el
 * servidor (ver partials/theme.php, lee la cookie "theme") para que no
 * haya flash del tema incorrecto al cargar, y lo cambia el toggle
 * (assets/theme-toggle.js) al instante en el cliente.
 */

:root{
  --bg:#20232A;
  --panel:#262A33;
  --panel-2:#2C313C;
  --blue:#0064FF;
  --blue-light:#4D94FF;
  --text:#F0F3F7;
  --text-body:#8A98A8;
  --hairline: rgba(240,243,247,.14);
  --green:#3DDC84;
  --red:#FF5A5A;
  --tit:'Sharp Grotesk','Sharp Grotesk Book 20',Archivo,'Helvetica Neue',Arial,sans-serif;
  --body:'Open Sans','Helvetica Neue',Arial,sans-serif;
}

:root[data-theme="light"]{
  --bg:#F3F4F6;
  --panel:#FFFFFF;
  --panel-2:#F0F1F4;
  --blue:#0064FF;
  --blue-light:#0052CC;
  --text:#1B1E24;
  --text-body:#5B6472;
  --hairline: rgba(27,30,36,.12);
  --green:#1E9E5A;
  --red:#D93636;
}

*{box-sizing:border-box;}
html,body{
  min-height:100%;
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--body);
  transition:background .15s ease, color .15s ease;
}

/* Fondo de pixeles de la marca en TODAS las pantallas (pedido de Tomas,
   2026-10-06: "no hay consistencia en el diseño"). Es el mismo SVG del
   hero de www.cif.ar (assets/hero-pixels.svg), en una capa fija detras
   de todo; el <html> conserva el color de fondo y el <body> queda
   transparente para que la capa se vea. Los paneles/tarjetas/tablas
   tienen fondo propio, asi que la lectura no cambia. Solo tema oscuro:
   el SVG trae su propio fondo oscuro de base y se ve sucio sobre claro.
   Reemplaza a body.rh-pixeles / body.vis-pixeles / .hero-stage, que
   eran la misma idea pantalla por pantalla. */
body{background:transparent;}
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:url('/assets/hero-pixels.svg') center / cover no-repeat;
}
:root[data-theme="light"] body::before{display:none;}
a{color:var(--blue-light);}

/* ---------- Login (index.php, sin sesion) ---------- */
.login-wrap{
  min-height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
}
.login-theme-toggle{position:absolute; top:20px; right:20px;}
.login-card{
  width:100%;
  max-width:380px;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:36px 32px 32px;
  text-align:center;
}
.login-card .brand{
  font-family:var(--tit);
  font-weight:900;
  font-size:22px;
  letter-spacing:.3px;
  color:var(--text);
  margin-bottom:2px;
}
.login-card .sub{
  font-family:var(--tit);
  font-weight:600;
  font-size:12.5px;
  color:var(--blue-light);
  letter-spacing:.4px;
  text-transform:uppercase;
  margin-bottom:22px;
}
.login-brand-logo{
  display:block;
  max-width:100%;
  max-height:60px;
  object-fit:contain;
  margin:0 auto 22px;
}
.login-card p{
  color:var(--text-body);
  font-size:13.5px;
  line-height:1.5;
  margin:0 0 26px;
}
.g_id_signin_wrap{
  display:flex;
  justify-content:center;
  margin-bottom:16px;
}
.login-error{
  background:rgba(255,90,90,.12);
  border:1px solid rgba(255,90,90,.4);
  color:#FF9C9C;
  font-size:12.5px;
  border-radius:8px;
  padding:10px 12px;
  margin-bottom:18px;
  text-align:left;
  line-height:1.4;
}
.login-foot{
  margin-top:22px;
  font-size:11.5px;
  color:var(--text-body);
}

/* ---------- Barra superior (paginas con sesion) ---------- */
.userbar{
  max-width:1180px;
  margin:0 auto;
  padding:10px 24px 0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  font-size:12.5px;
  color:var(--text-body);
}
.userbar-back, .userbar-admin{
  color:var(--text-body);
  text-decoration:none;
  font-weight:600;
  margin-right:auto;
}
.userbar-back:hover, .userbar-admin:hover{color:var(--blue-light);}
.userbar-id{display:flex; align-items:center; gap:8px;}
.userbar-id img{width:22px; height:22px; border-radius:50%; display:block;}
.userbar-logout{
  color:var(--blue-light);
  text-decoration:none;
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:5px 12px;
  font-family:var(--body);
  font-weight:600;
  line-height:1.3;
}
.userbar-logout:hover{border-color:var(--blue-light);}
/* Titulo de la herramienta en la esquina de la barra superior (pedido de
   Tomas, 2026-10-12): no ocupa fila propia, el contenido gana ese alto.
   Lo usan Visitas, Muletos, Vehiculos y Ubicacion tecnicos (*_page_start). */
.userbar-titulo{margin:0 auto 0 0; font-family:var(--tit); font-weight:900; font-size:18px; line-height:1.15; letter-spacing:.2px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.userbar-nombre{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.userbar:has(.userbar-titulo) + .wrap{padding-top:6px;}

/* ---------- Interruptor Superadmin|Admin / Usuario (no lo ven los Usuarios) ----------
   partials/vista-toggle.php. Pildora de dos segmentos con el texto adentro
   (mismo formato que .lst-seg); en "Personal" el segmento activo va en
   ambar para que se note que se esta viendo el portal como el equipo. */
.vista-toggle{display:inline-flex; border:1px solid var(--hairline); border-radius:999px; padding:2px; background:var(--panel); text-decoration:none; white-space:nowrap; flex:none;}
.vista-toggle-seg{padding:4px 11px; border-radius:999px; font-size:11.5px; font-weight:700; line-height:1.3; color:var(--text-body); transition:background .2s ease, color .2s ease;}
.vista-toggle-seg.active{background:var(--blue); color:#fff;}
.vista-toggle.is-personal{border-color:rgba(245,166,35,.6);}
.vista-toggle.is-personal .vista-toggle-seg.active{background:#F5A623; color:#20232A;}
.vista-toggle.is-vercomo{align-items:center; gap:8px; padding:2px 2px 2px 10px; border-color:#F5A623; background:rgba(245,166,35,.12); font-size:11.5px; color:var(--text);}
.vista-toggle.is-vercomo .ico{color:#F5A623;}
.vista-toggle.is-vercomo .vista-toggle-seg.active{background:#F5A623; color:#20232A;}
.vista-toggle-quien{max-width:240px; overflow:hidden; text-overflow:ellipsis;}
.vista-toggle:hover{border-color:var(--blue-light);}
.vista-toggle:focus-visible{outline:2px solid var(--blue-light); outline-offset:2px;}

/* ---------- Menu de secciones en pildora (.nav-pildora) ----------
   Pedido de Tomas (2026-10-06): las secciones de cada herramienta van en
   una pildora de segmentos centrada (como el interruptor Admin / Usuario).
     <nav class="nav-pildora"><div class="nav-pildora-in">
       <a class="active">Uno</a><a>Dos</a>
     </div></nav>
   Sirve con <a>, <label> (pestañas por radio, /admin/) o <button>. En
   celular ocupa el ancho y, si no entra, se desliza de costado. */
.nav-pildora{display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 22px;}
.nav-pildora-in{display:inline-flex; max-width:100%; overflow-x:auto; scrollbar-width:none; border:1px solid var(--hairline); border-radius:999px; padding:3px; background:var(--panel);}
.nav-pildora-in::-webkit-scrollbar{display:none;}
.nav-pildora-in > a, .nav-pildora-in > label, .nav-pildora-in > button{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:none; white-space:nowrap;
  border:0; background:transparent; padding:7px 16px; border-radius:999px; cursor:pointer; user-select:none;
  font-family:inherit; font-weight:700; font-size:12.5px; line-height:1.3; color:var(--text-body); text-decoration:none;
  transition:background .15s ease, color .15s ease;}
.nav-pildora-in > a:hover, .nav-pildora-in > label:hover, .nav-pildora-in > button:hover{color:var(--text);}
.nav-pildora-in > .active, .nav-pildora-in > .active:hover{background:var(--blue); color:#fff;}
.nav-pildora-in > .active .ico{color:inherit;}
.nav-pildora-in > :focus-visible{outline:2px solid var(--blue-light); outline-offset:-2px;}

/* ---------- Toggle claro/oscuro ---------- */
.theme-toggle{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  line-height:0;
}
.theme-toggle-track{
  position:relative;
  width:46px;
  height:24px;
  border-radius:999px;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5px;
  transition:background .2s ease, border-color .2s ease;
}
.theme-toggle-icon{
  font-size:11px;
  line-height:1;
  position:relative;
  z-index:1;
  opacity:.75;
  display:flex;
}
.theme-toggle-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--blue);
  transition:transform .2s ease, background .2s ease;
  transform:translateX(0);
}
:root[data-theme="light"] .theme-toggle-thumb{
  transform:translateX(22px);
  background:var(--blue-light);
}

/* ---------- Layout general ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:10px 24px 48px;}
/* Titulo (.brand) y bajada (.sub) de cada app centrados -- pedido de
   Tomas, mismo criterio de "centrar los contenedores" ya aplicado al
   resto de la estructura del portal. Es compartido por TODAS las apps
   (18 paginas usan .hero), asi que un solo cambio aca actualiza el
   titulo de todas por igual. */
/* Encabezado compacto (pedido de Tomas, 2026-10-06: "come mucha
   pantalla"): userbar + titulo + bajada + pestañas ocupaban ~1/3 de la
   altura visible. Misma estetica (titulo centrado, Archivo 900, bajada
   en gris), pero con tamaños y espacios ajustados para devolver ~70px
   de pantalla util a cada herramienta. */
.hero{margin:4px 0 12px; text-align:center;}
.hero .brand{font-family:var(--tit); font-weight:900; font-size:22px; line-height:1.15; letter-spacing:.2px; margin-bottom:2px;}
.hero .sub{color:var(--text-body); font-size:12.5px; line-height:1.4; max-width:760px; margin:0 auto;}

/* ---------- Dashboard (index.php, con sesion) ---------- */
.group-section{margin-bottom:34px;}
.group-section:last-child{margin-bottom:0;}
.group-title{
  font-family:var(--tit);
  font-weight:800;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--text-body);
  margin-bottom:14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--hairline);
}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:16px;}

/* Tarjeta de herramienta: entra con una animacion breve y escalonada
   (--i la pone index.php por tarjeta, orden de aparicion dentro de su
   grupo) y al pasar el mouse se levanta un poco con sombra, en vez del
   cambio de fondo solo -- mismo timing (.3s ease-in-out) que usa
   www.cif.ar en sus propias transiciones, para que la navegacion del
   portal se sienta con el mismo "peso". Respeta prefers-reduced-motion. */
@keyframes card-in{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
.card{
  display:block;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:24px;
  text-decoration:none;
  color:var(--text);
  transition:background .3s ease-in-out, border-color .3s ease-in-out, transform .3s ease-in-out, box-shadow .3s ease-in-out;
  animation:card-in .4s ease-out both;
  animation-delay:calc(var(--i, 0) * 60ms);
}
.card:hover{
  background:var(--panel-2);
  border-color:var(--blue-light);
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.28);
}
:root[data-theme="light"] .card:hover{box-shadow:0 14px 26px rgba(27,30,36,.14);}
@media (prefers-reduced-motion: reduce){
  .card{animation:none;}
  .card:hover{transform:none;}
}

/* Insignia del icono: cuadrado con esquinas redondeadas y fondo
   tintado de azul, mismo lenguaje que los iconos del menu desplegable
   de www.cif.ar (tarjetitas con icono dentro, no el emoji suelto).
   Crece un poco al pasar el mouse sobre la tarjeta. */
.card-icon-badge{
  width:52px; height:52px;
  border-radius:12px;
  background:rgba(0,100,255,.12);
  border:1px solid rgba(0,100,255,.18);
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  margin-bottom:16px;
  transition:transform .3s ease-in-out, background .3s ease-in-out;
}
.card:hover .card-icon-badge{transform:scale(1.08); background:rgba(0,100,255,.2);}
@media (prefers-reduced-motion: reduce){
  .card:hover .card-icon-badge{transform:none;}
}

.card .name{font-family:var(--tit); font-weight:800; font-size:16px; margin-bottom:6px;}
.card .desc{color:var(--text-body); font-size:12.5px; line-height:1.5;}
.empty{color:var(--text-body); font-size:13px;}

/* Contenedor del titulo del dashboard. El fondo de pixeles ya no es
   propio de esta pantalla: ahora es global (ver body::before arriba). */
.hero-stage{position:relative; padding:6px 0 2px; margin-bottom:14px;}
.hero-stage .hero{margin:0;}

/* Boton grafico de "volver": reemplaza los links sueltos "&larr; Volver"
   (sin estilo, perdidos en medio del texto) por un boton real, en la
   misma linea visual que el resto de los .btn del portal. La flecha se
   corre un poco a la izquierda al pasar el mouse, como gesto de
   "retroceder". */
.btn-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
  font-family:var(--body);
  font-weight:700;
  font-size:12.5px;
  padding:8px 16px 8px 14px;
  border-radius:999px;
  border:1px solid var(--hairline);
  color:var(--text-body);
  transition:background .3s ease-in-out, border-color .3s ease-in-out, color .3s ease-in-out;
}
.btn-back:hover{background:var(--panel-2); border-color:var(--blue-light); color:var(--text);}
.btn-back-arrow{display:inline-block; transition:transform .3s ease-in-out;}
.btn-back:hover .btn-back-arrow{transform:translateX(-3px);}
@media (prefers-reduced-motion: reduce){
  .btn-back-arrow, .btn-back:hover .btn-back-arrow{transition:none; transform:none;}
}

/* ---------- Tabs (clientes) ---------- */

/* ---------- Paneles, formularios, tablas (compartido) ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:14px;
  padding:22px 24px;
  margin-bottom:22px;
}
.panel h2{font-family:var(--tit); font-size:16px; margin:0 0 4px;}
.panel .hint{color:var(--text-body); font-size:12px; margin:0 0 18px;}

/* Modulos desplegables dentro de una pestaña de /admin/ (admin/index.php
   y admin/partials/provider-*.php): cada <details class="panel
   admin-module"> es un modulo con su propio titulo clickeable, para
   poder ir directo al que hace falta en vez de scrollear por todos.
   Agrupados por name="admin-module-<pestaña>" (atributo nativo de
   <details>, sin JS) para que abrir uno cierre el que ya estaba
   abierto en esa misma pestaña. */
.panel.admin-module{padding:0;}
.panel.admin-module > summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:18px 24px;
}
.panel.admin-module > summary::-webkit-details-marker{display:none;}
.panel.admin-module > summary h2{margin:0;}
.panel.admin-module > summary::after{
  content:"▸";
  color:var(--text-body);
  font-size:13px;
  flex:none;
  transition:transform .15s ease;
}
.panel.admin-module[open] > summary::after{transform:rotate(90deg);}
.panel.admin-module[open] > summary{border-bottom:1px solid var(--hairline);}
.panel.admin-module > .admin-module-body{padding:18px 24px 22px;}

/* Administración → Integraciones: un contenedor por grupo (Proveedores,
   ERP, Monitoreo) con su título centrado y sus desplegables adentro, para
   que el grupo no se confunda con los desplegables. */
.int-grupo{
  background:rgba(0,100,255,.06);
  border:1px solid rgba(0,100,255,.22);
  border-radius:18px;
  padding:14px 14px 2px;
  margin-bottom:22px;
}
.int-grupo-tit{
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--tit); font-size:13px; font-weight:800;
  text-transform:uppercase; letter-spacing:.8px;
  color:var(--blue-light);
  margin:2px 0 14px;
}
.int-grupo .panel.admin-module{margin-bottom:12px;}

form.filter-form{display:flex; gap:12px; align-items:end; flex-wrap:wrap;}
form.filter-form .field{display:flex; flex-direction:column; gap:6px;}
form.filter-form label{font-size:11px; color:var(--text-body); text-transform:uppercase; letter-spacing:.3px;}

select, input[type=text], input[type=email], input[type=number], input[type=search]{
  background:var(--panel-2);
  border:1px solid var(--hairline);
  color:var(--text);
  border-radius:8px;
  padding:8px 10px;
  font-size:13px;
  font-family:var(--body);
}

/* Combobox propio de "Producto o rubro" en AIR Productos -- reemplaza
   el <datalist> nativo del navegador, que no se puede agrandar ni
   tematizar por CSS (limitacion del navegador): quedaba chico, con
   pocas filas visibles, y en fondo claro sin importar el tema oscuro
   del portal. */
.autocomplete{position:relative;}
.autocomplete-menu{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  right:0;
  max-height:340px;
  overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.4);
  z-index:20;
  padding:6px;
}
.autocomplete-item{
  padding:9px 10px;
  border-radius:6px;
  font-size:13px;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.autocomplete-item:hover,
.autocomplete-item.active{background:var(--panel-2);}
.autocomplete-empty{padding:10px; font-size:12.5px; color:var(--text-body);}

button, .btn{
  font-family:var(--body);
  font-weight:700;
  font-size:12.5px;
  border-radius:999px;
  padding:8px 16px;
  border:1px solid var(--hairline);
  background:transparent;
  color:var(--text);
  cursor:pointer;
}
button.primary{background:var(--blue); border-color:var(--blue); color:#fff;}
button.primary:hover{background:var(--blue-light); border-color:var(--blue-light);}
button.danger{color:var(--red); border-color:rgba(255,90,90,.4);}
button.danger:hover{background:rgba(255,90,90,.12);}

table{width:100%; border-collapse:collapse;}
th{
  text-align:left;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--text-body);
  padding:0 10px 10px;
  border-bottom:1px solid var(--hairline);
}
td{padding:12px 10px; border-bottom:1px solid var(--hairline); font-size:13px; vertical-align:top;}
tr:last-child td{border-bottom:none;}

.badge{display:inline-block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; padding:2px 8px; border-radius:999px;}
.badge.ok{background:rgba(61,220,132,.18); color:var(--green);}
.badge.no{background:rgba(255,90,90,.18); color:var(--red);}
.badge.admin{background:rgba(77,148,255,.18); color:var(--blue-light); margin-left:6px;}

.error-box{
  background:rgba(255,90,90,.12);
  border:1px solid rgba(255,90,90,.4);
  color:#FF9C9C;
  font-size:13px;
  border-radius:10px;
  padding:14px 16px;
  margin-bottom:20px;
  line-height:1.5;
}
:root[data-theme="light"] .error-box{color:#B23A3A;}

.profile-head{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:12px; margin-bottom:18px;}
.profile-head .name{font-family:var(--tit); font-weight:800; font-size:20px;}
.profile-head .meta{color:var(--text-body); font-size:12.5px; margin-top:4px;}
.stat{color:var(--text-body); font-size:12.5px; text-align:right;}
.stat b{color:var(--text); font-size:16px; display:block; margin-bottom:2px;}

/* ---------- Admin ---------- */
.flash{border-radius:10px; padding:10px 14px; font-size:13px; margin-bottom:20px;}
.flash.ok{background:rgba(61,220,132,.12); border:1px solid rgba(61,220,132,.4); color:var(--green);}
.flash.error{background:rgba(255,90,90,.12); border:1px solid rgba(255,90,90,.4); color:var(--red);}
.email-cell .email{font-weight:600;}
.email-cell .meta{color:var(--text-body); font-size:11px; margin-top:2px;}
.tools-list{display:flex; flex-direction:column; gap:6px;}
.tools-list label{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-body);}
.tools-list input[type=checkbox]{accent-color:var(--blue);}
.tool-group-tag{color:var(--text-body); opacity:.65; font-size:11px;}
.row-actions{display:flex; gap:8px; align-items:flex-start;}

/* ---------- Pestañas de /admin/ (admin/index.php) ----------
 * Switcheo de seccion sin JS ni scroll: un <input type="radio"> oculto
 * por pestaña (mismo "truco" ya usado en este portal para el menu
 * mobile, ver .sidebar-toggle-checkbox en assets/sidebar.css) + un
 * <label> por boton de navegacion (misma fila, mismo estilo .btn de
 * siempre) + selector de hermano general (~) que muestra el
 * .admin-tab-panel que corresponde cuando su radio esta marcado.
 * Clickear un boton de pestaña no hace scroll ni recarga la pagina,
 * solo cambia que seccion se ve -- el resto queda oculto, no
 * desmontado (los <form> de las otras pestañas siguen funcionando
 * igual si se llegara a necesitar). Se vuelve a "Apariencia" (primera
 * pestaña) en cada carga de la pagina, no se guarda cual quedo
 * abierta -- no hizo falta mas que eso. */
/* Iconos SVG de partials/iconos.php (reemplazan a los emojis): azul del
   portal en tema claro y oscuro; sobre fondos azules o de color toman el
   color del texto para no perderse. */
.ico{color:var(--blue-light); flex:none; vertical-align:-.15em; overflow:visible;}
button.primary .ico, .btn.primary .ico, a.btn.primary .ico, .sidebar-link.active .ico,
.lst-seg-btn.active .ico, .rh-ev-vac .ico, .rh-ev-vacp .ico, .rh-ev-aus .ico, .md-ev-vac .ico, .md-ev-vacp .ico,
.md-ev-aus .ico, .md-day.sel .ico{color:inherit;}
#admin-tab-apariencia:checked ~ .admin-tab-nav label[for="admin-tab-apariencia"] .ico,
#admin-tab-dashboards:checked ~ .admin-tab-nav label[for="admin-tab-dashboards"] .ico,
#admin-tab-integraciones:checked ~ .admin-tab-nav label[for="admin-tab-integraciones"] .ico{color:inherit;}
.admin-ico-sel{display:inline-flex; align-items:center; gap:8px; font-size:18px;}
.admin-ico-sel select{font-size:13px;}

.admin-tab-panel{display:none;}

/* Gestion RRHH → Personal → Cuentas (rrhh/cuentas.js): persona, emails de acceso con
   punto verde si ya entro con ese email, accesos en chips y "Navegar como". */
.cu-panel .lst-filtros{justify-content:center;}
.cu-persona{display:flex; align-items:center; gap:10px; min-width:0;}
.cu-avatar{flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:rgba(0,100,255,.16); color:var(--blue-light); font-family:var(--tit); font-weight:800; font-size:12px;}
.cu-persona-txt{min-width:0;}
.cu-mail{display:flex; align-items:center; gap:6px; font-size:12.5px; min-width:0; padding:1px 0;}
.cu-mail-tipo{flex:none; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--text-body); min-width:52px;}
.cu-mail-m{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cu-punto{flex:none; width:8px; height:8px; border-radius:50%; border:1.5px solid var(--text-body); box-sizing:border-box;}
.cu-punto.is-on{background:var(--green); border-color:var(--green);}
.cu-accesos{max-width:360px;}
.cu-acc{text-align:right; white-space:nowrap;}
.cu-ver{display:inline-flex; align-items:center; gap:6px; text-decoration:none;}
.cu-ver .ico{color:var(--blue-light);}
@media (max-width:640px){
  .cu-accesos{max-width:none; flex-wrap:wrap;}
  .cu-acc{display:block !important; text-align:center; padding-top:8px !important;}
  .cu-ver{justify-content:center; width:100%; min-height:42px; box-sizing:border-box;}
  .lst-table td[data-label="Emails"]{flex-wrap:wrap;}
}
#admin-tab-apariencia:checked ~ .admin-tabs-content #panel-apariencia,
#admin-tab-dashboards:checked ~ .admin-tabs-content #panel-dashboards,
#admin-tab-integraciones:checked ~ .admin-tabs-content #panel-integraciones{
  display:block;
}
#admin-tab-apariencia:checked ~ .admin-tab-nav label[for="admin-tab-apariencia"],
#admin-tab-dashboards:checked ~ .admin-tab-nav label[for="admin-tab-dashboards"],
#admin-tab-integraciones:checked ~ .admin-tab-nav label[for="admin-tab-integraciones"]{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}
.add-form{display:grid; grid-template-columns:1fr 1fr auto; gap:12px 16px; align-items:end;}
.add-form .field{display:flex; flex-direction:column; gap:6px;}
.add-form label{font-size:11px; color:var(--text-body); text-transform:uppercase; letter-spacing:.3px;}
.add-form .tools-list{grid-column:1 / -1;}
.add-form-dashboard{grid-template-columns:1fr 1fr auto auto;}

@media (max-width:640px){
  .add-form{grid-template-columns:1fr;}
  table, thead, tbody, th, td, tr{display:block;}
  th{display:none;}
  td{border-bottom:none; padding:4px 0;}
  tr{border-bottom:1px solid var(--hairline); padding:14px 0;}
}

/* AIR Productos: ficha rapida (modal) y toggle de columna de costo */
.modal-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:20px; z-index:1000;}
.modal-backdrop[hidden]{display:none;}
.modal-box{background:var(--panel); border:1px solid var(--hairline); border-radius:14px; padding:24px 26px; max-width:560px; width:100%; max-height:86vh; overflow:auto; position:relative;}
.modal-close{position:absolute; top:12px; right:12px; background:transparent; border:none; color:var(--text-body); font-size:22px; line-height:1; cursor:pointer; padding:4px 8px; border-radius:8px;}
.modal-close:hover{color:var(--text); background:var(--panel-2);}
#resultsTable.hide-costo .col-costo{display:none;}

@media (max-width:640px){
  #resultsTable td[data-label]::before{content:attr(data-label); display:block; font-size:10px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-body); margin-bottom:2px;}
}

/* AIR Productos: en mobile, la fila deja de apilar las 7 columnas una
   debajo de otra (eso hacia que un solo producto casi llenara la
   pantalla) y pasa a un renglon compacto por producto: ID+Producto
   arriba (ocupando todo el ancho), y despues circulos de stock +
   precios en linea (etiqueta al lado del valor, no arriba), con el
   precio final destacado abajo. Asi entran varios productos por
   pantalla en vez de 1-2, y se lee de corrido como en desktop en vez
   de columna por columna.
   OJO: antes esto era una grilla (grid) con los circulos centrados
   por text-align -- eso no funciona porque .stock-circle es un
   elemento en bloque (display:flex), asi que quedaba pegado a la
   izquierda mientras su etiqueta se veia centrada arriba (se
   notaba como un desalineo raro). Ahora cada campo es su propio
   renglon flex con la etiqueta al lado (no arriba) del valor, así no
   depende de centrar nada. */
@media (max-width:640px){
  /* Cada producto como tarjeta separada (fondo + borde propio) en vez
     de solo una linea divisoria -- antes solo se notaba el limite
     entre productos al tocarlos (hover), costaba distinguir uno de
     otro de un vistazo. */
  #resultsTable tbody tr{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    column-gap:18px;
    row-gap:8px;
    padding:14px 16px;
    background:var(--panel);
    border:1px solid var(--hairline);
    border-radius:12px;
    margin-bottom:10px;
  }
  #resultsTable tbody tr:last-child{margin-bottom:0;}
  #resultsTable td{padding:0; border-bottom:none;}
  #resultsTable td[data-label]::before{margin-bottom:0;}

  #resultsTable td[data-label="ID"]{
    flex-basis:100%;
    order:1;
    font-size:11px;
    color:var(--text-body);
  }
  #resultsTable td[data-label="ID"]::before{display:none;}
  #resultsTable td[data-label="Producto"]{
    flex-basis:100%;
    order:2;
    font-weight:700;
    font-size:13.5px;
    line-height:1.3;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
  }
  #resultsTable td[data-label="Producto"]::before{display:none;}
  #resultsTable td[data-label="Producto"] .prod-desc{flex:1 1 auto; min-width:0;}

  #resultsTable td[data-label="Rosario"],
  #resultsTable td[data-label="Lugano"],
  #resultsTable td[data-label="AIR Gral."]{
    order:3;
    display:flex;
    align-items:center;
    gap:6px;
  }
  #resultsTable td[data-label="Rosario"]::before,
  #resultsTable td[data-label="Lugano"]::before,
  #resultsTable td[data-label="AIR Gral."]::before{
    content:attr(data-label);
    display:inline;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:var(--text-body);
  }

  #resultsTable td[data-label="Precio neto AIR"],
  #resultsTable td[data-label="Precio neto venta"]{
    order:4;
    display:flex;
    align-items:baseline;
    gap:5px;
    font-size:12.5px;
  }
  #resultsTable td[data-label="Precio neto AIR"]::before,
  #resultsTable td[data-label="Precio neto venta"]::before{
    content:attr(data-label);
    display:inline;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:var(--text-body);
  }

  #resultsTable td[data-label="Precio final venta"]{
    flex-basis:100%;
    order:5;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    border-top:1px solid var(--hairline);
    margin-top:2px;
    padding-top:8px;
  }
  #resultsTable td[data-label="Precio final venta"]::before{
    content:attr(data-label);
    display:inline;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:var(--text-body);
    margin-right:6px;
  }

}

/* Circulo de stock chico para usar en el listado general (misma
   variante visual que el de la ficha rapida, pero mas compacto para
   no ocupar tanto ancho en la tabla). */
.stock-circle.sm{width:26px; height:26px; font-size:11.5px;}

/* AIR Productos: en mobile la ficha rapida (modal) tambien tenia
   mucho padding entre tarjetas/circulos/chips -- se ajusta solo ahi,
   el desktop queda igual. */
@media (max-width:640px){
  .modal-box{padding:20px 16px;}
  .ficha-card{padding:12px 14px; margin-bottom:10px;}
  .ficha-card:last-of-type{margin-bottom:12px;}
  .ficha-chips{gap:8px;}
  .ficha-chip{padding:5px 10px; min-width:64px;}
  .stock-row{gap:10px;}
  .stock-chip{gap:4px;}
  .stock-row .stock-circle{width:30px; height:30px; font-size:12px;}
}

/* AIR Productos: status-strip compacto (Estado como <details>) */
.status-strip{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:8px 16px;
  margin-bottom:18px;
  font-size:12.5px;
  color:var(--text-body);
}
.status-strip summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:6px;}
.status-strip summary::-webkit-details-marker{display:none;}
.status-strip summary b{color:var(--text);}
/* Version fija (sin desplegar) para quien no es admin: solo sync y cantidad */
.status-strip-line{display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.status-strip-line b{color:var(--text);}
.status-strip[open]{border-radius:14px;}
.status-strip .status-details{margin-top:14px; padding-top:14px; border-top:1px solid var(--hairline);}
.status-dot{width:8px; height:8px; border-radius:50%; flex:none; background:var(--text-body);}
.status-dot.ok{background:var(--green);}
.status-dot.no{background:var(--red);}

/* Barra de filtro sin el panel pesado alrededor */
.filter-bar{margin-bottom:18px;}

/* Toggle tipo switch (para "mostrar precio neto AIR") */
.switch{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; color:var(--text-body); cursor:pointer; user-select:none; margin-bottom:14px;}
.switch input{position:absolute; opacity:0; width:1px; height:1px;}
.switch-track{position:relative; width:38px; height:22px; border-radius:999px; background:var(--panel-2); border:1px solid var(--hairline); transition:background .15s ease, border-color .15s ease; flex:none;}
.switch-thumb{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--text-body); transition:transform .15s ease, background .15s ease;}
.switch input:checked + .switch-track{background:var(--blue); border-color:var(--blue);}
.switch input:checked + .switch-track .switch-thumb{transform:translateX(16px); background:#fff;}
.switch input:focus-visible + .switch-track{outline:2px solid var(--blue-light); outline-offset:2px;}

/* Fila de resultados clickeable (abre la ficha rapida) */
#resultsTable tbody tr.row-clickable{cursor:pointer;}
#resultsTable tbody tr.row-clickable:hover{background:var(--panel-2);}

/* Encabezado fijo de la tabla de resultados de AIR Productos, para que
   los titulos de columna se vean siempre al scrollear la lista. El th
   base no tiene padding arriba (ver regla "th" mas arriba), asi que
   pegado al borde superior del navegador quedaba sin aire -- se le
   suma padding-top solo aca, en el sticky, para que se lea comodo. */
#resultsTable thead th{
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
  padding-top: 14px;
}

/* Encabezados ordenables de la tabla de resultados (ID, Producto, Precio final venta) */
#resultsTable th a.th-sort{color:inherit; text-decoration:none; white-space:nowrap;}
#resultsTable th a.th-sort:hover{color:var(--text);}
#resultsTable th a.th-sort.active{color:var(--blue-light);}

/* AIR Productos: contenedores de la ficha rapida (modal) -- cada
   bloque de info (identificacion, stock, precios, sync) en su propia
   tarjeta prolija, en vez de una sola linea de texto separada por
   puntos que costaba leer. */
.ficha-card{
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:12px;
  text-align:center;
}
.ficha-card:last-of-type{margin-bottom:14px;}
.ficha-card-title{
  font-family:var(--tit);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--text-body);
  margin-bottom:10px;
}

/* Chips SKU / EAN / Garantia -- los datos que se necesitan de un
   vistazo van grandes y separados; Rubro/UPC/Grupo/Estado (secundarios,
   Grupo y Estado casi nunca importan) quedan como una linea chica
   debajo, dentro de la misma tarjeta. */
.ficha-chips{display:flex; gap:10px; flex-wrap:wrap; justify-content:center;}
.ficha-chip{
  background:var(--panel);
  border:1px solid var(--hairline);
  border-radius:8px;
  padding:6px 14px;
  min-width:76px;
  text-align:center;
}
.ficha-chip-label{font-size:9.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--text-body);}
.ficha-chip-value{font-size:13.5px; font-weight:800; color:var(--text); margin-top:2px;}
.ficha-chip.is-alerta .ficha-chip-value{color:#F5A623;}
.ficha-chip.is-mal .ficha-chip-value{color:var(--red);}
:root[data-theme="light"] .ficha-chip.is-alerta .ficha-chip-value{color:#A86A00;}

/* Stock por sucursal como circulos de color (mismo lenguaje visual que
   los badges ok/no del listado general), en vez de una tabla de 5
   filas -- se lee de un vistazo y ocupa mucho menos lugar. */
.stock-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
.stock-chip{display:flex; flex-direction:column; align-items:center; gap:6px;}
.stock-chip-label{font-size:10px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-body);}
.stock-circle{
  width:34px; height:34px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800;
}
.stock-circle.ok{background:var(--green); color:#0B1220;}
.stock-circle.no{background:var(--panel); border:1px solid var(--hairline); color:var(--text-body);}
:root[data-theme="light"] .stock-circle.ok{color:#fff;}

/* Precios: un renglon por nivel, el precio final destacado arriba de
   una linea separadora. */
.price-row{display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13px; padding:4px 0; color:var(--text-body);}
.price-row b{color:var(--text); font-size:13.5px; font-weight:700;}
.price-row.highlight{border-top:1px solid var(--hairline); margin-top:4px; padding-top:10px; color:var(--text);}
.price-row.highlight b{font-size:16px;}

/* Botones chicos (solo icono) para copiar un dato puntual al
   portapapeles -- sueltos al lado de cada dato (descripcion, precio
   neto venta, precio final venta) en vez de un grupo aparte, para no
   romper el diseno de la fila. Mismo criterio en el listado y en la
   ficha rapida. */
.copy-btn{
  display:inline-flex; align-items:center; justify-content:center;
  align-self:center;
  width:22px; height:22px;
  flex:none;
  background:transparent;
  border:1px solid var(--hairline);
  border-radius:7px;
  padding:0;
  margin-left:6px;
  vertical-align:middle;
  color:var(--text-body);
  cursor:pointer;
}
.copy-btn:hover{background:var(--panel-2); color:var(--text);}
.copy-btn.copied{background:rgba(61,220,132,.18); border-color:var(--green); color:var(--green);}
.copy-inline-group{display:inline-flex; align-items:center; gap:2px;}
/* ---------- Logo / favicon (admin, ver branding-store.php) ---------- */
.branding-preview{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:10px;
  padding:10px 14px;
  margin-bottom:8px;
}
.branding-preview img{max-height:40px; max-width:180px; display:block;}

/* AIR Productos: foto del producto (cuando AIR tiene una cargada, ver
   air_api_get_meta_full() -- no todos los articulos la tienen) con un
   boton de descarga en la esquina superior derecha, pensado para
   bajarla y subirla despues al ERP. Fondo semi-opaco fijo (no var de
   tema) para que se lea igual sobre cualquier foto, clara u oscura. */
.product-photo{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--panel-2);
  border:1px solid var(--hairline);
  border-radius:12px;
  padding:12px;
  margin-bottom:14px;
}
.product-photo img{
  max-width:100%;
  max-height:260px;
  object-fit:contain;
  border-radius:6px;
}
.photo-download-btn{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(11,18,32,.65);
  border:1px solid rgba(255,255,255,.3);
  border-radius:8px;
  color:#fff;
  text-decoration:none;
}
.photo-download-btn:hover{background:rgba(11,18,32,.85);}

/* ELIT Productos: mismas reglas mobile que AIR Productos para sus
   columnas propias (stock Dep. cliente / CD / Total y precio neto ELIT)
   -- ver el bloque de AIR mas arriba para el motivo del layout. */
@media (max-width:640px){
  #resultsTable td[data-label="Dep. cliente"],
  #resultsTable td[data-label="CD"],
  #resultsTable td[data-label="Total"],
  #resultsTable td[data-label="Stock"]{
    order:3;
    display:flex;
    align-items:center;
    gap:6px;
  }
  #resultsTable td[data-label="Dep. cliente"]::before,
  #resultsTable td[data-label="CD"]::before,
  #resultsTable td[data-label="Total"]::before,
  #resultsTable td[data-label="Stock"]::before,
  #resultsTable td[data-label="Precio neto ELIT"]::before{
    content:attr(data-label);
    display:inline;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.3px;
    color:var(--text-body);
  }
  #resultsTable td[data-label="Precio neto ELIT"]{
    order:4;
    display:flex;
    align-items:baseline;
    gap:5px;
    font-size:12.5px;
  }
  #resultsTable.hide-costo td.col-costo{display:none;}
}

/* ELIT Productos: paginador del listado (solo debajo de la tabla) */
.elit-pager{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin:14px 0 6px;}
.elit-pager-links{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

/* ELIT Productos: panel de categorias con la forma de "Gestion de
   precios" de ELIT (categoria en negrita, subcategorias con sangria,
   separador grueso entre grupos, todo a la vista). Columna izquierda
   fija en desktop; en celular se pliega arriba del listado. */
.elit-layout{display:grid; grid-template-columns:280px minmax(0,1fr); gap:22px; align-items:start;}
.elit-main{min-width:0;}
.elit-cats{position:sticky; top:12px;}
.elit-cats-summary{display:none;}
.elit-cats-card{
  background:var(--panel); border:1px solid var(--hairline); border-radius:14px;
  padding:6px 12px; max-height:calc(100vh - 24px); overflow-y:auto;
}
.elit-cat-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 10px; border-bottom:1px solid var(--hairline); border-radius:6px;
  color:var(--text); text-decoration:none; font-size:13.5px; line-height:1.3;
  border-top:2px solid transparent; border-left:2px solid transparent; border-right:2px solid transparent;
}
.elit-cat-row:hover{background:var(--panel-2);}
.elit-cat-n{color:var(--text-body); font-size:11.5px; font-weight:400; flex:none;}
.elit-cat-all{font-weight:800; font-size:14px;}
.elit-cat-group{border-top:4px solid var(--hairline);}
.elit-cat-group:first-of-type{border-top:none;}
.elit-cat-cat{font-weight:800; font-size:14px;}
.elit-cat-sub{padding-left:22px; font-weight:400;}
.elit-cat-group .elit-cat-row:last-child{border-bottom:none;}
.elit-cat-row.active{border:2px solid var(--blue-light); color:var(--text);}
@media (max-width:900px){
  .elit-layout{grid-template-columns:1fr; gap:12px;}
  .elit-cats{position:static;}
  .elit-cats-summary{
    display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
    background:var(--panel); border:1px solid var(--hairline); border-radius:12px;
    padding:11px 14px; font-size:13px; color:var(--text);
  }
  .elit-cats-summary::-webkit-details-marker{display:none;}
  .elit-cats-summary::after{content:'▾'; margin-left:auto; color:var(--text-body);}
  .elit-cats[open] .elit-cats-summary::after{content:'▴';}
  .elit-cats[open] .elit-cats-card{margin-top:8px; max-height:60vh;}
}

/* ELIT Productos: modal "Gestion de margenes" (estilo Gestion de precios de ELIT) */
.margenes-box{max-width:620px; display:flex; flex-direction:column;}
.margenes-box form{display:flex; flex-direction:column; min-height:0;}
.margenes-buscar{width:100%; margin:12px 0 8px;}
.margenes-lista{overflow:auto; max-height:52vh; border:1px solid var(--hairline); border-radius:10px;}
.margen-row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 14px; border-bottom:1px solid var(--hairline);}
.margen-row input{width:110px; text-align:right;}
.margen-general{border:1px solid var(--hairline); border-radius:10px; background:var(--panel-2);}
.margen-cat{font-weight:700; background:var(--panel-2); position:sticky; top:0; z-index:1;}
.margen-sub{padding-left:30px; font-size:13.5px;}
.margen-grupo:last-child .margen-row:last-child{border-bottom:none;}
.margenes-footer{display:flex; justify-content:flex-end; gap:10px; margin-top:14px;}

/* ELIT Productos: ajuste de lectura (pedido de Tomas) -- mas ancho
   util (menos margen a los costados), columna de categorias mas
   angosta y celdas mas compactas, para que el nombre del producto no
   se parta en 3 renglones ni el boton de copiar quede suelto abajo. */
.wrap.wrap-elit{max-width:1600px; padding:10px 16px 48px;}
.wrap-elit .elit-layout{grid-template-columns:230px minmax(0,1fr); gap:16px;}
.wrap-elit .elit-cats-card{padding:4px 8px; border-radius:12px;}
.wrap-elit .elit-cat-row{padding:7px 8px; font-size:12.5px;}
.wrap-elit .elit-cat-cat,
.wrap-elit .elit-cat-all{font-size:13px;}
.wrap-elit .elit-cat-sub{padding-left:18px;}
.wrap-elit .elit-cat-group{border-top-width:3px;}
.wrap-elit .filter-bar{margin-bottom:6px;}
@media (min-width:641px){
  .wrap-elit #resultsTable th,
  .wrap-elit #resultsTable td{padding:9px 8px; vertical-align:middle;}
  .wrap-elit #resultsTable td[data-label="ID"]{color:var(--text-body); font-size:12px; white-space:nowrap;}
  .wrap-elit #resultsTable td[data-label="Producto"]{min-width:240px;}
  .wrap-elit #resultsTable td[data-label="Producto"] .prod-cell{display:flex; align-items:center; gap:6px;}
  .wrap-elit #resultsTable td[data-label="Producto"] .prod-desc{flex:1 1 auto; min-width:0; line-height:1.35;}
  .wrap-elit #resultsTable td[data-label="Producto"] .copy-btn{flex:none;}
  /* CIF Productos (pedido de Tomas, 2026-10-19): el boton de copiar va
     pegado al final de la descripcion, no contra el borde de la columna. */
  .wrap-elit #resultsTable.ct-tabla td[data-label="Producto"] .prod-desc{flex:0 1 auto;}
  .wrap-elit #resultsTable td[data-label="Dep. cliente"],
  .wrap-elit #resultsTable td[data-label="CD"],
  .wrap-elit #resultsTable td[data-label="Total"],
  .wrap-elit #resultsTable td[data-label="Stock"]{text-align:center; width:1%;}
  .wrap-elit #resultsTable td[data-label="Dep. cliente"] .stock-circle,
  .wrap-elit #resultsTable td[data-label="CD"] .stock-circle,
  .wrap-elit #resultsTable td[data-label="Total"] .stock-circle,
  .wrap-elit #resultsTable td[data-label="Stock"] .stock-circle{margin:0 auto;}
  .wrap-elit #resultsTable th{white-space:nowrap; font-size:10.5px;}
  .wrap-elit #resultsTable td[data-label^="Precio"]{white-space:nowrap; width:1%;}
}
/* Por debajo de 1200px la tabla no entra al lado de la columna de
   categorias: el panel pasa a plegarse arriba del listado (mismo
   comportamiento que en celular). */
@media (max-width:1200px){
  .wrap-elit .elit-layout{grid-template-columns:1fr; gap:10px;}
  .wrap-elit .elit-cats{position:static;}
  .wrap-elit .elit-cats-summary{
    display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
    background:var(--panel); border:1px solid var(--hairline); border-radius:12px;
    padding:10px 14px; font-size:13px; color:var(--text);
  }
  .wrap-elit .elit-cats-summary::-webkit-details-marker{display:none;}
  .wrap-elit .elit-cats-summary::after{content:'▾'; margin-left:auto; color:var(--text-body);}
  .wrap-elit .elit-cats[open] .elit-cats-summary::after{content:'▴';}
  .wrap-elit .elit-cats[open] .elit-cats-card{margin-top:8px; max-height:55vh;}
}
@media (max-width:640px){
  .wrap-elit #resultsTable td[data-label="Producto"] .prod-cell{display:flex; align-items:flex-start; justify-content:space-between; gap:8px; flex:1 1 auto; min-width:0;}
  /* CIF Productos: el boton de copiar va pegado a la descripcion. */
  .wrap-elit #resultsTable.ct-tabla td[data-label="Producto"] .prod-cell{justify-content:flex-start;}
  .wrap.wrap-elit{padding:14px 12px 40px;}
}
@media (min-width:641px) and (max-width:1200px){
  .wrap-elit #resultsTable th,
  .wrap-elit #resultsTable td{padding:8px 5px;}
  .wrap-elit #resultsTable td[data-label="Producto"]{min-width:180px;}
}

/* AIR Productos: panel de rubros con el mismo estilo que el panel de
   categorias de ELIT Productos (columna izquierda fija en desktop, se
   pliega arriba del listado en celular) -- pero SIN agrupar: AIR tiene
   un solo nivel de rubros (~214), sin categoria padre, a diferencia de
   ELIT que si tiene categoria+subcategoria reales. Pedido de Tomas: el
   equipo ya sabe donde esta cada rubro, solo quiere elegirlo con un
   click en vez de escribir. */
.rubro-layout{display:grid; grid-template-columns:260px minmax(0,1fr); gap:18px; align-items:start;}
.rubro-main{min-width:0;}
.rubro-cats{position:sticky; top:12px;}
.rubro-cats-summary{display:none;}
.rubro-cats-card{
  background:var(--panel); border:1px solid var(--hairline); border-radius:14px;
  padding:4px 8px; max-height:calc(100vh - 24px); overflow-y:auto;
}
.rubro-cat-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 8px; border-bottom:1px solid var(--hairline);
  color:var(--text); text-decoration:none; font-size:12.5px; line-height:1.3;
  border-radius:6px;
  border:2px solid transparent;
}
.rubro-cat-row:hover{background:var(--panel-2);}
.rubro-cat-row:last-child{border-bottom:none;}
.rubro-cat-n{color:var(--text-body); font-size:11.5px; font-weight:400; flex:none;}
.rubro-cat-all{font-weight:800; font-size:13.5px; border-bottom-width:2px;}
.rubro-cat-row.active{border-color:var(--blue-light); color:var(--text);}
@media (max-width:1200px){
  .rubro-layout{grid-template-columns:1fr; gap:10px;}
  .rubro-cats{position:static;}
  .rubro-cats-summary{
    display:flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
    background:var(--panel); border:1px solid var(--hairline); border-radius:12px;
    padding:10px 14px; font-size:13px; color:var(--text);
  }
  .rubro-cats-summary::-webkit-details-marker{display:none;}
  .rubro-cats-summary::after{content:'▾'; margin-left:auto; color:var(--text-body);}
  .rubro-cats[open] .rubro-cats-summary::after{content:'▴';}
  .rubro-cats[open] .rubro-cats-card{margin-top:8px; max-height:55vh;}
}

/* AIR Productos: mismo ajuste de ancho util que ELIT Productos, para
   que la columna de rubros no deje la tabla (8 columnas) apretada. */
.wrap.wrap-air{max-width:1600px; padding:10px 16px 48px;}
@media (max-width:640px){
  .wrap.wrap-air{padding:14px 12px 40px;}
}



/* Tablas de resultados que van sueltas sobre la pagina (AIR, ELIT, Clientes):
   con el fondo de pixeles global necesitan fondo propio, como los paneles. */
#resultsTable{background:var(--panel); border-radius:12px; box-shadow:0 0 0 1px var(--hairline);}

/* Campos que no tenian estilo propio (fecha, hora, clave, area de texto) y
   boton de "Elegir archivo": mismo aspecto que el resto de los campos del
   portal, en lugar del blanco del navegador. */
textarea, input[type=date], input[type=time], input[type=month], input[type=datetime-local], input[type=password], input[type=tel], input[type=url]{
  background:var(--panel-2);
  border:1px solid var(--hairline);
  color:var(--text);
  border-radius:8px;
  padding:8px 10px;
  font-size:13px;
  font-family:var(--body);
  color-scheme:dark;
}
textarea{line-height:1.5; resize:vertical;}
:root[data-theme="light"] textarea, :root[data-theme="light"] input[type=date], :root[data-theme="light"] input[type=time], :root[data-theme="light"] input[type=month], :root[data-theme="light"] input[type=datetime-local]{color-scheme:light;}
input[type=checkbox], input[type=radio]{accent-color:var(--blue);}
input[type=file]{color:var(--text-body); font-family:var(--body); font-size:12.5px; max-width:100%;}
input[type=file]::file-selector-button{
  font-family:var(--body); font-weight:700; font-size:12.5px; margin-right:10px;
  padding:8px 16px; border-radius:999px; border:1px solid var(--hairline);
  background:transparent; color:var(--text); cursor:pointer;
}
input[type=file]::file-selector-button:hover{border-color:var(--blue-light);}
/* Texto de ayuda suelto (p.ej. dentro de las fichas/ventanas) */
.hint{color:var(--text-body); font-size:12px; line-height:1.5;}
/* Descripcion bajo el titulo de un panel (antes sin estilo: salia con la letra grande) */
.panel > .sub{color:var(--text-body); font-size:12.5px; line-height:1.5; margin:0 0 14px;}

/* ==========================================================================
   MOBILE (<=640px) — capa global, comun a TODAS las pantallas del portal
   (pedido de Tomas, 2026-10-06: "los botones estan en cualquier lugar, con
   cualquier margen, las cosas se leen mal; quiero que sea comodo trabajar
   con la app, 100% responsive").

   Reglas de la capa (para que no vuelva a pasar):
   - Margen lateral unico de 12px en todo el contenido (.wrap).
   - Barra superior fija (☰, usuario, tema, salir) siempre a mano.
   - Menús de secciones (.nav-pildora): una pildora a todo el ancho que se desliza.
   - Campos de 16px de letra y 44px de alto (iOS hace zoom con <16px).
   - Botones de 42px de alto minimo; acciones principales a todo el ancho.
   - Ventanas emergentes: hoja que sube desde abajo, con boton de cierre grande.
   - Nada puede ensanchar la pagina: lo ancho scrollea dentro de su caja.
   Va AL FINAL de este archivo a proposito: pisa lo anterior sin !important
   salvo donde el CSS original usa estilos en linea.
   ========================================================================== */
@media (max-width:640px){
  :root{--m-gut:12px;}
  html{-webkit-text-size-adjust:100%; text-size-adjust:100%;}
  body{overflow-x:hidden;}

  /* Barra superior fija */
  .userbar{
    position:sticky; top:0; z-index:40;
    padding:6px var(--m-gut); gap:6px; min-height:52px;
    background:var(--bg);
    border-bottom:1px solid var(--hairline);
  }
  @supports (background:color-mix(in srgb, red, blue)){
    .userbar{background:color-mix(in srgb, var(--bg) 90%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);}
  }
  .userbar-id{min-width:0; flex:0 1 auto; gap:6px;}
  .userbar-id span, .userbar-id > :not(img){min-width:0; max-width:112px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .userbar-logout{padding:9px 14px; font-size:12.5px;}
  .userbar-back, .userbar-admin{padding:10px 0; font-size:13px;}
  .theme-toggle{padding:10px 4px;}
  .userbar-titulo{font-size:17px;}
  .userbar-nombre{display:none;}
  .userbar:has(.userbar-titulo) + .wrap{padding-top:8px;}
  .nav-pildora{margin-bottom:12px;}
  .nav-pildora-in{display:flex; width:100%;}
  .nav-pildora-in > a, .nav-pildora-in > label, .nav-pildora-in > button{flex:1 0 auto; min-height:40px; padding:9px 13px; font-size:13px;}
  .vista-toggle-seg{padding:7px 9px; font-size:11px;}
  .vista-toggle-quien{max-width:110px;}
  .sidebar-toggle-btn{padding:8px 12px !important; margin-left:-8px; font-size:24px !important; min-width:44px; min-height:44px; align-items:center; justify-content:center;}

  /* Contenedor y encabezado */
  .wrap, .wrap.wrap-air, .wrap.wrap-elit{padding:12px var(--m-gut) 44px;}
  .hero-stage{padding:2px 0 0; margin-bottom:10px;}
  .hero .brand{font-size:21px;}
  .hero .sub{font-size:12.5px; line-height:1.45;}
  .btn-back{padding:10px 16px 10px 14px; font-size:13px; min-height:40px;}

  .rh-notif{top:-7px; right:-5px;}

  /* Paneles */
  .panel{padding:16px 14px; margin-bottom:14px; border-radius:12px;}
  .panel h2{font-size:15px;}
  .panel.admin-module{padding:0;}
  .panel.admin-module > summary{padding:14px;}
  .panel.admin-module > .admin-module-body{padding:14px;}
  .int-grupo{padding:10px 8px 0; border-radius:14px;}
  .int-grupo .panel.admin-module{margin-bottom:8px;}

  /* Campos: 16px (sin zoom de iOS) y alto comodo para el dedo */
  select, textarea,
  input[type=text], input[type=email], input[type=number], input[type=search], input[type=password],
  input[type=tel], input[type=url], input[type=date], input[type=time], input[type=month], input[type=datetime-local]{
    font-size:16px !important; min-height:44px; padding:10px 12px; border-radius:10px; max-width:100%;
  }
  textarea{min-height:88px;}
  input[type=checkbox], input[type=radio]{width:20px; height:20px;}
  input[type=file]{max-width:100%; font-size:14px !important;}

  /* Botones */
  button, .btn, a.btn, label.btn{font-size:13.5px;}
  button.primary, button.danger, .btn, a.btn, label.btn, form button[type=submit], .row-actions button{
    min-height:42px; padding:10px 18px;
  }
  button.primary, a.btn, .btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; text-align:center;}
  .row-actions{flex-wrap:wrap;}
  .switch{min-height:44px; font-size:13.5px;}

  /* Filtros (AIR / ELIT / listados): buscador + boton en una linea, y los
     interruptores como filas de ajustes (texto a la izquierda, llave a la
     derecha), todas del mismo ancho */
  form.filter-form{gap:10px;}
  form.filter-bar > .field:first-of-type{flex:1 1 0 !important; min-width:0;}
  form.filter-bar .filter-submit{flex:none;}
  .filter-switches{
    flex:1 1 100% !important; flex-direction:column !important; align-items:stretch; gap:0 !important;
    background:var(--panel); border:1px solid var(--hairline); border-radius:12px; padding:0 14px;
  }
  .filter-switches .switch{
    width:100%; margin:0 !important; padding:11px 0; justify-content:space-between; flex-direction:row-reverse;
    font-size:13.5px !important; border-bottom:1px solid var(--hairline);
  }
  .filter-switches .switch:last-child{border-bottom:0;}
  .add-form{grid-template-columns:1fr; gap:12px;}

  /* Resultados AIR / ELIT: cada producto es su propia tarjeta; la tabla en
     si no lleva fondo ni encabezado (antes quedaba una franja vacia arriba) */
  #resultsTable{background:transparent; box-shadow:none; border-radius:0;}
  #resultsTable thead{display:none;}
  #resultsTable tbody tr{padding:14px; margin-bottom:10px;}
  .status-strip{margin-bottom:12px; padding:10px 14px;}
  .elit-pager{margin:12px 0 6px;}
  .elit-pager-links .btn{min-height:40px;}

  /* Ventanas emergentes: hoja que sube desde abajo */
  .modal-backdrop{align-items:flex-end; padding:0;}
  .modal-box, .modal-box.lst-wide, .margenes-box{
    max-width:none; width:100%; border-radius:18px 18px 0 0; border-bottom:0;
    max-height:92vh; max-height:92dvh; padding:20px 14px calc(20px + env(safe-area-inset-bottom));
  }
  .modal-close{top:6px; right:6px; width:44px; height:44px; padding:0; font-size:28px; display:flex; align-items:center; justify-content:center;}
  .fx-titulo{padding-right:44px;}
  .margenes-lista{max-height:46vh;}
  .margen-row input{width:96px;}
  .margenes-footer{flex-direction:column-reverse;}
  .margenes-footer > *{width:100%;}
  .fx-acciones > *{flex:1 1 140px;}
  .fx-item{flex-wrap:wrap;}

  /* Autocompletado y menus flotantes */
  .autocomplete-menu{max-height:46vh;}
  .autocomplete-item{padding:12px 10px;}

  /* Paneles laterales plegables (categorias de ELIT, rubros de AIR) */
  .wrap-elit .elit-cats-summary, .rubro-cats-summary, .elit-cats-summary{min-height:46px; padding:12px 14px; font-size:14px;}
  .wrap-elit .elit-cat-row, .rubro-cat-row{padding:12px 10px; font-size:14px;}
  .wrap-elit .elit-cat-sub{padding-left:22px;}

  /* Tablas genericas que no son tarjetas: que scrolleen dentro de su caja */
  .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
}

/* Mobile: segunda tanda (tablas, navegacion interna, botones sueltos) */
@media (max-width:640px){

  /* Tablas simples (sin tarjetas propias): cada fila es un bloque y cada
     celda lleva su titulo arriba (el JS pone data-label desde el
     encabezado, ver assets/sidebar-collapse.js) */
  table.m-cards tr{border:1px solid var(--hairline); border-radius:12px; padding:12px 14px; margin-bottom:10px; background:var(--panel);}
  table.m-cards tr:last-child{border-bottom:1px solid var(--hairline);}
  table.m-cards td{padding:5px 0; border:0; font-size:13.5px;}
  table.m-cards td[data-label]::before{content:attr(data-label); display:block; font-size:10px; text-transform:uppercase; letter-spacing:.3px; color:var(--text-body); margin-bottom:2px;}
  table.m-cards td:empty{display:none;}
  table.m-cards td form{display:flex; flex-wrap:wrap; gap:8px;}
  table.m-cards td form > input[type=text], table.m-cards td form > input[type=number], table.m-cards td form > select{flex:1 1 100%;}
  table.m-cards td .row-actions{width:100%;}
  table.m-cards td .row-actions > *{flex:1 1 120px;}

  /* Tablas que SI tienen que seguir siendo tablas (se mueven dentro de su caja) */
  .rh-cal, #matrizTable, table.cot-perline, .cre-table, .ctr-lineas{display:table; width:100%;}
  .rh-cal thead, #matrizTable thead, table.cot-perline thead, .cre-table thead, .ctr-lineas thead{display:table-header-group;}
  .rh-cal tbody, #matrizTable tbody, table.cot-perline tbody, .cre-table tbody, .ctr-lineas tbody{display:table-row-group;}
  .rh-cal tfoot, #matrizTable tfoot, .ctr-lineas tfoot{display:table-footer-group;}
  .rh-cal tr, #matrizTable tr, table.cot-perline tr, .cre-table tr, .ctr-lineas tr{display:table-row; padding:0; border:0; margin:0; background:none;}
  .rh-cal th, #matrizTable th, table.cot-perline th, .cre-table th, .ctr-lineas th,
  .rh-cal td, #matrizTable td, table.cot-perline td, .cre-table td, .ctr-lineas td{display:table-cell;}
  .ctr-lineas-wrap, .cre-table-wrap, .matriz-wrap, .rh-cal-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}

  /* Botones chicos sueltos: zona de toque de 40px sin agrandar el dibujo */
  .copy-btn{position:relative;}
  .copy-btn::after{content:''; position:absolute; inset:-9px;}
  .sidebar-sub-toggle{min-width:44px; min-height:40px;}
  summary{min-height:44px; display:flex; align-items:center;}
  .status-strip summary{min-height:34px;}
  .lst-link{display:inline-block; padding:6px 0;}
  .userbar-back{display:inline-flex; align-items:center; min-height:44px;}

  /* Botonera de acciones arriba de una lista: dos por fila, parejas */
  .lst-toolbar{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:0 0 12px;}
  .lst-toolbar > *{min-width:0;}
  .lst-toolbar > :last-child:nth-child(odd){grid-column:1 / -1;}
  .lst-toolbar > .btn, .lst-toolbar > a.btn, .lst-toolbar > button, .lst-toolbar form .btn, .lst-toolbar form button{width:100%; min-height:46px;}
  .lst-toolbar form{display:block; margin:0;}
}

/* ---------- Notificaciones: campanita de la barra superior ----------
   partials/notificaciones.php + assets/notificaciones.js (pedido de Tomas,
   2026-10-11). Etapa 1: dentro del portal; la etapa 2 suma mail. */
.ntf{position:relative; display:inline-flex;}
.ntf-btn{position:relative; display:inline-grid; place-items:center; width:34px; height:34px; padding:0; border-radius:999px; background:transparent; border:1px solid var(--hairline); color:var(--text-body); cursor:pointer;}
.ntf-btn:hover, .ntf-btn[aria-expanded="true"]{color:var(--blue-light); border-color:var(--blue-light);}
.ntf-btn svg{width:17px; height:17px;}
.ntf-btn .ico{color:inherit;}
.ntf-btn.tiene{color:var(--blue-light);}
.ntf-badge{position:absolute; top:-5px; right:-6px; min-width:18px; height:18px; padding:0 5px; box-sizing:border-box; border-radius:999px; background:#E5484D; color:#fff; font-size:10.5px; font-weight:800; line-height:18px; text-align:center; font-family:var(--body);}
.ntf-panel{position:absolute; top:calc(100% + 8px); right:0; z-index:60; width:360px; max-width:calc(100vw - 24px); background:var(--panel); border:1px solid var(--hairline); border-radius:14px; box-shadow:0 18px 40px rgba(0,0,0,.45); overflow:hidden; text-align:left;}
.ntf-cab{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border-bottom:1px solid var(--hairline);}
.ntf-cab b{font-family:var(--tit); font-size:14px; color:var(--text);}
.ntf-cab button{background:transparent; border:0; padding:4px 6px; font-size:11.5px; font-weight:600; color:var(--blue-light); cursor:pointer;}
.ntf-lista{max-height:min(420px, 70vh); overflow:auto;}
.ntf-item{display:flex; gap:10px; width:100%; text-align:left; padding:10px 14px; background:transparent; border:0; border-bottom:1px solid var(--hairline); border-radius:0; font-weight:400; color:var(--text); cursor:pointer;}
.ntf-item:hover{background:var(--panel-2);}
.ntf-item.sin-leer{background:rgba(0,100,255,.08);}
.ntf-item.sin-leer b::before{content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--blue-light); margin-right:6px; vertical-align:1px;}
.ntf-item.importante .ntf-ico, .ntf-item.importante .ntf-ico .ico{color:#F5A623;}
.ntf-ico{flex:none; width:20px; color:var(--blue-light); padding-top:1px;}
.ntf-ico svg{width:17px; height:17px;}
.ntf-txt{display:flex; flex-direction:column; gap:2px; min-width:0;}
.ntf-txt b{font-size:13px; line-height:1.3;}
.ntf-cuerpo{font-size:12px; color:var(--text-body); line-height:1.35; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-line;}
.ntf-cuando{font-size:11px; color:var(--text-body);}
.ntf-vacio{padding:22px 14px; text-align:center; color:var(--text-body); font-size:12.5px;}
.ntf-pie{display:block; padding:10px 14px; text-align:center; font-size:12px; font-weight:700; color:var(--blue-light); text-decoration:none;}
.ntf-pie:hover{background:var(--panel-2);}
@media (max-width:640px){
  .ntf-btn{width:40px; height:40px;}
  .ntf-panel{position:fixed; top:58px; left:12px; right:12px; width:auto; max-width:none;}
}