/* =============================================================
   TapUp · retoques de la app de celular (9 oct 2026)

   Lo que Alessandro vio al probar la app en su iPhone (TestFlight).
   Va al final de todo para ganar sin tocar las demás hojas. Sólo
   acomoda: nada de lo que hace el panel.
   ============================================================= */

/* La hoja «Más»: el pie reparte parejo sus tres enlaces y «Cerrar» ya
   no queda pegado al borde de abajo (la barra de inicio del iPhone). */
@media (max-width: 999.98px) {
  .crm-hoja__panel {
    max-height: 94dvh;
    overflow-y: auto;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
  .crm-hoja__pie {
    justify-content: space-around;
    gap: 8px;
    padding: 14px 6px 4px;
    font-size: .92rem;
    text-align: center;
  }
  .crm-hoja__pie a { flex: 1 1 0; padding: 6px 0; font-weight: 600; }
  .crm-hoja__cerrar { margin-top: 10px; min-height: 52px; }

  /* La barra de abajo: el nombre entero («Productos», «Fidelidad»), más
     chico antes que cortado con puntos suspensivos. */
  .crm-tab { min-width: 0; padding-inline: 0; font-size: .72rem; letter-spacing: -.02em; }
  .crm-tab span:not(.crm-nav__globo) { overflow: visible; text-overflow: clip; }
}
@media (max-width: 360px) {
  .crm-tab { font-size: .64rem; }
}

/* Entrar: el logo y «Ayuda» bajan de la hora y la batería. */
.pan-header { padding-top: env(safe-area-inset-top); }

/* «Crear cuenta» y «Olvidé mi contraseña»: uno debajo del otro, con aire. */
#nota-entrar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  font-size: 0;
}
#nota-entrar .pan-link { font-size: .95rem; padding: 10px 20px; }

/* Clientes de la fidelidad: los botones pasan al renglón de abajo en vez
   de salirse por la izquierda y quedar cortados. */
.fid-cliente__acciones { flex-wrap: wrap; }

/* Tu plan: los títulos de cada grupo. */
.pan-plan__grupo {
  list-style: none;
  margin: 20px 0 6px;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6B6B80;
}
.pan-plan__grupo:first-child { margin-top: 4px; }

/* Fidelidad (9 oct 2026): «Regalos» es su propia casilla, y la lista de
   clientes enseña saldo, nivel e invitación. */
#vista-fidelidad[data-seccion="regalos"] [data-fid-seccion]:not([data-fid-seccion="regalos"]) { display: none; }
.fid-resumen { margin: 0 0 10px; font-size: .92rem; font-weight: 600; color: #14113A; }
.fid-filtro { margin: 8px 0 12px; }
.fid-marca--saldo { background: #DCFCE7; color: #166534; }
.fid-marca--oro { background: #FEF3C7; color: #92400E; }
.fid-marca--plata { background: #E5E7EB; color: #374151; }
.fid-marca--bronce { background: #FDE7D3; color: #9A3412; }

/* Las cuatro pestañas de Fidelidad caben junto al botón de escanear:
   se reparten el ancho y el texto baja un poco, sin salirse. */
.fid-secciones { display: flex; min-width: 0; overflow: hidden; }
.fid-secciones .ios-segmento__op {
  flex: 1 1 0;
  min-width: 0;
  padding-inline: 4px;
  font-size: .8rem;
  letter-spacing: -.015em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* =============================================================
   REGISTRAR PRODUCTOS · hoja estilo iOS (9 oct 2026)

   En celular es una hoja a pantalla completa: barra con «Cancelar»,
   título grande, lista con íconos (como Ajustes de iOS), botón fijo
   abajo y una palomita animada al terminar. En compu, una tarjeta.
   Los colores salen de --app-fondo y --app-tarjeta: claro y oscuro solos.
   ============================================================= */
.reg-hoja [hidden] { display: none !important; }
.reg-hoja.pan-agregar { padding: 0; border: 0; background: var(--app-fondo, #F2F3F7); overflow: hidden; }

.reg-barra {
  position: sticky; top: 0; z-index: 2;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 52px;
  padding: max(6px, env(safe-area-inset-top)) 6px 6px;
  background: color-mix(in srgb, var(--app-fondo, #F2F3F7) 86%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: .5px solid var(--ios-separador, rgba(60, 60, 67, .12));
}
.reg-barra__lado { justify-self: start; padding: 10px 12px; border: 0; background: none; font: inherit; font-size: 1.06rem; color: var(--blue, #2563EB); cursor: pointer; }
.reg-barra__titulo { margin: 0; font-size: 1.06rem; font-weight: 700; letter-spacing: -.01em; }

.reg-cuerpo { width: 100%; max-width: 520px; margin: 0 auto; padding: 18px 16px calc(24px + env(safe-area-inset-bottom)); box-sizing: border-box; }

@media (max-width: 999.98px) {
  .reg-hoja:not([hidden]) {
    position: fixed; inset: 0; z-index: 500;
    display: flex; flex-direction: column;
    margin: 0; border-radius: 0;
    animation: reg-entra .42s var(--ios-resorte, cubic-bezier(.2, .9, .25, 1.1));
  }
  .reg-hoja:not([hidden]) .reg-cuerpo { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  body.con-registro { overflow: hidden; }
  body.con-registro #demo-franja { display: none; }
}
@keyframes reg-entra { from { transform: translateY(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes reg-pop { from { transform: scale(.95); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes reg-dibuja { to { stroke-dashoffset: 0; } }

/* El avance: dos rayitas, la del paso en curso en azul. */
.reg-pasos { display: flex; gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; }
.reg-pasos .pan-pasos__paso { flex: 1; height: 4px; padding: 0; border: 0; border-radius: 99px; background: var(--ios-separador, rgba(60, 60, 67, .18)); font-size: 0; color: transparent; overflow: hidden; transition: background .3s; }
.reg-pasos .pan-pasos__num { display: none; }
.reg-pasos .pan-pasos__paso.is-actual, .reg-pasos .pan-pasos__paso.is-hecho { background: var(--blue, #2563EB); }

.reg-titulo { margin: 0 0 6px; font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; line-height: 1.15; color: inherit; }
.reg-sub { margin: 0 0 20px; font-size: 1rem; line-height: 1.4; color: var(--app-tinta-2, #5B5B72); }
.reg-titulo--centro, .reg-sub--centro { text-align: center; }

/* Cómo agregar: fichas grandes, la principal en azul. */
.reg-acciones { display: grid; gap: 10px; margin-bottom: 12px; }
.reg-nfc { margin: 0; padding: 0; border: 0; background: none; }
.reg-tile {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 68px; padding: 12px 16px;
  border: 0; border-radius: 18px;
  background: var(--app-tarjeta, #fff); color: inherit;
  font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 17, 58, .06);
  transition: transform .25s var(--ios-resorte, ease), opacity .2s;
}
.reg-tile:active { transform: scale(.97); }
.reg-tile[disabled] { opacity: .65; }
.reg-tile__icono { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(37, 99, 235, .12); color: var(--blue, #2563EB); }
.reg-tile__icono svg, .reg-fila__icono svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reg-tile__texto { display: grid; gap: 2px; }
.reg-tile__texto b { font-size: 1.05rem; }
.reg-tile__texto small { font-size: .84rem; color: var(--app-tinta-2, #5B5B72); }
.reg-tile--primario { background: var(--blue, #2563EB); color: #fff; box-shadow: 0 6px 18px rgba(37, 99, 235, .28); }
.reg-tile--primario .reg-tile__icono { background: rgba(255, 255, 255, .2); color: #fff; }
.reg-tile--primario .reg-tile__texto small { color: rgba(255, 255, 255, .85); }
.reg-camara { margin: 0 0 12px; border-radius: 18px; overflow: hidden; }
.reg-nota { margin: 0 0 12px; padding: 12px 14px; border: 0; border-radius: 14px; background: rgba(120, 120, 128, .12); }

/* Escribir el código: siempre a la vista. */
.reg-manual { margin: 6px 0 0; padding: 0; border: 0; background: none; }
.reg-manual > summary { margin: 16px 4px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--app-tinta-3, #8A8AA0); list-style: none; pointer-events: none; cursor: default; }
.reg-manual > summary::-webkit-details-marker { display: none; }
.reg-manual__forma { display: flex; gap: 8px; align-items: center; }
.reg-manual__campo { flex: 1; min-width: 0; height: 48px; border-radius: 14px; }
.reg-manual__btn { flex: none; height: 48px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--blue, #2563EB); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }

/* El aviso de lo que acaba de pasar. */
.reg-aviso { margin: 14px 0 0; padding: 11px 14px; border-radius: 12px; background: rgba(120, 120, 128, .14); font-size: .95rem; font-weight: 600; }
.reg-aviso--ok { background: rgba(52, 199, 89, .18); color: #1E7B3A; }
.reg-aviso--nuevo { animation: reg-pop .45s var(--ios-resorte, ease); }
html[data-apariencia="oscuro"] .reg-aviso--ok { color: #6EE7A0; }
@media (prefers-color-scheme: dark) { html:not([data-apariencia="claro"]) .reg-aviso--ok { color: #6EE7A0; } }

/* Lo agregado: lista como la de Ajustes de iOS. */
.reg-seccion { margin: 24px 4px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--app-tinta-3, #8A8AA0); }
.reg-seccion__n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 6px; border-radius: 99px; background: var(--blue, #2563EB); color: #fff; font-size: .72rem; letter-spacing: 0; }
.reg-lista { list-style: none; margin: 0; padding: 0; border-radius: 16px; overflow: hidden; background: var(--app-tarjeta, #fff); }
.reg-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 14px; animation: reg-pop .45s var(--ios-resorte, ease); }
.reg-fila + .reg-fila { border-top: .5px solid var(--ios-separador, rgba(60, 60, 67, .12)); }
.reg-fila__icono { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(160deg, #5B8CFF, #2563EB); color: #fff; }
.reg-fila__icono svg { width: 22px; height: 22px; }
.reg-fila--metal .reg-fila__icono { background: linear-gradient(160deg, #4A4A52, #0E0E11); }
.reg-fila__texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.reg-fila__texto b { font-size: 1rem; font-weight: 600; }
.reg-fila__texto small { font-size: .8rem; color: var(--app-tinta-3, #8A8AA0); }
.reg-fila__nombre { width: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: 1rem; font-weight: 600; color: inherit; outline: none; }
.reg-fila__nombre::placeholder { color: var(--app-tinta-3, #8A8AA0); font-weight: 500; }
.reg-fila__ok { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #34C759; color: #fff; font-size: .8rem; font-weight: 800; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .3s var(--ios-resorte, ease); }
.reg-fila__ok.is-visible { opacity: 1; transform: none; }
.reg-fila__tipo { flex: 1 0 100%; }
.reg-fila--mas { justify-content: center; color: var(--app-tinta-3, #8A8AA0); font-size: .9rem; }

/* El botón fijo de abajo. */
.reg-pie { position: sticky; bottom: 0; display: grid; gap: 10px; margin: 20px -16px 0; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--app-fondo, #F2F3F7) 72%, transparent); }
.reg-pie:has(> [hidden]:only-child) { display: none; }
.reg-boton { display: block; width: 100%; min-height: 52px; border: 0; border-radius: 14px; font: inherit; font-size: 1.06rem; font-weight: 700; cursor: pointer; transition: transform .25s var(--ios-resorte, ease), opacity .2s; }
.reg-boton:active { transform: scale(.98); }
.reg-boton--primario { background: var(--blue, #2563EB); color: #fff; box-shadow: 0 6px 18px rgba(37, 99, 235, .3); }
.reg-boton--suave { background: rgba(37, 99, 235, .12); color: var(--blue, #2563EB); }

/* El negocio: los que ya usa, como una lista. */
.reg-conocidos__rotulo { margin: 14px 4px 8px; font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--app-tinta-3, #8A8AA0); }
.reg-conocidos { display: grid; gap: 0; margin-bottom: 8px; border-radius: 16px; overflow: hidden; background: var(--app-tarjeta, #fff); }
.reg-conocido { width: 100%; padding: 15px 16px; border: 0; background: transparent; font: inherit; font-weight: 600; text-align: left; color: inherit; cursor: pointer; }
.reg-conocido + .reg-conocido { border-top: .5px solid var(--ios-separador, rgba(60, 60, 67, .12)); }
.reg-conocido:active { background: rgba(120, 120, 128, .12); }

/* Listo: la palomita se dibuja sola. */
.reg-exito { text-align: center; }
.reg-exito__sello { width: 88px; height: 88px; margin: 10px auto 16px; }
.reg-exito__sello svg { width: 100%; height: 100%; fill: none; stroke: #34C759; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.reg-exito__sello circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: reg-dibuja .6s .05s ease-out forwards; }
.reg-exito__sello path { stroke-dasharray: 44; stroke-dashoffset: 44; animation: reg-dibuja .4s .5s ease-out forwards; }
.reg-exito .reg-lista { margin: 4px 0 16px; text-align: left; }
.reg-nota-final { margin: 0 4px 6px; font-size: .92rem; line-height: 1.4; text-align: left; color: var(--app-tinta-2, #5B5B72); }
.reg-pie--fin { margin-top: 12px; }

/* Fichas para probar en la demo. */
.reg-demo { margin: 0 0 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 159, 10, .14); font-size: .9rem; line-height: 1.4; }
.reg-demo b { font-weight: 700; }
.reg-fichas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.reg-ficha { padding: 8px 14px; border: 0; border-radius: 99px; background: rgba(37, 99, 235, .14); color: var(--blue, #2563EB); font: 700 .92rem ui-monospace, Menlo, monospace; cursor: pointer; }
.reg-ficha--metal { background: rgba(20, 17, 58, .12); color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .reg-hoja, .reg-fila, .reg-aviso--nuevo, .reg-exito__sello circle, .reg-exito__sello path { animation: none !important; }
  .reg-exito__sello circle, .reg-exito__sello path { stroke-dashoffset: 0; }
}

/* Ajustes finos de la hoja de registro. */
.reg-titulo { color: #14113A; }
html[data-apariencia="oscuro"] .reg-titulo { color: #F5F5F7; }
@media (prefers-color-scheme: dark) { html:not([data-apariencia="claro"]) .reg-titulo { color: #F5F5F7; } }
.reg-ficha { background: var(--app-tarjeta, #fff); box-shadow: 0 1px 2px rgba(20, 17, 58, .08); }
.reg-ficha--metal { background: #14113A; color: #fff; }
.reg-fila__texto b, .reg-fila__nombre, .reg-conocido, .reg-tile__texto b { color: #14113A; }
.reg-tile--primario .reg-tile__texto b { color: #fff; }
html[data-apariencia="oscuro"] .reg-fila__texto b, html[data-apariencia="oscuro"] .reg-fila__nombre, html[data-apariencia="oscuro"] .reg-conocido, html[data-apariencia="oscuro"] .reg-tile__texto b { color: #F5F5F7; }
@media (prefers-color-scheme: dark) {
  html:not([data-apariencia="claro"]) .reg-fila__texto b, html:not([data-apariencia="claro"]) .reg-fila__nombre, html:not([data-apariencia="claro"]) .reg-conocido, html:not([data-apariencia="claro"]) .reg-tile__texto b { color: #F5F5F7; }
}
html[data-apariencia="oscuro"] .reg-tile--primario .reg-tile__texto b, html:not([data-apariencia="claro"]) .reg-tile--primario .reg-tile__texto b { color: #fff; }

/* =============================================================
   TODO COMO iOS (9 oct 2026)

   Alessandro: «que todas las secciones se sientan estilo iOS».
   Reglas de Ajustes del iPhone aplicadas a lo que aún era de
   escritorio: tarjetas sin marco, campos rellenos sin borde, botones
   de texto en azul, cifras en cuadritos. Sólo celular. Los colores
   salen de --app-fondo / --app-tarjeta / --app-hilo (claro y oscuro).
   ============================================================= */
@media (max-width: 999.98px) {
  /* Tarjetas: sin marco ni sombra, esquinas de iOS. */
  .pan-body .crm-card { border: 0; box-shadow: none; border-radius: 16px; padding: 16px; background: var(--app-tarjeta); }
  .pan-body .crm-card__titulo { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }

  /* Campos: rellenos, sin borde, 44 px de alto. */
  .pan-body .field__input,
  .pan-body select.field__input { min-height: 44px; border: 0; border-radius: 12px; background-color: var(--app-tarjeta); box-shadow: none; }
  .pan-body .crm-card .field__input,
  .pan-body .crm-card select.field__input { background-color: var(--app-fondo); }
  .pan-body .field__input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(10, 132, 255, .35); }

  /* Botones: 12 px de radio; los secundarios, de texto azul sin marco. */
  .pan-body .btn { border-radius: 12px; font-weight: 600; letter-spacing: -.01em; }
  .pan-body .btn--ghost,
  .pan-body .btn--secondary { border: 0; background: rgba(10, 132, 255, .12); color: var(--blue, #0A84FF); }
  .pan-body .btn--ghost.btn--peligro,
  .pan-body .grupo__borrar { background: rgba(255, 59, 48, .12); color: #FF3B30; }

  /* Selector de «Todos los productos»: cabe y no se sale. */
  .pan-body .crm-bloque__fila { flex-wrap: nowrap; }
  .pan-body .crm-bloque__fila .crm-bloque__titulo { flex: 1 1 auto; min-width: 0; }
  .pan-body select.ios-filtro {
    flex: 0 1 auto; width: auto; min-width: 0; max-width: 58%; margin-bottom: 12px;
    padding: 8px 28px 8px 14px; font-size: .84rem; text-overflow: ellipsis;
    -webkit-appearance: none; appearance: none;
    background: var(--app-tarjeta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%238E8E93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 11px center;
  }

  /* Sucursales y áreas: un grupo es una tarjeta gris dentro de la blanca. */
  .pan-body .grupo { border: 0 !important; border-radius: 14px; background: var(--app-fondo) !important; }
  .pan-body .grupo--area { background: var(--app-tarjeta) !important; box-shadow: 0 0 0 1px var(--app-hilo); }
  .pan-body .grupo__cab { padding: 2px 6px 6px 0; }
  .pan-body .grupo__acciones { flex-wrap: nowrap; gap: 4px; width: 100%; padding: 0 10px 8px; }
  .pan-body .grupo__acciones .btn { flex: 1 1 0; min-width: 0; padding: 8px 6px; font-size: .84rem; white-space: nowrap; }
  .pan-body .grupo__placa { border-top-color: var(--app-hilo) !important; }

  /* Equipo: la persona arriba y sus cifras en cuadritos de dos en dos. */
  .pan-body .crm-fila__datos--equipo { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pan-body .crm-fila__datos--equipo .crm-fila__pieza { grid-column: 1 / -1; }
  .pan-body .crm-fila__datos--equipo .crm-num {
    display: flex; flex-direction: column-reverse; gap: 2px; padding: 8px 12px; border-radius: 12px;
    background: var(--app-fondo); font-size: 1.1rem; font-weight: 700; text-align: left;
  }
  .pan-body .crm-fila__datos--equipo .crm-num::before { content: attr(data-col); font-size: .72rem; font-weight: 500; color: var(--app-tinta-3, #8A8AA0); }
  .pan-body .crm-equipo__cita { margin: 10px 0 0; padding: 10px 12px; border: 0; border-radius: 12px; background: var(--app-fondo); }
}

/* «Este mes» con sus dos filtros: el título arriba y los filtros debajo. */
@media (max-width: 999.98px) {
  .pan-body .crm-bloque__fila:has(.grupo-filtro) { flex-wrap: wrap; justify-content: flex-start; }
  .pan-body .crm-bloque__fila:has(.grupo-filtro) .crm-bloque__titulo { flex: 1 0 100%; margin-bottom: 8px; }
  .pan-body .crm-bloque__fila:has(.grupo-filtro) .ios-filtro { max-width: 48%; }
}

/* CLIENTES de Fidelidad plegables: cerrado = nombre y visitas; abierto = todo lo demás. */
.pan-body .fid-cliente { display: block; padding: 0; }
.pan-body .fid-cliente__cabeza {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 12px; align-items: center; gap: 12px;
  padding: 12px 14px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.pan-body .fid-cliente__cabeza::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid var(--app-tinta-3, #8A8AA0); border-bottom: 2px solid var(--app-tinta-3, #8A8AA0);
  transform: rotate(-45deg); transition: transform .3s var(--ios-suave, ease);
}
.pan-body .fid-cliente.is-abierto .fid-cliente__cabeza::after { transform: rotate(45deg); }
.pan-body .fid-cliente__cabeza:active { background: var(--app-fondo); }
.pan-body .fid-cliente__cabeza .fid-marca { justify-self: start; margin-top: 3px; }
.pan-body .fid-cliente__detalle { display: grid; gap: 8px; padding: 0 14px 14px; }
.pan-body .fid-cliente__detalle[hidden] { display: none; }
.pan-body .fid-cliente__detalle .fid-cliente__marcas { margin-top: 0; }
.pan-body .fid-cliente__acciones { grid-column: auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
.pan-body .fid-cliente__acciones .btn, .pan-body .fid-cliente__acciones .pan-link { flex: 1 1 auto; text-align: center; padding: 9px 12px; border-radius: 12px; white-space: nowrap; }

/* Sin zoom de doble toque (quedaba atorado). */
html, body { touch-action: manipulation; }

/* =============================================================
   REPASO VISUAL (12 oct 2026)

   Alessandro: «que todo el dashboard tenga el mismo estilo y armonía
   visual de Apple». Lo que se encontró al recorrerlo en computadora.
   ============================================================= */

/* 1 · ALERTAS COMO iOS (reemplazan confirm / alert / prompt del navegador). */
.ios-alerta {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0);
  -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
  transition: background .25s ease, backdrop-filter .25s ease, -webkit-backdrop-filter .25s ease;
}
.ios-alerta.esta-abierta { background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.ios-alerta__caja {
  width: min(300px, 100%); max-height: 100%; overflow: auto;
  border-radius: 18px; background: var(--app-tarjeta, #fff); color: #14113A;
  text-align: center; box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
  transform: scale(1.12); opacity: 0;
  transition: transform .32s var(--ios-resorte, cubic-bezier(.2, .9, .25, 1.1)), opacity .2s ease;
}
.ios-alerta.esta-abierta .ios-alerta__caja { transform: none; opacity: 1; }
.ios-alerta__titulo { padding: 20px 20px 4px; font-size: 1.02rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; white-space: pre-line; }
.ios-alerta__texto { padding: 0 20px 4px; font-size: .86rem; line-height: 1.4; color: var(--app-tinta-2, #5B5B72); white-space: pre-line; }
.ios-alerta__campo {
  box-sizing: border-box; width: calc(100% - 40px); margin: 12px 20px 2px; min-height: 40px; padding: 0 12px;
  border: 0; border-radius: 10px; background: var(--app-fondo, #F2F3F7); color: inherit; font: inherit; font-size: 16px; text-align: left;
}
.ios-alerta__campo:focus { outline: 0; box-shadow: 0 0 0 3px rgba(10, 132, 255, .35); }
.ios-alerta__botones { display: flex; margin-top: 18px; border-top: 1px solid var(--app-hilo, rgba(60, 60, 67, .2)); }
.ios-alerta__boton {
  flex: 1 1 0; min-height: 46px; padding: 0 10px; border: 0; background: none;
  color: var(--blue, #0A84FF); font: inherit; font-size: 1.02rem; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.ios-alerta__boton + .ios-alerta__boton { border-left: 1px solid var(--app-hilo, rgba(60, 60, 67, .2)); }
.ios-alerta__boton--fuerte { font-weight: 700; }
.ios-alerta__boton--peligro { color: #FF3B30; }
.ios-alerta__boton:active { background: var(--app-fondo, #F2F3F7); }
@media (prefers-color-scheme: dark) {
  html:not([data-apariencia="claro"]) .ios-alerta__caja { background: #2C2C2E; color: #F5F5F7; }
  html:not([data-apariencia="claro"]) .ios-alerta__texto { color: #C7C7CC; }
  html:not([data-apariencia="claro"]) .ios-alerta__campo { background: #1C1C1E; }
}
html[data-apariencia="oscuro"] .ios-alerta__caja { background: #2C2C2E; color: #F5F5F7; }
html[data-apariencia="oscuro"] .ios-alerta__texto { color: #C7C7CC; }
html[data-apariencia="oscuro"] .ios-alerta__campo { background: #1C1C1E; }
@media (prefers-reduced-motion: reduce) { .ios-alerta, .ios-alerta__caja { transition: none; } }

/* 2 · CAMPOS en computadora: rellenos y sin borde, igual que en el celular. */
@media (min-width: 1000px) {
  .pan-body .field__input,
  .pan-body select.field__input,
  .pan-body textarea.field__input { border: 0; border-radius: 12px; background-color: var(--app-fondo); box-shadow: none; }
  .pan-body .crm-card .field__input:focus,
  .pan-body .field__input:focus { outline: 0; box-shadow: 0 0 0 3px rgba(10, 132, 255, .35); background-color: var(--app-tarjeta); }
}

/* 3 · Los filtros de arriba (grupo, producto, encuestas) del mismo tamaño. */
.pan-body select.ios-filtro, .pan-body button.ios-filtro {
  min-height: 36px; font-size: .86rem; font-weight: 600; letter-spacing: -.01em;
}

/* 4 · «−» y «+» de los premios: círculos, como el resto de botones de icono. */
.pan-body .fid-cuenta__btn { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--app-fondo); color: var(--blue, #0A84FF); font-size: 1.3rem; }
.pan-body .fid-cuenta__btn:active { transform: scale(.92); }

/* 5 · «Qué trae el tuyo»: la misma palomita verde que en las tarjetas de plan. */
.pan-plan__item:not(.pan-plan__item--fuera) .pan-plan__marca {
  width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; font-size: 0; color: transparent;
  background: var(--ios-verde, #34C759) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 8.2 2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}

/* 6 · Los botones se hunden al tocarlos en todas partes (no sólo los .btn). */
.pan-body .pan-link, .pan-body .cat-mini, .pan-body .fid-escanear-fijo, .pan-body .tip-seccion__ok { transition: transform .18s var(--ios-suave, ease), opacity .18s; }
.pan-body .pan-link:active, .pan-body .cat-mini:active, .pan-body .fid-escanear-fijo:active, .pan-body .tip-seccion__ok:active { transform: scale(.95); }
@media (prefers-reduced-motion: reduce) {
  .pan-body .pan-link, .pan-body .cat-mini, .pan-body .fid-escanear-fijo, .pan-body .tip-seccion__ok { transition: none; }
}

/* =============================================================
   ESTADOS VACÍOS, DE CARGA Y DE «HOVER» (12 oct 2026)

   Alessandro: «para que se vea más premium: empty states, loading
   states y hover states». Sólo CSS: no cambia ninguna lógica.
   ============================================================= */

/* 1 · VACÍOS: una tarjeta suave con un ícono, no un recuadro punteado. */
.pan-body .crm-vacio {
  display: block; padding: 34px 24px 30px; border: 0; border-radius: 18px;
  background: var(--app-tarjeta); color: var(--app-tinta-2, #5B5B72);
  font-size: .95rem; line-height: 1.5; text-align: center;
  animation: ios-entra .45s var(--ios-suave, ease) both;
}
.pan-body .crm-vacio[hidden] { display: none; }
.pan-body .crm-vacio::before {
  content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 50%;
  background: rgba(37, 99, 235, .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563EB' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l2.2-6.5A1.5 1.5 0 0 1 7.6 5.5h8.8a1.5 1.5 0 0 1 1.4 1l2.2 6.5v4.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5V13z'/%3E%3Cpath d='M4 13h4.5l1 2h5l1-2H20'/%3E%3C/svg%3E") center / 26px no-repeat;
}
.pan-body .crm-vacio a { color: var(--blue, #2563EB); font-weight: 600; }

/* 2 · CARGA: el logo respira, no un «Cargando…» seco. */
.pan-cargando { padding: 110px 20px; font-size: .88rem; color: var(--app-tinta-3, #8A8AA0); }
.pan-cargando::before {
  content: ""; display: block; width: 132px; height: 39px; margin: 0 auto 16px;
  background: currentColor;
  -webkit-mask: url(../assets/logo-horizontal.svg) center / contain no-repeat;
          mask: url(../assets/logo-horizontal.svg) center / contain no-repeat;
  animation: ios-respira 1.6s ease-in-out infinite;
}
@keyframes ios-respira { 0%, 100% { opacity: .28; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .pan-cargando::before { animation: none; opacity: .6; }
  .pan-body .crm-vacio { animation: none; }
}

/* 3 · HOVER (sólo con ratón): respuesta suave, nada estridente. */
@media (hover: hover) and (pointer: fine) {
  .pan-body .btn, .pan-body .crm-modelo, .pan-body .ios-fila, .pan-body .crm-tab, .pan-body .ios-segmento__op,
  .pan-body .mt-chip, .pan-body .cat-platillo, .pan-body .grupo__abrir, .pan-body .cli-fila__cab,
  .pan-body .fid-cliente__cabeza, .pan-body .cat-mini, .pan-body .crm-fila__grafica {
    transition: background-color .18s ease, box-shadow .22s ease, transform .22s var(--ios-suave, ease), filter .18s ease, opacity .18s ease;
  }
  .pan-body .btn--primary:hover:not(:disabled) { filter: brightness(1.1); }
  .pan-body .btn--ghost:hover:not(:disabled),
  .pan-body .btn--secondary:hover:not(:disabled) { background-color: rgba(37, 99, 235, .12); }
  .pan-body .btn--peligro:hover:not(:disabled) { filter: brightness(1.05); }
  .pan-body .crm-modelo:not(.crm-modelo--sin):hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(30, 27, 75, .1); }
  .pan-body .ios-fila:hover,
  .pan-body .grupo__abrir:hover,
  .pan-body .cli-fila__cab:hover,
  .pan-body .fid-cliente__cabeza:hover,
  .pan-body .cat-platillo:hover { background-color: var(--app-fondo); }
  .pan-body .crm-tab:not(.is-activo):hover,
  .pan-body .mt-chip:not(.is-activo):hover,
  .pan-body .ios-segmento__op:hover { background-color: rgba(60, 60, 67, .1); }
  .pan-body .cat-mini:hover { background-color: var(--app-fondo); }
  .pan-body .crm-fila__grafica.es-tocable:hover { opacity: .72; cursor: pointer; }
  .pan-body .tip-seccion__ok:hover, .pan-body .fid-escanear-fijo:hover { filter: brightness(1.1); }
  .pan-body .crm-kpi { transition: box-shadow .22s ease, transform .22s var(--ios-suave, ease); }
}

/* 4 · ESQUELETOS: la barra que brilla mientras llega la información. */
@keyframes ios-brilla { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.is-cargando {
  display: block; width: min(240px, 70%); min-height: 16px; border-radius: 8px;
  color: transparent !important; user-select: none; pointer-events: none;
  background: linear-gradient(100deg, rgba(120, 120, 128, .12) 30%, rgba(120, 120, 128, .26) 50%, rgba(120, 120, 128, .12) 70%) 0 0 / 220% 100%;
  animation: ios-brilla 1.3s ease-in-out infinite;
}
.is-cargando * { visibility: hidden; }
.pan-body .crm-vacio.is-cargando { width: auto; min-height: 96px; padding: 0; border-radius: 18px; }
.pan-body .crm-vacio.is-cargando::before { display: none; }
.pan-body li.is-cargando { list-style: none; }
@media (prefers-reduced-motion: reduce) { .is-cargando { animation: none; } }

/* 5 · VACÍOS con botón: el texto y debajo qué hacer. */
.pan-body .crm-vacio__texto { margin: 0; }
.pan-body .crm-vacio__accion { margin-top: 16px; }

/* LA CÁMARA DE SELLAR, A PANTALLA COMPLETA (12 oct 2026, Alessandro: «que
   ocupe toda la pantalla y que en automático, cuando ya lo detectó, se
   cierre»). Sólo #fid-camara (Fidelidad → Sellar): la cámara de registrar
   placas (#reg-camara) sigue en su caja porque enseña la lista de abajo.
   panel.js la mueve a <body> al abrirla: dentro de #vista-fidelidad, que
   anima con transform, «fixed» se medía contra la sección y no contra la
   pantalla. */
#fid-camara {
  position: fixed;
  inset: 0;
  z-index: 9000;
  width: 100%;
  max-width: none;
  aspect-ratio: auto;
  border-radius: 0;
  margin: 0;
  background: #000;
}
#fid-camara[hidden] { display: none; }
#fid-camara .fid-camara__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#fid-camara .fid-camara__mira {
  inset: auto;
  left: 50%;
  top: 50%;
  width: min(72vw, 340px);
  height: min(72vw, 340px);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .5);
}
/* «Cerrar» arriba a la derecha; el texto de ayuda va abajo, lejos de él. */
#fid-camara .fid-camara__cerrar {
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  right: 14px;
  bottom: auto;
  z-index: 2;
}
#fid-camara::after {
  content: 'Apunta al QR de tu cliente';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 48px);
  text-align: center;
  color: #fff;
  font: 600 17px/1.3 system-ui, -apple-system, sans-serif;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  pointer-events: none;
}
/* En cuanto lee el QR: palomita verde encima, y la cámara se queda hasta
   que llega la respuesta (el aviso grande sale por encima de ésta). */
#fid-camara.is-leido .fid-camara__mira { box-shadow: 0 0 0 100vmax rgba(10, 80, 40, .62); }
#fid-camara.is-leido::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 112px;
  height: 112px;
  margin: -56px 0 0 -56px;
  border-radius: 50%;
  background: #16a34a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.2 4.2 8.8-9.4'/%3E%3C/svg%3E") center / 62% no-repeat;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
  animation: fid-leido .28s cubic-bezier(.2, .9, .3, 1.3);
  z-index: 3;
}
#fid-camara.is-leido::after { content: 'QR leído · sellando…'; }
@keyframes fid-leido { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* El aviso verde/ámbar/rojo tiene que quedar encima de la cámara. */
.fid-exito { z-index: 9100; }