/* =========================================================
   Tema profesional: tipografía, espaciado, sombras y detalles.
   Se carga DESPUÉS de styles.css. Para volver al diseño anterior basta quitar la línea
   <link rel="stylesheet" href="tema-pro.css"> de index.html, plataforma.html y registro.html.
   ========================================================= */

/* ---------- Tipografía (Inter, incluida en el propio sistema) ---------- */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fuentes/inter-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/fuentes/inter-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  /* Blancos suavizados: menos brillo, más cómodo para la vista */
  --fondo: #e4e8ef;
  --tarjeta: #f2f4f8;
  --campo: #f2f4f8;
  --cabecera: #e8ebf2;
  --hover: #e2e6ee;
  --codigo: #e6e9f0;
  --gris-fondo: #e3e7ee;
  --texto: #1f2636;
  --borde: #d3d9e4;
  --radio: 18px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 14px rgba(16, 24, 40, .05);
  --sombra-alta: 0 16px 40px rgba(16, 24, 40, .12);
  --anillo: 0 0 0 4px color-mix(in srgb, var(--acento) 20%, transparent);
}
:root[data-tema="oscuro"] {
  --fondo: #0a0f1d;
  --borde: #232d45;
  --sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .25);
}

html { scroll-behavior: smooth; }
body {
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -.006em;
  font-feature-settings: 'cv11', 'ss03';
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { letter-spacing: -.022em; font-weight: 700; line-height: 1.2; }
::selection { background: color-mix(in srgb, var(--acento) 28%, transparent); }
:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }

/* Barras de desplazamiento discretas */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--sutil) 45%, transparent) transparent; }

/* ---------- Fondo del área de trabajo: almacén animado (cajas flotando, cinta, escáner) ---------- */
.contenido { background-image: none; position: relative; isolation: isolate; }
.contenido::before {
  content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 256px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--acento) 10%, transparent), transparent 70%),
    url('/img/panel-claro.svg') center / cover no-repeat;
}
:root[data-tema="oscuro"] .contenido::before {
  background:
    radial-gradient(70% 50% at 100% 0%, color-mix(in srgb, var(--acento) 16%, transparent), transparent 70%),
    url('/img/panel-oscuro.svg') center / cover no-repeat;
}
@media (max-width: 960px) { .contenido::before { left: 0; } }
@media (prefers-reduced-motion: reduce) { .contenido::before { opacity: .6; } }

/* ---------- Menú lateral ---------- */
.lateral {
  background:
    radial-gradient(120% 55% at 0% 0%, color-mix(in srgb, var(--acento) 34%, transparent), transparent 62%),
    linear-gradient(180deg, #0e1526 0%, #0b1120 100%);
  border-right: 1px solid rgba(255, 255, 255, .05);
  gap: 18px;
}
.marca-logo { border-radius: 14px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.marca-textos strong { font-weight: 650; letter-spacing: -.015em; }
.menu-titulo { opacity: .42; letter-spacing: .1em; font-size: .66rem; padding: 16px 12px 6px; }
.menu button { padding: 10px 12px; border-radius: 12px; color: rgba(255, 255, 255, .68); font-weight: 500; font-size: .93rem; }
.menu button:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.menu button.activa {
  background: linear-gradient(90deg, color-mix(in srgb, var(--acento) 38%, transparent), color-mix(in srgb, var(--acento) 12%, transparent));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font-weight: 600;
}
.menu button.activa::before { background: color-mix(in srgb, var(--acento) 55%, white); left: -14px; width: 4px; }
.menu-icono { filter: saturate(.9); }
.ayuda-escaner { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .09); border-radius: 16px; }

/* ---------- Barra superior ---------- */
.superior { padding: 12px 28px; background: color-mix(in srgb, var(--fondo) 78%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); }
.titulo-pagina h1 { font-size: 1.3rem; font-weight: 700; }
/* ---------- Usuarios: tarjetas con foto ---------- */
.usuarios-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
.usuario-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 0 18px 18px; overflow: hidden;
  background: var(--tarjeta, #fff); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra);
  transition: transform .18s, box-shadow .18s;
}
.usuario-card::before {
  content: ''; align-self: stretch; height: 74px; margin: 0 -18px 0;
  background: linear-gradient(135deg, var(--acento), var(--acento-2, var(--acento)));
}
.usuario-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); }
.usuario-card.inactivo { opacity: .6; filter: grayscale(.6); }
.usuario-card .foto-card {
  width: 84px; height: 84px; font-size: 1.7rem; margin-top: -42px; flex: none;
  border: 4px solid var(--tarjeta, #fff); box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.usuario-card h3 { margin: 4px 0 0; font-size: 1.05rem; }
.uc-datos { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: .8rem; color: var(--sutil); overflow-wrap: anywhere; }
.uc-cifras { display: flex; gap: 10px; width: 100%; }
.uc-cifras > div { flex: 1; padding: 8px 6px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 7%, transparent); display: flex; flex-direction: column; }
.uc-cifras strong { font-size: .88rem; }
.uc-cifras small { font-size: .68rem; color: var(--sutil); }
.usuario-card .botones { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: auto; padding-top: 6px; }
.estado-punto { position: absolute; top: 12px; right: 12px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; z-index: 1; }
.estado-punto.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .3); }
.estado-punto.off { background: #ef4444; }
.quien small { display: none; }
.usuario-boton .avatar { width: 40px; height: 40px; font-size: .95rem; box-shadow: 0 0 0 2px color-mix(in srgb, var(--acento) 45%, transparent); }
.usuario-boton { border-radius: 999px; box-shadow: var(--sombra); transition: box-shadow .15s, border-color .15s; }
.usuario-boton:hover { border-color: color-mix(in srgb, var(--acento) 35%, var(--borde)); }
.desplegable { border-radius: 16px; padding: 8px; }
.desplegable button { border-radius: 10px; font-weight: 500; }

/* ---------- Contenido: aparece suave ---------- */
main { padding: 28px 32px 56px; }
.vista:not([hidden]) { animation: vp-aparecer .28s ease-out both; }
@keyframes vp-aparecer { from { opacity: 0; transform: translateY(6px); } }

/* ---------- Tarjetas ---------- */
.tarjeta { border-radius: var(--radio); padding: 22px; border-color: var(--borde); }
.tarjeta-cabecera h3 { font-size: 1.02rem; font-weight: 650; }
.kpi { border-radius: var(--radio); padding: 18px 20px; }
.kpi strong { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.025em; }
.kpi span { font-weight: 500; }
.kpi-icono { border-radius: 14px; }
.bienvenida { border-radius: 24px; padding: 30px 34px; }
.bienvenida h2 { font-weight: 700; letter-spacing: -.03em; }

/* ---------- Tablas ---------- */
.tabla-caja { border-radius: var(--radio); }
th { font-size: .7rem; letter-spacing: .07em; padding: 11px 16px; }
td { padding: 14px 16px; }
tbody tr:hover { background: color-mix(in srgb, var(--hover) 70%, transparent); }

/* ---------- Botones y campos ---------- */
.btn { border-radius: 11px; font-weight: 550; padding: 9px 16px; }
.btn.primario { box-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 6px 16px color-mix(in srgb, var(--acento) 32%, transparent); }
.btn.primario:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn.primario:active { transform: translateY(0); }
.btn.grande { padding: 13px 22px; border-radius: 13px; }
.btn.chico { border-radius: 9px; }
.icono-btn { border-radius: 12px; }
input, select, textarea { border-radius: 11px; padding: 10px 13px; }
input:focus, select:focus, textarea:focus { box-shadow: var(--anillo); }
label { font-weight: 550; }
.insignia { font-weight: 600; letter-spacing: 0; }

/* ---------- Ventanas ---------- */
dialog { border-radius: 22px; padding: 28px; box-shadow: 0 30px 80px rgba(2, 6, 23, .35); }
dialog::backdrop { background: rgba(8, 13, 28, .6); backdrop-filter: blur(6px); }
dialog h2 { font-size: 1.3rem; font-weight: 700; }

/* ---------- Avisos ---------- */
.aviso { border-radius: 14px; box-shadow: 0 12px 32px rgba(16, 24, 40, .22); font-weight: 550; }

/* =========================================================
   Pantalla de entrada
   ========================================================= */
.login {
  background:
    radial-gradient(80% 60% at 15% 10%, color-mix(in srgb, var(--acento) 38%, transparent), transparent 60%),
    radial-gradient(70% 60% at 90% 95%, color-mix(in srgb, var(--acento-2) 34%, transparent), transparent 60%),
    url('/img/fondo-inventario.svg') center bottom / cover no-repeat,
    #0a1020;
}
.login-presentacion h1 { font-weight: 800; letter-spacing: -.035em; }
.login-presentacion p { opacity: .8; }
.logo-grande { border-radius: 22px; background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), 0 14px 34px rgba(0, 0, 0, .3); }
.ventajas li { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .14); font-weight: 500; backdrop-filter: blur(6px); }
.login-caja {
  border-radius: 26px;
  padding: 38px 34px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06));
  border-color: rgba(255, 255, 255, .2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.login-caja h2 { font-weight: 750; letter-spacing: -.03em; }
.login-caja label { font-weight: 550; font-size: .86rem; }
.login-caja input { border-radius: 12px; padding: 14px 15px; background: rgba(255, 255, 255, .96); }
.login-caja input:focus { box-shadow: 0 0 0 4px rgba(255, 255, 255, .28); }
.login-caja .btn.primario { padding: 14px; border-radius: 13px; font-size: 1.02rem; }
.login.con-fondo { background: linear-gradient(rgba(10, 16, 32, .5), rgba(10, 16, 32, .68)), var(--foto-fondo) center / cover no-repeat; }
.login.con-fondo .login-caja { background: rgba(10, 16, 32, .5); }

/* =========================================================
   Página de venta
   ========================================================= */
.vp { background: #fff; color: #0f172a; scroll-padding-top: 76px; }
.vp section { position: relative; }
.vp-interior { max-width: 1180px; margin: 0 auto; padding: 0 24px; }

/* Barra fija */
.vp-nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .82); backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5); border-bottom: 1px solid rgba(15, 23, 42, .07); }
.vp-nav-interior { max-width: 1180px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 28px; }
.vp-marca { display: flex; align-items: center; gap: 10px; font-weight: 750; font-size: 1.12rem; letter-spacing: -.025em; color: #0f172a; text-decoration: none; }
.vp-marca img { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 4px 12px rgba(79, 70, 229, .3); }
.vp-enlaces { display: flex; gap: 6px; margin-left: 12px; }
.vp-enlaces a { padding: 8px 12px; border-radius: 9px; color: #475569; text-decoration: none; font-weight: 550; font-size: .92rem; transition: background .15s, color .15s; }
.vp-enlaces a:hover { background: #f1f5f9; color: #0f172a; }
.vp-nav-botones { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.vp .btn.vp-ghost { background: transparent; border-color: #dbe0ea; color: #0f172a; }
.vp .btn.vp-ghost:hover { background: #f1f5f9; }

/* Portada */
.vp-hero { overflow: hidden; background: radial-gradient(70% 70% at 85% 0%, rgba(124, 58, 237, .12), transparent 60%), radial-gradient(60% 60% at 0% 20%, rgba(79, 70, 229, .12), transparent 60%), linear-gradient(180deg, #f8f9ff, #fff); }
.vp-hero-interior { max-width: 1180px; margin: 0 auto; padding: 72px 24px 84px; display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.vp-etiqueta { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #eef2ff; color: #4338ca; font-weight: 600; font-size: .84rem; border: 1px solid #e0e7ff; }
.vp-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1.05; font-weight: 800; letter-spacing: -.04em; margin: 22px 0 18px; color: #0b1220; }
.vp-resalte { background: linear-gradient(135deg, #4f46e5, #7c3aed 60%, #db2777); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vp-hero p { font-size: 1.15rem; color: #475569; line-height: 1.65; max-width: 34em; margin: 0 0 30px; }
.vp-hero-botones { display: flex; flex-wrap: wrap; gap: 12px; }
.vp-lista-confianza { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: #475569; font-size: .92rem; font-weight: 500; }
.vp-lista-confianza li::before { content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #dcfce7; color: #166534; font-size: .7rem; font-weight: 800; }
.vp-lista-confianza li:empty { display: none; }
.vp-visual { position: relative; }
.vp-visual::before { content: ''; position: absolute; inset: 8% 4%; border-radius: 40px; background: linear-gradient(135deg, rgba(79, 70, 229, .22), rgba(219, 39, 119, .16)); filter: blur(40px); }
.vp-visual img { position: relative; width: 100%; filter: drop-shadow(0 24px 40px rgba(15, 23, 42, .18)); }
.vp-chip { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); box-shadow: 0 14px 34px rgba(15, 23, 42, .16); border: 1px solid rgba(15, 23, 42, .06); font-size: .84rem; font-weight: 600; color: #0f172a; animation: vp-flota 6s ease-in-out infinite alternate; }
.vp-chip small { display: block; font-weight: 500; color: #64748b; font-size: .74rem; }
.vp-chip span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 1.05rem; }
.vp-chip.c-a { top: 6%; left: -2%; } .vp-chip.c-a span { background: #dcfce7; }
.vp-chip.c-b { bottom: 24%; right: -2%; animation-delay: -2s; } .vp-chip.c-b span { background: #fee2e2; }
.vp-chip.c-c { bottom: 4%; left: 6%; animation-delay: -4s; } .vp-chip.c-c span { background: #e0e7ff; }
@keyframes vp-flota { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* Secciones */
.vp-seccion { padding: 84px 0; }
.vp-seccion.suave { background: #f8fafc; border-top: 1px solid #eef1f6; border-bottom: 1px solid #eef1f6; }
.vp-titulo { text-align: center; max-width: 680px; margin: 0 auto 48px; }
.vp-titulo .vp-etiqueta { margin-bottom: 16px; }
.vp-titulo h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); font-weight: 800; letter-spacing: -.035em; margin: 0 0 12px; color: #0b1220; }
.vp-titulo p { margin: 0; color: #64748b; font-size: 1.08rem; line-height: 1.6; }

/* Funciones */
.vp-funciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vp-funcion { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid #e8ecf3; transition: transform .2s, box-shadow .2s, border-color .2s; }
.vp-funcion:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(15, 23, 42, .09); border-color: #d9def0; }
.vp-funcion > span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 1.4rem; margin-bottom: 16px; background: linear-gradient(135deg, #eef2ff, #f5f3ff); }
.vp-funcion strong { display: block; font-size: 1.03rem; font-weight: 700; letter-spacing: -.015em; margin-bottom: 6px; color: #0b1220; }
.vp-funcion small { display: block; color: #64748b; font-size: .92rem; line-height: 1.55; }

/* Cómo funciona */
.vp-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; counter-reset: paso; position: relative; }
.vp-paso { position: relative; padding: 28px; border-radius: 22px; background: #fff; border: 1px solid #e8ecf3; counter-increment: paso; }
.vp-paso::before { content: counter(paso); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; margin-bottom: 18px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #fff; font-weight: 800; font-size: 1.1rem; box-shadow: 0 8px 20px rgba(79, 70, 229, .35); }
.vp-paso strong { display: block; font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; color: #0b1220; }
.vp-paso p { margin: 0; color: #64748b; line-height: 1.6; }

/* Planes */
.vp-planes { padding: 84px 0 40px; }
.vp .planes-venta { gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vp .plan-venta { position: relative; padding: 28px 24px; border-radius: 22px; border: 1px solid #e3e8f1; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); gap: 14px; }
.vp .plan-venta:hover { transform: translateY(-5px); box-shadow: 0 22px 48px rgba(15, 23, 42, .12); }
.vp .plan-venta.destacado { border: 2px solid #4f46e5; box-shadow: 0 22px 48px rgba(79, 70, 229, .18); background: linear-gradient(180deg, #fafaff, #fff 40%); }
.vp .plan-venta h3 { font-size: 1.15rem; font-weight: 700; }
.vp .precio-grande { font-size: 2.5rem; font-weight: 800; letter-spacing: -.04em; color: #0b1220; }
.vp .plan-venta p { color: #64748b; }
.vp .incluye { font-size: .9rem; color: #334155; gap: 8px; }
.vp .cinta { font-weight: 700; letter-spacing: .02em; }

/* Formulario de registro */
.vp .venta-registro { max-width: 760px; margin: 40px auto 0; padding: 0 24px; }
.vp .venta-registro .tarjeta { border-radius: 26px; padding: 36px; box-shadow: 0 30px 70px rgba(15, 23, 42, .12); border: 1px solid #e8ecf3; background: #fff; }
.vp .venta-registro h2 { font-size: 1.6rem; font-weight: 800; letter-spacing: -.03em; }
.vp .venta-registro label { color: #475569; }
.vp .venta-registro input { background: #fff; border-color: #dbe0ea; color: #0f172a; padding: 12px 14px; }
.vp .codigo-estado.libre { color: #15803d; font-weight: 600; }
.vp .codigo-estado.ocupado { color: #b91c1c; font-weight: 600; }
.vp .registro-eleccion { background: #eef2ff; color: #3730a3; border-radius: 12px; }

/* Confianza */
.vp-banda { background: #0b1220; color: #fff; padding: 72px 0; overflow: hidden; }
.vp-banda::before { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 80% at 0% 0%, rgba(79, 70, 229, .35), transparent 60%), radial-gradient(50% 70% at 100% 100%, rgba(219, 39, 119, .22), transparent 60%); }
.vp-banda .vp-interior { position: relative; }
.vp-banda .vp-titulo h2 { color: #fff; }
.vp-banda .vp-titulo p { color: #94a3b8; }
.vp-garantias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.vp-garantia { padding: 24px; border-radius: 20px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(6px); }
.vp-garantia span { font-size: 1.6rem; display: block; margin-bottom: 14px; }
.vp-garantia strong { display: block; font-weight: 700; margin-bottom: 6px; letter-spacing: -.015em; }
.vp-garantia small { color: #94a3b8; line-height: 1.55; font-size: .9rem; display: block; }

/* Preguntas */
.vp-preguntas { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.vp-preguntas details { border: 1px solid #e3e8f1; border-radius: 16px; background: #fff; transition: box-shadow .2s, border-color .2s; }
.vp-preguntas details[open] { border-color: #c7cdf5; box-shadow: 0 12px 30px rgba(79, 70, 229, .1); }
.vp-preguntas summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-weight: 650; font-size: 1.02rem; letter-spacing: -.012em; color: #0b1220; }
.vp-preguntas summary::-webkit-details-marker { display: none; }
.vp-preguntas summary::after { content: '+'; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 1.2rem; font-weight: 500; transition: transform .2s, background .2s; }
.vp-preguntas details[open] summary::after { transform: rotate(45deg); background: #e0e7ff; color: #4338ca; }
.vp-preguntas details p { margin: 0; padding: 0 22px 20px; color: #475569; line-height: 1.65; }

/* Llamada final */
.vp-final { padding: 20px 0 84px; }
.vp-final-caja { text-align: center; padding: 64px 28px; border-radius: 32px; color: #fff; position: relative; overflow: hidden; background: radial-gradient(60% 90% at 100% 0%, rgba(255, 255, 255, .22), transparent 55%), linear-gradient(135deg, #4f46e5, #7c3aed 60%, #be185d); box-shadow: 0 30px 70px rgba(79, 70, 229, .35); }
.vp-final-caja h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.035em; margin: 0 0 12px; }
.vp-final-caja p { margin: 0 auto 28px; max-width: 34em; opacity: .9; font-size: 1.08rem; }
.vp-final-caja .btn.blanco { padding: 14px 30px; font-size: 1.02rem; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .2); }

/* Pie */
.vp .venta-pie { background: #f8fafc; border-top: 1px solid #e8ecf3; color: #64748b; padding: 26px 24px; font-size: .9rem; }

@media (max-width: 980px) {
  .vp-hero-interior { grid-template-columns: 1fr; padding: 48px 24px 56px; gap: 40px; }
  .vp-funciones, .vp-garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vp-pasos { grid-template-columns: 1fr; }
  .vp-enlaces { display: none; }
  .vp-visual { max-width: 520px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .vp-funciones, .vp-garantias { grid-template-columns: 1fr; }
  .vp-seccion, .vp-planes { padding: 56px 0 24px; }
  .vp-nav-interior { gap: 10px; padding: 10px 14px; }
  .vp-nav-botones { gap: 6px; }
  .vp-nav-botones .btn { padding: 8px 12px; font-size: .85rem; white-space: nowrap; }
  .vp-marca span { display: none; }
  .vp-chip.c-b { right: 0; } .vp-chip.c-a { left: 0; }
  .vp .venta-registro .tarjeta { padding: 24px 20px; }
}

/* Para quien prefiere menos movimiento */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Ajustes finos */
.vp-hero h1 { font-size: clamp(2.1rem, 4vw, 3.25rem); }
.vp .planes-venta { grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 18px; }
.vp .plan-venta { padding: 26px 20px; }
.vp .precio-grande { font-size: 2.15rem; white-space: nowrap; }
.vp .precio-grande small { font-size: .82rem; white-space: nowrap; }

.vp main { padding: 0; max-width: none; margin: 0; }

/* En el panel del dueño la ilustración tapaba los botones del banner */
.panel-dueno .bienvenida-arte { display: none; }

@media (max-width: 560px) { .vp-hero-botones .btn { flex: 1 1 100%; } }

/* ===== Pie de página: redes sociales y creador ===== */
.redes-sociales { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; }
.red-social { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #475569; background: #fff; border: 1px solid #e3e8f1; transition: transform .15s, color .15s, background .15s, box-shadow .15s; }
.red-social svg { width: 19px; height: 19px; }
.red-social:hover { transform: translateY(-3px); color: #fff; background: linear-gradient(135deg, var(--acento), var(--acento-2)); border-color: transparent; box-shadow: 0 10px 22px color-mix(in srgb, var(--acento) 35%, transparent); }
.creador { font-size: .85rem; color: #64748b; }
.creador strong { color: #0f172a; font-weight: 700; letter-spacing: -.01em; }

.vp .venta-pie { flex-direction: column; gap: 14px; padding: 40px 24px 32px; }
.pie-marca { font-size: 1.1rem; letter-spacing: -.02em; color: #0f172a; }
.pie-marca:empty { display: none; }
.pie-redes { display: flex; flex-direction: column; align-items: center; gap: 12px; }

/* En la pantalla de entrada (fondo oscuro) */
.login-pie { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 16px; }
.login-pie .red-social { width: 36px; height: 36px; color: rgba(255, 255, 255, .85); background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .2); }
.login-pie .red-social svg { width: 17px; height: 17px; }
.login-pie .creador { color: rgba(255, 255, 255, .6); }
.login-pie .creador strong { color: #fff; }
@media (max-height: 760px) { .login { padding-bottom: 96px; } }

/* Ticket: con tres botones, que se acomoden sin cortarse */
.dialogo-ticket .acciones { flex-wrap: wrap; justify-content: center; }
.dialogo-ticket .acciones .btn { flex: 1 1 140px; }
.dialogo-ticket .acciones .espacio { display: none; }

/* Galería de capturas y opiniones (página de ventas) */
.cap-pestanas { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px; }
.cap-pestanas button { border: 1px solid #e2e8f0; background: #fff; color: #334155; border-radius: 999px; padding: 9px 18px; font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer; transition: all .15s; }
.cap-pestanas button:hover { border-color: #a5b4fc; color: #4338ca; }
.cap-pestanas button.activa { background: linear-gradient(135deg, #4f46e5, #7c3aed); border-color: transparent; color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, .3); }
.cap-ventana { margin: 0 auto; max-width: 1040px; border-radius: 16px; overflow: hidden; border: 1px solid #e2e8f0; background: #fff; box-shadow: 0 30px 70px rgba(15, 23, 42, .18); }
.cap-barra { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; }
.cap-barra i { width: 11px; height: 11px; border-radius: 50%; background: #cbd5e1; }
.cap-barra i:nth-child(1) { background: #fca5a5; } .cap-barra i:nth-child(2) { background: #fcd34d; } .cap-barra i:nth-child(3) { background: #86efac; }
.cap-barra span { margin-left: 12px; flex: 1; max-width: 340px; background: #fff; border-radius: 8px; padding: 3px 12px; font-size: .78rem; color: #64748b; }
.cap-ventana img { display: block; width: 100%; height: auto; }
.cap-ventana figcaption { padding: 14px 18px; color: #475569; font-size: .98rem; border-top: 1px solid #eef1f6; text-align: center; }
.cap-moviles { display: flex; gap: 40px; justify-content: center; margin-top: 52px; flex-wrap: wrap; }
.cap-moviles figure { margin: 0; text-align: center; }
.cap-telefono { width: 230px; border-radius: 34px; border: 8px solid #0f172a; overflow: hidden; background: #0f172a; box-shadow: 0 24px 50px rgba(15, 23, 42, .28); margin: 0 auto 14px; }
.cap-telefono img { display: block; width: 100%; height: auto; }
.cap-moviles figcaption { color: #475569; font-weight: 600; }
.cap-nota { text-align: center; color: #94a3b8; font-size: .85rem; margin: 30px 0 0; }
.vp-testimonios { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.vp-testimonio { margin: 0; padding: 26px; background: #fff; border: 1px solid #e8ecf3; border-radius: 20px; }
.vp-testimonio blockquote { margin: 0 0 16px; font-size: 1.05rem; line-height: 1.6; color: #1e293b; }
.vp-testimonio figcaption { color: #64748b; font-size: .92rem; }
.vp-testimonio figcaption strong { color: #0f172a; }
@media (max-width: 640px) { .cap-telefono { width: 200px; } .cap-moviles { gap: 28px; } }

/* Sección "Descarga la app": Android a un lado, iPhone al otro */
.app2-fila { display: grid; grid-template-columns: 1fr auto 1fr; gap: 28px; align-items: stretch; max-width: 1040px; margin: 0 auto; }
.app2-tarjeta { display: flex; flex-direction: column; gap: 18px; padding: 28px; border-radius: 26px; border: 1px solid #e2e8f0; box-shadow: 0 20px 50px rgba(15, 23, 42, .08); }
.app2-tarjeta.android { background: linear-gradient(165deg, #ecfdf5 0%, #fff 55%); border-color: #bbf7d0; }
.app2-tarjeta.ios { background: linear-gradient(165deg, #0f172a 0%, #1e1b4b 100%); border-color: #1e293b; color: #fff; }
.app2-cab { display: flex; align-items: center; gap: 14px; }
.app2-cab h3 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.app2-cab small { display: block; margin-top: 2px; color: #64748b; font-weight: 500; }
.app2-tarjeta.ios .app2-cab small { color: #a5b4fc; }
.app2-logo { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 20px; background: #fff; box-shadow: 0 8px 22px rgba(15, 23, 42, .12); border: 1px solid #d1fae5; }
.app2-tarjeta.ios .app2-logo { background: #fff; color: #0f172a; border-color: rgba(255, 255, 255, .2); }
.logo-so { width: 38px; height: 38px; display: block; }
.app2-pasos { margin: 0; padding: 0 0 0 22px; display: grid; gap: 10px; line-height: 1.5; color: #334155; flex: 1; }
.app2-tarjeta.ios .app2-pasos { color: #e2e8f0; }
.app2-pasos li::marker { font-weight: 800; color: #16a34a; }
.app2-tarjeta.ios .app2-pasos li::marker { color: #a5b4fc; }
.app2-pasos .ic { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; }
.app2-tarjeta .btn.grande { width: 100%; }
.app2-tarjeta.android .btn.primario { background: linear-gradient(135deg, #16a34a, #059669); box-shadow: 0 10px 24px rgba(22, 163, 74, .3); }
.app2-tarjeta.ios .btn { background: #fff; color: #0f172a; border-color: #fff; }
.app2-tarjeta.ios .btn.primario { background: #fff; color: #0f172a; }
.app2-visual { position: relative; display: grid; place-items: center; }
.app2-visual::before { content: ""; position: absolute; width: 130%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(124, 58, 237, .18), rgba(79, 70, 229, .06) 55%, transparent 70%); }
.app2-visual .cap-telefono { position: relative; width: 200px; margin: 0; }
.app2-icono { position: absolute; left: -22px; bottom: 10%; display: grid; justify-items: center; gap: 6px; padding: 10px 12px 7px; border-radius: 22px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(15, 23, 42, .08); box-shadow: 0 16px 36px rgba(15, 23, 42, .2); transform: rotate(-6deg); font-size: .74rem; font-weight: 600; color: #334155; }
.app2-icono img { width: 52px; height: 52px; border-radius: 14px; }
.app2-compu { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 1040px; margin: 22px auto 0; padding: 16px 20px; border-radius: 20px; background: #f8fafc; border: 1px solid #e2e8f0; }
.app2-compu > div { flex: 1; min-width: 220px; }
.app2-compu small { display: block; color: #64748b; margin-top: 2px; }
.app2-compu .app-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; background: linear-gradient(135deg, #eef2ff, #f3e8ff); color: #4f46e5; font-size: 1.3rem; }
.app-ic { display: inline-grid; place-items: center; }
.vp-app-enlace .app-ic { font-size: 1.1rem; }
.app-aviso-http { max-width: 1040px; margin: 0 auto 22px; padding: 12px 16px; border-radius: 14px; background: #fffbeb; border: 1px solid #fcd34d; color: #78350f; font-size: .92rem; line-height: 1.5; }
.app-aviso-http[hidden] { display: none; }
@media (max-width: 900px) {
  .app2-fila { grid-template-columns: 1fr; gap: 18px; }
  .app2-visual { display: none; }
}

/* Solo Android: la tarjeta junto al teléfono */
.app2-fila.una { grid-template-columns: minmax(0, 540px) auto; justify-content: center; gap: 64px; }
.app2-fila.una .app2-visual .cap-telefono { width: 230px; }
.app2-fila.una .app2-tarjeta { padding: 32px; }
.app2-tarjeta.android .btn.grande { font-size: 1.05rem; padding: 15px 18px; }
.app2-tarjeta.android .btn .app-ic { font-size: 1.25rem; }
@media (max-width: 900px) { .app2-fila.una { grid-template-columns: 1fr; gap: 18px; } }

.app2-pasos { align-content: start; }


/* =========================================================
   Avatares ilustrados, "pase" del negocio (credencial con QR) y selector de negocio de la entrada
   ========================================================= */
.av { display: inline-block; flex: none; border-radius: 50%; overflow: hidden; line-height: 0; vertical-align: middle; background: var(--gris-fondo); }
.av svg, .av img { display: block; width: 100%; height: 100%; }
.av img { object-fit: cover; background: #fff; }
.av-cuadrado { border-radius: 24%; }
.usuario-boton .av { box-shadow: 0 0 0 2px var(--tarjeta), 0 0 0 4px color-mix(in srgb, var(--acento) 55%, transparent); }
.usuario-card .av-tarjeta { margin-top: -46px; flex: none; border: 4px solid var(--tarjeta, #fff); box-shadow: 0 8px 22px rgba(0, 0, 0, .22); }
.persona .av { margin-right: 2px; }
.perfil-cabecera .av { box-shadow: 0 0 0 3px var(--tarjeta), 0 0 0 5px color-mix(in srgb, var(--acento) 55%, transparent); }

/* Elegir un avatar en "Mi perfil" */
.avatar-elegir { margin: 4px 0 2px; padding: 12px; border: 1px solid var(--borde); border-radius: 16px; background: var(--cabecera); }
.avatar-elegir-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.avatar-elegir-cab strong { font-size: .88rem; }
.avatar-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px; }
.av-opcion { padding: 0; border: 3px solid transparent; border-radius: 50%; background: none; cursor: pointer; line-height: 0; transition: transform .14s, border-color .14s, box-shadow .14s; }
.av-opcion .av { width: 100%; height: auto; aspect-ratio: 1; }
.av-opcion:hover { transform: scale(1.1); border-color: color-mix(in srgb, var(--acento) 60%, transparent); box-shadow: 0 6px 16px rgba(0, 0, 0, .2); }
.av-opcion:disabled { opacity: .5; cursor: progress; }

/* ---------- Pase del negocio ---------- */
.pase-envoltura { container-type: inline-size; margin-bottom: 18px; }
.pase {
  --qr-ancho: 176px;
  position: relative; display: grid; grid-template-columns: 1fr var(--qr-ancho); border-radius: 24px; color: #fff; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(90% 120% at 0% 0%, color-mix(in srgb, var(--acento) 70%, transparent) 0%, transparent 62%),
    radial-gradient(70% 100% at 100% 100%, color-mix(in srgb, var(--acento-2) 55%, transparent) 0%, transparent 70%),
    linear-gradient(135deg, #0b1226 0%, #141c3a 100%);
  box-shadow: 0 18px 44px rgba(15, 23, 42, .32), inset 0 0 0 1px rgba(255, 255, 255, .1);
  -webkit-mask: radial-gradient(circle 12px at calc(100% - var(--qr-ancho)) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 12px at calc(100% - var(--qr-ancho)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle 12px at calc(100% - var(--qr-ancho)) 0, #0000 97%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle 12px at calc(100% - var(--qr-ancho)) 100%, #0000 97%, #000) bottom / 100% 51% no-repeat;
}
.pase::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, .05) 54%, transparent 68%);
  background-size: 260% 100%; background-position: 130% 0; transition: background-position 1.1s ease;
}
.pase:hover::after { background-position: -30% 0; }
.pase-cuerpo { display: flex; flex-direction: column; gap: 16px; padding: 22px 24px; min-width: 0; }
.pase-cabecera { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pase-logo { box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); }
.pase-textos { display: flex; flex-direction: column; min-width: 0; }
.pase-textos small { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.pase-textos strong { font-size: 1rem; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pase-codigo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pase-segmento {
  padding: 7px 13px; border-radius: 13px; font: 700 clamp(1.15rem, 6cqi, 1.8rem)/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
}
.pase-guion { font-style: normal; font-weight: 800; color: rgba(255, 255, 255, .45); }
.pase-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.pase-btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 650; color: #fff;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .26); transition: background .15s, transform .12s;
}
.pase-btn:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.pase-btn .ic { width: 16px; height: 16px; }
.pase-btn.listo { background: rgba(34, 197, 94, .3); border-color: rgba(134, 239, 172, .6); }
.pase-qr { position: relative; display: grid; place-items: center; align-content: center; gap: 8px; padding: 18px; border-left: 2px dashed rgba(255, 255, 255, .28); }
.pase-qr-caja { width: 128px; height: 128px; padding: 9px; border-radius: 16px; background: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .35); line-height: 0; }
.pase-qr-caja svg { width: 100%; height: 100%; }
.pase-qr small { font-size: .7rem; color: rgba(255, 255, 255, .7); text-align: center; }

.pase-compacto { --qr-ancho: 120px; border-radius: 20px; max-width: 680px; }
.pase-compacto .pase-cuerpo { gap: 10px; padding: 14px 18px; }
.pase-compacto .pase-segmento { font-size: clamp(1rem, 5cqi, 1.3rem); padding: 5px 10px; }
.pase-compacto .pase-qr { padding: 12px; }
.pase-compacto .pase-qr-caja { width: 84px; height: 84px; padding: 6px; border-radius: 12px; }
.pase-compacto .pase-qr small { display: none; }

@container (max-width: 520px) {
  .pase { grid-template-columns: 1fr; -webkit-mask: none; mask: none; }
  .pase-qr { border-left: 0; border-top: 2px dashed rgba(255, 255, 255, .28); grid-template-columns: auto 1fr; justify-items: start; gap: 14px; }
  .pase-qr small { text-align: left; font-size: .78rem; }
}

/* ---------- Selector de negocio (entrada) ---------- */
.selector-negocio { display: grid; gap: 10px; }
.sn-etiqueta { color: rgba(255, 255, 255, .85); font-weight: 550; font-size: .86rem; }
.sn-campo { position: relative; }
.sn-campo input { width: 100%; padding-left: 44px; padding-right: 44px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .02em; }
.sn-icono { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #64748b; pointer-events: none; }
.sn-icono .ic { width: 20px; height: 20px; }
.sn-estado { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: grid; place-items: center; }
.sn-estado .ic { width: 20px; height: 20px; }
.sn-estado.ok { color: #16a34a; }
.sn-estado.no { color: #dc2626; }
.sn-giro { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(100, 116, 139, .35); border-top-color: var(--acento); animation: sn-giro .7s linear infinite; }
@keyframes sn-giro { to { transform: rotate(360deg); } }
.sn-vista { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); animation: sn-entra .28s ease; }
.sn-vista.ok { background: rgba(34, 197, 94, .16); border-color: rgba(134, 239, 172, .55); }
.sn-vista.no { background: rgba(239, 68, 68, .16); border-color: rgba(252, 165, 165, .55); }
.sn-vista .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.sn-vista > div { display: flex; flex-direction: column; min-width: 0; }
.sn-vista strong { color: #fff; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-vista small { color: rgba(255, 255, 255, .78); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes sn-entra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.sn-recientes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sn-recientes > small { width: 100%; color: rgba(255, 255, 255, .65); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.sn-reciente {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 13px 5px 5px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 650; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .24); transition: background .15s, transform .12s;
}
.sn-reciente:hover { background: rgba(255, 255, 255, .22); transform: translateY(-1px); }
.sn-reciente.activo { background: rgba(255, 255, 255, .26); border-color: rgba(255, 255, 255, .55); }


/* =========================================================
   Panel del dueño: Sistema, seguridad de la cuenta y avatar
   ========================================================= */
.sistema-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; margin-bottom: 18px; align-items: start; }
.sistema-rejilla > .tarjeta h4 { margin: 18px 0 8px; font-size: .9rem; }
.sistema-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; margin: 4px 0 14px; }
.sistema-datos > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 6%, transparent); min-width: 0; }
.sistema-datos dt { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sutil); }
.sistema-datos dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.sistema-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sistema-errores { margin: 0; padding: 14px; max-height: 280px; overflow: auto; border-radius: 12px; background: #0b1226; color: #cbd5e1; font: .78rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.seg-reglas { display: grid; gap: 14px; }
.seg-reglas label { display: grid; gap: 6px; }
.seg-reglas label.check { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.seg-reglas label.check small { flex-basis: 100%; }

.seguridad-cuenta { display: grid; gap: 14px; }
.seg-bloque { padding: 14px 16px; border: 1px solid var(--borde); border-radius: 16px; background: var(--tarjeta); }
.seg-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.seg-cab > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.seg-cab small { max-width: 60ch; }
.seg-form { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-form input { flex: 1 1 200px; min-width: 0; }
.seg-lista { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.seg-fila { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--acento) 5%, transparent); }
.seg-fila > div { display: flex; flex-direction: column; min-width: 0; }
.seg-fila small { overflow-wrap: anywhere; }
.seg-icono { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--azul-fondo); color: var(--azul); }
.seg-icono .ic { width: 18px; height: 18px; }
.cuenta-avatar { margin-bottom: 8px; }

.seg-form { flex-direction: row; align-items: center; }
.seg-form input { flex: 1 1 220px; width: auto; height: auto; }
.seg-form .btn { flex: 0 0 auto; width: auto; }
.cuenta-avatar .botones { margin-top: 10px; }


/* =========================================================
   Cartel de la tienda para imprimir (se dibuja en #zona-impresion)
   ========================================================= */
@media print {
  body.imprimiendo-cartel #zona-impresion { display: block !important; }
}
#zona-impresion .cartel {
  box-sizing: border-box; width: 188mm; height: 276mm; margin: 0 auto; padding: 10mm 14mm 9mm; display: flex; flex-direction: column; align-items: center; gap: 4.5mm; text-align: center;
  font-family: Arial, Helvetica, sans-serif; color: #0f172a; border-radius: 10mm;
  background: linear-gradient(180deg, #eef2ff 0%, #ffffff 38%); border: 3mm solid #4f46e5;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; page-break-inside: avoid;
}
#zona-impresion .cartel-cabecera { display: flex; align-items: center; gap: 5mm; text-align: left; }
#zona-impresion .cartel-logo { width: 22mm; height: 22mm; border-radius: 5mm; overflow: hidden; flex: none; line-height: 0; background: #fff; box-shadow: 0 0 0 1mm #c7d2fe; }
#zona-impresion .cartel-logo svg, #zona-impresion .cartel-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
#zona-impresion .cartel-cabecera strong { display: block; font-size: 8mm; line-height: 1.1; }
#zona-impresion .cartel-cabecera small { display: block; font-size: 4.2mm; color: #475569; margin-top: 1.5mm; }
#zona-impresion .cartel h1 { margin: 2mm 0 0; font-size: 12mm; line-height: 1.1; color: #3730a3; letter-spacing: -.3mm; }
#zona-impresion .cartel-sub { margin: 0; font-size: 5.2mm; color: #334155; max-width: 150mm; }
#zona-impresion .cartel-qr { width: 96mm; height: 96mm; padding: 6mm; border-radius: 8mm; background: #fff; border: 1.2mm solid #0f172a; line-height: 0; }
#zona-impresion .cartel-qr svg { width: 100%; height: 100%; }
#zona-impresion .cartel-escanea { margin: 0; font-size: 6mm; font-weight: 700; }
#zona-impresion .cartel-pasos { list-style: none; margin: 1mm 0 0; padding: 0; display: grid; gap: 3mm; text-align: left; font-size: 5mm; }
#zona-impresion .cartel-pasos li { display: flex; align-items: center; gap: 4mm; }
#zona-impresion .cartel-pasos b { width: 9mm; height: 9mm; border-radius: 50%; background: #4f46e5; color: #fff; display: inline-grid; place-items: center; font-size: 5.4mm; flex: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
#zona-impresion .cartel-pie { margin-top: auto; padding-top: 4mm; display: flex; flex-direction: column; gap: 1mm; font-size: 4.4mm; color: #475569; }
#zona-impresion .cartel-pie strong { font-size: 6mm; color: #0f172a; word-break: break-all; }

/* App autenticadora (TOTP) en Seguridad y sesiones */
.totp-pasos { margin: 8px 0 12px; padding-left: 20px; display: grid; gap: 4px; font-size: .9rem; }
.totp-qr-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-bottom: 12px; }
.totp-qr { width: 168px; height: 168px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--borde); line-height: 0; flex: none; }
.totp-qr svg { width: 100%; height: 100%; }
.totp-clave-caja { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.totp-clave-caja code { font-size: 1.05rem; letter-spacing: .08em; padding: 10px 12px; border-radius: 10px; background: var(--codigo); overflow-wrap: anywhere; }
.totp-lista { list-style: none; margin: 10px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.totp-lista li { padding: 8px 10px; border-radius: 10px; background: var(--codigo); text-align: center; }
.totp-lista code { font-size: 1rem; font-weight: 700; letter-spacing: .06em; }
.acciones-fila { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; }
.sesion-id { font-size: .78em; letter-spacing: .06em; padding: 1px 6px; border-radius: 6px; background: var(--fondo-suave, rgba(127,127,127,.15)); }

/* Gráfica de ventas e ingresos (negocios y panel del dueño) */
.grafica-ventas { margin-bottom: 16px; }
.grafica-ventas-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.segmentos { display: inline-flex; background: var(--hover, rgba(127,127,127,.12)); border-radius: 10px; padding: 3px; gap: 2px; }
.segmentos button { border: 0; background: transparent; color: var(--sutil); padding: 5px 11px; border-radius: 8px; font: inherit; font-size: .82rem; cursor: pointer; }
.segmentos button.activa { background: var(--serie-1); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
.grafica-ventas-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 4px 0 10px; }
.grafica-ventas-cifras > div { display: flex; flex-direction: column; gap: 2px; }
.grafica-ventas-cifras span { font-size: .78rem; color: var(--sutil); }
.grafica-ventas-cifras strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.grafica-ventas-cifras small.sube { color: #16a34a; font-weight: 600; }
.grafica-ventas-cifras small.baja { color: #dc2626; font-weight: 600; }
.grafico .linea-ventas { fill: none; stroke: var(--serie-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.grafico .degradado-arriba { stop-color: var(--serie-1); stop-opacity: .38; }
.grafico .degradado-abajo { stop-color: var(--serie-1); stop-opacity: .02; }
.grafico .punto-ventas { fill: var(--serie-1); stroke: var(--tarjeta, #fff); stroke-width: 1.5; }
.grafico .guia-ventas { stroke: var(--serie-1); stroke-width: 1; stroke-dasharray: 4 4; opacity: .6; }

/* Paginador numerado (bitácora y sesiones del panel del dueño) */
.paginador { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin: 14px 0 4px; }
.paginador-info { margin-right: auto; font-size: .85rem; }
.paginador-num { display: inline-flex; align-items: center; gap: 6px; }
.paginador .btn.chico { min-width: 34px; }
@media (max-width: 600px) { .paginador-info { flex-basis: 100%; text-align: center; margin: 0 0 4px; } }