@import url("hoja.c03bc928b6cc.css?v=20261018");
/* =============================================================
   LAS PÁGINAS PASO A PASO — UNA PREGUNTA POR PANTALLA, SIN BAJAR.

   Punto 18 de Rubén (2026-09-29): «en vez de un pop-up se crea una página nueva
   que ocupa toda la pantalla y que solo te pregunta una cosa», con tres toques y
   sin bajar, en el móvil y en el escritorio. Las plantillas de la carpeta
   `formular-typeform/formularios-ejemplos-bien` (cobro 1-5, cobros 6-7,
   pacientes 3, 8 y 9) dan la forma: la flecha y la equis en círculos blancos, los
   puntos del avance arriba, un titular grande, lo que se elige en tarjetas
   blancas que flotan, y abajo la tarjeta con lo que importa y el botón azul.

   Lo usan todas: nueva cita, nuevo cliente, nuevo caso/tratamiento, la venta, y
   en RRHH el turno, el empleado y el comunicado. Prefijo `fl-`. Los colores salen
   de `paleta.css`: aquí no hay ni un hex.

   LA ALTURA SE CALCULA, NO SE DEJA CRECER. La página mide exactamente lo que queda
   entre la cabecera del móvil (54 px + 1 de borde + zona segura) y la barra de
   abajo (78 px + zona segura), y en el escritorio el alto de la ventana con el
   zoom de 0,75 compensado. Lo único que se desplaza es la lista del paso (su
   `.fl-cuerpo`), nunca la página: es lo que pidió («sin scrolear hacia abajo»).
   ============================================================= */

.fl {
  --fl-cab: calc(55px + env(safe-area-inset-top));
  --fl-barra: calc(78px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; box-sizing: border-box;
  color: var(--c-text); font-family: 'Manrope', system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}
.fl *, .fl *::before, .fl *::after { box-sizing: border-box; }
.fl [hidden] { display: none !important; }

/* El contenedor del shell no pone su marco: la página es la pantalla entera. */
html body:has(.fl) .ai-content.ai-content:has(> .fl),
html body:has(.fl) .mg-content.mg-content:has(> .fl) {
  padding: 0 !important; min-height: 0 !important;
}
html body:has(.fl) { padding-bottom: 0 !important; }
.ai-panel:empty { display: none; }

@media (max-width: 1023px) {
  .fl { height: calc(100dvh - var(--fl-cab) - var(--fl-barra)); }
  /* Sin la barra de abajo (RRHH del empleado u otras pieles), hasta el fondo. */
  body.fl-sin-barra .fl { height: calc(100dvh - var(--fl-cab)); }
  /* NINGUNA PALABRA SUELTA (Rubén, 2026-10-12: «todo encuadrado en un card, no colgando»):
     la pregunta, sus opciones y el botón van en la ficha blanca, como en el escritorio. */
  .fl { padding: 10px 10px 8px; }
  .fl-col {
    padding: 14px 16px 12px; border-radius: 26px;
    background: var(--c-surface); border: 1px solid var(--c-border); box-shadow: var(--sombra-card);
  }
}
@media (min-width: 1024px) {
  /* El zoom de 0,75 del escritorio encoge también los `dvh`: se compensa. */
  .fl { height: calc(100dvh / 0.75); }
  .mg-shell .fl { height: calc(100dvh / 0.75); }
}

.fl-col {
  flex: 1 1 auto; min-height: 0; width: 100%; max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; padding: 14px 20px 12px;
}
/* EL ESCRITORIO: LA PREGUNTA EN UN PANEL, NO UNA COLUMNA PERDIDA (Rubén, 2026-09-30:
   «una página rota, toda con el mismo fondo, y cuatro cosas que no me apetece
   pulsar»). La columna era 700 px de tarjetas sobre el mismo gris que toda la
   pantalla: no se veía dónde empezaba ni dónde acababa. Ahora el fondo lleva los
   tonos de la marca y la pregunta, sus opciones y el botón van en UN panel grande
   con su borde y su sombra; las tarjetas blancas siguen resaltando dentro. */
@media (min-width: 1024px) {
  .fl {
    padding: 34px 28px;
    background:
      radial-gradient(1100px 560px at 8% -12%, color-mix(in srgb, var(--c-azul) 16%, transparent), transparent 62%),
      radial-gradient(900px 520px at 104% 108%, color-mix(in srgb, var(--c-menta) 18%, transparent), transparent 60%),
      radial-gradient(700px 420px at 100% -8%, color-mix(in srgb, var(--c-rose) 9%, transparent), transparent 60%),
      var(--c-bg);
  }
  .fl-col {
    max-width: 880px; padding: 34px 46px 30px; border-radius: 34px;
    background: var(--c-surface);   /* la hoja, blanca: es la ficha (Rubén, 2026-10-12: «los colores están invertidos») */
    border: 1px solid var(--c-border);
    box-shadow: 0 40px 100px rgba(31, 39, 51, .13), 0 2px 8px rgba(31, 39, 51, .05);
  }
  .fl-h1 { font-size: var(--t1, 28px); }
  /* Lo que se elige, grande: en el panel caben tres o cuatro por fila. */
  .fl-rejilla { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
  .fl-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fl-horas { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
}

/* ── Arriba: la flecha, los puntos del avance y la equis ─────────────────── */
.fl-top {
  flex: none; display: grid; grid-template-columns: var(--redondo) 1fr var(--redondo); align-items: center;
  gap: 8px; margin: 0 0 14px;
}
.fl-top__der { display: flex; justify-content: flex-end; gap: 10px; grid-column: 3; }
.fl-top--ancho { grid-template-columns: var(--redondo) 1fr auto; }
.fl-puntos { display: flex; justify-content: center; align-items: center; gap: 7px; }
.fl-puntos i {
  display: block; width: 9px; height: 9px; border-radius: 999px;
  background: var(--c-border); transition: width .25s, background .25s;
}
.fl-puntos i.is-on { width: 34px; background: var(--g-azul); }
.fl-puntos i.is-hecho { background: color-mix(in srgb, var(--c-azul) 38%, var(--c-border)); }

/* ── El paso: titular, cuerpo que se desplaza y pie ──────────────────────── */
.fl-paso { display: none; flex: 1 1 auto; min-height: 0; flex-direction: column; }
.fl-paso.is-on { display: flex; animation: flEntra .22s ease both; }
.fl-paso.is-vuelve { animation-name: flVuelve; }
@keyframes flEntra { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes flVuelve { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fl-paso.is-on { animation: none; } }

.fl-h1 {
  flex: none; margin: 0 0 14px; font-size: var(--t1, 28px); line-height: 1.1; font-weight: 800;
  letter-spacing: -.03em; color: var(--c-text);
}
@media (min-width: 1024px) { .fl-h1 { font-size: var(--t1, 28px); margin-bottom: 18px; } }
.fl-sub { flex: none; margin: -8px 0 14px; font-size: var(--t3, 16px); color: var(--c-text2); line-height: 1.4; }
.fl-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  /* Aire para que las sombras de las tarjetas no se corten contra el borde. */
  margin: 0 -8px; padding: 2px 8px 14px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.fl-cuerpo--fijo { overflow: visible; }
.fl-sec {
  font-size: var(--t4, 13px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text2); margin: 18px 4px 10px;
}
.fl-sec:first-child { margin-top: 4px; }
.fl-sec .n { color: var(--c-text3); font-weight: 700; margin-left: 4px; }

/* ── El pie: la tarjeta de abajo con ⋮, lo que importa y el botón ───────── */
.fl-pie {
  flex: none; display: flex; align-items: center; gap: 12px;
  margin: 10px 0 0; padding: 12px 12px 12px 14px; border-radius: 26px;
  background: var(--c-surface); box-shadow: var(--sombra-card);
}
.fl-pie__dato { flex: 1 1 auto; min-width: 0; }
.fl-pie__l { display: block; font-size: var(--t3, 16px); color: var(--c-text2); line-height: 1.2; }
.fl-pie__n {
  display: block; font-size: var(--t2, 19px); font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; line-height: 1.15; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fl-pie--solo { justify-content: flex-end; padding: 10px; }
.fl-pie--solo .fl-cta { flex: 1 1 auto; }
.fl-mas {
  flex: none; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border);
}
.fl-mas svg { width: 17px; height: 17px; }


.fl-cta.is-cargando { opacity: .75; cursor: progress; }

/* ── Tarjetas y filas ────────────────────────────────────────────────────── */
.fl-card {
  background: var(--c-surface); border-radius: 24px; box-shadow: var(--sombra-card);
  padding: 16px 18px; margin: 0 0 12px;
}
.fl-lista {
  background: var(--c-surface); border-radius: 24px; box-shadow: var(--sombra-card);
  overflow: hidden; margin: 0 0 12px;
}
.fl-fila {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 58px; padding: 10px 16px; position: relative;
  background: none; border: 0; cursor: pointer; text-align: left; color: var(--c-text);
  font-family: inherit; text-decoration: none;
}
.fl-fila:hover { color: var(--c-text); text-decoration: none; background: color-mix(in srgb, var(--c-surface2) 50%, transparent); }
.fl-fila + .fl-fila::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--c-border);
}
.fl-fila__main { flex: 1 1 auto; min-width: 0; }
.fl-fila__t {
  display: block; font-size: var(--t3, 16px); font-weight: 700; letter-spacing: -.01em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-fila__s {
  display: block; font-size: var(--t3, 16px); color: var(--c-text2); line-height: 1.35; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fl-fila__d { flex: none; text-align: right; }
.fl-fila__d b { display: block; font-size: var(--t3, 16px); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-fila__d small { display: block; font-size: var(--t4, 13px); color: var(--c-text2); white-space: nowrap; }
.fl-fila__f { flex: none; width: 18px; height: 18px; color: var(--c-text3); }
.fl-fila__f svg { display: block; width: 100%; height: 100%; }
.fl-fila.is-on { background: var(--c-azul-soft); }
.fl-fila--nuevo .fl-fila__t { color: var(--c-azul-tx); }
.fl-fila--peligro .fl-fila__t { color: var(--c-rose-tx); }

/* El círculo con las iniciales (cliente, paciente, empleado). */
.fl-ava {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--g-azul); color: #fff; box-shadow: var(--sombra-azul);
  font-size: var(--t4, 13px); font-weight: 800; letter-spacing: .02em;
}
.fl-ava--claro { background: var(--c-azul-soft); color: var(--c-azul-tx); box-shadow: none; }
.fl-ava svg { width: 17px; height: 17px; }



/* ── La tarjeta de a quién es (cliente + importe) ────────────────────────── */
.fl-quien {
  display: flex; align-items: center; gap: 14px; width: 100%;
  background: var(--c-surface); border-radius: 24px; box-shadow: var(--sombra-card);
  padding: 14px 18px; margin: 0 0 12px; border: 0; text-align: left; color: var(--c-text);
  font-family: inherit;
}
button.fl-quien { cursor: pointer; }
.fl-quien__main { flex: 1 1 auto; min-width: 0; }
.fl-quien__t { display: block; font-size: var(--t3, 16px); font-weight: 800; letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-quien__s { display: block; font-size: var(--t3, 16px); color: var(--c-text2); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-quien__d { flex: none; text-align: right; }
.fl-quien__d b { display: block; font-size: var(--t3, 16px); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.fl-quien__d small { display: block; font-size: var(--t3, 16px); color: var(--c-text2); }
.fl-quien__cambiar { flex: none; font-size: var(--t3, 16px); font-weight: 700; color: var(--c-azul-tx); }

/* ── Buscador ────────────────────────────────────────────────────────────── */
.fl-busca {
  flex: none; display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
  height: 56px; padding: 0 20px; border-radius: 999px;
  background: var(--c-surface); box-shadow: var(--sombra-card); color: var(--c-text2);
}
.fl-busca svg { width: 21px; height: 21px; flex: none; }
.fl-busca input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: none; padding: 0;
  font: 500 var(--t3, 16px) 'Manrope', system-ui, sans-serif; color: var(--c-text);
}
.fl-busca input::placeholder { color: var(--c-text3); }
.fl-busca:focus-within { box-shadow: var(--sombra-card), 0 0 0 2px var(--c-azul-soft); }

/* ── Servicios y productos (lista con su barra de color) ─────────────────── */
.fl-serv {
  display: flex; align-items: center; gap: 14px; width: 100%; position: relative;
  min-height: 60px; padding: 10px 16px 10px 22px; border: 0; background: none; cursor: pointer;
  text-align: left; color: var(--c-text); font-family: inherit;
}
.fl-serv::after {
  content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 5px; border-radius: 0 4px 4px 0;
  background: var(--fl-color, var(--c-azul));
}
.fl-serv + .fl-serv::before {
  content: ""; position: absolute; top: 0; left: 22px; right: 16px; height: 1px; background: var(--c-border);
}
.fl-serv:hover { background: color-mix(in srgb, var(--c-surface2) 50%, transparent); }
.fl-serv.is-on { background: var(--c-azul-soft); }
.fl-serv__main { flex: 1 1 auto; min-width: 0; }
.fl-serv__t { display: block; font-size: var(--t3, 16px); font-weight: 700; line-height: 1.25; }
.fl-serv__s { display: block; font-size: var(--t3, 16px); color: var(--c-text2); margin-top: 3px; }
.fl-serv__p { flex: none; font-size: var(--t3, 16px); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-serv__ok {
  flex: none; width: 26px; height: 26px; border-radius: 50%; display: none;
  align-items: center; justify-content: center; background: var(--g-azul); color: #fff;
}
.fl-serv__ok svg { width: 15px; height: 15px; stroke-width: 3; }
.fl-serv.is-on .fl-serv__ok { display: flex; }

/* Las tarjetas de «reservado recientemente», que se deslizan de lado. */
.fl-recientes {
  display: flex; gap: 10px; overflow-x: auto; margin: 0 -8px 6px; padding: 2px 8px 12px;
  scrollbar-width: none;
}
.fl-recientes::-webkit-scrollbar { display: none; }
.fl-reciente {
  flex: none; width: 230px; padding: 14px 16px; border-radius: 20px; border: 0; cursor: pointer;
  text-align: left; background: var(--c-surface); box-shadow: var(--sombra-card); color: var(--c-text);
  font-family: inherit; position: relative; overflow: hidden;
}
.fl-reciente::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--fl-color, var(--c-azul)); }
.fl-reciente b { display: block; font-size: var(--t3, 16px); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-reciente small { display: block; font-size: var(--t4, 13px); color: var(--c-text2); margin-top: 3px; }

/* ── Lo elegido en el resumen: la línea con su duración a la derecha ─────── */
.fl-linea { display: flex; align-items: stretch; gap: 12px; padding: 12px 0; position: relative; }
.fl-linea + .fl-linea { border-top: 1px solid var(--c-border); }
.fl-linea__bar { flex: none; width: 5px; border-radius: 4px; background: var(--fl-color, var(--c-azul)); }
.fl-linea__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fl-linea__fila { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.fl-linea__t { flex: 1 1 auto; min-width: 0; font-size: var(--t3, 16px); font-weight: 700; line-height: 1.25; }
.fl-linea__s { flex: 1 1 auto; min-width: 0; font-size: var(--t3, 16px); color: var(--c-text2); }
.fl-linea__p { flex: none; font-size: var(--t3, 16px); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fl-linea__ctl { flex: none; display: inline-flex; align-items: center; gap: 8px; }
.fl-quitar {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center; background: var(--c-surface2); color: var(--c-text2);
}
.fl-quitar svg { width: 16px; height: 16px; }
/* La píldora de la duración: se pulsa y se elige otra. */
.fl-dur {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px 0 14px; border-radius: 999px; cursor: pointer;
  background: var(--c-azul-soft); color: var(--c-azul-tx); border: 0;
  font: 800 var(--t3, 16px)/1 'Manrope', system-ui, sans-serif; white-space: nowrap;
}
.fl-dur svg { width: 14px; height: 14px; stroke-width: 2.6; }
.fl-dur.is-cambiada { background: var(--g-azul); color: #fff; }
.fl-cant { flex: none; display: inline-flex; align-items: center; gap: 2px; background: var(--c-surface2); border-radius: 999px; padding: 3px; }
.fl-cant button {
  width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c-surface);
  color: var(--c-text); font: 800 var(--t3, 16px)/1 'Manrope', system-ui, sans-serif; box-shadow: 0 1px 2px rgba(31, 39, 51, .08);
}
.fl-cant span { min-width: 22px; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Un dato del resumen que se puede cambiar (cuándo, con quién, dónde). */
.fl-dato {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0;
  background: none; border: 0; text-align: left; cursor: pointer; color: var(--c-text); font-family: inherit;
}
.fl-dato + .fl-dato { border-top: 1px solid var(--c-border); }
.fl-dato > svg { flex: none; width: 21px; height: 21px; color: var(--c-text2); }
.fl-dato__t { flex: 1 1 auto; min-width: 0; font-size: var(--t3, 16px); font-weight: 600; overflow-wrap: anywhere; }
.fl-dato__t small { display: block; font-size: var(--t4, 13px); color: var(--c-text2); font-weight: 500; margin-top: 1px; }
.fl-dato__c { flex: none; font-size: var(--t3, 16px); font-weight: 700; color: var(--c-azul-tx); }
div.fl-dato { cursor: default; }

.fl-anadir {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 2px; height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1.5px solid var(--c-border); background: var(--c-surface); cursor: pointer;
  font: 700 var(--t3, 16px)/1 'Manrope', system-ui, sans-serif; color: var(--c-text);
}
.fl-anadir svg { width: 18px; height: 18px; }

/* ── Fichas y píldoras (días, profesionales, opciones cortas) ───────────── */
.fl-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -8px 12px; padding: 2px 8px 8px; scrollbar-width: none; flex: none; }
.fl-chips::-webkit-scrollbar { display: none; }
.fl-chips--envuelve { flex-wrap: wrap; overflow: visible; }
.fl-chip {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; min-height: 46px; padding: 6px 14px; border-radius: 18px; border: 0; cursor: pointer;
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--sombra-card);
  font: 700 var(--t3, 16px)/1.15 'Manrope', system-ui, sans-serif; white-space: nowrap;
}
.fl-chip small { font-size: var(--t4, 13px); font-weight: 600; color: var(--c-text2); }
.fl-chip.is-on { background: var(--g-azul); color: #fff; box-shadow: var(--sombra-azul); }
.fl-chip.is-on small { color: rgba(255, 255, 255, .8); }
.fl-chip.is-cerrado { opacity: .45; }

/* Las horas libres, en rejilla. */
.fl-horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
@media (max-width: 380px) { .fl-horas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fl-hora {
  height: 50px; border-radius: 16px; border: 0; cursor: pointer; background: var(--c-surface);
  box-shadow: var(--sombra-card); color: var(--c-text);
  font: 800 var(--t3, 16px)/1 'Manrope', system-ui, sans-serif; font-variant-numeric: tabular-nums;
}
.fl-hora.is-on { background: var(--g-azul); color: #fff; box-shadow: var(--sombra-azul); }

/* ── Baldosas en rejilla de tres (propina, métodos de pago) ──────────────── */
.fl-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; margin: 0 0 12px; }
.fl-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fl-baldosa {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  min-height: 92px; padding: 14px 8px; border-radius: 22px; cursor: pointer; text-align: center;
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--sombra-card);
  border: 2px solid transparent; font: 800 var(--t3, 16px)/1.2 'Manrope', system-ui, sans-serif;
}
.fl-baldosa small { font-size: var(--t3, 16px); font-weight: 600; color: var(--c-text2); }
.fl-baldosa--icono { min-height: 124px; }
.fl-baldosa.is-on { border-color: var(--c-menta); box-shadow: var(--sombra-card), 0 0 0 4px var(--c-menta-soft); }
.fl-baldosa.is-llena { background: var(--g-azul); color: #fff; box-shadow: var(--sombra-azul); }
.fl-baldosa.is-llena small { color: rgba(255, 255, 255, .8); }
.fl-baldosa[disabled] { opacity: .45; cursor: default; }

/* ── El importe grande y el teclado (efectivo recibido) ──────────────────── */
.fl-importe {
  display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 4px 0 6px;
  font-weight: 800; letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.fl-importe__e { font-size: var(--t1, 28px); color: var(--c-text3); }
.fl-importe__n { font-size: var(--t1, 28px); line-height: 1; color: var(--c-text); }
.fl-importe__cursor { width: 3px; height: 1.15em; font-size: var(--t1, 28px); align-self: center; background: var(--c-menta); border-radius: 2px; animation: flParpadeo 1s steps(1) infinite; }
@keyframes flParpadeo { 50% { opacity: 0; } }
.fl-importe-dice { text-align: center; font-size: var(--t3, 16px); color: var(--c-text2); margin: 0 0 12px; }
.fl-importe-dice b { color: var(--c-text); }
.fl-importe-dice .ok { color: var(--c-menta-tx); font-weight: 800; }
.fl-importe-dice .falta { color: var(--c-rose-tx); font-weight: 800; }
.fl-rapidos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin: 0 0 12px; }
.fl-rapido {
  height: 46px; border-radius: 999px; border: 0; cursor: pointer; background: var(--c-surface);
  box-shadow: var(--sombra-card); color: var(--c-text); font: 800 var(--t3, 16px)/1 'Manrope', system-ui, sans-serif;
}
.fl-rapido.is-on { background: var(--g-menta); color: #fff; box-shadow: var(--sombra-menta); }
/* EL TECLADO ES EL DEL TELÉFONO DEL IPHONE (Rubén, 2026-11-03, con la foto del teclado de
   llamar): teclas REDONDAS, las mismas en el móvil y en el escritorio, y de cristal al máximo
   en claro y en oscuro. Las medidas salen de la foto (un iPhone de 375 pt de ancho): tecla de
   67 pt, 28 pt entre columnas y 7 pt entre filas; aquí 68 · 26 · 8. Hasta hoy eran
   rectángulos de 56 px en el móvil y de 420 px de ancho en el escritorio. */
.fl-teclado, .fl-cuerpo--teclado { --fl-tecla: 68px; --fl-tecla-x: 26px; --fl-tecla-y: 8px; }
.fl-teclado {
  display: grid; grid-template-columns: repeat(3, var(--fl-tecla)); justify-content: center;
  column-gap: var(--fl-tecla-x); row-gap: var(--fl-tecla-y);
}
.fl-tecla {
  box-sizing: border-box; width: var(--fl-tecla); height: var(--fl-tecla); padding: 0; margin: 0;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--c-text); font: 500 var(--t1, 28px)/1 'Manrope', system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  /* El cristal: en la app, el relleno, el borde y el filo de luz los pone la lista «TODA TARJETA»
     de piel.css (Rubén, 2026-10-26: todas las tarjetas, el mismo cristal), que ya incluye a la
     tecla; aquí va lo que es de la tecla: el aro de 1 px y el desenfoque con saturación de lo de
     detrás (`--cristal-filtro`, el de la hoja de Theresa), que es lo que hace cristal al cristal. */
  border: 1px solid var(--vidrio-borde); background: var(--c-surface); box-shadow: var(--sombra-card);
  -webkit-backdrop-filter: var(--cristal-filtro); backdrop-filter: var(--cristal-filtro);
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  transition: transform .1s ease;
}
/* Al pulsar, la tecla se hunde como en el iPhone: el relleno hundido de la paleta (más oscuro en
   claro, más claro en oscuro) y un poco más pequeña. `!important` porque el relleno de toda
   tarjeta (piel.css) también lo lleva; aquí gana por especificidad. */
.fl-tecla:active { background: var(--c-surface2) !important; transform: scale(.95); }
/* La coma y BORRAR son teclas iguales que las demás, como el * y el # del teléfono. */
.fl-tecla svg { width: 26px; height: 26px; }
/* EL TECLADO CABE SIEMPRE (Rubén, 2026-09-30: «pulso 80 y no puedo borrar»; 2026-10-14: «la
   calculadora de cobrar tiene mucho zoom y sale cortada»). El teclado ocupa el hueco que queda
   entre el importe (o los importes rápidos) y el pie, y sus cuatro filas se reparten ese alto
   con un tope: el de cuatro teclas enteras. Donde no caben (un móvil bajo con los importes
   rápidos), la tecla mide lo que mide su fila y sigue siendo redonda (`aspect-ratio`). */
.fl-cuerpo--teclado { display: flex; flex-direction: column; overflow: hidden; overflow: clip; }
.fl-cuerpo--teclado > * { flex: none; }
.fl-cuerpo--teclado > .fl-teclado {
  flex: 1 1 auto; min-height: 0; grid-template-rows: repeat(4, minmax(0, 1fr));
  max-height: calc(4 * var(--fl-tecla) + 3 * var(--fl-tecla-y));
}
.fl-cuerpo--teclado .fl-tecla {
  height: 100%; max-height: var(--fl-tecla); width: auto; aspect-ratio: 1 / 1;
  justify-self: center; align-self: center;
}
/* Con el recorte del hueco, la cifra grande necesita su alto de línea entero: con
   `line-height: 1` se comía la parte de arriba del 8. */
.fl-cuerpo--teclado .fl-importe { padding-top: 4px; }
.fl-cuerpo--teclado .fl-importe__n { line-height: 1.18; }
/* En un móvil bajo (667 px) todo junto medía 33 px más que el hueco: al tocar BORRAR el
   navegador desplazaba el bloque para enseñar la tecla y la cifra se cortaba arriba.
   `clip` no deja desplazarlo, y esto hace que quepa. */
@media (max-height: 700px) and (max-width: 1023px) {
  .fl-cuerpo--teclado .fl-importe__n { font-size: var(--t1, 28px); }
  .fl-cuerpo--teclado .fl-importe__e { font-size: var(--t1, 28px); }
  .fl-cuerpo--teclado .fl-importe { margin: 0 0 2px; }
  .fl-cuerpo--teclado .fl-importe-dice { margin-bottom: 6px; font-size: var(--t3, 16px); }
  .fl-cuerpo--teclado .fl-rapidos { margin-bottom: 8px; }
  .fl-cuerpo--teclado .fl-rapido { height: 38px; }
  .fl-cuerpo--teclado > .fl-teclado { --fl-tecla-y: 6px; }
}
/* EN EL ESCRITORIO, EL MISMO TECLADO, EN MEDIO DEL PANEL. El reparto del alto (arriba) es
   para que quepa en un móvil bajo; en el panel del escritorio, de 800 px, dejaba las teclas
   pegadas arriba de cada fila. Aquí el importe y el teclado van juntos, en medio, y los
   importes rápidos miden lo que el teclado con su aire. */
@media (min-width: 1024px) {
  .fl-cuerpo--teclado { justify-content: center; }
  .fl-cuerpo--teclado > .fl-teclado { margin: 8px 0 0; }
  .fl-cuerpo--teclado .fl-rapidos {
    width: 100%; max-width: calc(3 * var(--fl-tecla) + 2 * var(--fl-tecla-x) + 48px);
    margin-left: auto; margin-right: auto;
  }
}
@media (max-height: 740px) and (max-width: 1023px) {
  .fl-importe__n { font-size: var(--t1, 28px); }
  .fl-rapido { height: 42px; }
  .fl-h1 { font-size: var(--t1, 28px); margin-bottom: 10px; }
}

/* ── Preguntas de escribir (nombre, teléfono, asunto…) ───────────────────── */
.fl-pregunta { margin: 0 0 14px; }
.fl-pregunta label, .fl-etiqueta {
  display: block; font-size: var(--t4, 13px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--c-text2); margin: 0 4px 8px;
}
.fl-pregunta .opcional { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--c-text3); }
.fl-input, .fl-select, .fl-textarea {
  display: block; width: 100%; border: 0; outline: 0; margin: 0;
  background: var(--c-surface); color: var(--c-text); box-shadow: var(--sombra-card);
  border-radius: 18px; padding: 0 18px; height: 50px;
  font: 600 var(--t3, 16px)/1.3 'Manrope', system-ui, sans-serif;
  -webkit-appearance: none; appearance: none;
}
.fl-textarea { height: auto; min-height: 120px; padding: 16px 20px; resize: vertical; font-weight: 500; font-size: var(--t3, 16px); }
.fl-input::placeholder, .fl-textarea::placeholder { color: var(--c-text3); font-weight: 500; }
.fl-input:focus, .fl-select:focus, .fl-textarea:focus { box-shadow: var(--sombra-card), 0 0 0 2px var(--c-azul); }
.fl-input.is-mal { box-shadow: var(--sombra-card), 0 0 0 2px var(--c-rose); }
.fl-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1ad' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center; background-size: 20px; padding-right: 50px;
}
.fl-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .fl-dos--movil1 { grid-template-columns: 1fr; } }
/* En el iPhone, menos de 16 px en un campo hace que Safari amplíe la página. */
@media (max-width: 1023px) { .fl-input, .fl-select, .fl-textarea { font-size: var(--t3, 16px); } }

/* Interruptor en fila (cifrado, acuse, repetir L-V). */
.fl-sw-fila { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.fl-sw-fila + .fl-sw-fila { border-top: 1px solid var(--c-border); }
.fl-sw-fila__t { flex: 1 1 auto; font-size: var(--t3, 16px); font-weight: 700; }
.fl-sw-fila__t small { display: block; font-size: var(--t4, 13px); font-weight: 500; color: var(--c-text2); margin-top: 2px; }

/* Casillas de una lista larga (destinatarios). */
.fl-marca {
  flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--c-border);
  display: flex; align-items: center; justify-content: center; color: transparent; background: var(--c-surface);
}
.fl-marca svg { width: 16px; height: 16px; stroke-width: 3.2; }
.is-on > .fl-marca, .fl-fila.is-on .fl-marca { background: var(--g-azul); border-color: transparent; color: #fff; }

/* Botón de fichero sin el control nativo (la estética lo prohíbe a la vista). */
.fl-fichero {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; cursor: pointer;
  background: var(--c-surface); border-radius: 20px; box-shadow: var(--sombra-card); margin: 0 0 10px;
  border: 0; text-align: left; color: var(--c-text); font-family: inherit; position: relative;
}
.fl-fichero input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.fl-fichero__t { flex: 1 1 auto; min-width: 0; font-size: var(--t3, 16px); font-weight: 700; }
.fl-fichero__t small { display: block; font-size: var(--t4, 13px); color: var(--c-text2); font-weight: 500; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Avisos dentro del paso ──────────────────────────────────────────────── */
.fl-aviso {
  display: flex; gap: 10px; align-items: flex-start; border-radius: 18px; padding: 13px 16px; margin: 0 0 12px;
  background: var(--c-azul-soft); color: var(--c-text); font-size: var(--t3, 16px); line-height: 1.45;
}
.fl-aviso svg { flex: none; width: 19px; height: 19px; margin-top: 1px; color: var(--c-azul); }
.fl-aviso--mal { background: var(--c-rose-soft); }
.fl-aviso--mal svg { color: var(--c-rose); }
.fl-aviso--ok { background: var(--c-menta-soft); }
.fl-aviso--ok svg { color: var(--c-menta); }
.fl-aviso b { font-weight: 800; }
.fl-vacio { text-align: center; color: var(--c-text2); font-size: var(--t3, 16px); padding: 26px 16px; line-height: 1.5; }
.fl-cargando { text-align: center; color: var(--c-text3); font-size: var(--t3, 16px); padding: 26px 0; }

/* Los totales (resumen de la venta). */
.fl-totales { display: grid; gap: 8px; }
.fl-totales div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t3, 16px); color: var(--c-text2); }
.fl-totales div b { color: var(--c-text); font-weight: 800; font-variant-numeric: tabular-nums; flex: none; white-space: nowrap; }
.fl-totales .fl-total { border-top: 1px solid var(--c-border); padding-top: 12px; margin-top: 4px; font-size: var(--t3, 16px); color: var(--c-text); font-weight: 800; }
.fl-totales .fl-pagado { color: var(--c-menta-tx); font-weight: 800; }
.fl-totales .fl-pagado b { color: var(--c-menta-tx); }

/* El pie de la pantalla de «hecho» (venta completada, cita guardada). */
.fl-hecho { text-align: center; padding: 20px 10px; }
.fl-hecho__ico {
  width: 64px; height: 64px; margin: 10px auto 18px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  background: var(--g-menta); box-shadow: var(--sombra-menta);
}
.fl-hecho__ico svg { width: 30px; height: 30px; stroke-width: 2.6; }
.fl-hecho__t { font-size: var(--t1, 28px); font-weight: 800; letter-spacing: -.02em; margin: 0 0 8px; }
.fl-hecho__s { font-size: var(--t3, 16px); color: var(--c-text2); line-height: 1.5; }

/* ── UN 20 % MÁS PEQUEÑO EN EL MÓVIL (Rubén, 2026-09-30: «se ve todo muy grande…
   cuatro títulos y botones ocupan media pantalla y lo que la gente quiere ver es lo
   que más escondes»). Una sola palanca para todas las páginas paso a paso y sus
   hojas, la misma que usa el escritorio (`zoom: .75` en base.html): encoge títulos,
   botones y tarjetas a la vez sin tocar cada regla. `.fl` sigue midiendo la pantalla
   entera; lo que se encoge es lo de dentro. Los campos quedan en 16 px de verdad
   (20 × 0,8): por debajo, el iPhone amplía la página al tocarlos. */
@media (max-width: 1023px) {
  /* (Sin el 20 % de antes: con los cuatro tamaños de letra, Rubén 2026-10-12, la página ya mide lo que debe.) */
  .fl input:not([type=checkbox]):not([type=radio]):not([type=range]), .fl textarea, .fl select {
    font-size: var(--t3, 16px) !important;
  }
}