/* ==========================================================================
   Trapicheros — LA PUERTA: entrar y crear la cuenta. Archivo aparte a proposito.

   El login viejo tenia siete bloques de texto (antetitulo, titular a dos lineas,
   entradilla, tarjeta blanca con su propio titulo "Entrar", tarjeta de "primera
   vez" con parrafo, boton y familia) para pedir dos datos. Aqui manda el
   formulario: marca, dos campos, un boton y una linea. Todo lo demas sobra.

   Va aparte de cuenta.css porque ese archivo lo cargan diez paginas: tocar
   .card o .campo alli movia registro, KYC, perfil y el panel de empresas.
   ========================================================================== */

/* ── El lienzo: negro con dos luces ────────────────────────────────────────
   Las luces son degradados, no imagenes: no cuestan una peticion y en una
   linea cubana eso importa mas que en cualquier otro sitio. */
body.ent{
  min-height:100dvh;
  /* `align-items:center` centraba, pero cuando el contenido pasa del alto de la
     ventana (el paso 3 con sus mapas) el trozo de arriba se sale y NO hay forma
     de subir el scroll. Con `margin:auto` en el hijo se centra igual y el
     desbordamiento sigue siendo alcanzable. */
  display:flex;flex-direction:column;
  padding:clamp(22px,7vw,48px) 20px;
  background:
    radial-gradient(74vw 52vh at 50% -8%, rgba(196,206,214,.13), transparent 60%),
    radial-gradient(60vw 44vh at 50% 108%, rgba(120,132,144,.09), transparent 62%),
    var(--tinta);
}

.ent-caja{width:100%;max-width:392px;margin:auto}

/* ── Marca ────────────────────────────────────────────────────────────────
   El logo iba en una barra pegajosa arriba Y otra vez en el titular. Una sola
   vez, centrado: en una pantalla que solo pide usuario y clave, la marca es
   toda la decoracion que hace falta. */
.ent-marca{display:flex;flex-direction:column;align-items:center;gap:14px;
  margin:0 0 34px;text-decoration:none}
.ent-marca .logo{
  width:52px;height:52px;flex:none;
  background:linear-gradient(148deg,#ffffff 0%,#cdd6dd 26%,#8d979f 52%,#eef3f6 72%,#a9b3bb 100%);
  -webkit-mask:url(logo2-mask.webp) center/contain no-repeat;
          mask:url(logo2-mask.webp) center/contain no-repeat;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.6));
}
.ent-marca b{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.42rem;letter-spacing:.06em;line-height:1;
  background:linear-gradient(180deg,#ffffff 0%,#d8dfe4 42%,#9aa4ac 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ent-marca span{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--humo);margin-top:-6px;
}

/* ── Campos con etiqueta flotante ─────────────────────────────────────────
   La etiqueta hace de rotulo Y de marcador de posicion, asi que el texto de
   pantalla se parte por dos. Sube al escribir, y sigue siendo un <label> de
   verdad para el lector de pantalla: sin etiqueta no hay campo accesible.
   El input necesita placeholder=" " (un espacio) o :placeholder-shown nunca
   se cumple y la etiqueta se queda arriba desde el principio. */
.ent-campo{position:relative;margin-bottom:12px}
.ent-campo input{
  width:100%;height:60px;padding:22px 15px 7px;
  font-family:inherit;font-size:max(1rem,16px);color:var(--muro);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(229,228,226,.13);border-radius:14px;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.ent-campo label{
  position:absolute;left:16px;top:10px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--humo);pointer-events:none;
  transition:top .16s ease,font-size .16s ease,color .16s ease;
}
.ent-campo input:placeholder-shown + label{top:20px;font-size:.78rem;letter-spacing:.02em;
  text-transform:none;font-family:var(--body)}
.ent-campo input:focus + label{top:10px;font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;font-family:var(--mono);color:var(--muro-2)}
.ent-campo input:focus{
  outline:none;background:rgba(255,255,255,.07);
  border-color:rgba(229,228,226,.42);
  box-shadow:0 0 0 4px rgba(229,228,226,.07);
}
/* El anillo global de :focus-visible es un cuadrado de 3 px que se sale del
   redondeo: aqui manda el borde de arriba, que ya marca el foco. */
.ent-campo input:focus-visible{outline:none}
#l-2fa{letter-spacing:.42em;font-family:var(--mono)}

/* Los grises de la marca (`--humo-d`) dan 2,5:1 sobre este fondo y aqui hacen de
   marcador de posicion: texto que hay que LEER. Van en `--humo`, que pasa de 4,5:1.
   Un gris bonito que no se lee no es una decision de diseño, es un fallo. */
/* Ojito: cuenta.js lo mete dentro del campo, hay que recolocarlo. */
.ent-campo.con-ojo input{padding-right:52px}
.ent-campo .ojo{right:6px;color:var(--humo)}
.ent-campo .ojo:hover{color:var(--muro)}

/* ── Boton ────────────────────────────────────────────────────────────────
   Platino con letra tinta, que es como se ve un boton principal en el resto
   del grupo. Sin la sombra dura de la pizarra: aqui no hay nada mas en la
   pantalla, no hace falta gritar. */
.ent-btn{
  width:100%;height:56px;margin-top:10px;cursor:pointer;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.02rem;letter-spacing:.04em;
  color:#0B0B0C;border:0;border-radius:14px;
  background:linear-gradient(180deg,#f4f7f9 0%,#dfe5e9 46%,#bcc5cc 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  transition:transform .16s cubic-bezier(.16,1,.3,1),box-shadow .16s ease,filter .16s ease;
}
.ent-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.6)}
.ent-btn:active{transform:translateY(0);box-shadow:0 6px 16px rgba(0,0,0,.5)}
.ent-btn[disabled]{cursor:progress;filter:saturate(.4) brightness(.82);transform:none}

/* ── Aviso ────────────────────────────────────────────────────────────────
   El de cuenta.css es un ladrillo gris claro que en esta pantalla parece un
   trozo de otra web. Aqui es una nota traslucida del color del mensaje. */
/* cuenta.css pinta el texto de TODO <p> con el degradado platino
   (`background-clip:text` + `-webkit-text-fill-color:transparent`). Al darle a
   estas cajas un fondo propio se queda sin degradado que recortar y el texto sale
   INVISIBLE: la caja del aviso salia vacia. Aqui se devuelve la letra a su color. */
.ent p{-webkit-text-fill-color:currentColor;background-image:none}
.ent .aviso{border-radius:12px;padding:.8em 1em;font-size:.88rem;margin:0 0 14px;
  border:1px solid transparent;line-height:1.45}
.ent .aviso.err{background:rgba(214,120,120,.12);border-color:rgba(214,120,120,.4);color:#f0d5d5;
  -webkit-text-fill-color:currentColor}   /* gana a `.aviso:not(.rojo):not(.ok)` de cuenta.css */
.ent .aviso.ok{background:rgba(160,196,170,.12);border-color:rgba(160,196,170,.38);color:#dbeee0;
  -webkit-text-fill-color:currentColor}

/* ── Pie ──────────────────────────────────────────────────────────────────
   Los tres pasos del registro se explican EN el registro. Aqui una linea. */
.ent-pie{text-align:center;margin:26px 0 0;font-size:.9rem;color:var(--humo)}
.ent-pie a{color:var(--muro);text-decoration:none;border-bottom:1px solid rgba(229,228,226,.35);
  padding-bottom:1px;transition:border-color .16s ease}
.ent-pie a:hover{border-bottom-color:var(--muro)}

@media (prefers-reduced-motion:reduce){
  .ent-campo input,.ent-campo label,.ent-btn,.ent-pie a{transition:none}
}


/* ══════════════════════════════════════════════════════════════════════════
   REGISTRO (paso 1 de 3)

   Antes era la pantalla mas fea del sitio: tarjeta gris claro con los campos
   en blanco y borde negro de 2 px, botones grises con sombra dura, y las
   "pistas" pintadas con el degradado platino, o sea ilegibles. Aqui usa
   exactamente la misma puerta que el login: mismos campos, mismo boton, mismo
   negro. Cambiar de pantalla dentro del mismo flujo no deberia notarse.
   ══════════════════════════════════════════════════════════════════════════ */

.ent-caja.ancha{max-width:440px}

/* ── Los tres pasos ───────────────────────────────────────────────────────
   Tres barras: la de ahora encendida y las otras dos apagadas. Dice donde
   estas y cuanto falta sin gastar una frase. */
.ent-pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 26px;padding:0;list-style:none}
.ent-pasos li{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--humo-d);padding-top:9px;border-top:2px solid rgba(255,255,255,.12);
}
.ent-pasos li.act{color:var(--muro);border-top-color:var(--muro)}
.ent-pasos li.hecho{color:var(--humo);border-top-color:var(--humo)}

.ent-titulo{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.75rem;line-height:1;letter-spacing:.02em;margin:0 0 6px;
  background:linear-gradient(180deg,#ffffff 0%,#d8dfe4 45%,#9aa4ac 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ent-sub{margin:0 0 24px;font-size:.92rem;color:var(--humo)}

/* ── Telefono: pais + numero ──────────────────────────────────────────────
   El pais va en su propia caja estrecha. El desplegable siempre tiene valor,
   asi que su etiqueta se queda arriba y no flota. */
.ent-tel{display:grid;grid-template-columns:116px 1fr;gap:10px;margin-bottom:12px}
.ent-tel .ent-campo{margin-bottom:0}
.ent-campo select{
  width:100%;height:60px;padding:22px 10px 7px;appearance:none;
  font-family:inherit;font-size:max(1rem,16px);color:var(--muro);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(229,228,226,.13);border-radius:14px;
}
.ent-campo select:focus{outline:none;background:rgba(255,255,255,.07);
  border-color:rgba(229,228,226,.42);box-shadow:0 0 0 4px rgba(229,228,226,.07)}
.ent-campo select + label{top:10px;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase}

/* ── Boton dentro del campo (Verificar / Comprobar) ───────────────────────
   Antes iba debajo, a todo lo ancho, y parecia el boton principal de la
   pantalla compitiendo con Siguiente. Dentro del campo se lee como lo que es:
   una accion de ESE dato. */
.ent-campo.con-accion input{padding-right:112px}
.ent-mini{
  position:absolute;right:7px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--tinta);border:0;border-radius:10px;
  background:linear-gradient(180deg,#f4f7f9 0%,#dfe5e9 46%,#bcc5cc 100%);
  padding:.72em 1em;cursor:pointer;transition:filter .16s ease,opacity .16s ease;
}
.ent-mini:hover{filter:brightness(1.08)}
.ent-mini[disabled]{cursor:default;opacity:.5}
/* `linea` la pone registro.js cuando el numero ya quedo verificado. */
.ent-mini.linea{background:none;color:#6FE3AC;border:1px solid rgba(111,227,172,.5)}

/* La caja del codigo es un bloque completo (campo + pista): necesita su propia
   separacion, o la pista se pega al campo de la contrasena. */
#caja-codigo{margin-bottom:12px}
.ent-pista{margin:.55em 0 0;font-size:.78rem;color:var(--humo);
  -webkit-text-fill-color:currentColor;background-image:none}

.ent-legal{text-align:center;margin:14px 0 0;font-size:.76rem;color:var(--humo-d);
  -webkit-text-fill-color:currentColor;background-image:none}
.ent-legal a{color:var(--humo)}

@media (max-width:380px){
  .ent-tel{grid-template-columns:104px 1fr;gap:8px}
  .ent-campo.con-accion input{padding-right:104px}
}

/* ══════════════════════════════════════════════════════════════════════════
   COMPATIBILIDAD: las pantallas que todavia pintan .campo, .btn y .card

   Los pasos 2 y 3 del registro (kyc.html + kyc.js, perfil.html) montan su HTML
   desde el JS con las clases viejas de cuenta.css. En vez de reescribir ese JS
   —y arriesgar la captura de la camara, que es lo que sostiene el KYC— la
   puerta viste esas clases cuando estan dentro de `body.ent`. Una pantalla
   nueva no necesita nada de esto: usa `.ent-campo`.
   ══════════════════════════════════════════════════════════════════════════ */

/* El degradado platino de cuenta.css pinta el texto de TODO p/li/h1..h6 con
   `background-clip:text`. Dentro de la puerta hay fondos propios, asi que ese
   degradado deja la letra invisible o la convierte en una chapa ilegible: era
   justo lo que se veia en el paso 2. Aqui vuelve el color plano. */
.ent p,.ent li,.ent h1,.ent h2,.ent h3,.ent h4,.ent h5,.ent h6,
.ent .d,.ent .marca,.ent summary,.ent b,.ent strong{
  background-image:none;-webkit-text-fill-color:currentColor;filter:none;
}

.ent .card{background:rgba(255,255,255,.035);color:inherit;box-shadow:none;
  border:1px solid rgba(255,255,255,.09);border-radius:18px;padding:18px;margin:0 0 14px}
.ent .card::before{display:none}          /* el filo de metal de cuenta.css */
.ent .card h2{font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1.06rem;letter-spacing:.05em;color:var(--muro);margin:0 0 14px}

/* Grupos de casillas del paso 3 */
.ent .grupo{margin-bottom:18px}
.ent .grupo > .tit{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--humo);margin:0 0 .7em}
.ent .opciones{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ent .op{display:flex;align-items:center;gap:.6em;padding:.75em .85em;
  border:1px solid rgba(255,255,255,.13);border-radius:12px;cursor:pointer;
  font-size:.94rem;background:rgba(255,255,255,.03);color:var(--muro);user-select:none;
  transition:border-color .16s ease,background .16s ease}
.ent .op input{width:18px;height:18px;flex:none;accent-color:#6FE3AC;margin:0}
.ent .op:hover{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.ent .op.marcada{border-color:rgba(111,227,172,.55);background:rgba(111,227,172,.1)}

.ent .campo{margin-bottom:12px;position:relative}
.ent .campo > label{
  display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--humo);margin-bottom:.5em;position:static;
}
.ent .campo input,.ent .campo select,.ent .campo textarea{
  width:100%;padding:.95em 1em;font-family:inherit;font-size:max(1rem,16px);
  color:var(--muro);background:rgba(255,255,255,.045);
  border:1px solid rgba(229,228,226,.13);border-radius:14px;
}
.ent .campo textarea{resize:vertical;min-height:96px}
.ent .campo select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muro) 50%),
                   linear-gradient(135deg,var(--muro) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-right:40px}
.ent .campo input:focus,.ent .campo select:focus,.ent .campo textarea:focus{
  outline:none;background:rgba(255,255,255,.07);border-color:rgba(229,228,226,.42);
  box-shadow:0 0 0 4px rgba(229,228,226,.07)}
.ent .campo .pista,.ent .pista{font-size:.78rem;color:var(--humo);margin:.5em 0 0}

/* Botones: el de cuenta.css es el brutalista con sombra dura. Dentro de la
   puerta manda el de la puerta. */
.ent .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  width:100%;min-height:54px;padding:.9em 1.4em;cursor:pointer;
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  font-size:1rem;letter-spacing:.04em;color:#0B0B0C;border:0;border-radius:14px;
  background:linear-gradient(180deg,#f4f7f9 0%,#dfe5e9 46%,#bcc5cc 100%);
  box-shadow:0 10px 26px rgba(0,0,0,.5);text-decoration:none;
  transition:transform .16s var(--curva-corta),box-shadow .16s ease,filter .16s ease;
}
.ent .btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.6)}
.ent .btn:active{transform:translateY(0)}
.ent .btn[disabled]{filter:saturate(.4) brightness(.8);cursor:not-allowed;transform:none}
/* Secundario: el mismo boton en linea, para "Repetir", "Atras" y compañia. */
.ent .btn.linea,.ent .btn.btn-linea{
  background:none;color:var(--muro);border:1px solid rgba(255,255,255,.22);box-shadow:none}
.ent .btn.linea:hover,.ent .btn.btn-linea:hover{background:rgba(255,255,255,.07)}
.ent .btn.peligro-linea{
  background:none;color:#E9A9A9;border:1px solid rgba(233,169,169,.35);box-shadow:none;
  font-size:.8rem;min-height:0;padding:.7em 1.2em;width:auto}
.ent .btn.peligro-linea:hover{background:rgba(233,169,169,.1)}
.ent .dos{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.ent .dos{grid-template-columns:1fr}}
.ent .con-boton{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.ent .con-boton .btn{width:auto;min-height:0;padding:.8em 1.1em;font-size:.85rem}

/* Bloques de texto sueltos (instrucciones del paso 2 y 3).
   `:not(.btn)` es obligatorio: en cuenta.css `.bloque` tambien significa "boton
   a todo lo ancho" (`btn bloque`), y sin esto el fondo translucido pisaba el
   platino del boton y "Comenzar" salia apagado, como si estuviera deshabilitado. */
.ent .bloque:not(.btn){background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
  border-radius:14px;padding:16px;margin-bottom:14px}
.ent .btn.bloque{width:100%;margin-top:8px}
.ent .bloque:not(.btn) h3,.ent .bloque .tit{margin-top:0}
.ent .centro{text-align:center}
.ent .malo{color:#E9A9A9}

/* ── Paso 2: la camara ────────────────────────────────────────────────────
   El visor es la pantalla entera del paso: se le da forma y el resto de la
   puerta desaparece detras. */
.ent .kyc-instr{font-size:.92rem;color:var(--humo);margin:0 0 14px}
.ent .kyc-vwrap,.ent .kyc-marco{
  position:relative;border-radius:18px;overflow:hidden;background:#000;
  border:1px solid rgba(255,255,255,.14);margin-bottom:14px}
.ent .kyc-vwrap video,.ent .kyc-marco video,.ent .kyc-marco img,.ent .kyc-vwrap img{
  display:block;width:100%;height:auto}
.ent .kyc-rec{
  position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:.45em;
  background:rgba(0,0,0,.6);border-radius:999px;padding:.3em .7em;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff}
.ent .kyc-tomas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.ent .kyc-tomas img{border-radius:12px;border:1px solid rgba(255,255,255,.14)}
.ent .espera{display:flex;align-items:center;gap:.6em;color:var(--humo);font-size:.9rem}
.ent .spin{width:18px;height:18px;border-radius:50%;flex:none;
  border:2px solid rgba(255,255,255,.2);border-top-color:var(--muro);
  animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
.ent .tick{width:56px;height:56px;margin:0 auto 14px;border-radius:50%;
  background:#6FE3AC;display:grid;place-items:center}
.ent .tick svg{width:26px;height:26px;stroke:#062015;stroke-width:3;fill:none}

/* ── Paso 3: los mapas de Leaflet ─────────────────────────────────────────
   Vienen de cuenta.css con borde grueso y esquinas rectas. */
.ent .lp-map{border:1px solid rgba(255,255,255,.14);border-radius:14px;
  background:#0d0f11;margin-top:10px}
.ent .lp-hint{font-size:.78rem;color:var(--humo);margin:.6em 0 0}
.ent .zona{display:inline-flex;align-items:center;gap:.5em;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:999px;padding:.35em .8em;margin:0 6px 6px 0;font-size:.84rem}
.ent .zona button{background:none;border:0;color:var(--humo);cursor:pointer;font-size:1rem;
  line-height:1;padding:0 0 0 .2em}
.ent .zona button:hover{color:var(--muro)}

/* El paso 3 tiene cuatro barras: la casa de cambio va detras del formulario. */
.ent-pasos.cuatro{grid-template-columns:repeat(4,1fr)}
.ent-pasos.cuatro li{font-size:.54rem;letter-spacing:.1em}

/* El paso 3 lleva dos mapas: 440 px los deja como sellos. */
.ent-caja.larga{max-width:560px}

/* OJO: el bloque de compatibilidad de arriba fuerza `-webkit-text-fill-color`
   en h1..h6 y en `b` para matar el platino de cuenta.css, y de paso apagaba las
   DOS piezas que si llevan degradado a proposito (el nombre de la marca y el
   titulo), que quedaban con `color:transparent` y sin fondo que recortar: o
   sea, invisibles. Se restauran aqui, al final, que es donde se gana. */
.ent .ent-marca b,.ent .ent-titulo{
  background-image:linear-gradient(180deg,#ffffff 0%,#d8dfe4 44%,#9aa4ac 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}