/* ═══════════════════════════════════════════════════════════════════
   Tema Ezra para las páginas de trámite (registro, pago, ingresar,
   maestro, ayuda). Va DESPUÉS de ezra.css: no cambia el armado, sólo
   la piel.

   Seba, 22-sep: "el verde no va, algo más actual, parecido a
   facturitas", con "la letra que estábamos haciendo para ezrafacturas".
   Así que:
   - la letra y el color son los de Taluney: Plus Jakarta Sans, blanco y
     violeta #5b4ce6 con la barra índigo #1f1b4d (Seba, 22-sep: "mismo
     estilo q taluney porfavor", "el tipo de letra parece muy ia");
   - el recorrido es el de web.facturitas.app: claro, tarjeta blanca
     centrada, halo de color muy suave detrás.

   Como es una capa aparte, ezra.css se puede seguir tocando sin pisarse.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --ez-fondo: #f7f6fb;
  --ez-superficie: #ffffff;
  --ez-superficie-2: #f7f5ff;
  --ez-tinta: #16132d;
  --ez-tinta-2: #45425f;
  --ez-tinta-3: #6e6b8a;
  --ez-borde: #e8e6f3;
  --ez-borde-fuerte: #d6d3ea;
  --ez-primario: #5b4ce6;
  --ez-primario-hover: #4a3bd3;
  --ez-primario-texto: #ffffff;
  --ez-acento: #8b7cf6;
  --ez-acento-suave: #efecfe;
  --ez-enlace: #4a3bd3;
  --ez-peligro: #c02b2b;
  --ez-peligro-suave: #fbe9e9;
  --ez-aviso: #c76a05;
  --ez-aviso-suave: #fdf0db;
  --ez-ok: #0b8f5f;
  --ez-ok-suave: #e4f6ee;
  --ez-banda: #1f1b4d;
  --ez-banda-2: #2d2766;
  --ez-banda-tinta: #f3f1fe;
  --ez-banda-tinta-2: #c1bbe8;
  --ez-sombra: 0 1px 2px rgb(23 23 43 / .05), 0 10px 30px rgb(23 23 43 / .06);
  --ez-sombra-alta: 0 2px 4px rgb(23 23 43 / .05), 0 24px 60px rgb(74 59 211 / .16);
  --ez-radio: 16px;
  --ez-radio-chico: 10px;
  --ez-foco: 0 0 0 3px var(--ez-superficie), 0 0 0 5px var(--ez-primario);
  --ez-titulos: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
  --ez-letra: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ez-mono: "Plus Jakarta Sans", -apple-system, system-ui, sans-serif;
}
/* Siempre claro, esté la compu en modo oscuro o no (Seba, 22-sep: "y
   porque esta oscuro"). Como la bienvenida de Facturitas. color-scheme
   también apaga los controles oscuros del navegador (fecha, scroll). */
:root { color-scheme: light; }

/* ── Base ────────────────────────────────────────────────────────── */
body { font-family: var(--ez-letra); }
h1, h2, h3, h4, .ez-marca, .ez-boton, .ez-precio, .ez-num { font-family: var(--ez-titulos); }
h1, h2 { letter-spacing: -0.03em; }
.ez-importe, .ez-valor, .ez-dato-banco, .ez-tabla td.ez-num { font-variant-numeric: tabular-nums; }

/* El halo de color detrás de todo, como el de web.facturitas.app. */
body.ez-tramite {
  background:
    radial-gradient(900px 520px at 50% -120px, rgb(91 76 230 / .14), transparent 70%),
    radial-gradient(600px 400px at 100% 100%, rgb(139 124 246 / .08), transparent 70%),
    var(--ez-fondo);
  background-attachment: fixed;
}

/* ── Barra: índigo oscuro, como el lateral de Taluney ────────────── */
.ez-barra, .ez-barra-oscura {
  background: color-mix(in srgb, var(--ez-banda) 94%, transparent);
  border-bottom: 1px solid rgb(255 255 255 / .06);
  color: var(--ez-banda-tinta);
}
.ez-barra .ez-marca { font-size: 22px; letter-spacing: -0.03em; }
.ez-marca small, .ez-barra-oscura .ez-marca small { color: var(--ez-banda-tinta-2); font-weight: 500; }
.ez-barra .ez-menu a { color: var(--ez-banda-tinta-2); opacity: 1; }
.ez-barra .ez-menu a:hover { color: #fff; background: rgb(255 255 255 / .07); }
.ez-barra .ez-boton-fantasma { color: var(--ez-banda-tinta); border-color: rgb(255 255 255 / .2); background: transparent; }
.ez-barra .ez-boton-fantasma:hover { background: rgb(255 255 255 / .08); }
.ez-barra .ez-menu-boton { border-color: rgb(255 255 255 / .2); }

/* ── Botones: como "Cargar cliente" / "Facturar" de ezra-facturas ─── */
.ez-boton {
  border-radius: 10px; font-weight: 600; letter-spacing: -0.005em;
  box-shadow: 0 1px 0 rgb(255 255 255 / .15) inset, 0 6px 16px -6px rgb(74 59 211 / .55);
}
.ez-boton:hover { box-shadow: 0 1px 0 rgb(255 255 255 / .15) inset, 0 10px 24px -8px rgb(74 59 211 / .6); }
.ez-boton-grande { border-radius: 12px; }
.ez-boton-chico { border-radius: 8px; }
.ez-boton-fantasma, .ez-boton-wa, .ez-boton-peligro { box-shadow: none; }
.ez-boton-fantasma:hover { box-shadow: none; border-color: var(--ez-primario); }
.ez-boton-wa { background: #1faa55; }
.ez-boton-wa:hover { background: #178c46; box-shadow: none; }

/* ── Tarjetas ────────────────────────────────────────────────────── */
.ez-caja {
  border-radius: var(--ez-radio); border-color: var(--ez-borde);
  box-shadow: var(--ez-sombra);
}
.ez-caja h2 { font-weight: 700; }
.ez-lateral-caja { background: var(--ez-superficie); border-radius: var(--ez-radio); box-shadow: var(--ez-sombra); }
.ez-tramite-cabeza h1 { font-weight: 700; letter-spacing: -0.035em; }

/* Los numeritos de "qué pasa después": el cuadradito violeta suave del
   "Arrancá en tres pasos" de ezra-facturas, no un círculo. */
.ez-linea-tiempo b {
  border-radius: 9px; background: var(--ez-acento-suave); border: 0; color: var(--ez-primario);
  font-family: var(--ez-titulos); font-weight: 700;
}
.ez-linea-tiempo li.ez-ahora b { border: 0; background: var(--ez-primario); color: #fff; }
.ez-linea-tiempo li.ez-hecho b { background: var(--ez-ok); color: #fff; }

/* ── Campos ──────────────────────────────────────────────────────── */
.ez-entrada, .ez-prefijado {
  border-radius: 10px; border-color: var(--ez-borde-fuerte); background: var(--ez-superficie);
  transition: border-color .15s, box-shadow .15s;
}
.ez-entrada:hover, .ez-prefijado:hover { border-color: #c5c0e3; }
.ez-entrada:focus, .ez-prefijado:focus-within {
  border-color: var(--ez-primario); box-shadow: 0 0 0 4px rgb(91 76 230 / .14); outline: none;
}
.ez-campo label { font-weight: 600; }

/* ── Colores que ezra.css tenía fijos en verde ───────────────────── */
.ez-banda a:not(.ez-boton) { color: var(--ez-acento); }
.ez-banda .ez-sobretitulo, .ez-numero strong small, .ez-lista-seg svg, .ez-hero-nota svg { color: var(--ez-acento); }
.ez-resplandor { background-image: radial-gradient(700px 360px at 80% 0%, rgb(91 76 230 / .35), transparent 70%); }
.ez-resplandor::before { background: radial-gradient(closest-side, rgb(91 76 230 / .32), transparent 70%); }
.ez-etiqueta { background: rgb(91 76 230 / .14); color: #a99ff7; border-color: rgb(91 76 230 / .3); }
.ez-etiqueta i { background: #8b7cf6; box-shadow: 0 0 0 4px rgb(139 124 246 / .2); }

/* ═══════════════════════════════════════════════════════════════════
   Registro e ingreso en dos columnas (Seba, 22-sep: "está muy básico").
   A la izquierda la "vitrina" índigo con qué hace Ezra y una maqueta de
   un cobro; a la derecha la tarjeta del paso. En el celular la vitrina
   queda como una franja con la marca y el título, y arriba la tarjeta.
   ═══════════════════════════════════════════════════════════════════ */
body.ez-dividido { background: var(--ez-fondo); }
.ez-dividido-grilla {
  flex: 1; display: grid; grid-template-columns: minmax(400px, 44%) minmax(0, 1fr); min-width: 0;
}

/* ── La vitrina ──────────────────────────────────────────────────── */
.ez-vitrina {
  position: sticky; top: 0; align-self: start; height: 100vh; min-height: 640px;
  display: flex; flex-direction: column; gap: 28px; padding: 36px clamp(32px, 4.5vw, 64px) 32px;
  color: var(--ez-banda-tinta); overflow: hidden; isolation: isolate;
  background:
    radial-gradient(520px 380px at 100% 0%, rgb(139 124 246 / .45), transparent 70%),
    radial-gradient(480px 420px at 0% 100%, rgb(91 76 230 / .5), transparent 70%),
    linear-gradient(155deg, #1f1b4d 0%, #2a2468 48%, #3b2fb0 100%);
}
/* Una grilla muy tenue de fondo, para que no sea un plano liso. */
.ez-vitrina::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    linear-gradient(rgb(255 255 255 / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .05) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 30%, #000 10%, transparent 70%);
}
.ez-vitrina .ez-marca { font-size: 22px; letter-spacing: -0.03em; color: #fff; align-self: flex-start; }
.ez-vitrina .ez-marca small { color: var(--ez-banda-tinta-2); font-weight: 500; font-size: 22px; }
.ez-vitrina .ez-marca:focus-visible { box-shadow: 0 0 0 3px #fff; }
.ez-vitrina-centro { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 0; max-width: 480px; }
.ez-vitrina-sobre {
  display: inline-flex; align-self: flex-start; font-size: 13px; font-weight: 600; letter-spacing: .01em;
  color: #d9d4ff; background: rgb(255 255 255 / .08); border: 1px solid rgb(255 255 255 / .12);
  padding: 5px 12px; border-radius: 999px;
}
.ez-vitrina-titulo {
  margin-top: 18px; font-size: clamp(30px, 3.1vw, 42px); font-weight: 750; letter-spacing: -0.035em;
  line-height: 1.08; color: #fff; text-wrap: balance;
}
.ez-vitrina-bajada { margin-top: 14px; font-size: 16px; line-height: 1.55; color: var(--ez-banda-tinta-2); max-width: 30em; }

.ez-beneficios { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.ez-beneficios li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; }
.ez-beneficio-icono {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: rgb(255 255 255 / .1); border: 1px solid rgb(255 255 255 / .14); color: #cfc8ff;
}
.ez-beneficio-icono svg { width: 20px; height: 20px; }
.ez-beneficios b { display: block; font-size: 15px; font-weight: 650; color: #fff; }
/* Sólo el texto de cada beneficio: con `.ez-beneficios span` a secas
   también agarraba el cuadradito del ícono (que es un <span>) y le pisaba
   el centrado — Seba, 22-sep: "los iconos no están derechos en el
   rectángulo". */
.ez-beneficios li > div > span { display: block; font-size: 14.5px; line-height: 1.45; color: var(--ez-banda-tinta-2); margin-top: 3px; }
.ez-vitrina-pie { font-size: 13px; color: rgb(193 187 232 / .8); }

/* ── La maqueta: un mensaje de WhatsApp y el cobro que quedó anotado ─ */
.ez-maqueta { margin-top: 30px; display: grid; gap: 10px; max-width: 400px; }
.ez-maqueta-burbuja {
  justify-self: start; display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--ez-tinta); border-radius: 14px 14px 14px 4px; padding: 8px 12px 8px 8px;
  font-size: 13.5px; font-weight: 550; box-shadow: 0 10px 30px -12px rgb(10 8 40 / .6);
}
.ez-maqueta-burbuja small { margin-left: 8px; font-size: 11px; color: var(--ez-tinta-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.ez-maqueta-adjunto {
  width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--ez-acento-suave); color: var(--ez-primario);
}
.ez-maqueta-adjunto svg { width: 16px; height: 16px; }
.ez-maqueta-cobro {
  background: #fff; color: var(--ez-tinta); border-radius: 16px; padding: 16px;
  box-shadow: 0 24px 60px -18px rgb(10 8 40 / .7), 0 0 0 1px rgb(255 255 255 / .4);
  margin-left: 28px;
}
.ez-maqueta-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ez-maqueta-cabeza small { font-size: 12px; color: var(--ez-tinta-3); }
.ez-maqueta-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  color: var(--ez-primario); background: var(--ez-acento-suave); padding: 4px 10px 4px 8px; border-radius: 999px;
}
.ez-maqueta-chip svg { width: 13px; height: 13px; }
.ez-maqueta-fila { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; margin-top: 14px; }
.ez-maqueta-avatar {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(135deg, #8b7cf6, #5b4ce6); color: #fff; font-size: 13px; font-weight: 700;
}
.ez-maqueta-fila b { display: block; font-size: 14.5px; }
.ez-maqueta-fila small { display: block; font-size: 12.5px; color: var(--ez-tinta-3); }
.ez-maqueta-fila strong, .ez-maqueta-total strong {
  font-size: 18px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ez-maqueta-pie { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ez-borde); }
.ez-maqueta-pie span {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--ez-tinta-2);
  background: var(--ez-superficie-2); border-radius: 6px; padding: 3px 8px;
}
.ez-maqueta-pie span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ez-primario); }
/* La del ingreso: el total del día y unas barritas. */
.ez-maqueta-total { margin-top: 14px; }
.ez-maqueta-total small { display: block; font-size: 12.5px; color: var(--ez-tinta-3); }
.ez-maqueta-total strong { font-size: 26px; }
.ez-maqueta-barras { display: flex; align-items: flex-end; gap: 6px; height: 54px; margin-top: 12px; }
.ez-maqueta-barras i { flex: 1; border-radius: 4px 4px 2px 2px; background: #e4e0fd; height: 40%; }
.ez-maqueta-barras i:nth-child(2) { height: 58%; }
.ez-maqueta-barras i:nth-child(3) { height: 46%; }
.ez-maqueta-barras i:nth-child(4) { height: 80%; }
.ez-maqueta-barras i:nth-child(5) { height: 64%; }
.ez-maqueta-barras i:nth-child(6) { height: 96%; background: var(--ez-primario); }
.ez-maqueta-barras i:nth-child(7) { height: 72%; }
.ez-dividido .ez-maqueta:has(.ez-maqueta-total) .ez-maqueta-cobro { margin-left: 0; }

/* ── La columna de la derecha ────────────────────────────────────── */
.ez-dividido-cuerpo {
  display: flex; flex-direction: column; min-width: 0; padding: 22px clamp(20px, 4vw, 56px) 40px;
  background:
    radial-gradient(700px 420px at 50% -80px, rgb(91 76 230 / .10), transparent 70%),
    var(--ez-fondo);
}
body.ez-tramite .ez-dividido-cuerpo { padding-block: 22px 40px; }
.ez-dividido-arriba {
  display: flex; justify-content: flex-end; align-items: center; gap: 8px 20px; flex-wrap: wrap;
  font-size: 14px; color: var(--ez-tinta-3);
}
.ez-dividido-arriba a { font-weight: 600; text-decoration: none; }
.ez-dividido-arriba a:hover { text-decoration: underline; }
.ez-dividido-centro {
  flex: 1; width: 100%; max-width: 580px; margin: 0 auto; padding-top: clamp(24px, 6vh, 64px);
  display: flex; flex-direction: column;
}
.ez-dividido-pie { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ez-tinta-3); }
.ez-dividido-pie a { font-weight: 600; }

/* La tarjeta del paso */
.ez-tarjeta-paso { padding: 32px 34px 30px; box-shadow: var(--ez-sombra-alta); border-color: #ebe8f7; }
.ez-tarjeta-sobre {
  font-size: 13px; font-weight: 700; color: var(--ez-primario); letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.ez-tarjeta-cabeza h1 {
  margin-top: 6px; font-size: clamp(26px, 3vw, 32px); font-weight: 750; letter-spacing: -0.035em; text-wrap: balance;
}
.ez-tarjeta-bajada { margin-top: 8px; color: var(--ez-tinta-3); font-size: 15.5px; line-height: 1.5; }
.ez-tarjeta-paso > .ez-form { margin-top: 24px; }
.ez-form-pasos { gap: 0; }
.ez-seguro {
  display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--ez-tinta-3);
  background: var(--ez-superficie-2); border-radius: 10px; padding: 10px 12px;
}
.ez-seguro svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--ez-primario); }

/* ── Barra de pasos (registro y pago) ────────────────────────────── */
/* Son 4 <i>: js/pasos.js les pone .ez-ahora al actual y .ez-hecho a los
   de antes. Cada uno es una rayita arriba y el número con el nombre. */
.ez-pasos-barra { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.ez-pasos-barra i {
  font-style: normal; display: flex; align-items: center; gap: 8px; min-width: 0;
  padding-top: 12px; position: relative; color: var(--ez-tinta-3); font-size: 13px; font-weight: 600;
}
.ez-pasos-barra i::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 99px;
  background: var(--ez-borde-fuerte); transition: background-color .25s;
}
.ez-pasos-barra b {
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; background: var(--ez-superficie); border: 1.5px solid var(--ez-borde-fuerte);
  color: var(--ez-tinta-3); font-variant-numeric: tabular-nums; transition: background-color .25s, border-color .25s, color .25s;
}
.ez-pasos-barra span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ez-pasos-barra i.ez-ahora { color: var(--ez-tinta); }
.ez-pasos-barra i.ez-ahora::before { background: var(--ez-primario); }
.ez-pasos-barra i.ez-ahora b { background: var(--ez-primario); border-color: var(--ez-primario); color: #fff; }
.ez-pasos-barra i.ez-hecho { color: var(--ez-tinta-2); }
.ez-pasos-barra i.ez-hecho::before { background: var(--ez-acento); }
/* El hecho muestra un tilde en vez del número (el número queda para el
   lector... que igual no lo lee: la barra es aria-hidden). */
.ez-pasos-barra i.ez-hecho b { background: var(--ez-acento-suave); border-color: transparent; color: transparent; position: relative; }
.ez-pasos-barra i.ez-hecho b::after {
  content: ""; position: absolute; width: 9px; height: 5px; border: solid var(--ez-primario);
  border-width: 0 0 2px 2px; transform: translateY(-1px) rotate(-45deg);
}

/* ── Opciones del tipo de negocio ────────────────────────────────── */
.ez-etapa { display: grid; gap: 18px; }
.ez-etapa[hidden] { display: none; }
/* El input de la dirección vive dentro de .ez-prefijado, que ya muestra
   el foco: sin esto aparecían dos anillos. */
.ez-prefijado input:focus, .ez-prefijado input:focus-visible { box-shadow: none; outline: none; }

.ez-opciones { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.ez-opcion {
  position: relative; display: grid; align-items: center; gap: 2px 14px; cursor: pointer;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  grid-template-areas: "icono texto punto" "icono precio punto";
  padding: 14px 16px; border: 1.5px solid var(--ez-borde); border-radius: 14px;
  background: var(--ez-superficie); transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.ez-opcion:hover { border-color: #cdc6f5; box-shadow: 0 4px 14px -8px rgb(74 59 211 / .35); }
.ez-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.ez-opcion-icono {
  grid-area: icono; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--ez-superficie-2); color: var(--ez-primario); border: 1px solid var(--ez-borde);
  transition: background-color .15s, color .15s, border-color .15s;
}
.ez-opcion-icono svg { width: 21px; height: 21px; }
.ez-opcion-texto { grid-area: texto; min-width: 0; }
.ez-opcion b { display: block; font-family: var(--ez-titulos); font-size: 15px; font-weight: 650; }
.ez-opcion small { display: block; color: var(--ez-tinta-3); font-size: 13.5px; margin-top: 1px; line-height: 1.4; }
.ez-opcion em {
  grid-area: precio; justify-self: start; margin-top: 6px; font-style: normal; font-family: var(--ez-titulos);
  font-weight: 700; font-size: 12.5px; color: var(--ez-tinta-2); background: var(--ez-superficie-2);
  border-radius: 6px; padding: 2px 8px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ez-opcion-punto {
  grid-area: punto; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ez-borde-fuerte);
  display: grid; place-items: center; transition: border-color .15s, background-color .15s;
}
.ez-opcion-punto::after {
  content: ""; width: 8px; height: 4px; border: solid #fff; border-width: 0 0 2px 2px;
  transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .15s;
}
.ez-opcion:has(input:checked) { border-color: var(--ez-primario); background: #fbfaff; box-shadow: 0 0 0 3px rgb(91 76 230 / .1); }
.ez-opcion:has(input:checked) .ez-opcion-icono { background: var(--ez-primario); border-color: var(--ez-primario); color: #fff; }
.ez-opcion:has(input:checked) .ez-opcion-punto { border-color: var(--ez-primario); background: var(--ez-primario); }
.ez-opcion:has(input:checked) .ez-opcion-punto::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
.ez-opcion:has(input:checked) em { background: var(--ez-acento-suave); color: var(--ez-primario); }
.ez-opcion:has(input:focus-visible) { box-shadow: var(--ez-foco); }

.ez-resumen-plan {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--ez-superficie-2); border: 1px solid var(--ez-borde); border-radius: 12px; padding: 11px 14px;
  font-size: 13.5px; color: var(--ez-tinta-2); font-variant-numeric: tabular-nums;
}
.ez-resumen-plan svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--ez-primario); }
.ez-resumen-plan[hidden] { display: none; }

.ez-paso-acciones { display: flex; gap: 10px; margin-top: 4px; }
.ez-paso-acciones .ez-boton { flex: 1; }
.ez-paso-acciones .ez-atras { flex: 0 0 auto; padding-inline: 20px; }

/* ── Ingreso: el "ya sé mi código" va dentro de la misma tarjeta ──── */
.ez-plegable-plano {
  margin-top: 22px; padding: 18px 0 0; border: 0; border-top: 1px solid var(--ez-borde); border-radius: 0;
  box-shadow: none; background: none;
}
.ez-plegable-plano summary { font-size: 14.5px; color: var(--ez-tinta-2); border-radius: 8px; }
.ez-plegable-plano .ez-form { margin-top: 16px; gap: 14px; }

/* ── Celular y tablet: la vitrina se achica a una franja ─────────── */
@media (max-width: 960px) {
  .ez-dividido-grilla { grid-template-columns: minmax(0, 1fr); }
  .ez-vitrina {
    position: relative; height: auto; min-height: 0; gap: 14px; padding: 18px 20px 22px;
  }
  .ez-vitrina .ez-marca, .ez-vitrina .ez-marca small { font-size: 19px; }
  .ez-vitrina .ez-marca svg { width: 28px; height: 28px; }
  .ez-vitrina-centro { max-width: none; }
  .ez-vitrina-sobre, .ez-vitrina-bajada, .ez-beneficios, .ez-maqueta, .ez-vitrina-pie { display: none; }
  .ez-vitrina-titulo { margin-top: 0; font-size: 22px; }
  .ez-dividido-cuerpo { padding: 14px 16px 32px; }
  body.ez-tramite .ez-dividido-cuerpo { padding-block: 14px 32px; }
  .ez-dividido-centro { padding-top: 14px; }
  .ez-dividido-arriba { justify-content: space-between; font-size: 13.5px; }
}
@media (max-width: 520px) {
  .ez-tarjeta-paso { padding: 22px 18px; }
  .ez-tarjeta-cabeza h1 { font-size: 24px; }
  .ez-opcion { grid-template-columns: 38px minmax(0, 1fr) 20px; gap: 2px 12px; padding: 13px 14px; }
  .ez-opcion-icono { width: 38px; height: 38px; border-radius: 11px; }
  .ez-opcion-icono svg { width: 19px; height: 19px; }
  .ez-pasos-barra { gap: 6px; }
  .ez-pasos-barra i { font-size: 11.5px; gap: 5px; }
  .ez-pasos-barra b { width: 19px; height: 19px; font-size: 11px; border-radius: 6px; }
  .ez-paso-acciones .ez-boton-grande { min-height: 50px; font-size: 16px; }
  .ez-paso-acciones .ez-atras { padding-inline: 14px; }
}
/* A 390px no entran número y nombre en los cuatro: queda el nombre del
   paso actual y los números de los demás. */
@media (max-width: 420px) {
  .ez-pasos-barra { grid-template-columns: repeat(4, auto); justify-content: stretch; }
  .ez-pasos-barra i:not(.ez-ahora) span { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   Pago del alta (pago.html): tres pasos numerados en tarjetas unidas
   por una línea, el importe grande arriba y el estado que se refresca.
   ═══════════════════════════════════════════════════════════════════ */
.ez-pago-pasos { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 16px; counter-reset: none; }
.ez-pago-pasos > li { position: relative; }
.ez-pago-paso { padding: 26px 28px; }
.ez-caja.ez-pago-paso + .ez-caja { margin-top: 0; }
.ez-pago-paso h2 { display: flex; align-items: center; gap: 12px; font-size: 19px; }
.ez-pago-paso h2 .ez-num-paso {
  width: 32px; height: 32px; margin: 0; border-radius: 10px; flex: none; vertical-align: 0;
  background: var(--ez-primario); color: #fff; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.ez-pago-paso > .ez-caja-sub { margin-top: 6px; padding-left: 44px; }
/* Lo que todavía no toca, apagado. */
.ez-pago-pasos > li:nth-child(3) .ez-num-paso { background: var(--ez-acento-suave); color: var(--ez-primario); }
/* Cuando pago.js muestra "Recibimos tu comprobante", el 2 queda hecho
   y el 3 pasa a ser el actual. Sin tocar JS: con :has. */
.ez-pago-pasos:has(#ez-ya-informado:not([hidden])) > li:nth-child(2) .ez-num-paso { background: var(--ez-acento-suave); color: transparent; position: relative; }
.ez-pago-pasos:has(#ez-ya-informado:not([hidden])) > li:nth-child(2) .ez-num-paso::after {
  content: ""; position: absolute; width: 11px; height: 6px; border: solid var(--ez-primario); border-width: 0 0 2.4px 2.4px;
  transform: translateY(-1px) rotate(-45deg);
}
.ez-pago-pasos:has(#ez-ya-informado:not([hidden])) > li:nth-child(3) .ez-num-paso { background: var(--ez-primario); color: #fff; }
.ez-pago-pasos:has(#ez-ya-informado:not([hidden])) > li:nth-child(3) .ez-pago-paso { border-color: var(--ez-primario); box-shadow: 0 0 0 3px rgb(91 76 230 / .1), var(--ez-sombra); }

/* El importe, grande y en su propia tarjetita violeta. */
.ez-importe-tarjeta {
  margin-top: 18px; padding: 20px 22px; border-radius: 14px; color: #fff; position: relative; overflow: hidden;
  background:
    radial-gradient(260px 160px at 100% 0%, rgb(139 124 246 / .55), transparent 70%),
    linear-gradient(135deg, #2a2468, #5b4ce6);
}
.ez-importe-tarjeta small { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #d9d4ff; }
.ez-importe-tarjeta .ez-importe { margin-top: 6px; gap: 6px 12px; }
.ez-importe-tarjeta .ez-importe strong { font-size: 40px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.ez-importe-tarjeta .ez-importe span { color: #d9d4ff; font-size: 14px; }
/* Si viene armado ("USD 150 (a cotización del día)") no entra a 40px. */
.ez-importe-tarjeta .ez-importe.ez-importe-largo strong { font-size: 30px; line-height: 1.15; }
.ez-importe-tarjeta .ez-importe.ez-importe-largo { display: grid; gap: 6px; }

/* Datos bancarios: una fila por dato, con su botón de copiar. */
.ez-datos-banco { margin-top: 16px; border-radius: 14px; border-color: var(--ez-borde); }
.ez-dato-banco { padding: 13px 14px 13px 16px; }
.ez-dato-banco small { font-size: 11.5px; letter-spacing: .06em; }
.ez-dato-banco code, .ez-dato-banco span.ez-valor { font-size: 16px; font-weight: 650; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ez-copiar { gap: 7px; min-width: 96px; }
/* El ícono va en CSS porque pago.js reemplaza el texto del botón
   ("Copiar" ↔ "Copiado") y se llevaría puesto un <svg> de adentro. */
.ez-copiar::before {
  content: ""; width: 10px; height: 11px; border: 1.8px solid currentColor; border-radius: 3px;
  box-shadow: -3px 3px 0 -1.8px var(--ez-superficie), -3px 3px 0 0 currentColor; margin-left: 3px;
}
.ez-copiar.ez-copiado { background: var(--ez-acento-suave); color: var(--ez-primario); border-color: transparent; }
.ez-copiar.ez-copiado::before {
  width: 10px; height: 5px; border: solid currentColor; border-width: 0 0 2px 2px; border-radius: 0; box-shadow: none;
  transform: translateY(-2px) rotate(-45deg); margin-left: 0;
}

/* Subir el comprobante */
.ez-soltar { margin-top: 16px; padding: 26px 20px; border-radius: 14px; background: #fbfaff; }
.ez-soltar-icono {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ez-acento-suave); color: var(--ez-primario); margin-bottom: 4px;
}
.ez-soltar .ez-soltar-icono svg { width: 24px; height: 24px; }
.ez-soltar > span:not(.ez-soltar-icono) { font-size: 13.5px; color: var(--ez-tinta-3); }
.ez-separador { margin-block: 20px; }

/* WhatsApp sin verde (Seba: nada de verde): botón claro con el ícono. */
.ez-boton-wa, .ez-boton-wa:hover {
  background: var(--ez-superficie); color: var(--ez-tinta); border: 1px solid var(--ez-borde-fuerte); box-shadow: none;
}
.ez-boton-wa:hover { border-color: var(--ez-primario); background: var(--ez-superficie-2); }
.ez-boton-wa svg { color: var(--ez-primario); }

/* El estado que se refresca: un punto que late con un anillo. */
.ez-pago-paso .ez-refresco {
  margin: 14px 0 0 44px; padding: 10px 14px; border-radius: 10px; background: var(--ez-superficie-2);
  color: var(--ez-tinta-2); font-weight: 550; width: fit-content; max-width: calc(100% - 44px);
}
.ez-refresco i { position: relative; flex: none; background: var(--ez-primario); animation: none; }
.ez-refresco i::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--ez-primario);
  opacity: 0; animation: ez-onda 1.8s ease-out infinite;
}
@keyframes ez-onda { 0% { opacity: .7; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .ez-refresco i::after { animation: none; } }

/* La columna de la derecha del pago y los otros estados */
.ez-lateral-caja { border-color: var(--ez-borde); }
.ez-lateral-caja code { font-size: 15px; font-weight: 650; color: var(--ez-primario); }
.ez-linea-tiempo { position: relative; }
.ez-linea-tiempo li { position: relative; }
.ez-linea-tiempo li:not(:last-child)::after {
  content: ""; position: absolute; left: 14px; top: 34px; bottom: -14px; width: 2px; border-radius: 2px; background: var(--ez-borde);
}
.ez-linea-tiempo li.ez-hecho:not(:last-child)::after { background: var(--ez-acento); }
.ez-linea-tiempo li.ez-hecho b { background: var(--ez-primario); }
.ez-estado-icono {
  width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: var(--ez-acento-suave); color: var(--ez-primario); margin-bottom: 6px;
}
.ez-estado-icono svg { width: 26px; height: 26px; }
.ez-listo-icono { background: linear-gradient(135deg, #8b7cf6, #5b4ce6); color: #fff; box-shadow: 0 14px 30px -12px rgb(74 59 211 / .6); }
.ez-listo code { font-weight: 650; color: var(--ez-primario); }

@media (max-width: 520px) {
  .ez-pago-paso { padding: 20px 16px; }
  .ez-pago-paso > .ez-caja-sub { padding-left: 0; }
  .ez-pago-paso .ez-refresco { margin-left: 0; max-width: 100%; }
  .ez-importe-tarjeta { padding: 16px 18px; }
  .ez-importe-tarjeta .ez-importe strong { font-size: 34px; }
  .ez-importe-tarjeta .ez-importe.ez-importe-largo strong { font-size: 24px; }
  .ez-copiar { min-width: 0; }
}

/* En las filas de dos campos, si uno tiene error el otro se estiraba
   (grid con align stretch) y el input quedaba de 70px de alto. */
.ez-form-dos { align-items: start; }
.ez-campo { align-content: start; }
/* En "Tu alta" el paso actual lleva un anillo, así no se confunde con
   los hechos (que ya no son verdes). */
.ez-linea-tiempo li.ez-ahora b { box-shadow: 0 0 0 4px var(--ez-acento-suave); }
/* En el celular la franja va con su alto y el resto es de la tarjeta
   (sin esto, en pantallas altas el grid repartía el alto entre las dos
   filas y quedaba un hueco enorme debajo de la franja). */
@media (max-width: 960px) {
  .ez-dividido-grilla { display: flex; flex-direction: column; }
  .ez-dividido-grilla > .ez-vitrina { flex: none; }
  .ez-dividido-grilla > .ez-dividido-cuerpo { flex: 1 0 auto; }
}
/* En columna, la franja tiene que ocupar todo el ancho (arriba tenía
   align-self: start para el sticky de escritorio). */
@media (max-width: 960px) { .ez-dividido-grilla > .ez-vitrina { align-self: stretch; } }

/* ── Registro: aceptar términos y el campo trampa ────────────────────── */
.ez-casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 500 !important; font-size: 14px; color: var(--ez-tinta-2); cursor: pointer; }
.ez-casilla input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ez-primario); }
.ez-casilla a { font-weight: 600; }
/* Fuera de la vista pero en el formulario (display:none lo saltean
   algunos robots). */
.ez-trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* La sugerencia de mail mal escrito ("¿Quisiste decir …?") */
.ez-sugerencia { margin: 4px 0 0; font-size: 13.5px; color: var(--ez-tinta-2); }
.ez-sugerencia button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ez-enlace); cursor: pointer; text-decoration: underline; }

/* ── Más aire en el panel de la izquierda (Seba, 22-sep: "muy
   compacto"). Van al final para pisar lo de arriba sin tocar cada regla. */
.ez-vitrina-titulo { margin-top: 22px; }
.ez-vitrina-bajada { margin-top: 18px; font-size: 17px; }
.ez-beneficios { margin-top: 40px; gap: 24px; }
.ez-beneficios li { grid-template-columns: 44px 1fr; gap: 16px; align-items: center; }
.ez-beneficio-icono { width: 44px; height: 44px; border-radius: 12px; }
.ez-beneficio-icono svg { width: 22px; height: 22px; display: block; }
.ez-beneficios b { font-size: 16px; line-height: 1.3; }
.ez-maqueta { margin-top: 44px; }

/* ═══════════════════════════════════════════════════════════════════
   Modales (js/modal.js) — Seba, 22-sep: "con validaciones modales armado
   todo prolijo". <dialog> nativo; acá sólo la piel.
   ═══════════════════════════════════════════════════════════════════ */
.ez-modal {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0;
  border-radius: 18px; background: var(--ez-superficie); color: var(--ez-tinta);
  box-shadow: 0 30px 80px -20px rgb(22 19 45 / .45), 0 0 0 1px var(--ez-borde);
  overflow: auto;
}
.ez-modal-grande { width: min(760px, calc(100vw - 32px)); }
.ez-modal::backdrop { background: rgb(22 19 45 / .45); backdrop-filter: blur(3px); }
.ez-modal[open] { animation: ez-modal-entra .18s ease-out; }
@keyframes ez-modal-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.ez-modal-cabeza { display: flex; gap: 14px; align-items: flex-start; padding: 22px 22px 0; }
.ez-modal-cabeza h2 { font-size: 19px; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; }
.ez-modal-cabeza p { margin-top: 4px; font-size: 14.5px; color: var(--ez-tinta-2); line-height: 1.5; }
.ez-modal-cabeza > div { flex: 1; min-width: 0; }
.ez-modal-icono {
  width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center;
  background: var(--ez-acento-suave); color: var(--ez-primario);
}
.ez-modal-icono svg { width: 22px; height: 22px; display: block; }
.ez-modal-icono-peligro { background: var(--ez-peligro-suave); color: var(--ez-peligro); }
.ez-modal-x {
  width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--ez-tinta-3);
  display: grid; place-items: center; cursor: pointer; flex: none; margin: -4px -6px 0 0;
}
.ez-modal-x:hover { background: var(--ez-superficie-2); color: var(--ez-tinta); }
.ez-modal-x svg { width: 18px; height: 18px; }
.ez-modal-cuerpo { padding: 16px 22px 4px; display: grid; gap: 14px; }
.ez-modal-cuerpo:empty { display: none; }
.ez-modal-error { margin: 0; }
.ez-modal-casilla {
  display: flex; gap: 12px; align-items: flex-start; margin: 12px 22px 0; padding: 14px 16px;
  border-radius: 12px; background: var(--ez-aviso-suave); color: var(--ez-tinta); font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.ez-modal-casilla input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ez-primario); }
.ez-modal-pie { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; padding: 18px 22px 22px; }
.ez-modal-datos { display: grid; gap: 0; margin: 0; border: 1px solid var(--ez-borde); border-radius: 12px; overflow: hidden; }
.ez-modal-dato { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 10px 14px; font-size: 14.5px; }
.ez-modal-dato + .ez-modal-dato { border-top: 1px solid var(--ez-borde); }
.ez-modal-dato dt { color: var(--ez-tinta-3); font-weight: 600; }
.ez-modal-dato dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ez-modal-datos-fila { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ez-modal-datos-fila .ez-modal-dato { grid-template-columns: 1fr; gap: 2px; }
.ez-modal-datos-fila .ez-modal-dato + .ez-modal-dato { border-top: 0; border-left: 1px solid var(--ez-borde); }
@media (max-width: 560px) {
  .ez-modal { width: calc(100vw - 16px); border-radius: 16px; }
  .ez-modal-dato { grid-template-columns: 1fr; gap: 2px; }
  .ez-modal-datos-fila { grid-template-columns: 1fr; }
  .ez-modal-datos-fila .ez-modal-dato + .ez-modal-dato { border-left: 0; border-top: 1px solid var(--ez-borde); }
  .ez-modal-pie .ez-boton { flex: 1 1 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Panel maestro
   ═══════════════════════════════════════════════════════════════════ */
.ez-mx-ancho { max-width: 1200px; }
.ez-maestro main { padding-top: 32px; }
.ez-mx-quien { font-size: 13.5px; color: var(--ez-banda-tinta-2); }
/* Ingreso */
.ez-mx-ingreso { max-width: 440px; }
.ez-mx-ingreso .ez-caja { margin-top: 24px; }
.ez-mx-candado {
  width: 52px; height: 52px; margin: 0 auto 4px; border-radius: 14px; display: grid; place-items: center;
  background: var(--ez-banda); color: #c1bbe8;
}
.ez-mx-candado svg { width: 24px; height: 24px; }
.ez-mx-ingreso h1 { font-size: 28px; font-weight: 750; }
/* Cabeza */
.ez-maestro-cabeza { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.ez-mx-saludo { font-size: 14px; font-weight: 600; color: var(--ez-primario); }
.ez-maestro-cabeza h1 { font-size: 32px; font-weight: 750; letter-spacing: -0.03em; margin-top: 2px; }
/* Tarjetas que filtran */
.ez-resumen-maestro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.ez-mx-kpi {
  position: relative; display: grid; gap: 4px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  padding: 18px 18px 16px 70px; min-height: 88px; border-radius: 16px; border: 1px solid var(--ez-borde);
  background: var(--ez-superficie); box-shadow: var(--ez-sombra); transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ez-mx-kpi:hover { border-color: #cdc6f5; transform: translateY(-1px); }
.ez-mx-kpi[aria-pressed="true"] { border-color: var(--ez-primario); box-shadow: 0 0 0 3px rgb(91 76 230 / .15), var(--ez-sombra); }
.ez-mx-kpi small { font-size: 13px; font-weight: 600; color: var(--ez-tinta-2); line-height: 1.3; }
.ez-mx-kpi strong { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.ez-mx-kpi-ic { position: absolute; left: 18px; top: 18px; width: 38px; height: 38px; border-radius: 11px; background-position: center; background-repeat: no-repeat; background-size: 20px; }
.ez-mx-kpi-ambar .ez-mx-kpi-ic { background-color: #fdf0db; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c76a05' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ez-mx-kpi-violeta .ez-mx-kpi-ic { background-color: var(--ez-acento-suave); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b4ce6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h18v10H3zM3 11h18M7 15h3'/%3E%3C/svg%3E"); }
.ez-mx-kpi-verde .ez-mx-kpi-ic { background-color: #e4f6ee; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b8f5f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.ez-mx-kpi-rojo .ez-mx-kpi-ic { background-color: #fbe9e9; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c02b2b' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E"); }
.ez-mx-kpi-violeta strong { color: var(--ez-primario); }
/* Filtros y tabla */
.ez-maestro .ez-pestanas { margin-bottom: 18px; }
.ez-maestro .ez-filtros { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ez-mx-buscar { position: relative; flex: 1 1 320px; }
.ez-mx-buscar svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ez-tinta-3); pointer-events: none; }
.ez-mx-buscar .ez-entrada { padding-left: 40px; max-width: none; width: 100%; }
.ez-maestro .ez-filtros select.ez-entrada { flex: 0 1 240px; max-width: 240px; }
.ez-maestro .ez-tabla-caja { border-radius: 16px; border: 1px solid var(--ez-borde); background: var(--ez-superficie); box-shadow: var(--ez-sombra); overflow: hidden; }
.ez-mx-tabla { width: 100%; }
.ez-mx-tabla th { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ez-tinta-3); background: var(--ez-superficie-2); }
.ez-mx-tabla td { vertical-align: middle; padding-top: 14px; padding-bottom: 14px; }
.ez-mx-tabla td small { display: block; color: var(--ez-tinta-3); font-size: 13px; margin-top: 2px; }
.ez-mx-fila-atencion { background: #fbfaff; }
.ez-mx-fila-atencion td:first-child { box-shadow: inset 3px 0 0 var(--ez-primario); }
.ez-mx-negocio { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ez-mx-negocio > div { min-width: 0; }
.ez-mx-av {
  width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, #8b7cf6, #5b4ce6); color: #fff; font-size: 13px; font-weight: 800;
}
.ez-mx-nombre { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; font-size: 15px; color: var(--ez-tinta); cursor: pointer; text-align: left; }
.ez-mx-nombre:hover { color: var(--ez-primario); text-decoration: underline; }
.ez-mx-wa { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-size: 13px; font-weight: 600; color: #178c46; text-decoration: none; }
.ez-mx-wa:hover { text-decoration: underline; }
.ez-mx-wa svg { width: 14px; height: 14px; }
.ez-mx-acciones .ez-acciones-fila { justify-content: flex-end; flex-wrap: nowrap; }
.ez-maestro .ez-boton svg { width: 16px; height: 16px; }
/* Comprobante */
.ez-mx-visor { border: 1px solid var(--ez-borde); border-radius: 12px; background: var(--ez-superficie-2); overflow: hidden; display: grid; place-items: center; min-height: 220px; }
.ez-mx-foto { display: block; max-width: 100%; max-height: 60vh; object-fit: contain; }
.ez-mx-pdf { width: 100%; height: 60vh; border: 0; background: #fff; }
.ez-mx-sin-archivo { display: grid; justify-items: center; gap: 8px; padding: 34px 24px; text-align: center; color: var(--ez-tinta-2); font-size: 14.5px; }
.ez-mx-sin-archivo svg { width: 34px; height: 34px; color: var(--ez-tinta-3); }
/* Datos de cobro */
.ez-mx-pesos { position: relative; }
.ez-mx-pesos span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ez-tinta-3); font-weight: 600; }
.ez-mx-pesos .ez-entrada { padding-left: 30px; }
.ez-mx-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ez-mx-cobro-pie { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.ez-mx-sin-guardar { margin-right: auto; font-size: 14px; font-weight: 600; color: var(--ez-aviso); }
.ez-mx-antes { color: var(--ez-tinta-3); text-decoration: line-through; }

@media (max-width: 900px) { .ez-resumen-maestro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* En el celular cada negocio es una tarjeta: la tabla de 5 columnas no entra. */
@media (max-width: 700px) {
  .ez-maestro-cabeza { flex-direction: column; align-items: stretch; }
  .ez-maestro-cabeza h1 { font-size: 26px; }
  .ez-mx-kpi { padding: 14px 14px 14px 60px; min-height: 76px; }
  .ez-mx-kpi-ic { left: 14px; top: 14px; width: 34px; height: 34px; }
  .ez-mx-kpi strong { font-size: 24px; }
  .ez-maestro .ez-filtros select.ez-entrada { flex: 1 1 100%; max-width: none; }
  .ez-maestro .ez-tabla-caja { background: none; border: 0; box-shadow: none; overflow: visible; }
  .ez-mx-tabla, .ez-mx-tabla tbody { display: block; }
  .ez-mx-tabla thead { display: none; }
  .ez-mx-tabla tr { display: grid; gap: 10px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--ez-borde); border-radius: 16px; background: var(--ez-superficie); box-shadow: var(--ez-sombra); }
  .ez-mx-tabla td { display: block; padding: 0; border: 0; }
  .ez-mx-tabla td[data-rotulo]:not(:first-child)::before { content: attr(data-rotulo); display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ez-tinta-3); margin-bottom: 3px; }
  .ez-mx-tabla td.ez-num { text-align: left; }
  .ez-mx-acciones .ez-acciones-fila { justify-content: stretch; flex-wrap: wrap; }
  .ez-mx-acciones .ez-boton { flex: 1 1 auto; }
  .ez-mx-fila-atencion td:first-child { box-shadow: none; }
  .ez-mx-fila-atencion { border-color: #cdc6f5 !important; box-shadow: 0 0 0 3px rgb(91 76 230 / .1) !important; }
  .ez-mx-tabla .ez-tabla-vacia { text-align: center; }
}
@media (max-width: 700px) {
  /* ezra.css le da a la tabla un ancho mínimo de escritorio: con las filas
     hechas tarjeta, ese mínimo las sacaba de la pantalla. */
  .ez-mx-tabla { min-width: 0 !important; width: 100%; }
  .ez-mx-tabla tr { min-width: 0; max-width: 100%; }
  /* Las tres pestañas no entran en 390px: se deslizan de costado. */
  .ez-maestro .ez-pestanas { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ez-maestro .ez-pestanas::-webkit-scrollbar { display: none; }
  .ez-maestro .ez-pestana { flex: none; white-space: nowrap; }
}
@media (max-width: 700px) {
  /* Un degradé en el borde avisa que hay más pestañas a la derecha. */
  .ez-maestro .ez-pestanas { mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
}

/* Registrar un pago (maestro): cómo pagó, en una fila de dos opciones. */
.ez-rp-medios { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 12px; }
.ez-rp-medios legend { font-weight: 600; padding: 0; margin-bottom: 6px; width: 100%; }
.ez-rp-medio { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--ez-borde, #e3e1f2);
  border-radius: 10px; cursor: pointer; background: #fff; }
.ez-rp-medio:has(input:checked) { border-color: var(--ez-primario); background: color-mix(in srgb, var(--ez-primario) 7%, #fff); }
.ez-rp-medio input { accent-color: var(--ez-primario); margin: 0; }
.ez-rp-medio:has(input:disabled) { cursor: default; }
.ez-rp-cuerpo { display: grid; gap: 18px; }
.ez-rp-cuerpo .ez-campo { display: grid; gap: 6px; }
.ez-rp-cuerpo .ez-ayuda-campo, .ez-rp-cuerpo .ez-error-campo { margin: 0; }
.ez-mx-adicional { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ez-mx-adicional small { flex-basis: 100%; color: var(--ez-primario); }
.ez-importe-tarjeta .ez-importe-detalle { display: block; margin-top: 8px; color: #d9d4ff; font-size: 13px; text-transform: none; letter-spacing: normal; font-weight: 500; }

/* ── Aire en la letra (Seba, 22-sep: "se ve muy compacto") ───────── */
/* Plus Jakarta ya trae el espacio entre palabras angosto; con el
   tracking negativo que venía de la letra anterior las palabras se
   pegaban ("Tunegocio", "porWhatsApp"). Títulos casi sin tracking,
   un poco más de espacio entre palabras en todo el texto. */
body { word-spacing: .06em; }
h1, h2, h3, h4, .ez-tramite-cabeza h1, .ez-tarjeta-cabeza h1, .ez-vitrina-titulo,
.ez-marca, .ez-barra .ez-marca, .ez-vitrina .ez-marca,
.ez-caja h2, .ez-modal-cabeza h2, .ez-maestro-cabeza h1 { letter-spacing: -0.012em; }
.ez-vitrina-titulo { line-height: 1.12; }
.ez-pasos-barra i { gap: 9px; }
.ez-opciones { gap: 12px; }
.ez-opcion { padding: 16px 18px; }
.ez-opcion small { line-height: 1.5; margin-top: 2px; }

/* El mail de la cuenta: aviso de mail sin confirmar en el pago. */
.ez-mt-16 { margin-top: 16px; }
.ez-boton-texto { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ez-primario);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ez-boton-texto:disabled { opacity: .6; cursor: default; }
.ez-mx-sin-confirmar { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px;
  font-weight: 700; background: #fff4e0; color: #9a5b00; white-space: nowrap; }

/* Paso 0 del registro: el producto, arriba de los planes (Ezra Ventas). */
.ez-productos { margin-bottom: 18px; }
.ez-planes-titulo { margin: 0 0 10px; }

/* confirmar.html: el botón no pegado al texto de arriba. */
#ez-seguir { margin-top: 18px; }

/* ── Ezra Ventas en pago.html: "confirmá tu mail y arranca la prueba" ── */
.ez-prueba-pasos { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: paso; display: grid; gap: 14px; }
.ez-prueba-pasos li { counter-increment: paso; position: relative; padding-left: 40px; color: var(--ez-tinta-2); line-height: 1.55; }
.ez-prueba-pasos li::before {
  content: counter(paso); position: absolute; left: 0; top: -1px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ez-acento-suave); color: var(--ez-primario); font-weight: 700; font-size: 14px;
  display: grid; place-items: center;
}
.ez-prueba-pasos strong { color: var(--ez-tinta); }

/* Registro de Ventas (27-sep): probar gratis o pagar ya, y los planes. */
.ez-modo-ventas { margin-bottom: 16px; }
#ez-planes-ventas { margin-bottom: 14px; }
#ez-planes-ventas[hidden], .ez-modo-ventas[hidden] { display: none; }

/* ── Continuar con Google (27-sep; js/google.js) ──────────────────────
   El botón lo dibuja Google (un iframe con su diseño, que no se toca).
   Acá sólo el lugar donde va, la raya con la "o" y cómo queda el paso
   de los datos una vez que se eligió la cuenta de Google. */
.ez-google { display: flex; justify-content: center; min-height: 44px; }
.ez-caja > .ez-google { margin-top: 22px; }            /* ingresar.html: aire bajo el título */
#ez-err-google:empty { display: none; }                /* vacío no ocupa un renglón de la grilla */
.ez-google[hidden], .ez-o[hidden], .ez-google-hecho[hidden], .ez-sin-google[hidden] { display: none; }
.ez-o { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--ez-tinta-3); font-size: 13px; }
.ez-o::before, .ez-o::after { content: ""; flex: 1; height: 1px; background: var(--ez-borde); }
.ez-google-hecho {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 18px;
  border: 1px solid var(--ez-borde); border-radius: 12px; background: var(--ez-superficie-2);
}
.ez-google-hecho > svg { width: 22px; height: 22px; flex: none; }
.ez-google-hecho > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ez-google-hecho b { font-size: 14.5px; color: var(--ez-tinta); overflow-wrap: anywhere; }
.ez-google-hecho small { font-size: 13px; color: var(--ez-tinta-2); line-height: 1.45; }
.ez-entrada[readonly] { background: var(--ez-superficie-2); color: var(--ez-tinta-2); }