/* ──────────────────────────────────────────────────────────────────
   myfiel · sistema de diseño
   Verde laurisilva + ámbar de sol. Marca propia, lejos del naranja de
   VYTERS a propósito: esto se le enseña a peluquerías y cafeterías.

   Reglas (para que no vuelva a divergir):
   1. En los <style> de página, ningún color suelto: solo var(--…).
      Excepciones: el pase y el cartel, que pintan los colores del local.
   2. Un solo botón --destacado (ámbar) por pantalla: la acción que se busca.
   3. Todo lo pulsable mide al menos --toque (44 px). Todo campo, su <label>.
   4. Toda carga tiene sus estados: cargando, error con «Reintentar», vacío.
   5. Revisar cada pantalla en claro, en oscuro y a 320 px.
   Guía completa: scratchpad/ux/BASE.md (fuera del repo).
   ────────────────────────────────────────────────────────────────── */

/* ── Fuentes, servidas desde el propio dominio ───────────────────
   Variables (un archivo cubre todos los pesos). Solo latín y latín
   extendido. Licencia SIL Open Font License 1.1. */
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fuentes/inter-tight-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fuentes/inter-tight-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(fuentes/bricolage-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url(fuentes/bricolage-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Tokens ──────────────────────────────────────────────────────
   Semánticos: se nombran por su función, no por su color. Marca,
   relleno de botón y enlace son tokens distintos porque en oscuro
   no pueden ser el mismo verde. Ratios: ver BASE.md. */
:root {
  /*@claro*/
  /* Marca: fija en los dos modos (logo, iconos, cartel) */
  --marca: #0E5C4A;
  --marca-punto: #E9A522;

  /* Superficies y texto */
  --fondo: #F7F4EF;
  --superficie: #FFFFFF;
  --hundido: #EFEAE2;
  --texto: #191612;
  --texto-2: #4A443C;
  --texto-suave: #6B6359;
  --separador: #E2DCD2;        /* solo decorativo: nunca el único borde de un control */
  --separador-2: #EDE8E0;
  --borde-control: #8F877B;    /* campos y botón secundario: ≥ 3:1 */
  --punto-vacio: #9A9185;      /* puntos de progreso sin sello */
  --tinte: #E4F0EC;            /* fondo verdoso suave (etiquetas, iconos) */

  /* Acción */
  --accion: #0E5C4A;           --sobre-accion: #FFFFFF;
  --accion-hover: #0A4438;
  --destacado: #E9A522;        --sobre-destacado: #3A2A05;
  --destacado-hover: #DA961A;
  --peligro: #A63F26;          --sobre-peligro: #FFFFFF;
  --peligro-hover: #8C3420;
  --deshabilitado: #EAE5DD;
  --enlace: #0E5C4A;
  --foco: #0E5C4A;
  --ambar-texto: #8A5E00;      /* ámbar cuando es TEXTO sobre claro */

  /* Estados: el color es para el icono y el borde; el texto va en --texto */
  --exito: #0E5C4A;    --exito-fondo: #E4F0EC;
  --atencion: #7A5200; --atencion-fondo: #FDF1D8;
  --error: #A63F26;    --error-fondo: #FBE7E1;
  --info: #24527F;     --info-fondo: #E5EEF7;
}

:root {
  /* Tipografía: una escala corta. --t-16 es el mínimo de cualquier campo
     (por debajo, iOS hace zoom al tocarlo). */
  --f-display: "Bricolage Grotesque", system-ui, sans-serif;
  --f-texto: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --t-12: 12px; --t-13: 13px; --t-14: 14px; --t-15: 15px; --t-16: 16px;
  --t-18: 18px; --t-20: 20px; --t-24: 24px; --t-32: clamp(26px, 5vw, 32px);
  --t-hero: clamp(38px, 6.2vw, 66px);

  /* Espacio (múltiplos de 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-12: 48px; --e-18: 72px;

  /* Radios */
  --r-s: 8px;      /* chips pequeños, etiquetas */
  --r: 12px;       /* controles y cajas */
  --r-l: 18px;     /* paneles grandes, pase, cartel, diálogos */
  --r-pill: 999px;

  /* Medidas */
  --toque: 44px;        /* alto mínimo de todo lo pulsable */
  --control: 48px;      /* alto de botón y campo normales */
  --ancho-movil: 480px; /* alta, sellar, mis-tarjetas, cuenta */
  --ancho-form: 560px;  /* crear, admin */
  --ancho-panel: 880px; /* panel, cartel */
  --ancho-texto: 720px; /* legales */
  --ancho-web: 1080px;  /* portada */
  --margen: 20px;       /* margen lateral único */

  --sombra: 0 1px 2px rgba(0,0,0,.05), 0 10px 26px -18px rgba(0,0,0,.4);
  --sombra-alta: 0 2px 6px rgba(0,0,0,.08), 0 18px 40px -16px rgba(0,0,0,.45);
}

/* Modo oscuro del sistema (y forzado con <html data-theme="dark">) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #131211; --superficie: #1C1A18; --hundido: #242120;
    --texto: #F2EEE9; --texto-2: #BDB6AC; --texto-suave: #A39C91;
    --separador: #322E2A; --separador-2: #252220; --borde-control: #7D766C;
    --punto-vacio: #746D63; --tinte: #12302A;
    --accion: #1F7A63; --sobre-accion: #FFFFFF; --accion-hover: #1A6B57;
    --destacado: #F0B846; --sobre-destacado: #3A2A05; --destacado-hover: #F5C766;
    --peligro: #B84A2F; --sobre-peligro: #FFFFFF; --peligro-hover: #A0402A;
    --deshabilitado: #2E2B28;
    --enlace: #4FBF9E; --foco: #F0B846; --ambar-texto: #F0B846;
    --exito: #5FCBA9; --exito-fondo: #12302A;
    --atencion: #F2B84B; --atencion-fondo: #3A2A10;
    --error: #FF8567; --error-fondo: #3A1710;
    --info: #8DBCEB; --info-fondo: #15263A;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], [data-tema="noche"] {
  /*@oscuro*/
  --fondo: #131211; --superficie: #1C1A18; --hundido: #242120;
  --texto: #F2EEE9; --texto-2: #BDB6AC; --texto-suave: #A39C91;
  --separador: #322E2A; --separador-2: #252220; --borde-control: #7D766C;
  --punto-vacio: #746D63; --tinte: #12302A;
  --accion: #1F7A63; --sobre-accion: #FFFFFF; --accion-hover: #1A6B57;
  --destacado: #F0B846; --sobre-destacado: #3A2A05; --destacado-hover: #F5C766;
  --peligro: #B84A2F; --sobre-peligro: #FFFFFF; --peligro-hover: #A0402A;
  --deshabilitado: #2E2B28;
  --enlace: #4FBF9E; --foco: #F0B846; --ambar-texto: #F0B846;
  --exito: #5FCBA9; --exito-fondo: #12302A;
  --atencion: #F2B84B; --atencion-fondo: #3A2A10;
  --error: #FF8567; --error-fondo: #3A1710;
  --info: #8DBCEB; --info-fondo: #15263A;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 10px 26px -18px rgba(0,0,0,.8);
  color-scheme: dark;
}
/* Tema «noche»: Sellar, siempre oscuro (se usa en la barra, con poca luz).
   <body data-tema="noche">. Cualquier componente dentro funciona solo. */
[data-tema="noche"] {
  /*@noche*/
  --fondo: #0B0B0D; --superficie: #1A1B20; --hundido: #24262C;
  --separador: #2E3036; --separador-2: #222329; --borde-control: #7A7C85;
  --deshabilitado: #2A2C32;
}

/* Alias de transición: los nombres antiguos apuntan a los nuevos. No los
   uses en código nuevo; se quitarán cuando ninguna pantalla los lea. */
:root, [data-tema="noche"] {
  --verde: var(--enlace); --verde-2: var(--accion-hover); --verde-claro: var(--tinte);
  --ambar: var(--destacado); --ambar-2: var(--ambar-texto);
  --ground: var(--fondo); --surface: var(--superficie); --sunk: var(--hundido);
  --ink: var(--texto); --ink-2: var(--texto-2); --muted: var(--texto-suave);
  --rule: var(--separador); --rule-2: var(--separador-2);
  --alerta: var(--error); --alerta-bg: var(--error-fondo);
}

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

html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  font-size: var(--t-16);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--f-display);
  letter-spacing: -.025em;
  margin: 0;
}

a { color: var(--enlace); text-underline-offset: .15em; }

/* Foco: siempre visible al usar teclado. --foco es ámbar en oscuro. */
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Utilidades. Una sola forma de ocultar, que gane siempre. */
.oculto { display: none !important; }
/* Oculto a la vista pero leído por los lectores de pantalla */
.solo-lector {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Contenedor ────────────────────────────────────────────────────
   <main class="hoja hoja--movil|--form|--panel|--texto|--web">: ancho por
   tipo de pantalla y margen lateral único. */
.hoja { width: 100%; max-width: var(--ancho, var(--ancho-form)); margin: 0 auto; padding: var(--e-6) var(--margen) var(--e-18); }
.hoja--movil { --ancho: var(--ancho-movil); }
.hoja--form { --ancho: var(--ancho-form); }
.hoja--panel { --ancho: var(--ancho-panel); }
.hoja--texto { --ancho: var(--ancho-texto); }
.hoja--web { --ancho: var(--ancho-web); }

/* Contenedor de móvil antiguo (alta, sellar, mis-tarjetas) */
.movil {
  max-width: var(--ancho-movil); margin: 0 auto; min-height: 100%;
  display: flex; flex-direction: column;
}

/* ── Marca ─────────────────────────────────────────────────────────
   <a class="marca" href="/"><span class="ico"><i></i></span><b>myfiel</b></a>
   Colores de marca fijos en los dos modos. */
.marca { display: inline-flex; align-items: center; gap: 9px; color: var(--texto); text-decoration: none; }
a.marca { min-height: var(--toque); }
.marca .ico {
  width: 30px; height: 30px; border-radius: 9px; background: var(--marca);
  display: grid; place-items: center; flex: none;
}
.marca .ico i { width: 11px; height: 11px; border-radius: 50%; background: var(--marca-punto); display: block; }
.marca b { font-family: var(--f-display); font-size: 17px; font-weight: 700; color: var(--texto); }

/* ── Cabecera común ────────────────────────────────────────────────
   <header class="encabezado">
     <a class="marca" href="/">…</a>
     <span class="encabezado-ctx">Café Sol</span>          (opcional)
     <div class="encabezado-acc"><a class="btn btn--fantasma btn--compacto" href="/panel">← Mi panel</a></div>
   </header>
   El hueco de la derecha lleva «← Volver», una acción o «Cerrar sesión». */
.encabezado {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--toque); margin-bottom: var(--e-6);
}
.encabezado-ctx {
  flex: 1; min-width: 0; color: var(--texto-2); font-size: var(--t-14);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.encabezado-ctx::before { content: "·"; margin-right: var(--e-2); color: var(--texto-suave); }
.encabezado-acc { margin-left: auto; display: flex; gap: var(--e-2); align-items: center; flex: none; }
.encabezado-acc .btn { width: auto; }

/* ── Botones ───────────────────────────────────────────────────────
   <button class="btn">                 principal (verde)
   .btn--destacado  (= .ambar)          uno por pantalla, la acción clave
   .btn--secundario (= .claro)          superficie con borde
   .oscuro                              tinta (se invierte en oscuro)
   .btn--fantasma                       solo texto, 44 px
   .btn--peligro                        quitar, borrar
   .btn--compacto                       44 px de alto (en filas)
   .btn--auto                           ancho según el texto
   Cargando: UI.boton(el).cargando('Guardando…') → aria-busy + spinner. */
.btn {
  -webkit-appearance: none; appearance: none;
  border: 1px solid transparent; width: 100%; min-height: var(--control);
  padding: 12px 18px; border-radius: var(--r);
  background: var(--accion); color: var(--sobre-accion); cursor: pointer;
  font-family: var(--f-texto); font-size: var(--t-16); font-weight: 600; line-height: 1.2;
  text-align: center; text-decoration: none;
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  transition: background-color .15s, border-color .15s, transform .08s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.btn:hover { background: var(--accion-hover); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: var(--r); }

.btn.ambar, .btn--destacado { background: var(--destacado); color: var(--sobre-destacado); font-weight: 700; }
.btn.ambar:hover, .btn--destacado:hover { background: var(--destacado-hover); }

.btn.oscuro { background: var(--texto); color: var(--fondo); }
.btn.oscuro:hover { background: color-mix(in srgb, var(--texto) 86%, var(--fondo)); }

.btn.claro, .btn--secundario { background: var(--superficie); color: var(--texto); border-color: var(--borde-control); }
.btn.claro:hover, .btn--secundario:hover { background: var(--hundido); }

.btn--fantasma { background: transparent; color: var(--enlace); min-height: var(--toque); padding: 8px 12px; }
.btn--fantasma:hover { background: var(--tinte); }

.btn--peligro { background: var(--peligro); color: var(--sobre-peligro); }
.btn--peligro:hover { background: var(--peligro-hover); }

.btn--compacto { min-height: var(--toque); padding: 8px 14px; font-size: var(--t-15); }
.btn--auto { width: auto; display: inline-flex; }

.btn:disabled:not([aria-busy="true"]), .btn[aria-disabled="true"]:not([aria-busy="true"]) {
  background: var(--deshabilitado); color: var(--texto-suave); border-color: transparent;
  cursor: not-allowed; transform: none;
}
/* Cargando: conserva su color, enseña el giro y el texto en gerundio */
.btn[aria-busy="true"] { cursor: progress; transform: none; }
.btn[aria-busy="true"]::before, .girando {
  content: ""; display: inline-block; width: 16px; height: 16px; flex: none;
  border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.btn + .btn { margin-top: var(--e-2); }

/* Botón pequeño de las filas del panel (Avisar, Quitar). 44 px de alto. */
.mini {
  border: 0; background: var(--accion); color: var(--sobre-accion); cursor: pointer;
  font-family: inherit; font-size: var(--t-14); font-weight: 600;
  min-height: var(--toque); padding: 0 14px; border-radius: var(--r-s); white-space: nowrap;
  transition: background-color .15s, transform .08s;
}
.mini:hover { background: var(--accion-hover); }
.mini:active { transform: scale(.97); }
.mini.hecho, .mini:disabled { background: var(--hundido); color: var(--texto-suave); cursor: default; }
.mini[aria-busy="true"] { cursor: progress; }

/* ── Campos ────────────────────────────────────────────────────────
   <div class="campo">
     <label for="x">Tu nombre <span class="opcional">(opcional)</span></label>
     <input id="x" aria-describedby="x-ayuda x-error">
     <p class="campo-ayuda" id="x-ayuda">…</p>
     <p class="campo-error" id="x-error" role="alert"></p>
   </div>
   Letra de 16 px (sin zoom en iOS), borde con contraste ≥ 3:1. */
label { display: block; font-size: var(--t-14); font-weight: 500; color: var(--texto-2); margin: 0 0 6px; }
input, select, textarea {
  width: 100%; min-height: var(--control); padding: 12px 14px; border-radius: var(--r);
  border: 1px solid var(--borde-control); background: var(--superficie); color: var(--texto);
  font-family: inherit; font-size: var(--t-16); line-height: 1.3;
}
input[type=color] { padding: 3px; cursor: pointer; }
input[type=checkbox], input[type=radio] { width: auto; min-height: 0; accent-color: var(--accion); }
input::placeholder, textarea::placeholder { color: var(--texto-suave); opacity: 1; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--foco); outline-offset: 1px; border-color: var(--accion); border-radius: var(--r);
}
[aria-invalid="true"] { border-color: var(--error); }
.campo { margin-bottom: var(--e-4); }
.campo-ayuda { margin: 6px 0 0; font-size: var(--t-14); color: var(--texto-suave); line-height: 1.4; }
.campo-error { margin: 6px 0 0; font-size: var(--t-14); font-weight: 500; color: var(--error); }
.campo-error:empty { display: none; }
.opcional { color: var(--texto-suave); font-weight: 400; }

/* ── Aviso en línea ────────────────────────────────────────────────
   <div class="aviso aviso--exito" role="status"><b>Listo.</b> Texto.</div>
   Variantes: --info (por defecto), --exito, --atencion, --error.
   role="status" (o "alert" en errores). No desaparece solo.
   Desde JS: UI.aviso(contenedor, { tipo, titulo, texto }). */
.aviso {
  position: relative; margin: var(--e-3) 0; padding: 12px 14px 12px 46px;
  border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--info) 30%, transparent);
  background: var(--info-fondo); color: var(--texto);
  font-size: var(--t-15); line-height: 1.45; text-align: left;
}
.aviso::before {
  content: "i"; position: absolute; left: 13px; top: 12px;
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--info); color: var(--info-fondo);
  font-weight: 700; font-size: 13px; line-height: 1; font-family: var(--f-texto);
}
.aviso b { font-weight: 700; }
.aviso a { color: inherit; font-weight: 600; }
.aviso--exito { background: var(--exito-fondo); border-color: color-mix(in srgb, var(--exito) 30%, transparent); }
.aviso--exito::before { content: "✓"; background: var(--exito); color: var(--exito-fondo); }
.aviso--atencion { background: var(--atencion-fondo); border-color: color-mix(in srgb, var(--atencion) 35%, transparent); }
.aviso--atencion::before { content: "!"; background: var(--atencion); color: var(--atencion-fondo); }
.aviso--error { background: var(--error-fondo); border-color: color-mix(in srgb, var(--error) 35%, transparent); }
.aviso--error::before { content: "!"; background: var(--error); color: var(--error-fondo); }

/* Nota neutra con filete ámbar (explicaciones, no estados) */
.nota {
  border-left: 3px solid var(--destacado); background: var(--hundido);
  padding: 13px 15px; border-radius: 0 var(--r-s) var(--r-s) 0; margin: 14px 0;
  font-size: var(--t-15); color: var(--texto-2);
}
.nota b { color: var(--texto); }

/* ── Toast ─────────────────────────────────────────────────────────
   Sustituye a alert(). UI.toast('Guardado', { tipo: 'exito' }).
   Abajo, sobre todo, con botón de cerrar; los errores duran más. */
.toasts {
  position: fixed; left: 0; right: 0; z-index: 90;
  bottom: max(16px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: var(--e-2);
  padding: 0 var(--e-4); pointer-events: none;
}
.toast {
  pointer-events: auto; width: 100%; max-width: 440px; margin: 0;
  display: flex; align-items: center; gap: var(--e-2); padding-right: 6px;
  box-shadow: var(--sombra-alta); animation: toast-entra .22s ease-out;
}
.toast > span { flex: 1; }
.toast .toast-cerrar {
  flex: none; width: var(--toque); height: var(--toque); border: 0; border-radius: var(--r-s);
  background: transparent; color: var(--texto-2); font-size: 22px; line-height: 1; cursor: pointer;
}
.toast .toast-cerrar:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); }
@keyframes toast-entra { from { opacity: 0; transform: translateY(12px); } }

/* ── Estado de pantalla ────────────────────────────────────────────
   Cargando, vacío, error de red y sin conexión, con la misma forma:
   UI.estado(contenedor, { tipo: 'cargando'|'esqueleto'|'vacio'|'error'|'red', … })
   Nunca «…» suelto mientras carga. */
.estado {
  display: grid; justify-items: center; gap: var(--e-3);
  padding: var(--e-8) var(--e-5); text-align: center;
}
.estado-ico {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--hundido); color: var(--texto-2); font-size: 26px; line-height: 1;
}
.estado--error .estado-ico, .estado--red .estado-ico { background: var(--error-fondo); color: var(--error); }
.estado--vacio .estado-ico { background: var(--tinte); color: var(--enlace); }
.estado h2 { font-size: var(--t-20); line-height: 1.2; }
.estado p { margin: 0; color: var(--texto-2); font-size: var(--t-15); max-width: 36ch; }
.estado .btn { width: auto; min-width: 200px; margin-top: var(--e-2); }
.estado--cargando { color: var(--texto-2); }
.estado--cargando .girando { width: 28px; height: 28px; border-width: 3px; color: var(--enlace); }

/* Esqueleto: bloques grises que respiran mientras llega el contenido */
.esqueleto { display: grid; gap: var(--e-3); padding: var(--e-2) 0; }
.esqueleto i {
  display: block; height: 16px; border-radius: var(--r-s);
  background: linear-gradient(90deg, var(--hundido) 0%, var(--separador-2) 50%, var(--hundido) 100%);
  background-size: 200% 100%; animation: respira 1.3s ease-in-out infinite;
}
.esqueleto i.t { height: 28px; width: 60%; }
.esqueleto i.c { height: 140px; border-radius: var(--r-l); }
.esqueleto i.m { width: 80%; }
@keyframes respira { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Barra de «sin conexión»: la pone sola app.js al perder la red */
.sin-red {
  position: relative; z-index: 95;
  background: var(--atencion-fondo); color: var(--texto);
  border-bottom: 1px solid color-mix(in srgb, var(--atencion) 35%, transparent);
  padding: 10px var(--margen); text-align: center; font-size: var(--t-14); line-height: 1.35;
}
.sin-red b { font-weight: 700; }

/* ── Diálogo de confirmación ───────────────────────────────────────
   Sustituye a confirm(). await UI.confirmar({ titulo, texto, si, no, peligro })
   <dialog> nativo: atrapa el foco, Esc cancela y vuelve al botón de origen. */
.dialogo {
  border: 0; padding: var(--e-6); border-radius: var(--r-l);
  background: var(--superficie); color: var(--texto);
  width: min(420px, calc(100% - 2 * var(--e-4))); box-shadow: var(--sombra-alta);
}
.dialogo::backdrop { background: rgba(10, 9, 8, .55); }
.dialogo h2 { font-size: var(--t-20); line-height: 1.2; margin: 0 0 var(--e-2); }
.dialogo p { margin: 0 0 var(--e-5); color: var(--texto-2); font-size: var(--t-15); }
.dialogo-botones { display: flex; flex-direction: column; gap: var(--e-2); }
.dialogo-botones .btn + .btn { margin-top: 0; }
@media (min-width: 480px) {
  .dialogo-botones { flex-direction: row-reverse; }
  .dialogo-botones .btn { flex: 1; }
}

/* ── El pase ───────────────────────────────────────────────────────
   Pinta los colores del LOCAL (--pf fondo, --pa acento, --pt texto),
   no los de myfiel: por eso aquí sí hay colores fijos. */
.pase {
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(168deg, var(--pf, var(--marca)) 0%, color-mix(in srgb, var(--pf, var(--marca)) 78%, #000) 100%);
  color: var(--pt, #fff); box-shadow: 0 10px 26px -12px rgba(0,0,0,.45);
}
.pase-top { display: flex; align-items: center; gap: 10px; padding: 15px 16px 11px; }
.pase-top .ico {
  width: 27px; height: 27px; border-radius: 8px; background: color-mix(in srgb, var(--pt, #fff) 16%, transparent);
  display: grid; place-items: center; flex: none;
}
.pase-top .ico i { width: 10px; height: 10px; border-radius: 50%; background: var(--pa, var(--marca-punto)); display: block; }
.pase-top b { font-size: 14px; font-weight: 600; flex: 1; }
.pase-top .cont { text-align: right; }
.pase-top .cont u {
  display: block; text-decoration: none; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; opacity: .75;
}
.pase-top .cont s {
  display: block; text-decoration: none;
  font-family: var(--f-display); font-size: 17px; font-weight: 700; line-height: 1.1;
}

.pase-sellos { background: rgba(0,0,0,.17); padding: 16px; }
/* La firma de myfiel, como en el pase de Wallet: pequeña y suave */
.pase-firma {
  display: block; text-align: right; margin-top: 10px;
  font-family: var(--f-display); font-weight: 700; font-size: 11px;
  color: var(--pt, #fff); opacity: .6; letter-spacing: -.01em;
}
.sellos { display: grid; gap: 9px; }
.sello {
  aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed color-mix(in srgb, var(--pt, #fff) 38%, transparent);
  display: grid; place-items: center; font-size: 16px; color: color-mix(in srgb, var(--pt, #fff) 30%, transparent);
  transition: transform .28s cubic-bezier(.3,1.5,.5,1), background .28s, border-color .28s;
}
.sello.on { background: var(--pa, var(--marca-punto)); border: 1.5px solid var(--pa, var(--marca-punto)); color: var(--pta, var(--marca)); font-weight: 700; }
.sello.pop { transform: scale(1.22); }

.pase-datos { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.pase-datos u {
  display: block; text-decoration: none; font-size: 10.5px;
  letter-spacing: .1em; text-transform: uppercase; opacity: .75; margin-bottom: 2px;
}
.pase-datos b { font-size: 14px; font-weight: 600; }
.pase-datos .d { text-align: right; }

.pase-listo {
  background: var(--pa, var(--marca-punto)); color: var(--pta, #3A2A05); text-align: center;
  padding: 12px; font-weight: 700; font-size: 14px;
}

.pase-qr { background: #fff; padding: 14px; display: grid; place-items: center; gap: 6px; }
.pase-qr svg { width: 92px; height: 92px; display: block; shape-rendering: crispEdges; }
/* Solo los módulos. El <rect> que trae el SVG es el fondo blanco: si se
   pinta también, el QR sale como un cuadrado negro y no lee nada. */
.pase-qr svg path { fill: #17161A; }
.pase-qr .falso { width: 86px; height: 86px; border-radius: 4px; background: #17161A; }
.pase-qr small { font-family: var(--f-mono); font-size: 11px; color: #5E5953; letter-spacing: .06em; }

/* ── Cajas, KPI y filas del panel ──────────────────────────────── */
.caja { background: var(--superficie); border: 1px solid var(--separador); border-radius: var(--r); overflow: hidden; }
.caja-h { padding: 15px 18px; border-bottom: 1px solid var(--separador); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.caja-h b { font-family: var(--f-display); font-size: 16px; font-weight: 700; }
.caja-h span { font-size: var(--t-13); color: var(--texto-suave); }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1px; background: var(--separador); border-bottom: 1px solid var(--separador); }
.kpi { background: var(--superficie); padding: 14px 16px; }
.kpi b {
  display: block; font-family: var(--f-display);
  font-size: 25px; font-weight: 700; letter-spacing: -.028em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.kpi span { display: block; font-size: var(--t-13); color: var(--texto-2); margin-top: 2px; }
.kpi--alerta b { color: var(--error); }

.fila {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px;
  align-items: center; padding: 11px 18px; border-bottom: 1px solid var(--separador-2);
}
.fila:last-child { border-bottom: 0; }
.fila .nm { font-weight: 600; font-size: var(--t-15); }
.fila .mt { font-size: var(--t-13); color: var(--texto-suave); }
/* A 320–420 px los puntos aplastan el nombre; el texto «3 de 8» ya lo dice */
@media (max-width: 420px) { .fila .puntos { display: none; } .fila { grid-template-columns: 1fr auto; } }
.puntos { display: flex; gap: 3px; }
.puntos i { width: 8px; height: 8px; border-radius: 50%; background: var(--punto-vacio); display: block; }
.puntos i.on { background: var(--destacado); }

.etq { font-size: var(--t-12); font-weight: 600; padding: 3px 9px; border-radius: var(--r-pill); background: var(--tinte); color: var(--enlace); white-space: nowrap; }
.etq.frio { background: var(--error-fondo); color: var(--error); }

.maqueta {
  position: fixed; bottom: 12px; right: 12px; z-index: 50;
  background: var(--texto); color: var(--fondo);
  font-size: var(--t-12); font-family: var(--f-mono);
  padding: 5px 10px; border-radius: var(--r-pill); opacity: .9;
  letter-spacing: .05em;
}

/* ── Acceso del personal ───────────────────────────────────────────
   Capa modal que pinta pintaAcceso() en app.js. Fija su propio color de
   texto: dentro de Sellar heredaba el de la página y no se leía. */
.acceso {
  position: fixed; inset: 0; z-index: 50;
  background: var(--fondo); color: var(--texto);
  display: grid; place-items: center;
  padding: 16px; overflow-y: auto;
}
.acceso-caja {
  width: 100%; max-width: 400px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--separador);
  border-radius: var(--r-l);
  box-shadow: var(--sombra);
  padding: 24px;
}
.acceso-caja .marca { margin-bottom: var(--e-4); min-height: 0; }
.acceso-caja h2 { margin: 0 0 4px; font-size: var(--t-24); color: var(--texto); }
.acceso-caja .p { margin: 0 0 18px; font-size: var(--t-15); color: var(--texto-2); }
.acceso-caja input { width: 100%; margin-bottom: 12px; }
.acceso-error { color: var(--error); font-size: var(--t-14); font-weight: 500; min-height: 1.2em; margin: 0 0 8px; }
.acceso-olvido { display: block; text-align: center; margin-top: 6px; padding: 12px 0; font-size: var(--t-15); }
/* Para nosotros, no para el local: discreto, debajo de todo. El botón de Google
   va solo en /admin: en este formulario, un dueño con Gmail que lo tocara
   podría perder la contraseña de su cuenta (Google la sustituye). */
.acceso-admin { display: block; text-align: center; padding: 12px 0; font-size: var(--t-14); color: var(--texto-suave); }

/* Pasos numerados: la forma más rápida de explicar qué hacer y en qué orden */
.pasos-guia { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: p; }
.pasos-guia li {
  counter-increment: p; display: grid; grid-template-columns: 28px 1fr; gap: 11px; align-items: start;
  font-size: var(--t-15); color: var(--texto-2); line-height: 1.45;
}
.pasos-guia li::before {
  content: counter(p); width: 28px; height: 28px; border-radius: 50%;
  background: var(--tinte); color: var(--enlace);
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-13);
}
.pasos-guia li b { color: var(--texto); display: block; }

/* ── Guía de la demostración ───────────────────────────────────────
   Barra fija arriba que lleva de la mano: cliente → empleado → dueño. */
.guia {
  position: sticky; top: 0; z-index: 45;
  background: var(--accion); color: var(--sobre-accion);
  padding: 8px 16px; font-size: var(--t-14); line-height: 1.35;
}
.guia-in { max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.guia-paso {
  flex: none; font-size: var(--t-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(255,255,255,.16); padding: 3px 8px; border-radius: var(--r-pill);
}
.guia-txt { flex: 1; min-width: 0; }
.guia-txt b { font-weight: 700; }
.guia a {
  flex: none; color: var(--sobre-destacado); background: var(--destacado); text-decoration: none;
  font-weight: 700; padding: 0 14px; min-height: var(--toque); border-radius: var(--r-s); white-space: nowrap;
  display: inline-flex; align-items: center;
}
.guia a:hover { background: var(--destacado-hover); }
.guia a.fuera { background: transparent; color: var(--sobre-accion); font-weight: 500; padding: 0 8px; text-decoration: underline; }
.guia a:focus-visible { outline-color: var(--sobre-accion); }
@media (max-width: 520px) {
  .guia-in { flex-wrap: wrap; gap: 6px 8px; }
  .guia-txt { flex-basis: calc(100% - 90px); }
}

/* ── portada: guía de la demo ─────────────────────────────────────
   Complementa a .guia (arriba). La pinta app.js (guiaRefresca) en crear,
   cartel, alta, sellar, panel y mis-tarjetas de la demo. Autocontenida:
   no depende del marcado de esas pantallas.
   .guia-sig   botón «siguiente», solo cuando ya se ha hecho el paso
   .guia-salir «✕ Salir de la demo»
   .guia-largo / .guia-corto  texto según el ancho */
.guia { padding: 6px 12px; }
.guia-in { gap: 10px; }
.guia-paso { white-space: nowrap; }
.guia-corto { display: none; }
.guia a.guia-salir {
  order: 9; min-width: var(--toque); justify-content: center; gap: 6px;
  padding: 0 10px; text-decoration: none; font-weight: 600; border-radius: var(--r-s);
}
.guia a.guia-salir:hover { background: color-mix(in srgb, var(--sobre-accion) 14%, transparent); }
.guia a.guia-salir span[aria-hidden] { font-size: 18px; line-height: 1; }
.guia--recien .guia-sig { animation: guia-luce 1.2s ease-out 2; }
@keyframes guia-luce {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--destacado) 80%, transparent); }
  100% { box-shadow: 0 0 0 12px transparent; }
}
@media (max-width: 520px) {
  .guia { padding: 6px 8px 6px 12px; }
  .guia-in { flex-wrap: wrap; gap: 6px 8px; }
  .guia-largo { display: none; }
  .guia-corto { display: inline; }
  .guia-txt { flex: 1 1 0; font-size: var(--t-14); }
  .guia a.guia-salir { padding: 0; }
  .guia a.guia-sig { order: 10; flex: 1 1 100%; justify-content: center; }
}

/* ── empleado: acceso del personal (pintaAcceso) ── */
.acceso-ver {
  display: block; background: none; border: 0; padding: 0; margin: -6px 0 6px; cursor: pointer;
  min-height: var(--toque); color: var(--texto-2); font: inherit; font-size: var(--t-14);
  text-decoration: underline; text-underline-offset: .2em;
}
.acceso-error.ok { color: var(--texto-2); font-weight: 400; }
/* ── fin empleado ── */