/* ==========================================================================
   Trapicheros — flujo de cuenta (entrar · registro · KYC · perfil) y tablero.
   Misma direccion visual de la landing ("La pizarra"), en modo tinta.
   ========================================================================== */

@font-face{font-family:'Anton';src:url('fonts/anton-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/plexsans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex';src:url('fonts/plexsans-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'PlexMono';src:url('fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --tinta:#0B0B0C; --tinta-2:#151517; --tinta-3:#27272C;
  --muro:#E5E4E2; --muro-2:#C6C5C3;
  --turquesa:#9C9CA6; --turquesa-cl:#DCDCE2; --turquesa-osc:#4E4E56;
  --laton:#A8A8B0; --coral:#6E6E76;
  --humo:#8A8A93; --humo-d:#56565D;
  --display:'Anton',Impact,'Arial Narrow',sans-serif;
  --body:'Plex',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'PlexMono',ui-monospace,Menlo,monospace;
  --safe-top:env(safe-area-inset-top,0px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--tinta);color:var(--muro);font-family:var(--body);
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
img,svg,video{max-width:100%}
a{color:var(--turquesa-cl)}
:focus-visible{outline:3px solid var(--laton);outline-offset:3px}

.d{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:.005em}
h1.d{font-size:clamp(2rem,6vw,2.7rem);margin:0 0 .2em}
h2.d{font-size:clamp(1.5rem,4.6vw,2rem);margin:0 0 .4em}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* Cabecera ------------------------------------------------------------------ */
.top{
  position:sticky;top:0;z-index:60;background:var(--tinta);
  border-bottom:1px solid var(--tinta-3);padding-top:var(--safe-top);
}
.top .wrap{max-width:960px;margin:0 auto;padding:0 clamp(18px,5vw,32px);
  display:flex;align-items:center;gap:14px;height:58px}
.marca{display:flex;align-items:center;gap:.55em;text-decoration:none;color:var(--muro);
  font-family:var(--display);text-transform:uppercase;font-size:1.1rem;letter-spacing:.02em}
.logo{width:26px;height:26px;flex:none;background:currentColor;
  -webkit-mask:url(logo2-mask.webp) center/contain no-repeat;
          mask:url(logo2-mask.webp) center/contain no-repeat}
.top .salir{margin-left:auto;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--humo);text-decoration:none}

/* Lienzo -------------------------------------------------------------------- */
.hoja{max-width:680px;margin:0 auto;padding:clamp(26px,6vw,48px) clamp(18px,5vw,32px) 80px}
.hoja.ancha{max-width:1180px}
.eyebrow{font-family:var(--mono);font-size:.68rem;font-weight:500;text-transform:uppercase;
  letter-spacing:.19em;display:flex;align-items:center;gap:.6em;margin:0 0 1.2em;color:var(--humo)}
.eyebrow::before{content:"";width:.6em;height:.6em;background:var(--laton);flex:none}
.lede{color:var(--humo);margin:0 0 1.8em;max-width:46ch}

/* Pasos --------------------------------------------------------------------- */
.pasos-nav{display:flex;gap:2px;margin:0 0 26px;list-style:none;padding:0}
.pasos-nav li{flex:1;padding:.7em .5em;background:var(--tinta-2);border-top:3px solid var(--tinta-3);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;color:var(--humo)}
.pasos-nav li.act{border-top-color:var(--laton);color:var(--muro)}
.pasos-nav li.hecho{border-top-color:var(--turquesa)}

/* Tarjeta ------------------------------------------------------------------- */
.card{background:var(--muro);color:var(--tinta);border-radius:3px;padding:clamp(20px,5vw,30px);
  box-shadow:7px 7px 0 var(--laton);margin-bottom:22px}
.card.plana{box-shadow:none;background:var(--tinta-2);color:var(--muro);border:1px solid var(--tinta-3)}
.card h2{margin-top:0}

/* Campos -------------------------------------------------------------------- */
.campo{margin-bottom:16px}
.campo label{display:block;font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--humo-d);margin-bottom:.5em}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:inherit;font-size:max(1rem,16px);color:var(--tinta);background:#fff;
  padding:.78em .8em;border:2px solid var(--tinta);border-radius:2px;
}
.campo select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230B0B0C' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .8em center;background-size:11px;padding-right:2.4em}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:3px solid var(--turquesa);outline-offset:1px}
.campo .pista{font-size:.8rem;color:var(--humo-d);margin:.5em 0 0}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.dos{grid-template-columns:1fr}}
/* Las celdas de una reja no bajan de su ancho minimo: sin esto el input de hora,
   que trae ancho propio del navegador, empuja la columna y se sale de la tarjeta. */
.dos>*{min-width:0}
.campo input[type=time]{appearance:none;-webkit-appearance:none;min-width:0;max-width:100%}

/* Campo con boton al lado (verificar / comprobar) */
.con-boton{display:flex;gap:8px;align-items:stretch}
.con-boton input{flex:1;min-width:0}
.con-boton .btn{white-space:nowrap;padding:.7em 1em;font-size:.86rem;box-shadow:3px 3px 0 var(--tinta)}

/* Ojito de la contrasena */
.con-ojo{position:relative}
.con-ojo input{padding-right:3em}
.ojo{position:absolute;right:.35em;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;padding:.5em;line-height:0;color:var(--humo-d)}
.ojo svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8}
.ojo:hover{color:var(--tinta)}

/* Botones ------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--display);text-transform:uppercase;font-size:1rem;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;padding:.9em 1.5em;border:2px solid var(--tinta);
  border-radius:2px;background:var(--coral);color:#fff;box-shadow:5px 5px 0 var(--tinta);
  transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinta)}
.btn:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--tinta)}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:5px 5px 0 var(--tinta)}
.btn.bloque{width:100%;margin-top:6px}
.btn.linea{background:none;color:var(--tinta);box-shadow:none}
.btn.linea:hover{background:var(--muro-2);transform:none;box-shadow:none}
.btn.verde{background:var(--turquesa)}
/* Botón de tabla: cabe dentro de una celda sin romper la fila. */
.btn.chico{padding:.45em .8em;font-size:.78rem;box-shadow:3px 3px 0 var(--tinta);white-space:nowrap}
.card.plana .btn.linea,.hoja-rev .btn.linea{color:var(--muro);border-color:var(--tinta-3)}
.card.plana .btn.linea:hover,.hoja-rev .btn.linea:hover{background:var(--tinta-3)}

/* Avisos -------------------------------------------------------------------- */
.aviso{margin:0 0 14px;padding:.7em .85em;border-radius:2px;font-size:.9rem;display:none}
.aviso.err{display:block;background:#C6C5C3;color:#3A3A40;border:1px solid var(--coral)}
.aviso.ok{display:block;background:#DCDCE2;color:#4E4E56;border:1px solid var(--turquesa)}
.oculto{display:none !important}

/* Grupos de casillas -------------------------------------------------------- */
.grupo{margin-bottom:22px}
.grupo > .tit{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;
  color:var(--humo-d);margin:0 0 .8em}
.opciones{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.op{display:flex;align-items:center;gap:.6em;padding:.7em .8em;border:2px solid var(--muro-2);
  border-radius:2px;cursor:pointer;font-size:1rem;background:#fff;user-select:none}
.op input{width:18px;height:18px;flex:none;accent-color:var(--turquesa);margin:0}
.op:hover{border-color:var(--tinta)}
.op.marcada{border-color:var(--turquesa);background:#eef7f5}

/* Selector de zona con mapa ------------------------------------------------- */
/* z-index:0 encierra los paneles de Leaflet (que llegan a 400): si no, el mapa
   se dibuja por encima del menú lateral y de la cabecera. */
/* Mismo arreglo que el mapa de zonas del panel: las losas dark de Mapbox son
   casi negras y los limites de municipio no se veian. Solo en el mapa donde hay
   que ESCOGER zonas; el del punto exacto se queda como esta. */
#mapa-alcance .leaflet-tile-pane{filter:brightness(1.22) contrast(.82) saturate(.8)}
.lp-map{height:280px;border:2px solid var(--tinta);border-radius:2px;margin-top:12px;background:#0a0d12;
  position:relative;z-index:0;isolation:isolate}
.lp-hint{font-family:var(--mono);font-size:.72rem;color:var(--humo-d);margin-top:.7em}
.lp-mk span{display:block;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--coral);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.5)}
.lp-loc-mk i{display:block;width:8px;height:8px;border-radius:50%;background:var(--laton);
  box-shadow:0 0 0 2px rgba(0,0,0,.45)}
.lp-loc-mk b{position:absolute;left:12px;top:-4px;white-space:nowrap;font-family:var(--mono);
  font-size:10px;font-weight:500;color:#dfe8ea;text-shadow:0 1px 3px #000}
.zonas{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.zona{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-size:.74rem;
  background:var(--tinta);color:var(--muro);padding:.4em .6em;border-radius:2px}
.zona button{background:none;border:0;color:var(--laton);cursor:pointer;font-size:1rem;line-height:1;padding:0}

/* KYC ----------------------------------------------------------------------- */
.kyc-vwrap{position:relative;background:#000;border:2px solid var(--tinta);border-radius:2px;overflow:hidden}
.kyc-vwrap video{display:block;width:100%;height:auto;background:#000}
.kyc-vwrap.doc{aspect-ratio:4/3}
.kyc-vwrap.cara{aspect-ratio:3/4;max-height:52vh;margin:0 auto}
.kyc-vwrap video{width:100%;height:100%;object-fit:cover}
.kyc-marco{position:absolute;inset:9% 6%;border:2px dashed rgba(233,228,214,.75);border-radius:4px;pointer-events:none}
.kyc-vwrap.cara .kyc-marco{inset:8% 14%;border-radius:50%}
.kyc-instr{font-family:var(--mono);font-size:.86rem;letter-spacing:.02em;text-align:center;
  margin:.9em 0;min-height:1.4em}
.kyc-instr b{font-family:var(--body);font-size:1.05rem;display:block}
.kyc-rec{display:inline-flex;align-items:center;gap:.45em;font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--coral)}
.kyc-rec::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--coral);
  animation:lat 1s infinite}
@keyframes lat{50%{opacity:.25}}
.kyc-tomas{display:flex;gap:6px;justify-content:center;margin:.6em 0 0}
.kyc-tomas i{width:26px;height:4px;background:var(--muro-2);border-radius:2px}
.kyc-tomas i.ok{background:var(--turquesa)}
.kyc-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.kyc-mini figure{margin:0}
.kyc-mini img{width:100%;aspect-ratio:1;object-fit:cover;border:2px solid var(--muro-2);border-radius:2px}
.kyc-mini figcaption{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--humo-d);margin-top:.35em;text-align:center}
.spin{width:38px;height:38px;margin:0 auto 16px;border:3px solid var(--muro-2);
  border-top-color:var(--turquesa);border-radius:50%;animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.centro{text-align:center}
.tick{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;background:var(--turquesa);
  display:grid;place-items:center}
.tick svg{width:28px;height:28px;stroke:#fff;stroke-width:3;fill:none}
.tick.malo{background:var(--coral)}
.tick.espera{background:var(--laton)}

/* Tablero de admins --------------------------------------------------------- */
.tabs{display:flex;gap:2px;margin-bottom:24px;flex-wrap:wrap}
.tabs button{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  padding:.7em 1.1em;border:0;background:var(--tinta-2);color:var(--humo);cursor:pointer;border-radius:2px}
.tabs button[aria-selected="true"]{background:var(--muro);color:var(--tinta)}
.metricas{display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin-bottom:26px;
  background:var(--tinta-3)}
.metrica{background:var(--tinta-2);padding:16px 18px}
.metrica b{display:block;font-family:var(--display);font-size:1.9rem;line-height:1}
.metrica span{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;color:var(--humo)}
.kanban{display:grid;gap:14px;grid-template-columns:repeat(3,minmax(0,1fr))}
/* El tablero de órdenes lleva una columna más: Canceladas. Las columnas se reparten
   TODO el ancho que dé el dispositivo: 4 de par en par en un monitor, 3 o 2 en una
   tableta y apiladas en el teléfono. Lo decide el propio grid con el ancho mínimo. */
.kanban.ord{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* Tableta: si no caben las 4 de un tirón, mejor 2 y 2 parejas que 3 arriba y 1 huérfana. */
@media (max-width:1099px){.kanban.ord{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.kanban,.kanban.ord{grid-template-columns:1fr}}
/* Arrastrar tarjetas entre columnas: la que se mueve y la columna que la recibe. */
.col.suelta{outline:2px dashed var(--turquesa);outline-offset:-3px;background:rgba(18,147,143,.07)}
.col.no-suelta{outline:2px dashed var(--coral);outline-offset:-3px}
.ord-t.llevando{opacity:.4}
.ord-t{cursor:grab}
.ord-t:active{cursor:grabbing}
.col.apro .ord-t{cursor:pointer}   /* entregadas: no se mueven */
.col{background:var(--tinta-2);border:1px solid var(--tinta-3);border-radius:3px;padding:12px;min-height:120px}
.col > h3{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--humo);margin:0 0 12px;display:flex;justify-content:space-between}
.col.pend > h3{color:var(--laton)}
.col.apro > h3{color:var(--turquesa-cl)}
.col.rech > h3{color:var(--coral)}
.ficha{background:var(--tinta);border:1px solid var(--tinta-3);border-left:3px solid var(--laton);
  border-radius:2px;padding:11px 12px;margin-bottom:9px;cursor:pointer}
.ficha:hover{border-color:var(--humo)}
.ficha b{display:block;font-size:.95rem}
.ficha .met{font-family:var(--mono);font-size:.68rem;color:var(--humo);margin-top:.3em}
.ficha .mot{font-size:.8rem;color:var(--laton);margin-top:.45em}
.col.apro .ficha{border-left-color:var(--turquesa)}
.col.rech .ficha{border-left-color:var(--coral)}
.tabla{width:100%;border-collapse:collapse;font-size:.88rem}
.tabla th{font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--humo);text-align:left;padding:.6em .5em;border-bottom:1px solid var(--tinta-3)}
.tabla td{padding:.65em .5em;border-bottom:1px solid var(--tinta-3);vertical-align:top}
.tabla tr:hover td{background:var(--tinta-2)}
.envoltura{overflow-x:auto}
.etiq{font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.25em .5em;border-radius:2px;background:var(--tinta-3);color:var(--muro)}
.etiq.nuevo{background:var(--laton);color:var(--tinta)}
.etiq.aprobado{background:var(--turquesa);color:#fff}
.etiq.rechazado{background:var(--coral);color:#fff}

/* Hoja lateral de revision -------------------------------------------------- */
.velo{position:fixed;inset:0;background:rgba(4,10,12,.72);z-index:100;display:flex;
  align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s ease}
.velo.ver{opacity:1}
@media (min-width:760px){.velo{align-items:center}}
.hoja-rev{background:var(--tinta-2);border:1px solid var(--tinta-3);border-radius:6px 6px 0 0;
  width:min(720px,100%);max-width:100%;max-height:92dvh;overflow:auto;padding:20px}
@media (min-width:760px){.hoja-rev{border-radius:6px}}
.rev-grid{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:16px}
.rev-grid img,.rev-grid video{width:100%;border:1px solid var(--tinta-3);border-radius:2px;background:#000}
.rev-datos{font-size:.9rem;margin-bottom:16px}
.rev-datos div{display:flex;justify-content:space-between;gap:12px;padding:.45em 0;
  border-bottom:1px solid var(--tinta-3)}
.rev-datos span{color:var(--humo);font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase}
.rev-datos b{text-align:right;font-weight:600}
/* Titulo de bloque dentro de la hoja (ej. "Respuestas del registro") */
.rev-sub{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--humo);margin:0 0 6px;padding-top:4px}
.rev-vacio{font-size:.85rem;color:var(--humo);margin:0 0 16px}
/* Deslizar hacia abajo para actualizar: rueda que baja con el dedo y gira al soltar. */
#ptr{position:fixed;left:50%;top:0;z-index:200;width:34px;height:34px;margin-left:-17px;border-radius:50%;
  background:var(--tinta-2);border:1px solid var(--tinta-3);color:var(--turquesa-cl);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(-46px);opacity:0;pointer-events:none}
#ptr svg{width:17px;height:17px}
#ptr.gira{transform:translateY(54px);opacity:1;transition:transform .2s ease}
#ptr.gira svg{animation:ptr-gira .8s linear infinite}
#ptr.vuelve{transition:transform .2s ease,opacity .2s ease}
@keyframes ptr-gira{to{transform:rotate(360deg)}}
.rev-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rev-btns .btn{box-shadow:3px 3px 0 var(--tinta)}

/* Chips (monedas, días): los usan el paso 4 de la casa de cambio y el panel ---- */
.zn-chips{display:flex;flex-wrap:wrap;gap:6px}
.zn-mun{font-family:var(--mono);font-size:.72rem;cursor:pointer;background:var(--tinta);color:var(--humo);
  border:1px solid var(--tinta-3);border-radius:2px;padding:.5em .7em}
.zn-mun.on{background:var(--verde);border-color:var(--verde);color:#1A1A1E;font-weight:600}

/* Fila del telefono: el pais va en un desplegable aparte y en el campo solo se escribe
   el numero local. Antes se pedia "+53 5 123 4567" a mano y quien lo escribia pelado se
   quedaba sin recibir el codigo. Mismo comportamiento que en las demas apps de la casa. */
.tel-fila{display:flex;gap:8px;align-items:stretch}
.tel-fila select{flex:0 0 7.2em;min-width:0}
.tel-fila input{flex:1;min-width:0}
/* Cuando ademas lleva boton al lado (el "Verificar" del registro), en pantalla estrecha
   el boton baja a su propia linea en vez de espachurrar el numero. */
@media (max-width:460px){
  .con-boton.tel-fila{flex-wrap:wrap}
  .con-boton.tel-fila select{flex:0 0 7.2em}
  .con-boton.tel-fila input{flex:1 1 8em}
  .con-boton.tel-fila .btn{flex:1 0 100%}
}

/* La familia: una sola cuenta para las cuatro apps. Sin rotulo ni explicacion:
   los logos juntos se entienden solos. Va discreto al pie. */
.familia{margin-top:26px;padding-top:20px;border-top:1px solid rgba(229,228,226,.22)}
.familia-logos{display:flex;justify-content:center;align-items:center;gap:10px}
.familia-logos img{
  width:34px;height:34px;border-radius:9px;display:block;
  border:1px solid rgba(229,228,226,.22);opacity:.92;transition:opacity .18s,transform .18s;
}
.familia-logos a:hover img{opacity:1;transform:translateY(-2px)}
.familia-logos .mas{color:var(--humo);font-size:15px;line-height:1;opacity:.55}

/* ═══════════════════════════════════════════════════════════════════════════
   EFECTO PLATINADO EN EL TEXTO DE LA APP (22-ago-2026)
   ═══════════════════════════════════════════════════════════════════════════
   El brillo estaba solo en `styles.css`, que lo carga UNICAMENTE la landing. El panel,
   el admin, el perfil, el KYC y la pantalla de entrar cargan ESTE fichero, asi que aqui
   no llegaba nada y las letras se veian planas.

   Aqui el fondo es NEGRO (body: background var(--tinta)), asi que va el metal CLARO.
   En la landing es al reves: fondo platino y metal oscuro.

   Dos cosas que NO se repiten del primer intento:
     · nunca en `body`: `-webkit-text-fill-color` se hereda y deja sin letras a todo
       lo que no tenga su propio degradado, botones incluidos.
     · nunca en botones ni campos: al recortar el fondo al texto, el elemento pierde
       SU fondo. El blindaje del final de panel.css los protege.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Su punto mas oscuro es #9C9CA6: todavia se lee en letra chica sobre negro.
     El de los titulares baja a #7C7C85 y ahi se traga medio trazo. */
  --platino-texto:linear-gradient(177deg,
      #FFFFFF 0%,  #F2F2F6 12%, #C6C6CE 30%, #A2A2AC 42%,
      #FFFFFF 51%, #FFFFFF 53%, #D8D8E0 62%, #A8A8B2 74%,
      #F0F0F4 86%, #BEBEC8 94%, #EFEFF3 100%);
  /* El de mas contraste, para titulares. Se define AQUI ademas de en styles.css:
     panel.css lo usaba y el panel NO carga styles.css, asi que la variable no existia
     y la regla dejaba el fondo sin definir CON el texto en transparente = invisible. */
  --platino-brillo:linear-gradient(176deg,
      #FFFFFF 0%,  #F6F6FA 8%,  #C8C8D0 20%, #90909A 30%,
      #6A6A73 40%, #FFFFFF 51%, #FFFFFF 53%, #D2D2DA 60%,
      #82828C 70%, #EFEFF4 80%, #A6A6B0 90%, #E4E4EA 96%, #FFFFFF 100%);
  --platino-canto:linear-gradient(90deg,
      #55555C 0%,  #B4B4BC 10%, #FFFFFF 20%, #FFFFFF 22%,
      #8A8A94 34%, #E2E2E8 46%, #6E6E78 58%, #FFFFFF 70%,
      #9C9CA6 82%, #DEDEE4 92%, #61616A 100%);
}

p,li,dd,dt,td,th,small,em,blockquote,figcaption,
h1,h2,h3,h4,h5,h6,summary,
.bloque-sub,.bloque-tit,.mn-privado,.cerca-met,.cerca-sub,.rev-vacio,.vacio,
.hist-tipo,.pt-nota,.aviso:not(.rojo):not(.ok){
  background-image:var(--platino-texto);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* Los titulares grandes, con el metal de mas contraste: en cuerpo grande el filo luce
   y no hay riesgo de perder el trazo. */
.d,h1,h2{
  background-image:linear-gradient(177deg,
      #FFFFFF 0%, #E8E8EE 14%, #A9A9B2 30%, #7C7C85 42%,
      #F4F4F8 51%, #FFFFFF 56%, #BFBFC8 70%, #8E8E97 84%, #D8D8DE 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.55))}

/* Un hilo de metal donde antes habia una linea gris. */
hr{border:0;height:1px;background:var(--platino-canto);opacity:.5}

/* Respaldo: sin soporte de recorte, todo plano y legible. */
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  *{background-image:none!important;-webkit-text-fill-color:currentColor!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   REVERSION SOBRE FONDO CLARO  ·  la regla que faltaba (22-ago-2026)
   ═══════════════════════════════════════════════════════════════════════════
   El fallo que se repetia: el metal CLARO cae sobre un elemento de fondo CLARO y el
   texto desaparece. Pasaba porque el efecto se aplica por ETIQUETA (p, li, h2...) y
   una etiqueta no sabe de que color es el fondo que tiene detras.

   La lista sale de buscar en los CSS TODO lo que declara un fondo claro
   (var(--muro), var(--muro-2), var(--turquesa-cl) o #fff). El mas importante es
   `.card`, que es platino con texto negro y se usa en TODO el panel.

   REGLA PARA EL FUTURO: si anades un contenedor con fondo claro, anadelo aqui. Y si
   ves un texto que no se lee, mira primero si su fondo es claro.
   ═══════════════════════════════════════════════════════════════════════════ */
.card:not(.plana), .card:not(.plana) *,
.op, .op *,
.entrante, .entrante *,
.tabs button[aria-selected="true"],
.campo input, .campo select, .campo textarea,
.kyc-tomas i{
  
  -webkit-text-fill-color:currentColor!important;
  -webkit-background-clip:border-box!important;background-clip:border-box!important}
/* El fondo propio de la tarjeta se declara otra vez: el !important de arriba mata el
   background-image, y si la tarjeta usara uno lo perderia. Aqui es color plano. */
.card:not(.plana){background:var(--muro);color:var(--tinta)}

/* Respaldo del mapa: si el token de Mapbox no vale para este dominio (403), Leaflet cae a
   OpenStreetMap, que es claro. Este filtro lo deja oscuro para que no desentone con el panel.
   Va en cuenta.css porque es la hoja que cargan casi todas las pantallas con mapa
   (perfil, admin, casa, panel); ponerlo solo en panel.css dejaba las demas en blanco. */
.mapa-oscuro { filter: invert(1) saturate(0) brightness(.90); }

/* Borrar la cuenta ----------------------------------------------------------
   Lo unico de toda la plataforma que se sale del platino: un borrado no se
   deshace, y el rojo es lo unico que se lee como "cuidado" sin tener que
   leerlo. Es un ladrillo apagado, no un rojo de alarma, para que no chille
   dentro de una pantalla negra. */
.btn.peligro{background:#8E2F2A;color:#fff;border-color:var(--tinta)}
.btn.peligro:hover{background:#A03731}
/* Puerta de entrada al borrado: texto pelado, sin caja. Nadie lo aprieta sin
   ir a buscarlo. */
.btn.peligro-linea{background:none;box-shadow:none;border-color:transparent;color:#C97B75;
  font-size:.86rem;padding:.7em 1em}
.btn.peligro-linea:hover{background:rgba(142,47,42,.16);transform:none;box-shadow:none}
.bc-lede{font-size:.92rem;line-height:1.55;color:var(--muro-2);margin:0 0 10px}
.bc-nota{font-size:.84rem;line-height:1.5;color:var(--humo);margin:0 0 16px}
/* Escribir ELIMINAR: en mayusculas y espaciado, para que se vea que es una
   palabra exacta y no una frase. */
#bc-palabra{text-transform:uppercase;letter-spacing:.12em;font-family:var(--mono)}
/* Sale al final del paso, separada de todo, para que no compita con el boton
   de seguir adelante. */
.bc-salida{text-align:center;margin:26px 0 0}