/* ==========================================================================
   Tarjeta — sistema visual
   Estructura y disciplina tomadas de DESIGN.md (Apple):
   un solo acento racionado, cero sombras, radio 28, tracking negativo.
   El acento viene de ej1.png (dorado), no el azul de Apple.
   ========================================================================== */

:root {
  /* Lienzo y superficies — la elevacion es tonal, nunca sombra */
  --canvas:        #08080a;
  --surface-1:     #121213;
  --surface-2:     #1d1d1f;
  --surface-3:     #2a2a2c;
  --hairline:      rgba(134,134,139,.24);
  --hairline-soft: rgba(134,134,139,.12);

  /* Texto */
  --text:          #f5f5f7;
  --text-2:        #a1a1a6;
  --text-3:        #6e6e73;

  /* El acento, racionado: accion primaria y dato clave, nada mas */
  --gold:          #e3bd80;
  --gold-bright:   #f2d6a8;
  --gold-deep:     #b8925c;
  --on-gold:       #1a1408;

  /* Semanticos, con cuentagotas */
  --good:          #7ac79b;
  --alert:         #e08585;

  /* Tipografia */
  --sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, ui-sans-serif, system-ui, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  --t-display:    34px;  --lh-display:    1.06;  --tr-display:    -.022em;
  --t-heading:    28px;  --lh-heading:    1.12;  --tr-heading:    -.016em;
  --t-subheading: 22px;  --lh-subheading: 1.20;  --tr-subheading: -.010em;
  --t-title:      17px;  --lh-title:      1.30;  --tr-title:      -.012em;
  --t-body:       16px;  --lh-body:       1.47;  --tr-body:       -.011em;
  --t-caption:    13px;  --lh-caption:    1.35;  --tr-caption:    -.004em;
  --t-micro:      11px;  --lh-micro:      1.30;  --tr-micro:       .02em;

  /* Espaciado — escala unica */
  --s4:4px; --s8:8px; --s12:12px; --s16:16px; --s20:20px;
  --s24:24px; --s28:28px; --s32:32px; --s40:40px; --s48:48px; --s64:64px;

  --gutter: 20px;

  /* Radios — solo estos */
  --r-card: 28px;
  --r-tile: 18px;
  --r-field: 14px;
  --r-pill: 9999px;

  /* LA PERILLA DE LA LUZ.
     Sube o baja estos cuatro numeros y cambia la profundidad de todo el
     tablero. No hay que tocar ninguna regla suelta. */
  --filo:        rgba(255,255,255,.18);   /* el reflejo de arriba, tarjeta chica */
  --filo-fuerte: rgba(255,255,255,.28);   /* el de la tarjeta protagonista */
  --lustre:      rgba(255,255,255,.075);  /* el degradado que cae desde arriba */
  --halo:        .20;                     /* el aura del color del negocio */

  --nav-h: 64px;
  --ease: cubic-bezier(.32,.72,0,1);
}

/* --------------------------------------------------------------- base --- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  /* El tiron hacia abajo para recargar lo controla el elemento que de
     verdad desplaza, que es <html>. Estaba solo en <body>, asi que en
     Android seguia recargando la pagina —y recargar significa volver a
     pedirle la clave—. En iPhone no pasaba porque Safari no trae ese gesto. */
  overscroll-behavior-y: none;
}

body {
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  letter-spacing: var(--tr-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
/* touch-action: manipulation apaga el zoom por doble toque SOBRE los
   botones, y de paso quita el retraso de 300 ms que el navegador se toma
   esperando a ver si viene un segundo toque.

   No se toca el viewport ni se pone user-scalable=no: eso apagaria tambien
   el zoom de dos dedos, y hay clientas que lo necesitan para leer. Aqui
   solo se desactiva donde estorba.

   Y el destello gris del toque se quita: en un teclado de clave se ve como
   si la app parpadeara. */
button {
  cursor: pointer; border: 0; background: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
input, textarea, select { -webkit-appearance: none; appearance: none; }
a { color: var(--gold); text-decoration: none; }

h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.num { font-variant-numeric: tabular-nums; }
.balance { text-wrap: balance; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.oculto { display: none !important; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------ tipografia */
.display    { font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 600; }
.heading    { font-size: var(--t-heading); line-height: var(--lh-heading); letter-spacing: var(--tr-heading); font-weight: 600; }
.subheading { font-size: var(--t-subheading); line-height: var(--lh-subheading); letter-spacing: var(--tr-subheading); font-weight: 600; }
.title      { font-size: var(--t-title); line-height: var(--lh-title); letter-spacing: var(--tr-title); font-weight: 600; }
.caption    { font-size: var(--t-caption); line-height: var(--lh-caption); letter-spacing: var(--tr-caption); color: var(--text-2); }
.micro      { font-size: var(--t-micro); line-height: var(--lh-micro); letter-spacing: .06em; color: var(--text-3); text-transform: uppercase; font-weight: 600; }
.dim        { color: var(--text-2); }
.dimmer     { color: var(--text-3); }
.oro        { color: var(--gold); }

/* --------------------------------------------------------------- shell --- */
#app { min-height: 100dvh; display: flex; flex-direction: column; }

.pantalla {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s32));
  animation: entra .28s var(--ease) both;
}
.pantalla--sin-nav { padding-bottom: calc(env(safe-area-inset-bottom) + var(--s32)); }
.pantalla--con-acciones { padding-bottom: calc(84px + env(safe-area-inset-bottom) + var(--s24)); }

@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.cabecera {
  padding-top: calc(env(safe-area-inset-top) + var(--s24));
  padding-bottom: var(--s20);
}
.cabecera__fila { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s16); }
/* La cabecera de Ajustes no lleva subtitulo largo ni acciones, asi que el
   aire de abajo se sentia como un hueco. Se recorta solo ahi. */
.pantalla--ajustes .cabecera { padding-bottom: var(--s8); }
.pantalla--ajustes .cabecera + .seccion { margin-top: var(--s12); }
.cabecera .caption { margin-top: var(--s4); }

.volver {
  display: inline-flex; align-items: center; gap: var(--s4);
  color: var(--gold); font-size: var(--t-title); font-weight: 400;
  margin-bottom: var(--s12); margin-left: -4px; padding: 4px 4px 4px 0;
}
.volver svg { width: 18px; height: 18px; }

/* ----------------------------------------------------------------- nav --- */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(18,18,19,.82);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-top: 1px solid var(--hairline-soft);
}
.nav__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-3); font-size: 10px; font-weight: 600; letter-spacing: .01em;
  transition: color .2s var(--ease);
}
.nav__item svg { width: 22px; height: 22px; }
.nav__item[aria-current="page"] { color: var(--gold); }

/* -------------------------------------------------------------- botones --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s8);
  min-height: 52px; padding: 0 var(--s24);
  border-radius: var(--r-pill);
  font-size: var(--t-title); font-weight: 600; letter-spacing: var(--tr-title);
  transition: transform .15s var(--ease), background-color .2s var(--ease), opacity .2s var(--ease);
}
.btn:active { transform: scale(.975); }
.btn--pri { background: var(--gold); color: var(--on-gold); }
.btn--pri:hover { background: var(--gold-bright); }
.btn--sec { background: var(--surface-3); color: var(--text); }
.btn--ghost { background: transparent; color: var(--gold); }
.btn--peligro { background: transparent; color: var(--alert); }
.btn--bloque { width: 100%; }
.btn[disabled] { opacity: .38; pointer-events: none; }
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-chico {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 38px; padding: 0 var(--s16);
  border-radius: var(--r-pill); background: var(--surface-3); color: var(--text);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0;
}
.btn-chico--oro { background: var(--gold); color: var(--on-gold); }
.btn-chico--alerta { color: var(--alert); }
.btn-chico svg { width: 16px; height: 16px; }

.acciones-fijas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: var(--s16) var(--gutter) calc(var(--s16) + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--canvas) 62%, rgba(0,0,0,0));
  display: flex; gap: var(--s12);
}
.acciones-fijas .btn { flex: 1; }

/* --------------------------------------------------------------- cards --- */
.card {
  position: relative;
  border-radius: var(--r-card);
  padding: var(--s24);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012) 40%, rgba(255,255,255,0) 75%),
    var(--surface-2);
  border: 1px solid rgba(255,255,255,.055);
  border-top-color: var(--filo);
  box-shadow: inset 0 1px 0 var(--filo);
}
.card--plano { background:
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.01) 40%, rgba(255,255,255,0) 75%),
    var(--surface-1); }

.tile {
  background: var(--surface-2);
  border-radius: var(--r-tile);
  padding: var(--s16);
}

.lista { display: flex; flex-direction: column; gap: 2px; }
.lista__item {
  display: flex; align-items: center; gap: var(--s16);
  width: 100%; text-align: left;
  padding: var(--s16);
  background: var(--surface-1);
  transition: background-color .2s var(--ease);
}
.lista__item:first-child { border-radius: var(--r-tile) var(--r-tile) 4px 4px; }
.lista__item:last-child  { border-radius: 4px 4px var(--r-tile) var(--r-tile); }
.lista__item:only-child  { border-radius: var(--r-tile); }
.lista__item:active { background: var(--surface-2); }
.lista__cuerpo { flex: 1; min-width: 0; }
.lista__cuerpo .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista__meta { flex: none; text-align: right; }

.avatar {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--surface-3); color: var(--gold);
  font-size: var(--t-title); font-weight: 600; letter-spacing: 0;
}
.chevron { flex: none; width: 18px; height: 18px; color: var(--text-3); }

/* -------------------------------------------------------------- campos --- */
.campo { display: block; margin-bottom: var(--s20); }
.campo__label { display: block; margin-bottom: var(--s8); font-size: var(--t-caption); font-weight: 600; color: var(--text-2); letter-spacing: 0; }
.campo__ayuda { margin-top: var(--s8); font-size: var(--t-caption); color: var(--text-3); }

.input, .textarea, .select {
  width: 100%; min-height: 52px; padding: 0 var(--s16);
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--r-field); color: var(--text);
  font-size: var(--t-title);
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.textarea { min-height: 96px; padding: var(--s12) var(--s16); line-height: 1.5; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--gold); background: var(--surface-1); }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a1a1a6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 18px;
  padding-right: var(--s40);
}

.input-dinero { position: relative; }
.input-dinero .input { padding-left: var(--s32); font-size: var(--t-subheading); font-weight: 600; }
.input-dinero__signo {
  position: absolute; left: var(--s16); top: 50%; transform: translateY(-50%);
  color: var(--text-3); font-size: var(--t-subheading); font-weight: 600; pointer-events: none;
}

/* El porcentaje se lee despues del numero, no antes. */
.input-dinero--pct .input { padding-left: var(--s16); padding-right: var(--s40); }
.input-dinero--pct .input-dinero__signo { left: auto; right: var(--s16); }

.switch-fila {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s16);
  padding: var(--s16); background: var(--surface-2); border-radius: var(--r-field);
}
.switch-fila + .switch-fila { margin-top: var(--s8); }

.switch { position: relative; flex: none; width: 52px; height: 31px; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; z-index: 2; }
.switch__pista {
  position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--surface-3);
  transition: background-color .22s var(--ease);
}
.switch__pista::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px;
  border-radius: var(--r-pill); background: #fff;
  transition: transform .22s var(--ease);
}
.switch input:checked + .switch__pista { background: var(--gold); }
.switch input:checked + .switch__pista::after { transform: translateX(21px); }

.segmentado {
  display: flex; gap: 4px; padding: 4px;
  background: var(--surface-2); border-radius: var(--r-pill);
}
.segmentado button {
  flex: 1; min-height: 38px; border-radius: var(--r-pill);
  font-size: var(--t-caption); font-weight: 600; color: var(--text-2); letter-spacing: 0;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.segmentado button[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }

/* --------------------------------------------------------- tarjeta card --- */
.tarjeta {
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  padding: var(--s24) var(--s20) var(--s20);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(227,189,128,.10), transparent 62%),
    var(--surface-2);
  border: 1px solid var(--hairline-soft);
}
/* ===================================================== DISENO DE LA TARJETA

   Todo se hace con degradados de CSS, sin una sola imagen. Una textura en
   PNG pesaria mas que toda la app y habria que cargarla antes de pintar;
   asi la tarjeta se dibuja al instante y se ve nitida en cualquier
   pantalla, por fina que sea.

   Las combinaciones son cerradas: cada fondo trae su propio color de texto
   para que el contraste se cumpla siempre, en vez de dejarlo al azar de lo
   que ella escoja.
   ------------------------------------------------------------------------ */

/* --- los tres fondos --- */
.tarjeta[data-fondo="noche"] {
  --tj-papel: #16161a;
  --tj-tinta: #f2f2f4;
  --tj-tenue: #9a9aa2;
  --tj-filo: rgba(255,255,255,.10);
  --tj-velo: rgba(255,255,255,1);
  --tj-sombra: rgba(0,0,0,1);
}
.tarjeta[data-fondo="crema"] {
  --tj-papel: #f3efe7;
  --tj-tinta: #1d1b17;
  --tj-tenue: #6d6862;
  --tj-filo: rgba(0,0,0,.10);
  --tj-velo: rgba(255,255,255,1);
  --tj-sombra: rgba(0,0,0,1);
}
.tarjeta[data-fondo="acento"] {
  --tj-papel: var(--gold-deep);
  --tj-tinta: var(--on-gold);
  --tj-tenue: color-mix(in srgb, var(--on-gold) 62%, transparent);
  --tj-filo: rgba(0,0,0,.14);
  --tj-velo: rgba(255,255,255,1);
  --tj-sombra: rgba(0,0,0,1);
}

/* Color libre: el papel llega como variable en linea desde el editor, y
   con el vienen ya calculados tinta, filo y sombra. Ver colorDeTarjeta(). */
.tarjeta[data-fondo="libre"] { --tj-velo: rgba(255,255,255,1); --tj-sombra: rgba(0,0,0,1); }

.tarjeta[data-fondo] {
  background: var(--tj-papel);
  border-color: var(--tj-filo);
  color: var(--tj-tinta);
}
.tarjeta[data-fondo] .tarjeta__servicio,
.tarjeta[data-fondo] .tarjeta__titular { color: var(--tj-tinta); }
.tarjeta[data-fondo] .tarjeta__progreso,
.tarjeta[data-fondo] .tarjeta__pie { color: var(--tj-tenue); }
.tarjeta[data-fondo] .tarjeta__pie strong { color: var(--tj-tinta); }
/* El nombre del negocio toma la tinta de la tarjeta en todos los fondos
   menos el oscuro de fabrica, donde el dorado se ve bien. Sobre un color
   claro elegido a mano, el dorado desaparecia. */
.tarjeta[data-fondo="crema"] .tarjeta__marca,
.tarjeta[data-fondo="acento"] .tarjeta__marca,
.tarjeta[data-fondo="libre"] .tarjeta__marca { color: var(--tj-tinta); }


/* --- las cuatro texturas, encima del papel --- */
.tarjeta[data-textura]::before {
  content: ""; position: absolute; inset: 0;
  pointer-events: none; opacity: .5;
}
.tarjeta[data-textura="liso"]::before { display: none; }

/* Lino: dos tramas cruzadas muy finas */
.tarjeta[data-textura="lino"]::before {
  background-image:
    repeating-linear-gradient(90deg, var(--tj-filo) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg, var(--tj-filo) 0 1px, transparent 1px 4px);
  opacity: .55;
}
/* Rayas: diagonales anchas, muy suaves */
.tarjeta[data-textura="rayas"]::before {
  background-image:
    repeating-linear-gradient(135deg, var(--tj-filo) 0 1px, transparent 1px 9px);
  opacity: .7;
}
/* Puntos: una retícula discreta */
.tarjeta[data-textura="puntos"]::before {
  background-image: radial-gradient(var(--tj-filo) 1px, transparent 1.2px);
  background-size: 11px 11px;
  opacity: .8;
}

/* --- los tres acabados --- */
.tarjeta[data-acabado]::after {
  content: ""; position: absolute; inset: 0;
  pointer-events: none;
}
.tarjeta[data-acabado="mate"]::after { display: none; }

/* Los tres se distinguian poco. Ahora cada uno imita un material
   distinto de verdad, y no un matiz del mismo.

   BRILLO: plastico laminado. Una franja clara y ancha que barre en
   diagonal desde arriba, mas un realce en el borde superior, como cuando
   la luz pega en una mica. */
.tarjeta[data-acabado="brillo"]::after {
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--tj-velo) 30%, transparent) 0%,
      color-mix(in srgb, var(--tj-velo) 8%, transparent) 26%,
      transparent 46%),
    linear-gradient(0deg,
      color-mix(in srgb, var(--tj-sombra) 16%, transparent) 0%,
      transparent 34%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--tj-velo) 40%, transparent);
}
/* METALICO: lamina cepillada. Muchas bandas finas en diagonal, con dos
   reflejos anchos cruzando. Se nota de lejos que no es liso. */
.tarjeta[data-acabado="metal"]::after {
  background:
    repeating-linear-gradient(112deg,
      color-mix(in srgb, var(--tj-velo) 7%, transparent) 0 2px,
      transparent 2px 6px),
    linear-gradient(112deg,
      transparent 6%,
      color-mix(in srgb, var(--tj-velo) 34%, transparent) 20%,
      transparent 34%,
      color-mix(in srgb, var(--tj-sombra) 18%, transparent) 52%,
      transparent 66%,
      color-mix(in srgb, var(--tj-velo) 24%, transparent) 82%,
      transparent 94%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--tj-velo) 45%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--tj-sombra) 30%, transparent);
}

/* El contenido va encima de textura y acabado */
.tarjeta[data-fondo] > * { position: relative; z-index: 1; }

/* --- las tres formas de los espacios --- */
.tarjeta[data-forma="circulo"] .sello { border-radius: var(--r-pill); }
.tarjeta[data-forma="cuadrado"] .sello { border-radius: 9px; }
/* Se gira con 'rotate' y no con 'transform'. La animacion del sello nuevo
   termina en transform: scale(1) y se queda ahi: si el giro tambien fuera
   un transform, el sello recien puesto perderia el diamante y saldria
   cuadrado. Como propiedades separadas, giro y escala se componen. */
.tarjeta[data-forma="diamante"] .sello {
  border-radius: 5px;
  rotate: 45deg;
}
/* El simbolo se endereza, o quedaria de cabeza dentro del diamante */
.tarjeta[data-forma="diamante"] .sello > * { rotate: -45deg; display: block; }
.tarjeta[data-forma="diamante"] .sellos { gap: var(--s16) var(--s12); }

/* Los sellos toman el color del papel, no el de la app */
.tarjeta[data-fondo] .sello { border-color: var(--tj-filo); color: var(--tj-tenue); }
.tarjeta[data-fondo] .sello--lleno {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
}
.tarjeta[data-fondo="acento"] .sello--lleno {
  background: var(--tj-tinta); border-color: var(--tj-tinta); color: var(--tj-papel);
}
/* Sobre color libre el sello se invierte contra el papel, sea cual sea el
   color. El dorado de fabrica sobre un amarillo elegido a mano se perdia.
   Va DESPUES de la regla general a proposito: las dos pesan igual, asi
   que quien gana es la ultima. */
.tarjeta[data-fondo="libre"] .sello--lleno {
  background: var(--tj-tinta); border-color: var(--tj-tinta); color: var(--tj-papel);
}

/* El nombre de la clienta, abajo, como en una tarjeta de credito */
.tarjeta__titular {
  margin: var(--s16) 0 0;
  text-align: center;
  font-size: var(--t-caption);
  letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  color: var(--tj-tinta);
}

/* --- el recortador del logo --- */
.recorte {
  width: 100%; max-width: 300px; aspect-ratio: 1; margin: 0 auto var(--s16);
  border-radius: var(--r-card); overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  /* Sin esto el navegador se queda con el arrastre y el pellizco, y el
     recortador no recibe nada. */
  touch-action: none;
  cursor: grab;
}
.recorte canvas { display: block; width: 100%; height: 100%; }
.recorte:active { cursor: grabbing; }

/* La guia del circulo, para que vea como va a quedar en la app */
.recorte-caja { position: relative; width: 100%; max-width: 300px; margin: 0 auto var(--s16); }
.recorte-caja .recorte { margin-bottom: 0; }
.recorte-guia {
  position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--r-card);
  box-shadow: inset 0 0 0 2px var(--hairline-soft);
}
.recorte-guia::after {
  content: ""; position: absolute; inset: 12%;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.34);
}

.recorte-zoom { width: 100%; max-width: 300px; margin: 0 auto var(--s20); display: block; }
input[type=range].recorte-zoom {
  appearance: none; -webkit-appearance: none;
  height: 4px; border-radius: var(--r-pill);
  background: var(--surface-3); padding: 0;
  touch-action: none;
}
input[type=range].recorte-zoom::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); border: 0; cursor: pointer;
}
input[type=range].recorte-zoom::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--gold); border: 0; cursor: pointer;
}

/* --- la vista previa dentro del editor --- */
.tarjeta--previa { pointer-events: none; }
.tarjeta--previa .sello { max-width: 42px; }

/* --- las fichas de eleccion --- */
.fichas { display: flex; flex-wrap: wrap; gap: var(--s8); }
.ficha {
  padding: 9px 15px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--hairline);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0;
  transition: background-color .15s var(--ease), color .15s var(--ease);
}
.ficha--puesta {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
}
/* El circulo de la paleta. El input nativo se esconde detras de la
   muestra redonda para que abra la rueda del telefono sin verse como un
   recuadro de formulario. */
.ficha--color {
  position: relative; overflow: hidden;
  width: 46px; height: 46px; padding: 0; border-radius: 50%;
  background:
    conic-gradient(#f06, #f90, #ee0, #3d8, #0cf, #86f, #f06);
  border: 2px solid var(--hairline);
}
.ficha--color.ficha--puesta { border-color: var(--gold); }
.ficha--color input {
  position: absolute; inset: -20%;
  width: 140%; height: 140%;
  opacity: 0; border: 0; padding: 0; cursor: pointer;
}
.ficha--color span {
  position: absolute; inset: 7px; border-radius: 50%;
  border: 2px solid var(--surface-1);
  pointer-events: none;
}

.ficha--sello {
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  font-size: 19px; border-radius: 13px;
}

/* --- la palanca de si o no --- */
.campo--fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s16);
}
.palanca {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 50px; height: 30px; border-radius: var(--r-pill);
  background: var(--surface-3); border: 1px solid var(--hairline);
  position: relative; cursor: pointer;
  transition: background-color .2s var(--ease);
}
.palanca::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--text-2);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.palanca:checked { background: var(--gold); border-color: var(--gold); }
.palanca:checked::after { transform: translateX(20px); background: var(--on-gold); }
.palanca:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.tarjeta__marca {
  font-family: var(--serif);
  font-size: var(--t-caption); letter-spacing: .20em; text-transform: uppercase;
  color: var(--gold); text-align: center;
}
.tarjeta__servicio {
  margin-top: var(--s4); text-align: center;
  font-size: var(--t-subheading); font-weight: 600; letter-spacing: var(--tr-subheading);
}
.tarjeta__progreso { margin-top: 2px; text-align: center; font-size: var(--t-caption); color: var(--text-2); }

.sellos {
  margin: var(--s20) 0 var(--s16);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s12) var(--s8);
  justify-items: center;
}
.sellos--densa { grid-template-columns: repeat(6, 1fr); }

.sello {
  position: relative; width: 100%; aspect-ratio: 1; max-width: 52px;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  border: 1px solid var(--hairline);
  color: var(--text-3);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0;
  transition: transform .2s var(--ease);
}
.sello--premio { border-color: var(--gold-deep); color: var(--gold); border-style: dashed; }
.sello--lleno {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
  border-style: solid;
}
.sello--lleno.sello--premio { background: var(--gold-bright); }
.sello--siguiente { border-color: var(--text-2); color: var(--text-2); }
.sello__glifo { font-size: 20px; line-height: 1; }
.sello--nuevo { animation: sella .45s var(--ease) both; }
@keyframes sella {
  0%   { transform: scale(.4); opacity: 0; }
  60%  { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); }
}

.tarjeta__pie {
  padding-top: var(--s16); border-top: 1px solid var(--hairline-soft);
  text-align: center; font-size: var(--t-caption); color: var(--text-2);
}
.tarjeta__pie strong { color: var(--gold); font-weight: 600; }

/* --------------------------------------------------------------- avisos --- */
.aviso {
  display: flex; gap: var(--s12); align-items: flex-start;
  padding: var(--s16); border-radius: var(--r-tile);
  background: var(--surface-2); font-size: var(--t-caption); color: var(--text-2);
}
.aviso svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.aviso--oro { background: rgba(227,189,128,.12); color: var(--gold-bright); }
.aviso--oro svg { color: var(--gold); }
.aviso--alerta { background: rgba(224,133,133,.12); color: #f0b4b4; }
.aviso--alerta svg { color: var(--alert); }
.aviso strong { color: var(--text); font-weight: 600; }
.aviso--oro strong { color: var(--gold-bright); }

/* ------------------------------------------------------------ dashboard --- */
/* PROFUNDIDAD SIN SOMBRAS.
   Lo que hace que algo se vea plano no es la falta de sombra, es la falta
   de luz. Aquí la luz viene de arriba, como en un cuarto real, y se arma
   con tres capas que no rompen el minimalismo:
     1. un filo blanco de 1px en el borde superior (el reflejo especular)
     2. un degradado interno que aclara la parte de arriba de la tarjeta
     3. un borde que se apaga hacia abajo, en vez de ser parejo
   Cero box-shadow hacia afuera: eso es lo que se ve barato. */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s8); }

.kpi {
  position: relative;
  border-radius: var(--r-tile);
  padding: var(--s16);
  background:
    linear-gradient(180deg, var(--lustre), rgba(255,255,255,.014) 38%, rgba(255,255,255,0) 72%),
    var(--surface-1);
  border: 1px solid rgba(255,255,255,.06);
  border-top-color: var(--filo);
  box-shadow: inset 0 1px 0 var(--filo);
}

/* La tarjeta grande es la protagonista: más luz y un halo del color
   del negocio, apenas perceptible, cayendo desde arriba. */
.kpi--ancho {
  grid-column: 1 / -1;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.022) 40%, rgba(255,255,255,0) 78%),
    var(--surface-2);
  border-top-color: var(--filo-fuerte);
  box-shadow: inset 0 1px 0 var(--filo-fuerte);
}
.kpi--ancho::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(130% 80% at 50% -28%,
              rgba(var(--gold-rgb), var(--halo)), rgba(var(--gold-rgb), 0) 62%);
  pointer-events: none;
}
.kpi--ancho > * { position: relative; z-index: 1; }
.kpi__label { font-size: var(--t-micro); text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); font-weight: 600; }
.kpi__valor { margin-top: var(--s8); font-size: var(--t-heading); line-height: 1.05; letter-spacing: var(--tr-heading); font-weight: 600; font-variant-numeric: tabular-nums; }
.kpi--ancho .kpi__valor { font-size: var(--t-display); }
.kpi__nota { margin-top: var(--s4); font-size: var(--t-caption); color: var(--text-2); }
.kpi__nota--sube { color: var(--good); }
.kpi__nota--baja { color: var(--alert); }

.barras { display: flex; flex-direction: column; gap: var(--s12); }
.barra__fila { display: flex; align-items: center; gap: var(--s12); }
.barra__nombre { flex: none; width: 92px; font-size: var(--t-caption); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__pista { flex: 1; height: 10px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; }
.barra__valor { height: 100%; border-radius: var(--r-pill); background: var(--gold); }
.barra__cifra { flex: none; width: 46px; text-align: right; font-size: var(--t-caption); font-variant-numeric: tabular-nums; color: var(--text); }

/* --- ingresos por mes --- */

/* El mes que toque se lee completo aqui arriba. Las barras abreviadan
   ($7.9k) porque con seis meses en un telefono la cifra entera no cabe;
   esta linea es la que dice el numero de verdad. */
.serie__cabeza {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s12); margin-bottom: var(--s16);
}
.serie__mes-nombre {
  font-size: var(--t-caption); color: var(--text-2);
  text-transform: capitalize;
}
/* El capitalize es para el nombre del mes. La nota que lo acompana es una
   frase, no un titulo: sin esto salia "Va A La Mitad". */
.serie__mes-nombre .dimmer { text-transform: none; }
.serie__total {
  font-size: var(--t-subheading); font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

.serie { display: flex; align-items: flex-end; gap: var(--s8); height: 168px; }

.serie__col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  gap: var(--s8); height: 100%;
  padding: 0; border: 0; background: none; font: inherit; color: inherit;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.serie__col:active { opacity: .6; }

/* La cifra de cada barra. Va tenue y se enciende en la escogida: seis
   cifras al mismo brillo compiten entre ellas y no se lee ninguna. */
.serie__cifra {
  font-size: 10px; font-weight: 600; text-align: center;
  color: var(--text-3); font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.serie__col--activa .serie__cifra { color: var(--text-1); }

.serie__barra {
  display: block; width: 100%;
  border-radius: 8px 8px 4px 4px;
  background: var(--surface-3);
  min-height: 3px;
  transition: background-color .16s ease;
}
.serie__col--activa .serie__barra { background: var(--gold); }

/* El mes en curso va rayado: su barra no mide lo mismo que las demas
   —le faltan dias por vivir— y el rayado lo dice sin un solo texto. */
.serie__col--curso .serie__barra {
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 3px, rgba(0, 0, 0, .28) 3px 6px);
}

.serie__etiqueta {
  text-align: center; font-size: 10px; color: var(--text-3);
  font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.serie__col--activa .serie__etiqueta { color: var(--text-2); }

/* --- escoger la moneda, en el primer arranque --- */
.arranque {
  position: relative;
  display: flex; flex-direction: column;
  gap: var(--s24); padding-top: var(--s40);
}
.arranque__cabeza { text-align: center; display: grid; justify-items: center; }

.monedas { display: grid; gap: var(--s8); }
.moneda {
  display: flex; align-items: center; gap: var(--s16);
  width: 100%; text-align: left;
  padding: var(--s12) var(--s16);
  border-radius: var(--r-tile);
  background: var(--surface-1);
  border: 1px solid rgba(255,255,255,.06);
  border-top-color: var(--filo);
  font: inherit; color: inherit;
  -webkit-appearance: none; appearance: none; cursor: pointer;
}
.moneda:active { transform: scale(.99); }
.moneda__signo {
  flex: 0 0 auto; min-width: 34px;
  font-size: var(--t-subheading); font-weight: 600;
  color: var(--gold); text-align: center;
}
.moneda__cuerpo { flex: 1; min-width: 0; display: grid; gap: 2px; }

/* La tarjeta del modo no lleva signo a la izquierda: el texto arranca
   pegado al borde, como cualquier opcion de una lista. */
.moneda--modo { padding: var(--s16); }
.moneda--modo .caption { white-space: normal; line-height: 1.45; }
.moneda .chevron { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-3); }

.ranking .avatar { font-size: var(--t-caption); }

/* --------------------------------------------------------------- varios --- */
.vacio { text-align: center; padding: var(--s48) var(--s24); }
.vacio__icono { width: 52px; height: 52px; margin: 0 auto var(--s16); color: var(--text-3); }
.vacio__icono svg { width: 100%; height: 100%; }

.buscador { position: relative; margin-bottom: var(--s16); }
.buscador .input { padding-left: var(--s48); border-radius: var(--r-pill); }
.buscador svg { position: absolute; left: var(--s16); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-3); pointer-events: none; }

.pastilla {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px var(--s12); border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text-2);
  font-size: var(--t-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.pastilla--oro { background: rgba(227,189,128,.16); color: var(--gold); }
.pastilla--alerta { background: rgba(224,133,133,.16); color: #f0b4b4; }
.pastilla--media { background: rgba(224,164,88,.16); color: #edc089; }

/* Ticket: monoespaciada, porque las columnas tienen que cuadrar igual
   aquí que en el mensaje de WhatsApp. */
.ticket-vista {
  margin: 0; padding: var(--s16);
  background: var(--surface-2); border-radius: var(--r-field);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.55; letter-spacing: 0;
  color: var(--text); white-space: pre; overflow-x: auto;
}

.seccion { margin-top: var(--s32); }
.seccion__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s12); margin-bottom: var(--s12); }

.divisor { height: 1px; background: var(--hairline-soft); margin: var(--s24) 0; border: 0; }

.fila-botones { display: flex; gap: var(--s8); flex-wrap: wrap; }
/* Los botones se reparten el ancho en vez de amontonarse a la izquierda. */
.fila-botones--anchos { flex-wrap: nowrap; }
.fila-botones--anchos > .btn { flex: 1; min-width: 0; padding: 0 var(--s16); }

/* --------------------------------------------------------------- puerta --- */
/* El cartel de instalacion. Ocupa la pantalla entera a proposito: el aviso
   chiquito de antes se cerraba sin leer. */
.puerta {
  position: fixed; inset: 0; z-index: 90;
  background: var(--canvas);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s24) var(--gutter);
  overflow-y: auto;

  /* EL PIE EN OSCURO, PARA LA BARRA DE SAFARI

     Safari en iPhone tinta su barra de abajo con lo que ve al pie de la
     pagina, y ahi caia el boton dorado de instalar: la barra salia
     amarilla. Este hueco oscuro al final le da negro que muestrear.
     `theme-color` no sirve para esto: ese manda sobre la barra de ARRIBA. */
  padding-bottom: calc(var(--s40) + env(safe-area-inset-bottom, 0px));

  /* SIN FUNDIDO, A PROPOSITO

     Este cartel es lo primero que aparece al abrir. Fundiendose desde
     transparente dejaba ver el teclado de la clave durante un cuarto de
     segundo: se sentia como un rebote o un destello al entrar. Apareciendo
     opaco de golpe no hay ventana por la que asomarse. */
}
.puerta__hoja {
  width: 100%; max-width: 420px;
  margin: auto;
  text-align: center;
}
.puerta__logo { width: 62px; height: auto; display: block; margin: 0 auto var(--s24); }

.puerta__titulo {
  font-size: var(--t-heading); line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading); font-weight: 600;
  text-wrap: balance;
}
.puerta__texto {
  margin: var(--s12) auto var(--s28);
  max-width: 340px;
  font-size: var(--t-caption); line-height: 1.5; color: var(--text-2);
}
.puerta__texto strong { color: var(--gold-bright); font-weight: 600; }

.puerta__donde {
  font-size: var(--t-micro); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: var(--s12);
}

/* Los iconos dentro de las instrucciones. Van alineados con el texto y
   del mismo color, para que se lean como parte de la frase y no como
   adornos sueltos. */
.puerta__icono {
  width: 1.15em; height: 1.15em;
  vertical-align: -.22em;
  margin: 0 .12em;
  display: inline-block;
}

.puerta__pasos {
  text-align: left;
  display: flex; flex-direction: column; gap: var(--s4);
  margin-bottom: var(--s28);
}
.puerta__paso {
  display: flex; align-items: flex-start; gap: var(--s16);
  padding: var(--s16);
  border-radius: var(--r-tile);
  background:
    linear-gradient(180deg, var(--lustre), rgba(255,255,255,0) 70%),
    var(--surface-1);
  border: 1px solid rgba(255,255,255,.055);
  border-top-color: var(--filo);
}
.puerta__num {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--gold); color: var(--on-gold);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0;
}
.puerta__paso .title { font-weight: 500; }
.puerta__paso .title strong { font-weight: 600; color: var(--gold-bright); }
.puerta__paso .caption { margin-top: 2px; }

/* "Ahora no" va discreto a proposito: no es la salida que queremos. */
.puerta__despues {
  display: block; margin: var(--s20) auto 0;
  padding: var(--s8) var(--s16);
  font-size: var(--t-caption); color: var(--text-3);
}

/* ------------------------------------------------------------- plegable --- */
.plegable {
  margin-bottom: var(--s16);
  border-radius: var(--r-tile);
  background:
    linear-gradient(180deg, var(--lustre), rgba(255,255,255,0) 70%),
    var(--surface-1);
  border: 1px solid rgba(255,255,255,.055);
  border-top-color: var(--filo);
  padding: var(--s16);
}
.plegable__cabeza {
  display: flex; align-items: baseline; gap: var(--s12);
  cursor: pointer; list-style: none;
}
/* Safari pinta su propio triangulo si no se le quita. */
.plegable__cabeza::-webkit-details-marker { display: none; }
.plegable__cabeza .caption { flex: 1; }
.plegable__flecha {
  flex: none; width: 18px; height: 18px; color: var(--text-3);
  transition: transform .2s var(--ease);
}
.plegable__flecha svg { width: 100%; height: 100%; }
.plegable[open] .plegable__flecha { transform: rotate(90deg); }

/* ---------------------------------------------------------------- atajo --- */
.atajo {
  display: flex; align-items: center; gap: var(--s16);
  width: 100%; text-align: left;
  padding: var(--s16) var(--s20);
  border-radius: var(--r-tile);
  background:
    linear-gradient(180deg, var(--lustre), rgba(255,255,255,0) 70%),
    var(--surface-1);
  border: 1px solid rgba(255,255,255,.055);
  border-top-color: var(--filo);
  border-left: 3px solid var(--gold);
  transition: background-color .2s var(--ease);
}
.atajo:active { background: var(--surface-2); }
.atajo__icono {
  flex: none; width: 42px; height: 42px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: rgba(var(--gold-rgb), .14); color: var(--gold);
}
.atajo__icono svg { width: 22px; height: 22px; }
.atajo__cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* --------------------------------------------------------------- agenda --- */
.tira-dias {
  display: flex; gap: var(--s8);
  margin-bottom: var(--s20);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s4);
  -ms-overflow-style: none; scrollbar-width: none;
}
.tira-dias::-webkit-scrollbar { display: none; }

.dia {
  flex: none; scroll-snap-align: start;
  width: 54px; padding: var(--s12) 0 var(--s8);
  border-radius: var(--r-tile);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background:
    linear-gradient(180deg, var(--lustre), rgba(255,255,255,0) 70%),
    var(--surface-1);
  border: 1px solid rgba(255,255,255,.055);
  border-top-color: var(--filo);
  transition: background-color .2s var(--ease);
}
.dia em {
  font-style: normal; font-size: var(--t-micro); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-3);
}
.dia strong {
  font-size: var(--t-subheading); font-weight: 600; letter-spacing: -.01em;
  color: var(--text); font-variant-numeric: tabular-nums;
}
/* El puntito dice si ese día tiene algo, sin tener que abrirlo. */
.dia i { width: 5px; height: 5px; border-radius: var(--r-pill); background: var(--gold); }
.dia i.vacia { background: transparent; }
.dia--hoy em { color: var(--gold); }
.dia--puesto { background: var(--gold); border-color: var(--gold); }
.dia--puesto em, .dia--puesto strong { color: var(--on-gold); }
.dia--puesto i { background: rgba(0,0,0,.35); }
.dia--puesto i.vacia { background: transparent; }

.citas { display: flex; flex-direction: column; gap: var(--s8); }

.cita {
  display: flex; align-items: flex-start; gap: var(--s16);
  padding: var(--s16);
  border-radius: var(--r-tile);
  background:
    linear-gradient(180deg, var(--lustre), rgba(255,255,255,0) 70%),
    var(--surface-1);
  border: 1px solid rgba(255,255,255,.055);
  border-top-color: var(--filo);
  border-left: 3px solid var(--gold);
}
.cita__hora {
  flex: none; width: 64px;
  display: flex; flex-direction: column; gap: 2px;
}
.cita__hora strong {
  font-size: var(--t-title); font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.cita__hora em {
  font-style: normal; font-size: var(--t-micro); color: var(--text-3);
  font-weight: 600; letter-spacing: .03em;
}
.cita__cuerpo { flex: 1; min-width: 0; }
.cita__acciones { flex: none; display: flex; flex-direction: column; gap: var(--s8); }

.cita--atendida { border-left-color: var(--good); opacity: .72; }
.cita--cancelada { border-left-color: var(--text-3); opacity: .5; }
.cita--cancelada .cita__cuerpo .title { text-decoration: line-through; }
.cita--choque { border-left-color: var(--alert); }

/* ---------------------------------------------------- marca del negocio --- */
.marca-logo { flex: none; border-radius: var(--r-tile); }
/* Solo la imagen se vuelve bloque: si esto le pega al avatar de iniciales,
   le mata el grid y las letras se van a la esquina. */
img.marca-logo { display: block; object-fit: cover; background: var(--surface-2); }
.cabecera__marca { flex: none; }

.logo-fila { display: flex; align-items: center; gap: var(--s16); }

/* Los seis acentos curados. No hay selector libre a proposito. */
.acentos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s8); }
.acento {
  display: flex; flex-direction: column; align-items: center; gap: var(--s8);
  padding: var(--s12) var(--s4);
  border-radius: var(--r-tile); background: var(--surface-2);
  transition: background-color .2s var(--ease);
}
.acento span {
  width: 34px; height: 34px; border-radius: var(--r-pill);
  background: var(--muestra);
  box-sizing: border-box; border: 2px solid transparent;
  transition: box-shadow .2s var(--ease);
}
.acento em {
  font-style: normal; font-size: var(--t-micro); font-weight: 600;
  letter-spacing: .01em; color: var(--text-3); text-align: center;
}
.acento--puesto { background: var(--surface-3); }
.acento--puesto span { box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--muestra); }
.acento--puesto em { color: var(--text); }

/* --------------------------------------------------------------- modal --- */
.modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: fundido .2s var(--ease) both;
}
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
.modal__panel {
  width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto;
  background: var(--surface-1);
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding: var(--s16) var(--gutter) calc(var(--s24) + env(safe-area-inset-bottom));
  animation: sube .3s var(--ease) both;
}
@keyframes sube { from { transform: translateY(100%); } to { transform: none; } }
.modal__agarre { width: 36px; height: 5px; border-radius: var(--r-pill); background: var(--surface-3); margin: 0 auto var(--s20); }

/* --- en que se te fue el dinero --- */
.lista-plana { display: grid; }
.fila-dato {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s16); padding: var(--s12) 0;
  border-top: 1px solid var(--hairline-soft);
  font-size: var(--t-body);
}
.fila-dato:first-child { border-top: none; }
.fila-dato b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* El gasto se marca distinto de lo que entra: es la unica tarjeta del
   tablero que resta, y confundirla con las demas seria leer al reves. */
.kpi--gasto .kpi__valor { color: var(--alert); }

/* --- las tarjetas que se abren --- */

/* El label y la cifra ahora pueden ser <span> dentro de un <button>, y un
   span en linea ignora el margin de arriba. Se declaran bloque aqui para
   que la tarjeta se vea igual sea div o boton. */
.kpi__label, .kpi__valor, .kpi__nota { display: block; }

button.kpi {
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: var(--s32);
  transition: transform .12s ease, background-color .12s ease;
}
button.kpi:active { transform: scale(.98); }

/* La flechita es lo unico que avisa que hay mas adentro. Va tenue: no
   compite con la cifra, que es lo que ella viene a leer. */
.kpi__abre {
  position: absolute;
  top: var(--s16); right: var(--s12);
  width: 15px; height: 15px;
  color: var(--text-3);
  opacity: .65;
}
.kpi__abre svg { display: block; width: 100%; height: 100%; }

/* --- los renglones del detalle --- */
.fila-dato__cuerpo {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0; flex: 1;
}
.fila-dato__titulo {
  font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El bote solo aparece en lo que ella registro a mano. Lo que viene de una
   visita no se borra desde aqui: se cambia en la clienta, porque quitarlo
   por este lado le quitaria un sello de la tarjeta sin avisarle. */
.fila-dato__borra {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 32px; height: 32px; margin: -6px -6px -6px 0;
  padding: 0; border: 0; background: none;
  color: var(--text-3); cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.fila-dato__borra svg { width: 17px; height: 17px; display: block; }
.fila-dato__borra:active { color: var(--alert); }



/* --------------------------------------------------------------- toast --- */
.toast {
  position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--s16));
  transform: translateX(-50%); z-index: 80;
  max-width: calc(100vw - 2 * var(--gutter));
  padding: var(--s12) var(--s20); border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--text);
  font-size: var(--t-caption); font-weight: 600; letter-spacing: 0;
  text-align: center;
  animation: toast-in .3s var(--ease) both;
}
.toast--oro { background: var(--gold); color: var(--on-gold); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* --------------------------------------------------------------- clave --- */
.clave-pantalla {
  /* En esta pantalla no hay nada que acercar: son cuatro puntos y un
     teclado. El doble toque solo daba brincos. El zoom de dos dedos
     sigue funcionando. */
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  /* svh y no dvh: dvh es el alto DINAMICO, el que cambia mientras Safari
     encoge su barra de direcciones. Como esta pantalla centra su
     contenido, ese cambio movia el teclado y el logo en cada animacion de
     la barra —el rebote al abrir—. svh es el alto mas chico, con la barra
     a la vista: el contenido siempre cabe y nunca se mueve. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s32);
  padding: var(--s32) var(--gutter);
  text-align: center;
}
/* El campo de la llave. Monoespaciado y separado para que se vea letra
   por letra: la esta copiando a mano de un correo. */
.licencia-campo {
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 19px; letter-spacing: .08em;
  text-transform: uppercase;
  padding: var(--s16);
}
.licencia-campo::placeholder { letter-spacing: .08em; text-transform: none; }

.clave-marca { font-family: var(--serif); font-size: var(--t-caption); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
/* La marca de HelloSophia, antes de entrar. Va en blanco a proposito:
   no toma el acento del negocio porque no es del negocio. */
.clave-logo { width: 78px; height: auto; display: block; margin: 0 auto; }
.clave-puntos { display: flex; gap: var(--s16); }
.clave-punto {
  width: 14px; height: 14px; border-radius: var(--r-pill);
  border: 1px solid var(--text-3); transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.clave-punto--lleno { background: var(--gold); border-color: var(--gold); }
.clave-teclado { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s16); width: 100%; max-width: 288px; }
.tecla {
  aspect-ratio: 1; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--text);
  font-size: var(--t-heading); font-weight: 400; letter-spacing: 0;
  display: grid; place-items: center;
  transition: background-color .12s var(--ease), transform .12s var(--ease);
}
.tecla:active { background: var(--surface-3); transform: scale(.94); }
.tecla--vacia { background: none; pointer-events: none; }
.tecla--accion { background: none; font-size: var(--t-body); color: var(--gold); }
.sacude { animation: sacude .4s var(--ease) both; }
@keyframes sacude {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .pantalla { max-width: 640px; margin: 0 auto; width: 100%; }
  .nav { max-width: 640px; left: 50%; transform: translateX(-50%); }
  .acciones-fijas { max-width: 640px; left: 50%; transform: translateX(-50%); }
}

/* ------------------------------------------------- el fondo del seteo */

/* Detrás de la clave y de las preguntas del arranque. El velo es casi
   opaco a propósito: el video es ambiente, no protagonista — lo que
   tiene que leerse sin esfuerzo es el teclado de la clave. */
/* El poster hace el trabajo si el video no arranca —ahorro de batería en
   iPhone, conexión lenta, autoplay bloqueado—. Así nunca se ve el negro
   pelón: se ve la imagen quieta, y el video entra encima cuando puede. */
/* EL ALTO QUE NO REBOTA EN IPHONE

   Safari encoge y expande su barra de direcciones al desplazarse, y eso
   cambia el alto del viewport. Con `height: 100%` la capa se
   redimensionaba en cada cambio: se veia como un rebote, y en el momento
   en que no alcanzaba a cubrir se asomaba una franja de video SIN el velo
   encima —una barra clara en el borde—.

   `lvh` es el alto mas grande que puede tener el viewport, con la barra
   escondida. Fijandolo ahi, la capa nunca se queda corta ni cambia de
   tamanio. Los dos `height` de antes son el respaldo para navegadores
   que no conocen la unidad. */
/* La imagen y el video comparten geometria exacta. Si uno cubriera mas
   que el otro, por la diferencia se asomaria algo sin velo encima. */
#imagen-seteo, #fondo-seteo, #velo-seteo {
  position: fixed; top: 0; left: 0;
  width: 100vw;
  height: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;

  /* Nacen transparentes, no escondidas: display:none mata el autoplay.
     La clase del body las enciende. */
  opacity: 0;
  /* Sin transicion en el video: cualquier opacidad intermedia deja ver lo
     que haya debajo y eso es lo que se veia como imagen doble. O esta, o
     no esta. */
  transition: opacity .5s ease-out;
}
/* UNA SOLA CAPA PINTANDO, NUNCA DOS

   Aqui hubo una foto debajo del video para tapar el arranque del
   decodificador. El remedio salio peor: durante el fundido se veian LAS
   DOS -la foto en el cuadro cero, el video en otro cuadro- superpuestas a
   media opacidad. Eso era el efecto de imagen doble.

   Ahora la foto y el video se excluyen: o esta uno, o esta el otro, nunca
   los dos a la vez. El video manda; la foto solo aparece si el video se
   rindio.

   Mientras el decodificador arranca -menos de medio segundo- el elemento
   queda transparente y se ve el negro de la app, que es exactamente donde
   la pantalla ya estaba. No hay destello porque no hay nada que soltar. */
body.fondo-on #velo-seteo { opacity: 1; }

body.fondo-on #fondo-seteo { opacity: 1; transition: none; }
body.fondo-on.sin-video #fondo-seteo { opacity: 0; }
body.fondo-on.sin-video #imagen-seteo { opacity: 1; }

/* Terminado el seteo ya se pueden apagar de verdad: aqui no importa que
   el video no pueda volver a arrancar, porque no se vuelve a usar. */
body.fondo-off #imagen-seteo,
body.fondo-off #fondo-seteo,
body.fondo-off #velo-seteo { display: none; }

#imagen-seteo {
  z-index: 0;
  background: #08080a center/cover no-repeat url("vendor/fondo.jpg");
}

#fondo-seteo {
  object-fit: cover;
  background: transparent;
  z-index: 1;
}

/* El velo copia la geometria del video al pie de la letra: si uno cubre
   mas que el otro, por la diferencia se asoma la imagen sin oscurecer. */
#velo-seteo {
  z-index: 2;
  /* Pesaba tanto que en un teléfono se leía como negro y el video no se
     notaba. Al centro deja pasar bastante; oscurece de verdad solo en los
     bordes y en la franja donde cae el teclado. */
  background:
    linear-gradient(to bottom, rgba(0,0,0,.64) 0%, rgba(0,0,0,.60) 32%, rgba(0,0,0,.78) 70%, rgba(0,0,0,.86) 100%),
    radial-gradient(130% 75% at 50% 28%, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 62%, rgba(0,0,0,.46) 100%);
}

/* Las pantallas del arranque suben por encima del velo y se quedan
   transparentes, para que el video se vea a través de ellas. */
body.fondo-on .clave-pantalla,
body.fondo-on .pantalla--sin-nav {
  position: relative; z-index: 3; background: transparent;
}

/* Quien pidió menos movimiento lo recibe quieto, no roto. */
/* Quien pidio menos movimiento recibe la foto quieta, no el negro. */
@media (prefers-reduced-motion: reduce) {
  #fondo-seteo { display: none; }
}

/* La advertencia de la puerta: se lee distinto del resto porque dice la
   única cosa que le puede costar su trabajo. */
.puerta__texto--ojo {
  border-left: 3px solid var(--oro, #e3bd80);
  padding-left: 12px;
  text-align: left;
}

/* La flecha para corregir la profesión. Arriba a la izquierda, discreta:
   es una salida, no una invitación. */
.arranque__volver {
  /* En el flujo y no encima: posicionada en absoluto se montaba sobre el
     logo, y la cabecera va centrada, asi que no hay hueco seguro. */
  align-self: flex-start;
  margin-top: calc(var(--s24) * -1);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px 8px 6px;
  border-radius: var(--r-pill);
  background: transparent; border: 0;
  color: var(--text-2); font-size: var(--t-caption); font-weight: 600;
  cursor: pointer;
}
.arranque__volver:hover { color: var(--text-1); }
.arranque__volver svg { width: 18px; height: 18px; }

/* EL TEXTO SOBRE EL VIDEO

   Al aclarar el velo para que se viera el fondo, el texto gris se perdia
   sobre las zonas claras de la imagen. Aqui se aclara y se le pone una
   sombra: asi se lee sobre lo que sea, sin tener que volver a oscurecer
   todo el fondo. Solo aplica mientras el fondo esta prendido. */
body.fondo-on .clave-pantalla,
body.fondo-on .arranque {
  text-shadow: 0 1px 14px rgba(0,0,0,.85), 0 1px 3px rgba(0,0,0,.7);
}
body.fondo-on .clave-pantalla .caption,
body.fondo-on .arranque .caption,
body.fondo-on .arranque .moneda__cuerpo .caption {
  color: rgba(255,255,255,.82);
}

/* Lo que se puede tocar en la cabecera del tablero. Sin aspecto de boton:
   se descubre al tocarlo, no compite con el contenido. */
.cabecera__editable {
  background: none; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; letter-spacing: inherit;
  text-align: left; cursor: pointer;
}
.cabecera__editable:active { opacity: .6; }

/* La barra de semana de la agenda. Las flechas son grandes a proposito:
   se tocan con el pulgar mientras sostiene el telefono con una mano. */
.semana {
  display: flex; align-items: center; gap: var(--s8);
  margin-bottom: var(--s12);
}
.semana__rango {
  flex: 1; text-align: center;
  font-size: var(--t-caption); font-weight: 600; color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.semana__flecha {
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: var(--r-pill);
  background: var(--surface-2); border: 1px solid var(--hairline);
  color: var(--text-2); cursor: pointer;
}
.semana__flecha:active { background: var(--surface-3, var(--surface-2)); }
.semana__flecha svg { width: 18px; height: 18px; }
.semana__flecha[data-d="-7"] svg { transform: none; }
.semana__hoy {
  flex: none; padding: 8px 14px;
  border-radius: var(--r-pill);
  background: var(--oro-piso, var(--surface-2)); border: 1px solid var(--oro, var(--hairline));
  color: var(--oro, var(--text-1));
  font-size: var(--t-caption); font-weight: 700; cursor: pointer;
}

/* El boton destructivo cuando SI tiene que verse como boton.

   `.btn--peligro` a secas es transparente a proposito: sirve para el
   "Borrar cliente" del pie de una ficha, donde conviene que no invite.
   Pero en una ventana que pregunta cual de dos caminos tomar, los dos
   tienen que leerse como opciones. Si uno parece texto suelto, se toca el
   otro por descarte y no por decision. */
.btn--peligro-lleno {
  background: rgba(224, 133, 133, .14);
  border: 1px solid rgba(224, 133, 133, .45);
  color: var(--alert);
}
.btn--peligro-lleno:active { background: rgba(224, 133, 133, .24); }

/* Los chips de Ajustes, centrados.

   `.fichas` reparte desde la izquierda, asi que una fila con siete
   profesiones de ancho distinto terminaba cargada a un lado y con un
   hueco grande a la derecha. Centrados, las filas quedan equilibradas
   entre si sin importar cuantos entren en cada una. */
.seccion .fichas { justify-content: center; }
.seccion .campo .fichas { justify-content: center; }