/* =====================================================================
   INVENTARIO — sistema visual
   ---------------------------------------------------------------------
   Micro tarjetas: cada dato vive en su propia pieza, con aire alrededor.
   Índigo eléctrico sobre neutro frío; teal y frambuesa para lo que entra
   y lo que sale. Las cifras van en monoespaciada tabular porque en
   gestión comercial los números se comparan en columna.
   ===================================================================== */

:root{
  /* Neutros */
  --fondo:      #F3F2F9;
  --superficie: #FFFFFF;
  --superficie-2:#F8F8FC;
  --linea:      #E4E2F0;
  --linea-2:    #EFEDF8;

  --tinta:   #1C1830;
  --tinta-2: #5B5478;
  --tinta-3: #8F88AB;

  /* Señalización — saturada y con superficie tintada propia */
  --violeta:      #6C3BF4;
  --violeta-alto: #5A2AE0;
  --violeta-piel: #EDE6FF;

  --esmeralda:      #00A87E;
  --esmeralda-piel: #DDF7EF;

  --rosa:      #F0356B;
  --rosa-piel: #FFE4EC;

  --naranja:      #F58309;
  --naranja-piel: #FFF0DC;

  --cian:      #0BA5C7;
  --cian-piel: #DEF4FA;

  /* Series de gráficas */
  --serie-0:#6C3BF4; --serie-1:#00A87E; --serie-2:#F58309;
  --serie-3:#F0356B; --serie-4:#0BA5C7; --serie-5:#A855D6;

  /* Alias heredados */
  --indigo:var(--violeta); --indigo-alto:var(--violeta-alto); --indigo-suave:var(--violeta-piel);
  --teal:var(--esmeralda); --teal-suave:var(--esmeralda-piel);
  --frambuesa:var(--rosa); --frambuesa-suave:var(--rosa-piel);
  --ambar:var(--naranja); --ambar-suave:var(--naranja-piel);

  /* Tipografía */
  --display:'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --texto:  'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --dato:   'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;

  --r:   14px;
  --r-s: 9px;
  --r-p: 999px;

  --sombra:   0 1px 2px rgba(28,24,48,.04), 0 6px 20px rgba(28,24,48,.06);
  --sombra-2: 0 4px 10px rgba(28,24,48,.08), 0 18px 40px rgba(28,24,48,.12);
  --sombra-3: 0 30px 70px rgba(28,24,48,.28);

  --curva: cubic-bezier(.22,.9,.3,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  font-family:var(--texto); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
[hidden]{ display:none !important; }
:focus-visible{ outline:2px solid var(--indigo); outline-offset:3px; border-radius:4px; }

.eyebrow{
  font-family:var(--dato); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--tinta-3); margin:0 0 4px;
}

/* =====================================================================
   IDENTIDAD DE MARCA — BARATOPRIMO
   Mismo tipo de letra (Inter), "Barato" en Violeta y "Primo" en Verde
   ===================================================================== */
.marca-bp{
  font-family:var(--display);
  font-weight:700;
  letter-spacing:-.03em;
  display:inline-flex;
  align-items:baseline;
  text-decoration:none;
}
.marca-bp__barato{
  color:var(--violeta);
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
}
/* En superficies con fondo violeta (como el menú lateral rail de la app), "Barato" va en blanco para óptimo contraste */
.rail .marca-bp__barato,
.rail__marca .marca-bp__barato,
.rail__nombre .marca-bp__barato{
  color:#fff !important;
}
.marca-bp__primo{
  color:var(--esmeralda) !important;
  font-family:inherit;
  font-weight:inherit;
  letter-spacing:inherit;
  transition:color .2s var(--curva);
}
html[data-tema="oscuro"] .marca-bp__primo,
[data-tema="oscuro"] .marca-bp__primo{
  color:#1FC79B !important;
}

/* ====================== ANIMACIÓN BASE ======================= */
@keyframes emerger{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }
@keyframes aparecer{ from{ opacity:0;} to{ opacity:1;} }
@keyframes crecerAbajo{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }
@keyframes trazar{ from{ stroke-dashoffset:1200;} to{ stroke-dashoffset:0;} }
@keyframes extender{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

.anim{ animation:emerger .42s var(--curva) backwards; }
.anim{ animation-delay:calc(var(--i,0) * 45ms); }

/* =========================== ACCESO =========================== */
.acceso{
  min-height:100dvh; display:grid; place-items:center; padding:24px;
  position:relative;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(108,59,244,0.16) 0%, transparent 55%),
    radial-gradient(80% 70% at 95% 100%, rgba(0,168,126,0.14) 0%, transparent 50%),
    #F3F2F9;
  transition:background .3s var(--curva);
}
html[data-tema="oscuro"] .acceso{
  background:
    radial-gradient(90% 70% at 15% 0%, #6E5CF0 0%, transparent 55%),
    radial-gradient(80% 70% at 95% 100%, #2BB3A3 0%, transparent 50%),
    #181424;
}
.acceso__tema{
  position:absolute; top:20px; right:20px; z-index:10;
  width:96px;
}
.acceso__tema .tema{
  background:var(--superficie);
  border:1px solid var(--linea);
  box-shadow:var(--sombra);
  backdrop-filter:blur(8px);
}
.acceso__tema .tema button{
  color:var(--tinta-2);
}
.acceso__tema .tema button:hover{
  color:var(--violeta);
  background:var(--violeta-piel);
}
.acceso__tema .tema button.activo{
  background:var(--violeta);
  color:#fff;
}
html[data-tema="oscuro"] .acceso__tema .tema{
  background:rgba(37,32,54,0.85);
  border:1px solid rgba(255,255,255,0.14);
}
html[data-tema="oscuro"] .acceso__tema .tema button{
  color:rgba(255,255,255,0.65);
}
html[data-tema="oscuro"] .acceso__tema .tema button:hover{
  color:#fff;
  background:rgba(255,255,255,0.12);
}
html[data-tema="oscuro"] .acceso__tema .tema button.activo{
  background:var(--violeta);
  color:#fff;
}
.acceso__caja{
  width:min(392px,100%); background:var(--superficie);
  border-radius:20px; padding:38px 34px; box-shadow:var(--sombra-3);
  animation:emerger .5s var(--curva);
  border:1px solid var(--linea);
}
.acceso__titulo{
  font-family:var(--display); font-size:38px; font-weight:700;
  letter-spacing:-.035em; line-height:1.02; margin:0 0 10px;
}
.acceso__nota{ color:var(--tinta-2); font-size:14px; margin:0 0 26px; }

/* ========================= ESTRUCTURA ========================= */
.capa{ display:grid; grid-template-columns:252px 1fr; min-height:100dvh; }

/* El menú es una pieza flotante con el mismo violeta y el mismo radio que
   el botón primario: la navegación y la acción hablan el mismo idioma. */
.rail{
  display:flex; flex-direction:column; padding:18px 12px 14px;
  position:sticky; top:12px; height:calc(100dvh - 24px);
  margin:12px 0 12px 12px; border-radius:20px;
  background:linear-gradient(170deg, #7B4DF7 0%, var(--violeta) 45%, #4E23D4 100%);
  color:#fff; box-shadow:0 10px 30px rgba(108,59,244,.32);
  overflow:hidden; box-sizing:border-box;
}
.rail__marca{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding:7px 11px; flex-shrink:0; cursor:default;
  background:var(--superficie); border-radius:12px;
  box-shadow:0 3px 12px rgba(20,10,50,.15);
  border:1px solid rgba(255,255,255,.25);
  transition:background .2s var(--curva), box-shadow .2s var(--curva);
}
.rail__logo{
  display:block; border-radius:10px; flex-shrink:0;
  box-shadow:0 2px 8px rgba(108,59,244,.25);
}
.rail__nombre{ font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.03em; }

.rail__cuerpo{
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  padding-right:2px; display:flex; flex-direction:column;
  scrollbar-width:none; -ms-overflow-style:none;
}
.rail__cuerpo::-webkit-scrollbar{ display:none; }

.rail__grupo{
  font-family:var(--dato); font-size:9.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin:12px 0 4px 10px;
}
.rail__grupo:first-child{ margin-top:2px; }

.rail__nav{ display:flex; flex-direction:column; gap:2px; }
.rail__link{
  color:rgba(255,255,255,.82); text-decoration:none; padding:8px 12px;
  border-radius:10px; font-size:13.5px; font-weight:600; position:relative;
  display:flex; align-items:center; gap:8px;
  transition:background .18s var(--curva), color .18s var(--curva), transform .18s var(--curva);
}
.rail__link:hover{
  background:rgba(255,255,255,.14); color:#fff; transform:translateX(2px);
}
.rail__link.activo{
  background:#fff; color:var(--violeta);
  box-shadow:0 4px 14px rgba(20,10,50,.18); font-weight:700;
}
html[data-tema="oscuro"] .rail__link.activo{
  background:var(--violeta); color:#fff;
  box-shadow:0 4px 16px rgba(139,99,255,.4);
}

.rail__pie{
  margin-top:auto; display:flex; flex-direction:column; gap:8px;
  padding:12px 4px 0; border-top:1px solid rgba(255,255,255,.14);
  flex-shrink:0;
}
.rail__usuario{
  font-family:var(--dato); font-size:10.5px; color:rgba(255,255,255,.65);
  text-align:center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  display:block; margin:2px 0;
}
.rail .btn--fantasma{
  color:#fff; border-color:rgba(255,255,255,.35); opacity:1;
  border-radius:var(--r-p); padding:6px 12px; font-size:12px;
}
.rail .btn--fantasma:hover{ background:rgba(255,255,255,.16); border-color:#fff; }

/* Interruptor de tema con iconos Sol y Luna */
.tema{
  display:flex; align-items:center; gap:4px;
  background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-p); padding:3px;
  width:100%; box-sizing:border-box;
}
.tema button{
  flex:1; background:transparent; border:0; border-radius:var(--r-p);
  color:rgba(255,255,255,.65); padding:6px 0;
  display:grid; place-items:center; cursor:pointer;
  transition:all .22s var(--curva); position:relative;
}
.tema button:hover{
  color:#fff; background:rgba(255,255,255,.12);
}
.tema button.activo{
  background:#ffffff; color:var(--violeta);
  box-shadow:0 2px 8px rgba(0,0,0,.2); transform:scale(1.02);
}
html[data-tema="oscuro"] .tema button.activo{
  background:var(--violeta); color:#fff;
  box-shadow:0 2px 10px rgba(139,99,255,.45);
}
.tema button svg{
  display:block; transition:transform .2s var(--curva);
}
.tema button:hover svg{
  transform:rotate(12deg) scale(1.1);
}

.lienzo{ padding:24px 28px 72px; min-width:0; }
.cabecera{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:22px; animation:emerger .4s var(--curva);
}
.cabecera__titulos{ min-width:0; }
.cabecera__titulo{
  font-family:var(--display); font-size:33px; font-weight:600;
  letter-spacing:-.035em; line-height:1.08; margin:0;
}
.cabecera__acciones-envoltura{
  display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap;
}
.cabecera__acciones{ display:flex; gap:8px; flex-wrap:wrap; }
.cabecera__campana{
  flex-shrink:0;
}

.cinta-demo{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--indigo-suave); border-radius:var(--r-p);
  padding:8px 8px 8px 18px; margin-bottom:18px;
  font-family:var(--dato); font-size:11px; color:var(--indigo);
}

/* ====================== BANDA DE ALERTAS ====================== */
.banda{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--ambar-suave); border-radius:var(--r);
  padding:13px 18px; margin-bottom:20px; font-size:14px; color:#7A4E06;
  animation:emerger .42s var(--curva);
}
.banda strong{ font-family:var(--dato); font-weight:700; }

/* ====================== MICRO TARJETAS ======================= */
.ficha{
  background:var(--superficie); border-radius:var(--r);
  box-shadow:var(--sombra); overflow:hidden;
  transition:box-shadow .25s var(--curva), transform .25s var(--curva);
}
.ficha--alza:hover{ box-shadow:var(--sombra-2); transform:translateY(-2px); }
.ficha + .ficha{ margin-top:14px; }
.ficha__cabecera{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 18px 13px; flex-wrap:wrap;
}
.ficha__titulo{
  font-family:var(--display); font-size:16px; font-weight:500;
  letter-spacing:-.02em; margin:0;
}
.ficha__nota{ font-size:12px; color:var(--tinta-3); margin:2px 0 0; font-family:var(--dato); }
.ficha__cuerpo{ padding:0 18px 18px; }
.ficha__pie{ padding:12px 18px; border-top:1px solid var(--linea-2); background:var(--superficie-2); }

.mosaico{ display:grid; gap:14px; }
.mosaico--auto{ grid-template-columns:repeat(auto-fit,minmax(184px,1fr)); }
.mosaico--2{ grid-template-columns:1.5fr 1fr; }
.mosaico--2 > *{ min-width:0; }

/* Métrica: la micro tarjeta más pequeña del sistema */
.metrica{
  background:var(--superficie); border-radius:var(--r); padding:16px 18px;
  box-shadow:var(--sombra); position:relative;
  transition:box-shadow .25s var(--curva), transform .25s var(--curva);
}
.metrica:hover{ box-shadow:var(--sombra-2); transform:translateY(-2px); }
.metrica__etiqueta{
  font-family:var(--dato); font-size:9.5px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tinta-3); margin-bottom:9px; display:flex; align-items:center; gap:7px;
}
.metrica__etiqueta::before{
  content:''; width:7px; height:7px; border-radius:3px; background:var(--violeta); flex-shrink:0;
}
/* Cada métrica lleva su color de fondo: el tono dice de qué habla la cifra. */
.metrica--violeta{ background:var(--violeta-piel); }
.metrica--teal{ background:var(--esmeralda-piel); }
.metrica--teal .metrica__etiqueta::before{ background:var(--esmeralda); }
.metrica--teal .metrica__valor{ color:#00795B; }
.metrica--frambuesa{ background:var(--rosa-piel); }
.metrica--frambuesa .metrica__etiqueta::before{ background:var(--rosa); }
.metrica--frambuesa .metrica__valor{ color:#C1204F; }
.metrica--ambar{ background:var(--naranja-piel); }
.metrica--ambar .metrica__etiqueta::before{ background:var(--naranja); }
.metrica--ambar .metrica__valor{ color:#B35F03; }
.metrica--cian{ background:var(--cian-piel); }
.metrica--cian .metrica__etiqueta::before{ background:var(--cian); }
.metrica--cian .metrica__valor{ color:#087D97; }
.metrica__valor{
  font-family:var(--dato); font-size:26px; font-weight:700;
  letter-spacing:-.045em; font-variant-numeric:tabular-nums; line-height:1.08;
}
.metrica__pie{ font-size:11.5px; color:var(--tinta-3); margin-top:5px; }
.delta{ font-family:var(--dato); font-size:11.5px; font-weight:700; }
.delta--sube{ color:var(--teal); }
.delta--baja{ color:var(--frambuesa); }

/* ==================== LISTAS DE FICHAS ======================= */
.lista{ display:flex; flex-direction:column; gap:8px; padding:2px 14px 16px; }
.lista__item{
  display:grid; align-items:center; gap:12px;
  background:var(--superficie-2); border-radius:var(--r-s); padding:11px 14px;
  transition:background .2s var(--curva), transform .2s var(--curva);
  animation:emerger .36s var(--curva) backwards;
  animation-delay:calc(var(--i,0) * 28ms);
}
.lista__item:hover{ background:var(--indigo-suave); transform:translateX(2px); }
.lista__nombre{ font-weight:600; font-size:14px; line-height:1.3; min-width:0; }
.lista__sub{
  font-family:var(--dato); font-size:10.5px; color:var(--tinta-3);
  display:block; font-weight:400; margin-top:1px;
}
.lista__dato{ font-family:var(--dato); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.lista__dato b{ font-size:15px; font-weight:700; letter-spacing:-.02em; }
.lista__dato small{ display:block; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-3); }

/* Rejillas concretas por pantalla */
.lista--stock .lista__item{ grid-template-columns:minmax(0,1fr) 128px 92px; }
.lista--mov   .lista__item{ grid-template-columns:74px minmax(0,1fr) 96px 92px; }
.lista--per   .lista__item{ grid-template-columns:minmax(0,1fr) 74px 88px 88px 88px; }
.lista--rep   .lista__item{ grid-template-columns:minmax(0,1fr) 84px 84px; }
.lista--kx    .lista__item{ grid-template-columns:118px 92px minmax(0,1fr) 92px 96px; }

.pos{ color:var(--teal); }
.neg{ color:var(--frambuesa); }
.apagado{ opacity:.42; }

/* Medidor de stock */
.medidor{ display:flex; align-items:center; gap:9px; }
.medidor__riel{ flex:1; min-width:52px; height:8px; background:#DFDCEE; border-radius:var(--r-p); overflow:hidden; }
.medidor__barra{
  height:100%; min-width:4px; background:var(--esmeralda); border-radius:var(--r-p);
  transform-origin:left; animation:extender .6s var(--curva) backwards;
  animation-delay:calc(var(--i,0) * 28ms + 120ms);
}
.medidor__barra.bajo{ background:var(--naranja); }
.medidor__barra.vacio{ background:var(--rosa); }
.medidor__min{ font-weight:500; }
.medidor__min{ font-family:var(--dato); font-size:10px; color:var(--tinta-3); white-space:nowrap; }

.pastilla{
  display:inline-block; font-family:var(--dato); font-size:9.5px; font-weight:700;
  letter-spacing:.08em; padding:4px 9px; border-radius:var(--r-p); text-transform:uppercase;
}
.pastilla--entrada{ background:var(--teal-suave); color:var(--teal); }
.pastilla--salida{ background:var(--frambuesa-suave); color:var(--frambuesa); }
.pastilla--ajuste{ background:var(--linea-2); color:var(--tinta-2); }
.pastilla--retencion{ background:var(--naranja-suave); color:var(--naranja); border:1px solid rgba(245,158,11,.25); }
.pastilla--credito{ background:var(--cian-suave); color:var(--cian); }
.pastilla--exento{ background:var(--teal-suave); color:var(--teal); }

/* ========================= GRÁFICAS ========================== */
.grafica{ width:100%; height:auto; display:block; overflow:visible; }
.grafica-vacia{
  padding:48px 20px; text-align:center; color:var(--tinta-3);
  font-size:13px; font-family:var(--dato);
}
.g-entrada, .g-salida{ transform-box:fill-box; animation:crecerAbajo .55s var(--curva) backwards; }
.g-entrada{ fill:var(--teal); transform-origin:bottom; }
.g-salida{ fill:var(--frambuesa); transform-origin:top; }
.g-guia{ stroke:var(--linea-2); stroke-width:1; }
.g-eje-central{ stroke:var(--linea); stroke-width:1.5; }
.g-eje{ font-family:var(--dato); font-size:10.5px; fill:var(--tinta-3); }
.g-linea{
  stroke:var(--indigo); stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round;
  stroke-dasharray:1200; animation:trazar 1.1s var(--curva) backwards;
}
.g-area{ fill:var(--indigo); opacity:.07; animation:aparecer .8s .3s backwards; }
.g-punto{ fill:var(--superficie); stroke:var(--indigo); stroke-width:2; animation:aparecer .4s .5s backwards; }

.leyenda-grafica{ display:flex; gap:16px; flex-wrap:wrap; font-size:12px; color:var(--tinta-2); }
.leyenda-grafica span{ display:flex; align-items:center; gap:6px; }
.leyenda-grafica i{ width:9px; height:9px; border-radius:3px; display:inline-block; }

/* Ranking */
.ranking{ list-style:none; margin:0; padding:2px 14px 16px; display:flex; flex-direction:column; gap:8px; }
.ranking__fila{
  display:grid; grid-template-columns:24px minmax(0,1.1fr) 1.5fr auto;
  align-items:center; gap:12px; background:var(--superficie-2);
  border-radius:var(--r-s); padding:10px 14px;
  animation:emerger .36s var(--curva) backwards;
  animation-delay:calc(var(--i,0) * 28ms);
  transition:background .2s var(--curva);
}
.ranking__fila:hover{ background:var(--indigo-suave); }
.ranking__pos{ font-family:var(--dato); font-size:10.5px; color:var(--tinta-3); }
.ranking__nombre{ font-size:13.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ranking__sku{ font-family:var(--dato); font-size:10px; color:var(--tinta-3); display:block; font-weight:400; }
.ranking__riel{ height:8px; background:var(--linea); border-radius:var(--r-p); overflow:hidden; }
.ranking__barra{
  display:block; height:100%; background:var(--indigo); border-radius:var(--r-p);
  transform-origin:left; animation:extender .6s var(--curva) backwards;
  animation-delay:calc(var(--i,0) * 28ms + 120ms);
}
.ranking__valor{ font-family:var(--dato); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }

/* Composición */
.apilada{ display:flex; height:14px; border-radius:var(--r-p); overflow:hidden; margin-bottom:16px; background:var(--linea); gap:2px; }
.apilada__tramo{ display:block; height:100%; border-radius:var(--r-p); transform-origin:left; animation:extender .6s var(--curva) backwards; }
.leyenda{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; font-size:13px; }
.leyenda li{ display:flex; align-items:center; gap:9px; }
.leyenda b{ margin-left:auto; font-family:var(--dato); font-weight:700; }
.leyenda__punto{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }

/* ========================= CONTROLES ========================= */
.btn{
  font-family:var(--texto); font-size:13.5px; font-weight:600;
  padding:9px 16px; border-radius:var(--r-p); border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background .2s var(--curva), border-color .2s var(--curva),
             transform .18s var(--curva), box-shadow .2s var(--curva), opacity .2s;
}
.btn:active{ transform:scale(.97); }
.btn--primario{ background:var(--indigo); color:#fff; box-shadow:0 4px 14px rgba(90,74,227,.3); }
.btn--primario:hover{ background:var(--indigo-alto); box-shadow:0 6px 20px rgba(90,74,227,.4); }
.btn--secundario{ background:var(--superficie); color:var(--tinta); border-color:var(--linea); }
.btn--secundario:hover{ border-color:var(--indigo); color:var(--indigo); }
.btn--fantasma{ background:transparent; color:inherit; border-color:currentColor; opacity:.65; }
.btn--fantasma:hover{ opacity:1; }
.btn--chico{ font-size:12px; padding:6px 12px; }
.btn--ancho{ width:100%; padding:12px; }
.btn:disabled{ opacity:.4; cursor:not-allowed; }

/* Chips: selector de periodo y granularidad */
.chips{ display:inline-flex; gap:5px; flex-wrap:wrap; }
.chips button{
  font-family:var(--texto); font-size:12.5px; font-weight:600; color:var(--tinta-2);
  background:var(--superficie-2); border:1px solid transparent; border-radius:var(--r-p);
  padding:6px 13px; cursor:pointer;
  transition:background .2s var(--curva), color .2s var(--curva), transform .18s var(--curva);
}
.chips button:hover{ background:var(--linea-2); color:var(--tinta); }
.chips button:active{ transform:scale(.95); }
.chips button.activo{ background:var(--indigo); color:#fff; box-shadow:0 3px 10px rgba(90,74,227,.28); }

.filtros{ display:flex; align-items:flex-end; gap:11px; flex-wrap:wrap; }
.filtro{ display:flex; flex-direction:column; gap:5px; }
.filtro > span{
  font-family:var(--dato); font-size:9px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tinta-3);
}

.campo{ margin-bottom:14px; }
.campo label{
  display:block; font-family:var(--dato); font-size:9.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-3); margin-bottom:6px;
}
input, select, textarea{
  width:100%; font-family:var(--texto); font-size:14px; color:var(--tinta);
  background:var(--superficie-2); border:1px solid var(--linea);
  border-radius:var(--r-s); padding:10px 12px;
  transition:border-color .2s var(--curva), background .2s var(--curva);
}
input:hover, select:hover{ border-color:var(--tinta-3); }
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--indigo); background:var(--superficie);
  box-shadow:0 0 0 3px var(--indigo-suave);
}
input[type=number], input[type=date]{ font-family:var(--dato); }
.campos-fila{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.buscador{ max-width:250px; }

.error{ color:var(--frambuesa); font-size:13px; margin:12px 0 0; animation:emerger .3s var(--curva); }
.vacio{ padding:46px 20px; text-align:center; color:var(--tinta-2); animation:emerger .4s var(--curva); }
.vacio h4{ font-family:var(--display); font-size:18px; font-weight:500; color:var(--tinta); margin:0 0 6px; letter-spacing:-.02em; }
.vacio p{ margin:0 0 16px; font-size:14px; }

/* =========================== MODAL =========================== */
.modal{
  position:fixed; inset:0; background:rgba(34,30,48,.42);
  backdrop-filter:blur(3px); display:grid; place-items:center; padding:20px; z-index:40;
  animation:aparecer .2s;
}
.modal__panel{
  width:min(560px,100%); max-height:88dvh; overflow:auto;
  background:var(--superficie); border-radius:20px; box-shadow:var(--sombra-3);
  animation:emerger .3s var(--curva);
}
.modal__cabecera{ display:flex; align-items:center; justify-content:space-between; padding:20px 24px 14px; }
.modal__cabecera h3{ font-family:var(--display); font-size:20px; font-weight:500; letter-spacing:-.025em; margin:0; }
.modal__cuerpo{ padding:0 24px 20px; }
.modal__pie{ display:flex; justify-content:flex-end; gap:8px; padding:16px 24px; border-top:1px solid var(--linea-2); }
.modal__panel--ancho{ width:min(860px, 96vw); }

/* ================== GUÍA E IMPORTACIÓN CSV ================== */
.guia-csv{ display:flex; flex-direction:column; gap:16px; }
.guia-csv__stepper{
  display:flex; align-items:center; justify-content:space-between;
  background:var(--superficie-2); padding:6px; border-radius:var(--r);
  border:1px solid var(--linea); gap:6px; overflow-x:auto;
}
.guia-csv__step-btn{
  flex:1; min-width:120px; display:flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:var(--r-s); border:none;
  background:transparent; color:var(--tinta-2); font-size:12.5px;
  font-weight:600; cursor:pointer; transition:all .18s ease; text-align:left;
}
.guia-csv__step-btn:hover{ background:var(--superficie); color:var(--tinta); }
.guia-csv__step-btn.activo{
  background:var(--superficie); color:var(--violeta);
  box-shadow:0 2px 8px rgba(108,59,244,.12);
}
.guia-csv__num{
  display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:50%; background:var(--linea); color:var(--tinta-2);
  font-size:11px; font-weight:700; flex-shrink:0;
}
.guia-csv__step-btn.activo .guia-csv__num{
  background:var(--violeta); color:#fff;
}
.guia-csv__step-btn.completado .guia-csv__num{
  background:var(--esmeralda); color:#fff;
}
.guia-csv__contenido{
  background:var(--superficie); border:1px solid var(--linea);
  border-radius:var(--r); padding:18px 20px; min-height:280px;
}
.guia-csv__titulo{
  font-family:var(--display); font-size:17px; font-weight:600;
  color:var(--tinta); margin:0 0 8px; display:flex; align-items:center; gap:8px;
}
.guia-csv__desc{
  font-size:13.5px; color:var(--tinta-2); line-height:1.55; margin:0 0 16px;
}
.guia-grid-columnas{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:10px; margin-bottom:14px;
}
.guia-col-card{
  background:var(--superficie-2); border:1px solid var(--linea-2);
  border-radius:var(--r-s); padding:10px 12px; font-size:12.5px;
}
.guia-col-card__top{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;
}
.guia-col-card__nombre{
  font-weight:700; font-family:var(--dato); color:var(--tinta);
}
.guia-col-card__tipo{
  font-size:10.5px; font-weight:600; padding:2px 6px; border-radius:4px;
}
.guia-col-card__tipo--req{ background:var(--rosa-piel); color:var(--rosa); }
.guia-col-card__tipo--opt{ background:var(--violeta-piel); color:var(--violeta); }
.guia-col-card__desc{ color:var(--tinta-2); font-size:12px; line-height:1.4; margin:0; }

.guia-ejemplo-tabla{
  width:100%; border-collapse:collapse; font-size:12px; margin-top:8px;
  background:var(--superficie-2); border-radius:var(--r-s); overflow:hidden;
  border:1px solid var(--linea);
}
.guia-ejemplo-tabla th{
  background:var(--fondo); color:var(--tinta); padding:8px 10px;
  text-align:left; font-family:var(--dato); font-weight:600; border-bottom:1px solid var(--linea);
}
.guia-ejemplo-tabla td{
  padding:7px 10px; border-bottom:1px solid var(--linea-2);
  color:var(--tinta-2); font-family:var(--dato);
}
.guia-tips{
  display:flex; flex-direction:column; gap:8px; margin-top:10px;
}
.guia-tip{
  display:flex; align-items:flex-start; gap:10px; padding:10px 12px;
  background:var(--cian-piel); border-radius:var(--r-s); color:var(--tinta);
  font-size:12.5px; line-height:1.45;
}
.guia-tip--exito{ background:var(--esmeralda-piel); }
.guia-tip--aviso{ background:var(--naranja-piel); }

.dropzone-csv{
  border:2px dashed var(--linea); border-radius:var(--r); padding:32px 20px;
  text-align:center; background:var(--superficie-2); cursor:pointer;
  transition:all .2s ease; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px;
}
.dropzone-csv:hover, .dropzone-csv--activo{
  border-color:var(--violeta); background:var(--violeta-piel);
}
.dropzone-csv__icono{ font-size:38px; line-height:1; }
.dropzone-csv__texto{ font-weight:600; font-size:14px; color:var(--tinta); }
.dropzone-csv__sub{ font-size:12.5px; color:var(--tinta-3); }

.resumen-importacion{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px; margin:14px 0;
}
.resumen-card{
  background:var(--superficie-2); border:1px solid var(--linea);
  border-radius:var(--r-s); padding:10px 14px; text-align:center;
}
.resumen-card__num{ font-family:var(--dato); font-size:20px; font-weight:700; }
.resumen-card__etiqueta{ font-size:11.5px; color:var(--tinta-2); font-weight:500; }
.resumen-card--nuevos .resumen-card__num{ color:var(--esmeralda); }
.resumen-card--actualizar .resumen-card__num{ color:var(--cian); }
.resumen-card--errores .resumen-card__num{ color:var(--rosa); }

.tabla-preview-csv-wrap{
  max-height:240px; overflow-y:auto; border:1px solid var(--linea);
  border-radius:var(--r-s); margin-top:10px; background:var(--superficie);
}
.tabla-preview-csv{
  width:100%; border-collapse:collapse; font-size:12px;
}
.tabla-preview-csv th{
  position:sticky; top:0; background:var(--superficie-2); color:var(--tinta);
  padding:8px 10px; text-align:left; font-weight:600; border-bottom:1px solid var(--linea);
  z-index:2;
}
.tabla-preview-csv td{
  padding:7px 10px; border-bottom:1px solid var(--linea-2); color:var(--tinta-2);
}
.tabla-preview-csv tr:last-child td{ border-bottom:none; }
.tabla-preview-csv tr.fila--error{ background:rgba(240,53,107,.06); }

.progreso-importacion{
  display:flex; flex-direction:column; gap:6px; margin:18px 0;
}
.progreso-importacion__barra{
  height:10px; border-radius:var(--r-p); background:var(--linea);
  overflow:hidden; position:relative;
}
.progreso-importacion__relleno{
  height:100%; background:var(--violeta); border-radius:var(--r-p);
  transition:width .2s ease;
}
.progreso-importacion__texto{
  display:flex; justify-content:space-between; font-size:12.5px;
  color:var(--tinta-2); font-weight:600;
}

html[data-tema="oscuro"] .guia-csv__stepper{ background:#1E1A2C; border-color:#2F2944; }
html[data-tema="oscuro"] .guia-csv__step-btn:hover{ background:#28233C; color:#fff; }
html[data-tema="oscuro"] .guia-csv__step-btn.activo{ background:#2A2345; color:#C4ADFF; }
html[data-tema="oscuro"] .guia-csv__num{ background:#373050; color:#A79FC4; }
html[data-tema="oscuro"] .guia-csv__contenido{ background:#181524; border-color:#2F2944; }
html[data-tema="oscuro"] .guia-col-card{ background:#201C31; border-color:#322B4D; }
html[data-tema="oscuro"] .guia-col-card__tipo--req{ background:rgba(240,53,107,.2); color:#FFA4BD; }
html[data-tema="oscuro"] .guia-col-card__tipo--opt{ background:rgba(108,59,244,.25); color:#C4ADFF; }
html[data-tema="oscuro"] .guia-ejemplo-tabla{ background:#1C182D; border-color:#322B4D; }
html[data-tema="oscuro"] .guia-ejemplo-tabla th{ background:#241E3A; border-color:#322B4D; }
html[data-tema="oscuro"] .guia-ejemplo-tabla td{ border-color:#2A2440; }
html[data-tema="oscuro"] .guia-tip{ background:#162C3A; color:#E3F5FC; }
html[data-tema="oscuro"] .guia-tip--exito{ background:#133328; color:#D4F8E8; }
html[data-tema="oscuro"] .guia-tip--aviso{ background:#392612; color:#FFE8CF; }
html[data-tema="oscuro"] .dropzone-csv{ background:#1D192E; border-color:#383056; }
html[data-tema="oscuro"] .dropzone-csv:hover, html[data-tema="oscuro"] .dropzone-csv--activo{
  background:#261E42; border-color:#7F52FF;
}
html[data-tema="oscuro"] .resumen-card{ background:#1E1A2F; border-color:#322B4E; }
html[data-tema="oscuro"] .tabla-preview-csv-wrap{ background:#171424; border-color:#322B4E; }
html[data-tema="oscuro"] .tabla-preview-csv th{ background:#221C36; border-color:#322B4E; }
html[data-tema="oscuro"] .tabla-preview-csv td{ border-color:#28223E; }


/* ========================== AVISOS =========================== */
.avisos{ position:fixed; right:22px; bottom:22px; display:flex; flex-direction:column; gap:8px; z-index:50; }
.aviso{
  background:#1C1830; color:#fff; font-size:13.5px; font-weight:600;
  padding:12px 20px; border-radius:var(--r-p);
  box-shadow:0 10px 25px rgba(12,6,38,.35), 0 2px 6px rgba(12,6,38,.2);
  border:1px solid rgba(255,255,255,.14);
  animation:emerger .3s var(--curva);
  backdrop-filter:blur(8px);
}
.aviso--error{
  background:var(--rosa) !important; color:#fff !important;
  border-color:rgba(255,255,255,.2) !important;
  box-shadow:0 10px 25px rgba(240,53,107,.4) !important;
}

html[data-tema="oscuro"] .aviso{
  background:linear-gradient(135deg, #2D234C 0%, #20173B 100%);
  color:#EFEDF7;
  border:1px solid rgba(139,99,255,.35);
  box-shadow:0 14px 34px rgba(0,0,0,.6), 0 0 16px rgba(108,59,244,.25);
}

/* ========================== TABLET =========================== */
@media (max-width:1080px){
  .mosaico--2{ grid-template-columns:1fr; }
  .lista--kx .lista__item{ grid-template-columns:110px 84px minmax(0,1fr) 88px; }
  .lista--kx .lista__item > :nth-child(4){ display:none; }
}

/* ========================== MÓVIL ============================ */
@media (max-width:820px){
  .capa{ grid-template-columns:1fr; }

  .lienzo{ padding:18px 14px 56px; }
  .cabecera__titulo{ font-size:26px; }
  .cabecera__campana{ display:none !important; }
  .cabecera__acciones-envoltura{ width:100%; margin-left:0; }
  .cabecera__acciones{ width:100%; }
  .cabecera__acciones .btn{ flex:1; }
  .mosaico--auto{ grid-template-columns:1fr 1fr; gap:10px; }
  .metrica{ padding:13px 15px; }
  .metrica__valor{ font-size:20px; }
  .campos-fila{ grid-template-columns:1fr; }
  .buscador{ max-width:none; width:100%; }
  .filtros{ width:100%; }
  .filtro{ flex:1; min-width:135px; }
  .chips{ width:100%; }
  .chips button{ flex:1; }
  .avisos{ right:14px; left:14px; bottom:14px; }

  /* Las fichas de lista se reorganizan en dos columnas apiladas. */
  .lista{ padding:2px 12px 14px; }
  .lista__item{ grid-template-columns:1fr auto !important; gap:8px 12px; padding:13px 14px; }
  .lista__item > .lista__nombre{ grid-column:1 / -1; }
  .lista__item > .lista__medidor{ grid-column:1 / -1; }
  .lista--mov .lista__item > :first-child{ order:2; }

  .ranking{ padding:2px 12px 14px; }
  .ranking__fila{ grid-template-columns:22px minmax(0,1fr) auto; gap:9px; }
  .ranking__riel{ grid-column:2 / -1; }
}

@media (max-width:430px){
  .mosaico--auto{ grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  .g-linea{ stroke-dasharray:none; }
}

@media print{
  .rail, .cabecera__acciones, .cinta-demo, .avisos, .chips, .filtros{ display:none !important; }
  .capa{ grid-template-columns:1fr; }
  .ficha, .metrica{ box-shadow:none; border:1px solid var(--linea); break-inside:avoid; }
  body{ background:#fff; }
  *{ animation:none !important; }
}

/* =====================================================================
   FICHA DE PRODUCTO — la pantalla que abre al pulsar una micro tarjeta
   ===================================================================== */
.detalle__encabezado{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:18px; flex-wrap:wrap; padding:20px 22px 18px;
  background:linear-gradient(135deg, var(--violeta) 0%, #8B5CF6 55%, var(--cian) 140%);
  color:#fff;
}
.detalle__titulo{
  font-family:var(--display); font-size:26px; font-weight:600;
  letter-spacing:-.03em; margin:0 0 6px; line-height:1.1;
}
.detalle__meta{
  font-family:var(--dato); font-size:11.5px; letter-spacing:.06em;
  color:rgba(255,255,255,.82); display:flex; gap:14px; flex-wrap:wrap;
}
.detalle__estado{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.18); border-radius:var(--r-p);
  padding:6px 13px; font-family:var(--dato); font-size:11px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
}
.detalle__estado::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; }
.detalle__encabezado .btn--secundario{ background:rgba(255,255,255,.95); border-color:transparent; }
.detalle__encabezado .btn--fantasma{ color:#fff; border-color:rgba(255,255,255,.55); opacity:1; }
.detalle__encabezado .btn--fantasma:hover{ background:rgba(255,255,255,.16); }

.enlaces{ display:flex; gap:8px; flex-wrap:wrap; }

/* Rejilla de datos del producto */
.datos{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:1px; background:var(--linea-2);
}
.datos__celda{ background:var(--superficie); padding:14px 18px; }
.datos__etiqueta{
  font-family:var(--dato); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tinta-3); margin-bottom:5px;
}
.datos__valor{
  font-family:var(--dato); font-size:17px; font-weight:700;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums;
}
.datos__valor small{ font-size:11px; font-weight:400; color:var(--tinta-3); letter-spacing:0; }

/* Micro tarjeta pulsable */
.lista__item[data-abrir]{ cursor:pointer; }
.lista__item[data-abrir]::after{
  content:'›'; font-size:19px; color:var(--tinta-3); line-height:1;
  transition:transform .2s var(--curva), color .2s var(--curva);
}
.lista__item[data-abrir]:hover::after{ transform:translateX(3px); color:var(--violeta); }

.lista--stock .lista__item[data-abrir]{ grid-template-columns:minmax(0,1fr) 132px 92px 14px; }
.lista--mov   .lista__item[data-abrir]{ grid-template-columns:74px minmax(0,1fr) 96px 92px 14px; }

@media (max-width:820px){
  .lista__item[data-abrir]::after{ display:none; }
  .detalle__encabezado{ padding:18px 16px 16px; }
  .detalle__titulo{ font-size:21px; }
  .enlaces{ width:100%; }
  .enlaces .btn{ flex:1; }
}

/* =====================================================================
   MODO OSCURO
   No es el claro invertido: los fondos tintados de las métricas bajan a
   tonos profundos y el texto de cifra sube de luminosidad, para que el
   color siga diciendo lo mismo sin encandilar.
   ===================================================================== */
html[data-tema="oscuro"]{
  --fondo:      #131020;
  --superficie: #1D192C;
  --superficie-2:#252036;
  --linea:      #322C46;
  --linea-2:    #292339;

  --tinta:   #EFEDF7;
  --tinta-2: #B0A8C8;
  --tinta-3: #857DA0;

  --violeta:      #8B63FF;
  --violeta-alto: #7B4DF7;
  --violeta-piel: #2A2247;

  --esmeralda:      #1FC79B;
  --esmeralda-piel: #10362F;

  --rosa:      #FF5C86;
  --rosa-piel: #3B1F2C;

  --naranja:      #FFA43D;
  --naranja-piel: #3A2A15;

  --cian:      #2CC3E0;
  --cian-piel: #123039;

  --sombra:   0 1px 2px rgba(0,0,0,.35), 0 6px 20px rgba(0,0,0,.28);
  --sombra-2: 0 4px 10px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.42);
  --sombra-3: 0 30px 70px rgba(0,0,0,.6);
}

html[data-tema="oscuro"] .rail{
  background:linear-gradient(170deg, #3B2A72 0%, #2C1F58 55%, #221846 100%);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
html[data-tema="oscuro"] .rail__marca{
  background:var(--superficie);
  border-color:rgba(255,255,255,.1);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}
html[data-tema="oscuro"] .rail__link.activo{ background:var(--violeta); color:#fff; }
html[data-tema="oscuro"] .tema button.activo{ background:var(--violeta); color:#fff; }

html[data-tema="oscuro"] .metrica--teal .metrica__valor{ color:#4FE0BA; }
html[data-tema="oscuro"] .metrica--frambuesa .metrica__valor{ color:#FF87A6; }
html[data-tema="oscuro"] .metrica--ambar .metrica__valor{ color:#FFC172; }
html[data-tema="oscuro"] .metrica--cian .metrica__valor{ color:#63D9F0; }

html[data-tema="oscuro"] .banda{ color:#FFC98A; }
html[data-tema="oscuro"] .medidor__riel{ background:#332C48; }
html[data-tema="oscuro"] .btn--primario{ box-shadow:0 4px 14px rgba(139,99,255,.3); }
html[data-tema="oscuro"] .detalle__encabezado{
  background:linear-gradient(135deg, #6B3FD8 0%, #7B4DF7 55%, #1E7D96 140%);
}
html[data-tema="oscuro"] .modal{ background:rgba(0,0,0,.6); }
html[data-tema="oscuro"] .g-punto{ fill:var(--superficie); }

/* Evita el destello blanco antes de que aplique el tema guardado */
html[data-tema="oscuro"] body{ background:var(--fondo); }

/* ====================== IMAGEN DE PRODUCTO ==================== */
.miniatura{
  width:42px; height:42px; border-radius:var(--r-s); object-fit:cover;
  background:var(--linea-2); flex-shrink:0; display:block;
}
.miniatura--vacia{
  display:grid; place-items:center; font-family:var(--dato);
  font-size:13px; font-weight:700; color:var(--tinta-3);
  background:var(--linea-2);
}
.lista__item .miniatura{ margin-right:2px; }
.lista--stock .lista__item[data-abrir]{ grid-template-columns:42px minmax(0,1fr) 132px 92px 14px; }

.subida{
  display:flex; align-items:center; gap:14px;
  background:var(--superficie-2); border:1px dashed var(--linea);
  border-radius:var(--r-s); padding:12px;
}
.subida__vista{
  width:64px; height:64px; border-radius:var(--r-s); object-fit:cover;
  background:var(--linea-2); flex-shrink:0;
}
.subida__acciones{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.subida__nota{ font-size:11.5px; color:var(--tinta-3); font-family:var(--dato); }
.subida input[type=file]{ display:none; }

.detalle__foto{
  width:74px; height:74px; border-radius:var(--r-s); object-fit:cover;
  background:rgba(255,255,255,.2); flex-shrink:0;
}
.detalle__cara{ display:flex; gap:16px; align-items:center; }

@media (max-width:820px){
  .lista--stock .lista__item[data-abrir]{ grid-template-columns:1fr auto !important; }
  .lista__item .miniatura{ grid-row:span 2; width:38px; height:38px; }
}

/* =====================================================================
   MÓDULO COMERCIAL — clientes, ventas y comprobante
   ===================================================================== */
.lista--cli .lista__item{ grid-template-columns:42px minmax(0,1fr) 96px 116px; }
.lista--ven .lista__item{ grid-template-columns:96px minmax(0,1fr) 108px 116px; }
.lista--ren .lista__item{ grid-template-columns:minmax(0,1fr) 72px 120px 96px 96px 104px 34px; }
.lista--cli .lista__item, .lista--ven .lista__item{ cursor:pointer; }

/* Totales: la escalera de subtotal, impuesto y total */
.totales{
  display:flex; flex-direction:column; gap:2px;
  padding:14px 18px; background:var(--superficie-2);
  border-top:1px solid var(--linea-2);
}
.totales__fila{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:7px 0; font-size:14px; color:var(--tinta-2);
}
.totales__fila b{
  font-family:var(--dato); font-size:16px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--tinta);
}
.totales__fila--total{
  border-top:2px solid var(--linea); margin-top:6px; padding-top:13px;
  color:var(--tinta); font-weight:700;
}
.totales__fila--total b{
  font-size:24px; font-weight:700; letter-spacing:-.03em; color:var(--violeta);
}

/* Comprobante */
.comprobante__cabecera{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap; padding:20px 22px 18px;
  border-bottom:1px solid var(--linea-2);
}
.comprobante__numero{
  font-family:var(--display); font-size:30px; font-weight:600;
  letter-spacing:-.03em; margin:0; line-height:1.05;
}
.comprobante__fecha{ font-family:var(--dato); font-size:12px; color:var(--tinta-3); margin:5px 0 0; }
.comprobante__qr{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; }
.comprobante__qr svg{ border-radius:var(--r-s); display:block; }
.comprobante__pie{
  padding:14px 22px; font-size:12px; color:var(--tinta-3);
  border-top:1px solid var(--linea-2); text-align:center;
}

table.renglones{ width:100%; border-collapse:collapse; font-size:14px; }
table.renglones thead th{
  text-align:left; font-family:var(--dato); font-size:9.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-3);
  padding:12px 18px; background:var(--superficie-2); white-space:nowrap;
}
table.renglones tbody td{ padding:11px 18px; border-bottom:1px solid var(--linea-2); }
table.renglones tbody tr:last-child td{ border-bottom:0; }
table.renglones .num{
  font-family:var(--dato); font-variant-numeric:tabular-nums;
  text-align:right; white-space:nowrap;
}

@media (max-width:820px){
  .lista--cli .lista__item, .lista--ven .lista__item,
  .lista--ren .lista__item{ grid-template-columns:1fr auto !important; }
  .lista--ren .lista__item input{ width:100% !important; }
  .comprobante__numero{ font-size:24px; }
  table.renglones thead{ display:none; }
  table.renglones tbody tr{ display:grid; grid-template-columns:1fr auto; padding:12px 14px; }
  table.renglones tbody td{ padding:2px 0; border:0; }
  table.renglones tbody td:first-child{ grid-column:1 / -1; font-weight:600; padding-bottom:6px; }
  .totales__fila--total b{ font-size:20px; }
}

/* Impresión: solo el comprobante, en blanco y negro sobre la hoja */
@media print{
  html[data-tema="oscuro"]{ --fondo:#fff; --superficie:#fff; --superficie-2:#fff;
    --tinta:#000; --tinta-2:#333; --tinta-3:#666; --linea:#ccc; --linea-2:#e5e5e5; }
  .comprobante{ border:1px solid #ccc; }
  .comprobante__qr svg{ width:120px; height:120px; }
  .totales__fila--total b{ color:#000; }
  .detalle__encabezado{ background:#fff !important; color:#000 !important; }
}

/* =====================================================================
   TICKET DE IMPRESIÓN
   ---------------------------------------------------------------------
   Vive fuera de la aplicación, oculto en pantalla. Al imprimir se esconde
   todo lo demás y queda solo el comprobante, con el ancho del rollo real:
   58 u 80 mm de papel térmico, o una hoja A4 si se prefiere.
   ===================================================================== */
#ticket{ display:none; }

#ticket .tk{
  font-family:var(--dato);
  color:#000; background:#fff;
  font-size:11px; line-height:1.45;
  width:72mm;                 /* 80 mm de papel menos los márgenes */
  margin:0 auto; padding:0;
}
#ticket[data-ancho="58"] .tk{ width:50mm; font-size:9.5px; line-height:1.4; }
/* En hoja completa no se estira el ticket a todo el ancho: se centra una
   columna legible, como un recibo pegado en la página. */
#ticket[data-ancho="a4"]  .tk{ width:104mm; font-size:12px; line-height:1.5; }
#ticket[data-ancho="a4"]  .tk__negocio{ font-size:18px; }
#ticket[data-ancho="a4"]  .tk__numero{ font-size:20px; }

.tk__centro{ text-align:center; }
.tk__logo-caja, .previa__logo-caja{
  display:flex; justify-content:center; align-items:center;
  margin:0 auto 5px;
}
.tk__logo, .previa__logo{
  max-width:130px; max-height:60px; width:auto; height:auto;
  object-fit:contain; display:block; margin:0 auto;
}
#ticket[data-ancho="58"] .tk__logo{ max-width:90px; max-height:42px; }
#ticket[data-ancho="a4"] .tk__logo{ max-width:160px; max-height:75px; }

.tk__seniat, .previa__seniat{
  font-weight:400 !important;
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin:2px 0 5px;
  text-align:center;
  line-height:1.2;
}
#ticket[data-ancho="58"] .tk__seniat{ font-size:10px; letter-spacing:0.12em; }
#ticket[data-ancho="a4"] .tk__seniat{ font-size:14px; letter-spacing:0.2em; }

.tk__negocio{
  font-weight:700; font-size:14px; letter-spacing:-.02em;
  text-transform:uppercase; margin:0 0 2px;
}
#ticket[data-ancho="58"] .tk__negocio{ font-size:12px; }
.tk__sub{ font-size:10px; margin:0; }
#ticket[data-ancho="58"] .tk__sub{ font-size:8.5px; }

.tk__regla{ border:0; border-top:1px dashed #000; margin:7px 0; }
.tk__doble{ border:0; border-top:2px solid #000; margin:7px 0; }

.tk__numero{ font-size:16px; font-weight:700; letter-spacing:.02em; margin:0; }
#ticket[data-ancho="58"] .tk__numero{ font-size:14px; }

/* Pares etiqueta/valor de la cabecera */
.tk__par{ display:flex; justify-content:space-between; gap:8px; }
.tk__par span:first-child{ flex-shrink:0; }
.tk__par span:last-child{ text-align:right; word-break:break-word; }

/* Renglones: nombre completo arriba, aritmética debajo alineada a la
   derecha. Es la única forma de que quepa un nombre largo en 50 mm. */
.tk__item{ margin:5px 0; }
.tk__item-nombre{ word-break:break-word; }
.tk__item-calculo{ display:flex; justify-content:space-between; gap:8px; }

.tk__totales{ margin-top:4px; }
.tk__total-fila{ display:flex; justify-content:space-between; gap:10px; }
.tk__total-fila--grande{ font-size:15px; font-weight:700; margin-top:3px; }
#ticket[data-ancho="58"] .tk__total-fila--grande{ font-size:13px; }

.tk__qr{ margin:9px auto 4px; display:block; }
.tk__pie{ font-size:9px; line-height:1.4; margin:0; }
#ticket[data-ancho="58"] .tk__pie{ font-size:8px; }

/* Selector de ancho, solo en pantalla */
.ancho-ticket{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

@media print{
  /* Fuera todo lo que no sea el ticket */
  .capa, .cinta-demo, .avisos, .modal, .acceso{ display:none !important; }
  #ticket{ display:block !important; }
  html, body{
    background:#fff !important; margin:0 !important; padding:0 !important;
    height:auto !important;
  }
  #ticket .tk{ page-break-inside:auto; }
  .tk__item, .tk__totales{ page-break-inside:avoid; }
}

/* Formas de pago */
.lista--pago .lista__item{ grid-template-columns:minmax(0,1fr) 116px 34px; }

.confirmar-lista{
  display:flex; flex-direction:column; gap:1px;
  background:var(--linea-2); border-radius:var(--r-s);
  overflow:hidden; margin-top:6px;
}
.confirmar-fila{
  display:flex; justify-content:space-between; align-items:flex-start; gap:14px;
  background:var(--superficie); padding:9px 12px; font-size:13.5px;
}
.confirmar-fila b{
  font-family:var(--dato); font-variant-numeric:tabular-nums;
  white-space:nowrap; font-weight:700;
}
.ficha__pie .confirmar-fila{ background:transparent; padding:5px 0; }

@media (max-width:820px){
  .lista--pago .lista__item{ grid-template-columns:1fr auto !important; }
}

/* =====================================================================
   ADMINISTRACIÓN — roles, permisos y datos del comercio
   ===================================================================== */
.rail__grupo{
  font-family:var(--dato); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(255,255,255,.5);
  padding:0 15px; margin:16px 0 6px;
}
.rail__grupo:first-of-type{ margin-top:0; }

.rol-marca{
  display:inline-block; font-family:var(--dato); font-size:9.5px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; padding:4px 9px;
  border-radius:var(--r-p); background:var(--linea-2); color:var(--tinta-2);
  white-space:nowrap;
}
.rail .rol-marca{ background:rgba(255,255,255,.2); color:#fff; }
.rol-marca--administrador{ background:var(--violeta-piel); color:var(--violeta); }
.rol-marca--operador_inventario{ background:var(--cian-piel); color:#0A7E97; }
.rol-marca--operador_facturador{ background:var(--esmeralda-piel); color:#00795B; }
.rol-marca--operador_mixto{ background:var(--naranja-piel); color:#B35F03; }

.lista--ope .lista__item{ grid-template-columns:42px minmax(0,1fr) auto; }

/* Selector de rol del formulario */
.roles{ display:flex; flex-direction:column; gap:7px; }
.rol-opcion{
  display:flex; align-items:flex-start; gap:11px;
  background:var(--superficie-2); border:1px solid transparent;
  border-radius:var(--r-s); padding:11px 13px; cursor:pointer;
  transition:border-color .2s var(--curva), background .2s var(--curva);
}
.rol-opcion:hover{ background:var(--violeta-piel); }
.rol-opcion:has(input:checked){ border-color:var(--violeta); background:var(--violeta-piel); }
.rol-opcion input{ width:auto; margin:3px 0 0; accent-color:var(--violeta); }
.rol-opcion b{ display:block; font-size:13.5px; }

/* Tabla de permisos */
table.permisos{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.permisos thead th{
  text-align:left; font-family:var(--dato); font-size:9.5px; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-3);
  padding:11px 16px; background:var(--superficie-2); white-space:nowrap;
}
table.permisos tbody td{ padding:12px 16px; border-bottom:1px solid var(--linea-2); vertical-align:top; }
table.permisos tbody tr:last-child td{ border-bottom:0; }
table.permisos .si{ color:var(--esmeralda); font-weight:700; }
table.permisos .no{ color:var(--tinta-3); }

/* Vista previa del encabezado */
.previa__papel{
  background:#fff; color:#000; border-radius:var(--r-s);
  padding:18px 16px; text-align:center;
  font-family:var(--dato); font-size:11px; line-height:1.5;
  box-shadow:inset 0 0 0 1px var(--linea);
}
.previa__papel p{ margin:0; }
.previa__nombre{ font-weight:700; font-size:14px; text-transform:uppercase; }
.previa__numero{ font-size:16px; font-weight:700; }
.previa__papel hr{ border:0; border-top:1px dashed #999; margin:9px 0; }

@media (max-width:820px){
  .lista--ope .lista__item{ grid-template-columns:1fr auto !important; }
  table.permisos thead{ display:none; }
  table.permisos tbody tr{ display:block; padding:10px 14px; }
  table.permisos tbody td{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; border:0; }
}

/* Compartir el comprobante */
.compartir{ display:flex; flex-direction:column; gap:8px; }
.compartir__opcion{
  display:flex; align-items:center; gap:13px; text-align:left; width:100%;
  background:var(--superficie-2); border:1px solid transparent;
  border-radius:var(--r-s); padding:12px 14px; cursor:pointer;
  color:inherit; text-decoration:none; font-family:var(--texto); font-size:14px;
  transition:border-color .2s var(--curva), background .2s var(--curva), transform .18s var(--curva);
}
.compartir__opcion:hover{ background:var(--violeta-piel); border-color:var(--violeta); transform:translateX(2px); }
.compartir__opcion b{ display:block; }
.compartir__icono{
  width:38px; height:38px; border-radius:var(--r-s); flex-shrink:0;
  display:grid; place-items:center; color:#fff;
  font-family:var(--dato); font-size:12px; font-weight:700;
}
.compartir__icono--wa{ background:#25D366; }
.compartir__icono--tg{ background:#2AABEE; }
.compartir__icono--cp{ background:var(--tinta-2); }
.compartir__previa{
  background:var(--superficie-2); border-radius:var(--r-s); padding:13px 15px;
  font-family:var(--dato); font-size:11.5px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word; margin:6px 0 0;
  max-height:210px; overflow:auto; color:var(--tinta-2);
}

/* Comprobante anulado */
.anulada-aviso{
  display:flex; gap:14px; align-items:flex-start;
  background:var(--rosa-piel); border-left:3px solid var(--rosa);
  border-radius:var(--r); padding:14px 18px; margin-bottom:14px;
}
.anulada-aviso b{ color:var(--rosa); font-size:15px; }
.anulada-aviso p{ margin:3px 0 0; font-size:13.5px; color:var(--tinta-2); }

.comprobante--anulada{ position:relative; }
.comprobante--anulada::after{
  content:'ANULADO';
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-size:min(15vw, 130px); font-weight:600;
  letter-spacing:.06em; color:var(--rosa); opacity:.09;
  transform:rotate(-16deg); pointer-events:none;
}
.comprobante--anulada .comprobante__numero{ text-decoration:line-through; }

.tk__anulada{
  font-weight:700; font-size:13px; letter-spacing:.1em; margin:0 0 4px;
}

@media print{
  .anulada-aviso{ display:none; }
}

/* Cobranza de cuotas */
.lista--cuo .lista__item{ grid-template-columns:minmax(0,1fr) 132px 92px auto; }
@media (max-width:820px){
  .lista--cuo .lista__item{ grid-template-columns:1fr auto !important; }
}

/* =====================================================================
   MARCA Y MULTI-COMERCIO
   ===================================================================== */
.rail__logo{
  display:block; border-radius:10px; flex-shrink:0;
  box-shadow:0 3px 10px rgba(20,10,60,.28);
}
.rail__nombre{ letter-spacing:-.03em; }

.acceso__logo{
  display:block; margin:0 auto 16px;
  border-radius:14px; box-shadow:0 8px 24px rgba(108,59,244,.34);
}
.acceso__caja{ text-align:center; }
.acceso__caja .campo, .acceso__caja .error{ text-align:left; }

/* Comercio activo en el menú */
.rail__comercio{
  background:rgba(255,255,255,.12); border-radius:12px;
  padding:8px 10px; margin-bottom:10px; flex-shrink:0;
  border:1px solid rgba(255,255,255,.14);
}
.rail__comercio-etiqueta{
  display:block; font-family:var(--dato); font-size:8.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.6); margin-bottom:2px;
}
.rail__comercio-nombre{
  display:block; font-size:12.5px; font-weight:600; color:#fff;
  line-height:1.25; overflow-wrap:anywhere;
}
.rail__comercio select{
  width:100%;
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-color:rgba(12,6,38,.55);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% + 1px),
    calc(100% - 9px) calc(50% + 1px);
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  padding:7px 26px 7px 9px;
  font-family:var(--texto); font-size:12px; font-weight:600;
  color:#fff; cursor:pointer;
  transition:border-color .2s var(--curva), background-color .2s var(--curva);
}
.rail__comercio select:hover{
  background-color:rgba(12,6,38,.72);
  border-color:rgba(255,255,255,.5);
}
.rail__comercio select:focus{
  outline:none; border-color:#fff;
  box-shadow:0 0 0 3px rgba(255,255,255,.22);
}
/* La lista desplegable la pinta el sistema: hay que darle color explícito
   o algunos navegadores la sacan blanca sobre blanco. */
.rail__comercio select option{
  background:var(--superficie); color:var(--tinta);
  font-weight:500;
}
html[data-tema="oscuro"] .rail__comercio select option{
  background:#241F33; color:#EFEDF7;
}

.rol-marca--super_admin{
  background:linear-gradient(135deg, var(--violeta), var(--cian));
  color:#fff;
}
.rail .rol-marca--super_admin{ background:rgba(255,255,255,.28); }

.lista--com .lista__item{ grid-template-columns:42px minmax(0,1fr) 74px auto; }

@media (max-width:820px){
  .lista--com .lista__item{ grid-template-columns:1fr auto !important; }
}

/* =====================================================================
   MENÚ LATERAL EN MÓVIL
   ---------------------------------------------------------------------
   En pantallas grandes el menú es una columna fija. En móvil se retira
   fuera de la pantalla y entra deslizándose al pulsar el logo, que es el
   único elemento que queda siempre visible. Diseño simétrico y ordenado,
   consistente con la versión de escritorio.
   ===================================================================== */

/* El logo es un botón: en escritorio no lo parece. */
.rail__marca{
  display:flex; align-items:center; gap:10px;
  background:transparent; border:0; padding:0 8px; width:100%;
  color:inherit; font-family:inherit; text-align:left;
  cursor:default;
}
.rail__flecha{ display:none; }

.velo{ display:none; }

@media (max-width:820px){
  .capa{ grid-template-columns:1fr; }

  /* ---- Panel lateral deslizable, simétrico al estilo desktop ---- */
  .rail{
    position:fixed; top:0; left:0; bottom:0; z-index:40;
    width:272px; height:100dvh; margin:0;
    border-radius:0 20px 20px 0;
    flex-direction:column; align-items:stretch;
    padding:20px 14px 16px; overflow-y:auto; overflow-x:hidden;
    transform:translateX(-100%);
    transition:transform .28s var(--curva);
    box-shadow:none;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .rail::-webkit-scrollbar{ display:none; }
  .rail.abierto{
    transform:translateX(0);
    box-shadow:24px 0 56px rgba(20,10,60,.38);
  }

  /* ---- Logo y título: alineación simétrica sobre fondo violeta ---- */
  .rail__marca{
    cursor:pointer; padding:8px 12px; margin-bottom:14px;
    border-radius:12px; position:relative;
    background:rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.2);
    transition:background .18s var(--curva);
  }
  .rail__marca:active{ background:rgba(255,255,255,.2); }
  .rail__nombre{ display:block; font-size:17px; }
  .rail__flecha{
    display:block; margin-left:auto; width:9px; height:9px;
    border-left:2px solid rgba(255,255,255,.75);
    border-bottom:2px solid rgba(255,255,255,.75);
    transform:rotate(45deg); flex-shrink:0;
  }

  /* ---- Comercio activo: recuadro con padding simétrico ---- */
  .rail__comercio{
    margin:0 0 14px; max-width:none;
    padding:10px 12px; border-radius:12px;
  }
  .rail__comercio-etiqueta{ display:block; }
  .rail__comercio-nombre{
    font-size:13px; white-space:normal;
    line-height:1.3; overflow-wrap:anywhere;
  }

  /* ---- Secciones de navegación ---- */
  .rail__grupo{
    display:block; margin:14px 0 6px 12px;
  }
  .rail__grupo:first-of-type{ margin-top:4px; }
  .rail__nav{ flex-direction:column; gap:2px; }
  .rail__link{
    padding:10px 14px; font-size:14.5px;
    white-space:normal; border-radius:10px;
  }

  /* ---- Pie del panel: tema, rol, usuario, cerrar sesión ---- */
  .rail__pie{
    margin-top:auto; flex-direction:column; align-items:stretch;
    padding:14px 4px 0; gap:10px;
    border-top:1px solid rgba(255,255,255,.16);
  }
  .rail__usuario{ display:block; }
  .tema{ width:100%; }
  .tema button{ padding:7px 0; }
  .rail .rol-marca{ text-align:center; display:block; }
  .rail .btn--fantasma{
    text-align:center; padding:8px 14px; font-size:12.5px;
    border-radius:var(--r-p);
  }

  /* ---- Flecha de cierre en la marca ---- */
  .rail__flecha{
    display:block; margin-left:auto; width:9px; height:9px;
    border-left:2px solid rgba(255,255,255,.65);
    border-bottom:2px solid rgba(255,255,255,.65);
    transform:rotate(45deg); flex-shrink:0;
  }

  /* ---- Barra superior fija (menú cerrado) ---- */
  .barra-movil{
    display:flex; align-items:center; gap:12px;
    position:sticky; top:0; z-index:30;
    padding:10px 14px;
    background:rgba(244,243,248,.92);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--linea);
  }
  html[data-tema="oscuro"] .barra-movil{ background:rgba(19,16,32,.92); }

  .barra-movil__boton{
    display:flex; align-items:center; gap:9px;
    background:transparent; border:0; padding:4px; cursor:pointer;
    color:var(--tinta); font-family:var(--display);
    font-size:16px; font-weight:700; letter-spacing:-.02em;
  }
  .barra-movil__boton img{
    width:34px; height:34px; border-radius:10px; display:block;
    box-shadow:0 3px 10px rgba(20,10,60,.28);
  }
  .barra-movil__vista{
    margin-left:auto; font-family:var(--dato); font-size:11px;
    letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-3);
  }

  /* ---- Velo de fondo ---- */
  .velo{
    display:block; position:fixed; inset:0; z-index:35;
    background:rgba(20,10,60,.5); backdrop-filter:blur(2px);
    animation:aparecer .2s;
  }

  .lienzo{ padding:16px 14px 56px; }
}

@media (min-width:821px){
  .barra-movil{ display:none; }
}

/* =====================================================================
   MOSTRAR LA CONTRASEÑA
   El botón vive dentro del campo, perfectamente centrado y con alto contraste.
   ===================================================================== */
.campo--clave{ position:relative; }
.campo--clave input{ padding-right:48px; }

.ojo{
  position:absolute; right:7px;
  top: calc(50% + 11px);
  transform: translateY(-50%);
  width:32px; height:32px; padding:0;
  display:grid; place-items:center;
  background:var(--superficie-2);
  border:1px solid var(--linea);
  border-radius:var(--r-s);
  color:var(--tinta-2);
  cursor:pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition:color .18s var(--curva), background .18s var(--curva), border-color .18s var(--curva), transform .18s var(--curva);
}
.ojo:hover{
  color:var(--violeta);
  background:var(--violeta-piel);
  border-color:var(--violeta);
  transform: translateY(-50%) scale(1.05);
}
.ojo:active{
  transform: translateY(-50%) scale(.94);
}
.ojo:focus-visible{ outline:2px solid var(--violeta); outline-offset:2px; }

.ojo svg{
  width:18px; height:18px;
}

/* Se muestra un icono u otro según el estado del botón */
.ojo__cerrado{ display:none; }
.ojo[aria-pressed="true"]{
  color:var(--violeta);
  background:var(--violeta-piel);
  border-color:var(--violeta);
}
.ojo[aria-pressed="true"] .ojo__abierto{ display:none; }
.ojo[aria-pressed="true"] .ojo__cerrado{ display:block; }

/* Los navegadores de escritorio añaden su propio ojo: sobraría uno */
.campo--clave input::-ms-reveal,
.campo--clave input::-ms-clear{ display:none; }

@media (max-width:820px){
  .campo--clave input{ padding-right:52px; }
  .ojo{ width:36px; height:36px; right:6px; top:calc(50% + 11px); }
  .ojo svg{ width:20px; height:20px; }
}

/* =====================================================================
   TABS DE ACCESO Y REGISTRO DE OPERADORES
   ===================================================================== */
.acceso__tabs{
  display:flex; background:var(--superficie-2); border:1px solid var(--linea);
  border-radius:var(--r); padding:4px; margin-bottom:20px; gap:4px;
}
.acceso__tab{
  flex:1; padding:8px 12px; font-size:13px; font-weight:600;
  border:0; border-radius:10px; background:transparent;
  color:var(--tinta-2); cursor:pointer;
  transition:all .18s var(--curva); text-align:center;
}
.acceso__tab--activo{
  background:var(--superficie); color:var(--violeta);
  box-shadow:var(--sombra);
}
.acceso__olvido{
  background:transparent; border:0; padding:6px 0;
  color:var(--violeta); font-size:12.5px; font-weight:600;
  cursor:pointer; display:inline-block; margin-top:8px;
  text-decoration:none;
}
.acceso__olvido:hover{ text-decoration:underline; }

.acceso__enlaces-legales{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--linea);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.acceso__chip-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 11px;
  border-radius:var(--r-p);
  background:var(--superficie-2);
  border:1px solid var(--linea);
  color:var(--tinta-2);
  font-family:var(--texto);
  font-size:11.5px;
  font-weight:600;
  text-decoration:none;
  transition:all .2s var(--curva);
  box-shadow:var(--sombra);
}
.acceso__chip-link svg{
  color:var(--tinta-3);
  transition:color .2s var(--curva), transform .2s var(--curva);
}
.acceso__chip-link:hover{
  background:var(--violeta-piel);
  color:var(--violeta);
  border-color:var(--violeta);
  transform:translateY(-1.5px);
  box-shadow:0 3px 10px rgba(108,59,244,.18);
}
.acceso__chip-link:hover svg{
  color:var(--violeta);
  transform:scale(1.1);
}
.acceso__chip-link:active{
  transform:translateY(0) scale(.96);
}
.acceso__chip-link--mapa{
  color:var(--violeta);
  background:var(--violeta-piel);
  border-color:rgba(108,59,244,.28);
}
.acceso__chip-link--mapa svg{
  color:var(--violeta);
}

/* Casilla de Términos y Condiciones en Registro */
.campo--terminos{
  margin:14px 0 10px;
  background:var(--superficie-2);
  border:1px solid var(--linea);
  border-radius:var(--r-s);
  padding:10px 12px;
  transition:border-color .2s var(--curva);
}
.campo--terminos:hover{
  border-color:var(--tinta-3);
}
.campo--terminos label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  margin:0;
  text-transform:none;
  font-family:var(--texto);
  font-size:12.5px;
  line-height:1.45;
  color:var(--tinta-2);
  font-weight:500;
}
.campo--terminos input[type="checkbox"]{
  width:17px;
  height:17px;
  margin-top:2px;
  flex-shrink:0;
  accent-color:var(--violeta);
  cursor:pointer;
  border-radius:4px;
}
.campo--terminos a{
  color:var(--violeta);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
}
.campo--terminos a:hover{
  color:var(--violeta-alto);
}

/* Tarjetas de Solicitudes de Registro */
.solicitudes-seccion{
  margin-bottom:22px;
  border:1px solid rgba(245,131,9,0.35);
  background:rgba(245,131,9,0.04);
  border-radius:var(--r);
  padding:16px 18px;
}
[data-tema="oscuro"] .solicitudes-seccion{
  background:rgba(255,152,0,0.08);
  border-color:rgba(255,152,0,0.3);
}
.solicitud-card{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; background:var(--superficie); border:1px solid var(--linea);
  border-radius:var(--r-s); padding:12px 14px; margin-top:10px;
  box-shadow:var(--sombra);
}
@media (max-width:640px){
  .solicitud-card{ flex-direction:column; align-items:flex-start; }
  .solicitud-card__acciones{ width:100%; display:flex; justify-content:flex-end; }
}

/* =====================================================================
   APLICACIÓN INSTALADA
   ===================================================================== */

/* Aviso de trabajo sin conexión */
.sin-conexion{
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  display:flex; align-items:center; justify-content:center; gap:9px;
  background:var(--naranja, #e65100); color:#fff;
  font-size:12.5px; font-weight:600; text-align:center;
  padding:9px 16px calc(9px + env(safe-area-inset-bottom));
  animation:emerger .25s var(--curva);
}
.sin-conexion__punto{
  width:8px; height:8px; border-radius:50%; background:#fff;
  flex-shrink:0; animation:latir 1.6s ease-in-out infinite;
}
@keyframes latir{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

/* Badge interactivo de sincronización */
.sync-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease;
  user-select: none;
}
.sync-pill:hover {
  transform: scale(1.03);
}
.sync-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}
.sync-pill--online {
  background: rgba(46, 125, 50, 0.12);
  color: #2e7d32;
  border: 1px solid rgba(46, 125, 50, 0.3);
}
.sync-pill--online .sync-pill__dot {
  background: #2e7d32;
}
[data-tema="oscuro"] .sync-pill--online {
  background: rgba(76, 175, 80, 0.15);
  color: #81c784;
  border-color: rgba(76, 175, 80, 0.35);
}
[data-tema="oscuro"] .sync-pill--online .sync-pill__dot {
  background: #81c784;
}

.sync-pill--offline {
  background: rgba(230, 81, 0, 0.12);
  color: #e65100;
  border: 1px solid rgba(230, 81, 0, 0.35);
}
.sync-pill--offline .sync-pill__dot {
  background: #e65100;
  animation: latir 1.5s infinite;
}
[data-tema="oscuro"] .sync-pill--offline {
  background: rgba(255, 152, 0, 0.15);
  color: #ffb74d;
  border-color: rgba(255, 152, 0, 0.35);
}
[data-tema="oscuro"] .sync-pill--offline .sync-pill__dot {
  background: #ffb74d;
}

.sync-pill--syncing {
  background: rgba(2, 136, 209, 0.12);
  color: #0288d1;
  border: 1px solid rgba(2, 136, 209, 0.35);
}
.sync-pill__spinner {
  width: 9px;
  height: 9px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: girar 0.8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.sync-pill--pending {
  background: rgba(106, 27, 154, 0.12);
  color: #6a1b9a;
  border: 1px solid rgba(106, 27, 154, 0.35);
}
.sync-pill--pending .sync-pill__dot {
  background: #6a1b9a;
}
[data-tema="oscuro"] .sync-pill--pending {
  background: rgba(186, 104, 200, 0.15);
  color: #ce93d8;
  border-color: rgba(186, 104, 200, 0.35);
}
[data-tema="oscuro"] .sync-pill--pending .sync-pill__dot {
  background: #ce93d8;
}

.sync-pill--error {
  background: rgba(211, 47, 47, 0.12);
  color: #d32f2f;
  border: 1px solid rgba(211, 47, 47, 0.35);
}
.sync-pill--error .sync-pill__dot {
  background: #d32f2f;
  animation: latir 1s infinite;
}

/* Invitación a instalar */
.instalar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:44;
  display:flex; align-items:center; gap:12px;
  background:var(--superficie); border-radius:var(--r);
  padding:12px 14px; box-shadow:var(--sombra-2);
  animation:emerger .3s var(--curva);
  max-width:440px; margin:0 auto;
}
.instalar img{ border-radius:9px; flex-shrink:0; }
.instalar b{ display:block; font-size:14px; }
.instalar > span{ flex:1; min-width:0; }
.instalar .btn--fantasma{ color:var(--tinta-3); border-color:transparent; padding:6px 8px; }

/* Instalada como aplicación: sin barra del navegador hay que respetar
   las zonas del sistema, o el contenido queda bajo la muesca. */
@media (display-mode: standalone){
  .lienzo{ padding-top:calc(18px + env(safe-area-inset-top)); }
  .rail{ padding-top:calc(18px + env(safe-area-inset-top)); }
  .barra-movil{ padding-top:calc(10px + env(safe-area-inset-top)); }
  .avisos{ bottom:calc(22px + env(safe-area-inset-bottom)); }
}

@media (max-width:820px){
  .instalar{ bottom:calc(14px + env(safe-area-inset-bottom)); }
  .instalar .lista__sub{ display:none; }
}

/* Equivalente en la otra moneda, junto al precio */
.equivalente{
  display:block; font-family:var(--dato); font-size:10.5px;
  font-weight:500; color:var(--tinta-3); letter-spacing:-.01em;
}
.tasa-marca{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--dato); font-size:10.5px; color:var(--tinta-3);
}
.tasa-marca b{ color:var(--tinta-2); font-weight:700; }
.tasa-marca--vieja b{ color:var(--naranja); }

/* El equivalente dentro de campos y celdas */
.filtro .equivalente{ margin-top:3px; }
.datos__celda .equivalente{ margin-top:2px; }
.lista__dato .equivalente{ font-size:9.5px; margin-top:1px; }
.campo .equivalente{ margin-top:5px; }

/* =====================================================================
   TASA A LA VISTA
   ===================================================================== */
.cinta-tasa{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--superficie); border-radius:var(--r-s);
  padding:9px 14px; margin-bottom:14px;
  box-shadow:var(--sombra);
  font-family:var(--dato); font-size:11.5px; color:var(--tinta-2);
  border-left:3px solid var(--esmeralda);
}
.cinta-tasa--vieja{ border-left-color:var(--naranja); }
.cinta-tasa--sin{ border-left-color:var(--rosa); }

.cinta-tasa__valor{
  font-size:15px; font-weight:700; color:var(--esmeralda);
  letter-spacing:-.02em;
}
.cinta-tasa--vieja .cinta-tasa__valor{ color:var(--naranja); }
.cinta-tasa--sin .cinta-tasa__valor{ color:var(--rosa); }
.cinta-tasa__etiqueta{
  text-transform:uppercase; letter-spacing:.14em; font-size:9.5px;
  color:var(--tinta-3);
}
.cinta-tasa__nota{ margin-left:auto; font-size:10.5px; color:var(--tinta-3); }

.cinta-tasa__sync{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(255,255,255,.05); border:1px solid var(--linea);
  border-radius:var(--r-xs, 6px); padding:3px 8px;
  font-family:inherit; font-size:11px; font-weight:600; color:var(--tinta-2);
  cursor:pointer; transition:all .15s ease;
  margin-left:8px;
}
.cinta-tasa__sync:hover{
  background:rgba(255,255,255,.1); color:var(--tinta-1);
  border-color:var(--esmeralda);
}
.cinta-tasa__sync svg{
  transition:transform .3s ease;
}
.cinta-tasa__sync--cargando svg{
  animation:girar-sync .8s linear infinite;
}
@keyframes girar-sync{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* El dólar en verde; su conversión, atenuada */
.monto-usd{ color:var(--esmeralda); font-weight:700; }
.equivalente--usd{ color:var(--esmeralda); opacity:.85; }

@media (max-width:820px){
  .cinta-tasa{ padding:8px 12px; }
  .cinta-tasa__nota{ margin-left:0; width:100%; }
  .cinta-tasa__sync{ margin-left:0; margin-top:4px; }
}

/* Precio en el listado de productos */
.lista__precio{
  display:block; margin-top:3px;
  font-family:var(--dato); font-size:13px; font-weight:700;
}
.lista__precio .equivalente{ display:inline; margin-left:7px; font-size:11px; }
.datos__valor .monto-usd{ font-size:inherit; }
.datos__valor .equivalente{ display:block; margin-top:2px; }

/* Ventas a crédito */
.pastilla--credito{
  background:rgba(11,165,199,.16); color:var(--cian);
  margin-left:7px; font-size:9.5px;
}
.metrica--pulsable{ cursor:pointer; transition:transform .16s var(--curva); }
.metrica--pulsable:hover{ transform:translateY(-2px); }
.metrica--pulsable:focus-visible{ outline:2px solid var(--violeta); outline-offset:3px; }

/* Productos exentos de IVA */
.pastilla--exento{
  background:rgba(16,185,129,.16); color:var(--esmeralda);
  margin-left:7px; font-size:9.5px;
}

.cinta-tasa__euro{
  font-weight:700; color:var(--cian);
  padding-left:12px; border-left:1px solid var(--linea);
}

/* =====================================================================
   REPORTES IMPRIMIBLES
   ===================================================================== */
.reporte__encabezado{ margin-bottom:14px; }
.reporte__encabezado h2{
  font-family:var(--display); font-size:19px; font-weight:600;
  letter-spacing:-.02em; margin:0 0 3px;
}
.reporte__encabezado p{
  margin:0; font-family:var(--dato); font-size:11px; color:var(--tinta-3);
}

.tabla-envoltura{ overflow-x:auto; }
.tabla{ width:100%; border-collapse:collapse; font-size:13px; }
.tabla th{
  text-align:left; padding:9px 12px;
  font-family:var(--dato); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--tinta-3);
  border-bottom:1px solid var(--linea);
}
.tabla td{ padding:9px 12px; border-bottom:1px solid var(--linea); }
.tabla tbody tr{ cursor:pointer; transition:background .15s var(--curva); }
.tabla tbody tr:hover{ background:var(--violeta-piel); }
.tabla .num{ text-align:right; font-family:var(--dato); }



/* Código del producto, junto al nombre */
.sku{
  display:inline-block; margin-left:8px; vertical-align:middle;
  font-family:var(--dato); font-size:10px; font-weight:700;
  letter-spacing:.06em;
  background:var(--violeta-piel); color:var(--violeta);
  padding:2px 7px; border-radius:5px;
}
html[data-tema="oscuro"] .sku{ background:rgba(124,77,247,.2); color:#B69BFF; }
.sku--grande{ margin-left:0; font-size:11px; padding:3px 9px; }

/* =====================================================================
   DASHBOARD INTERACTIVO (ESTILO FINA / SAAS)
   ===================================================================== */
.fina-saludo{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:16px;
}
.fina-saludo__texto h1{
  font-family:var(--display); font-size:26px; font-weight:700;
  letter-spacing:-.03em; margin:0 0 4px; color:var(--tinta);
}
.fina-saludo__texto p{
  margin:0; font-size:13.5px; color:var(--tinta-2);
}
.fina-saludo__acciones{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}

.fina-caja-toggle{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--superficie); border:1px solid var(--linea);
  border-radius:var(--r-p); padding:6px 14px 6px 10px;
  font-family:var(--dato); font-size:12px; font-weight:600;
  color:var(--tinta); box-shadow:var(--sombra); cursor:pointer;
  transition:all .2s var(--curva); text-decoration:none;
}
.fina-caja-toggle:hover{
  border-color:var(--violeta); transform:translateY(-1px);
  box-shadow:var(--sombra-2);
}
.fina-caja-dot{
  width:9px; height:9px; border-radius:50%; background:var(--esmeralda);
  box-shadow:0 0 0 3px rgba(0,168,126,.2); animation:pulso 2s infinite;
}
.fina-caja-dot--cerrada{
  background:var(--rosa); box-shadow:0 0 0 3px rgba(240,53,107,.2);
}
@keyframes pulso{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.2); opacity:.8; }
}

.fina-caja-switch{
  width:28px; height:16px; border-radius:10px; background:var(--violeta);
  position:relative; transition:background .2s;
}
.fina-caja-switch::after{
  content:''; position:absolute; top:2px; right:2px; width:12px; height:12px;
  border-radius:50%; background:#fff; transition:transform .2s;
}
.fina-caja-switch--off{ background:var(--linea); }
.fina-caja-switch--off::after{ transform:translateX(-12px); }

.btn--vender{
  background:linear-gradient(135deg, #6C3BF4 0%, #8B5CF6 100%) !important;
  color:#fff !important; font-weight:700 !important;
  padding:9px 18px !important; border-radius:var(--r-p) !important;
  box-shadow:0 4px 14px rgba(108,59,244,.35) !important;
  display:inline-flex; align-items:center; gap:6px;
}
.btn--vender:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 6px 20px rgba(108,59,244,.5) !important;
}

.btn--gasto{
  background:linear-gradient(135deg, #F0356B 0%, #FF6584 100%) !important;
  color:#fff !important; font-weight:700 !important;
  padding:9px 16px !important; border-radius:var(--r-p) !important;
  box-shadow:0 4px 14px rgba(240,53,107,.28) !important;
  display:inline-flex; align-items:center; gap:6px;
}
.btn--gasto:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 6px 20px rgba(240,53,107,.45) !important;
}

/* Banner de reportes */
.fina-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  background:var(--superficie); border:1.5px solid var(--violeta-piel);
  border-radius:var(--r); padding:12px 18px; margin-bottom:16px;
  box-shadow:var(--sombra); animation:emerger .4s var(--curva);
}
.fina-banner__info{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.fina-banner__icono{
  font-size:22px; width:38px; height:38px; border-radius:10px;
  background:var(--violeta-piel); display:grid; place-items:center; flex-shrink:0;
}
.fina-banner__titulo{
  font-weight:700; font-size:14.5px; color:var(--tinta); margin:0;
}
.fina-banner__chip{
  background:var(--violeta-piel); color:var(--violeta); font-family:var(--dato);
  font-size:11px; font-weight:700; padding:3px 9px; border-radius:var(--r-p);
}
.fina-banner__botones{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.btn--reporte{
  background:linear-gradient(135deg, #6C3BF4 0%, #5A2AE0 100%);
  color:#fff !important; border:0; border-radius:var(--r-p);
  padding:7px 14px; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  transition:all .2s var(--curva);
}
.btn--reporte:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(108,59,244,.3); }

/* Grid de 4 KPIs financieros */
.fina-kpi-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px; margin-bottom:16px;
}
.fina-kpi-card{
  background:var(--superficie); border-radius:var(--r); padding:16px 18px;
  box-shadow:var(--sombra); border-top:3px solid transparent;
  display:flex; flex-direction:column; gap:6px; position:relative;
  transition:all .25s var(--curva); cursor:pointer; text-decoration:none; color:inherit;
}
.fina-kpi-card:hover{
  transform:translateY(-2px); box-shadow:var(--sombra-2);
}
.fina-kpi-card--violeta{ border-top-color:var(--violeta); }
.fina-kpi-card--cian{ border-top-color:var(--cian); }
.fina-kpi-card--esmeralda{ border-top-color:var(--esmeralda); }
.fina-kpi-card--rosa{ border-top-color:var(--rosa); }

.fina-kpi-cabecera{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.fina-kpi-titulo{
  font-size:13px; font-weight:600; color:var(--tinta-2); margin:0;
}
.fina-kpi-icono{
  width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-size:13px; flex-shrink:0;
}
.fina-kpi-icono--violeta{ background:var(--violeta-piel); color:var(--violeta); }
.fina-kpi-icono--cian{ background:var(--cian-piel); color:var(--cian); }
.fina-kpi-icono--esmeralda{ background:var(--esmeralda-piel); color:var(--esmeralda); }
.fina-kpi-icono--rosa{ background:var(--rosa-piel); color:var(--rosa); }

.fina-kpi-valor{
  font-family:var(--dato); font-size:24px; font-weight:700;
  letter-spacing:-.03em; color:var(--tinta); margin:2px 0 0;
  font-variant-numeric:tabular-nums;
}
.fina-kpi-pie{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11.5px;
  color:var(--tinta-3); margin-top:auto;
}
.fina-kpi-delta{
  display:inline-flex; align-items:center; gap:3px;
  font-family:var(--dato); font-size:11px; font-weight:700;
}
.fina-kpi-delta--pos{ color:var(--esmeralda); }
.fina-kpi-delta--neg{ color:var(--rosa); }

/* Fila de 2 paneles (Inventario bajo y Top vendidos) */
.fina-mosaico-2{
  display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px;
}
@media (max-width:860px){
  .fina-mosaico-2{ grid-template-columns:1fr; }
}

.fina-alerta-bloques{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px 0 16px;
}
.fina-alerta-caja{
  background:var(--superficie-2); border-radius:var(--r-s); padding:16px 14px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:4px; border:1px solid transparent; transition:all .2s;
}
.fina-alerta-caja:hover{
  border-color:var(--naranja); background:var(--naranja-piel);
}
.fina-alerta-num{
  font-family:var(--dato); font-size:22px; font-weight:700;
  color:var(--tinta); display:flex; align-items:center; gap:6px;
}
.fina-alerta-lbl{
  font-size:12px; font-weight:600; color:var(--tinta-2);
}

.fina-link{
  font-family:var(--dato); font-size:11.5px; font-weight:700;
  color:var(--violeta); text-decoration:none; display:inline-flex;
  align-items:center; gap:4px; transition:transform .2s var(--curva); cursor:pointer;
}
.fina-link:hover{ transform:translateX(3px); color:var(--violeta-alto); }

/* Ranking de productos más vendidos */
.fina-top-lista{
  display:flex; flex-direction:column; gap:8px; padding-bottom:12px;
}
.fina-top-item{
  display:grid; grid-template-columns:26px minmax(0,1fr) auto;
  align-items:center; gap:12px; background:var(--superficie-2);
  border-radius:var(--r-s); padding:9px 12px; cursor:pointer;
  transition:all .2s var(--curva);
}
.fina-top-item:hover{
  background:var(--violeta-piel); transform:translateX(2px);
}
.fina-top-num{
  width:24px; height:24px; border-radius:50%;
  background:var(--violeta-piel); color:var(--violeta);
  font-family:var(--dato); font-size:11.5px; font-weight:700;
  display:grid; place-items:center; flex-shrink:0;
}
.fina-top-info{ min-width:0; }
.fina-top-nombre{
  font-size:13.5px; font-weight:600; color:var(--tinta);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.fina-top-sub{
  font-family:var(--dato); font-size:10.5px; color:var(--tinta-3);
}
.fina-top-cant{
  font-family:var(--dato); font-size:13px; font-weight:700;
  color:var(--tinta); text-align:right; white-space:nowrap;
}
.fina-top-cant small{
  display:block; font-size:9.5px; color:var(--tinta-3); font-weight:500;
}

/* Cuentas por cobrar y pagar */
.fina-cuotas-lista{
  display:flex; flex-direction:column; gap:8px; padding-bottom:12px;
}
.fina-cuota-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto auto;
  align-items:center; gap:12px; background:var(--superficie-2);
  border-radius:var(--r-s); padding:10px 14px;
  transition:all .2s var(--curva);
}
.fina-cuota-row:hover{
  background:var(--violeta-piel); transform:translateX(2px);
}
.fina-cuota-cliente{
  font-size:13.5px; font-weight:600; color:var(--tinta);
}
.fina-cuota-sub{
  font-family:var(--dato); font-size:10.5px; color:var(--tinta-3); margin-top:2px;
}
.fina-cuota-monto{
  font-family:var(--dato); font-size:14px; font-weight:700;
  color:var(--esmeralda); text-align:right;
}
.fina-badge-vencida{
  background:var(--rosa-piel); color:var(--rosa); font-family:var(--dato);
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--r-p);
  text-transform:uppercase; letter-spacing:.04em;
}
.fina-badge-vence{
  background:var(--cian-piel); color:var(--cian); font-family:var(--dato);
  font-size:10px; font-weight:700; padding:3px 8px; border-radius:var(--r-p);
}
.fina-empty-box{
  text-align:center; padding:32px 18px; color:var(--tinta-3);
  font-size:13.5px; display:flex; flex-direction:column;
  align-items:center; gap:8px;
}
.fina-empty-box svg, .fina-empty-box span.icono{
  font-size:28px; opacity:.7;
}

/* Modo oscuro adaptado */
html[data-tema="oscuro"] .fina-banner{
  border-color:var(--linea);
}
html[data-tema="oscuro"] .fina-caja-toggle{
  background:var(--superficie); border-color:var(--linea);
}
html[data-tema="oscuro"] .fina-kpi-card{
  background:var(--superficie);
}
html[data-tema="oscuro"] .fina-alerta-caja{
  background:var(--superficie-2);
}
html[data-tema="oscuro"] .fina-alerta-caja:hover{
  background:var(--naranja-piel);
}
html[data-tema="oscuro"] .fina-top-item{
  background:var(--superficie-2);
}
html[data-tema="oscuro"] .fina-top-item:hover{
  background:var(--violeta-piel);
}
html[data-tema="oscuro"] .fina-cuota-row{
  background:var(--superficie-2);
}
html[data-tema="oscuro"] .fina-cuota-row:hover{
  background:var(--violeta-piel);
}

/* =====================================================================
   POPUP DE BIENVENIDA
   ---------------------------------------------------------------------
   Aparece tras iniciar sesión con el nombre del operador y su última
   conexión. Se cierra solo después de 4,5 s o al pulsarlo.
   ===================================================================== */
@keyframes bienvenida-entrar{
  from{ opacity:0; transform:translateY(18px) scale(.96); }
  to{ opacity:1; transform:none; }
}
@keyframes bienvenida-salir{
  from{ opacity:1; transform:none; }
  to{ opacity:0; transform:translateY(-12px) scale(.96); }
}
.bienvenida{
  position:fixed; inset:0; z-index:55;
  display:grid; place-items:center; padding:24px;
  background:rgba(34,30,48,.35); backdrop-filter:blur(4px);
  animation:aparecer .25s;
  cursor:pointer;
}
.bienvenida__caja{
  text-align:center; padding:32px 36px 28px;
  background:var(--superficie);
  border-radius:22px; box-shadow:var(--sombra-3);
  max-width:340px; width:100%;
  animation:bienvenida-entrar .45s var(--curva);
  position:relative; overflow:hidden;
}
.bienvenida__caja::before{
  content:''; position:absolute; top:-40px; left:-40px;
  width:160px; height:160px; border-radius:50%;
  background:linear-gradient(135deg, rgba(108,59,244,.15) 0%, rgba(11,165,199,.1) 100%);
  pointer-events:none;
}
.bienvenida__emoji{
  font-size:44px; display:block; margin-bottom:8px;
  animation:bienvenida-entrar .5s .1s var(--curva) backwards;
}
.bienvenida__saludo{
  font-family:var(--dato); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-3); margin:0 0 4px;
  animation:bienvenida-entrar .5s .15s var(--curva) backwards;
}
.bienvenida__nombre{
  font-family:var(--display); font-size:28px; font-weight:700;
  letter-spacing:-.03em; color:var(--tinta); margin:0 0 14px;
  line-height:1.15;
  animation:bienvenida-entrar .5s .2s var(--curva) backwards;
}
.bienvenida__ultimo{
  font-family:var(--dato); font-size:11.5px; color:var(--tinta-3);
  margin:0; padding:10px 0 0; border-top:1px solid var(--linea-2);
  animation:bienvenida-entrar .5s .28s var(--curva) backwards;
}

html[data-tema="oscuro"] .bienvenida{
  background:rgba(0,0,0,.45);
}
html[data-tema="oscuro"] .bienvenida__caja{
  background:var(--superficie);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 20px rgba(108,59,244,.2);
}
html[data-tema="oscuro"] .bienvenida__caja::before{
  background:linear-gradient(135deg, rgba(139,99,255,.2) 0%, rgba(44,195,224,.12) 100%);
}

@media (max-width:430px){
  .bienvenida__caja{ padding:28px 24px 24px; }
  .bienvenida__nombre{ font-size:24px; }
}

/* =====================================================================
   Escáner de Códigos de Barras y QR
   ===================================================================== */
.escaner-overlay{
  position:fixed; inset:0; z-index:1100;
  background:rgba(10, 10, 20, 0.82);
  backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}
.escaner-caja{
  background:var(--superficie);
  border:1px solid var(--linea);
  border-radius:var(--r);
  box-shadow:0 24px 60px rgba(0,0,0,0.45), 0 0 30px rgba(108,59,244,0.15);
  width:100%; max-width:460px;
  padding:20px;
  display:flex; flex-direction:column; gap:14px;
}
.escaner-cabecera{
  display:flex; justify-content:space-between; align-items:flex-start; gap:12px;
}
.escaner-titulo{
  font-size:17px; font-weight:700; color:var(--tinta); margin:0 0 2px;
}
.escaner-desc{
  font-size:12.5px; color:var(--tinta-3); margin:0;
}
.escaner-visor-wrapper{
  position:relative; width:100%; height:260px;
  border-radius:var(--r-s); overflow:hidden;
  background:#05050a;
  display:flex; align-items:center; justify-content:center;
}
.escaner-video{
  width:100%; height:100%; object-fit:cover;
}
.escaner-mira{
  position:absolute; inset:20px;
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.escaner-esquinas{
  position:absolute; inset:0;
  border:2px solid rgba(255,255,255,0.25);
  border-radius:12px;
  box-shadow:0 0 0 9999px rgba(0, 0, 0, 0.38);
}
.escaner-esquinas::before, .escaner-esquinas::after{
  content:''; position:absolute;
  width:24px; height:24px;
  border-color:var(--violeta-claro);
  border-style:solid;
}
.escaner-esquinas::before{
  top:-2px; left:-2px;
  border-width:3px 0 0 3px;
  border-top-left-radius:10px;
}
.escaner-esquinas::after{
  bottom:-2px; right:-2px;
  border-width:0 3px 3px 0;
  border-bottom-right-radius:10px;
}
.escaner-laser{
  position:absolute; left:6px; right:6px; height:3px;
  background:linear-gradient(90deg, transparent, #2CC3E0, var(--violeta-claro), #2CC3E0, transparent);
  box-shadow:0 0 12px var(--violeta-claro), 0 0 6px #2CC3E0;
  border-radius:2px;
  animation:escaner-barrido 1.8s ease-in-out infinite alternate;
}
@keyframes escaner-barrido{
  0%   { top:8%; opacity:0.3; }
  50%  { opacity:1; }
  100% { top:90%; opacity:0.3; }
}
.escaner-pill{
  position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  padding:6px 14px; border-radius:20px;
  font-size:12.5px; font-weight:700; text-align:center;
  white-space:nowrap; z-index:5;
  box-shadow:0 6px 16px rgba(0,0,0,0.3);
}
.escaner-pill--exito{
  background:var(--esmeralda); color:#fff;
}
.escaner-pill--error{
  background:var(--rosa); color:#fff;
}
.escaner-acciones{
  display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap;
}
.escaner-chk-continuo{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--tinta-2); cursor:pointer; user-select:none;
}
.escaner-chk-continuo input{
  accent-color:var(--violeta); width:auto; margin:0;
}
.escaner-manual{
  padding-top:10px; border-top:1px solid var(--linea-2);
}
.escaner-manual label{
  font-size:11.5px; font-weight:600; color:var(--tinta-3); text-transform:uppercase; letter-spacing:0.04em;
}

/* =====================================================================
   CENTRO DE NOTIFICACIONES Y ALERTAS PUSH
   ===================================================================== */
.btn-campana-notif {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--superficie);
  border: 1px solid var(--linea);
  color: var(--tinta-2);
  border-radius: var(--r-s, 9px);
  cursor: pointer;
  transition: all 0.22s var(--curva);
  padding: 0;
  user-select: none;
  box-shadow: var(--sombra);
}
.barra-movil__campana {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  margin-left: 2px;
}
.cabecera__campana {
  flex-shrink: 0;
}
.btn-campana-notif:hover {
  background: var(--violeta-piel);
  color: var(--violeta);
  border-color: var(--violeta-piel);
  transform: translateY(-1px);
}
.btn-campana-notif:active {
  transform: translateY(0);
}

.btn-campana-notif svg {
  display: block;
  stroke: currentColor;
  transition: transform 0.25s var(--curva);
}
.btn-campana-notif:hover svg {
  transform: rotate(-10deg) scale(1.08);
}

/* Modo oscuro */
html[data-tema="oscuro"] .btn-campana-notif {
  background: var(--superficie-2);
  border-color: var(--linea);
  color: var(--tinta-2);
}
html[data-tema="oscuro"] .btn-campana-notif:hover {
  background: var(--violeta-piel);
  color: var(--violeta);
  border-color: rgba(139, 99, 255, 0.35);
}

.notif-badge {
  position: absolute;
  top: -4px;
  right: -5px;
  background: var(--rosa);
  color: #ffffff;
  font-family: var(--dato);
  font-size: 10px;
  font-weight: 800;
  min-width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
  padding: 0 3px;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(240, 53, 107, 0.45);
  border: 1.5px solid var(--superficie);
  animation: pulsoBadge 2.4s infinite ease-in-out;
}
html[data-tema="oscuro"] .notif-badge {
  background: var(--rosa);
  border-color: var(--superficie);
  box-shadow: 0 2px 8px rgba(255, 92, 134, 0.55);
}
@keyframes pulsoBadge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}

/* Banner de sugerencia push */
.banner-notif {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(90deg, rgba(108, 59, 244, 0.12), rgba(124, 77, 247, 0.06));
  border: 1px solid var(--violeta-20);
  border-radius: 10px;
  padding: 12px 16px;
  margin: 10px 0 16px;
  animation: aparecer 0.25s ease-out;
  box-sizing: border-box;
  width: 100%;
}
.banner-notif__icono {
  font-size: 26px;
  flex-shrink: 0;
}
.banner-notif__texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.banner-notif__texto b {
  font-size: 13.5px;
  color: var(--tinta);
  line-height: 1.35;
}
.banner-notif__texto span {
  font-size: 12px;
  color: var(--tinta-2);
  line-height: 1.4;
}
.banner-notif__acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .banner-notif {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }
  .banner-notif__icono {
    display: none;
  }
  .banner-notif__acciones {
    width: 100%;
    margin-top: 2px;
  }
  .banner-notif__acciones button:first-child {
    flex: 1;
    justify-content: center;
    padding: 9px 14px;
  }
}

/* Drawer / Panel Desplegable */
.panel-notif {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 90vw;
  background: var(--superficie);
  border-left: 1px solid var(--borde);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.22);
  z-index: 10050;
  display: flex;
  flex-direction: column;
  animation: deslizarPanel 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes deslizarPanel {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.panel-notif[hidden] {
  display: none !important;
}

.panel-notif__cabecera {
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--superficie-2);
}
.panel-notif__titulo-box {
  display: flex;
  align-items: center;
  gap: 8px;
}
.panel-notif__titulo-box h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--tinta);
}
.panel-notif__acciones-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.panel-notif__tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
}
.notif-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--tinta-3);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.notif-tab:hover {
  color: var(--tinta);
  background: var(--superficie-2);
}
.notif-tab--activa {
  background: var(--violeta-10) !important;
  color: var(--violeta) !important;
  border-color: var(--violeta-20) !important;
}

.panel-notif__cuerpo {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.panel-notif__pie {
  padding: 10px 14px;
  border-top: 1px solid var(--borde);
  background: var(--superficie-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Items individuales de alerta */
.notif-item {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--linea-2);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}
.notif-item:hover {
  background: var(--violeta-piel);
}
.notif-item--no-leida {
  background: rgba(108, 59, 244, 0.05);
}
.notif-item__icono {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.notif-item__icono--ventas {
  background: rgba(16, 185, 129, 0.15);
  color: var(--esmeralda, #10b981);
}
.notif-item__icono--mov {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.notif-item__icono--stock {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
}
.notif-item__icono--prod {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}
.notif-item__icono--op {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}
.notif-item__icono--seg {
  background: rgba(236, 72, 153, 0.15);
  color: #ec4899;
}

.notif-item__contenido {
  flex: 1;
  min-width: 0;
}
.notif-item__cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 3px;
}
.notif-item__titulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notif-item__tiempo {
  font-size: 10.5px;
  color: var(--tinta-3);
  flex-shrink: 0;
}
.notif-item__cuerpo {
  margin: 0;
  font-size: 12px;
  color: var(--tinta-2);
  line-height: 1.35;
  word-break: break-word;
}
.notif-item__punto {
  width: 7px;
  height: 7px;
  background: var(--violeta);
  border-radius: 50%;
  align-self: center;
  flex-shrink: 0;
}

.notif-vacio {
  padding: 48px 20px;
  text-align: center;
  color: var(--tinta-2);
}

/* Switches en modal de preferencias */
#modal-ajustes-notif {
  z-index: 10060;
}
.notif-ajuste-permiso {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--superficie-2);
  padding: 14px 16px;
  border-radius: var(--r-s, 10px);
  margin-bottom: 16px;
  border: 1px solid var(--linea);
  box-sizing: border-box;
  width: 100%;
}
.notif-ajuste-permiso__info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.notif-ajuste-permiso__info b {
  font-size: 13.5px;
  color: var(--tinta);
  line-height: 1.35;
}
.notif-ajuste-permiso__info p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--tinta-3);
}
.notif-ajuste-permiso button {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-s, 8px);
}
.notif-ajustes-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.notif-switch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 8px 0;
}
.notif-switch span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.notif-switch b {
  font-size: 13px;
  color: var(--tinta);
}
.notif-switch small {
  font-size: 11.5px;
  color: var(--tinta-3);
}
.notif-switch input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--violeta);
  cursor: pointer;
}

/* Pines de mapa con logo BaratoPrimo */
.marcador-bp-pin {
  background: transparent !important;
  border: none !important;
}
.pin-bp-wrapper {
  position: relative;
  width: 36px;
  height: 36px;
  background: #ffffff;
  border: 2.5px solid #6C3BF4;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(108, 59, 244, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow .2s;
  animation: bp-pin-pop .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pin-bp-wrapper:hover {
  transform: scale(1.18);
  box-shadow: 0 6px 20px rgba(108, 59, 244, 0.55), 0 0 0 4px rgba(255, 255, 255, 0.9);
}
.pin-bp-logo {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}
.pin-bp-punta {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid #6C3BF4;
}

@keyframes bp-pin-pop {
  0% { transform: scale(0.4) translateY(-10px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* =====================================================================
   HORARIO DE ATENCIÓN COMERCIAL (ESTILO WHATSAPP BUSINESS)
   ===================================================================== */
.wb-lista-dias {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wb-fila-dia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  border-radius: var(--r-s);
  gap: 10px;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.wb-fila-dia--inactivo {
  opacity: 0.65;
  background: transparent;
}

.wb-fila-dia__check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 115px;
}

.wb-fila-dia__nombre {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
}

.wb-fila-dia__horas {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.wb-fila-dia__sep {
  font-size: 12px;
  color: var(--tinta-3);
}

.wb-input-hora {
  padding: 4px 8px;
  border-radius: var(--r-xs);
  border: 1px solid var(--linea);
  background: var(--superficie);
  color: var(--tinta);
  font-family: var(--dato);
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s ease;
}

.wb-input-hora:focus {
  border-color: var(--violeta);
}

.wb-input-hora:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--superficie-2);
}

.wb-dia-tag {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}

.wb-dia-tag--abierto {
  background: var(--esmeralda-piel);
  color: var(--esmeralda);
}

.wb-dia-tag--cerrado {
  background: var(--rosa-piel);
  color: var(--rosa);
}

/* Switch toggle minimalista para días */
.switch-horario {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}

.switch-horario input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-horario .switch-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--linea);
  border-radius: 999px;
  transition: 0.2s;
}

.switch-horario .switch-slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  border-radius: 50%;
  transition: 0.2s;
}

.switch-horario input:checked + .switch-slider {
  background-color: var(--esmeralda);
}

.switch-horario input:checked + .switch-slider:before {
  transform: translateX(14px);
}

/* =====================================================================
   SELECTOR DE MAPA EN MI COMERCIO — MODO EXPANDIDO / PANTALLA COMPLETA
   ===================================================================== */
.co-mapa-wrapper {
  position: relative;
  width: 100%;
  border-radius: var(--r-s);
  border: 1px solid var(--linea);
  overflow: hidden;
  background: var(--superficie-2);
  z-index: 1;
  transition: all 0.25s var(--curva);
}

.co-mapa-selector {
  height: 230px;
  width: 100%;
  position: relative;
  z-index: 1;
}

.co-mapa-max-header {
  display: none;
}

.co-mapa-max-instruccion {
  display: none;
}

.co-mapa-btn-flotante-expandir {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  width: 34px;
  height: 34px;
  border-radius: var(--r-s);
  background: var(--superficie);
  border: 1px solid var(--linea);
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.co-mapa-btn-flotante-expandir:hover {
  transform: scale(1.06);
  background: var(--superficie-2);
  border-color: var(--violeta);
  color: var(--violeta);
}

/* Modo maximizado / ampliado a pantalla completa */
.co-mapa-wrapper.es-maximizada {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  flex-direction: column !important;
  animation: aparecer 0.2s var(--curva);
}

.co-mapa-wrapper.es-maximizada .co-mapa-selector {
  flex: 1 1 0% !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 0 !important;
  position: relative !important;
}

.co-mapa-wrapper.es-maximizada .co-mapa-max-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top, 10px));
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  flex-shrink: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

html[data-tema="oscuro"] .co-mapa-wrapper.es-maximizada .co-mapa-max-header {
  background: var(--superficie);
  border-bottom-color: var(--linea);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.co-mapa-wrapper.es-maximizada .co-mapa-max-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.co-mapa-wrapper.es-maximizada .co-mapa-max-titulo {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--tinta);
  display: inline-flex;
  align-items: center;
}

.co-mapa-wrapper.es-maximizada .co-mapa-max-coords {
  font-size: 12px;
  font-weight: 600;
  color: var(--tinta-2);
  background: var(--superficie-2);
  border: 1px solid var(--linea);
  padding: 3px 8px;
  border-radius: var(--r-s);
  letter-spacing: -0.01em;
}

.co-mapa-wrapper.es-maximizada .co-mapa-max-acciones {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.co-mapa-wrapper.es-maximizada .co-mapa-btn-flotante-expandir {
  display: none;
}

.co-mapa-wrapper.es-maximizada .co-mapa-max-instruccion {
  display: block;
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: rgba(20, 16, 32, 0.9);
  color: #ffffff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  text-align: center;
  max-width: 90vw;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Controles de zoom Leaflet en el selector de mapa de Mi Comercio */
.co-mapa-wrapper .leaflet-top.leaflet-left {
  top: 14px !important;
  left: 14px !important;
  z-index: 900 !important;
}

.co-mapa-wrapper .leaflet-control-zoom {
  border: 1px solid var(--linea) !important;
  border-radius: var(--r-s) !important;
  box-shadow: var(--sombra-2) !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.co-mapa-wrapper .leaflet-control-zoom a {
  background: var(--superficie) !important;
  color: var(--tinta) !important;
  border-bottom: 1px solid var(--linea) !important;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.co-mapa-wrapper .leaflet-control-zoom a:last-child {
  border-bottom: none !important;
}

.co-mapa-wrapper .leaflet-control-zoom a:hover {
  background: var(--superficie-2) !important;
  color: var(--violeta) !important;
}

html[data-tema="oscuro"] .co-mapa-wrapper .leaflet-control-zoom {
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-tema="oscuro"] .co-mapa-wrapper .leaflet-control-zoom a {
  background: var(--superficie) !important;
  color: var(--tinta) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-tema="oscuro"] .co-mapa-wrapper .leaflet-control-zoom a:hover {
  background: var(--superficie-2) !important;
  color: var(--violeta-piel) !important;
}

body.co-mapa-modal-abierto {
  overflow: hidden !important;
}

@media (max-width: 640px) {
  .co-mapa-wrapper.es-maximizada .co-mapa-max-header {
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top, 8px));
    gap: 8px;
  }
  .co-mapa-wrapper.es-maximizada .co-mapa-max-titulo {
    font-size: 12px;
  }
  .co-mapa-wrapper.es-maximizada .co-mapa-max-coords {
    font-size: 11px;
    padding: 2px 6px;
  }
  .co-mapa-wrapper.es-maximizada .co-mapa-max-acciones {
    gap: 6px;
  }
  .co-mapa-wrapper.es-maximizada .co-mapa-max-instruccion {
    bottom: 12px;
    font-size: 11px;
    padding: 6px 12px;
    max-width: 94vw;
  }
  .co-mapa-wrapper .leaflet-top.leaflet-left {
    top: 12px !important;
    left: 12px !important;
  }
  .co-mapa-wrapper .leaflet-control-zoom a {
    width: 38px !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 20px !important;
  }
}