/* =========================================================
   Colores de acento (se eligen en Configuración)
   ========================================================= */
:root                       { --acento: #4f46e5; --acento-2: #7c3aed; }
:root[data-color="azul"]    { --acento: #2563eb; --acento-2: #0891b2; }
:root[data-color="verde"]   { --acento: #059669; --acento-2: #0891b2; }
:root[data-color="naranja"] { --acento: #ea580c; --acento-2: #e11d48; }
:root[data-color="rosa"]    { --acento: #db2777; --acento-2: #9333ea; }
:root[data-color="grafito"] { --acento: #475569; --acento-2: #1e293b; }

/* =========================================================
   Tema claro
   ========================================================= */
:root {
  color-scheme: light;
  --fondo: #f4f6fb;
  --tarjeta: #ffffff;
  --campo: #ffffff;
  --cabecera: #f7f8fc;
  --hover: #f2f4fa;
  --codigo: #f1f3f9;
  --texto: #1b2130;
  --sutil: #6b7385;
  --borde: #e4e8f0;
  --primario: var(--acento);
  --peligro: #dc2626;
  --alerta-fila: #fff5f5;
  --degradado: linear-gradient(165deg, #0f172a 0%, color-mix(in srgb, var(--acento) 45%, #0f172a) 100%);
  --verde-fondo: #dcfce7;    --verde: #166534;
  --amarilla-fondo: #fef3c7; --amarilla: #92400e;
  --roja-fondo: #fee2e2;     --roja: #991b1b;
  --azul-fondo: color-mix(in srgb, var(--acento) 12%, white); --azul: color-mix(in srgb, var(--acento) 80%, black);
  --gris-fondo: #eef0f4;     --gris: #475569;
  --icono-azul: #e0e7ff; --icono-morado: #ede9fe; --icono-verde: #dcfce7;
  --icono-turquesa: #cffafe; --icono-naranja: #ffedd5; --icono-rojo: #fee2e2; --icono-gris: #f1f5f9;
  /* Gráficas (paleta validada para daltonismo) */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --rejilla: #e9ecf2;
  --eje-base: #c3c8d2;
  --radio: 16px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 20px rgba(15, 23, 42, .06);
  --sombra-alta: 0 12px 32px rgba(15, 23, 42, .14);
}

/* =========================================================
   Tema oscuro (suave para la vista)
   ========================================================= */
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --fondo: #0b1120;
  --tarjeta: #131b2e;
  --campo: #0f1729;
  --cabecera: #172036;
  --hover: #1a2440;
  --codigo: #1e293b;
  --texto: #e2e8f0;
  --sutil: #94a3b8;
  --borde: #26324a;
  --primario: color-mix(in srgb, var(--acento) 65%, white);
  --peligro: #f87171;
  --alerta-fila: rgba(248, 113, 113, .08);
  --degradado: linear-gradient(165deg, #020617 0%, color-mix(in srgb, var(--acento) 28%, #020617) 100%);
  --verde-fondo: rgba(34, 197, 94, .15);    --verde: #86efac;
  --amarilla-fondo: rgba(234, 179, 8, .15); --amarilla: #fde047;
  --roja-fondo: rgba(239, 68, 68, .15);     --roja: #fca5a5;
  --azul-fondo: color-mix(in srgb, var(--acento) 22%, transparent); --azul: color-mix(in srgb, var(--acento) 35%, white);
  --gris-fondo: rgba(148, 163, 184, .15);   --gris: #cbd5e1;
  --icono-azul: rgba(99, 102, 241, .2); --icono-morado: rgba(168, 85, 247, .2); --icono-verde: rgba(34, 197, 94, .18);
  --icono-turquesa: rgba(6, 182, 212, .18); --icono-naranja: rgba(249, 115, 22, .18); --icono-rojo: rgba(239, 68, 68, .18);
  --icono-gris: rgba(148, 163, 184, .15);
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --rejilla: #212b40;
  --eje-base: #3a4660;
  --sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
  --sombra-alta: 0 12px 32px rgba(0, 0, 0, .45);
}

/* =========================================================
   Base
   ========================================================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  background: var(--fondo);
  color: var(--texto);
  -webkit-font-smoothing: antialiased;
  transition: background .25s, color .25s;
}

[hidden] { display: none !important; }

h1, h2, h3 { margin: 0 0 12px; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; margin: 0; }
code { font-size: .88em; background: var(--codigo); padding: 2px 6px; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--borde); margin: 6px 0; }
.sutil { color: var(--sutil); }
.error { color: var(--peligro); margin: 0; }
.error:empty { display: none; }
.vacio { text-align: center; color: var(--sutil); padding: 28px; }
.espacio { flex: 1; }
.id-usuario {
  font-size: .72rem; font-weight: 700; color: var(--azul);
  background: var(--azul-fondo); padding: 1px 6px; border-radius: 6px; white-space: nowrap;
}

/* ---------- Controles ---------- */
input, select, textarea {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--campo);
  color: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primario);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 22%, transparent);
}
label { display: flex; flex-direction: column; gap: 6px; font-size: .88rem; font-weight: 500; color: var(--sutil); }
label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); font-weight: 400; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acento); width: 16px; height: 16px; }
.etiqueta-campo { font-size: .88rem; font-weight: 500; color: var(--sutil); }

.btn {
  font: inherit; font-weight: 500;
  display: inline-flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 15px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--tarjeta);
  color: var(--texto);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s, box-shadow .15s, border-color .15s;
}
.btn:hover { background: var(--hover); }
.btn:active { transform: translateY(1px); }
.btn.primario {
  background: linear-gradient(135deg, var(--acento), var(--acento-2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--acento) 35%, transparent);
}
.btn.primario:hover { filter: brightness(1.08); }
.btn.peligro { color: var(--peligro); }
.btn.chico { padding: 6px 10px; font-size: .84rem; border-radius: 8px; }
.btn.grande { padding: 13px; font-size: 1rem; font-weight: 600; }
.btn.blanco { background: #fff; color: #1b2130; border-color: transparent; font-weight: 600; }
.btn.blanco:hover { background: #f1f5f9; }
.btn.transparente { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); color: #fff; }
.btn.transparente:hover { background: rgba(255, 255, 255, .24); }

.icono-btn {
  width: 40px; height: 40px; flex: none;
  display: inline-grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--tarjeta); color: var(--texto);
  font-size: 1.05rem; cursor: pointer;
  transition: background .15s;
}
.icono-btn:hover { background: var(--hover); }

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px;
  box-shadow: var(--sombra);
}
.tarjeta-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.tarjeta-cabecera small { display: block; margin-top: 3px; }

/* =========================================================
   Pantalla de inicio de sesión
   ========================================================= */
.login {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: hidden;
  background: var(--degradado);
  color: #fff;
}

.fondo-animado { position: absolute; inset: 0; pointer-events: none; }

.mancha {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
  animation: flotar 18s ease-in-out infinite alternate;
}
.m1 { width: 480px; height: 480px; background: var(--acento); top: -120px; left: -100px; }
.m2 { width: 420px; height: 420px; background: var(--acento-2); bottom: -140px; right: -80px; animation-delay: -6s; }
.m3 { width: 300px; height: 300px; background: #06b6d4; top: 40%; left: 55%; animation-delay: -12s; opacity: .3; }
:root[data-tema="oscuro"] .mancha { opacity: .3; }

@keyframes flotar {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(60px, 40px) scale(1.15); }
}

/* Cajas (paquetes) que suben girando */
.caja {
  position: absolute;
  bottom: -120px;
  border: 2px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .05);
  border-radius: 12px;
  animation: subir linear infinite;
}
.caja::after {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 18%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, .12);
}
.c1 { left: 6%;  width: 60px;  height: 60px;  animation-duration: 22s; }
.c2 { left: 18%; width: 90px;  height: 90px;  animation-duration: 28s; animation-delay: -10s; }
.c3 { left: 32%; width: 40px;  height: 40px;  animation-duration: 18s; animation-delay: -4s; }
.c4 { left: 46%; width: 70px;  height: 70px;  animation-duration: 26s; animation-delay: -16s; }
.c5 { left: 60%; width: 50px;  height: 50px;  animation-duration: 20s; animation-delay: -8s; }
.c6 { left: 72%; width: 100px; height: 100px; animation-duration: 32s; animation-delay: -20s; }
.c7 { left: 84%; width: 45px;  height: 45px;  animation-duration: 19s; animation-delay: -2s; }
.c8 { left: 93%; width: 65px;  height: 65px;  animation-duration: 25s; animation-delay: -13s; }

@keyframes subir {
  from { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  to   { transform: translateY(-120vh) rotate(360deg); opacity: 0; }
}

.login-contenido {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1000px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.login-presentacion h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.08; margin-bottom: 14px; }
.login-presentacion p { font-size: 1.1rem; opacity: .85; margin: 0 0 26px; max-width: 30em; }
.logo-grande {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  font-size: 2.6rem;
  border-radius: 24px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  margin-bottom: 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.logo-grande img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 8px; }
.ventajas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ventajas li {
  display: inline-block; width: fit-content;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
}

.login-caja {
  display: flex; flex-direction: column; gap: 14px;
  padding: 36px 32px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.login-caja h2 { font-size: 1.7rem; margin: 0; }
.login-sub { margin: -6px 0 6px; opacity: .8; }
.login-caja label { color: rgba(255, 255, 255, .85); }
.login-caja input {
  background: rgba(255, 255, 255, .94);
  border-color: transparent;
  color: #1b2130;
  padding: 13px 14px;
}
.login-caja .error { color: #fecaca; }

/* =========================================================
   Estructura: menú lateral + contenido
   ========================================================= */
.app { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }

.lateral {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column; gap: 22px;
  padding: 20px 14px;
  background: var(--degradado);
  color: #fff;
  overflow-y: auto;
}

.lateral-marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px; }
.marca-logo {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 13px;
  background: rgba(255, 255, 255, .15);
  font-size: 1.4rem;
  overflow: hidden;
}
.marca-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; padding: 3px; }
.marca-textos { display: flex; flex-direction: column; min-width: 0; }
.marca-textos strong {
  font-size: 1.02rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.marca-textos small { font-size: .78rem; opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.menu { display: flex; flex-direction: column; gap: 3px; }
.menu-titulo {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  opacity: .5; padding: 14px 12px 6px;
}
.menu button {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: 0; border-radius: 11px;
  background: none;
  color: rgba(255, 255, 255, .78);
  font: inherit; font-weight: 500;
  text-align: left; cursor: pointer;
  transition: background .15s, color .15s;
}
.menu button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.menu button.activa { background: rgba(255, 255, 255, .16); color: #fff; font-weight: 600; }
.menu button.activa::before {
  content: '';
  position: absolute; left: -14px; top: 10px; bottom: 10px;
  width: 4px; border-radius: 0 4px 4px 0;
  background: #fff;
}
.menu-icono { width: 22px; text-align: center; }

.lateral-pie { margin-top: auto; }
.ayuda-escaner {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
}
.ayuda-escaner small { opacity: .7; line-height: 1.4; }

.contenido { min-width: 0; display: flex; flex-direction: column; }

/* Barra superior */
.superior {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--fondo) 82%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
}
.btn-menu { display: none; }
.titulo-pagina { min-width: 0; }
.titulo-pagina h1 { margin: 0; font-size: 1.35rem; }
.titulo-pagina small { color: var(--sutil); font-size: .82rem; }

.escaner { position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.escaner-icono {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: .7rem; letter-spacing: -1px; color: var(--sutil); pointer-events: none;
}
.escaner input { width: 100%; padding-left: 46px; border-radius: 12px; }

.menu-usuario { position: relative; }
.usuario-boton {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid var(--borde); border-radius: 999px;
  background: var(--tarjeta); color: var(--texto);
  font: inherit; cursor: pointer; text-align: left;
}
.usuario-boton:hover { background: var(--hover); }
.quien { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.quien strong { font-size: .9rem; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien small { font-size: .72rem; color: var(--sutil); }
.flecha { color: var(--sutil); font-size: .8rem; }

.desplegable {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 220px;
  display: flex; flex-direction: column;
  padding: 6px;
  background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: var(--sombra-alta);
  z-index: 20;
}
.desplegable button {
  padding: 10px 12px; border: 0; border-radius: 9px;
  background: none; color: var(--texto);
  font: inherit; text-align: left; cursor: pointer;
}
.desplegable button:hover { background: var(--hover); }
.desplegable button.peligro { color: var(--peligro); }

.avatar {
  width: 36px; height: 36px; flex: none; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-size: .8rem; font-weight: 700;
  background: linear-gradient(135deg, var(--acento), var(--acento-2));
  color: #fff;
}
.avatar.con-foto { background-size: cover; background-position: center; background-repeat: no-repeat; }
.avatar.chico { width: 28px; height: 28px; font-size: .7rem; vertical-align: middle; margin-right: 4px; }
.avatar.grande { width: 60px; height: 60px; font-size: 1.3rem; }

main { padding: 24px 28px 48px; width: 100%; max-width: 1500px; margin: 0 auto; }
.velo { position: fixed; inset: 0; background: rgba(2, 6, 23, .5); z-index: 25; }

/* =========================================================
   Panel
   ========================================================= */
.bienvenida {
  position: relative;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px;
  padding: 28px 30px;
  margin-bottom: 20px;
  border-radius: 22px;
  color: #fff;
  overflow: hidden;
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 255, 255, .22), transparent 35%),
    radial-gradient(circle at 70% 120%, rgba(255, 255, 255, .12), transparent 40%),
    linear-gradient(135deg, var(--acento), var(--acento-2));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--acento) 30%, transparent);
}
:root[data-tema="oscuro"] .bienvenida {
  background:
    radial-gradient(circle at 88% 15%, rgba(255, 255, 255, .08), transparent 35%),
    linear-gradient(135deg, color-mix(in srgb, var(--acento) 55%, #020617), color-mix(in srgb, var(--acento-2) 55%, #020617));
  box-shadow: none;
}
.bienvenida h2 { margin: 0 0 4px; font-size: 1.75rem; }
.bienvenida p { margin: 0; opacity: .88; }
.acciones-rapidas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.hoy { display: flex; gap: 12px; }
.hoy div {
  min-width: 110px;
  padding: 12px 18px; border-radius: 16px; text-align: center;
  background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25);
  backdrop-filter: blur(6px);
}
.hoy strong { display: block; font-size: 1.7rem; }
.hoy span { font-size: .8rem; opacity: .88; }

.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; align-items: center; gap: 14px; padding: 18px; transition: transform .15s, box-shadow .15s; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sombra-alta); }
.kpi > div { min-width: 0; }
.kpi span { display: block; color: var(--sutil); font-size: .84rem; }
.kpi strong { display: block; font-size: 1.5rem; letter-spacing: -.01em; overflow-wrap: anywhere; line-height: 1.2; }
.kpi-icono {
  width: 48px; height: 48px; flex: none;
  display: grid !important; place-items: center;
  border-radius: 14px; font-size: 1.35rem !important;
}
.kpi.azul .kpi-icono     { background: var(--icono-azul); }
.kpi.morado .kpi-icono   { background: var(--icono-morado); }
.kpi.verde .kpi-icono    { background: var(--icono-verde); }
.kpi.turquesa .kpi-icono { background: var(--icono-turquesa); }
.kpi.naranja .kpi-icono  { background: var(--icono-naranja); }
.kpi.rojo .kpi-icono     { background: var(--icono-rojo); }
.kpi.gris .kpi-icono     { background: var(--icono-gris); }
.kpi.naranja strong { color: #ea580c; }
.kpi.rojo strong { color: var(--peligro); }

/* ---------- Gráficas ---------- */
.graficas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.grafica-ancha { grid-column: 1 / -1; }
.grafico { width: 100%; min-height: 240px; }
.grafico svg { display: block; max-width: 100%; height: auto; }
.grafico .serie-1 { fill: var(--serie-1); }
.grafico .serie-2 { fill: var(--serie-2); }
.grafico .rejilla { stroke: var(--rejilla); stroke-width: 1; }
.grafico .base { stroke: var(--eje-base); stroke-width: 1; }
.grafico .eje { fill: var(--sutil); font-size: 11px; font-variant-numeric: tabular-nums; }
.grafico .zona-hover { fill: transparent; }
.grafico .zona-hover.activa { fill: var(--hover); }
.grafico-vacio {
  display: grid; place-items: center; text-align: center;
  min-height: 200px; padding: 20px;
  color: var(--sutil);
  border: 1px dashed var(--borde); border-radius: 12px;
}

.leyenda { display: flex; gap: 16px; font-size: .85rem; color: var(--sutil); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.muestra { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.muestra.serie-1 { background: var(--serie-1); }
.muestra.serie-2 { background: var(--serie-2); }

.ver-datos { margin-top: 10px; font-size: .85rem; }
.ver-datos summary { cursor: pointer; color: var(--sutil); }
.tabla-mini { width: auto; min-width: 280px; margin-top: 8px; font-size: .85rem; }
.tabla-mini th, .tabla-mini td { padding: 5px 12px; }

.barras-h { display: flex; flex-direction: column; gap: 4px; }
.barra-fila {
  display: grid; grid-template-columns: minmax(80px, 36%) 1fr auto;
  align-items: center; gap: 12px;
  padding: 7px 6px; border-radius: 8px;
}
.barra-fila:hover { background: var(--hover); }
.barra-etiqueta { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-pista { height: 14px; }
.barra-relleno { display: block; height: 100%; background: var(--serie-1); border-radius: 0 4px 4px 0; }
.barra-valor { font-size: .86rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.tooltip {
  position: fixed; z-index: 100;
  padding: 8px 11px;
  border-radius: 9px;
  background: #0f172a; color: #f8fafc;
  font-size: .82rem; line-height: 1.5;
  white-space: pre-line;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
:root[data-tema="oscuro"] .tooltip { background: #e2e8f0; color: #0f172a; }

.dos-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--borde);
}
.lista li:last-child { border-bottom: 0; }
.lista li small { display: block; margin-top: 2px; }
.lista li > strong, .lista li > .insignia { flex: none; }
.todo-bien { margin: 0; padding: 14px; border-radius: 12px; background: var(--verde-fondo); color: var(--verde); }

/* =========================================================
   Herramientas, tablas y productos
   ========================================================= */
.herramientas { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.buscador { position: relative; flex: 1 1 280px; }
.buscador span { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: .9rem; }
.buscador input { width: 100%; padding-left: 38px; }

.selector-vista { display: inline-flex; padding: 3px; border: 1px solid var(--borde); border-radius: 11px; background: var(--tarjeta); }
.selector-vista button {
  width: 36px; height: 32px; border: 0; border-radius: 8px;
  background: none; color: var(--sutil); font-size: 1rem; cursor: pointer;
}
.selector-vista button.activo { background: var(--azul-fondo); color: var(--azul); }

.tabla-caja {
  overflow-x: auto;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--borde); vertical-align: middle; }
th {
  font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--sutil); background: var(--cabecera); white-space: nowrap;
}
tbody tr { transition: background .1s; }
tbody tr:hover { background: var(--hover); }
tbody tr:last-child td { border-bottom: 0; }
tr.inactivo td { opacity: .55; }
tr.alerta-fila { background: var(--alerta-fila); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.botones { white-space: nowrap; text-align: right; }
.botones .btn + .btn { margin-left: 4px; }

.miniatura {
  width: 54px; height: 54px; padding: 0;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--cabecera);
  display: grid; place-items: center;
  overflow: hidden; cursor: pointer;
  font-size: 1.2rem; color: var(--sutil);
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.miniatura:hover { border-color: var(--primario); }

/* Tarjetas de producto */
.tarjetas-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.tarjeta-producto {
  display: flex; flex-direction: column;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sombra);
  transition: transform .18s, box-shadow .18s;
}
.tarjeta-producto:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.tp-foto {
  position: relative;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  padding: 0; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--cabecera), var(--hover));
  font-size: 3rem;
}
.tp-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.tarjeta-producto:hover .tp-foto img { transform: scale(1.04); }
.tp-stock { position: absolute; top: 10px; left: 10px; font-size: .78rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.tp-cuerpo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px 10px; min-width: 0; }
.tp-categoria { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--primario); }
.tp-nombre {
  font-size: 1rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tp-precios { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.tp-precio { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.tp-acciones {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 16px 16px; margin-top: auto;
  border-top: 1px solid var(--borde);
}
.tp-acciones .btn.primario { flex: 1 1 100%; }
.tp-acciones .btn.chico:not(.primario) { flex: 1 1 0; padding: 6px 0; min-width: 34px; }

.estado-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 56px 20px; text-align: center;
  background: var(--tarjeta); border: 1px dashed var(--borde); border-radius: var(--radio);
}
.estado-vacio span { font-size: 3rem; }
.estado-vacio p { margin: 0; }

.insignia { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.insignia.verde { background: var(--verde-fondo); color: var(--verde); }
.insignia.amarilla { background: var(--amarilla-fondo); color: var(--amarilla); }
.insignia.roja { background: var(--roja-fondo); color: var(--roja); }
.insignia.azul { background: var(--azul-fondo); color: var(--azul); }
.insignia.gris { background: var(--gris-fondo); color: var(--gris); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--azul-fondo); color: var(--azul); padding: 5px 6px 5px 12px; border-radius: 999px;
}
.chip button { border: 0; background: none; cursor: pointer; color: inherit; font-size: 1rem; }

/* Usuarios */
.nuevo-usuario { margin-bottom: 18px; display: flex; flex-direction: column; gap: 12px; }
.nuevo-usuario .tarjeta-cabecera { margin-bottom: 0; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.fila input, .fila select { flex: 1 1 180px; }

/* Roles y permisos */
.roles-explicacion { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.rol-tarjeta { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.rol-tarjeta strong { display: block; margin-bottom: 3px; }
.rol-tarjeta small { color: var(--sutil); line-height: 1.45; }
.rol-icono { font-size: 1.6rem; }
.sin-saltos { white-space: nowrap; }
#usuarios th, #usuarios td { padding: 11px 10px; }
#usuarios .botones .btn + .btn { margin-left: 2px; }
.persona { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.persona .avatar { margin: 0; }
.persona small { display: block; margin-top: 2px; }
.con-ayuda { cursor: help; }

.selector-rol { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.selector-rol label {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--borde); border-radius: 12px;
  cursor: pointer; color: var(--texto);
}
.selector-rol input { position: absolute; opacity: 0; pointer-events: none; }
.selector-rol span { grid-row: 1 / 3; font-size: 1.5rem; }
.selector-rol small { color: var(--sutil); font-weight: 400; }
.selector-rol label:has(input:checked) { border-color: var(--primario); background: var(--azul-fondo); box-shadow: 0 0 0 1px var(--primario); }
.selector-rol label:has(input:disabled) { cursor: not-allowed; opacity: .7; }
.selector-rol label:has(input:focus-visible) { outline: 2px solid var(--primario); outline-offset: 2px; }

.permisos-cabecera { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.matriz-permisos { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.grupo-permisos {
  margin: 0; padding: 10px 14px 12px;
  border: 1px solid var(--borde); border-radius: 12px;
  display: flex; flex-direction: column; gap: 8px;
  background: var(--cabecera);
}
.grupo-permisos legend { padding: 0 6px; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--sutil); }
.permiso { align-items: flex-start; }
.permiso input { margin-top: 2px; flex: none; }
.permiso small { display: block; color: var(--sutil); font-size: .76rem; }
.permiso.bloqueado { opacity: .55; cursor: not-allowed; }
.interruptor-activo { padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; }
.aviso-fijo {
  margin: 0; padding: 12px 14px; border-radius: 12px;
  background: var(--amarilla-fondo); color: var(--amarilla); line-height: 1.5;
}

/* Respaldos */
.respaldo-acciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 18px; }
.respaldo-acciones .tarjeta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.respaldo-acciones .tarjeta p { margin: 0; }
.tabla-caja.sin-borde { border: 0; box-shadow: none; border-radius: 0; }

/* Importar */
.pasos { margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; line-height: 1.5; }
.pasos a { color: var(--primario); font-weight: 600; }
.resumen-importar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 12px 0 16px; }
.resumen-importar .kpi { padding: 14px; }
.titulo-errores { margin: 4px 0 10px; }
#importar-paso2 { display: flex; flex-direction: column; gap: 6px; }
#importar-paso2 .acciones { margin-top: 12px; }

/* Configuración */
.config { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 18px; align-items: start; }
.config form { display: flex; flex-direction: column; gap: 14px; }
.colores { display: flex; flex-wrap: wrap; gap: 10px; }
.colores label {
  flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 12px; min-width: 82px;
  border: 1px solid var(--borde); border-radius: 12px;
  cursor: pointer; color: var(--texto); font-size: .82rem;
}
.colores input { position: absolute; opacity: 0; pointer-events: none; }
.colores i { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--a), var(--b)); }
.colores label:has(input:checked) { border-color: var(--primario); background: var(--azul-fondo); }
.colores label:has(input:checked) i { box-shadow: 0 0 0 3px var(--tarjeta), 0 0 0 5px var(--primario); }
.colores label:has(input:focus-visible) { outline: 2px solid var(--primario); outline-offset: 2px; }
.logo-vista {
  height: 160px; margin-bottom: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  border: 2px dashed var(--borde); border-radius: 14px;
  background: var(--cabecera);
  font-size: 3rem; text-align: center;
}
.logo-vista small { font-size: .8rem; }
.logo-vista img { max-width: 80%; max-height: 130px; object-fit: contain; }

/* =========================================================
   Diálogos
   ========================================================= */
dialog {
  border: 1px solid var(--borde); border-radius: 20px; padding: 26px;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  background: var(--tarjeta);
  color: var(--texto);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}
dialog[open] { animation: entrar .18s ease-out; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px) scale(.98); } }
dialog::backdrop { background: rgba(15, 23, 42, .55); backdrop-filter: blur(4px); }
dialog form { display: flex; flex-direction: column; gap: 14px; }
.dialogo-grande { width: min(1000px, calc(100vw - 32px)); }
.cabecera-dialogo { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.cabecera-dialogo h2 { margin: 0; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.rejilla .ancho { grid-column: 1 / -1; }
.con-boton { display: flex; gap: 8px; }
.con-boton input { flex: 1; }
.vista-barras { text-align: center; background: #fff; border: 1px dashed var(--borde); border-radius: 10px; padding: 8px; }
.vista-barras svg { max-width: 100%; height: auto; }
.tipos { display: flex; flex-wrap: wrap; gap: 8px; }
.tipos label {
  flex: 1 1 140px;
  flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--borde); border-radius: 12px; padding: 11px 13px; cursor: pointer; color: var(--texto);
}
.tipos label:has(input:checked) { border-color: var(--primario); background: var(--azul-fondo); font-weight: 600; }
.cantidad-grande { font-size: 1.4rem; padding: 12px 14px; }
.mov-cabecera { display: flex; align-items: center; gap: 16px; }
.mov-cabecera h2 { margin: 0 0 4px; }
.mov-cabecera p { margin: 0; line-height: 1.6; }
.mov-foto {
  width: 72px; height: 72px; flex: none;
  display: grid; place-items: center;
  border-radius: 16px; overflow: hidden;
  background: var(--cabecera); font-size: 2rem;
}
.mov-foto img { width: 100%; height: 100%; object-fit: cover; }
.perfil-cabecera { display: flex; align-items: center; gap: 16px; }
.perfil-cabecera h2 { margin: 0 0 4px; }
.perfil-cabecera p { margin: 0; }
.permisos { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.permisos legend { padding: 0 6px; color: var(--sutil); font-size: .9rem; }
.acciones { display: flex; justify-content: flex-end; gap: 8px; }
.opciones-etiqueta { display: flex; flex-direction: column; justify-content: center; gap: 8px; }

/* Fotos y archivos */
.subir-en-formulario { display: flex; flex-direction: column; gap: 6px; }
.botones-subir { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.subir-en-formulario .botones-subir { justify-content: flex-start; }

.zona-subir {
  border: 2px dashed var(--borde);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-bottom: 18px;
  background: var(--cabecera);
  transition: border-color .15s, background .15s;
}
.zona-subir p { margin: 0; }
.zona-subir.encima { border-color: var(--primario); background: var(--azul-fondo); }
.subiendo { color: var(--primario); font-weight: 600; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.archivo {
  display: flex; flex-direction: column;
  border: 1px solid var(--borde); border-radius: 14px;
  overflow: hidden;
  background: var(--tarjeta);
}
.archivo.principal { border-color: var(--primario); box-shadow: 0 0 0 2px var(--azul-fondo); }
.vista-previa {
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  border: 0; padding: 0; cursor: pointer;
  background: var(--cabecera);
  color: var(--texto); text-decoration: none;
}
.vista-previa img { width: 100%; height: 100%; object-fit: cover; }
.icono-archivo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.icono-archivo span { font-size: 2.6rem; }
.icono-archivo small { font-weight: 700; color: var(--sutil); letter-spacing: .05em; }
.archivo-info { padding: 10px 12px 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.archivo-info strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-info small { font-size: .78rem; line-height: 1.35; }
.archivo-acciones { display: flex; align-items: center; gap: 6px; padding: 8px 12px 12px; margin-top: auto; flex-wrap: wrap; }

.visor { width: auto; max-width: calc(100vw - 32px); padding: 12px; text-align: center; position: relative; }
.visor img { max-width: 100%; max-height: calc(100vh - 120px); border-radius: 12px; display: block; margin: 0 auto; }
.visor p { margin: 8px 0 0; color: var(--sutil); }
.visor #cerrar-visor { position: absolute; top: 18px; right: 18px; }

/* =========================================================
   Etiquetas de código de barras (siempre blancas para imprimir)
   ========================================================= */
.etiqueta-muestra { display: flex; justify-content: center; padding: 16px; background: var(--cabecera); border-radius: 12px; }
.etiqueta {
  width: 6cm;
  padding: 6px 8px;
  border: 1px dashed #9ca3af;
  border-radius: 6px;
  background: #fff;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: Arial, sans-serif;
  color: #000;
  break-inside: avoid;
}
.etiqueta strong { font-size: 11pt; line-height: 1.15; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etiqueta svg { max-width: 100%; height: auto; }
.etiqueta .precio { font-size: 13pt; font-weight: 700; }
.etq-negocio { font-size: 7pt; text-transform: uppercase; letter-spacing: .08em; color: #444; }

#zona-impresion { display: none; }

@media print {
  body { background: #fff !important; }
  body > *:not(#zona-impresion):not(.contenido-heredado) { display: none !important; }
  /* Next.js envuelve el contenido de la pantalla en .contenido-heredado (display: contents) */
  .contenido-heredado > *:not(#zona-impresion) { display: none !important; }
  #zona-impresion { display: flex !important; flex-wrap: wrap; gap: 3mm; }
  /* Ticket de 80 mm */
  body.imprimiendo-ticket #zona-impresion { display: block !important; }
  body.imprimiendo-ticket .ticket { width: 72mm; margin: 0; padding: 0; border: 0; box-shadow: none; }
  /* Orden de compra en hoja normal */
  body.imprimiendo-documento #zona-impresion { display: block !important; }
  @page { margin: 6mm; }
}

/* =========================================================
   Avisos
   ========================================================= */
.aviso {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 13px 20px; border-radius: 14px; color: #fff; background: #16a34a;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22); z-index: 60; max-width: calc(100vw - 32px);
  font-weight: 500;
  animation: aparecer .2s ease-out;
}
.aviso.error { background: #dc2626; }
.aviso.info { background: #2563eb; }
@keyframes aparecer { from { opacity: 0; transform: translate(-50%, 10px); } }

/* =========================================================
   Pantallas medianas y celulares
   ========================================================= */
@media (max-width: 1100px) {
  .config { grid-template-columns: 1fr; }
  .roles-explicacion { grid-template-columns: 1fr; }
  .resumen-importar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .app { grid-template-columns: 1fr; }
  .lateral {
    position: fixed; left: 0; top: 0; z-index: 30;
    width: 272px;
    transform: translateX(-100%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
  }
  .lateral.abierto { transform: none; }
  .btn-menu { display: inline-grid; }
  .superior { padding: 12px 16px; flex-wrap: wrap; }
  .titulo-pagina { flex: 1; }
  .escaner { order: 10; flex-basis: 100%; max-width: none; margin-left: 0; }
  main { padding: 18px 16px 40px; }
  .graficas { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .login-contenido { grid-template-columns: 1fr; gap: 28px; }
  .login-presentacion { text-align: center; }
  .login-presentacion .logo-grande { margin-left: auto; margin-right: auto; }
  .ventajas { display: none; }
}

@media (max-width: 560px) {
  .quien { display: none; }
  .flecha { display: none; }
  .usuario-boton { padding: 3px; }
  .titulo-pagina small { display: none; }
  .bienvenida { padding: 22px; }
  .bienvenida h2 { font-size: 1.4rem; }
  .hoy { width: 100%; }
  .hoy div { flex: 1; }
  .kpis { gap: 10px; }
  .kpi { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .kpi-icono { width: 38px; height: 38px; font-size: 1.1rem !important; border-radius: 11px; }
  .kpi strong { font-size: 1.15rem; }
  .galeria { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .tarjetas-productos { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  dialog { padding: 20px; }
}

/* =========================================================
   Versión 3: plataforma, punto de venta, compras y reportes
   ========================================================= */

/* Fondo de la aplicación con un dibujo muy suave de cajas */
:root {
  --patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%234f46e5' stroke-opacity='.055' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='14' y='20' width='30' height='24' rx='3'/%3E%3Cpath d='M29 20v24M14 27h30'/%3E%3Crect x='58' y='60' width='22' height='18' rx='3'/%3E%3Cpath d='M69 60v18M58 65h22'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-tema="oscuro"] {
  --patron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1.5' stroke-linejoin='round'%3E%3Crect x='14' y='20' width='30' height='24' rx='3'/%3E%3Cpath d='M29 20v24M14 27h30'/%3E%3Crect x='58' y='60' width='22' height='18' rx='3'/%3E%3Cpath d='M69 60v18M58 65h22'/%3E%3C/g%3E%3C/svg%3E");
}
.contenido { background-image: var(--patron); background-attachment: fixed; }

/* ---------- Inicio de sesión con ilustración ---------- */
.login-marca { display: flex; align-items: center; gap: 18px; margin-bottom: 8px; }
.login-marca .logo-grande { margin: 0; flex: none; }
.login-marca h1 { margin: 0 0 6px; }
.login-marca p { margin: 0; }
.login-ilustracion { display: block; width: 100%; max-width: 520px; margin: 4px 0 10px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .25)); }
.login .ventajas { display: flex; flex-wrap: wrap; gap: 8px; }
.login .ventajas li { font-size: .88rem; padding: 6px 12px; }
/* Acceso único del dueño de la plataforma, siempre arriba */
.acceso-plataforma { position: absolute; top: 16px; right: 16px; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 10px; border-radius: 999px; color: #fff; text-decoration: none;
  background: linear-gradient(135deg, rgba(250, 204, 21, .28), rgba(255, 255, 255, .1)); border: 1px solid rgba(250, 204, 21, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0, 0, 0, .3); transition: transform .15s, box-shadow .15s; }
.acceso-plataforma:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .4); }
.acceso-plataforma .ap-icono { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: rgba(250, 204, 21, .9); font-size: 1rem; }
.acceso-plataforma strong { display: block; font-size: .88rem; line-height: 1.1; }
.acceso-plataforma small { display: block; font-size: .72rem; opacity: .85; }
@media (max-width: 640px) { .acceso-plataforma { position: static; align-self: center; margin: 12px auto 0; } }

/* ---------- Elegir cómo entrar: una sola cosa a la vez ---------- */
#login-contenido .login-caja { display: none; }
#login-contenido[data-modo="cliente"] #form-cliente,
#login-contenido[data-modo="dueno"] #form-login { display: flex; grid-column: 1 / -1; width: 100%; max-width: 460px; justify-self: center; animation: aparece-login .3s ease; }
@keyframes aparece-login { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.login-elegir { text-align: center; animation: aparece-login .3s ease; }
.login-elegir > h2 { font-size: 1.5rem; margin: 6px 0 20px; letter-spacing: -.02em; }
.elegir-tarjetas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 0 auto; }
.elegir-tarjeta { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 24px 26px; border-radius: 26px; color: #fff; cursor: pointer;
  background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06)); border: 1px solid rgba(255, 255, 255, .24); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .18); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.elegir-tarjeta:hover, .elegir-tarjeta:focus-visible { transform: translateY(-6px); border-color: rgba(255, 255, 255, .55); box-shadow: 0 32px 70px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .25); outline: 0; }
.elegir-tarjeta.cliente { background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 55%, rgba(255, 255, 255, .1)), rgba(255, 255, 255, .06)); }
.elegir-icono { width: 84px; height: 84px; display: grid; place-items: center; font-size: 2.7rem; border-radius: 26px; background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); margin-bottom: 6px; }
.elegir-tarjeta strong { font-size: 1.3rem; letter-spacing: -.02em; }
.elegir-tarjeta small { opacity: .8; font-size: .92rem; max-width: 20em; }
.elegir-flecha { margin-top: 10px; padding: 9px 20px; border-radius: 999px; font-weight: 700; font-size: .92rem; background: linear-gradient(135deg, var(--acento), var(--acento-2)); box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.login-volver { align-self: flex-start; background: none; border: 0; color: rgba(255, 255, 255, .8); font-weight: 600; padding: 2px 0; cursor: pointer; }
.login-volver:hover { color: #fff; }
@media (max-width: 640px) {
  .elegir-tarjetas { grid-template-columns: 1fr; gap: 14px; }
  .elegir-tarjeta { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic t" "ic s" "ic f"; column-gap: 16px; row-gap: 2px; align-items: center; text-align: left; padding: 18px; }
  .elegir-icono { grid-area: ic; width: 64px; height: 64px; font-size: 2rem; border-radius: 20px; margin: 0; }
  .elegir-tarjeta strong { grid-area: t; font-size: 1.1rem; }
  .elegir-tarjeta small { grid-area: s; max-width: none; }
  .elegir-flecha { grid-area: f; justify-self: start; margin-top: 8px; padding: 6px 16px; }
}

/* ---------- Pantalla de entrada con dos lados: cliente y dueño/empleado ---------- */
#login-contenido { max-width: 1020px; grid-template-columns: 1fr 1fr; gap: 26px; align-items: stretch; }
#login-contenido .login-presentacion { grid-column: 1 / -1; display: flex; justify-content: center; text-align: center; }
#login-contenido .login-marca { justify-content: center; margin: 0; }
#login-contenido .login-presentacion h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); margin-bottom: 4px; }
#login-contenido .login-presentacion p { margin: 0; font-size: 1rem; }
#login-contenido .login-caja { position: relative; align-self: stretch; }
.lado-etiqueta { align-self: flex-start; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .22); }
.lado-cliente { background: linear-gradient(160deg, color-mix(in srgb, var(--acento) 55%, rgba(255, 255, 255, .1)), rgba(255, 255, 255, .06)); }
.lado-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .92rem; }
.lado-lista li { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: 9px 12px; }
.lado-cliente .btn.grande { width: 100%; }
.lado-cliente form, .lado-cliente > button { margin: 0; }
.lado-cliente .btn.transparente { width: 100%; }
.login-contenido.una-columna { grid-template-columns: minmax(0, 420px); justify-content: center; }
@media (max-width: 860px) {
  #login-contenido { grid-template-columns: 1fr; gap: 16px; }
}
.login-contenido.una-columna .logo-grande { margin: 0 auto 6px; }
.login-contenido.una-columna h2, .login-contenido.una-columna .login-sub { text-align: center; }
.login-registro { margin: 4px 0 0; text-align: center; font-size: .92rem; opacity: .9; }
.login-registro a { color: #fff; font-weight: 700; }
.login-caja .error.exito { color: #bbf7d0; background: rgba(34, 197, 94, .18); padding: 10px 12px; border-radius: 10px; }
.dos-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.codigo-estado { font-size: .8rem; }
.codigo-estado.libre { color: #bbf7d0; }
.codigo-estado.ocupado { color: #fecaca; }
.registro .login-caja { gap: 11px; }
.planes-publicos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.plan-publico {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
}
.plan-publico .precio { font-size: 1.35rem; font-weight: 800; }
.plan-publico .precio small { font-size: .8rem; font-weight: 500; opacity: .8; }
.plan-publico > small { opacity: .8; font-size: .78rem; }

/* ---------- Panel: ilustración en la bienvenida ---------- */
.bienvenida-texto { position: relative; z-index: 1; }
.bienvenida .hoy { position: relative; z-index: 1; }
.bienvenida-arte {
  position: absolute; right: 300px; bottom: -30px;
  height: 172px; opacity: .9; pointer-events: none;
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .2));
}

/* ---------- Aviso y bloqueo de suscripción ---------- */
.banner {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 12px 16px; border-radius: 14px;
  background: var(--amarilla-fondo); color: var(--amarilla); border: 1px solid color-mix(in srgb, var(--amarilla) 25%, transparent);
}
.banner.urgente { background: var(--roja-fondo); color: var(--roja); }
.bloqueo {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center; padding: 20px;
  background: rgba(2, 6, 23, .72); backdrop-filter: blur(6px);
}
.bloqueo-caja {
  width: min(520px, 100%);
  padding: 28px; border-radius: 22px; text-align: center;
  background: var(--tarjeta); color: var(--texto); box-shadow: var(--sombra-alta);
}
.bloqueo-caja img { width: 220px; margin: -10px auto 6px; display: block; }
.bloqueo-caja h2 { font-size: 1.5rem; }
.bloqueo-datos { text-align: left; margin: 14px 0; display: flex; flex-direction: column; gap: 4px; }
.bloqueo-datos p { margin: 0; }
.datos-pago { padding: 12px 14px; border-radius: 12px; background: var(--cabecera); }
.bloqueo-caja .acciones { justify-content: center; }

/* ---------- Punto de venta ---------- */
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 18px; align-items: start; }
.pos-productos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.pos-producto {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  padding: 10px; text-align: left;
  border: 1px solid var(--borde); border-radius: 16px;
  background: var(--tarjeta); color: var(--texto);
  font: inherit; cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.pos-producto:hover { transform: translateY(-2px); border-color: var(--primario); box-shadow: var(--sombra-alta); }
.pos-producto:active { transform: scale(.98); }
.pos-producto.agotado { opacity: .5; cursor: not-allowed; transform: none; }
.pos-foto {
  aspect-ratio: 4 / 3; border-radius: 11px; overflow: hidden;
  display: grid; place-items: center; font-size: 2rem;
  background: linear-gradient(135deg, var(--cabecera), var(--hover));
}
.pos-foto img { width: 100%; height: 100%; object-fit: cover; }
.pos-nombre { font-weight: 600; font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.pos-precio { font-weight: 800; font-size: 1.05rem; }
.pos-producto .insignia { align-self: flex-start; font-size: .72rem; }

.pos-carrito {
  position: sticky; top: 92px;
  display: flex; flex-direction: column; gap: 12px;
  max-height: calc(100vh - 116px);
  padding: 18px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 20px;
  box-shadow: var(--sombra-alta);
}
.pos-carrito-cabecera { display: flex; justify-content: space-between; align-items: center; }
.pos-cliente { display: flex; gap: 8px; }
.pos-cliente select { flex: 1; min-width: 0; }
.pos-lineas { flex: 1; overflow-y: auto; min-height: 120px; display: flex; flex-direction: column; gap: 8px; margin: 0 -6px; padding: 0 6px; }
.carrito-vacio { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 28px 10px; text-align: center; color: var(--sutil); }
.carrito-vacio span { font-size: 2.4rem; }
.pos-linea {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px;
  padding: 10px; border-radius: 12px; background: var(--cabecera);
}
.pos-linea.recien { animation: destello .6s ease-out; }
@keyframes destello { from { background: var(--azul-fondo); box-shadow: 0 0 0 2px var(--primario); } }
.pos-linea-info { min-width: 0; display: flex; flex-direction: column; }
.pos-linea-info strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-linea-total { font-size: .9rem; white-space: nowrap; }
.pos-linea .quitar { border: 0; background: none; color: var(--sutil); cursor: pointer; font-size: .9rem; padding: 4px; }
.pos-linea .quitar:hover { color: var(--peligro); }
.cantidad-control { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--tarjeta); }
.cantidad-control button { width: 28px; height: 30px; border: 0; background: none; color: var(--texto); cursor: pointer; font-size: 1rem; }
.cantidad-control button:hover { background: var(--hover); }
.cantidad-control input { width: 46px; padding: 4px 2px; border: 0; border-radius: 0; text-align: center; background: transparent; -moz-appearance: textfield; }
.cantidad-control input::-webkit-inner-spin-button { display: none; }
.pos-totales { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px dashed var(--borde); font-size: .9rem; }
.pos-totales div { display: flex; justify-content: space-between; color: var(--sutil); }
.pos-totales .pos-total { color: var(--texto); font-size: 1.1rem; align-items: baseline; margin-top: 4px; }
.pos-totales .pos-total strong { font-size: 1.7rem; letter-spacing: -.02em; }
.pos-cobrar { width: 100%; font-size: 1.1rem; padding: 15px; }

/* ---------- Cobrar ---------- */
.cobro-total {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--acento), var(--acento-2));
}
.cobro-total small { opacity: .85; }
.cobro-total strong { font-size: 2.4rem; letter-spacing: -.02em; }
.cobro-total .sutil { color: rgba(255, 255, 255, .85); font-size: .82rem; text-align: center; }
.metodos-pago { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.metodos-pago label {
  position: relative; flex-direction: column; align-items: center; gap: 2px;
  padding: 10px 6px; border: 1px solid var(--borde); border-radius: 12px; cursor: pointer;
  color: var(--texto); font-size: .82rem; text-align: center;
}
.metodos-pago input { position: absolute; opacity: 0; pointer-events: none; }
.metodos-pago span { font-size: 1.4rem; }
.metodos-pago label:has(input:checked) { border-color: var(--primario); background: var(--azul-fondo); font-weight: 600; box-shadow: 0 0 0 1px var(--primario); }
.metodos-pago label:has(input:focus-visible) { outline: 2px solid var(--primario); outline-offset: 2px; }
.billetes { display: flex; flex-wrap: wrap; gap: 6px; }
.cobro-cambio { font-size: 1.15rem; text-align: center; min-height: 1.4em; }
.cobro-cambio strong { color: var(--verde); font-size: 1.5rem; }
:root[data-tema="oscuro"] .cobro-cambio strong { color: #86efac; }
.cobro-cambio .falta { color: var(--peligro); font-weight: 600; }

/* ---------- Ticket (80 mm) ---------- */
.dialogo-ticket { width: min(420px, calc(100vw - 32px)); }
.ticket-vista { display: flex; justify-content: center; padding: 16px; margin-bottom: 14px; background: var(--cabecera); border-radius: 14px; max-height: 62vh; overflow-y: auto; }
.ticket {
  position: relative;
  width: 300px; padding: 16px 14px;
  background: #fff; color: #111;
  font-family: "Courier New", Consolas, monospace; font-size: 12px; line-height: 1.35;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .12);
}
.ticket .t-logo { max-width: 120px; max-height: 60px; object-fit: contain; margin: 0 auto 4px; }
.ticket .t-negocio { text-align: center; font-size: 15px; text-transform: uppercase; }
.ticket > small { text-align: center; }
.t-separador { border-top: 1px dashed #777; margin: 6px 0; }
.t-fila, .t-item { display: flex; justify-content: space-between; gap: 10px; }
.t-item span:first-child { flex: 1; }
.t-precio { color: #555; padding-left: 14px; }
.t-total { font-size: 15px; margin: 4px 0; }
.t-nota { margin-top: 6px; font-style: italic; }
.t-pie { text-align: center; margin-top: 8px; }
.t-barras { width: 100%; height: auto; margin-top: 8px; }
.t-anulada {
  position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg);
  padding: 6px 16px; border: 3px solid #dc2626; border-radius: 8px; color: #dc2626;
  font-size: 26px; font-weight: 800; text-align: center; background: rgba(255, 255, 255, .85);
  display: flex; flex-direction: column;
}
.t-anulada small { font-size: 11px; font-weight: 400; }

/* ---------- Orden de compra (también para imprimir) ---------- */
.orden-compra { display: flex; flex-direction: column; gap: 10px; }
.orden-cabecera { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--borde); }
.orden-cabecera > div:first-child { display: flex; flex-direction: column; }
.orden-numero { text-align: right; display: flex; flex-direction: column; }
.orden-numero span { font-size: .75rem; letter-spacing: .1em; color: var(--sutil); }
.orden-numero strong { font-size: 1.5rem; }
.orden-compra table { border: 1px solid var(--borde); border-radius: 10px; }
.orden-compra p { margin: 0; }
#zona-impresion .orden-compra { color: #000; font-family: Arial, sans-serif; }
#zona-impresion .orden-compra th { background: #eee; color: #000; }

/* ---------- Varios ---------- */
.kpis-chicos { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpis-chicos .kpi { padding: 14px; }
.kpis-chicos .kpi strong { font-size: 1.25rem; }
.btn.peligro-lleno { background: #dc2626; color: #fff; border-color: transparent; }
.btn.peligro-lleno:hover { background: #b91c1c; }
.estado-vacio img { width: 200px; max-width: 70%; margin-bottom: 6px; }
.tachado { text-decoration: line-through; opacity: .6; }

.ficha-cliente { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; }
.ficha-cliente h3 { margin: 14px 0 8px; }
.ficha-cliente h3:first-child { margin-top: 0; }
.saldo-cliente {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px; margin: 10px 0 14px; border-radius: 16px;
  background: var(--amarilla-fondo); color: var(--amarilla);
}
.saldo-cliente strong { font-size: 2rem; }
.saldo-cliente .a-favor { color: var(--verde); }
.form-abono { display: flex; flex-direction: column; gap: 10px; box-shadow: none; }
.form-abono h3 { margin: 0; }
.lista-ficha { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; }
.fila-ficha {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto); font: inherit; text-align: left;
}
.fila-ficha small { display: block; }
button.fila-ficha { cursor: pointer; }
button.fila-ficha:hover { background: var(--hover); }

.tabla-editable input { width: 110px; padding: 6px 8px; text-align: right; }
.compra-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.compra-pie label { flex: 1 1 260px; }
.compra-total { font-size: 1.1rem; }
.compra-total strong { font-size: 1.5rem; }

.selector-periodo { display: inline-flex; padding: 3px; border: 1px solid var(--borde); border-radius: 11px; background: var(--tarjeta); flex-wrap: wrap; }
.selector-periodo button { padding: 7px 12px; border: 0; border-radius: 8px; background: none; color: var(--sutil); font: inherit; font-size: .88rem; cursor: pointer; }
.selector-periodo button.activo { background: var(--azul-fondo); color: var(--azul); font-weight: 600; }

/* Configuración en dos columnas de tarjetas */
.config-formulario { display: flex; flex-direction: column; gap: 16px; }
.config-formulario .tarjeta { display: flex; flex-direction: column; gap: 14px; }
.config-lateral { display: flex; flex-direction: column; gap: 16px; }
.suscripcion-tarjeta { display: flex; flex-direction: column; gap: 10px; }
.plan-actual { display: flex; justify-content: space-between; align-items: baseline; padding: 14px; border-radius: 14px; color: #fff; background: linear-gradient(135deg, var(--acento), var(--acento-2)); }
.plan-actual strong { font-size: 1.3rem; }
.suscripcion-tarjeta p { margin: 0; }
.uso { display: flex; flex-direction: column; gap: 5px; }
.uso-texto { display: flex; justify-content: space-between; font-size: .88rem; }
.uso-pista { height: 8px; border-radius: 999px; background: var(--cabecera); overflow: hidden; }
.uso-pista span { display: block; height: 100%; border-radius: 999px; background: var(--primario); }
.uso-pista span.lleno { background: #ea580c; }
.como-pagar summary { cursor: pointer; color: var(--primario); font-weight: 600; }
.como-pagar p { margin: 8px 0; }
.planes-mini { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.planes-mini li { padding: 8px 10px; border-radius: 10px; background: var(--cabecera); }
.planes-mini small { display: block; color: var(--sutil); }

/* ---------- Panel del dueño ---------- */
.planes-editor { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.plan-tarjeta { display: flex; flex-direction: column; gap: 12px; }
.plan-tarjeta.plan-prueba { border-style: dashed; }
.input-titulo { font: inherit; font-weight: 700; font-size: 1.05rem; padding: 2px 6px; border-color: transparent; background: transparent; width: 70%; }
.input-titulo:hover, .input-titulo:focus { border-color: var(--borde); background: var(--campo); }
.ficha-negocio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
.ficha-negocio form { display: flex; flex-direction: column; gap: 12px; }
.ficha-estadisticas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.ficha-estadisticas div { padding: 10px 12px; border-radius: 12px; background: var(--cabecera); display: flex; flex-direction: column; gap: 2px; }
.ficha-estadisticas span { font-size: .78rem; color: var(--sutil); }
.ficha-estadisticas strong { font-size: .92rem; }
.config-formulario-unico { max-width: 820px; display: flex; flex-direction: column; gap: 14px; }
.panel-dueno .ayuda-escaner code { background: rgba(255, 255, 255, .12); color: #fff; word-break: break-all; }

/* =========================================================
   Versión 4: vencimientos, soporte, anuncios, planes y página de venta
   ========================================================= */
.contador {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px;
  display: inline-grid; place-items: center;
  border-radius: 999px; background: #ef4444; color: #fff; font-size: .75rem; font-weight: 700;
}
.menu button.bloqueado-plan { opacity: .55; }
.menu button.bloqueado-plan::after { content: 'Plan'; margin-left: auto; font-size: .7rem; opacity: .7; }

/* Anuncios dentro del sistema del cliente */
.avisos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.avisos:not(:empty) { margin-bottom: 18px; }
.aviso-anuncio {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 14px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-left: 5px solid var(--primario);
  box-shadow: var(--sombra);
}
.aviso-anuncio p { margin: 3px 0 0; color: var(--sutil); }
.aviso-icono { font-size: 1.4rem; }
.cerrar-aviso { margin-left: auto; border: 0; background: none; color: var(--sutil); cursor: pointer; font-size: 1rem; }
.anuncio-importante { border-left-color: #dc2626; }
.anuncio-promo { border-left-color: #db2777; }
.anuncio-novedad { border-left-color: #059669; }

/* Insignia de vencimiento en las tarjetas de producto */
.tp-vence { position: absolute; top: 10px; right: 10px; font-size: .74rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.input-lote { width: 110px; }

/* Soporte (cliente y dueño) */
.soporte { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
.soporte-lista { display: flex; flex-direction: column; gap: 8px; }
.soporte-lista .tarjeta-cabecera { margin-bottom: 4px; }
.ticket-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--tarjeta); color: var(--texto); font: inherit; cursor: pointer;
}
.ticket-item:hover { background: var(--hover); }
.ticket-item.activo { border-color: var(--primario); background: var(--azul-fondo); }
.ticket-item.no-leido { border-left: 4px solid #ef4444; }
.ticket-item.no-leido strong::after { content: ' ●'; color: #ef4444; }
.ticket-negocio { display: flex; justify-content: space-between; gap: 8px; font-size: .82rem; color: var(--sutil); }
.soporte-chat { display: flex; flex-direction: column; gap: 12px; min-height: 420px; }
.chat-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--borde); }
.chat-mensajes { flex: 1; display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px; }
.burbuja { max-width: 78%; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: var(--cabecera); align-self: flex-start; }
.burbuja.mia { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--azul-fondo); }
.burbuja small { color: var(--sutil); font-size: .76rem; }
.burbuja p { margin: 4px 0 0; line-height: 1.45; }
.chat-responder { display: flex; gap: 8px; align-items: flex-end; }
.chat-responder textarea { flex: 1; resize: vertical; }
.ayuda-contacto p { margin: 8px 0 0; }

/* Ventana "mejora tu plan" y pantallas de éxito */
.mejorar-plan, .listo { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.mejorar-plan .planes-mini { text-align: left; width: 100%; }
.listo-icono { font-size: 3rem; }
.modulos-incluidos { display: flex; flex-wrap: wrap; gap: 6px; }
.modulos-incluidos span { font-size: .78rem; padding: 3px 9px; border-radius: 999px; background: var(--verde-fondo); color: var(--verde); }
.modulos-incluidos .no-incluido { background: var(--gris-fondo); color: var(--sutil); }
.permiso.fuera-plan small { color: #ea580c; }

/* ---------- Panel del dueño ---------- */
.kpi-boton { text-align: left; font: inherit; color: inherit; cursor: pointer; }
.acciones-negocio { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; margin-bottom: 16px; border-radius: 14px; background: var(--cabecera); }
.modulos-plan { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; display: flex; flex-direction: column; gap: 7px; }
.modulos-plan legend { padding: 0 6px; font-size: .85rem; color: var(--sutil); font-weight: 600; }
.plan-apagado { opacity: .7; }
.interruptor-grande {
  align-items: flex-start; padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--borde); border-radius: 12px; cursor: pointer;
}
.interruptor-grande span { display: flex; flex-direction: column; gap: 2px; }
.interruptor-grande small { color: var(--sutil); }
.interruptor-grande:has(input:checked) { border-color: var(--primario); background: var(--azul-fondo); }
.lista-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.anuncio-tarjeta { display: flex; flex-direction: column; gap: 8px; border-left: 5px solid var(--primario); }
.anuncio-tarjeta p { margin: 0; color: var(--sutil); }
.codigo-cupon { font-size: 1rem; font-weight: 700; letter-spacing: .05em; }
.enlace-registro { color: #fff; font-weight: 600; font-size: .82rem; word-break: break-all; }
.panel-dueno .ayuda-escaner .btn { margin-top: 6px; }
.recibo { display: flex; flex-direction: column; gap: 12px; color: #000; font-family: Arial, sans-serif; }
.recibo table { border: 1px solid #ccc; }
.recibo th { background: #eee; color: #000; }
.recibo .orden-cabecera > div:first-child { display: flex; flex-direction: column; }

/* ---------- Página de venta y registro ---------- */
.pagina-venta { background: var(--fondo); }
.venta-portada {
  position: relative; overflow: hidden; color: #fff;
  background: var(--degradado);
  padding: 0 24px 60px;
}
.venta-nav { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 18px 0; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.venta-marca { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.venta-marca img { width: 38px; height: 38px; border-radius: 10px; }
.venta-hero {
  position: relative; z-index: 1;
  max-width: 1180px; margin: 0 auto; padding-top: 24px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
}
.venta-hero h1 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.08; margin-bottom: 16px; }
.venta-hero p { font-size: 1.12rem; opacity: .88; max-width: 34em; line-height: 1.55; }
.venta-ilustracion { width: 100%; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .25)); }
.sutil-claro { opacity: .85; align-self: center; }
.venta-cuerpo { max-width: 1180px; margin: 0 auto; padding: 0 20px 40px; }
.venta-funciones {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
  margin-top: -36px; position: relative; z-index: 2;
}
.venta-funciones div {
  display: flex; flex-direction: column; gap: 4px; padding: 16px;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra-alta);
}
.venta-funciones span { font-size: 1.6rem; }
.venta-funciones small { color: var(--sutil); line-height: 1.4; }
.venta-planes { padding: 48px 0 10px; text-align: center; }
.venta-planes h2 { font-size: 2rem; }
.planes-venta { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px; text-align: left; margin-top: 18px; }
.plan-venta {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: 24px; border-radius: 22px;
  background: var(--tarjeta); border: 1px solid var(--borde); box-shadow: var(--sombra);
  transition: transform .15s, box-shadow .15s;
}
.plan-venta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.plan-venta.destacado { border: 2px solid var(--primario); }
.plan-venta h3 { font-size: 1.25rem; }
.plan-venta p { margin: 0; color: var(--sutil); min-height: 2.6em; }
.plan-venta .btn { margin-top: auto; }
.cinta {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, var(--acento), var(--acento-2)); color: #fff; font-size: .78rem; font-weight: 700;
}
.precio-grande { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; }
.precio-grande small { font-size: .9rem; font-weight: 500; color: var(--sutil); }
.incluye { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: .9rem; }
.incluye li::first-letter { color: var(--verde); font-weight: 700; }
.incluye .no-incluido { color: var(--sutil); text-decoration: line-through; opacity: .7; }
.incluye .no-incluido::first-letter { color: var(--sutil); }
.venta-registro { max-width: 720px; margin: 30px auto 0; scroll-margin-top: 20px; }
.venta-registro .tarjeta { display: flex; flex-direction: column; gap: 14px; padding: 28px; }
.registro-eleccion { padding: 10px 14px; border-radius: 12px; background: var(--azul-fondo); color: var(--azul); }
.registro-eleccion a { color: inherit; margin-left: 6px; }
.pagina-venta .codigo-estado.libre { color: var(--verde); }
.pagina-venta .codigo-estado.ocupado { color: var(--peligro); }
.venta-pie { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; padding: 26px; color: var(--sutil); border-top: 1px solid var(--borde); }

@media (max-width: 1350px) {
  .bienvenida-arte { display: none; }
}

@media (max-width: 900px) {
  .soporte { grid-template-columns: 1fr; }
  .venta-hero { grid-template-columns: 1fr; }
  .venta-ilustracion { max-width: 420px; margin: 0 auto; }
}

@media (max-width: 1100px) {
  .pos { grid-template-columns: minmax(0, 1fr); }
  .pos-carrito { position: static; max-height: none; }
  .ficha-cliente, .ficha-negocio { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .metodos-pago { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dos-campos { grid-template-columns: 1fr; }
  .pos-productos { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .pos-linea { grid-template-columns: minmax(0, 1fr) auto; }
  .pos-linea-total { grid-column: 1; }
  .login-marca { flex-direction: column; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mancha, .caja { animation: none; }
  .caja { display: none; }
  * { transition: none !important; }
}

/* ============================================================
   v5: cliente, pagos avisados, seguimiento, equipo
   ============================================================ */
.insignia.morada { background: var(--icono-morado); color: #7c3aed; }
[data-tema="oscuro"] .insignia.morada { color: #c4b5fd; }
.texto-rojo { color: var(--peligro); display: block; }
.error-carga { margin-bottom: 14px; }
.btn.whatsapp { background: #dcfce7; border-color: #bbf7d0; color: #166534; }
[data-tema="oscuro"] .btn.whatsapp { background: rgba(34, 197, 94, .16); border-color: rgba(34, 197, 94, .35); color: #86efac; }
.kpi strong small { font-size: .72rem; font-weight: 500; color: var(--sutil); }

/* Pestañas de la ficha del cliente */
.pestanas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--borde); margin-bottom: 16px; }
.pestanas button {
  border: 0; background: none; color: var(--sutil); font: inherit; font-weight: 600; cursor: pointer;
  padding: 9px 14px; border-bottom: 3px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0;
}
.pestanas button:hover { color: var(--texto); background: var(--hover); }
.pestanas button.activa { color: var(--primario); border-bottom-color: var(--primario); }
.pestana-n { font-size: .75rem; font-weight: 600; color: var(--sutil); }
.pestana-n:empty { display: none; }
.pestana-n.alerta { color: #fff; background: #ea580c; border-radius: 999px; padding: 1px 7px; }
.panel-pestana { min-height: 300px; }
.panel-pestana h3 { margin: 14px 0 8px; font-size: 1rem; }
.panel-pestana h3:first-child { margin-top: 0; }
#negocio-uso { display: flex; flex-direction: column; gap: 12px; }
.lista-ficha.alta { max-height: 420px; }
.tabla-caja.alta { max-height: 460px; overflow-y: auto; }

/* Seguimiento (línea de tiempo) */
dialog form.form-seguimiento { flex-direction: row; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; padding: 12px; border-radius: 14px; background: var(--cabecera); }
.form-seguimiento select { width: auto; flex: none; }
.form-seguimiento input[name="texto"] { flex: 1 1 260px; width: auto; min-width: 0; }
.form-seguimiento .check { flex: none; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.form-seguimiento .check input { width: auto; }
.bloqueo-caja .acciones { flex-wrap: wrap; }
.linea-tiempo { display: flex; flex-direction: column; gap: 2px; max-height: 420px; overflow-y: auto; }
.evento { display: flex; gap: 12px; align-items: flex-start; padding: 10px 6px; border-bottom: 1px solid var(--borde); }
.evento:last-child { border-bottom: 0; }
.evento.hecho { opacity: .6; }
.evento-icono { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--cabecera); }
.evento-texto { flex: 1; min-width: 0; }
.evento-texto p { margin: 0 0 3px; }
.agenda-grupo { margin: 14px 0 6px; font-size: .95rem; }
.agenda-grupo:first-child { margin-top: 0; }

/* Pagos avisados por los clientes */
.lista-reportados { display: flex; flex-direction: column; gap: 8px; }
.reporte { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--borde); background: var(--tarjeta); }
.reporte.pendiente { border-left: 4px solid #ea580c; }
.reporte.aprobado { opacity: .75; }
.reporte-icono { font-size: 1.4rem; flex: none; }
.reporte-texto { flex: 1; min-width: 0; }
.reporte-texto small { display: block; margin-top: 2px; }
.revisar-pago { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; align-items: start; }
.comprobante-vista { border-radius: 14px; background: var(--cabecera); min-height: 260px; display: grid; place-items: center; overflow: hidden; }
.comprobante-vista img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.comprobante-vista .grafico-vacio { text-align: center; line-height: 2; }

/* Respuestas rápidas del soporte */
.respuestas-rapidas { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0 4px; }

/* Mi plan (sistema del cliente) */
.planes-elegir { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.plan-elegir { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; border: 2px solid var(--borde); background: var(--tarjeta); }
.plan-elegir.actual { border-color: var(--primario); }
.plan-elegir h3 { margin: 0; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.plan-elegir .precio { font-size: 1.6rem; font-weight: 800; }
.plan-elegir .precio small { font-size: .85rem; font-weight: 500; color: var(--sutil); }
.plan-elegir ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .88rem; flex: 1; }
.plan-elegir li.no { color: var(--sutil); }
.mi-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; align-items: start; }
.mi-plan .tarjeta + .tarjeta { margin-top: 16px; }
.pasos-pago { margin: 0 0 12px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.fila-entre { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.reporte-cliente { padding: 10px 0; border-bottom: 1px solid var(--borde); }
.reporte-cliente:last-child { border-bottom: 0; }
.reporte-cliente small { display: block; }
.bloqueo-estado { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--amarilla-fondo); color: var(--amarilla); font-size: .9rem; }
.bloqueo-estado.rechazado { background: var(--roja-fondo); color: var(--roja); }

@media (max-width: 900px) {
  .revisar-pago, .mi-plan { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .reporte { flex-wrap: wrap; }
  .reporte-texto { flex-basis: calc(100% - 50px); }
  .reporte > .sin-saltos { margin-left: auto; }
}

/* ===== Recuperar contraseña y correo ===== */
.enlace-login { align-self: flex-end; background: none; border: 0; padding: 2px 0; margin: -4px 0 0; color: #fff; opacity: .9; font: inherit; font-size: .88rem; text-decoration: underline; cursor: pointer; }
.enlace-login:hover { opacity: 1; }
.caja-exito { margin: 0; padding: 10px 12px; border-radius: 10px; background: var(--verde-fondo, #dcfce7); color: var(--verde, #166534); font-size: .9rem; }
.campo-codigo { font-family: Consolas, Menlo, monospace; font-size: 1.6rem; letter-spacing: .35em; text-align: center; }
#dlg-recuperar { max-width: 440px; }
#rec-paso1, #rec-paso2 { display: flex; flex-direction: column; gap: 14px; }
.ajuste-correo { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.estado-correo { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .82rem; font-weight: 600; }
.estado-correo.listo { background: #dcfce7; color: #166534; }
.estado-correo.falta { background: #fef3c7; color: #92400e; }
#tabla-usuarios .botones { white-space: normal; min-width: 150px; }
#tabla-usuarios .botones .btn { margin: 2px; }

/* ===== Foto de fondo de la pantalla de entrada ===== */
.login.con-fondo { background: linear-gradient(rgba(15, 23, 42, .55), rgba(15, 23, 42, .65)), var(--foto-fondo) center / cover no-repeat; }
.login.con-fondo .fondo-animado { display: none; }
.login.con-fondo .login-caja { background: rgba(15, 23, 42, .55); backdrop-filter: blur(10px); }
.fondo-vista { height: 120px; border-radius: 12px; overflow: hidden; background: var(--fondo-suave, #f1f5f9); display: grid; place-items: center; margin-bottom: 12px; }
.fondo-vista img { width: 100%; height: 100%; object-fit: cover; }
.fondo-vista span { font-size: 2rem; }

/* Verificación "no soy un robot" */


/* Enlaces legales del pie */
.enlaces-legales { margin: 6px 0; font-size: .85rem; opacity: .85; }
.enlaces-legales a { color: inherit; text-decoration: underline; }


/* Iconos del sistema (ver js/iconos.js) */
.ic { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.menu-icono { display: inline-grid; place-items: center; font-size: 1.2rem; }
.kpi-icono { display: grid; place-items: center; font-size: 1.35rem; color: var(--primario, #4f46e5); }
.kpi.azul .kpi-icono { color: #2563eb; } .kpi.morado .kpi-icono { color: #7c3aed; } .kpi.verde .kpi-icono { color: #16a34a; }
.kpi.turquesa .kpi-icono { color: #0891b2; } .kpi.naranja .kpi-icono { color: #ea580c; } .kpi.rojo .kpi-icono { color: #dc2626; } .kpi.gris .kpi-icono { color: #475569; }
.rol-icono { display: grid; place-items: center; color: var(--primario, #4f46e5); }
.elegir-icono { color: #fff; }
.logo-grande .ic, .marca-logo .ic { width: 58%; height: 58%; color: #fff; }
.logo-grande { color: #fff; }
.miniatura .ic, .tp-foto > .ic { color: #94a3b8; }
.tp-foto > span:empty, .miniatura > span:empty { display: grid; place-items: center; width: 100%; height: 100%; }
.tp-foto .ic { width: 38%; height: 38%; }
.miniatura .ic { width: 55%; height: 55%; }
.logo-vista > span, .estado-vacio > span, .carrito-vacio > span { display: grid; place-items: center; color: #94a3b8; }
.estado-vacio > span, .carrito-vacio > span { margin: 0 auto 6px; }
.listo-icono { display: grid; place-items: center; color: #16a34a; }

.pos-foto { display: grid; place-items: center; color: #94a3b8; }
.pos-foto .ic { width: 36%; height: 36%; }
.buscador > span, .buscar > span { display: grid; place-items: center; color: #94a3b8; font-size: 1.05rem; }
.buscador > span { height: 100%; top: 0; transform: none; }

/* Iconos: ajustes de tamaño y color por lugar */
.btn .ic { display: inline-block; vertical-align: -.16em; margin-right: .2em; }
.btn .ic:last-child { margin-right: 0; }
.tp-foto .ic { width: 56px !important; height: 56px !important; color: #cbd5e1; stroke-width: 1.5; }
.tp-acciones { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-acciones .btn.primario { flex: 1 1 100%; }
.tp-acciones .btn:not(.primario) { flex: 1 1 auto; }

.tp-acciones .btn { white-space: nowrap; }
.tp-acciones .btn:not(.primario) { flex: 0 1 auto; min-width: max-content; }

/* Verificación: tocar el dibujo correcto */
.captcha { display: grid; gap: 8px; margin: 4px 0 8px; }
.captcha-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.captcha-titulo { font-size: .85rem; }
.captcha-titulo strong { font-weight: 700; }
.captcha-cambiar { background: none; border: 1px solid currentColor; border-radius: 8px; color: inherit; cursor: pointer; font: inherit; font-size: 1rem; line-height: 1; padding: 3px 8px; opacity: .8; }
.captcha-cambiar:hover { opacity: 1; }
.captcha-opciones { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.captcha-op { position: relative; display: block; border-radius: 12px; cursor: pointer; border: 2px solid transparent; transition: transform .12s, border-color .12s; }
.captcha-op img { display: block; width: 100%; height: auto; border-radius: 10px; }
.captcha-op input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.captcha-op:hover { transform: translateY(-2px); }
.captcha-op:has(input:checked) { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .35); }
.captcha-op:has(input:focus-visible) { border-color: #fff; outline: 2px solid #4f46e5; }
@media (max-width: 380px) { .captcha-opciones { grid-template-columns: repeat(3, 1fr); } }

/* Pestañas del acceso: administrador/empleado o cliente */
.login-pestanas { grid-column: 1 / -1; justify-self: center; display: flex; gap: 4px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 100%; }
.login-pestanas button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 20px; background: transparent; color: rgba(255, 255, 255, .85); font: inherit; font-weight: 700; font-size: .95rem; cursor: pointer; transition: background .15s, color .15s; }
.login-pestanas button:hover { color: #fff; }
.login-pestanas button.activa { background: linear-gradient(135deg, var(--acento), var(--acento-2)); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .3); }
.login-pestanas .pest-ic { display: inline-grid; font-size: 1.1rem; }
@media (max-width: 480px) { .login-pestanas { width: 100%; } .login-pestanas button { flex: 1; padding: 10px 8px; font-size: .88rem; } .login-pestanas .pest-ic { display: none; } }
#login-contenido .login-caja { padding-top: 22px; }

/* Logos de formas de pago */
.logo-pago { display: block; height: 26px; width: auto; flex: none; }
.pago-marcas { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ---------- Pagar mi plan: mismo estilo que la entrada ---------- */
dialog.dlg-pago { width: min(560px, calc(100vw - 24px)); padding: 0; overflow: hidden; border-radius: 26px; }
dialog.dlg-pago form { gap: 0; }
.pago-cab { position: relative; display: flex; align-items: center; gap: 16px; padding: 26px 28px; color: #fff; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acento) 75%, #0b1020) 0%, #0b1020 62%), #0b1020; }
.pago-cab::after { content: ""; position: absolute; right: -50px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acento-2) 55%, transparent), transparent 70%); pointer-events: none; }
.pago-cab h2 { margin: 0; color: #fff; font-size: 1.35rem; letter-spacing: -.02em; }
.pago-cab p { margin: 4px 0 0; color: rgba(255, 255, 255, .78); font-size: .92rem; }
.pago-cab-ic { display: grid; place-items: center; flex: none; width: 54px; height: 54px; font-size: 1.6rem; border-radius: 18px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .26); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.pago-cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 22px 28px 26px; max-height: calc(100vh - 170px); overflow-y: auto; }
.pago-metodos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pago-metodo { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 4px; padding: 14px 16px; text-align: left; font: inherit; color: var(--texto); cursor: pointer; border-radius: 16px; border: 2px solid var(--borde); background: var(--tarjeta); transition: border-color .15s, box-shadow .15s, transform .15s; min-height: 108px; }
.pago-metodo:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--acento) 45%, var(--borde)); }
.pago-metodo.activa { border-color: var(--acento); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent); background: color-mix(in srgb, var(--acento) 7%, var(--tarjeta)); }
.pago-metodo .pago-marcas { margin-bottom: 6px; }
.pago-metodo .logo-pago { height: 24px; }
.pago-metodo strong { font-size: 1rem; }
.pago-metodo small { color: var(--sutil, #64748b); }
.pago-metodo-ic { display: grid; place-items: center; width: 48px; height: 32px; margin-bottom: 6px; border-radius: 10px; background: color-mix(in srgb, var(--acento) 14%, transparent); color: var(--acento); }
.pago-metodo-ic .ic { width: 20px; height: 20px; }
.pago-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; border: 1px solid var(--borde); background: color-mix(in srgb, var(--acento) 3%, var(--tarjeta)); }
.pago-panel[hidden] { display: none; }
.pago-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0; }
.pago-total span { font-weight: 600; color: var(--sutil, #64748b); }
.pago-total strong { font-size: 1.8rem; letter-spacing: -.03em; }
.pago-total small { flex-basis: 100%; color: var(--sutil, #64748b); }
.pago-seguro { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .85rem; color: var(--sutil, #64748b); }
.pago-seguro-ic { display: inline-grid; color: #16a34a; }
#paypal-botones { min-height: 48px; }
@media (max-width: 520px) { .pago-metodos { grid-template-columns: 1fr; } .pago-metodo { min-height: 0; } .pago-cab, .pago-cuerpo { padding-left: 18px; padding-right: 18px; } }

/* Aviso: personas sin correo */
.aviso-sin-correo { margin: 0 0 14px; padding: 14px 16px; border-radius: 16px; border: 1px solid #fcd34d; background: #fffbeb; color: #78350f; line-height: 1.5; }
:root[data-tema="oscuro"] .aviso-sin-correo { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .45); color: #fde68a; }
.aviso-sin-correo[hidden] { display: none; }
.aviso-sin-correo-lista { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* Tabla de clientes (panel del dueño): más compacta para que quepan las acciones */
table:has(#tabla-negocios) th, #tabla-negocios td { padding-left: 8px; padding-right: 8px; }
#tabla-negocios td.botones { white-space: normal; min-width: 150px; }
#tabla-negocios td.botones .btn { margin: 2px; }

/* ============================================================
   Celulares: iPhone (Safari) y Android (Chrome)
   ============================================================ */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, label, select, summary, input { touch-action: manipulation; }   /* sin el toque doble que hace zoom */
button, a, label { -webkit-tap-highlight-color: transparent; }
/* Con la muesca del iPhone en horizontal, el contenido no queda debajo de ella */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* Safari de iPhone hace zoom al tocar un campo con letra menor de 16 px: en pantallas táctiles se evita */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px; }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  .btn { min-height: 40px; }
}
/* La barra de Safari y de Chrome sube y baja: 100vh miente, dvh no */
@supports (height: 100dvh) {
  .app { min-height: 100dvh; }
  #vista-login, .login { min-height: 100dvh; }
  dialog { max-height: calc(100dvh - 24px); }
  .pago-cuerpo { max-height: calc(100dvh - 170px); }
}
/* La barra de inicio del iPhone no tapa los botones de abajo */
.barra-carrito { bottom: calc(12px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(20px + env(safe-area-inset-bottom)); }
.panel-pie { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
main { scroll-padding-bottom: env(safe-area-inset-bottom); }

/* Celulares angostos: los montos no se parten a la mitad y los textos largos no se cortan en seco */
@media (max-width: 520px) {
  .kpi strong { overflow-wrap: normal; white-space: nowrap; font-size: clamp(.9rem, 4.2vw, 1.4rem); }
  .kpis .kpi { padding: 12px; gap: 8px; }
}
input::placeholder, textarea::placeholder { text-overflow: ellipsis; }

/* ============================================================
   Se siente como una aplicación
   ============================================================ */
/* Deslizar hacia abajo no recarga la página a media venta, y no se estira al llegar al borde */
html, body { overscroll-behavior-y: contain; }
/* Tocar y mantener un botón no abre menús ni selecciona su texto */
button, .btn, .menu button, [role="tab"] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
img { -webkit-touch-callout: none; }
/* Ya instalada: el botón de instalar sobra */
@media (display-mode: standalone) { #btn-instalar, .btn-instalar { display: none !important; } }

/* Avisos: sin conexión, conexión recuperada y versión nueva */
.barra-estado { position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 24px); padding: 10px 16px; border-radius: 999px; color: #fff; font-size: .9rem; font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); animation: entrar .2s ease-out; }
.barra-estado.sin-conexion { background: #b45309; }
.barra-estado.conectado { background: #15803d; }
.barra-estado.nueva { background: linear-gradient(135deg, var(--acento, #4f46e5), var(--acento-2, #7c3aed)); }
.barra-estado .btn { background: rgba(255, 255, 255, .22); border-color: transparent; color: #fff; white-space: nowrap; }

/* Guía para instalar la aplicación */
dialog.dlg-instalar { width: min(440px, calc(100vw - 24px)); padding: 0; overflow: hidden; border-radius: 24px; }
.instalar-cab { padding: 24px 24px 18px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--acento, #4f46e5) 75%, #0b1020) 0%, #0b1020 65%); }
.instalar-cab strong { display: block; font-size: 1.3rem; letter-spacing: -.02em; }
.instalar-cab p { margin: 6px 0 0; color: rgba(255, 255, 255, .8); font-size: .92rem; }
.instalar-pasos { margin: 0; padding: 20px 24px 6px 46px; display: grid; gap: 14px; line-height: 1.5; }
.instalar-pasos li::marker { font-weight: 800; color: var(--acento, #4f46e5); }
.instalar-pasos .ic { display: inline-block; width: 1.25em; height: 1.25em; vertical-align: -.25em; color: var(--acento, #4f46e5); }
.instalar-pie { padding: 12px 24px 22px; display: flex; justify-content: flex-end; }

.barra-estado { width: max-content; border-radius: 18px; text-align: center; line-height: 1.35; }

.instalar-aviso { margin: 16px 24px 0; padding: 12px 14px; border-radius: 14px; background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; font-size: .9rem; line-height: 1.5; }
.instalar-aviso.suave { background: #f1f5f9; border-color: #e2e8f0; color: #475569; }

/* Aviso para descargar la app (abajo, en celulares Android) */
.barra-instalar { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 150; max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #0f172a, #1e1b4b); box-shadow: 0 18px 44px rgba(0, 0, 0, .4); animation: entrar .25s ease-out; }
.barra-instalar img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.barra-instalar > div { flex: 1; min-width: 0; line-height: 1.3; }
.barra-instalar small { display: block; color: #c7d2fe; }
.barra-instalar .btn { white-space: nowrap; }
.barra-instalar-cerrar { border: 0; background: none; color: #a5b4fc; font-size: 1.1rem; padding: 6px; cursor: pointer; }

/* Segundo paso de la entrada y seguridad del perfil */
#login-contenido [hidden] { display: none !important; }
#login-contenido[data-modo="dueno"] #form-codigo-negocio:not([hidden]) { display: flex; grid-column: 1 / -1; width: 100%; max-width: 460px; justify-self: center; animation: aparece-login .3s ease; }
.perfil-seguridad { display: grid; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--borde); background: var(--cabecera); }
.perfil-seguridad-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.perfil-seguridad-fila > div { min-width: 0; }
.perfil-seguridad-fila span { display: block; font-weight: 600; }
.perfil-seguridad-fila small { display: block; line-height: 1.35; }