:root {
  --tinta: #0f172a;
  --tenue: #64748b;
  --papel: #f6f8fc;
  --superficie: #ffffff;
  --borde: #e2e8f0;
  --acento: #ff5a1f;
  --acento-oscuro: #e0450e;
  --acento-suave: #fff0e8;
  --ryze: #1f5eff;
  --ok: #15803d;
  --error: #b91c1c;
  --radio: 14px;
  --sombra: 0 1px 2px rgb(15 23 42 / 6%), 0 8px 24px rgb(15 23 42 / 6%);
  --ok-suave: #dcfce7;
  --error-suave: #fee2e2;
  --alerta-suave: #fef3c7;
  --alerta: #92400e;
  --neutro-suave: #f1f5f9;
  color-scheme: light;
}

/* Modo oscuro del panel (Mi cuenta → Apariencia). "sistema" sigue al celular. */
html[data-tema="oscuro"] {
  --tinta: #e7ecf4; --tenue: #98a3b6; --papel: #0d111a; --superficie: #171d2a; --borde: #273044;
  --acento-oscuro: #ff8a5c; --acento-suave: #3a2016; --ok: #4ade80; --error: #f87171;
  --ok-suave: #14301f; --error-suave: #3b1818; --alerta-suave: #3a2e10; --alerta: #fbbf24; --neutro-suave: #1f2636;
  --sombra: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 35%);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-tema="sistema"] {
    --tinta: #e7ecf4; --tenue: #98a3b6; --papel: #0d111a; --superficie: #171d2a; --borde: #273044;
    --acento-oscuro: #ff8a5c; --acento-suave: #3a2016; --ok: #4ade80; --error: #f87171;
    --ok-suave: #14301f; --error-suave: #3b1818; --alerta-suave: #3a2e10; --alerta: #fbbf24; --neutro-suave: #1f2636;
    --sombra: 0 1px 2px rgb(0 0 0 / 35%), 0 8px 24px rgb(0 0 0 / 35%);
    color-scheme: dark;
  }
}

/* Logo de la barra según el tema */
.marca .logo-oscuro { display: none; }
html[data-tema="oscuro"] .marca .logo-claro { display: none; }
html[data-tema="oscuro"] .marca .logo-oscuro { display: inline; }
@media (prefers-color-scheme: dark) {
  html[data-tema="sistema"] .marca .logo-claro { display: none; }
  html[data-tema="sistema"] .marca .logo-oscuro { display: inline; }
}

/* Selector de apariencia (Mi cuenta) */
.selector-tema { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.selector-tema button {
  display: grid; justify-items: center; gap: 6px; padding: 12px 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 700; font-size: .9rem;
}
.selector-tema button .icono { width: 22px; height: 22px; }
.selector-tema button[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-oscuro); }
.selector-tema button:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Manrope', system-ui, sans-serif;
  background: var(--papel);
  color: var(--tinta);
  line-height: 1.5;
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1, .hero h1, .marca, .stats strong { font-family: 'Unbounded', 'Manrope', sans-serif; }
h1 { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; }
h3 { font-size: 0.95rem; font-weight: 700; margin: 0; }
h2 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1em; }
img { max-width: 100%; }

.contenedor { max-width: 1100px; margin: 0 auto; padding: 24px 16px 64px; }
.angosta { max-width: 440px; margin-inline: auto; width: 100%; }
.pila { display: flex; flex-direction: column; gap: 16px; }
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; }
.fila > * { flex: 1 1 140px; }
.tenue { color: var(--tenue); }
.nota { color: var(--tenue); font-size: 0.875rem; text-align: center; margin: 0; }

/* ---------- Marca y barra ---------- */
.marca { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.35rem; letter-spacing: -0.03em; text-decoration: none; color: var(--tinta); }
.marca img { height: 36px; width: auto; display: block; }
.marca.grande { font-size: 2rem; margin-bottom: 8px; }
.marca.grande img { height: 52px; }
.ryze { color: var(--ryze); }

.barra {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 12px 16px; background: var(--superficie); border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 10;
}
.barra-negocio { color: var(--tenue); font-weight: 600; font-size: 0.9rem; }
.barra nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.barra nav a, .barra nav .enlace { padding: 6px 10px; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.barra form { margin: 0; }

/* ---------- Formularios ---------- */
label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.9rem; }
input, select {
  font: inherit; font-weight: 500; padding: 11px 12px; border: 1px solid var(--borde);
  border-radius: 10px; background: var(--superficie); color: var(--tinta); width: 100%; min-width: 0;
}
input:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
input[type=color] { padding: 4px; height: 46px; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--acento); }
label.check { flex-direction: row; align-items: center; font-weight: 500; }
label.check.deshabilitada { opacity: 0.55; cursor: not-allowed; }
.prefijo { display: flex; align-items: center; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.prefijo span { padding-left: 12px; color: var(--tenue); }
.prefijo input { border: 0; }

.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opcion { border: 1.5px solid var(--borde); border-radius: 12px; padding: 12px; cursor: pointer; gap: 2px; }
.opcion input { position: absolute; opacity: 0; }
.opcion small { font-weight: 500; color: var(--tenue); }
.opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 700; padding: 11px 18px; border-radius: 10px; border: 0; cursor: pointer;
  background: var(--acento); color: #fff; text-decoration: none; white-space: nowrap;
}
.boton.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borde); }
.boton.ancho { width: 100%; }
.boton:disabled { opacity: 0.5; cursor: not-allowed; }
.enlace { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-decoration: underline; }
.enlace.peligro { color: var(--error); }
.acciones { display: flex; gap: 10px; flex-wrap: wrap; }

.caja { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; box-shadow: var(--sombra); }
form.caja { display: flex; flex-direction: column; gap: 14px; }
.aviso { padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 0.9rem; margin: 0 0 16px; }
.aviso.ok { background: var(--ok-suave); color: var(--ok); }
.aviso.error { background: var(--error-suave); color: var(--error); }

.titulo-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.titulo-fila h1 { margin: 0; }
.titulo-fila p { margin: 0; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.stats div { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; display: flex; flex-direction: column; }
.stats small { color: var(--tenue); font-weight: 600; }
.stats strong { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; }
.stats span { color: var(--tenue); font-size: 0.85rem; }

.tabla { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tabla th { text-align: left; color: var(--tenue); font-weight: 600; font-size: 0.8rem; padding: 0 8px 8px; }
.tabla td { padding: 10px 8px; border-top: 1px solid var(--borde); vertical-align: top; }
.tabla tr.inactivo { opacity: 0.5; }
.caja:has(.tabla) { overflow-x: auto; }

/* ---------- La tarjeta ---------- */
.tarjeta {
  --fondo: #1c1917; --texto: #fff;
  /* El color del negocio de más claro (arriba a la izquierda) a más oscuro (abajo a la derecha), parejo en toda la tarjeta. Es el mismo color, no un degradado
     de dos colores: Apple y Google Wallet solo aceptan color sólido y así la tarjeta se ve igual en todos lados. */
  background:
    linear-gradient(135deg, rgb(255 255 255 / 20%) 0%, rgb(255 255 255 / 6%) 40%, rgb(0 0 0 / 0%) 60%, rgb(0 0 0 / 16%) 100%),
    var(--fondo);
  color: var(--texto);
  border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 20px 40px -12px rgb(0 0 0 / 35%);
  width: 100%;
}
.tarjeta header, .registro-cabeza { display: flex; align-items: center; gap: 12px; }
.tarjeta header div, .registro-cabeza div { display: flex; flex-direction: column; }
.tarjeta header small { opacity: 0.75; }
.tarjeta-logo { width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: rgb(255 255 255 / 15%); flex: none; }
.tarjeta-logo.grande { width: 96px; height: 96px; border-radius: 20px; }
/* Flex en lugar de grid para que la última fila quede centrada (ej. 8 sellos = 5 arriba y 3 centrados abajo). */
.sellos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sellos .sello { width: calc((100% - (var(--n) - 1) * 10px) / var(--n)); }
.sello {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  border: 2px dashed color-mix(in srgb, var(--texto) 45%, transparent);
  font-weight: 700; font-size: 0.85rem; opacity: 0.7;
}
.sello.lleno { background: var(--texto); color: var(--fondo); border-style: solid; border-color: var(--texto); opacity: 1; font-size: 1.1rem; }
.puntos strong { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; }
.puntos small { opacity: 0.75; }
.barra-progreso { height: 10px; border-radius: 99px; background: color-mix(in srgb, var(--texto) 20%, transparent); margin: 8px 0 4px; overflow: hidden; }
.barra-progreso span { display: block; height: 100%; background: var(--texto); border-radius: inherit; }
.tarjeta-estado { margin: 0; font-weight: 600; }
.tarjeta-qr { background: #fff; color: #1c1917; border-radius: 14px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tarjeta-qr svg { width: 180px; height: 180px; }
.tarjeta-qr small { font-weight: 700; letter-spacing: 0.15em; }

.wallets { display: flex; flex-direction: column; gap: 10px; }
/* Botones oficiales de Apple y Google, tal cual (sin sombras ni cambios, como piden sus reglas). */
.wallets { align-items: center; }
.boton-wallet { display: block; line-height: 0; }
.boton-wallet img { height: 52px; width: auto; }

/* ---------- Páginas del cliente ---------- */
.pagina-centro .contenedor { min-height: 100dvh; display: flex; flex-direction: column; }
.pagina-centro .contenedor > :first-child { margin-top: auto; }
.pagina-centro .contenedor > :last-child { margin-bottom: auto; }
/* La cabecera del registro usa los colores del negocio, para que su logo se vea igual que en la tarjeta. */
.registro-cabeza {
  background: var(--fondo); color: var(--texto);
  margin: -20px -20px 4px; padding: 20px; border-radius: var(--radio) var(--radio) 0 0;
}
.registro-cabeza small { color: inherit; opacity: 0.75; }
.regla { background: var(--papel); border-radius: 10px; padding: 12px; font-weight: 600; margin: 0; }
.texto p { line-height: 1.65; }

/* ---------- Landing ---------- */
.pagina-landing .contenedor { max-width: 1100px; }
.landing-barra { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; margin-bottom: 64px; }
.hero h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); }
.etiqueta { color: var(--acento); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; }
.etiqueta .powered { color: var(--tinta); }
.entrada { font-size: 1.15rem; color: #44403c; max-width: 52ch; }
.hero-tarjeta { max-width: 380px; justify-self: center; width: 100%; transform: rotate(-3deg); }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pasos div { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }
.pasos span { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--acento); color: #fff; font-weight: 800; margin-bottom: 12px; }
.pasos p { color: var(--tenue); margin: 0; }

/* ---------- Escáner ---------- */
/* Escáner: visor negro con la cámara, un marco para apuntar y el aviso abajo. */
.escaner-cabeza { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; }
.escaner-cabeza h1 { margin: 0; }
.visor { position: relative; aspect-ratio: 1; width: 100%; max-height: 62vh; margin-inline: auto; border-radius: 22px; overflow: hidden; background: #0b0b0d; }
.visor .camara, .visor .camara > div { position: absolute; inset: 0; width: 100% !important; height: 100% !important; border: 0 !important; }
.visor .camara video { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }
/* html5-qrcode dibuja su propio sombreado; usamos el nuestro (el marco). */
.visor #qr-shaded-region { display: none; }
.visor-marco { position: absolute; inset: 16%; pointer-events: none; box-shadow: 0 0 0 100vmax rgb(0 0 0 / 55%); border-radius: 18px; }
.visor-marco i { position: absolute; width: 42px; height: 42px; border: 5px solid #fff; }
.visor-marco i:nth-child(1) { top: -3px; left: -3px; border-right: 0; border-bottom: 0; border-top-left-radius: 18px; }
.visor-marco i:nth-child(2) { top: -3px; right: -3px; border-left: 0; border-bottom: 0; border-top-right-radius: 18px; }
.visor-marco i:nth-child(3) { bottom: -3px; left: -3px; border-right: 0; border-top: 0; border-bottom-left-radius: 18px; }
.visor-marco i:nth-child(4) { bottom: -3px; right: -3px; border-left: 0; border-top: 0; border-bottom-right-radius: 18px; }
.visor-ayuda { position: absolute; left: 0; right: 0; bottom: 5%; margin: 0; text-align: center; color: #fff; font-weight: 700; font-size: .95rem; text-shadow: 0 1px 4px rgb(0 0 0 / 60%); pointer-events: none; }
.visor-apagado { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; background: #0b0b0d; color: #fff; }
.visor-apagado[hidden] { display: none; }
.visor-apagado p { margin: 0; max-width: 28ch; color: rgb(255 255 255 / 80%); }
.visor-icono .icono { width: 44px; height: 44px; color: var(--acento); }
#btn-escribir { flex-direction: row; }
.visor.visor-chico { aspect-ratio: auto; height: 76px; }
.visor-chico .visor-apagado { padding: 12px; }
.visor-chico .visor-icono, .visor-chico .visor-marco, .visor-chico .visor-ayuda { display: none; }
#resultado { scroll-margin-top: 72px; }
.resultado { display: flex; flex-direction: column; gap: 14px; }
.resultado-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.resultado-saldo { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; }
.listo { background: #dcfce7; color: var(--ok); border-radius: 10px; padding: 10px 12px; font-weight: 700; }
.hecho { animation: aparecer 0.4s ease; }
@keyframes aparecer { from { transform: scale(0.96); opacity: 0; } }

/* ---------- Cartel imprimible ---------- */
.pagina-cartel .contenedor { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cartel {
  background: var(--fondo); color: var(--texto); width: 100%; max-width: 560px; border-radius: 24px;
  padding: 40px 32px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px;
  print-color-adjust: exact; -webkit-print-color-adjust: exact;
}
.cartel h1 { font-size: 2.4rem; margin: 0; }
.cartel-regla { font-size: 1.25rem; font-weight: 600; }
.cartel-qr { background: #fff; padding: 16px; border-radius: 16px; width: 280px; }
.cartel-qr svg { display: block; width: 100%; height: auto; }
.cartel small { opacity: 0.7; }
@media print {
  .no-imprimir { display: none; }
  body { background: #fff; }
}

@media (max-width: 760px) {
  .dos-columnas, .hero { grid-template-columns: minmax(0, 1fr); }
  .stats, .pasos { grid-template-columns: 1fr; }
  .hero { gap: 32px; }
  .hero-tarjeta { transform: none; }
  .barra nav { margin-left: 0; width: 100%; }
}

.tarjeta-logo.inicial {
  display: inline-grid; place-items: center; flex: none;
  background: var(--texto); color: var(--fondo); font-weight: 800; font-size: 1.3rem;
}
.tarjeta-logo.inicial.grande { font-size: 3rem; }

/* ---------- Íconos, sellos con ícono y premios ---------- */
.icono { width: 1.2em; height: 1.2em; flex: none; }
.con-icono { display: inline-flex; align-items: center; gap: 6px; }
.sello .icono { width: 55%; height: 55%; }
.sello.con-premio:not(.lleno) { border-style: solid; opacity: 0.95; }

.premios { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.premios li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.premio-texto { display: flex; flex-direction: column; min-width: 0; }
.premios small { color: var(--tenue); }
.premio-icono { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--acento-suave); color: var(--acento); flex: none; }
.premios li.disponible { border-color: #86efac; background: #f0fdf4; }
.premios li.disponible .premio-icono { background: #dcfce7; color: var(--ok); }
.premios li.canjeado { opacity: 0.6; }
.cartel .premios { width: 100%; max-width: 380px; text-align: left; color: var(--tinta); }

.editor-premios { border: 1px dashed var(--borde); border-radius: 12px; padding: 14px; }
.editor-premios p { margin: 0; font-size: 0.875rem; }
.filas-premios { display: flex; flex-direction: column; gap: 10px; }
.fila-premio { display: grid; grid-template-columns: 96px 1fr 40px; gap: 8px; align-items: end; }
.quitar { height: 46px; border: 1px solid var(--borde); background: var(--superficie); border-radius: 10px; cursor: pointer; color: var(--tenue); display: grid; place-items: center; }

.iconos { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 6px; }
.icono-opcion { align-items: center; gap: 4px; padding: 8px 4px; border: 1.5px solid var(--borde); border-radius: 12px; cursor: pointer; text-align: center; font-weight: 500; }
.icono-opcion input { position: absolute; opacity: 0; }
.icono-opcion small { font-size: 0.72rem; color: var(--tenue); line-height: 1.2; }
.icono-muestra { display: grid; place-items: center; height: 28px; }
.icono-muestra .icono { width: 24px; height: 24px; }
.icono-muestra b { font-size: 0.85rem; }
.icono-opcion:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.icono-opcion:has(input:focus-visible) { outline: 2px solid var(--acento); }

.vista-previa { position: sticky; top: 76px; }
.boton .icono { width: 1.1em; height: 1.1em; }

@media (max-width: 760px) {
  .vista-previa { position: static; order: -1; }
}
.premios li .boton { margin-left: auto; padding: 8px 14px; }
.botones-sello { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; }

.firma { text-align: center; font-size: 0.78rem; color: var(--tenue); margin: 20px 0 0; letter-spacing: 0.02em; }
.firma a { font-family: 'Unbounded', 'Manrope', sans-serif; font-weight: 700; text-decoration: none; }
.firma a { color: var(--ryze); }
.cartel .firma { color: inherit; opacity: 0.7; margin-top: 8px; }
.cartel .firma a { color: inherit; }

/* Solo logo (cuando el logo ya trae el nombre del negocio) */
.solo-logo { flex-direction: column; justify-content: center; text-align: center; gap: 6px !important; }
.tarjeta-logo.ancho { width: auto; height: 64px; max-width: 80%; border-radius: 0; background: none; }
.tarjeta-logo.grande.ancho { height: 140px; max-width: 90%; }
.tarjeta .solo-logo small { opacity: 0.75; }
.ayuda { font-size: 0.85rem; margin: -6px 0 0; }
/* Con nombre visible, un logo rectangular conserva su forma en vez de encogerse dentro de un cuadrito. */
img.tarjeta-logo:not(.ancho) { width: auto; min-width: 44px; max-width: 110px; }

/* Subir logo (arriba en Diseño, con muestra en los colores del negocio) */
.subir-logo { display: flex; gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--borde); border-radius: 12px; }
.subir-logo .pila { gap: 6px; align-items: flex-start; }
.subir-logo-muestra {
  width: 120px; height: 88px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--fondo); color: var(--texto); padding: 10px;
}
.subir-logo-muestra .tarjeta-logo.ancho { height: 100%; max-width: 100%; }
.subir-logo .boton { cursor: pointer; }

/* Botones abajo del cartel: imprimir y descargar solo el QR */
.cartel-acciones { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 16px; max-width: 560px; margin: 16px auto 0; text-align: center; }
.cartel-acciones .ayuda { flex-basis: 100%; margin: 0; }
@media print { .cartel-acciones, .volver, .barra-app, .barra { display: none !important; } }
.volver { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tinta); text-decoration: none; margin: 0 auto 12px; width: min(100%, 560px); }
.volver .icono { width: 18px; height: 18px; }

/* Ventanita "¿Seguro?" (public/confirmar.js) */
dialog.confirmar {
  border: 0; border-radius: 18px; padding: 22px; width: min(92vw, 380px);
  background: var(--papel); color: var(--tinta); box-shadow: 0 24px 60px rgb(0 0 0 / 25%);
}
dialog.confirmar::backdrop { background: rgb(20 16 12 / 45%); }
.confirmar-texto { margin: 0; font-weight: 700; line-height: 1.45; white-space: pre-line; }
.confirmar-botones { justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.subir-logo-muestra { position: relative; }
.quitar-logo {
  position: absolute; top: -9px; right: -9px; width: 28px; height: 28px; border-radius: 50%; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--papel); color: var(--tinta); border: 1px solid var(--borde);
  box-shadow: 0 2px 6px rgb(0 0 0 / 18%);
}
.quitar-logo .icono { width: 16px; height: 16px; }
.subir-logo label.boton { flex-direction: row; }

/* ---------- Planes, pagos y campañas ---------- */
.sin-margen { margin: 0; }
.separado { margin-top: 40px; }
.stats.cuatro { grid-template-columns: repeat(4, 1fr); }
.boton.chico { padding: 6px 12px; font-size: 0.85rem; white-space: nowrap; }
.boton.peligro { background: var(--error); }
textarea, select { font: inherit; }
textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--superficie);
  color: inherit;
  resize: vertical;
  font-weight: 400;
}
.aviso a { font-weight: 700; }
.acciones-fila { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.lista-simple { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.plan.destacado { border: 2px solid var(--acento); }
.plan.actual { background: var(--acento-suave); }
.plan h3 { font-size: 1.1rem; }
.plan p { margin: 0; }
.plan-sello {
  position: absolute;
  top: -12px;
  left: 20px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}
.plan-precio strong { font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 1.6rem; }
.plan-precio span { color: var(--tenue); font-size: 0.85rem; }
.plan-incluye { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 8px; flex: 1; align-content: start; font-size: 0.92rem; }
.plan-incluye li { display: flex; gap: 8px; align-items: flex-start; }
.plan-incluye .icono { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--ok); }

.etiqueta-pago {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--neutro-suave);
  color: var(--tenue);
  font-size: 0.8rem;
  font-weight: 600;
}
.tabla .etiqueta-pago { border-radius: 8px; }
.etiqueta-pago.ok { background: var(--ok-suave); color: var(--ok); }
.etiqueta-pago.alerta { background: var(--alerta-suave); color: var(--alerta); }
.etiqueta-pago.peligro { background: var(--error-suave); color: var(--error); }

.medidor { display: grid; gap: 2px; --texto: var(--acento); }
.medidor-texto { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; }
.medidor.casi .barra-progreso span { background: #d97706; }
.medidor.lleno .barra-progreso span { background: var(--error); }

.aviso-negocio {
  padding: 14px 16px;
  border-left: 4px solid var(--acento);
  background: var(--acento-suave);
  border-radius: 10px;
}
.aviso-negocio small { font-weight: 700; color: var(--acento-oscuro); }
.aviso-negocio p { margin: 4px 0 0; }

@media (max-width: 760px) {
  .planes, .stats.cuatro { grid-template-columns: 1fr; }
  .barra nav { flex-wrap: wrap; }
}

/* Pago automático con tarjeta (Stripe) */
.pago-auto { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px dashed var(--borde); border-radius: 12px; }
.pago-auto > .icono { width: 28px; height: 28px; color: var(--acento); flex: none; margin-top: 2px; }
.pago-auto.activo { border-style: solid; background: var(--acento-suave); }
.pago-auto p { margin: 0; }
.pago-auto .pila { gap: 8px; }
.plan form { margin: 0; }

/* ---------- Términos y condiciones ---------- */
.legal { max-width: 820px; margin-inline: auto; }
.legal h1 { font-size: clamp(1.3rem, 3.5vw, 1.7rem); }
.legal h2 { margin-top: 1.4em; font-size: 1.02rem; }
.legal ul { padding-left: 20px; display: grid; gap: 6px; margin: 0 0 1em; }
.legal p, .legal li { line-height: 1.6; }
.angosta-legal { max-width: 820px; margin-inline: auto; }
.desplazable { max-height: 55vh; overflow-y: auto; }
.pie-legal { text-align: center; padding: 32px 16px 8px; font-size: 0.85rem; color: var(--tenue); }
.pie-legal a, .nota a { color: inherit; }

/* Continuar con Google */
.boton-google {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 11px 16px; border: 1px solid var(--borde); border-radius: 10px; background: #fff;
  color: #1f1f1f; font-weight: 600; text-decoration: none;
}
.boton-google svg { width: 20px; height: 20px; flex: none; }
.separador { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: 0.85rem; margin: 0; }
.separador::before, .separador::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

/* Registro de negocios */
.registro-negocio { max-width: 560px; width: 100%; margin-inline: auto; }
.registro-negocio h1 { margin-bottom: 4px; }
.registro-negocio h2 { margin: 8px 0 0; }
.opciones-planes { display: flex; flex-direction: column; gap: 10px; }
.opcion-plan { gap: 4px; }
.opcion-plan-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.opcion-plan-cabeza b { font-size: 1.1rem; }
.opcion-plan-cabeza b small { font-weight: 500; color: var(--tenue); font-size: 0.8rem; }
.opcion-plan-limites { color: var(--tinta) !important; font-weight: 600 !important; }
button.boton-google { font: inherit; cursor: pointer; }

/* Registro en pasos */
.pasos-registro { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.pasos-registro li { flex: 1; display: flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--tenue);
  padding-top: 8px; border-top: 3px solid var(--borde); }
.pasos-registro li span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--borde); color: var(--tinta); font-size: 0.75rem; flex: none; }
.pasos-registro li span .icono { width: 14px; height: 14px; }
.pasos-registro li.actual { color: var(--tinta); border-color: var(--acento); }
.pasos-registro li.actual span { background: var(--acento); color: #fff; }
.pasos-registro li.hecho { border-color: var(--acento); color: var(--tinta); }
.pasos-registro li.hecho span { background: var(--acento-suave); color: var(--acento); }
.carril { overflow: hidden; transition: height 0.35s ease; }
.con-js .carril-pistas { align-items: flex-start; }
.con-js .carril-pistas { display: flex; width: 200%; transition: transform 0.35s ease; }
.con-js .paso-panel { width: 50%; flex: none; padding: 2px; }
.con-js [data-paso="negocio"] .carril-pistas { transform: translateX(-50%); }
.con-js [data-paso="plan"] [data-panel="negocio"], .con-js [data-paso="negocio"] [data-panel="plan"] { visibility: hidden; }
.carril-pistas { display: flex; flex-direction: column; gap: 24px; }
.con-js .carril-pistas { flex-direction: row; gap: 0; }
.fila-botones { display: flex; gap: 10px; }
.fila-botones .boton:last-child { flex: 1; }
.sin-borde { border: 0; padding: 0; margin: 0; }
.sin-borde legend { margin-bottom: 8px; }
.chip { display: inline-block; font-size: 0.7rem; font-weight: 700; background: var(--acento); color: #fff; border-radius: 99px; padding: 2px 8px; vertical-align: middle; margin-left: 4px; }
@media (prefers-reduced-motion: reduce) { .con-js .carril-pistas { transition: none; } }

/* Tarjeta: datos del cliente abajo (etiqueta + valor, como en Apple Wallet) */
.tarjeta-datos { display: flex; justify-content: space-between; gap: 12px; margin: 0; }
.tarjeta-datos div { display: flex; flex-direction: column; min-width: 0; }
.tarjeta-datos div:last-child:not(:first-child) { text-align: right; }
.tarjeta-datos dt { font-size: 0.68rem; font-weight: 700; opacity: 0.7; }
.tarjeta-datos dd { margin: 0; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tarjeta .tarjeta-cabeza.solo-logo { align-items: center; }
.tarjeta .tarjeta-cabeza.solo-logo .tarjeta-logo.ancho { height: 56px; max-width: 86%; }
.tarjeta-estado { font-size: 0.9rem; }

/* ---------- Menú: arriba en computadora, abajo en el celular (estilo app) ---------- */
.nav-escritorio a { display: inline-flex; align-items: center; gap: 6px; }
.nav-escritorio a .icono { width: 18px; height: 18px; }
.nav-escritorio a[aria-current] { background: var(--acento-suave); color: var(--acento-oscuro); }
.barra-app { display: none; }

.subpestanas {
  display: flex; gap: 4px; margin: 0 0 20px; padding: 4px; overflow-x: auto;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; scrollbar-width: none;
}
.subpestanas a {
  flex: 1 0 auto; text-align: center; padding: 9px 14px; border-radius: 9px;
  text-decoration: none; font-weight: 700; font-size: 0.9rem; color: var(--tenue); white-space: nowrap;
}
.subpestanas a[aria-current] { background: var(--acento); color: #fff; }
.angosta > .subpestanas, .subpestanas + .angosta { max-width: 440px; }

.resumen-plan { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.resumen-plan > span { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; flex: 1; }
.resumen-plan > .icono { color: var(--tenue); }
.cambiar-password summary { font-weight: 700; font-size: 1.1rem; cursor: pointer; }
.cambiar-password[open] summary { margin-bottom: 16px; }
.instalar-caja .boton, .boton.salir { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.instalar-ios { margin: 0; padding-left: 20px; }
.boton.salir { color: var(--error); }

@media (max-width: 760px) {
  .nav-escritorio:not(.siempre) { display: none !important; }
  .barra { flex-wrap: nowrap; padding-top: max(12px, env(safe-area-inset-top)); }
  .barra-negocio { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body:has(.barra-app) { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .barra-app {
    display: grid; grid-template-columns: repeat(var(--columnas, 5), 1fr); grid-auto-flow: column; align-items: end;
    position: fixed; inset: auto 0 0 0; z-index: 20;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--superficie); border-top: 1px solid var(--borde);
    box-shadow: 0 -4px 20px rgb(15 23 42 / 6%);
  }
  .barra-app a {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0;
    text-decoration: none; color: var(--tenue); font-size: 0.7rem; font-weight: 700;
    -webkit-tap-highlight-color: transparent;
  }
  .barra-app .icono { width: 24px; height: 24px; }
  .barra-app a[aria-current] { color: var(--acento); }
  .barra-app .pestana-escanear { color: var(--tinta); }
  .barra-app .pestana-escanear .icono {
    width: 26px; height: 26px; padding: 14px; margin-top: -28px; border-radius: 50%; box-sizing: content-box;
    background: linear-gradient(135deg, #ff5a1f, #ffa53a); color: #fff;
    box-shadow: 0 6px 16px rgb(255 90 31 / 35%); border: 4px solid var(--superficie);
  }
  .barra-app .pestana-escanear[aria-current] { color: var(--acento); }
}

/* ¿Olvidaste tu contraseña? */
.fila-enlaces { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.olvide { font-size: 0.85rem; font-weight: 700; color: var(--acento-oscuro); text-decoration: none; }
.olvide-cuenta { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borde); }
.olvide-cuenta .enlace { font-size: 0.875rem; font-weight: 700; color: var(--acento-oscuro); text-align: left; padding: 0; }

/* ---------- Logo en la tarjeta: siempre a la izquierda y grande (como en Apple Wallet) ---------- */
.tarjeta .tarjeta-cabeza { justify-content: flex-start; min-height: 56px; }
.tarjeta .tarjeta-cabeza.solo-logo { flex-direction: row; text-align: left; align-items: center; }
.tarjeta img.tarjeta-logo { background: none; border-radius: 0; height: calc(56px * var(--logo, 1)); width: auto; min-width: 0; max-width: 45%; object-fit: contain; object-position: left center; }
.tarjeta .tarjeta-cabeza.solo-logo img.tarjeta-logo.ancho { height: calc(60px * var(--logo, 1)); max-width: 92%; }
.tarjeta .tarjeta-cabeza strong { font-size: 1.15rem; line-height: 1.15; }
.tarjeta .tarjeta-logo.inicial { width: 48px; height: 48px; border-radius: 12px; }

/* Vista previa del logo antes de guardarlo (sobre el color de la tarjeta) */
.logo-nuevo { padding: 14px; border: 2px solid var(--acento); border-radius: 12px; background: var(--acento-suave); }
.logo-nuevo-muestra { background: var(--fondo); border-radius: 14px; padding: 16px 18px; display: flex; align-items: center; min-height: 92px; }
.logo-nuevo-muestra canvas { height: 60px; width: auto; max-width: 78%; object-fit: contain; }
.subir-logo-muestra .tarjeta-logo { background: none; }
/* Sin logo: la inicial del negocio en un cuadro (si no, queda del mismo color que el fondo y no se ve). */
.subir-logo-muestra .tarjeta-logo.inicial { background: var(--texto); color: var(--fondo); width: 56px; height: 56px; border-radius: 14px; font-size: 1.6rem; }
/* Logos redondos o cuadrados: más altos, con el nombre al lado. */
.tarjeta img.tarjeta-logo.redondo { height: calc(76px * var(--logo, 1)); max-width: 50%; }
.tarjeta .tarjeta-cabeza.solo-logo img.tarjeta-logo.ancho.redondo { height: calc(84px * var(--logo, 1)); }
.subir-logo-muestra .tarjeta-logo.redondo { height: 100%; width: auto; }

/* Tamaño del logo (control deslizable en "Tu tarjeta") */
.tamano-logo output { font-weight: 800; color: var(--acento-oscuro); margin-left: 6px; }
.tamano-logo input[type=range] { padding: 0; border: 0; accent-color: var(--acento); height: 28px; }
.tamano-logo-guia { display: flex; justify-content: space-between; color: var(--tenue); font-weight: 500; margin-top: -6px; }

/* Aviso de "sin internet" (arriba, sobre todo lo demás) */
.aviso-red {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 100;
  background: #0f172a; color: #fff; font-weight: 700; font-size: 0.9rem; padding: 10px 18px; border-radius: 999px;
  box-shadow: 0 8px 24px rgb(15 23 42 / 25%); white-space: nowrap; display: flex; align-items: center; gap: 8px;
}
.aviso-red::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #f87171; }
.aviso-red.volvio::before { background: #4ade80; }

/* Selector de idioma (ES | EN) */
.selector-idioma { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); flex: none; }
.selector-idioma a { padding: 5px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; text-decoration: none; color: var(--tenue); letter-spacing: 0.04em; }
.selector-idioma a[aria-current] { background: var(--tinta); color: var(--superficie); }
/* En Mi cuenta: dos botones iguales, como los de Apariencia. */
.selector-idioma.grande { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; border-radius: 0; background: none; }
.selector-idioma.grande a { display: grid; place-items: center; padding: 12px 6px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); color: var(--tinta); font-size: 0.9rem; letter-spacing: 0; }
.selector-idioma.grande a[aria-current] { border-color: var(--acento); background: var(--acento-suave); color: var(--acento-oscuro); }
.fila-marca { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.fila-marca .marca.grande { margin-bottom: 0; }

/* Registro del cliente: el logo grande y sin cuadrito, igual que en la tarjeta. */
.registro-cabeza img.tarjeta-logo { background: none; border-radius: 0; height: calc(56px * var(--logo, 1)); width: auto; max-width: 50%; object-fit: contain; object-position: left center; }
.registro-cabeza img.tarjeta-logo.redondo { height: calc(72px * var(--logo, 1)); }
.registro-cabeza.solo-logo img.tarjeta-logo.ancho { height: calc(64px * var(--logo, 1)); max-width: 90%; }

/* Teléfono con lada (registro del cliente) */
.telefono-con-lada { display: flex; gap: 8px; }
.telefono-con-lada select { width: auto; flex: none; max-width: 46%; }
.telefono-con-lada input { flex: 1; }
.sin-cortar { white-space: nowrap; }

/* ---------- Chat de soporte ---------- */
.soporte-boton {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 40;
  display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer;
  padding: 12px 18px 12px 14px; border-radius: 999px; font: inherit; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #ff5a1f, #ffa53a); box-shadow: 0 10px 28px rgb(255 90 31 / 35%);
}
.soporte-boton .icono { width: 22px; height: 22px; }
.soporte-punto { position: absolute; top: 4px; right: 6px; width: 12px; height: 12px; border-radius: 50%; background: #16a34a; border: 2px solid #fff; }
body:has(.barra-app) .soporte-boton { bottom: calc(88px + env(safe-area-inset-bottom)); }
body.soporte-abierto .soporte-boton { display: none; }

.soporte-panel {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100dvh - 32px));
  display: flex; flex-direction: column; background: var(--superficie); border-radius: 20px;
  box-shadow: 0 24px 60px rgb(15 23 42 / 25%); overflow: hidden; border: 1px solid var(--borde);
}
.soporte-panel[hidden] { display: none; }
.soporte-cabeza { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; color: #fff; background: linear-gradient(135deg, #ff5a1f, #ffa53a); }
.soporte-cabeza > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.soporte-cabeza small { opacity: 0.9; font-size: 0.78rem; }
.soporte-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / 22%); flex: none; }
.soporte-avatar .icono { width: 20px; height: 20px; }
.soporte-cerrar { background: none; border: 0; color: #fff; cursor: pointer; padding: 6px; border-radius: 8px; line-height: 0; }
.soporte-cerrar .icono { width: 22px; height: 22px; }
.soporte-mensajes { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--papel); }
.soporte-msj { max-width: 85%; display: flex; flex-direction: column; gap: 2px; }
.soporte-msj p { margin: 0; padding: 10px 13px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.93rem; line-height: 1.45; }
.soporte-msj small { font-size: 0.7rem; font-weight: 700; color: var(--tenue); padding: 0 6px; }
.soporte-msj.de-cliente { align-self: flex-end; }
.soporte-msj.de-cliente p { background: var(--tinta); color: var(--superficie); border-bottom-right-radius: 4px; }
.soporte-msj.de-ia p, .soporte-msj.de-ryze p { background: var(--superficie); border: 1px solid var(--borde); border-bottom-left-radius: 4px; }
.soporte-msj.de-ryze p { border-color: #fed7c3; background: var(--acento-suave); }
.soporte-msj.enviando p { opacity: 0.6; }
.soporte-msj.fallo p { background: #fee2e2; color: var(--error); }
.soporte-msj.escribiendo p { color: var(--tenue); font-style: italic; }
.soporte-msj.aviso p { background: #fef3c7; border-color: #fde68a; }
.soporte-correo { padding: 10px 12px; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 6px; }
.soporte-correo[hidden] { display: none; }
.soporte-correo small { color: var(--tenue); font-weight: 600; }
.soporte-correo div { display: flex; gap: 6px; }
.soporte-correo input { padding: 8px 10px; }
.soporte-form { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px; border-top: 1px solid var(--borde); }
.soporte-form textarea { flex: 1; resize: none; font: inherit; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 14px; max-height: 120px; }
.soporte-form textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; border-color: transparent; }
.soporte-enviar { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; color: #fff; background: var(--acento); }
.soporte-enviar .icono { width: 20px; height: 20px; }
.soporte-persona { display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--tenue); padding: 0 12px 12px; }
.soporte-persona[hidden] { display: none; }
.soporte-persona .icono { width: 16px; height: 16px; }
@media (max-width: 520px) {
  .soporte-panel { right: 0; bottom: 0; width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
  .soporte-boton span { display: none; }
  .soporte-boton { padding: 14px; }
}

/* Soporte en el panel de Ryze Tech */
.contador { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--error); color: #fff; font-size: 0.72rem; font-weight: 800; }
.soporte-pendiente { background: #fff7ed; }
.soporte-hilo { display: flex; flex-direction: column; gap: 10px; }
.soporte-hilo .soporte-msj { max-width: 92%; }
[data-abrir-soporte] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
/* Botones largos (ej. "Cambiar tarjeta, ver recibos o cancelar") se parten en dos renglones en vez de estirar la pantalla. */
.pago-auto .boton, .caja form > .boton { white-space: normal; text-align: center; }

/* Planes: aviso de prueba gratis */
.planes-prueba { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; background: var(--acento-suave); color: var(--acento-oscuro); font-weight: 700; }
.planes-prueba .icono { flex: none; }

/* Sucursales */
.lista-sucursales { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.sucursal { border: 1px solid var(--borde); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.sucursal-nombre { display: flex; gap: 8px; }
.sucursal-nombre input { font-weight: 700; }
.sucursal .acciones { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sucursal .acciones form { margin: 0; }
.escaner-sucursal { font-size: 0.85rem; }
.sucursal-empleado { margin: 6px 0 0; }
.sucursal-empleado select { padding: 5px 8px; font-size: 0.82rem; width: auto; max-width: 100%; }
.cartel-sucursal { font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.85; margin: -4px 0 0; }
.boton.chico { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Cartel con celulares (la tarjeta real del negocio dentro de dos celulares) ---------- */
.cartel-cel { max-width: 640px; padding: 36px 32px 28px; gap: 18px; overflow: hidden; position: relative; }
.cartel-marca { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cartel-marca img.tarjeta-logo { background: none; border-radius: 0; height: 60px; width: auto; max-width: 70%; object-fit: contain; }
.cartel-marca img.tarjeta-logo.redondo { height: 76px; }
.cartel-marca strong { font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 1.3rem; }
.cartel .cartel-titulo { font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 2.6rem; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; }

.cartel-celulares { position: relative; width: 100%; height: 500px; margin: 4px 0; }
.celular {
  position: absolute; top: 10px; width: 226px; height: 470px; padding: 9px; border-radius: 42px;
  background: #111; box-shadow: 0 0 0 2px rgb(255 255 255 / 25%), 0 24px 40px -12px rgb(0 0 0 / 55%);
}
.celular-a { left: calc(50% - 214px); transform: rotate(-8deg); z-index: 1; }
.celular-b { left: calc(50% - 10px); top: 22px; transform: rotate(7deg); z-index: 2; }
.celular-pantalla {
  position: relative; height: 100%; border-radius: 32px; overflow: hidden; background: #f2f2f4;
  display: flex; flex-direction: column; gap: 8px; padding: 30px 10px 10px; text-align: left;
}
.celular-b .celular-pantalla { background: #1b1b1f; }
.celular-pantalla > .celular-isla, .celular-pantalla > .celular-hora { position: absolute; z-index: 2; }
.celular-isla { position: absolute; top: 9px; left: 50%; width: 70px; height: 18px; margin-left: -35px; border-radius: 12px; background: #000; }
.celular-hora { position: absolute; top: 10px; left: 18px; font-size: 0.62rem; font-weight: 700; color: #111; }
.celular-b .celular-hora { color: #fff; }
.celular-app { margin: 0; font-weight: 800; font-size: 1rem; color: #111; }
.celular { --s: 0.53; }
/* La tarjeta se dibuja a su tamaño normal (340 px) y se encoge para caber en la pantalla del celular. */
.celular .tarjeta { width: 340px; max-width: none; flex: none; box-shadow: none; transform: scale(var(--s)); transform-origin: top left; }
.celular-aviso {
  background: rgb(255 255 255 / 92%); color: #111; border-radius: 14px; padding: 8px 10px;
  font-size: 0.66rem; line-height: 1.3; display: flex; flex-direction: column;
}
.celular-aviso strong { font-size: 0.7rem; }
/* Premio ganado: confeti cayendo encima de toda la pantalla. */
.celular-pantalla > * { position: relative; z-index: 1; }
.celular-pantalla > .celular-confeti { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.celular-confeti i { position: absolute; border-radius: 1.5px; opacity: 0.95; }
.celular-aviso { padding-left: 38px; position: relative; }
.celular-regalo { position: absolute; left: 9px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 7px; display: grid; place-items: center; background: var(--fondo); color: var(--texto); }
.celular-regalo svg { width: 14px; height: 14px; }
/* Abajo de la pantalla: el código de la tarjeta (celular 1) y un botón (celular 2), como en la cartera real. */
.celular-pantalla > .celular-codigo, .celular-pantalla > .celular-boton { position: absolute; }
.celular-codigo { position: absolute; left: 50%; bottom: 22px; width: 104px; margin-left: -52px; background: #fff; padding: 7px; border-radius: 10px; box-shadow: 0 2px 8px rgb(0 0 0 / 12%); }
.celular-codigo svg { display: block; width: 100%; height: auto; }
.celular-boton { position: absolute; left: 14px; right: 14px; bottom: 22px; margin: 0; padding: 10px; border-radius: 999px; background: var(--fondo); color: var(--texto); text-align: center; font-weight: 800; font-size: 0.72rem; box-shadow: 0 0 0 1.5px rgb(255 255 255 / 30%); }

.cartel-abajo { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; width: 100%; text-align: left; }
.cartel-accion { font-family: 'Unbounded', 'Manrope', sans-serif; font-size: 1.45rem; font-weight: 700; line-height: 1.15; margin: 0 0 8px; text-transform: uppercase; }
.cartel-sin-app { margin: 0 0 10px; opacity: 0.85; font-size: 0.95rem; }
.cartel-premios { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.92rem; }
.cartel-premios li { display: flex; gap: 8px; }
.cartel-premios b { white-space: nowrap; }
.cartel-premios b::after { content: ':'; }
.cartel-cel .cartel-qr { width: 190px; padding: 12px; }
.cartel-url { opacity: 0.7; }

@media (max-width: 560px) {
  .cartel-cel { padding: 28px 18px 22px; }
  .cartel .cartel-titulo { font-size: 1.45rem; }
  .cartel-accion { font-size: 1.15rem; }
  .celular-isla { width: 52px; height: 14px; margin-left: -26px; top: 8px; }
  .celular-hora { top: 8px; left: 13px; font-size: 0.5rem; }
  .cartel-celulares { height: 370px; }
  .celular { width: 160px; height: 340px; padding: 7px; border-radius: 30px; }
  .celular-pantalla { border-radius: 24px; padding: 24px 7px 7px; }
  .celular-a { left: calc(50% - 158px); }
  .celular-b { left: calc(50% - 8px); top: 18px; }
  .celular { --s: 0.38; }
  .celular-codigo { width: 72px; margin-left: -36px; bottom: 14px; padding: 5px; }
  .celular-boton { font-size: 0.55rem; padding: 7px; bottom: 14px; left: 10px; right: 10px; }
  .celular-aviso { font-size: 0.55rem; padding: 6px 8px; }
  .cartel-abajo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .cartel-premios li { justify-content: center; }
}
@media print {
  @page { size: letter; margin: 0.25in; }
  html, body { margin: 0; padding: 0; }
  .pagina-cartel .barra, .pagina-cartel header.barra, .pagina-cartel footer { display: none !important; }
  .pagina-cartel .contenedor { padding: 0; }
  .cartel-cel { max-width: none; width: 100%; height: 10.45in; justify-content: space-between; border-radius: 0; break-inside: avoid; padding: 26px 40px 18px; gap: 12px; }
  .cartel .cartel-titulo { font-size: 2.4rem; }
  .cartel-marca img.tarjeta-logo { height: 54px; }
  .cartel-celulares { height: 500px; }
  .celular { width: 232px; height: 470px; }
  .celular-a { left: calc(50% - 222px); }
  .celular { --s: 0.55; }
  .cartel-cel .cartel-qr { width: 180px; }
  .cartel-accion { font-size: 1.3rem; }
}

/* Sin botón flotante de Ayuda en las pantallas de trabajo (el chat se sigue abriendo desde otros botones). */
.soporte-boton.sin-burbuja { display: none !important; }

/* ---------- Ficha del cliente, historial y ajustes (2026-09-29) ---------- */
/* Aviso arriba cuando el superadmin ve el panel de un negocio. */
.aviso-admin {
  position: sticky; top: 0; z-index: 60; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--ryze); color: #fff; font-size: .92rem;
}
.aviso-admin span { flex: 1 1 220px; }
.aviso-admin .icono { width: 20px; height: 20px; flex: none; }
.aviso-admin .boton { background: #fff; color: var(--ryze); }

.rejilla-2 { display: grid; gap: 12px 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.rejilla-2 textarea { min-height: 78px; }

.contacto-negocio { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contacto-negocio li { display: flex; gap: 10px; align-items: flex-start; }
.contacto-negocio .icono { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--tenue); }
.contacto-negocio span { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.contacto-negocio small { color: var(--tenue); font-size: .8rem; }

/* Acciones que borran para siempre: cerradas hasta que las abras. */
.zona-peligro { border-color: color-mix(in srgb, var(--error) 35%, var(--borde)); }
.zona-peligro summary { cursor: pointer; font-weight: 700; color: var(--error); }
.zona-peligro[open] summary { margin-bottom: 12px; }

/* Movimientos deshechos: tachados pero a la vista. */
.tabla tr.anulado .mov-texto { text-decoration: line-through; opacity: .6; }
.tabla .acciones-fila form { display: inline; }
.tabla .enlace .icono { width: 16px; height: 16px; vertical-align: -3px; }

.filtros { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; margin-bottom: 16px; }
.filtros-botones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; grid-column: 1 / -1; }
.filtros-admin { flex-wrap: wrap; }
.filtros-admin input { flex: 1 1 200px; }
.filtros-admin select { flex: 0 1 220px; }
.paginas { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 16px 0 4px; }
.stats strong.chico { font-size: 1.35rem; }
.hecho-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hecho-fila .enlace { font-weight: 700; }
.acciones form { display: inline-flex; }
@media (max-width: 420px) {
  .subpestanas a { padding: 9px 10px; font-size: .86rem; }
}
@media (max-width: 760px) {
  .aviso-admin { position: static; padding: 8px 12px; font-size: .85rem; }
}
form.caja.filtros { display: grid; }
@media (max-width: 560px) {
  form.caja.filtros { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px; gap: 10px; }
}
#notificaciones label.check { align-items: flex-start; }
#notificaciones label.check input { width: 18px; height: 18px; flex: none; margin-top: 2px; }
/* Historial en el celular: cada movimiento como renglón de lista (sin columnas apretadas). */
@media (max-width: 560px) {
  .tabla.movs thead { display: none; }
  .tabla.movs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--borde); }
  .tabla.movs td { display: block; padding: 0; border: 0; }
  .tabla.movs td.acciones-fila { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
  .tabla.movs td.tenue { font-size: .82rem; }
  .tabla.movs .mov-quien span { display: inline; }
  .tabla.movs .mov-quien span + span::before { content: '· '; }
  .stats.compactas { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stats.compactas div { padding: 12px; }
  .stats.compactas strong { font-size: 1.4rem; }
  .stats.compactas small { font-size: .72rem; }
  .stats.compactas span { font-size: .72rem; }
}
@media (max-width: 760px) and (min-width: 561px) { .stats.compactas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.mov-quien span { display: block; }

/* Los botones se levantan un poquito al pasar el mouse (solo en computadora; nada si la persona pidió menos movimiento). */
.boton, .p-plan { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .boton:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgb(255 90 31 / 28%); }
  .boton.secundario:not(:disabled):hover, .boton.enlace:hover { box-shadow: 0 8px 18px rgb(15 23 42 / 12%); }
  .boton:not(:disabled):active { transform: translateY(0); box-shadow: none; }
}

/* Campo trampa contra bots: fuera de la vista de las personas (no usar display:none, algunos bots lo detectan). */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Página 404 */
.no-encontrada { text-align: center; align-items: center; }
.no-encontrada .acciones { justify-content: center; }
.no-encontrada-num { margin: 8px 0 0; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: clamp(4rem, 18vw, 6.5rem); line-height: 1;
  background: linear-gradient(135deg, #ff5a1f, #ffa53a); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Verificación en dos pasos */
.codigo-2p { font-size: 1.4rem; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.pasos-2p { margin: 0; padding-left: 20px; display: grid; gap: 14px; }
.qr-2p { width: 200px; max-width: 70%; margin: 12px 0; padding: 10px; background: #fff; border-radius: 12px; border: 1px solid var(--borde); }
.qr-2p svg { display: block; width: 100%; height: auto; }
.clave-2p { display: inline-block; margin-top: 8px; font-size: 1rem; letter-spacing: .08em; word-break: break-all; }
.codigos-respaldo { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.codigos-respaldo code { font-size: 1.1rem; letter-spacing: .06em; }
.separado-chico { margin-top: 10px; }
#dos-pasos h2 .icono { width: 20px; height: 20px; vertical-align: -3px; color: var(--acento); }


/* Efectos al pasar el mouse: solo con mouse de verdad. En el celular un :hover se queda pegado después de tocar. */
@media (hover: hover) and (pointer: fine) {
  .barra nav a:hover { background: var(--papel); }
  .boton:hover { background: var(--acento-oscuro); }
  .boton.secundario:hover { background: var(--papel); }
  .quitar:hover { color: var(--error); border-color: var(--error); }
  .firma a:hover { color: var(--acento); }
  .volver:hover { color: var(--acento-oscuro); }
  .quitar-logo:hover, .quitar-logo:focus-visible { background: var(--error); color: #fff; border-color: var(--error); }
  .boton.peligro:hover { background: #991b1b; }
  .boton-google:hover { background: #f8f9fa; border-color: #c7ccd4; }
}

/* ---------- Que se sienta app en el celular (skill mobile-native) ---------- */
html {
  -webkit-tap-highlight-color: transparent; /* sin el brillo gris al tocar: cada botón tiene su propio :active */
  -webkit-text-size-adjust: 100%;          /* sin letras infladas al girar el celular */
}
/* El iPhone hace zoom si el campo tiene letra de menos de 16 px, y no regresa. */
@media (pointer: coarse) {
  input, textarea, select { font-size: max(16px, 1em); }
}
/* Sin la espera de doble toque y sin seleccionar el texto de los botones al dejarlos presionados. */
button, a, [role="button"], .boton, summary, label.opcion, .barra-app a, .subpestanas a {
  touch-action: manipulation;
}
button, [role="button"], .boton, .barra-app a, .subpestanas a, summary {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Respuesta al presionar (no al soltar), como en una app. */
.boton:not(:disabled):active, .barra-app a:active, .subpestanas a:active { transform: scale(0.97); transition-duration: 80ms; }
.barra-app a { transition: transform 120ms ease-out; }
/* Las listas con su propio scroll no arrastran la página cuando llegan al final. */
.soporte-mensajes { overscroll-behavior: contain; }

/* ---------- Pulido (skills impeccable y web-design-guidelines) ---------- */
/* Lo que dibuja el navegador también lleva la marca: selección de texto, cursor al escribir, casillas y barra de desplazamiento. */
::selection { background: #ffd6c2; color: #1d1a2e; }
html { scrollbar-color: #ffb08a transparent; accent-color: var(--acento); }
input, textarea { caret-color: var(--acento); }
html[data-tema="oscuro"] ::selection { background: #7a2e10; color: #fff; }
/* Títulos sin una palabra sola en la última línea; párrafos sin viudas. */
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Al ir a una sección desde el menú, que no quede tapada por la barra de arriba. */
[id] { scroll-margin-top: 84px; }
/* El 404 en naranja sólido (el degradado en texto se ve barato). */
.no-encontrada-num { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--acento); }
/* Números que se comparan (precios, contadores), del mismo ancho. */
.stats strong, .medidor strong, .tabla td { font-variant-numeric: tabular-nums; }

/* ---------- Regalo de cumpleaños ---------- */
.campo-cumple { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 6px; }
.campo-cumple legend { padding: 0; margin-bottom: 6px; font-size: 0.9rem; font-weight: 600; }
.fila-cumple { display: grid; grid-template-columns: 5.5rem 1fr; gap: 8px; }
.lista-cumples { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.lista-cumples li { display: flex; justify-content: space-between; gap: 12px; }

/* "Recomendado: 3 meses" en chiquito junto a la pregunta. */
.recomendado { font-size: 0.78rem; font-weight: 600; color: var(--acento); white-space: nowrap; }

/* ---------- Recorrido de bienvenida: todo oscuro menos la parte que se explica ---------- */
.recorrido-capa { position: fixed; inset: 0; z-index: 1000; background: rgb(8 10 16 / 74%); }
.recorrido-foco { position: fixed; z-index: 1001; border-radius: 16px;
  box-shadow: 0 0 0 3px var(--acento), 0 0 24px 4px rgb(255 90 31 / 45%); }
.recorrido-burbuja { position: fixed; z-index: 1002; background: var(--superficie); color: var(--tinta); border-radius: 16px;
  padding: 18px 18px 14px; box-shadow: 0 18px 50px rgb(0 0 0 / 30%); display: grid; gap: 6px; }
.recorrido-cuenta { color: var(--acento); font-weight: 700; font-size: 0.78rem; }
.recorrido-titulo { font-size: 1.1rem; }
.recorrido-texto { margin: 0; color: var(--tenue); line-height: 1.5; }
.recorrido-botones { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }
.recorrido-derecha { display: flex; gap: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .recorrido-foco, .recorrido-burbuja { transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }
}

/* ---------- Ojito para ver la contraseña ---------- */
.campo-ojo { position: relative; display: block; }
.campo-ojo input { width: 100%; padding-right: 48px; }
.boton-ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px;
  display: grid; place-items: center; border: 0; background: transparent; color: var(--tenue); border-radius: 10px; cursor: pointer; padding: 0; }
.boton-ojo .icono { width: 20px; height: 20px; }
.boton-ojo:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) { .boton-ojo:hover { color: var(--tinta); background: var(--neutro-suave); } }
.fila-enlaces.solo-olvide { justify-content: flex-end; }

/* ---------- Menú del administrador ---------- */
.barra-admin { display: inline-flex; align-items: center; gap: 6px; }
.barra-admin .icono { width: 16px; height: 16px; color: var(--acento); }
.nav-escritorio .contador, .barra-app .contador { min-width: 18px; height: 18px; font-size: 0.68rem; padding: 0 5px; }
.barra-app a { position: relative; }
.barra-app .contador { position: absolute; top: 0; left: calc(50% + 6px); }
.nav-escritorio .boton-salir { display: inline-flex; align-items: center; gap: 6px; color: var(--tenue); }
.nav-escritorio .boton-salir .icono { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .nav-escritorio .boton-salir:hover { color: var(--error); } }