/* ===========================================================================
   estilo.css — CambiosHappyHappy
   Un solo idioma visual para toda la web, con la paleta de AnacoPay para que
   los dos proyectos se parezcan.

   OJO AL SUBIRLO: el .htaccess guarda los CSS mucho tiempo en el navegador.
   Si tocas este archivo, hay que subir el número de versión en el enlace
   (estilo.css?v=2). Si no, tú y tus clientes seguiréis viendo el viejo y
   parecerá que el cambio no funcionó.
   =========================================================================== */

:root{
  color-scheme:dark;

  /* Esquinas: tres medidas y ni una más */
  --r-tarjeta:14px;
  --r-campo:10px;
  --r-pastilla:999px;

  /* Paleta */
  --fondo:#020617;
  --fondo-pagina:radial-gradient(circle at top left,#0f172a 0,#020617 52%,#020617 100%);
  --tarjeta:rgba(15,23,42,.92);
  --borde:rgba(148,163,184,.25);
  --borde-alto:rgba(148,163,184,.45);
  --texto:#e2e8f0;
  --texto-tenue:#94a3b8;
  --texto-mudo:#64748b;

  --azul:#0ea5e9;
  --azul-oscuro:#0284c7;
  --verde:#22c55e;
  --verde-suave:rgba(34,197,94,.12);
  --ambar:#f59e0b;
  --ambar-suave:rgba(245,158,11,.14);
  --rojo:#ef4444;
  --rojo-suave:rgba(239,68,68,.14);
  --morado:#a78bfa;

  --sombra:0 8px 26px rgba(0,0,0,.55);
  --sombra-alta:0 18px 40px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{background:var(--fondo)}
body{
  margin:0;
  background:var(--fondo-pagina);
  color:var(--texto);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  min-height:100vh;
}
a{color:var(--azul);text-decoration:none}
a:hover{text-decoration:underline}

/* EL FOCO SE VE TAMBIÉN FUERA DE LAS CASILLAS (11-Sep-2026).
   Las casillas ya tenían su aro azul; los enlaces y los botones no tenían
   nada, así que moviéndose con el tabulador no se sabía dónde estabas. Se usa
   el mismo azul para que el panel hable un solo idioma, y sin tocar el radio
   de cada elemento: el navegador ya redondea el aro siguiendo su forma, y
   forzarlo aquí convertiría los botones de pastilla en rectángulos al
   enfocarlos. */
a:focus-visible,button:focus-visible,summary:focus-visible,
.btn:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--azul);
  outline-offset:2px;
}

.envoltura{max-width:1140px;margin:0 auto;padding:20px 16px 64px}
.estrecho{max-width:620px}

/* PANTALLAS GRANDES (11-Sep-2026). Con el menú lateral ocupando 250px, en un
   monitor de 1900 el contenido se quedaba en 1140 y sobraba un palmo de vacío
   a la derecha; las tablas de nueve columnas, que son las que agradecen el
   sitio, salían apretadas al lado de ese hueco. Solo a partir de 1500px, y
   solo hasta 1280: más ancho que eso, los renglones de texto se hacen
   incómodos de leer. */
@media (min-width:1500px){
  .envoltura{max-width:1280px}
}

/* El desplazamiento suave al saltar a un apartado, para quien no haya pedido
   que se reduzcan las animaciones. */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
}

/* ---- Barra superior ---- */
.barra{
  background:rgba(2,6,23,.85);
  border-bottom:1px solid var(--borde);
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(8px);
}
.barra-interior{
  max-width:1140px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.marca{font-weight:700;font-size:1.05rem;color:#fff;letter-spacing:.2px}
.marca span{color:var(--azul)}
.menu{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.menu a{
  padding:7px 14px;border-radius:var(--r-pastilla);
  color:var(--texto-tenue);font-size:.92rem;font-weight:500;
}
.menu a:hover{background:rgba(148,163,184,.12);color:var(--texto);text-decoration:none}
.menu a.activo{background:var(--azul);color:#06121f;font-weight:600}

/* ---- Títulos ---- */
h1{font-size:1.5rem;margin:22px 0 6px;color:#fff;font-weight:650}
h2{font-size:1.12rem;margin:0 0 14px;color:#fff;font-weight:600}
.sub{color:var(--texto-tenue);margin:0 0 22px;font-size:.94rem}

/* EL AIRE ENTRE SECCIONES, UNA SOLA VEZ Y AQUÍ (11-Sep-2026).
   Un h2 que abre una tarjeta no lleva nada encima —empieza la caja—, pero uno
   que llega después de otro bloque necesita separarse o las secciones se
   pegan. Eso se estaba resolviendo a mano, con un `style="margin-top:26px"`
   escrito en ocho sitios: donde alguien se acordó hay aire y donde no, no, y
   por eso el Tablero se lee con un ritmo y Tasas con otro.

   Con el selector de hermano se separa SOLO cuando hay algo delante. Los que
   ya traen su margen a mano mandan sobre esto (un `style=` siempre gana), así
   que no hay riesgo de que se sumen los dos ni de que nada se mueva de sitio
   donde ya estaba bien. */
* + h2{margin-top:28px}

/* ---- Tarjetas ---- */
.tarjeta{
  background:var(--tarjeta);
  border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);
  box-shadow:var(--sombra);
  padding:20px;
  margin-bottom:18px;
}

/* ---- Rejilla de cifras ---- */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.cifra{
  background:var(--tarjeta);
  border:1px solid var(--borde);
  border-left:3px solid var(--azul);
  border-radius:var(--r-tarjeta);
  box-shadow:var(--sombra);
  padding:16px 18px;
  transition:transform .15s ease,box-shadow .15s ease;
}
.cifra:hover{transform:translateY(-2px);box-shadow:var(--sombra-alta)}
.cifra .rotulo{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-mudo);margin-bottom:6px;font-weight:600;
}
.cifra .valor{font-size:1.42rem;font-weight:700;color:#fff;line-height:1.2;
  font-variant-numeric:tabular-nums;word-break:break-word}
.cifra .pie{font-size:.8rem;color:var(--texto-mudo);margin-top:4px}
.cifra.verde{border-left-color:var(--verde)}
.cifra.verde .valor{color:var(--verde)}
.cifra.ambar{border-left-color:var(--ambar)}
.cifra.ambar .valor{color:var(--ambar)}
.cifra.morada{border-left-color:var(--morado)}
.cifra.roja{border-left-color:var(--rojo)}
.cifra.roja .valor{color:var(--rojo)}
.cifra.grande .valor{font-size:1.85rem}

/* Las cifras internas, las que el cliente NO puede ver.
   Antes llevaban un «· solo tú» escrito en cada rótulo. Axel lo quitó: ya sabe
   cuáles son las suyas y repetirlo en cuatro tarjetas era ruido. Se quedan el
   borde ámbar y el fondo tenue, que distinguen igual sin decir nada. */
.cifra.interna{border-left-color:var(--ambar);background:rgba(245,158,11,.05)}

/* ---- Formularios ---- */
.campo{margin-bottom:16px}
label{display:block;font-size:.86rem;font-weight:600;color:var(--texto-tenue);margin-bottom:6px}
input[type=text],input[type=number],input[type=password],input[type=date],
input[type=search],select,textarea{
  width:100%;padding:11px 13px;
  background:rgba(2,6,23,.6);
  border:1px solid var(--borde);
  border-radius:var(--r-campo);
  color:var(--texto);font-size:1rem;font-family:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--azul);
  box-shadow:0 0 0 3px rgba(14,165,233,.18);
}
.pista{font-size:.8rem;color:var(--texto-mudo);margin-top:5px}
.fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}

/* ---- LA TARJETA DEL BCV (11-Sep-2026) -------------------------------------
   Estaba metida como tercera columna de `.fila`, al lado de dos casillas que
   solo llevan un número. Pero ésta lleva desplegable, casilla, aviso y tres
   párrafos de explicación: salía una columna estrecha y larguísima que dejaba
   la tarjeta entera descuadrada. Lo dijo Axel —«visualmente se ve horrible»— y
   era verdad: no es un campo más, es un bloque con su propia explicación.

   Ahora va debajo y a todo el ancho, partida en dos: los mandos a la izquierda
   y el texto a la derecha. A todo el ancho pero de una sola columna, la
   explicación saldría en renglones de punta a punta de la pantalla, que es la
   otra manera de que un bloque ancho se lea mal. Por debajo de 760px se apila
   solo, que es justo cuando las dos columnas dejan de caber.
   -------------------------------------------------------------------------- */
.bcv-caja{
  display:grid;
  grid-template-columns:minmax(0,20rem) minmax(0,1fr);
  gap:20px;
  align-items:start;
  margin-top:18px;
  padding:18px;
  border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);
  background:rgba(148,163,184,.04);
}
.bcv-caja .campo:last-child{margin-bottom:0}
.bcv-titulo{font-size:1rem;font-weight:600;color:#fff;margin:0 0 12px}
.bcv-titulo span{font-weight:400;color:var(--texto-mudo);font-size:.86rem}
.bcv-texto{display:grid;gap:10px;font-size:.86rem;color:var(--texto-tenue)}
.bcv-texto p{margin:0}
.bcv-texto .aviso{margin:0}
@media (max-width:760px){
  .bcv-caja{grid-template-columns:1fr;gap:16px}
}

/* ---- Botones -------------------------------------------------------------
   TODOS LA MISMA FORMA, SEAN <button> O <a>.

   Aquí estuvo el fallo que costó tres intentos. Un <button> y un <a> NO miden
   igual por su cuenta: el <a> hereda el interlineado del texto (1,55) y el
   <button> usa el suyo (~1,2). Con el alto dependiendo del relleno, el enlace
   salía más alto que los botones de al lado, y encima el icono de dentro se
   estiraba. Por eso «Mandar al cliente» parecía otra cosa.

   La forma se fija por ALTURA, no por relleno: mismo min-height, mismo
   interlineado y centrado por flex. Así los dos miden exactamente lo mismo
   pase lo que pase con la fuente o el contenido.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 22px;border:none;
  border-radius:var(--r-pastilla);
  background:var(--azul);color:#06121f;
  font-size:.95rem;font-weight:650;line-height:1.2;
  cursor:pointer;font-family:inherit;
  white-space:nowrap;text-align:center;vertical-align:middle;
  transition:filter .15s ease,transform .15s ease;
}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sec{background:rgba(148,163,184,.16);color:var(--texto)}
.btn.verde{background:var(--verde)}
.btn.roja{background:var(--rojo);color:#fff}
.btn.chico{min-height:34px;padding:0 14px;font-size:.84rem}
.btn.ancho{width:100%}

/* BLINDAJE DE LA FORMA DEL BOTÓN.
   Se repite `.btn` dos veces en el selector a propósito: no cambia a qué
   elementos se aplica (siguen siendo los mismos), pero el navegador le da más
   peso que a cualquier clase suelta escrita en otro sitio del archivo. Es lo
   que evita que una regla ajena —como pasó con `.wa`— vuelva a cuadrarle las
   esquinas o a cambiarle la letra a un botón. Solo forma: el color lo siguen
   poniendo las variantes. */
.btn.btn{
  border-radius:var(--r-pastilla);
  min-height:44px;padding:0 22px;
  font-family:inherit;font-size:.95rem;font-weight:650;line-height:1.2;
  white-space:nowrap;
}
.btn.btn.chico{min-height:34px;padding:0 14px;font-size:.84rem}
/* align-items:center EXPLÍCITO. Sin él, el valor por defecto de flex es
   «stretch» y un botón se estira a la altura del más alto de la fila. */
.botonera{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---- Avisos ---- */
.aviso{
  padding:13px 16px;border-radius:var(--r-tarjeta);
  border:1px solid var(--borde);margin-bottom:16px;font-size:.92rem;
}
.aviso.bien{background:var(--verde-suave);border-color:rgba(34,197,94,.4);color:#86efac}
.aviso.ojo{background:var(--ambar-suave);border-color:rgba(245,158,11,.4);color:#fcd34d}
.aviso.mal{background:var(--rojo-suave);border-color:rgba(239,68,68,.4);color:#fca5a5}
.aviso strong{color:inherit}

/* ---- Tablas ---- */
.tabla-caja{overflow-x:auto;border-radius:var(--r-tarjeta)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--borde)}
th{
  color:var(--texto-mudo);font-size:.73rem;text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;white-space:nowrap;
}
/* POR QUÉ `break-word` Y NO `anywhere` (11-Sep-2026).
   Con `anywhere`, el navegador da por bueno partir cualquier palabra por
   cualquier letra, y entonces calcula que una columna «cabe» en el ancho de un
   carácter. Resultado en Operaciones, que son trece columnas: la tabla se
   comprimía a la fuerza en vez de usar el scroll que .tabla-caja ya tiene, y
   los números salían partidos en dos renglones —«1.000,» arriba y «00»
   abajo—, la vía «R$ → Bs» en cuatro, y la etiqueta «completada» como «com /
   plet / ada». Un importe partido por la mitad en un libro de cuentas no es
   solo feo: se lee mal y se apunta mal.

   `break-word` parte solo si una palabra suelta no cabe de ninguna manera, y
   sin mentir sobre el ancho mínimo. Así las columnas conservan su tamaño
   natural y, cuando no caben todas, es la tabla la que se arrastra a los
   lados —que es justo para lo que está el overflow-x de .tabla-caja—. */
td{font-variant-numeric:tabular-nums;overflow-wrap:break-word}

/* Las cifras y las etiquetas no se parten NUNCA: son de una pieza. */
td.num,th.num{white-space:nowrap}
.etiq{white-space:nowrap}

/* FILAS ALTERNAS (11-Sep-2026). En Operaciones y en Reparto hay tablas de
   nueve columnas: sin nada que separe una fila de la siguiente, el ojo salta
   de línea a media lectura y se acaba leyendo la ganancia de otra operación.
   La franja es muy tenue a propósito —está por debajo de lo que se nota— y el
   resaltado al pasar el ratón sigue mandando porque va escrito después. */
tbody tr:nth-child(even){background:rgba(148,163,184,.035)}
tbody tr:hover{background:rgba(148,163,184,.08)}

/* La cabecera, con fondo propio: al arrastrar una tabla ancha hacia los lados
   en el móvil, sin esto los rótulos se confunden con los datos. */
thead th{background:rgba(2,6,23,.55)}
.num{text-align:right}
.vacio{padding:34px 16px;text-align:center;color:var(--texto-mudo)}

/* ---- Etiquetas de estado ---- */
.etiq{
  display:inline-block;padding:3px 11px;border-radius:var(--r-pastilla);
  font-size:.75rem;font-weight:650;
}
.etiq.completada{background:var(--verde-suave);color:#86efac}
.etiq.pendiente{background:var(--ambar-suave);color:#fcd34d}
.etiq.anulada{background:rgba(148,163,184,.15);color:var(--texto-mudo)}

/* ---- La caja de la tabla de WhatsApp ----
   SE LLAMA `.wa-texto` Y NO `.wa` POR UN MOTIVO CONCRETO.
   Se llamaba `.wa`, igual que la variante de color del botón de WhatsApp
   (`class="btn wa chico"`). Las dos reglas pesan lo mismo para el navegador
   (una clase cada una) y esta va DESPUÉS en el archivo, así que ganaba: los
   dos botones de WhatsApp salían con esquinas cuadradas, letra de máquina de
   escribir y otro relleno. Tres intentos de arreglar el botón no sirvieron de
   nada porque el problema no estaba en el botón. Nombres distintos = no puede
   repetirse. */
.wa-texto{
  background:#0b141a;border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);padding:16px 18px;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.88rem;line-height:1.75;white-space:pre-wrap;word-break:break-word;
  color:#e9edef;
}

/* ---- Calculadora pública ---- */
.publica{max-width:520px;margin:36px auto}
.publica .marca-grande{
  text-align:center;font-size:1.7rem;font-weight:750;color:#fff;margin-bottom:4px;
}
.publica .lema{text-align:center;color:var(--texto-tenue);margin-bottom:26px;font-size:.95rem}
.resultado{
  background:linear-gradient(135deg,rgba(14,165,233,.13),rgba(34,197,94,.09));
  border:1px solid rgba(14,165,233,.32);
  border-radius:var(--r-tarjeta);padding:22px;margin-top:18px;text-align:center;
}
.resultado .recibe{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-tenue);font-weight:600}
.resultado .bs{font-size:2.05rem;font-weight:750;color:var(--verde);margin:6px 0;
  font-variant-numeric:tabular-nums;line-height:1.15;word-break:break-word}
.resultado .equiv{color:var(--texto-tenue);font-size:.94rem}
.resultado .tasa-usada{
  margin-top:14px;padding-top:13px;border-top:1px solid var(--borde);
  font-size:.85rem;color:var(--texto-mudo);
}

/* ---- Pie ---- */
.pie-web{
  text-align:center;color:var(--texto-mudo);font-size:.82rem;
  margin-top:36px;padding-top:20px;border-top:1px solid var(--borde);
}

@media (max-width:640px){
  h1{font-size:1.28rem}
  .tarjeta{padding:16px}
  /* EN EL TELÉFONO, UN BOTÓN LARGO SE PARTE EN DOS RENGLONES (11-Sep-2026).
     «Registrar los 3 pagos y dejar el resto pendiente» mide 393px de una
     pieza: en una pantalla de 390 se salía por la derecha y arrastraba la
     página entera. En el ordenador siguen siendo de un solo renglón, que es
     donde eso importa para que todos midan igual. */
  .btn{white-space:normal;padding:8px 16px;max-width:100%}
  .cifra .valor{font-size:1.25rem}
  .resultado .bs{font-size:1.6rem}
  .barra-interior{gap:10px}
  .menu{width:100%;margin-left:0}
  .menu a{padding:6px 11px;font-size:.85rem}
}

@media (prefers-reduced-motion:reduce){
  .cifra,.btn{transition:none}
  .cifra:hover{transform:none}
}

/* ===========================================================================
   SELECTOR DE MODO — «calculo en reales» / «calculo en dólares»

   Son dos botones de verdad dentro de un <form>, no un desplegable: con dos
   opciones, un desplegable esconde la mitad de la información y obliga a un
   toque de más en el móvil.
   =========================================================================== */
.modos{
  display:flex;gap:4px;padding:4px;margin-bottom:18px;
  background:rgba(2,6,23,.6);
  border:1px solid var(--borde);
  border-radius:var(--r-pastilla);
}
.modos button{
  flex:1;padding:10px 14px;border:none;background:transparent;
  color:var(--texto-tenue);font:inherit;font-size:.92rem;font-weight:600;
  border-radius:var(--r-pastilla);cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.modos button:hover{color:var(--texto)}
.modos button[aria-pressed="true"]{background:var(--azul);color:#06121f}
.modos button:focus-visible{outline:2px solid var(--azul);outline-offset:2px}

/* El símbolo de la moneda, pegado dentro de la casilla */
.con-simbolo{position:relative}
.con-simbolo input{padding-left:52px !important}
.con-simbolo .simbolo{
  position:absolute;left:1px;top:1px;bottom:1px;width:44px;
  display:flex;align-items:center;justify-content:center;
  color:var(--texto-tenue);font-weight:700;font-size:.95rem;
  border-right:1px solid var(--borde);pointer-events:none;
  border-radius:var(--r-campo) 0 0 var(--r-campo);
  background:rgba(148,163,184,.06);
}

/* ===========================================================================
   TARJETAS DE TASA — las dos fijas, siempre visibles
   =========================================================================== */
.tasas-fijas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
/* Con la preferencial apagada queda una sola tarjeta: se centra y se le
   pone tope de ancho. Estirada de lado a lado se lee como un hueco. */
.tasas-fijas.sola{grid-template-columns:1fr;max-width:26rem;margin-inline:auto}
.tasa-caja{
  background:var(--tarjeta);border:1px solid var(--borde);
  border-top:3px solid var(--azul);
  border-radius:var(--r-tarjeta);padding:14px 16px;text-align:center;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.tasa-caja.pref{border-top-color:var(--morado)}
.tasa-caja .tt{
  font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-mudo);font-weight:700;margin-bottom:5px;
}
.tasa-caja .vv{font-size:1.42rem;font-weight:750;color:#fff;
  font-variant-numeric:tabular-nums;line-height:1.15}
.tasa-caja.pref .vv{color:var(--morado)}
.tasa-caja .nn{font-size:.76rem;color:var(--texto-mudo);margin-top:4px}
/* La que se está aplicando ahora mismo se marca sola */
.tasa-caja.activa{
  border-color:var(--verde);box-shadow:0 0 0 1px var(--verde),var(--sombra);
}
.tasa-caja.activa .tt::after{content:" · aplicada";color:var(--verde)}

/* Con la preferencial APAGADA, la única tarjeta que queda se viste de VIP:
   borde dorado con brillo neón. Solo pasa en este caso — con la
   preferencial encendida la tarjeta sigue siendo la normal de siempre. */
.tasas-fijas.vip .tasa-caja{
  border-color:rgba(255,215,0,.55);
  border-top-color:#ffd700;
  box-shadow:0 0 8px rgba(255,215,0,.45),0 0 20px rgba(255,196,0,.28),0 0 36px rgba(255,196,0,.14);
  animation:hh-vip-neon 2.4s ease-in-out infinite;
}
.tasas-fijas.vip .tasa-caja.activa{
  border-color:#ffd700;
  box-shadow:0 0 10px rgba(255,215,0,.6),0 0 24px rgba(255,196,0,.38),0 0 44px rgba(255,196,0,.2);
}
.tasas-fijas.vip .tasa-caja .tt{color:#ffd700;letter-spacing:.09em}
.tasas-fijas.vip .tasa-caja.activa .tt::after{content:"";}
@keyframes hh-vip-neon{
  0%,100%{box-shadow:0 0 8px rgba(255,215,0,.45),0 0 20px rgba(255,196,0,.28),0 0 36px rgba(255,196,0,.14)}
  50%{box-shadow:0 0 14px rgba(255,215,0,.7),0 0 28px rgba(255,196,0,.42),0 0 48px rgba(255,196,0,.22)}
}

@media (max-width:430px){
  .tasas-fijas{grid-template-columns:1fr}
}

/* ===========================================================================
   RESULTADOS EN TARJETAS
   =========================================================================== */
.res-cajas{display:grid;grid-template-columns:1fr;gap:12px;margin-top:18px}
.res-caja{
  background:var(--tarjeta);border:1px solid var(--borde);
  border-left:3px solid var(--azul);
  border-radius:var(--r-tarjeta);padding:16px 18px;box-shadow:var(--sombra);
}
.res-caja .rt{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-mudo);font-weight:700;margin-bottom:5px;
}
.res-caja .rv{
  font-size:1.55rem;font-weight:750;color:#fff;line-height:1.2;
  font-variant-numeric:tabular-nums;word-break:break-word;
}
.res-caja .rn{font-size:.8rem;color:var(--texto-mudo);margin-top:4px}
.res-caja.destacada{
  border-left-color:var(--verde);
  background:linear-gradient(135deg,rgba(34,197,94,.10),rgba(15,23,42,.92));
}
.res-caja.destacada .rv{font-size:2rem;color:var(--verde)}
.res-caja.envio{border-left-color:var(--ambar)}
.res-caja.dolar{border-left-color:var(--azul)}

@media (min-width:560px){
  .res-cajas{grid-template-columns:1fr 1fr}
  .res-caja.destacada{grid-column:1 / -1}
}

/* Dentro de la calculadora pública los textos van centrados: es una columna
   estrecha y un párrafo alineado a la izquierda queda descolgado bajo unas
   tarjetas que sí están centradas. */
.publica .aviso,
.publica .pista,
.publica .pref-aviso{ text-align:center }

/* El aviso de la tasa preferencial */
.pref-aviso{
  margin-top:14px;padding:12px 15px;border-radius:var(--r-tarjeta);
  font-size:.88rem;
  background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.38);
  color:#c4b5fd;
}
.pref-aviso.conseguida{
  background:var(--verde-suave);border-color:rgba(34,197,94,.4);color:#86efac;
}

/* ===========================================================================
   BOTÓN FLOTANTE DE WHATSAPP

   Es el mismo efecto que AnacoPay: degradado verde, halo y un anillo que
   late. El anillo crece desde el CENTRO de la burbuja, así que de su radio
   final hay que descontar los 28 px que van del centro al borde — en
   AnacoPay eso costó varios intentos por leerlo mal, y aquí ya viene bien
   desde el principio.
   =========================================================================== */
:root{
  --wa-alto:56px;
  --wa-abajo:16px;
}
.wa-flotante{
  position:fixed;
  right:max(16px,calc(env(safe-area-inset-right,0px) + 12px));
  bottom:calc(var(--wa-abajo) + env(safe-area-inset-bottom,0px));
  z-index:1400;
  width:var(--wa-alto);height:var(--wa-alto);
  aspect-ratio:1/1;
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;
}
.wa-flotante .wa-burbuja{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  width:var(--wa-alto);height:var(--wa-alto);aspect-ratio:1/1;
  border-radius:999px;
  background:linear-gradient(135deg,#25D366,#16a34a);
  border:1px solid rgba(134,239,172,.45);
  box-shadow:0 12px 28px rgba(22,163,74,.6),0 4px 14px rgba(0,0,0,.5);
  color:#fff;
}
.wa-flotante .wa-burbuja svg{
  width:28px;height:28px;fill:#fff;stroke:none;position:relative;z-index:1;
}
.wa-flotante .wa-burbuja::before{
  content:'';position:absolute;inset:0;border-radius:999px;
  background:#25D366;z-index:-1;
  animation:wa-pulso 2.4s ease-out infinite;pointer-events:none;
}
@keyframes wa-pulso{
  0%   {transform:scale(1);    opacity:.6}
  62%  {transform:scale(1.32); opacity:0}
  100% {transform:scale(1.32); opacity:0}
}
/* Al pasar por encima se para: si ya estás en el botón, no hace falta que te
   llame. Y en «pulsado» se usa filter y NO transform a propósito: un
   transform aquí crearía un contexto de apilado y el anillo, que va detrás
   con z-index -1, desaparecería de golpe. */
.wa-flotante:hover .wa-burbuja{filter:brightness(1.1)}
.wa-flotante:hover .wa-burbuja::before{animation-play-state:paused}
.wa-flotante:active .wa-burbuja{filter:brightness(1.18)}

@media (prefers-reduced-motion:reduce){
  .wa-flotante .wa-burbuja::before{animation:none;opacity:0}
}

/* Sitio al final de la página para que el botón no tape el pie. */
body.con-wa .pie-web{margin-bottom:72px}

/* El botón de «mandar este cálculo», que va DENTRO de los resultados y no
   flota. Se distingue del flotante a propósito: uno es «hablar con
   nosotros» y el otro «mándame esta cuenta». */
/* El de WhatsApp SOLO cambia de color. Ni una propiedad de forma: en cuanto
   una variante toca el tamaño, deja de parecerse a sus vecinos. */
.btn-wa{background:linear-gradient(135deg,#25D366,#16a34a);color:#fff}
/* Por si alguien vuelve a meter un icono: un SVG sin medidas propias se estira
   y deja el botón gigante. Pasó dos veces. */
.btn-wa svg{width:18px;height:18px;flex:0 0 auto}



/* ---- INTERRUPTOR CON EXPLICACIÓN ------------------------------------------
   Una casilla suelta con un rótulo de tres palabras no dice qué se apaga.
   Éste lleva el título en negrita y debajo, en pequeño, qué pasa al apagarlo.
   Se usa en Tasas para la preferencial de cada dirección. */
.hh-switch{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--borde);border-radius:var(--r-tarjeta);
  padding:14px 16px;margin:0 0 18px}
.hh-switch:hover{border-color:var(--azul)}
.hh-switch input{width:auto;margin:3px 0 0;flex:none}
.hh-switch > span{display:flex;flex-direction:column}
.hh-switch .pista{margin:0}


/* ---- «Cambiar mi contraseña» --------------------------------------------
   Plegada: se usa dos veces al año y no puede robarle sitio a lo que se mira
   todos los días. El resumen se ve como algo que se abre. */
/* NI `padding` NI `margin-bottom`: los pone ya `.tarjeta`, y declararlos otra
   vez es una pelea entre dos clases del mismo elemento. Hay una prueba que la
   caza — la misma que se escribió cuando pasó con `.cifra`. */
.mc-caja{margin-top:26px}
.mc-caja > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px}
.mc-caja > summary::-webkit-details-marker{display:none}
.mc-caja > summary::before{content:"+";font-weight:700;color:var(--azul);
  border:1px solid var(--borde);border-radius:6px;width:22px;height:22px;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.mc-caja[open] > summary::before{content:"−"}
.mc-caja > summary:hover{color:#fff}


/* ---- MENÚ DE APARTADOS (`.ts`) -------------------------------------------
   Una columna de secciones a la izquierda y el contenido a la derecha. Nació
   en Tasas, que había crecido hasta obligar a bajar rodando buscando el campo.
   Desde el 30-Ago lo usa también Administradores por lo mismo, y por eso vive
   aquí y no dentro de una página: dos copias del mismo estilo acaban siendo
   dos estilos distintos.

   Lo pinta partials/apartados.php. */
.ts{display:grid;gap:20px;grid-template-columns:225px 1fr;align-items:start}
/* SIN ESTO, LA PÁGINA ENTERA SE ENSANCHA EN VEZ DE LA TABLA.
   Un hijo de grid no se encoge por debajo de su contenido — su min-width por
   defecto es «auto», no 0. La fila de un error trae el JSON tal cual llegó
   (ver hh_recorte en tasas_auto.php), una cadena larga sin espacios, y esa
   cadena fuerza un ancho mínimo enorme en esta columna. .tabla-caja ya lleva
   overflow-x:auto, pero nunca llega a usarse: la columna entera crece para
   hacerle sitio a la cadena, y toda la página —no solo la tabla— se corre a
   la derecha. Poniendo min-width:0 aquí, la columna SÍ se encoge al ancho
   disponible y entonces es la tabla la que hace scroll, no la página. */
.ts-cuerpo{min-width:0}
.ts-menu{
  background:var(--tarjeta);border:1px solid var(--borde);
  border-radius:var(--r-tarjeta);padding:10px;position:sticky;top:16px;
}
.ts-grupo{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--texto-mudo);padding:12px 12px 6px;
}
.ts-grupo:first-child{padding-top:4px}
.ts-item{
  display:block;padding:9px 12px;border-radius:10px;text-decoration:none;
  color:var(--texto-tenue);font-size:.92rem;font-weight:600;line-height:1.3;
}
.ts-item:hover{color:#fff;background:rgba(255,255,255,.04)}
.ts-item.activa{
  background:linear-gradient(135deg,rgba(14,165,233,.22),rgba(14,165,233,.10));
  color:#fff;
}
.ts-panel{display:none}
.ts-panel.abierta{display:block}
/* En el móvil el menú se pone arriba, en fila. Una columna de 225px al lado
   dejaría los campos en una rendija. */
@media (max-width:820px){
  .ts{grid-template-columns:1fr}
  .ts-menu{position:static;display:flex;gap:6px;flex-wrap:wrap}
  .ts-grupo{display:none}
  .ts-item{flex:1;text-align:center;min-width:140px}
}