:root{
  --navy: #0c1f3a;
  --navy-2: #12294d;
  --navy-light: #1b3a66;
  --gold: #D4AF37;
  --gold-dark: #A6871F;
  --bg: #f5f6f8;
  --white: #ffffff;
  --text: #101826;
  --text-muted: #5b6472;
  --border: #e3e6ea;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; overflow-x:clip;}
body{
  font-family:'Inter', sans-serif;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  /* El panel del carrito vive escondido a la DERECHA de la pantalla
     (transform:translateX(100%)) y, en celular, ese trozo escondido estiraba el
     ancho del documento — el navegador achicaba toda la página para que entrara
     y el botón del menú quedaba tapado, así que tocarlo no hacía nada.
     `clip` recorta ese sobrante sin romper los elementos pegajosos de la página
     (a diferencia de overflow-x:hidden, que sí los rompe). */
  overflow-x:clip;
}
h1,h2,h3,h4{ font-family:'Oswald', sans-serif; text-transform:uppercase; letter-spacing:0.5px; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
.container{ max-width:1200px; margin:0 auto; padding:0 24px; }
/* Wider content area for data-heavy dashboards (Admin, Sales Dashboard, Client Portal) so
   tables have room to show all their columns without needing a side-scroll. */
.container-wide{ max-width:none; width:100%; margin:0 auto; padding:0 32px; box-sizing:border-box; }
@media (max-width:900px){ .container-wide{ padding:0 16px; } }

/* NAVBAR */
.navbar{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(12,31,58,0.72);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:background 0.3s ease;
}
.navbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 48px;
}
.navbar-logo{ display:flex; align-items:center; gap:10px; }
.navbar-logo img{ height:50px; width:auto; }
.navbar-logo span{
  font-family:'Oswald', sans-serif; color:var(--white); font-weight:600;
  font-size:1.05rem; letter-spacing:0.5px;
}
.navbar-links{ display:flex; align-items:center; gap:26px; }
.navbar-links a{
  color:rgba(255,255,255,0.85); font-size:0.92rem; font-weight:500;
  transition:color 0.2s ease; position:relative; padding-bottom:4px;
}
.navbar-links a:hover{ color:var(--white); }
.navbar-links a.active{ color:var(--white); }
.navbar-links a.active::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--gold); border-radius:2px;
}
.navbar-actions{ display:flex; align-items:center; gap:14px; }

/* ---------------------------------------------------------------------------
   MENU: redes sociales con el "+" y desplegable de Productos
   Las redes salieron del globo flotante (esquina inferior derecha) y viven acá,
   al lado de Home. El "+" abre hacia ABAJO, como el resto de los menús del
   sitio. Se abre con clic, no con hover: en una tableta el hover no existe y el
   menú quedaría inalcanzable.
--------------------------------------------------------------------------- */
.nav-social{ position:relative; display:flex; align-items:center; }
.nav-social-toggle{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; padding:0; border-radius:50%;
  background:rgba(255,255,255,0.10); border:1px solid rgba(255,255,255,0.22);
  color:rgba(255,255,255,0.9); cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, transform 0.25s ease;
}
.nav-social-toggle svg{ width:15px; height:15px; transition:transform 0.25s ease; }
.nav-social-toggle:hover{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
.nav-social.open .nav-social-toggle{ background:var(--gold); color:var(--navy); border-color:var(--gold); }
.nav-social.open .nav-social-toggle svg{ transform:rotate(135deg); }

.nav-social-menu, .nav-drop-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-6px);
  min-width:172px; padding:8px; border-radius:12px;
  background:rgba(12,31,58,0.97);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index:120;
}
/* Puente invisible entre el botón y el menú: sin esto, mover el puntero hacia
   abajo cruza un hueco de 14px y el menú se cierra a mitad de camino. */
.nav-social-menu::before, .nav-drop-menu::before{
  content:''; position:absolute; left:0; right:0; top:-14px; height:14px;
}
.nav-social.open .nav-social-menu, .nav-drop.open .nav-drop-menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0);
}
.navbar-links .nav-social-menu a, .navbar-links .nav-drop-menu a{
  display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:8px;
  font-size:0.88rem; color:rgba(255,255,255,0.85); white-space:nowrap; padding-bottom:9px;
}
.navbar-links .nav-social-menu a:hover, .navbar-links .nav-drop-menu a:hover{
  background:rgba(255,255,255,0.10); color:var(--white);
}
.navbar-links .nav-social-menu a.active::after, .navbar-links .nav-drop-menu a.active::after{ display:none; }
.nav-social-menu svg{ width:16px; height:16px; flex:none; }

.nav-drop{ position:relative; display:flex; align-items:center; }
.nav-drop-toggle{
  display:flex; align-items:center; gap:5px; padding:0 0 4px; border:none; background:none;
  font-family:inherit; font-size:0.92rem; font-weight:500; cursor:pointer;
  color:rgba(255,255,255,0.85); transition:color 0.2s ease; position:relative;
}
.nav-drop-toggle:hover{ color:var(--white); }
.nav-drop.active .nav-drop-toggle{ color:var(--white); }
.nav-drop.active .nav-drop-toggle::after{
  content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background:var(--gold); border-radius:2px;
}
.nav-drop-chev{ width:13px; height:13px; transition:transform 0.25s ease; }
.nav-drop.open .nav-drop-chev{ transform:rotate(180deg); }

/* Las redes dentro del menú del teléfono, donde no hay desplegable. */
.mobile-social{ display:flex; gap:12px; margin-top:20px; }
.navbar-mobile-menu .mobile-social a{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; margin:0;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  color:rgba(255,255,255,0.9);
}
.mobile-social svg{ width:17px; height:17px; }

@media (prefers-reduced-motion: reduce){
  .nav-social-menu, .nav-drop-menu, .nav-drop-chev, .nav-social-toggle svg{ transition:none; }
}
.lang-toggle{ display:flex; gap:4px; background:rgba(255,255,255,0.08); border-radius:20px; padding:3px; }
.lang-btn{
  border:none; background:transparent; color:rgba(255,255,255,0.6);
  font-size:0.75rem; font-weight:700; padding:5px 10px; border-radius:16px;
  cursor:pointer; transition:all 0.2s ease; font-family:'Inter',sans-serif;
}
.lang-btn.active{ background:var(--white); color:var(--navy); }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:6px; font-weight:600; font-size:0.9rem;
  cursor:pointer; border:none; transition:all 0.2s ease; white-space:nowrap;
}
.btn-primary{ background:var(--gold); color:var(--white); }
.btn-primary:hover{ background:var(--gold-dark); transform:translateY(-1px); }
/* El contorno va con box-shadow y NO con border a proposito: un border de 1.5px
   hacia 3px de alto al boton, asi que "Client Login" (outline) media 41px y
   "Request Access" (solido) 39px, uno al lado del otro en la barra. box-shadow
   no ocupa lugar, asi que los dos miden exactamente igual. */
.btn-outline{
  background:transparent; color:var(--white);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.35);
}
.btn-outline:hover{ box-shadow:inset 0 0 0 1.5px var(--white); background:rgba(255,255,255,0.08); }
.admin-modal .btn-outline, .order-card .btn-outline, .cart-drawer .btn-outline, .demo-note .btn-outline{
  color:var(--navy); box-shadow:inset 0 0 0 1.5px rgba(12,31,58,0.35);
}
.admin-modal .btn-outline:hover, .order-card .btn-outline:hover, .cart-drawer .btn-outline:hover, .demo-note .btn-outline:hover{
  box-shadow:inset 0 0 0 1.5px var(--navy); background:rgba(12,31,58,0.06);
}
.demo-note .btn-outline.active{ background:var(--navy); color:var(--white); box-shadow:inset 0 0 0 1.5px var(--navy); }
.navbar-mobile-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; z-index:101; position:relative; }
.navbar-mobile-toggle span{ display:block; width:24px; height:2px; background:var(--white); margin:5px 0; transition:all 0.25s ease; }
.navbar-mobile-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.navbar-mobile-toggle.open span:nth-child(2){ opacity:0; }
.navbar-mobile-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.navbar-mobile-menu{
  display:none; flex-direction:column; gap:2px;
  position:fixed; top:0; left:0; right:0; z-index:100;
  /* OJO: no usar `bottom:0` aca. La barra de arriba (.navbar) lleva
     backdrop-filter, y eso hace que los hijos `fixed` se midan contra ELLA y no
     contra la pantalla — con bottom:0 el menu quedaba del alto de la barra
     (unos 90px) y no se veia ninguna opcion. Con una altura fija de pantalla
     completa funciona igual en los dos casos. */
  height:100vh; height:100dvh;
  /* Opaco de verdad: los paneles internos tienen tablas y numeros detras, y con
     el fondo semitransparente el menu se leia encima de todo eso. */
  background:#0a1526;
  padding:86px 22px 34px;
  /* El panel de Administracion tiene muchas secciones: el menu tiene que poder
     deslizarse, si no las ultimas quedan fuera de la pantalla y no se alcanzan. */
  overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.navbar-mobile-menu.open{ display:flex; }
.navbar-mobile-menu a{
  color:rgba(255,255,255,0.85); font-size:1.05rem; font-weight:500;
  padding:14px 4px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.navbar-mobile-menu a.active{ color:var(--white); }
.navbar-mobile-menu .btn{ margin-top:18px; width:100%; }
.navbar-mobile-menu .lang-toggle{ align-self:flex-start; margin-top:18px; }

/* HERO (home page only) */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:center;
  padding:120px 0 80px; overflow:hidden;
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Two stacked copies of the same clip that hand off to each other, so the loop
   never shows the rewind. Both fill the frame identically; only opacity changes,
   which the compositor can do without touching layout. */
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
  background:var(--navy);
  opacity:0; transition:opacity 0.55s linear;
}
.hero-video.is-front{ opacity:1; }
@media (prefers-reduced-motion:reduce){ .hero-video{ transition:none; } }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(9,20,38,0.72) 0%, rgba(12,31,58,0.6) 40%, rgba(12,31,58,0.3) 75%, rgba(12,31,58,0.12) 100%);
}
.hero-content{ position:relative; z-index:1; max-width:640px; }
.hero-eyebrow{
  display:inline-block; color:var(--gold);
  background:rgba(212,175,55,0.15); border:1px solid rgba(212,175,55,0.4);
  padding:6px 14px; border-radius:20px; font-size:0.78rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; margin-bottom:22px;
  font-family:'Inter', sans-serif; animation:eyebrow-pulse 2.2s ease-in-out infinite;
}
.hero-title{ color:var(--white); font-size:3.1rem; line-height:1.12; font-weight:700; margin-bottom:20px; text-shadow:0 2px 16px rgba(9,20,38,0.55); }
.hero-subtitle{
  color:rgba(255,255,255,0.92); font-size:1.08rem; line-height:1.6;
  max-width:520px; margin-bottom:34px; font-weight:400; text-shadow:0 2px 10px rgba(9,20,38,0.5);
}
.hero-actions{ display:flex; gap:16px; margin-bottom:56px; flex-wrap:wrap; }
.hero-actions .btn{ padding:14px 28px; font-size:0.95rem; }
/* En telefono los dos botones del hero se apilaban con anchos distintos (255 y
   142 px) y quedaban desparejos. Debajo de 480px van los dos al ancho completo
   de la columna, asi arrancan y terminan en la misma linea. */
@media (max-width:480px){
  .hero-actions{ flex-direction:column; align-items:stretch; gap:12px; }
  .hero-actions .btn{ width:100%; }
}
.hero-stats{
  display:flex; gap:0; border-top:1px solid rgba(255,255,255,0.18);
  padding-top:28px; max-width:760px; flex-wrap:wrap; row-gap:22px;
}
/* El dato de las industrias lleva 5 nombres, no un numero: necesita casi el
   doble de ancho que "2002" o "40+". */
.hero-stat--ancho{ flex:2 1 320px; }
.hero-stat{ flex:1; padding-right:24px; }
.hero-stat-num{ font-family:'Oswald', sans-serif; color:var(--white); font-size:2rem; font-weight:700; line-height:1; }
.hero-stat-label{
  color:rgba(255,255,255,0.65); font-size:0.8rem; margin-top:6px;
  text-transform:uppercase; letter-spacing:0.5px; font-weight:500;
}

/* PAGE BANNER (inner pages: About, Industries, Contact) */
.page-banner{
  position:relative; padding:150px 0 60px; background:var(--navy);
  overflow:hidden;
}
.page-banner::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 20% 0%, rgba(212,175,55,0.18) 0%, transparent 55%);
}
.page-banner-eyebrow{
  position:relative; display:inline-block; color:var(--gold);
  background:rgba(212,175,55,0.15); border:1px solid rgba(212,175,55,0.4);
  padding:6px 14px; border-radius:20px; font-size:0.78rem; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; margin-bottom:18px;
  font-family:'Inter', sans-serif; animation:eyebrow-pulse 2.2s ease-in-out infinite;
}
@keyframes eyebrow-pulse{
  0%, 100%{ box-shadow:0 0 0 0 rgba(212,175,55,0.55); border-color:rgba(212,175,55,0.4); background:rgba(212,175,55,0.15); }
  50%{ box-shadow:0 0 0 7px rgba(212,175,55,0); border-color:rgba(212,175,55,0.95); background:rgba(212,175,55,0.28); }
}
@media (prefers-reduced-motion: reduce){
  .hero-eyebrow, .page-banner-eyebrow{ animation:none; }
}
.page-banner-title{ position:relative; color:var(--white); font-size:2.6rem; font-weight:700; margin-bottom:14px; }
.page-banner-subtitle{ position:relative; color:rgba(255,255,255,0.75); font-size:1.05rem; max-width:600px; line-height:1.6; }

/* SECTIONS */
.section{ padding:80px 0; }
.section-alt{ background:var(--white); }
.section-eyebrow{
  color:var(--gold); font-size:0.78rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; margin-bottom:12px; font-family:'Inter', sans-serif;
}
.section-title{ font-size:2rem; font-weight:700; color:var(--navy); margin-bottom:16px; }
.section-lead{ color:var(--text-muted); font-size:1.05rem; line-height:1.7; max-width:680px; }

/* CARDS */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:24px; margin-top:44px; }
/* min(420px, 100%) instead of a bare 420px: a fixed minmax floor cannot shrink
   below its minimum, so on a 390px phone each video stayed 420px wide and pushed
   the whole page sideways. */
.video-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap:32px; margin-top:44px; }
.video-embed{ position:relative; width:100%; padding-top:56.25%; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(12,31,58,0.14); background:var(--navy); }
.video-embed iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.video-caption{ margin-top:12px; font-size:0.92rem; font-weight:600; color:var(--navy); text-align:center; }
/* Tarjeta que reemplaza un video que no se puede embeber (Facebook no permite
   mostrar sus posts dentro de otra web) — abre el post real en pestana nueva. */
.video-link-card{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  width:100%; padding-top:56.25%; border-radius:10px; overflow:hidden; text-decoration:none;
  background:linear-gradient(135deg, var(--navy) 0%, #17325c 100%); box-shadow:0 8px 24px rgba(12,31,58,0.14);
  transition:transform .25s ease, box-shadow .25s ease; }
.video-link-card:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(12,31,58,0.22); }
.video-link-play, .video-link-label{ position:absolute; left:50%; transform:translateX(-50%); }
.video-link-play{ top:calc(50% - 34px); display:grid; place-items:center; width:56px; height:56px; border-radius:50%;
  background:var(--gold); color:var(--navy); transition:transform .25s ease; }
.video-link-card:hover .video-link-play{ transform:translateX(-50%) scale(1.08); }
.video-link-play svg{ width:24px; height:24px; margin-left:3px; }
.video-link-label{ top:calc(50% + 32px); color:#fff; font-weight:600; font-size:0.95rem; white-space:nowrap; }
.card{
  background:var(--white); border:1px solid var(--border); border-radius:10px;
  padding:28px 24px; transition:background 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; border-top:3px solid transparent;
}
.card:hover{ background:var(--gold); border-top-color:var(--gold); transform:translateY(-4px); box-shadow:0 12px 30px rgba(12,31,58,0.18); }
/* ESTILO B (27-ago-2026) — el icono va SUELTO encima del titulo, sin el cuadro
   de color detras. Ese chip redondeado con el icono dentro es el sello visual de
   las plantillas generadas; el trazo solo, en el dorado de la marca, se lee como
   diseno propio sin cambiar la estructura de la tarjeta.
   La version anterior (con el cuadro dorado) esta guardada en
   respaldos/estilo-tarjetas-antes-27ago2026/ por si Bryan la prefiere. */
.card-icon{
  display:flex; align-items:center; justify-content:flex-start;
  margin-bottom:14px; color:var(--gold-dark);
  transition:color 0.25s ease;
}
.card-icon svg{ width:28px; height:28px; }
.card:hover .card-icon{ color:var(--navy); }
.card h3{ font-size:1.05rem; color:var(--navy); margin-bottom:8px; text-transform:none; letter-spacing:0; transition:color 0.25s ease; }
.card p{ color:var(--text-muted); font-size:0.92rem; line-height:1.6; transition:color 0.25s ease; }
.card:hover h3{ color:var(--white); }
.card:hover p{ color:rgba(255,255,255,0.9); }

/* STAT ROW (reused on inner pages) */
/* Los 4 datos de "Sobre nosotros". Antes era un flex que se envolvia solo, y
   como cada dato mide distinto de ancho, al pasar a dos filas las columnas no
   coincidian: "2002" quedaba alineado con "3", pero "40+" no con "5". Con una
   rejilla de columnas iguales las dos filas caen siempre a la misma altura y
   al mismo margen, en cualquier ancho de pantalla. */
.stat-row{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:32px 40px;
  margin-top:40px; padding-top:32px; border-top:1px solid var(--border);
}
@media (max-width:1100px){ .stat-row{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:420px){ .stat-row{ grid-template-columns:1fr; gap:26px; } }
.stat-item .stat-num{ font-family:'Oswald', sans-serif; color:var(--navy); font-size:2.4rem; font-weight:700; line-height:1; }
.stat-item .stat-label{ color:var(--text-muted); font-size:0.82rem; margin-top:6px; text-transform:uppercase; letter-spacing:0.5px; font-weight:600; }

/* IMAGE + TEXT SPLIT */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split img{ border-radius:12px; width:100%; height:100%; object-fit:cover; box-shadow:0 20px 40px rgba(12,31,58,0.15); }

/* FOOTER */
.footer{ background:var(--navy); color:rgba(255,255,255,0.7); padding:56px 0 28px; }
/* Rejilla y no flex con wrap: con flex, entre ~1080px y ~620px las 4 columnas
   se partian en 3 + 1 y la cuarta quedaba sola y pegada a la izquierda. Con
   rejilla el pie pasa de 4 columnas a 2 x 2 y despues a 1, siempre parejo. */
.footer-inner{ display:grid; grid-template-columns:repeat(4, auto); justify-content:space-between; gap:40px; margin-bottom:36px; }
@media (max-width:1080px){
  .footer-inner{ grid-template-columns:repeat(2, minmax(0,1fr)); justify-content:stretch; gap:34px 40px; }
}
@media (max-width:520px){
  .footer-inner{ grid-template-columns:minmax(0,1fr); gap:28px; }
}
.footer-logo{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.footer-logo img{ height:42px; }
.footer-logo span{ font-family:'Oswald',sans-serif; color:var(--white); font-weight:600; }
.footer-col h4{ color:var(--white); font-size:0.85rem; margin-bottom:14px; text-transform:uppercase; letter-spacing:1px; }
.footer-col a, .footer-col p{ display:block; color:rgba(255,255,255,0.6); font-size:0.88rem; margin-bottom:9px; line-height:1.5; }
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  border-top:1px solid rgba(255,255,255,0.1); padding-top:22px; font-size:0.8rem;
  color:rgba(255,255,255,0.45);
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
/* El crédito de iVot en el pie de las páginas públicas. Antes era una línea de
   texto pequeña; ahora lleva el logo, como el sello que ya usan las pantallas
   del sistema — el mismo peso visual en los dos sitios. Sigue siendo discreto:
   apagado en reposo, se enciende al pasar por encima. */
.footer-ivot{
  display:inline-flex; align-items:center; gap:10px;
  /* Sin esto el pie recortaba el logo por arriba y por abajo. */
  line-height:1; padding:4px 0;
  color:rgba(255,255,255,0.45); text-decoration:none;
  font-size:0.86rem; letter-spacing:0.2px;
  opacity:0.85; transition:opacity 0.2s ease, color 0.2s ease;
}
.footer-ivot img{
  height:26px; width:auto; display:block; flex-shrink:0;
  /* Se usa `logo-ivot-claro.png`, una versión del logo con el trazo en blanco y
     el verde de la marca intacto. Antes se aclaraba con un filtro CSS
     (`brightness(0) invert(1)`) y eso mataba el verde: salía un manchón. */
  opacity:0.88;
  transition:opacity 0.2s ease;
}
.footer-ivot:hover{ color:rgba(255,255,255,0.85); opacity:1; }
.footer-ivot:hover img{ opacity:1; }

/* 🔴 El botón flotante de WhatsApp (.whatsapp-float, 56px pegado a la esquina
   inferior derecha) le caía ENCIMA al logo y tapaba la última letra. Se le deja
   sitio al pie para que no se pisen. Detectado el 28-ago-2026 capturando el pie
   con margen alrededor: recortado justo en el borde parecía que el logo estaba
   cortado, y en realidad estaba tapado. */
.footer-bottom{ padding-right:86px; }
@media (max-width:600px){
  /* En el teléfono el pie se centra y el botón queda debajo: no hace falta. */
  .footer-bottom{ padding-right:0; padding-bottom:70px; }
}
@media (max-width:600px){
  .footer-ivot{ font-size:0.8rem; gap:7px; }
  .footer-ivot img{ height:22px; }
}

.footer-credit{ color:rgba(255,255,255,0.38); }
.footer-credit a{ color:rgba(255,255,255,0.62); border-bottom:1px solid rgba(255,255,255,0.2); transition:color 0.2s ease, border-color 0.2s ease; }
.footer-credit a:hover{ color:var(--gold); border-color:var(--gold); }
@media (max-width:600px){ .footer-bottom{ justify-content:center; text-align:center; } }
.footer-social{ display:flex; gap:12px; margin-top:18px; }
.footer-social a{
  display:flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,0.08); color:rgba(255,255,255,0.7);
  transition:background 0.2s, color 0.2s;
}
.footer-social a:hover{ background:var(--gold); color:var(--navy); }
.footer-social svg{ width:17px; height:17px; }

/* INDUSTRY CARDS (bigger than the generic .card) */
.industry-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap:26px; margin-top:44px; }
/* Cuando la rejilla tiene 4 tarjetas, auto-fit las pone 3 + 1 y la ultima queda
   huerfana pegada a la izquierda. Con 2 x 2 queda pareja. */
.industry-grid-4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (max-width:860px){ .industry-grid-4{ grid-template-columns:minmax(0,1fr); } }
.industry-card{
  background:var(--white); border:1px solid var(--border); border-radius:12px;
  padding:34px 28px; transition:all 0.25s ease; border-top:3px solid transparent;
}
.industry-card:hover{ background:var(--gold); border-top-color:var(--gold); transform:translateY(-4px); box-shadow:0 16px 34px rgba(12,31,58,0.18); }
/* ESTILO B — mismo criterio que .card-icon: trazo suelto encima del titulo,
   sin cuadrito de fondo. */
.industry-icon{
  display:flex; align-items:center; justify-content:flex-start; margin-bottom:16px;
  color:var(--gold-dark); transition:color 0.25s ease;
}
.industry-icon svg{ width:30px; height:30px; color:inherit; }
.industry-card:hover .industry-icon{ color:var(--navy); }
.industry-card h3{ font-size:1.2rem; color:var(--navy); margin-bottom:10px; text-transform:none; letter-spacing:0; transition:color 0.25s ease; }
.industry-card p{ color:var(--text-muted); font-size:0.95rem; line-height:1.65; transition:color 0.25s ease; }
.industry-card:hover h3{ color:var(--white); }
.industry-card:hover p{ color:rgba(255,255,255,0.9); }

/* CTA BANNER */
.cta-banner{
  background:var(--navy); border-radius:16px; padding:52px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;
  margin-top:64px; position:relative; overflow:hidden;
}
.cta-banner::before{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 90% 20%, rgba(212,175,55,0.22) 0%, transparent 55%);
}
.cta-banner-text{ position:relative; max-width:520px; }
.cta-banner-text h3{ color:var(--white); font-size:1.5rem; margin-bottom:8px; }
.cta-banner-text p{ color:rgba(255,255,255,0.72); font-size:0.95rem; line-height:1.6; }
.cta-banner .btn{ position:relative; padding:14px 28px; }
/* Dos franjas de llamada a la accion, lado a lado, mitad y mitad. Las dos cajas
   miden lo mismo de ancho (1fr y 1fr) y lo mismo de alto (align-items:stretch),
   y el boton se pega abajo con margin-top:auto para que los dos queden a la
   misma altura aunque un texto sea mas largo que el otro. */
.cta-pair{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:26px; align-items:stretch; margin-top:64px; }
.cta-pair .cta-banner{
  margin-top:0; height:100%;
  flex-direction:column; align-items:flex-start; justify-content:flex-start;
  gap:22px; padding:40px 34px; flex-wrap:nowrap;
}
.cta-pair .cta-banner-text{ max-width:none; }
.cta-pair .cta-banner .btn{ margin-top:auto; align-self:flex-start; }
@media (max-width:900px){
  .cta-pair{ grid-template-columns:minmax(0,1fr); gap:22px; margin-top:44px; }
  .cta-pair .cta-banner{ padding:36px 28px; }
}

/* CONTACT PAGE */
.contact-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:56px; margin-top:44px; align-items:start; }
.contact-info-item{ display:flex; gap:16px; margin-bottom:26px; }
.contact-info-icon{
  width:42px; height:42px; border-radius:10px; background:rgba(12,31,58,0.06);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--navy);
}
.contact-info-icon svg{ width:20px; height:20px; }
.contact-info-label{ font-size:0.78rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; font-weight:600; margin-bottom:3px; }
.contact-info-value{ font-size:0.98rem; color:var(--text); line-height:1.5; }
.contact-info-value a{ color:var(--navy); font-weight:600; }
.map-link{ color:var(--gold); font-weight:600; font-size:0.9rem; display:inline-block; margin-top:4px; }
.contact-form{ background:var(--white); border:1px solid var(--border); border-radius:14px; padding:36px; }
.contact-form h3{ font-size:1.15rem; color:var(--navy); margin-bottom:22px; text-transform:none; letter-spacing:0; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group{ margin-bottom:18px; }
.form-group label{ display:block; font-size:0.82rem; font-weight:600; color:var(--text); margin-bottom:7px; }
.form-group input, .form-group textarea{
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:7px;
  font-family:'Inter', sans-serif; font-size:0.92rem; color:var(--text); transition:border-color 0.2s ease;
  background:var(--bg);
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--navy-light); background:var(--white); }
.form-group textarea{ resize:vertical; min-height:110px; }

/* SCROLL REVEAL */
.reveal{ opacity:0; transform:translateY(26px); filter:blur(4px); transition:opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); filter:blur(0); }
.reveal-delay-1{ transition-delay:0.1s; }
.reveal-delay-2{ transition-delay:0.2s; }
.reveal-delay-3{ transition-delay:0.3s; }
.reveal-delay-4{ transition-delay:0.4s; }
@media (prefers-reduced-motion: reduce){ .reveal{ transition:none; opacity:1; transform:none; filter:none; } }

/* BRAND MARQUEE */
/* El hueco entre logos vive en una variable porque la animacion lo necesita:
   la tira es la lista de 64 logos duplicada, y para que el bucle cierre sin
   salto hay que correrla exactamente una copia, que es 50% + medio hueco. */
.marquee-wrap{ padding:24px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--white); --marquee-gap:48px; }
.marquee-label{ text-align:center; color:var(--text-muted); font-size:0.7rem; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:16px; }

/* El recorte y el desvanecido van aqui, no en .marquee-wrap: si la mascara se
   aplicara al bloque con bordes, las lineas de arriba y abajo se borrarian en
   las puntas. Y no puede ir en .marquee-track porque la mascara se moveria
   junto con el transform de la animacion. */
.marquee-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
}

.marquee-track{ display:flex; gap:var(--marquee-gap); width:max-content; animation:marquee 62s linear infinite; align-items:center; }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }

/* Alto fijo en vez de max-height: con max-height el navegador calculaba mal el
   ancho de la tira (width:max-content quedaba 437 px mas corto que los logos
   reales, asi que los ultimos se salian de la caja y el bucle saltaba 243 px).
   Con alto fijo + object-fit:contain el logo se ve EXACTAMENTE del mismo tamano
   que antes, pero la caja mide lo que debe y la cuenta del bucle da exacta.
   flex:0 0 auto evita que un logo se apriete si algun dia la tira cambia. */
.marquee-track img{
  height:30px; width:auto; max-width:120px; object-fit:contain; flex:0 0 auto;
  filter:grayscale(100%); opacity:0.55; transition:opacity 0.25s ease, filter 0.25s ease;
}
.marquee-track img:hover{ opacity:1; filter:grayscale(0%); }

/* Todos los logos entran en la misma caja de 120 x 30 px y se escalan solos.
   Antes cada emblema cuadrado (Chevron, STP, Permatex) llevaba su propia regla
   de alto; con 44 marcas eso no escala, y la caja comun deja la fila pareja. */

.marquee-track img[src*="first-glove"]{ max-width:170px; }

@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-50% - var(--marquee-gap) / 2)); }
}
@media (max-width:860px){ .marquee-wrap{ --marquee-gap:32px; } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation:none; flex-wrap:wrap; width:auto; justify-content:center; }
  .marquee-viewport{ -webkit-mask-image:none; mask-image:none; }
}

.promo-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; margin-top:28px; }
.promo-card{
  border:1.5px dashed var(--gold); border-radius:10px; padding:20px; background:var(--white);
}
.promo-card-code{
  font-family:'Oswald', sans-serif; font-size:1.15rem; font-weight:700; letter-spacing:1px;
  color:var(--navy); background:var(--bg); display:inline-block; padding:4px 10px; border-radius:5px; margin-bottom:10px;
}
.promo-card-amount{ font-size:1rem; font-weight:700; color:var(--gold); margin-bottom:6px; }
.promo-card-expires{ font-size:0.78rem; color:var(--text-muted); }

/* FAQ */
.faq-cat-title{ font-size:1.3rem; color:var(--navy); margin:44px 0 18px; text-transform:none; letter-spacing:0; }
.faq-cat-title:first-of-type{ margin-top:0; }
.faq-item{ border-bottom:1px solid var(--border); padding:20px 0; }
.faq-item:first-of-type{ border-top:1px solid var(--border); }
.faq-q{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  cursor:pointer; font-weight:600; color:var(--navy); font-size:1rem; user-select:none;
}
.faq-q .faq-plus{
  flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(12,31,58,0.06);
  display:flex; align-items:center; justify-content:center; position:relative; transition:transform 0.25s ease, background 0.25s ease;
}
.faq-q .faq-plus::before, .faq-q .faq-plus::after{
  content:''; position:absolute; background:var(--navy); transition:transform 0.25s ease;
}
.faq-q .faq-plus::before{ width:10px; height:2px; }
.faq-q .faq-plus::after{ width:2px; height:10px; }
.faq-item.open .faq-q .faq-plus{ background:#1d5fd6; transform:rotate(180deg); }
.faq-item.open .faq-q .faq-plus::before, .faq-item.open .faq-q .faq-plus::after{ background:var(--white); }
.faq-item.open .faq-q .faq-plus::after{ transform:scaleY(0); }
.faq-a{
  max-height:0; overflow:hidden; transition:max-height 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
  opacity:0; color:var(--text-muted); font-size:0.94rem; line-height:1.65; margin-top:0;
}
.faq-item.open .faq-a{ max-height:300px; opacity:1; margin-top:12px; }

/* WHATSAPP FLOAT */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.25); transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover{ transform:scale(1.08); box-shadow:0 8px 22px rgba(0,0,0,0.32); }
.whatsapp-float svg{ width:28px; height:28px; }
@media (max-width:860px){ .whatsapp-float{ right:16px; bottom:16px; width:50px; height:50px; } .whatsapp-float svg{ width:25px; height:25px; } }

/* PORTAL: login/register */
.auth-wrap{ max-width:460px; margin:0 auto; }
.auth-tabs{ display:flex; gap:4px; background:var(--bg); border-radius:10px; padding:4px; margin-bottom:28px; }
.auth-tab{
  flex:1; text-align:center; padding:10px; border-radius:7px; font-weight:600; font-size:0.92rem;
  cursor:pointer; color:var(--text-muted); transition:all 0.2s ease; background:none; border:none; font-family:'Inter',sans-serif;
}
.auth-tab.active{ background:var(--white); color:var(--navy); box-shadow:0 2px 6px rgba(12,31,58,0.1); }
.auth-panel{ display:none; }
.auth-panel.active{ display:block; }
.auth-error{ background:rgba(212,175,55,0.08); border:1px solid rgba(212,175,55,0.3); color:var(--gold-dark); padding:10px 14px; border-radius:8px; font-size:0.87rem; margin-bottom:16px; display:none; }
.auth-error.show{ display:block; }
.demo-note{
  background:rgba(212,175,55,0.06); border:1px dashed rgba(212,175,55,0.35); border-radius:10px;
  padding:14px 16px; font-size:0.85rem; color:var(--text-muted); margin-bottom:26px; line-height:1.55;
}
.demo-note strong{ color:var(--gold-dark); }
.auth-register-note{ font-size:0.87rem; color:var(--text-muted); margin-bottom:18px; line-height:1.55; }

/* PORTAL: catalog */
.portal-topbar{
  display:flex; align-items:center; justify-content:space-between; padding:16px 0; border-bottom:1px solid var(--border); margin-bottom:32px;
}
.portal-user{ font-size:0.9rem; color:var(--text-muted); }
.portal-user strong{ color:var(--navy); }
.cart-btn{
  position:relative; display:inline-flex; align-items:center; gap:8px;
  background:var(--navy); color:var(--white); padding:10px 18px; border-radius:8px; font-weight:600; font-size:0.9rem; cursor:pointer; border:none;
}
.cart-badge{
  position:absolute; top:-7px; right:-7px; background:var(--gold); color:var(--white);
  font-size:0.7rem; font-weight:700; width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.catalog-search{ position:relative; margin-bottom:18px; }
.catalog-search svg{
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--text-muted); pointer-events:none;
}
.catalog-search input{
  width:100%; padding:12px 16px 12px 42px; border:1.5px solid var(--border); border-radius:9px;
  font-family:'Inter',sans-serif; font-size:0.92rem; background:var(--white);
}
.catalog-search input:focus{ outline:none; border-color:var(--navy); }
.product-part{ font-size:0.72rem; color:var(--text-muted); margin-top:3px; }
.product-no-results{ padding:40px 20px; text-align:center; color:var(--text-muted); background:var(--white); border:1px solid var(--border); border-radius:10px; }
.category-filters{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px; }
.category-filter{
  padding:8px 16px; border-radius:20px; border:1.5px solid var(--border); background:var(--white);
  font-size:0.85rem; font-weight:600; color:var(--text-muted); cursor:pointer; transition:all 0.2s ease;
}
.category-filter.active{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.product-list{ display:flex; flex-direction:column; gap:12px; }
.product-row{
  display:flex; align-items:center; gap:20px; background:var(--white);
  border:1px solid var(--border); border-radius:10px; padding:16px 20px;
  transition:box-shadow 0.2s ease, border-color 0.2s ease;
}
.product-row:hover{ border-color:rgba(12,31,58,0.18); box-shadow:0 4px 14px rgba(12,31,58,0.06); }
.product-photo{
  width:64px; height:64px; border-radius:8px; background:var(--bg); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:var(--text-muted);
  border:1px dashed var(--border);
}
.product-photo svg{ width:26px; height:26px; }
.product-row-info{ flex:1; min-width:0; }
.product-brand{ font-size:0.72rem; font-weight:700; color:var(--gold); letter-spacing:0.5px; text-transform:uppercase; margin-bottom:4px; }
.product-name{ font-size:0.96rem; font-weight:600; color:var(--navy); margin-bottom:3px; line-height:1.3; }
.product-cat{ font-size:0.78rem; color:var(--text-muted); }
.product-row-price{ text-align:right; flex-shrink:0; width:120px; }
.product-price{ font-family:'Oswald',sans-serif; font-size:1.2rem; color:var(--navy); font-weight:700; }
.product-price small{ font-family:'Inter',sans-serif; font-size:0.7rem; color:var(--text-muted); font-weight:500; text-transform:none; display:block; }
.qty-row{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
@media (max-width:640px){
  .product-row{ flex-wrap:wrap; }
  .product-row-price{ text-align:left; width:auto; }
  .qty-row{ margin-left:auto; }
}
.qty-btn{
  width:30px; height:30px; border-radius:6px; border:1px solid var(--border); background:var(--bg);
  font-size:1rem; font-weight:700; cursor:pointer; color:var(--navy);
}
.qty-input{ width:44px; text-align:center; border:1px solid var(--border); border-radius:6px; padding:5px; font-size:0.9rem; font-family:'Inter',sans-serif; }

/* CART DRAWER */
.cart-overlay{ position:fixed; inset:0; background:rgba(12,31,58,0.45); z-index:150; opacity:0; pointer-events:none; transition:opacity 0.25s ease; }
.cart-overlay.open{ opacity:1; pointer-events:auto; }
.cart-drawer{
  position:fixed; top:0; right:0; bottom:0; width:400px; max-width:92vw; background:var(--white); z-index:151;
  transform:translateX(100%); transition:transform 0.3s ease; display:flex; flex-direction:column; box-shadow:-8px 0 30px rgba(0,0,0,0.15);
}
.cart-drawer.open{ transform:translateX(0); }
.cart-drawer-header{ padding:22px 24px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.cart-drawer-header h3{ font-size:1.1rem; color:var(--navy); text-transform:none; letter-spacing:0; }
.cart-close{ background:none; border:none; font-size:1.4rem; cursor:pointer; color:var(--text-muted); line-height:1; }
.cart-drawer-body{ flex:1; overflow-y:auto; padding:16px 24px; }
.cart-line{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:14px 0; border-bottom:1px solid var(--border); }
.cart-line-name{ font-size:0.88rem; font-weight:600; color:var(--navy); }
.cart-line-meta{ font-size:0.78rem; color:var(--text-muted); margin-top:3px; }
.cart-line-controls{ display:flex; align-items:center; gap:6px; margin-top:8px; }
.cart-line-controls .qty-btn{ width:24px; height:24px; font-size:0.85rem; }
.cart-line-controls .qty-num{ font-size:0.85rem; font-weight:600; color:var(--navy); min-width:18px; text-align:center; }
.cart-line-remove{
  background:none; border:none; cursor:pointer; color:var(--text-muted); padding:4px;
  transition:color 0.2s ease; flex-shrink:0;
}
.cart-line-remove:hover{ color:var(--gold); }
.cart-line-remove svg{ width:16px; height:16px; }
.cart-line-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.cart-line-total{ font-weight:700; color:var(--navy); font-size:0.9rem; white-space:nowrap; }

/* Order success panel (replaces a blocking alert) */
.order-success{
  display:none; background:rgba(37,211,102,0.08); border:1px solid rgba(37,211,102,0.35);
  border-radius:10px; padding:18px 20px; margin-bottom:24px;
}
.order-success.show{ display:block; }
.order-success strong{ color:#178a49; }
.order-success p{ color:var(--text-muted); font-size:0.88rem; margin-top:4px; }

/* Order history */
.orders-panel{ display:none; margin-bottom:28px; }
.orders-panel.show{ display:block; }
.order-card{ background:var(--white); border:1px solid var(--border); border-radius:10px; padding:18px 20px; margin-bottom:12px; }
.order-card-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.order-card-num{ font-weight:700; color:var(--navy); font-size:0.92rem; }
.order-card-date{ font-size:0.78rem; color:var(--text-muted); }
.order-card-items{ font-size:0.82rem; color:var(--text-muted); line-height:1.6; }
.order-card-total{ font-weight:700; color:var(--navy); margin-top:8px; text-align:right; }
.orders-empty{ color:var(--text-muted); font-size:0.9rem; }
.cart-empty{ text-align:center; color:var(--text-muted); padding:60px 20px; font-size:0.92rem; }
.cart-drawer-footer{ padding:20px 24px; border-top:1px solid var(--border); }
.cart-subtotal-row{ display:flex; justify-content:space-between; font-size:0.87rem; color:var(--text-muted); margin-bottom:6px; }
.cart-total-row{ display:flex; justify-content:space-between; font-size:1.1rem; font-weight:700; color:var(--navy); margin:10px 0 16px; padding-top:10px; border-top:1px solid var(--border); }

/* ADMIN */
.admin-gate{ max-width:380px; margin:0 auto; text-align:center; }
.admin-gate .form-group{ text-align:left; }
/* ADMIN NAVIGATION — a left sidebar with the sections grouped under headings.
   Replaced a single horizontal strip of 12 tabs that wrapped onto two crowded
   rows: the groups say what each block is for, the active row shows where you
   are, and adding a section later just drops into its group. On a phone the
   column collapses behind a hamburger. */
.admin-layout{ display:grid; grid-template-columns:224px minmax(0, 1fr); gap:28px; align-items:start; }
/* El menu tiene su PROPIO scroll, independiente del contenido de la derecha
   (pedido del usuario, 29-ago-2026). Con 5 grupos la columna ya no cabe entera
   en una pantalla de portatil: sin esto habia que desplazar toda la pagina para
   llegar a Seguridad, y al hacerlo el contenido se iba de la vista.

   🔴 Aqui habia un `overscroll-behavior:contain` y SE QUITO el 29-ago-2026. Lo
   pusimos para que al llegar al final del menu el gesto no arrastrara la pagina
   de atras, pero el remedio salio peor: con el puntero encima del menu, y el
   menu ya en su tope, la rueda dejaba de mover la pagina y el scroll se sentia
   trabado ("chocan y no te dejan bajar mas hasta que no bajes el otro", palabras
   del usuario sobre su video).

   Leccion: encadenar el scroll con la pagina es lo que la gente espera de
   cualquier sitio. Cortar ese encadenamiento hace que la rueda parezca rota.
   Se deja en su valor por defecto (`auto`). */
/* 🔴 El `max-height` y el `padding-bottom` de aqui abajo NO son decorativos: le
   hacen sitio al sello «Powered by iVot» (29-ago-2026). El sello es
   `position:fixed` abajo a la izquierda, justo donde cae el pie de este menu:
   medido, tapaba los ultimos 20 px del boton «Reports», y `elementFromPoint`
   sobre el centro de ese boton devolvia el sello — o sea que la ultima opcion
   del menu NO se podia pulsar.

   La cuenta: el sello ocupa 14 px de separacion + 29 px de alto = 43 px desde el
   pie de la pantalla. Reservandole 56 px, el menu pegado termina en
   `100vh - 56px` y su ultimo boton queda por encima del sello con aire de sobra.

   ⚠️ Primero se probo solo con `padding-bottom` y NO alcanzo: mientras el menu
   todavia se desliza (aun no esta pegado) su pie cae por debajo de la pantalla,
   asi que el relleno de dentro no lo salva. Lo que lo resuelve es acotar la
   ALTURA contra la ventana. Se eligio esto — y no quitarle el `fixed` al sello —
   porque el sello es parte del acuerdo con el cliente y tiene que verse siempre,
   este donde este el scroll; mandarlo al pie del contenido lo escondia en cuanto
   la pagina se hacia larga. */
.admin-side{
  position:sticky; top:92px;
  max-height:calc(100vh - 148px);
  overflow-y:auto;
  padding-right:4px;
  padding-bottom:16px;
  /* El menu por ENCIMA del sello (80), pero por debajo del boton de reportar
     (90) y de la barra de arriba (100). Con la altura acotada, en la posicion de
     reposo — el menu ya pegado, que es donde se usa — los dos ni se rozan. Pero
     mientras la pagina todavia se desliza, el menu baja con ella y su pie cruza
     la franja del sello: sin esta linea, ahi el clic se lo quedaba el sello y la
     ultima opcion no respondia. Medido con `document.elementFromPoint()` en
     todas las posiciones de scroll, de 20 en 20 px. */
  z-index:85;
}
.admin-side::-webkit-scrollbar{ width:8px; }
.admin-side::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
.admin-side::-webkit-scrollbar-track{ background:transparent; }

/* Tablas de registro (Reportes, Registro de Accesos, Historial de Precios): son
   las que crecen sin freno, asi que se desplazan por dentro y el encabezado se
   queda fijo arriba. Las demas tablas del panel no llevan esto a proposito.
   Aqui tambien se quito el `overscroll-behavior:contain` (misma razon que en
   `.admin-side`, arriba): con el puntero sobre la tabla y la tabla en su tope,
   la rueda dejaba de mover la pagina. El scroll encadena con la pagina, como
   en cualquier sitio normal. */
.admin-table-scroll{ max-height:min(62vh, 620px); overflow-y:auto; }
.admin-table-scroll thead th{ position:sticky; top:0; z-index:2; }
.admin-table-scroll::-webkit-scrollbar{ width:9px; }
.admin-table-scroll::-webkit-scrollbar-thumb{ background:var(--border); border-radius:8px; }
.admin-table-scroll::-webkit-scrollbar-track{ background:transparent; }
.admin-side-group{ margin-bottom:20px; }
.admin-side-group:last-child{ margin-bottom:0; }
.admin-side-title{
  font-family:'Oswald',sans-serif; font-size:0.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:1.1px; color:var(--text-muted);
  padding:0 10px; margin-bottom:6px;
}
.admin-tabs{ display:flex; flex-direction:column; gap:2px; }
.admin-tab{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  width:100%; text-align:left; padding:9px 11px; border-radius:7px;
  font-weight:600; font-size:0.86rem; line-height:1.3;
  cursor:pointer; color:var(--text-muted); background:none; border:none;
  border-left:3px solid transparent; font-family:'Inter',sans-serif;
  transition:background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.admin-tab:hover{ background:var(--bg); color:var(--navy); }
.admin-tab.active{
  background:var(--white); color:var(--navy);
  border-left-color:var(--gold); box-shadow:0 2px 6px rgba(12,31,58,0.1);
}
/* Filtros de la sección de Reportes (Errores / Seguridad / Actividad).
   Tienen clase PROPIA y NO .admin-tab a propósito: el gestor de navegación del
   panel recorre todos los .admin-tab creyendo que son secciones de la barra
   lateral, así que al usarlos como filtros internos los escondía. Bug real,
   encontrado probando la pantalla en un navegador el 28-ago-2026. */
.rep-filter{
  display:inline-flex; align-items:center; gap:6px;
  text-align:center; padding:8px 16px; border-radius:7px;
  font-weight:600; font-size:0.86rem; line-height:1.3;
  cursor:pointer; color:var(--text-muted); background:none;
  border:1px solid var(--border); font-family:'Inter',sans-serif;
  transition:background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.rep-filter:hover{ background:var(--bg); color:var(--navy); }
.rep-filter.active{
  background:var(--white); color:var(--navy);
  border-color:var(--gold); box-shadow:0 2px 6px rgba(12,31,58,0.1);
}

.admin-panel{ display:none; }
.admin-panel.active{ display:block; }

/* Hamburger + slide-in for phones/tablets. Hidden on desktop, where the column
   is always visible and never costs a click. */
.admin-side-toggle{
  display:none; align-items:center; gap:9px; width:100%;
  padding:12px 14px; margin-bottom:18px; border-radius:9px; cursor:pointer;
  background:var(--white); border:1.5px solid var(--border);
  color:var(--navy); font-family:'Inter',sans-serif; font-weight:600; font-size:0.9rem;
}
.admin-side-toggle svg{ width:19px; height:19px; flex-shrink:0; }
.admin-side-toggle .admin-side-toggle-count{
  margin-left:auto; background:#c42a2a; color:#fff; border-radius:10px;
  padding:1px 8px; font-size:0.72rem; font-weight:700;
}
.admin-side-backdrop{
  display:none; position:fixed; inset:0; z-index:150;
  background:rgba(12,31,58,0.45);
}
.admin-side-backdrop.show{ display:block; }

@media (max-width:900px){
  .admin-layout{ grid-template-columns:minmax(0, 1fr); gap:0; }
  .admin-side-toggle{ display:flex; }
  .admin-side{
    position:fixed; top:0; left:0; bottom:0; z-index:160; width:min(280px, 84vw);
    /* El relleno de abajo es 52 y no 22 por el sello de iVot: en el telefono se
       queda a 10 px del pie y mide 27 de alto, asi que sin este hueco la ultima
       opcion del menu abierto le queda por debajo. Aqui el menu ya gana en capas
       (160 contra 80), o sea que pulsar se podia; era el estorbo visual. */
    background:var(--white); padding:22px 16px 52px; overflow-y:auto; max-height:none;
    box-shadow:4px 0 24px rgba(12,31,58,0.18);
    /* visibility (not just the transform) so a closed menu is genuinely gone:
       slid off-screen alone, its buttons stay reachable by Tab and readable by
       screen readers, which means keyboard focus can vanish into a menu nobody
       can see. The delay keeps the slide-out animation visible on the way out. */
    transform:translateX(-102%); visibility:hidden;
    transition:transform 0.25s ease, visibility 0s linear 0.25s;
  }
  .admin-side.open{
    transform:translateX(0); visibility:visible;
    transition:transform 0.25s ease, visibility 0s;
  }
  .admin-side-close{
    display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; margin-left:auto; margin-bottom:14px;
    border-radius:8px; border:1.5px solid var(--border); background:none;
    color:var(--navy); cursor:pointer; font-size:1.15rem; line-height:1;
  }
}
@media (min-width:901px){ .admin-side-close{ display:none; } }
@media (prefers-reduced-motion:reduce){ .admin-side{ transition:none; } }

/* "Powered by iVot" — internal panels only (Admin, Salesperson). Deliberately
   quiet: muted grey, small, no brand color of its own, so it never competes with
   the client's own branding. It's a maker's credit for whoever asks, not an ad. */
/* Crédito de marca de iVot: insignia chica y fija en la esquina inferior
   izquierda (la derecha ya la ocupan el carrito y la campana). Se ve en todo
   momento sin robarle una franja entera al panel, y en tono apagado para no
   competir con la marca del cliente. Solo en los portales internos y del
   cliente, nunca en la web pública. */
.ivot-badge{
  position:fixed; left:14px; bottom:14px; z-index:80;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 11px; border-radius:20px;
  background:rgba(255,255,255,0.92); border:1px solid var(--border);
  box-shadow:0 2px 10px rgba(12,31,58,0.10);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  text-decoration:none; opacity:0.72;
  transition:opacity 0.2s ease, box-shadow 0.2s ease;
}
.ivot-badge:hover{ opacity:1; box-shadow:0 4px 16px rgba(12,31,58,0.16); }
.ivot-badge img{ height:15px; width:auto; display:block; }
.ivot-badge span{ font-size:0.68rem; color:var(--text-muted); letter-spacing:0.2px; white-space:nowrap; }
@media (max-width:600px){
  /* En celular queda solo el logo: el texto no aporta y ahí el espacio vale más. */
  .ivot-badge{ left:10px; bottom:10px; padding:6px 9px; }
  .ivot-badge span{ display:none; }
}

/* CONTEXTUAL "?" HELP (one per section, click to open — never hover, the
   staff may be on a touch tablet in the warehouse) */
.admin-panel-head{ display:flex; align-items:center; gap:9px; margin-bottom:18px; flex-wrap:wrap; }
.admin-panel-title{
  font-family:'Oswald',sans-serif; font-size:1.25rem; font-weight:600; color:var(--navy);
  margin:0; text-transform:none; letter-spacing:0; line-height:1.2;
}
.help-btn{
  width:24px; height:24px; flex-shrink:0; padding:0; border-radius:50%;
  border:1.5px solid var(--gold); background:none; color:var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background 0.18s ease, color 0.18s ease;
}
.help-btn svg{ width:16px; height:16px; display:block; }
.help-btn:hover, .help-btn.active{ background:var(--gold); color:var(--white); }
.help-pop{
  position:fixed; z-index:400; display:none; width:max-content;
  max-width:300px; max-width:min(300px, calc(100vw - 24px));
  background:var(--white); border:1px solid var(--border); border-top:3px solid var(--gold);
  border-radius:10px; box-shadow:0 14px 34px rgba(12,31,58,0.2);
  padding:14px 16px; font-size:0.85rem; line-height:1.55; color:var(--navy);
}
.help-pop.show{ display:block; }

/* ORDER STATUS FILTER (Orders tab) — pill row, same visual language as the
   sales-report period buttons already above the table. */
.status-filter{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.status-filter-label{ font-size:0.82rem; font-weight:600; color:var(--text-muted); margin-right:2px; }
.status-pill{
  padding:6px 13px; border-radius:20px; border:1.5px solid var(--border);
  background:var(--white); color:var(--navy); font-family:'Inter',sans-serif;
  font-size:0.8rem; font-weight:500; cursor:pointer; white-space:nowrap;
  transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.status-pill:hover{ border-color:var(--gold); }
.status-pill.active{ background:var(--navy); border-color:var(--navy); color:var(--white); font-weight:600; }
.status-pill-count{ opacity:0.65; margin-left:5px; font-size:0.74rem; }

/* LOW STOCK (Products tab) */
.stock-badge{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:4px;
  font-size:0.64rem; font-weight:700; letter-spacing:0.4px; vertical-align:middle;
}
.stock-badge.low{ background:rgba(212,175,55,0.18); color:#8a6b0f; }
.stock-badge.out{ background:rgba(196,42,42,0.12); color:#b32020; }
tr.row-low-stock{ background:rgba(212,175,55,0.06); }
tr.row-out-stock{ background:rgba(196,42,42,0.05); }
.low-stock-note{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  background:rgba(212,175,55,0.1); border:1px solid rgba(212,175,55,0.4);
  border-left:3px solid var(--gold); border-radius:8px;
  padding:10px 14px; margin-bottom:16px; font-size:0.85rem; color:var(--navy);
}
.low-stock-inline{ display:flex; align-items:center; gap:7px; font-size:0.82rem; color:var(--text-muted); }
.low-stock-inline input[type="number"]{
  width:70px; padding:7px 9px; border:1.5px solid var(--border); border-radius:7px;
  font-family:'Inter',sans-serif; font-size:0.85rem;
}
.low-stock-inline label{ display:flex; align-items:center; gap:5px; cursor:pointer; white-space:nowrap; }

/* NOTIFICATION BELL (Admin top bar) */
.notif-wrap{ position:relative; display:inline-flex; }
.notif-btn{
  position:relative; width:38px; height:38px; padding:0; border-radius:8px;
  border:1.5px solid var(--border); background:var(--white); color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color 0.18s ease, background 0.18s ease;
}
.notif-btn:hover, .notif-btn.active{ border-color:var(--gold); background:rgba(212,175,55,0.08); }
.notif-btn svg{ width:19px; height:19px; display:block; }
.notif-btn.ringing svg{ animation:notif-shake 0.6s ease; transform-origin:top center; }
@keyframes notif-shake{
  0%,100%{ transform:rotate(0deg); }
  15%{ transform:rotate(13deg); } 30%{ transform:rotate(-11deg); }
  45%{ transform:rotate(9deg); }  60%{ transform:rotate(-7deg); }
  75%{ transform:rotate(4deg); }
}
.notif-count{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:#c42a2a; color:#fff;
  font-size:0.66rem; font-weight:700; line-height:18px; text-align:center;
  box-shadow:0 0 0 2px var(--white);
}
.notif-pop{
  position:absolute; top:calc(100% + 9px); right:0; z-index:420; display:none;
  width:max-content; min-width:260px; max-width:min(320px, calc(100vw - 24px));
  background:var(--white); border:1px solid var(--border); border-top:3px solid var(--gold);
  border-radius:10px; box-shadow:0 14px 34px rgba(12,31,58,0.2); overflow:hidden;
  text-align:left;
}
.notif-pop.show{ display:block; }
.notif-pop-head{
  padding:11px 15px; border-bottom:1px solid var(--border);
  font-family:'Oswald',sans-serif; font-size:0.82rem; font-weight:600;
  color:var(--navy); text-transform:uppercase; letter-spacing:0.6px;
}
.notif-item{
  display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
  padding:11px 15px; border:none; border-bottom:1px solid var(--border);
  background:none; font-family:'Inter',sans-serif; font-size:0.85rem;
  color:var(--navy); text-align:left; cursor:pointer; transition:background 0.15s ease;
}
.notif-item:hover{ background:rgba(212,175,55,0.09); }
.notif-item-count{
  flex-shrink:0; min-width:20px; padding:1px 7px; border-radius:10px;
  background:var(--gold); color:#fff; font-size:0.72rem; font-weight:700; text-align:center;
}
.notif-empty{ padding:16px 15px; font-size:0.85rem; color:var(--text-muted); }
.notif-sound-row{
  display:flex; align-items:center; gap:7px; padding:10px 15px;
  background:var(--bg); font-size:0.8rem; color:var(--text-muted); cursor:pointer;
}
.notif-sound-row input{ cursor:pointer; }
/* On a phone the popover spans the screen, but it must start BELOW the fixed
   navbar — with top:auto a fixed element falls back to its static position and
   ends up covering the bell itself, so tapping the bell again hits the popover
   (which swallows the click) and there's no way to close it. */
@media (max-width:600px){
  .notif-pop{ position:fixed; top:72px; right:12px; left:12px; width:auto; max-width:none; }
}

.admin-stats{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:16px; margin-bottom:28px; }
.admin-stat{ background:var(--white); border:1px solid var(--border); border-radius:10px; padding:18px 20px; }
.admin-stat-num{ font-family:'Oswald',sans-serif; font-size:1.7rem; font-weight:700; color:var(--navy); }
.admin-stat-label{ font-size:0.78rem; color:var(--text-muted); margin-top:2px; }

.admin-toolbar{ display:flex; gap:12px; margin-bottom:20px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.admin-search{ flex:1; min-width:220px; padding:10px 14px; border:1.5px solid var(--border); border-radius:8px; font-family:'Inter',sans-serif; font-size:0.9rem; }
.admin-search-wrap{ position:relative; flex:1; min-width:220px; }
.admin-search-wrap svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-muted); pointer-events:none; }
.admin-search-wrap .admin-search{ width:100%; padding-left:38px; }
select.admin-search{ cursor:pointer; }

.admin-table-wrap{ background:var(--white); border:1px solid var(--border); border-radius:10px; overflow-x:auto; }
.admin-table{ width:100%; border-collapse:collapse; font-size:0.85rem; table-layout:auto; }
.admin-table th{
  text-align:left; padding:10px 12px; background:var(--bg); color:var(--text-muted);
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.5px; font-weight:700; white-space:nowrap;
}
.admin-table td{ padding:10px 12px; border-top:1px solid var(--border); vertical-align:middle; white-space:normal; word-break:break-word; }
.admin-table tr:hover td{ background:rgba(12,31,58,0.02); }
.admin-table-empty{ padding:40px 20px; text-align:center; color:var(--text-muted); }
/* Row actions. These were underlined text links, which (a) got broken one letter
   per line whenever the table was squeezed and (b) read as body text rather than
   something you click. Now they're small outlined chips — same navy/gold brand
   colors and same table rhythm, just legible as controls.
   white-space:nowrap on both the button and the last cell is load-bearing: it's
   what stops the browser from shattering "Delete" into a vertical column. */
.admin-link-btn{
  display:inline-block; background:none; cursor:pointer; white-space:nowrap;
  border:1.5px solid var(--border); border-radius:6px;
  color:var(--navy); font-family:'Inter',sans-serif; font-weight:600; font-size:0.78rem;
  padding:5px 11px; margin:2px 6px 2px 0; text-decoration:none;
  transition:background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.admin-link-btn:hover{ background:var(--navy); border-color:var(--navy); color:var(--white); }
.admin-link-btn.danger{ color:var(--gold); border-color:rgba(212,175,55,0.55); }
.admin-link-btn.danger:hover{ background:var(--gold); border-color:var(--gold); color:var(--white); }
.admin-link-btn:last-child{ margin-right:0; }
.admin-table td:last-child{ white-space:nowrap; }

.admin-modal-overlay{ position:fixed; inset:0; background:rgba(12,31,58,0.5); z-index:200; display:none; align-items:center; justify-content:center; padding:20px; }
.admin-modal-overlay.show{ display:flex; }
.admin-modal{ background:var(--white); border-radius:14px; padding:28px; width:100%; max-width:480px; max-height:88vh; overflow-y:auto; }
.admin-modal h3{ font-size:1.1rem; color:var(--navy); text-transform:none; letter-spacing:0; margin-bottom:20px; }
.admin-modal-actions{ display:flex; gap:10px; margin-top:20px; }
.admin-modal-actions .btn{ flex:1; }

.tier-row{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; align-items:end; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--border); }
.tier-row label{ display:block; font-size:0.78rem; font-weight:600; color:var(--text-muted); margin-bottom:6px; }
.tier-row input{ width:100%; padding:9px 12px; border:1.5px solid var(--border); border-radius:7px; font-family:'Inter',sans-serif; font-size:0.88rem; }

/* PRODUCT DETAIL MODAL */
.product-row{ cursor:pointer; }
.pd-modal{ max-width:640px; }
.pd-modal-body{ display:grid; grid-template-columns:220px 1fr; gap:28px; }
.pd-photo{
  width:100%; aspect-ratio:1/1; border-radius:12px; background:var(--bg); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--text-muted);
}
.pd-photo img{ width:100%; height:100%; object-fit:contain; }
.pd-photo svg{ width:56px; height:56px; }
.pd-brand{ font-size:0.78rem; font-weight:700; color:var(--gold); letter-spacing:0.5px; text-transform:uppercase; margin-bottom:6px; }
.pd-name{ font-size:1.25rem; font-weight:700; color:var(--navy); margin-bottom:6px; line-height:1.25; }
.pd-cat{ font-size:0.82rem; color:var(--text-muted); margin-bottom:14px; }
.pd-desc{ font-size:0.9rem; color:var(--text); line-height:1.6; margin-bottom:18px; }
.pd-price{ font-family:'Oswald',sans-serif; font-size:1.6rem; color:var(--navy); font-weight:700; margin-bottom:16px; }
.pd-price small{ font-family:'Inter',sans-serif; font-size:0.75rem; color:var(--text-muted); font-weight:500; text-transform:none; }
.pd-qty-row{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pd-qty-row .qty-btn{ width:38px; height:38px; font-size:1.1rem; }
.pd-qty-row .qty-input{ width:60px; padding:9px; font-size:1rem; }
@media (max-width:560px){ .pd-modal-body{ grid-template-columns:1fr; } .pd-photo{ max-width:200px; margin:0 auto; } }

@media (max-width: 860px){
  .navbar-links{ display:none; }
  /* Los botones de la derecha (idioma, Client Login, Request Access) tambien se
     ocultan en celular: ya estan dentro del menu desplegable. Si se dejan, la
     fila del encabezado se hace mas ancha que la pantalla y empuja el icono del
     menu fuera de vista — en un telefono no habia forma de abrirlo. */
  .navbar-actions{ display:none; }
  .navbar-mobile-toggle{ display:block; }
  .hero-title, .page-banner-title{ font-size:2.1rem; }
  .hero-subtitle{ font-size:1rem; }
  .hero-stats{ flex-wrap:wrap; gap:20px; }
  .hero-stat{ flex:1 1 40%; padding-right:0; }
  .split{ grid-template-columns:1fr; gap:32px; }
  /* minmax(0,1fr) y no 1fr: el widget de Turnstile mide 300px fijos, y con
     `1fr` la columna crecia al minimo del contenido (374px) y sacaba la
     tarjeta del formulario 32px fuera de la pantalla en telefono. */
  .contact-grid{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .contact-form{ padding:26px 18px; }
  .form-row{ grid-template-columns:1fr; }
  .cta-banner{ flex-direction:column; align-items:flex-start; padding:36px 28px; }
  .hero-bg::after{
    background:linear-gradient(180deg, rgba(9,20,38,0.88) 0%, rgba(12,31,58,0.6) 38%, rgba(12,31,58,0.22) 70%, rgba(12,31,58,0.3) 100%);
  }
}

/* Accesos de demostración en la pantalla de entrada del staff. Provisional:
   se borra cuando el administrador tenga sus cuentas reales. */
.gate-roles{ display:grid; gap:10px; margin-top:12px; }
.gate-role{
  background:var(--white); border:1px solid var(--border); border-left:3px solid var(--gold);
  border-radius:8px; padding:10px 12px;
}
.gate-role-name{ font-weight:700; font-size:0.85rem; color:var(--navy); }
.gate-role code{
  display:inline-block; background:var(--bg); border-radius:5px;
  padding:3px 8px; font-size:0.78rem; color:var(--navy); word-break:break-all;
}

/* ---------------------------------------------------------------------------
   Menú de teléfono de los portales (ver portal-nav.js).
   Las filas se generan clonando los botones reales de la barra de arriba, así
   que el estilo tiene que servir para cualquier acción, no para una lista fija.
   --------------------------------------------------------------------------- */
.portal-nav-group{ display:flex; flex-direction:column; margin-top:10px; }
/* La ultima fila de cada grupo no lleva raya: la separacion ya la da el titulo
   del grupo siguiente. Sin esto quedaban dos rayas seguidas. */
.portal-nav-group .portal-nav-row:last-child{ border-bottom:none; }
.portal-nav-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,0.85); font-family:'Inter',sans-serif;
  font-size:1.05rem; font-weight:500;
  padding:14px 4px; border-bottom:1px solid rgba(255,255,255,0.08);
}
.portal-nav-row:active{ color:#fff; }
.portal-nav-row-group{ justify-content:flex-start; padding:12px 4px; }
.portal-nav-row-group .lang-toggle{ margin:0; }
/* Las notificaciones se muestran como el propio botón de campana con su número. */
.portal-nav-row-group .notif-wrap{ position:static; }
.portal-nav-row-group .notif-pop{ display:none !important; }
.portal-nav-badge{
  background:var(--gold); color:var(--navy); font-weight:700; font-size:0.8rem;
  min-width:22px; height:22px; border-radius:11px; display:inline-flex;
  align-items:center; justify-content:center; padding:0 7px;
}
.portal-nav-back{
  margin-top:18px; color:var(--gold) !important; font-weight:600;
  border-bottom:none !important;
}
/* Botón único cuando la persona todavía no entró al portal. */
.portal-nav-solo{ margin-left:auto; font-size:0.8rem; padding:8px 14px; }
@media (min-width:861px){ .portal-nav-solo{ display:none; } }
.portal-nav-title{
  color:var(--gold); font-family:'Oswald',sans-serif; text-transform:uppercase;
  letter-spacing:0.12em; font-size:0.7rem; font-weight:600;
  margin:6px 0 2px; padding:0 4px;
}

/* ---------------------------------------------------------------------------
   Tablas de los paneles en telefono: cada fila pasa a ser una tarjeta con el
   nombre de la columna delante del dato (ver tabla-movil.js). Sin esto, con 5-7
   columnas el navegador parte las palabras letra por letra y no se lee nada.
   --------------------------------------------------------------------------- */
@media (max-width:700px){
  .admin-table-wrap{ background:none; border:none; border-radius:0; overflow-x:visible; }
  .admin-table-scroll{ max-height:none; overflow-y:visible; }
  .admin-table{ display:block; width:100%; }
  .admin-table thead{ display:none; }
  .admin-table tbody{ display:block; }
  .admin-table tbody tr{
    display:block; background:var(--white); border:1px solid var(--border);
    border-radius:10px; padding:6px 14px; margin-bottom:10px;
  }
  .admin-table tbody tr:hover td{ background:none; }
  .admin-table td{
    display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
    padding:9px 0; border-top:none; border-bottom:1px solid var(--border);
    white-space:normal; word-break:break-word; text-align:right;
  }
  .admin-table td:last-child{ border-bottom:none; }
  .admin-table td[data-col]::before{
    content:attr(data-col);
    flex:0 0 40%; text-align:left;
    color:var(--text-muted); font-size:0.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.5px; line-height:1.5;
  }
  /* La columna de acciones no tiene titulo: sus botones ocupan la fila entera. */
  .admin-table td[data-col-vacia]{ justify-content:stretch; padding-top:12px; }
  .admin-table td[data-col-vacia] .btn{ width:100%; }
  .admin-table td[data-col-vacia] > *{ flex:1; }
  .admin-table .admin-table-empty{ display:block; text-align:center; }
  /* Celdas con botones de accion (Ver / Cargar pedido / Cerrar sesion / Borrar).
     Sin esto los 3 botones se salian de la tarjeta en telefono y el ultimo
     quedaba fuera de la pantalla, imposible de tocar: en este modo la tabla no
     tiene desplazamiento lateral. El `flex-wrap` es la red de seguridad para
     cualquier navegador; con `:has()` ademas quedan uno debajo del otro. */
  .admin-table td{ flex-wrap:wrap; row-gap:8px; }
  .admin-table td:has(.admin-link-btn){ flex-direction:column; align-items:stretch; }
  .admin-table td:has(.admin-link-btn)::before{ flex:none; text-align:left; }
  /* !important a proposito: el boton "Desvincular" trae un margin-left:4px
     escrito en linea desde el JS que dibuja la tabla, y apilado quedaba 4px
     corrido respecto a los demas. */
  .admin-table td:has(.admin-link-btn) .admin-link-btn{ width:100%; margin-left:0 !important; margin-right:0 !important; }
}

/* ---------------------------------------------------------------------------
   DETALLES DEL ENVÍO, dentro del carrito del Portal del Cliente.
   Se llenan solos con la ficha del cliente; la dirección queda bloqueada salvo
   que marque que esta vez va a otro lado.
--------------------------------------------------------------------------- */
.ship-details{
  border:1px solid var(--border); border-radius:9px; padding:0 12px;
  margin-bottom:14px; background:var(--bg);
}
.ship-details > summary{
  cursor:pointer; list-style:none; padding:11px 0; font-size:0.84rem;
  font-weight:700; color:var(--navy); display:flex; align-items:center; gap:7px;
}
.ship-details > summary::-webkit-details-marker{ display:none; }
.ship-details > summary::before{
  content:''; width:7px; height:7px; border-right:2px solid var(--navy);
  border-bottom:2px solid var(--navy); transform:rotate(-45deg); transition:transform 0.2s ease;
  margin-left:2px;
}
.ship-details[open] > summary::before{ transform:rotate(45deg); }
.ship-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px 10px; padding:2px 0 13px; }
.ship-full{ grid-column:1 / -1; }
.ship-field{ display:flex; flex-direction:column; gap:4px; }
.ship-field label{ font-size:0.72rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.3px; }
.ship-field input, .ship-field select, .ship-field textarea{
  width:100%; padding:8px 10px; border:1.5px solid var(--border); border-radius:6px;
  font-family:'Inter',sans-serif; font-size:0.85rem; background:var(--white); color:var(--text);
}
.ship-field textarea{ resize:vertical; }
.ship-field input:disabled{ background:#f1f3f6; color:var(--text-muted); cursor:not-allowed; }
.ship-check{ display:flex; align-items:center; gap:7px; font-size:0.8rem; color:var(--text); cursor:pointer; }
.ship-check input{ width:15px; height:15px; flex:none; cursor:pointer; }
@media (max-width:400px){ .ship-grid{ grid-template-columns:1fr; } }

/* ---------------------------------------------------------------------------
   ADB × SCEPTER — el sello de distribuidor exclusivo, en el inicio.
   El logo de ADB va a propósito más grande que el de Scepter: el protagonista
   es ADB, Scepter es la marca que representan.
--------------------------------------------------------------------------- */
.scepter-band{ background:var(--white); padding:44px 0; }
.scepter-band .container{
  display:flex; align-items:center; justify-content:center; gap:34px; flex-wrap:wrap; text-align:left;
}
.scepter-lockup{
  display:flex; align-items:center; gap:18px; flex:none;
  padding:14px 22px; border:1px solid var(--border); border-radius:14px;
  background:linear-gradient(180deg, #fff, #f7f9fc);
  transition:border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.scepter-lockup:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 10px 26px rgba(12,31,58,0.10); }
.scepter-lockup-adb{ height:62px; width:auto; }
.scepter-lockup-brand{ height:34px; width:auto; }
.scepter-lockup-x{
  font-family:'Oswald',sans-serif; font-size:1.5rem; color:var(--gold); font-weight:500; line-height:1;
}
.scepter-band-text{ max-width:420px; }
.scepter-band-tag{
  display:inline-block; background:rgba(212,175,55,0.16); color:#8a6b0f;
  border:1px solid rgba(212,175,55,0.45); padding:4px 12px; border-radius:999px;
  font-size:0.7rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase;
}
.scepter-band-text p{ margin:10px 0 8px; font-size:0.95rem; color:var(--text); line-height:1.6; }
.scepter-band-link{ font-size:0.88rem; font-weight:600; color:var(--navy); }
.scepter-band-link:hover{ color:var(--gold); }
@media (max-width:720px){
  .scepter-band .container{ flex-direction:column; gap:20px; text-align:center; }
  .scepter-band-text{ max-width:none; }
  /* En telefono el sello se mide por ANCHO, no por alto: con alto fijo los dos
     logos sumaban 394 px dentro de una caja de 342 px y el logo de Scepter se
     cortaba a la mitad. Con min(px, vw) la pareja se achica sola y nunca se sale,
     desde 320 px para arriba, conservando la proporcion entre los dos logos. */
  .scepter-lockup{ max-width:100%; padding:12px 14px; gap:10px; }
  .scepter-lockup-adb{ height:auto; width:min(150px, 38vw); }
  .scepter-lockup-brand{ height:auto; width:min(107px, 27.1vw); }
  .scepter-lockup-x{ font-size:1.15rem; }
}

/* ---------------------------------------------------------------------------
   SERVICIOS y PRODUCTOS ESPECIALES (páginas nuevas)
--------------------------------------------------------------------------- */
.srv-list{ list-style:none; padding:0; margin:0; }
.srv-list li{
  position:relative; padding:11px 0 11px 28px; font-size:0.95rem; color:var(--text);
  border-bottom:1px solid var(--border); line-height:1.55;
}
.srv-list li:last-child{ border-bottom:none; }
/* Lista de 2 columnas en UNA sola rejilla: las dos columnas comparten fila, asi
   que las rayas divisorias quedan a la misma altura aunque un renglon ocupe dos
   lineas (pasaba en "What We Sell" y se notaba mas en espanol). */
.srv-list-2col{
  display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:column;
  grid-template-rows:repeat(5, auto); column-gap:56px; margin-top:36px;
}
.srv-list-2col li:nth-child(5){ border-bottom:none; }
@media (max-width:860px){
  .srv-list-2col{ grid-template-columns:1fr; grid-auto-flow:row; grid-template-rows:none; column-gap:0; margin-top:28px; }
  .srv-list-2col li:nth-child(5){ border-bottom:1px solid var(--border); }
  .srv-list-2col li:last-child{ border-bottom:none; }
}
.srv-list li::before{
  content:''; position:absolute; left:4px; top:18px; width:9px; height:9px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg);
}
.srv-brand-grid{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:26px;
}
.srv-brand{
  flex:1 1 140px; max-width:200px;
  display:flex; align-items:center; justify-content:center; height:86px; padding:14px;
  background:var(--white); border:1px solid var(--border); border-radius:11px;
  transition:border-color 0.2s ease, transform 0.2s ease;
}
.srv-brand:hover{ border-color:var(--gold); transform:translateY(-2px); }
.srv-brand-more{
  font-family:'Oswald', sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:1px; font-size:0.92rem; color:var(--text-muted);
}
.srv-brand-more:hover{ color:var(--navy); }
.srv-brand img{ max-width:100%; max-height:42px; object-fit:contain; mix-blend-mode:multiply; }


.sp-intro{ display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:start; }
.sp-intro p{ margin:10px 0 0; font-size:0.98rem; line-height:1.7; color:var(--text); }
@media (max-width:760px){
  .sp-intro{ grid-template-columns:1fr; gap:20px; }
}

/* ---------------------------------------------------------------------------
   Sello "Distribuidor exclusivo de Scepter", dentro de la presentación del
   inicio. Va con el logo BLANCO oficial: sobre el video oscuro, el azul marino
   de la versión de color no se leería.
--------------------------------------------------------------------------- */
/* El sello de Scepter y el boton de catalogo van EMPAREJADOS en una fila:
   misma altura, mismo tratamiento de pildora. El margen vertical vive aqui,
   en el contenedor, no en cada pildora, para que las dos queden alineadas.
   Si no caben en una linea, bajan una debajo de la otra pegadas a la izquierda. */
.hero-badges{
  display:flex; flex-wrap:wrap; align-items:stretch; gap:12px;
  margin:26px 0 34px;
}
.hero-scepter{
  display:inline-flex; align-items:center; gap:14px; margin:0;
  padding:9px 18px 9px 14px; border-radius:999px;
  background:rgba(255,255,255,0.09); border:1px solid rgba(255,255,255,0.22);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background 0.2s ease, border-color 0.2s ease;
}
/* Misma pildora que el sello, pero en dorado para que se lea como la accion.
   La altura la iguala el mismo padding vertical (9px) y el mismo borde. */
.hero-catalog{
  display:inline-flex; align-items:center; gap:9px; margin:0;
  padding:9px 20px 9px 16px; border-radius:999px;
  background:rgba(212,175,55,0.16); border:1px solid rgba(212,175,55,0.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--gold); text-decoration:none;
  font-family:'Oswald',sans-serif; font-size:0.68rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase; white-space:nowrap;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.hero-catalog:hover{ background:var(--gold); border-color:var(--gold); color:var(--navy); }
/* El SVG va sin width/height propios: sin esta regla saldria gigante. */
.hero-catalog svg{ width:16px; height:16px; flex:none; }
.hero-scepter:hover{ background:rgba(255,255,255,0.16); border-color:var(--gold); }
.hero-scepter-tag{
  font-family:'Oswald',sans-serif; font-size:0.68rem; font-weight:600;
  letter-spacing:0.13em; text-transform:uppercase; color:var(--gold);
  white-space:nowrap;
}
.hero-scepter img{ height:22px; width:auto; display:block; }
@media (max-width:560px){
  .hero-badges{ gap:10px; }
  .hero-scepter{ gap:10px; padding:8px 14px 8px 12px; }
  .hero-scepter-tag{ font-size:0.6rem; }
  .hero-scepter img{ height:18px; }
  .hero-catalog{ gap:8px; padding:8px 16px 8px 13px; font-size:0.6rem; }
  .hero-catalog svg{ width:14px; height:14px; }
}

/* ---------------------------------------------------------------------------
   MENSAJES del cliente hacia Administración (Portal del Cliente).
   Van a la misma bandeja que el formulario público de contacto.
--------------------------------------------------------------------------- */
.msg-compose{
  background:var(--white); border:1px solid var(--border); border-radius:11px;
  padding:18px 20px; margin-bottom:26px;
}
.msg-compose label{
  display:block; font-size:0.74rem; font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:0.4px; margin-bottom:7px;
}
.msg-compose textarea{
  width:100%; padding:11px 14px; border:1.5px solid var(--border); border-radius:7px;
  font-family:'Inter',sans-serif; font-size:0.92rem; resize:vertical; color:var(--text);
}
.msg-compose .btn{ margin-top:12px; }
.msg-sent-title{
  font-family:'Oswald',sans-serif; font-size:0.78rem; font-weight:600;
  text-transform:uppercase; letter-spacing:1.1px; color:var(--text-muted);
  margin:0 0 10px;
}
.msg-item{
  background:var(--white); border:1px solid var(--border); border-radius:10px;
  padding:14px 16px; margin-bottom:10px;
}
.msg-item-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:7px;
}
.msg-item-date{ font-size:0.78rem; color:var(--text-muted); }
.msg-item-state{
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--text-muted); background:var(--bg); border-radius:999px; padding:3px 10px;
}
.msg-item-state.leido{ color:#178a49; background:rgba(23,138,73,0.10); }
.msg-item-text{ font-size:0.92rem; color:var(--text); line-height:1.55; white-space:pre-wrap; }

/* El tercer dato del inicio ya no es un número suelto ("5") sino los nombres de
   las industrias. Necesita su propio tamaño: con la tipografía enorme de
   .hero-stat-num, cinco nombres no entrarían en ninguna pantalla. */
.hero-stat-list{
  font-family:'Oswald',sans-serif; font-size:1.02rem; font-weight:600;
  color:var(--white); line-height:1.45; letter-spacing:0.01em;
}
@media (max-width:860px){ .hero-stat-list{ font-size:0.92rem; } }

/* ---------------------------------------------------------------------------
   Bug real encontrado el 20-ago-2026: la barra de arriba se desbordaba entre
   861 y ~1150 px de ancho. El menu desplegable solo entraba a los 860 px, asi
   que en ese hueco (tablet apaisada, ventana de laptop a medio ancho) los
   enlaces y los dos botones no cabian y empujaban la fila fuera de la caja.
   En espanol era peor, porque las etiquetas son mas largas: "Portal de
   Clientes" y "Solicitar Acceso" contra "Client Login" y "Request Access".
   Medido: a 1100 px de pantalla el contenido pedia 1278 px, y en espanol
   seguia sin caber incluso a 1200 px. Por eso el corte quedo en 1279 px, no
   en 1150 como se probo primero.

   Arreglo: pasar al menu desplegable desde 1150 px. No se pierde nada, porque
   ese menu ya trae exactamente los mismos enlaces, los mismos botones y el
   cambio de idioma. Va al final del archivo a proposito, para ganarle en orden
   a las reglas de arriba sin tener que tocarlas.
--------------------------------------------------------------------------- */
@media (max-width: 1279px){
  .navbar-links{ display:none; }
  .navbar-actions{ display:none; }
  .navbar-mobile-toggle{ display:block; }
}

/* ---------------------------------------------------------------------------
   Boton de play del video del inicio. Solo aparece si a los 3 segundos el
   video sigue detenido, que pasa cuando el Mac esta en modo de bajo consumo o
   cuando Safari tiene la reproduccion automatica apagada para el sitio. Son
   dos cosas que no se pueden resolver desde el codigo, asi que al menos el
   visitante tiene como arrancarlo con un toque en vez de quedarse mirando una
   foto fija sin saber que hay un video detras.
--------------------------------------------------------------------------- */
.hero-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:4; width:78px; height:78px; border-radius:50%; cursor:pointer;
  border:2px solid rgba(255,255,255,0.85);
  background:rgba(12,31,58,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; padding:0;
  transition:transform 0.2s ease, background 0.2s ease;
}
.hero-play:hover{ background:rgba(12,31,58,0.75); transform:translate(-50%,-50%) scale(1.06); }
.hero-play svg{ width:34px; height:34px; fill:#fff; margin-left:4px; }
@media (max-width:640px){ .hero-play{ width:62px; height:62px; } .hero-play svg{ width:27px; height:27px; } }
@media (prefers-reduced-motion:reduce){ .hero-play{ transition:none; } }

/* ---------------------------------------------------------------------------
   CONTACTO en telefonos angostos. El captcha de Cloudflare mide 300px fijos y
   no se achica solo, asi que por debajo de 390px se le baja el relleno a la
   tarjeta y, mas abajo todavia, se reduce el propio widget en proporcion.
--------------------------------------------------------------------------- */
@media (max-width:389px){
  .contact-form{ padding:24px 12px; }
}
@media (max-width:374px){
  #contact-captcha{ transform:scale(0.8); transform-origin:left top; }
}

/* ===========================================================================
   CHAT Cliente ↔ Administración  (1-sep-2026)
   ---------------------------------------------------------------------------
   Estilo deliberadamente parecido a WhatsApp/Telegram, pedido por el cliente:
   minimalista y sin adornos. La razón práctica es que nadie tiene que aprender
   a usarlo — un dueño de taller ya sabe leer esta pantalla.

   Lo que se toma de esa referencia y por qué:
     · Burbujas con cola, la propia a la derecha y en color, la ajena a la
       izquierda en blanco.
     · Mensajes seguidos de la misma persona se AGRUPAN: el nombre y la cola
       salen una sola vez, arriba del grupo. Repetir el nombre en cada línea es
       lo que hace que un chat se vea de aficionado.
     · La hora vive DENTRO de la burbuja, abajo a la derecha, chiquita.
     · Separadores de día ("Hoy", "Ayer") en vez de una fecha por mensaje.
   Lo que NO se copia: el verde de WhatsApp. La burbuja propia usa el azul de la
   marca de ADB.
   =========================================================================== */

.chat-shell{ display:grid; grid-template-columns:320px 1fr; gap:14px; align-items:start; }
@media (max-width:860px){ .chat-shell{ grid-template-columns:1fr; } }

/* ---- Lista de conversaciones (solo el panel) ---- */
.chat-list{
  border:1px solid var(--border); border-radius:14px; background:var(--white);
  max-height:600px; overflow-y:auto; overflow-x:hidden;
}
.chat-list-item{
  width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding:11px 13px; display:grid; grid-template-columns:42px 1fr auto; gap:11px;
  align-items:center; font-family:inherit; color:var(--text); position:relative;
}
/* La línea separadora arranca después del avatar, como en WhatsApp: así la
   lista se lee como una columna y no como una tabla. */
.chat-list-item::after{
  content:''; position:absolute; left:66px; right:0; bottom:0; height:1px; background:var(--border);
}
.chat-list-item:last-child::after{ display:none; }
.chat-list-item:hover{ background:#f7f8fa; }
.chat-list-item.active{ background:#eef2f7; }

/* Avatar con iniciales: da un punto de anclaje visual para encontrar a alguien
   de un vistazo, sin pedirle una foto a nadie. El color sale del propio nombre,
   así cada cliente tiene siempre el mismo. */
.chat-av{
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-weight:700; font-size:0.9rem; letter-spacing:0.3px;
  font-family:'Inter',sans-serif; user-select:none;
}
.chat-list-mid{ min-width:0; }
.chat-list-name{
  font-weight:600; font-size:0.93rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-list-company{
  color:var(--text-muted); font-size:0.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-list-prev{
  color:var(--text-muted); font-size:0.8rem; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.chat-list-item.unread .chat-list-name{ font-weight:800; }
.chat-list-item.unread .chat-list-prev{ color:var(--text); font-weight:500; }
.chat-list-right{ display:flex; flex-direction:column; align-items:flex-end; gap:5px; align-self:flex-start; padding-top:3px; }
.chat-list-when{ color:var(--text-muted); font-size:0.7rem; white-space:nowrap; }
.chat-count{
  background:#25a55f; color:#fff; border-radius:999px; min-width:20px; height:20px;
  padding:0 6px; font-size:0.71rem; font-weight:700; display:grid; place-items:center;
}

/* ---- El hilo ---- */
.chat-thread{
  border:1px solid var(--border); border-radius:14px; background:var(--white);
  display:flex; flex-direction:column; min-height:520px; overflow:hidden;
}
.chat-head{
  padding:10px 14px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:11px; background:var(--white);
}
.chat-head-name{ font-weight:700; font-size:0.97rem; line-height:1.2; }
.chat-head-company{ color:var(--text-muted); font-size:0.8rem; line-height:1.3; }
.chat-head-back{ margin-left:auto; }

/* El fondo del hilo es un gris muy tenue con un punteado casi invisible: separa
   la conversación del resto del panel sin llamar la atención. */
.chat-log{
  flex:1; padding:16px 18px; overflow-y:auto; max-height:470px;
  display:flex; flex-direction:column; gap:2px;
  background:#eceff3;
  background-image:radial-gradient(rgba(12,31,58,0.045) 1px, transparent 1px);
  background-size:22px 22px;
}
.chat-row{ display:flex; margin-top:2px; }
.chat-row.mine{ justify-content:flex-end; }
/* Espacio extra solo cuando cambia quién habla: dentro de un mismo grupo las
   líneas van pegadas. */
.chat-row.nuevo-grupo{ margin-top:12px; }

.chat-bubble{
  position:relative; max-width:min(76%, 560px); padding:7px 11px 5px;
  border-radius:14px; background:var(--white); color:var(--text);
  box-shadow:0 1px 1px rgba(12,31,58,0.10);
  /* Un número de parte largo o un enlace pegado no pueden estirar la burbuja
     hasta romper la caja. */
  overflow-wrap:anywhere; line-height:1.45; font-size:0.92rem;
}
.chat-row.mine .chat-bubble{ background:var(--navy); color:#fff; }
/* Las esquinas del lado de quien habla se cierran solo en el ÚLTIMO mensaje del
   grupo, que es donde va la cola. */
.chat-row:not(.mine) .chat-bubble{ border-top-left-radius:6px; }
.chat-row.mine .chat-bubble{ border-top-right-radius:6px; }
.chat-row.primero:not(.mine) .chat-bubble{ border-top-left-radius:14px; }
.chat-row.primero.mine .chat-bubble{ border-top-right-radius:14px; }

/* La colita, dibujada con un borde: sin imágenes ni SVG. Solo en el último
   mensaje de cada grupo, igual que en WhatsApp. */
.chat-row.ultimo .chat-bubble::after{
  content:''; position:absolute; bottom:0; width:0; height:0; border:7px solid transparent;
}
.chat-row.ultimo:not(.mine) .chat-bubble{ border-bottom-left-radius:4px; }
.chat-row.ultimo:not(.mine) .chat-bubble::after{
  left:-6px; border-right-color:var(--white); border-bottom-color:var(--white); border-left:0; border-bottom-width:6px;
}
.chat-row.ultimo.mine .chat-bubble{ border-bottom-right-radius:4px; }
.chat-row.ultimo.mine .chat-bubble::after{
  right:-6px; border-left-color:var(--navy); border-bottom-color:var(--navy); border-right:0; border-bottom-width:6px;
}

.chat-who{
  font-size:0.76rem; font-weight:700; margin-bottom:2px; color:var(--gold-dark);
}
.chat-row.mine .chat-who{ color:rgba(255,255,255,0.72); }
/* La hora va dentro de la burbuja, abajo a la derecha, y el texto le deja sitio
   para que no se le monte encima. */
.chat-when{
  font-size:0.66rem; opacity:0.55; float:right; margin:6px 0 0 12px;
  line-height:1; user-select:none;
}
.chat-row.mine .chat-when{ opacity:0.7; }

/* Separador de día */
.chat-dia{ align-self:center; margin:14px 0 6px; }
.chat-dia span{
  background:rgba(12,31,58,0.10); color:var(--navy); font-size:0.72rem; font-weight:600;
  padding:3px 12px; border-radius:999px; letter-spacing:0.2px;
}
.chat-empty{ color:var(--text-muted); text-align:center; padding:48px 20px; font-size:0.9rem; margin:auto; }

/* ---- Escribir ---- */
.chat-compose{
  border-top:1px solid var(--border); padding:9px 10px; display:flex; gap:9px;
  align-items:flex-end; background:var(--white);
}
.chat-compose textarea{
  flex:1; resize:none; min-height:42px; max-height:150px; padding:11px 15px;
  border:1px solid var(--border); border-radius:21px; font-family:inherit;
  font-size:0.93rem; color:var(--text); background:#f6f7f9; line-height:1.4;
}
.chat-compose textarea:focus{ outline:none; border-color:var(--navy-light); background:var(--white); }
/* Botón redondo con una flecha, como en las dos apps de referencia. Sin texto:
   el icono ya dice qué hace y no hay que traducirlo. */
.chat-send{
  width:42px; height:42px; flex:none; border-radius:50%; border:0; cursor:pointer;
  background:var(--navy); color:#fff; display:grid; place-items:center; padding:0;
  transition:background .15s ease, transform .1s ease;
}
.chat-send:hover{ background:var(--navy-2); }
.chat-send:active{ transform:scale(0.94); }
.chat-send:disabled{ opacity:0.45; cursor:default; }
.chat-send svg{ width:19px; height:19px; }
.chat-hint{ color:var(--text-muted); font-size:0.72rem; padding:0 14px 9px; background:var(--white); }
.chat-error{ color:#c0392b; font-size:0.82rem; padding:8px 14px 0; display:none; background:var(--white); }
.chat-error.show{ display:block; }

/* Buscador de la lista */
.chat-buscar{
  width:100%; margin-bottom:9px; padding:10px 14px; border:1px solid var(--border);
  border-radius:21px; font-family:inherit; font-size:0.88rem; background:var(--white);
}
.chat-buscar:focus{ outline:none; border-color:var(--navy-light); }

/* ---------------------------------------------------------------------------
   Burbuja de chat flotante del Portal del Cliente (chat-widget.js)
   ---------------------------------------------------------------------------
   Vive encima de la página, abajo a la derecha. Reutiliza .chat-log, .chat-row,
   .chat-bubble y .chat-compose de arriba: el chat se ve igual dentro de la
   burbuja y dentro del panel, que es lo que hace que parezca un producto y no
   dos pantallas distintas.
   --------------------------------------------------------------------------- */
.adb-chat-fab{
  position:fixed; right:22px; bottom:22px; z-index:1200;
  width:58px; height:58px; border-radius:50%; border:0; cursor:pointer;
  background:var(--navy); color:#fff; display:grid; place-items:center; padding:0;
  box-shadow:0 6px 20px rgba(12,31,58,0.32);
  transition:transform .16s ease, background .16s ease;
}
.adb-chat-fab:hover{ transform:translateY(-2px); background:var(--navy-2); }
.adb-chat-fab:active{ transform:scale(0.95); }
.adb-chat-fab svg{ width:26px; height:26px; }
.adb-chat-fab.abierto svg{ width:22px; height:22px; }
.adb-chat-fab-badge{
  position:absolute; top:-2px; right:-2px; min-width:21px; height:21px; padding:0 6px;
  border-radius:999px; background:#c0392b; color:#fff; font-size:0.72rem; font-weight:700;
  display:grid; place-items:center; border:2px solid var(--bg);
  font-family:'Inter',sans-serif;
}
.adb-chat-fab-badge[hidden]{ display:none; }

.adb-chat-panel{
  position:fixed; right:22px; bottom:92px; z-index:1199;
  width:min(384px, calc(100vw - 32px));
  /* 🔴 ALTURA FIJA, y no es un capricho: el área de mensajes es `flex:1`, y un
     hijo `flex:1` dentro de un contenedor SIN altura se queda en cero. Por eso
     el chat salía con una franja de dos dedos en vez de una conversación. */
  height:min(600px, calc(100vh - 140px));
  background:var(--white);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 18px 50px rgba(12,31,58,0.28); border:1px solid var(--border);
  /* Escondida sin `display:none` para que la apertura se sienta suave. */
  opacity:0; visibility:hidden; transform:translateY(14px) scale(0.98);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.adb-chat-panel.abierto{ opacity:1; visibility:visible; transform:none; }
@media (max-width:600px){
  /* En el teléfono ocupa casi toda la pantalla: una ventanita de 370 px en un
     móvil no se puede usar. */
  .adb-chat-panel{ right:10px; left:10px; bottom:86px; width:auto;
    height:calc(100vh - 150px); }
}

.adb-chat-head{
  display:flex; align-items:center; gap:12px; padding:15px 14px;
  background:var(--navy); color:#fff; flex:none;
}
.adb-chat-head-av{
  width:46px; height:46px; border-radius:50%; background:var(--gold); color:var(--navy);
  display:grid; place-items:center; font-weight:800; font-size:0.84rem;
  font-family:'Inter',sans-serif; flex:none;
}
.adb-chat-head-txt{ min-width:0; }
.adb-chat-head-name{ font-weight:700; font-size:1.02rem; line-height:1.25; }
.adb-chat-head-sub{ font-size:0.78rem; opacity:0.75; line-height:1.35; margin-top:1px; }
.adb-chat-x{
  margin-left:auto; background:none; border:0; color:#fff; cursor:pointer;
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%; padding:0;
  opacity:0.8;
}
.adb-chat-x:hover{ opacity:1; background:rgba(255,255,255,0.12); }
.adb-chat-x svg{ width:17px; height:17px; }

/* Ahora que el panel tiene altura, el área de mensajes se lleva todo el espacio
   que sobra entre la cabecera y la caja de escribir, como en WhatsApp. */
.adb-chat-log{ flex:1 1 auto; height:auto; max-height:none; min-height:0; padding:14px 16px; }
.adb-chat-panel .chat-compose{ padding:9px 10px; flex:none; }
.adb-chat-panel .adb-chat-powered{ flex:none; }
.adb-chat-panel .chat-compose textarea{ min-height:38px; padding:9px 14px; font-size:0.9rem; }
.adb-chat-panel .chat-send{ width:38px; height:38px; }
.adb-chat-panel .chat-send svg{ width:17px; height:17px; }

.adb-chat-powered{
  display:flex; align-items:center; justify-content:center; gap:6px;
  font-size:0.68rem; color:var(--text-muted);
  padding:7px 0 9px; background:var(--white); letter-spacing:0.2px;
  border-top:1px solid var(--border); text-decoration:none; flex:none;
  transition:opacity .15s ease;
}
.adb-chat-powered:hover{ opacity:0.75; }
/* El logo va en su tamaño real reducido, sin recortar ni recolorear: es el
   archivo de marca ya aprobado. */
.adb-chat-powered img{ height:13px; width:auto; display:block; }

/* Con la burbuja de chat en pantalla, el botón de "Reportar un problema" se
   corre a la esquina de la izquierda: los dos son flotantes y se tapaban.
   Solo aplica donde existe el chat — la clase la pone chat-widget.js. */
html.con-chat-flotante #rp-btn{ right:auto !important; left:18px !important; }
@media (max-width:600px){
  /* En el teléfono el panel abierto ocupa casi todo el ancho, así que el botón
     de reportes baja del todo para no quedar debajo de la conversación. */
  html.con-chat-flotante #rp-btn{ bottom:14px !important; }
}

/* Aviso emergente del panel: dice QUÉ CLIENTE escribió, desde cualquier pestaña.
   El contador rojo dice cuántos; esto dice de quién, que es lo que hace que
   alguien reaccione. Tocarlo abre esa conversación. */
.chat-aviso{
  position:fixed; right:20px; top:20px; z-index:1400; cursor:pointer;
  display:flex; align-items:center; gap:11px; max-width:340px;
  background:var(--white); border:1px solid var(--border); border-left:4px solid #c0392b;
  border-radius:12px; padding:11px 14px 11px 11px;
  box-shadow:0 12px 34px rgba(12,31,58,0.22);
  opacity:0; visibility:hidden; transform:translateX(16px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
}
.chat-aviso.visible{ opacity:1; visibility:visible; transform:none; }
.chat-aviso .chat-av{ width:38px; height:38px; flex:none; }
.chat-aviso-txt{ min-width:0; }
.chat-aviso-name{ font-weight:700; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-aviso-name span{ font-weight:500; color:var(--text-muted); }
.chat-aviso-prev{ color:var(--text-muted); font-size:0.8rem; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* La hora nunca se monta sobre la última palabra: se le reserva el hueco. */
.chat-bubble .chat-when{ margin-left:10px; }
.chat-bubble{ padding-bottom:4px; }

/* Solo el TEXTO del mensaje respeta los saltos de línea que escribió la persona.
   Antes esa regla estaba en toda la burbuja y se tragaba también la sangría del
   código de la plantilla, que salía como espacios al principio del mensaje. */
.chat-txt{ white-space:pre-wrap; }

/* ---------------------------------------------------------------------------
   Ventana flotante del chat en el Panel — se navega como WhatsApp en el TELÉFONO
   ---------------------------------------------------------------------------
   Del ancho de un teléfono, no de una ventana de escritorio: se ve la LISTA de
   conversaciones y, al elegir una, se pasa a la conversación con un botón para
   volver. Nunca las dos cosas a la vez.

   La ventana no tiene chat propio: adentro se mete el MISMO bloque `.chat-shell`
   de la pestaña Chat (ver chatVentanaAbrir). Por eso todo lo de aquí son ajustes
   sobre esas mismas clases, no una segunda copia de estilos.
   --------------------------------------------------------------------------- */
.admin-chat-win{
  position:fixed; right:22px; bottom:92px; z-index:1199;
  width:min(384px, calc(100vw - 32px));
  height:min(600px, calc(100vh - 140px));
  background:var(--white); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 18px 50px rgba(12,31,58,0.28);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(0.98);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.admin-chat-win.abierto{ opacity:1; visibility:visible; transform:none; }
@media (max-width:600px){
  .admin-chat-win{ right:10px; left:10px; bottom:86px; width:auto; height:calc(100vh - 150px); }
}
.admin-chat-win-head{
  display:flex; align-items:center; padding:14px; background:var(--navy); color:#fff;
  font-weight:700; font-size:1.02rem; flex:none;
}
.admin-chat-win-x{
  margin-left:auto; background:none; border:0; color:#fff; cursor:pointer;
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%; padding:0; opacity:0.8;
}
.admin-chat-win-x:hover{ opacity:1; background:rgba(255,255,255,0.12); }
.admin-chat-win-x svg{ width:17px; height:17px; }

.admin-chat-win-body{ flex:1; min-height:0; display:flex; }
.admin-chat-win-body .chat-shell{
  display:flex; flex-direction:column; width:100%; height:100%; gap:0;
}
/* Una vista o la otra, nunca las dos: es lo que hace que se sienta un teléfono
   y no un panel de escritorio encogido. */
.admin-chat-win-body .chat-lado-lista{ display:flex; flex-direction:column; height:100%; min-height:0; padding:10px 10px 0; }
.admin-chat-win-body .chat-list{ flex:1; min-height:0; max-height:none; border-radius:12px; }
.admin-chat-win-body .chat-thread{ display:none; }
.admin-chat-win.viendo-hilo .chat-lado-lista{ display:none; }
.admin-chat-win.viendo-hilo .chat-thread{
  display:flex; height:100%; min-height:0; border:0; border-radius:0;
}
.admin-chat-win-body .chat-log{ flex:1; min-height:0; max-height:none; }
.admin-chat-win-body .chat-head{ flex:none; }
.admin-chat-win-body .chat-compose{ flex:none; }
/* El botón de volver, en la cabecera del hilo, se ve como una flecha de atrás. */
.admin-chat-win-body .chat-head-back{
  order:-1; margin-left:0; margin-right:2px; padding:0; width:30px; height:30px;
  border:0; background:none; color:var(--navy); font-size:0; border-radius:50%;
}
.admin-chat-win-body .chat-head-back:hover{ background:rgba(12,31,58,0.07); }
.admin-chat-win-body .chat-head-back::before{
  content:'‹'; font-size:30px; line-height:26px; font-weight:400; display:block;
}

/* El sello de iVot se queda FIJO en la esquina de abajo a la izquierda: es la
   marca del producto y ese es su sitio. Para que no se monte sobre el último
   elemento del menú lateral, es el MENÚ el que deja un hueco al final. */
.admin-side{ padding-bottom:58px; }

/* Botón de opciones de un mensaje propio (editar / borrar).
   Escondido hasta pasar el puntero por la burbuja: en un chat, tener un botón
   visible en cada línea ensucia la lectura. En el teléfono, que no tiene
   puntero, se muestra siempre. */
.chat-bubble{ position:relative; }
.chat-acc{
  position:absolute; top:2px; right:2px; width:22px; height:22px; padding:0;
  border:0; background:none; cursor:pointer; border-radius:50%;
  font-size:15px; line-height:1; color:inherit; opacity:0;
  transition:opacity .12s ease, background .12s ease;
}
.chat-row:hover .chat-acc{ opacity:0.55; }
.chat-acc:hover{ opacity:1 !important; background:rgba(0,0,0,0.10); }
.chat-row.mine .chat-acc:hover{ background:rgba(255,255,255,0.18); }
/* Se le deja sitio al botón para que no se monte sobre el texto. */
.chat-row.mine .chat-bubble:has(.chat-acc){ padding-right:26px; }
.chat-row:not(.mine) .chat-bubble:has(.chat-acc){ padding-right:26px; }
@media (hover:none){ .chat-acc{ opacity:0.5; } }

.chat-menu{
  position:fixed; z-index:1500; background:var(--white);
  border:1px solid var(--border); border-radius:10px; overflow:hidden;
  box-shadow:0 8px 26px rgba(12,31,58,0.22); min-width:132px;
}
.chat-menu button{
  display:block; width:100%; text-align:left; border:0; background:none;
  padding:9px 14px; font:inherit; font-size:0.88rem; color:var(--text); cursor:pointer;
}
.chat-menu button:hover{ background:#f2f4f7; }
.chat-menu button[data-a="borrar"]{ color:#c0392b; }

/* Botón de borrar la conversación entera, en la cabecera del hilo del Panel. */
.chat-borrar-hilo{
  background:none; border:0; cursor:pointer; color:var(--text-muted);
  width:30px; height:30px; display:grid; place-items:center; border-radius:50%; padding:0;
}
.chat-borrar-hilo:hover{ background:rgba(192,57,43,0.10); color:#c0392b; }
.chat-borrar-hilo svg{ width:16px; height:16px; }

/* Aviso de "hubo una actualización" dentro de la campana del panel.
   No suma al contador ni suena: no es trabajo pendiente, es una nota. Se cierra
   una vez y no vuelve (se recuerda por persona, en su navegador). */
.notif-update{
  border-bottom:1px solid var(--border); padding:12px 14px;
  background:linear-gradient(180deg, rgba(212,175,55,0.10), rgba(212,175,55,0.02));
}
.notif-update-head{ display:flex; align-items:flex-start; gap:8px; margin-bottom:7px; }
.notif-update-head strong{ font-size:0.86rem; color:var(--navy); line-height:1.3; }
.notif-update-x{
  margin-left:auto; background:none; border:0; cursor:pointer; font-size:19px;
  line-height:1; color:var(--text-muted); padding:0 2px;
}
.notif-update-x:hover{ color:var(--navy); }
.notif-update-lista{ margin:0; padding-left:16px; }
.notif-update-lista li{
  font-size:0.79rem; color:var(--text); line-height:1.45; margin-bottom:5px;
}
.notif-update-pie{
  font-size:0.74rem; color:var(--text-muted); margin-top:7px;
  padding-top:7px; border-top:1px dashed var(--border);
}

/* Ventana de detalle de producto: botón de cerrar y fila de acciones.
   Antes solo se cerraba tocando fuera — en el teléfono eso no se adivina y el
   cliente se quedaba mirando el producto sin ver cómo volver al catálogo. */
.pd-modal{ position:relative; }
.pd-x{
  position:absolute; top:8px; right:10px; z-index:2;
  width:32px; height:32px; border:0; background:none; cursor:pointer;
  font-size:26px; line-height:1; color:var(--text-muted); border-radius:50%;
}
.pd-x:hover{ background:rgba(12,31,58,0.07); color:var(--navy); }
.pd-acciones{ display:flex; gap:9px; }
.pd-acciones .btn{ flex:1; }
@media (max-width:520px){
  /* En pantalla chica los dos botones se apilan, con Agregar arriba: es la
     acción principal y tiene que quedar bajo el pulgar. */
  .pd-acciones{ flex-direction:column-reverse; }
}