/* ==========================================================================
   TRANSFINT APP · ESTILOS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ==========================================================================
   ⚠️ NO QUITAR: color-scheme
   Chrome trae un "tema oscuro automático" que se aplica a las páginas que no
   dicen si son claras u oscuras. Dentro del APK de Android se activaba solo y
   volvía a oscurecer una app que YA es oscura: todo salía apagado y algunas
   tarjetas se invertían a blanco, con el texto claro encima e ilegible.
   Esta línea le dice a Chrome "ya soy oscura, no me toques" y lo desactiva.
   ========================================================================== */
:root { color-scheme: dark; }

:root {
  --red:#D0112B; --blue:#002A8F; --gold:#F5C518;
  --dark:#0A0F2E; --dark2:#111840; --dark3:#192262; --surface:#1C2660; --surface2:#151E4E;
  --accent:#00E5A0; --accent2:#6BE8A4; --info:#6B9FFF; --danger:#FF6B6B;
  --border:rgba(255,255,255,0.12); --border2:rgba(255,255,255,0.07);
  --text:#fff; --text2:#A8B4D8; --text3:#7A87B0;
  --radius:20px; --radius-sm:14px; --radius-xs:12px;
  --nav-h:68px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Tipografía.
     Archivo para titulares y cifras: es más estrecha y más firme que Inter, así que
     un importe largo cabe en una pantalla de 360 px sin tener que encogerlo.
     IBM Plex Sans para leer: trae cifras de ancho fijo, que es lo que hace que los
     montos se alineen en columna y que una tarjeta se lea de 4 en 4. */
  --font-texto: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-titulo: 'Archivo', 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Escala de tamaños: cada paso se nota, ninguno es ilegible */
  --t-xs:12px; --t-sm:13.5px; --t-md:15px; --t-lg:17px; --t-xl:20px; --t-2xl:24px;

  /* Ritmo vertical */
  --gap:16px; --gap-lg:22px;

  /* --- Paleta ampliada --- */
  --violeta:#B98BFF; --menta:#7CF3C8;

  /* --- El color dice en qué estado va el pedido ---
     Es la regla que ordena toda la app: si un color no significa una de estas tres
     cosas, no se usa. Antes el menta estaba en botones, focos, viñetas, spinner y
     selección de texto a la vez, así que no significaba nada. */
  --reloj:var(--gold);      /* corre el tiempo: los 40 min de pago, el borrador de 10 */
  --transito:var(--info);   /* el dinero salió y todavía no está en Cuba */
  --llegada:var(--accent);  /* llegó de verdad: pedido completado, dinero recibido */

  /* --- Profundidad: la luz cae desde arriba, como en el mundo real --- */
  --sombra-1:0 1px 2px rgba(0,0,0,.28);
  --sombra-2:0 4px 14px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.24);
  --sombra-3:0 12px 32px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.26);
  --brillo:inset 0 1px 0 rgba(255,255,255,.055);
  --halo-accent:0 6px 20px rgba(0,229,160,.26);

  /* --- Movimiento: una sola curva para toda la app --- */
  --curva:cubic-bezier(.22,.61,.36,1);
  --rapido:.16s var(--curva);
  --medio:.24s var(--curva);
}

html, body { height:100%; }
body {
  background:var(--dark); color:var(--text);
  font-family:var(--font-texto);
  font-size:var(--t-md);
  line-height:1.6;
  letter-spacing:-0.005em;
  font-weight:450;
  overflow-x:hidden; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.syne { font-family:var(--font-titulo); letter-spacing:-0.02em; line-height:1.25; }
button, input, select, textarea { font-family:inherit; color:inherit; }
a { color:var(--accent); }
strong, b { font-weight:650; }

/* ---------- fondo ----------
   Una sola mancha, y en azul de bandera. Antes eran tres (menta, azul y rojo) y la
   menta de la de arriba competía con la del dinero recibido. El menta no se gasta
   en decoración: solo se enciende cuando algo llegó de verdad. */
.blob { position:fixed; border-radius:50%; pointer-events:none; z-index:0; }
.blob1 { top:-140px; right:-90px; width:360px; height:360px;
  background:radial-gradient(circle,rgba(0,42,143,.30) 0%,transparent 70%); }

.flag-stripe { display:flex; height:5px; position:sticky; top:0; z-index:50; }
.flag-stripe > div { flex:1; }
.flag-stripe > div:nth-child(1),.flag-stripe > div:nth-child(6) { background:#D0112B; }
.flag-stripe > div:nth-child(2),.flag-stripe > div:nth-child(5) { background:#fff; }
.flag-stripe > div:nth-child(3),.flag-stripe > div:nth-child(4) { background:#002A8F; }

/* ---------- layout ---------- */
#app { position:relative; z-index:1; max-width:480px; margin:0 auto; min-height:100vh;
       padding:0 20px calc(var(--nav-h) + var(--safe-b) + 32px); }
.view { animation:fade .25s ease; }
/* Repintado de la misma pantalla: sin animación, para que el flujo no parpadee */
.view.quieta { animation:none; }
@keyframes fade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* ---------- topbar ---------- */
.topbar { display:flex; align-items:center; gap:12px; padding:16px 56px 12px 0; }
.topbar .back { background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text2);
  border-radius:12px; width:38px; height:38px; font-size:17px; cursor:pointer; flex-shrink:0; }
.topbar .back:active { transform:scale(.94); }
.topbar h1 { font-size:var(--t-xl); font-weight:800; flex:1; letter-spacing:-0.025em; }
.topbar .sub { font-size:var(--t-sm); color:var(--text2); font-weight:500; margin-top:3px;
  font-family:var(--font-texto); letter-spacing:0; line-height:1.45; }

/* ---------- cards ---------- */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:22px 20px; margin-bottom:var(--gap); }
.card.tight { padding:17px 16px; border-radius:var(--radius-sm); }
.card-title { font-size:var(--t-lg); font-weight:700; margin-bottom:14px;
  font-family:var(--font-titulo); letter-spacing:-0.02em; line-height:1.3; }
.muted { color:var(--text2); font-size:var(--t-sm); line-height:1.7; font-weight:450; }
/* Etiqueta de sección, en minúscula y sin espaciar las letras. Las mayúsculas
   espaciadas encima de cada bloque eran lo que más hacía parecer plantilla a la app. */
.label { font-size:var(--t-sm); color:var(--text2); font-weight:600;
  letter-spacing:-0.005em; margin-bottom:10px; }

/* ---------- botones ---------- */
.btn { display:flex; align-items:center; justify-content:center; gap:9px; width:100%;
  border:none; border-radius:var(--radius-sm); padding:16px 18px; font-size:var(--t-md); font-weight:650;
  cursor:pointer; transition:transform .15s, opacity .15s; font-family:var(--font-texto);
  letter-spacing:-0.01em; line-height:1.3; }
.btn:active { transform:scale(.97); }
.btn:disabled { opacity:.38; cursor:not-allowed; }
.btn-primary { background:linear-gradient(135deg,var(--accent) 0%,#00B37E 100%); color:#04211A; }
.btn-blue    { background:linear-gradient(135deg,#3C6BFF 0%,var(--blue) 100%); color:#fff; }
.btn-wa      { background:#25D366; color:#042A14; }
.btn-ghost   { background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text2);
  font-size:var(--t-sm); padding:13px 16px; font-weight:600; }
.btn-danger  { background:rgba(255,107,107,.14); border:1px solid rgba(255,107,107,.35); color:var(--danger); }
.btn-sm { padding:11px 15px; font-size:var(--t-sm); width:auto; }
.btn-row { display:flex; gap:10px; flex-wrap:wrap; }
.btn-row .btn { flex:1; min-width:0; }

/* ---------- inputs ---------- */
.field { margin-bottom:14px; }
.input, select.input, textarea.input {
  width:100%; background:var(--surface2); border:1.5px solid var(--border); color:var(--text);
  border-radius:var(--radius-xs); padding:15px 16px; font-size:16px; font-weight:500; outline:none;
  transition:border-color .18s, background .18s; -webkit-appearance:none; appearance:none;
  line-height:1.45; letter-spacing:-0.005em;
}
select.input { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23A8B4D8' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:38px; }
.input:focus { border-color:var(--accent); background:rgba(0,229,160,.04); }
.input::placeholder { color:var(--text3); font-weight:400; }
textarea.input { min-height:88px; resize:vertical; line-height:1.6; }
.input-big { font-size:28px; font-weight:700; font-family:var(--font-titulo);
  text-align:center; padding:20px 16px; letter-spacing:-0.02em; }
.hint { font-size:var(--t-xs); color:var(--text3); margin-top:8px; line-height:1.6; font-weight:450; }
.err  { font-size:var(--t-sm); color:var(--danger); font-weight:600; margin-top:8px; line-height:1.5; }
.ok   { font-size:var(--t-sm); color:var(--accent2); font-weight:600; margin-top:8px; }

/* ---------- selección tipo tarjeta ---------- */
.pick { width:100%; text-align:left; background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius-sm); padding:16px; cursor:pointer; display:flex; align-items:center; gap:14px;
  transition:border-color .18s, background .18s; margin-bottom:11px; }
.pick:active { transform:scale(.985); }
.pick.selected { border-color:var(--accent); background:rgba(0,229,160,.08); }
.pick .ic { font-size:23px; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05); border-radius:12px; flex-shrink:0; }
.pick .tx { flex:1; min-width:0; }
.pick .nm { font-size:var(--t-md); font-weight:650; letter-spacing:-0.01em; }
.pick .sb { font-size:var(--t-sm); color:var(--text2); margin-top:4px; line-height:1.55; font-weight:450; }
.pick .rt { font-size:var(--t-sm); color:var(--accent); font-weight:650; margin-top:5px; }
.pick .chk { color:var(--accent); font-size:17px; opacity:0; }
.pick.selected .chk { opacity:1; }

/* grid de países */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.grid.g2 { grid-template-columns:repeat(2,1fr); }
.gbtn { background:var(--surface2); border:1.5px solid var(--border); border-radius:13px; padding:13px 7px;
  cursor:pointer; text-align:center; transition:border-color .18s, background .18s; }
.gbtn:active { transform:scale(.96); }
.gbtn.selected { border-color:var(--accent); background:rgba(0,229,160,.08); }
.gbtn .fl { font-size:24px; display:block; margin-bottom:4px; }
.gbtn .nm { font-size:var(--t-sm); font-weight:650; letter-spacing:-0.01em; line-height:1.3; }
.gbtn .sb { font-size:11px; color:var(--text2); margin-top:3px; line-height:1.35; font-weight:450; }

/* ---------- pasos ---------- */
.steps { display:flex; align-items:center; justify-content:center; gap:6px; margin:6px 0 24px; }
.step-dot { width:29px; height:29px; border-radius:50%; background:var(--surface2); border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center; font-size:var(--t-sm); font-weight:650; color:var(--text3); flex-shrink:0; }
.step-dot.active { background:var(--accent); border-color:var(--accent); color:#04211A; }
.step-dot.done   { background:rgba(0,229,160,.2); border-color:var(--accent); color:var(--accent); }
.step-line { flex:1; height:2px; background:var(--border); max-width:34px; }
.step-line.done { background:var(--accent); }

/* ---------- resultado / cálculo ---------- */
.result { background:linear-gradient(135deg,rgba(0,229,160,.13) 0%,rgba(0,42,143,.18) 100%);
  border:1.5px solid rgba(0,229,160,.3); border-radius:var(--radius-sm); padding:18px; text-align:center; margin:14px 0; }
.result .rl { font-size:var(--t-sm); color:var(--text2); font-weight:500; letter-spacing:0; }
.result .rv { font-size:clamp(23px,7.2vw,32px); font-weight:750; font-family:var(--font-titulo);
  margin:8px 0 5px; color:#fff; line-height:1.15; overflow-wrap:anywhere; letter-spacing:-0.03em; }
.result .rd { font-size:var(--t-sm); color:var(--text2); line-height:1.6; font-weight:450; }

.rates-bar { display:flex; gap:8px; margin-bottom:16px; }
.rates-bar .ri { flex:1; background:var(--surface2); border:1px solid var(--border2); border-radius:12px; padding:11px 8px; text-align:center; }
.rates-bar .rl { font-size:10.5px; color:var(--text2); font-weight:500; line-height:1.35; }
.rates-bar .rv { font-size:var(--t-sm); font-weight:650; margin-top:5px; line-height:1.35; }
.rates-bar .acc { color:var(--accent); }

.chips { display:flex; flex-wrap:wrap; gap:7px; }
.chip { background:var(--surface2); border:1.5px solid var(--border); border-radius:20px; padding:10px 16px;
  font-size:var(--t-sm); font-weight:600; cursor:pointer; transition:.18s; }
.chip.selected, .chip:active { border-color:var(--accent); color:var(--accent); }

.pkg-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pkg { background:var(--surface2); border:1.5px solid var(--border); border-radius:12px; padding:11px 5px;
  text-align:center; cursor:pointer; position:relative; transition:.18s; }
.pkg.selected { border-color:var(--accent); background:rgba(0,229,160,.08); }
.pkg .c { font-size:var(--t-md); font-weight:750; font-family:var(--font-titulo); letter-spacing:-0.02em; }
.pkg .p { font-size:11.5px; color:var(--accent); font-weight:600; margin-top:4px; }
.pkg .hot { position:absolute; top:-7px; right:-3px; background:var(--gold); color:#221800;
  font-size:8px; font-weight:900; padding:2px 6px; border-radius:8px; }

/* ---------- resumen ---------- */
.sum-row { display:flex; justify-content:space-between; gap:14px; padding:13px 0;
  border-bottom:1px solid var(--border2); font-size:var(--t-sm); line-height:1.55; }
.sum-row:last-child { border-bottom:none; }
.sum-row .k { color:var(--text2); font-weight:500; flex-shrink:0; }
.sum-row .v { font-weight:650; text-align:right; min-width:0;
  word-break:break-word; overflow-wrap:anywhere; hyphens:auto; }
.sum-row.big .v { font-size:var(--t-lg); color:var(--accent); font-family:var(--font-titulo); font-weight:700; }

/* ---------- pedidos ---------- */
.order { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:17px 16px; margin-bottom:12px; cursor:pointer; transition:border-color .18s; }
.order:active { transform:scale(.99); }
.order-top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:9px; }
.order-code { font-family:var(--font-titulo); font-weight:750; font-size:var(--t-lg); letter-spacing:0;
  overflow-wrap:anywhere; }
.order-top > div:first-child { min-width:0; flex:1; }
.order-date { font-size:var(--t-xs); color:var(--text3); margin-top:4px; line-height:1.45; }
.badge { font-size:11px; font-weight:650; padding:6px 11px; border-radius:20px; white-space:nowrap; letter-spacing:-0.01em; }
.order-amt { font-size:var(--t-sm); font-weight:600; line-height:1.5; }
.order-amt .arrow { color:var(--text3); margin:0 6px; }
.order-amt .to { color:var(--accent); }

/* timeline */
.tl { position:relative; padding-left:30px; }
.tl-item { position:relative; padding-bottom:24px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:''; position:absolute; left:-22px; top:20px; bottom:-4px; width:2px; background:var(--border); }
.tl-item:last-child::before { display:none; }
.tl-item.done::before { background:var(--accent); }
.tl-dot { position:absolute; left:-30px; top:0; width:18px; height:18px; border-radius:50%;
  background:var(--surface2); border:2px solid var(--border); display:flex; align-items:center;
  justify-content:center; font-size:9px; }
.tl-item.done .tl-dot { background:var(--accent); border-color:var(--accent); color:#04211A; }
.tl-item.current .tl-dot { background:var(--gold); border-color:var(--gold); color:#221800;
  box-shadow:0 0 0 5px rgba(245,197,24,.16); }
.tl-t { font-size:var(--t-md); font-weight:650; letter-spacing:-0.01em; }
.tl-d { font-size:var(--t-sm); color:var(--text2); margin-top:5px; line-height:1.65; font-weight:450; }
.tl-ts { font-size:var(--t-xs); color:var(--text3); margin-top:5px; }

/* ---------- nav inferior ---------- */
.nav { position:fixed; bottom:0; left:0; right:0; z-index:60;
  background:rgba(10,15,46,.93); backdrop-filter:blur(14px); border-top:1px solid var(--border);
  padding-bottom:var(--safe-b); }
.nav-in { max-width:480px; margin:0 auto; display:flex; height:var(--nav-h); }
.nav-btn { flex:1; min-width:0; background:none; border:none; cursor:pointer; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:4px; color:var(--text3);
  font-size:9.5px; font-weight:600; letter-spacing:-0.02em; padding:0 2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nav-btn .ni { font-size:20px; line-height:1; }
@media (min-width:400px) { .nav-btn { font-size:10.5px; } }
.nav-btn.active { color:var(--accent); }

/* ---------- FAB WhatsApp ---------- */
.fab { position:fixed; right:calc(50% - 240px + 16px); bottom:calc(var(--nav-h) + var(--safe-b) + 16px);
  height:46px; padding:0 14px 0 12px; border-radius:23px; background:#25D366; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px; z-index:55;
  box-shadow:0 6px 20px rgba(37,211,102,.35); }
.fab:active { transform:scale(.94); }
.fab .fab-tx { font-size:12.5px; font-weight:700; color:#042A14; letter-spacing:-0.01em; line-height:1; }
.fab svg { flex-shrink:0; }
@media (max-width:512px) { .fab { right:16px; } }

/* ---------- panel flotante de contacto ---------- */
.contact-wrap { position:fixed; top:14px; right:calc(50% - 240px + 14px); z-index:120; }
@media (max-width:512px) { .contact-wrap { right:14px; } }

.contact-btn {
  width:46px; height:46px; border-radius:14px; cursor:pointer; font-size:21px;
  background:rgba(28,38,96,.92); border:1px solid var(--border);
  backdrop-filter:blur(10px); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.35); transition:transform .15s, border-color .2s;
}
.contact-btn:active { transform:scale(.92); }
.contact-btn.open { border-color:var(--accent); }

.contact-panel {
  position:absolute; top:54px; right:0; width:250px;
  background:rgba(17,24,64,.98); border:1px solid var(--border);
  border-radius:16px; padding:9px; backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.5); animation:cpIn .2s ease;
}
@keyframes cpIn { from { opacity:0; transform:translateY(-8px) scale(.97); } to { opacity:1; transform:none; } }

.cp-title { font-family:var(--font-titulo); font-size:var(--t-sm); font-weight:700;
  letter-spacing:-0.01em; color:var(--text); padding:6px 9px 9px; }
.cp-item { display:flex; align-items:center; gap:10px; padding:9px; border-radius:11px;
  text-decoration:none; color:var(--text); transition:background .16s; }
.cp-item:active { background:rgba(255,255,255,.07); }
.cp-ic { width:32px; height:32px; border-radius:9px; display:flex; align-items:center;
  justify-content:center; font-size:16px; flex-shrink:0; }
.cp-item.wa .cp-ic { background:rgba(37,211,102,.16); }
.cp-item.fb .cp-ic { background:rgba(24,119,242,.18); }
.cp-item.gg .cp-ic { background:rgba(245,197,24,.16); }
.cp-item.ch .cp-ic { background:rgba(0,229,160,.14); }
.cp-tx { min-width:0; }
.cp-n { display:block; font-size:var(--t-sm); font-weight:650; white-space:nowrap; letter-spacing:-0.01em; }
.cp-s { display:block; font-size:11px; color:var(--text2); margin-top:2px; line-height:1.35; }

/* ---------- campo de contraseña con ojo ---------- */
.pass-wrap { position:relative; }
.pass-wrap .input { padding-right:50px; }
.eye { position:absolute; right:6px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; font-size:17px; padding:9px 10px;
  color:var(--text2); border-radius:9px; }
.eye:active { background:rgba(255,255,255,.08); }

/* ---------- código de pedido destacado ---------- */
.codigo-box { background:linear-gradient(135deg,rgba(0,229,160,.16) 0%,rgba(0,42,143,.24) 100%);
  border:1.5px solid rgba(0,229,160,.4); border-radius:var(--radius); padding:22px 18px;
  text-align:center; margin-bottom:14px; }
.codigo-box .lbl { font-size:var(--t-sm); font-weight:500; letter-spacing:0; color:var(--text2); }
.codigo-box .cod { font-family:var(--font-titulo); font-size:clamp(25px,7.6vw,34px); font-weight:750;
  letter-spacing:1.5px; margin:12px 0 8px; color:#fff; overflow-wrap:anywhere; line-height:1.2; }
.codigo-box .sub { font-size:var(--t-sm); color:var(--text2); line-height:1.7; margin-bottom:18px; }

/* ---------- bloque de dato copiable ---------- */
.copy-box { background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--radius-xs); padding:13px 14px; margin-bottom:10px; }
.copy-box .cb-lbl { font-size:var(--t-sm); font-weight:500; letter-spacing:0;
  color:var(--text2); margin-bottom:9px; }
.copy-box .cb-val {
  font-family:'Courier New',ui-monospace,monospace; font-size:16px; font-weight:700;
  color:#fff; line-height:1.55; letter-spacing:.5px;
  word-break:break-all; overflow-wrap:anywhere; white-space:pre-wrap;
  -webkit-user-select:all; user-select:all;
}
.copy-box .cb-sub { font-size:var(--t-xs); color:var(--text2); margin-top:7px; line-height:1.6;
  overflow-wrap:anywhere; }
.copy-box .btn { margin-top:11px; padding:11px; font-size:13px; }
.copy-box.ok { border-color:rgba(0,229,160,.45); }

/* ---------- campanita de notificaciones ---------- */
.bell-wrap { position:fixed; top:14px; right:calc(50% - 240px + 70px); z-index:120; }
@media (max-width:512px) { .bell-wrap { right:70px; } }
.bell-btn { width:46px; height:46px; border-radius:14px; cursor:pointer; font-size:20px;
  background:rgba(28,38,96,.92); border:1px solid var(--border); backdrop-filter:blur(10px);
  display:flex; align-items:center; justify-content:center; position:relative;
  box-shadow:0 4px 16px rgba(0,0,0,.35); }
.bell-btn:active { transform:scale(.92); }
.bell-dot { position:absolute; top:-4px; right:-4px; background:var(--danger); color:#fff;
  font-size:10px; font-weight:900; min-width:19px; height:19px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; padding:0 5px;
  border:2px solid var(--dark); }

.notif { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:14px; margin-bottom:9px; cursor:pointer; }
.notif.nueva { border-color:rgba(0,229,160,.4); background:rgba(0,229,160,.06); }
.notif .nt { font-size:var(--t-md); font-weight:650; letter-spacing:-0.01em; line-height:1.4; }
.notif .nb { font-size:var(--t-sm); color:var(--text2); margin-top:6px; line-height:1.6; font-weight:450; }
.notif .nd { font-size:var(--t-xs); color:var(--text3); margin-top:7px; }

/* ---------- banner de instalación ---------- */
.install-bar { position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:rgba(17,24,64,.98); border-top:1.5px solid rgba(0,229,160,.4);
  backdrop-filter:blur(14px); padding:16px 18px calc(16px + var(--safe-b));
  box-shadow:0 -8px 30px rgba(0,0,0,.5); animation:upBar .32s ease; }
@keyframes upBar { from{transform:translateY(100%);} to{transform:none;} }
.install-in { max-width:480px; margin:0 auto; }
.install-top { display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.install-ic { width:44px; height:44px; border-radius:12px; background:rgba(0,229,160,.14);
  display:flex; align-items:center; justify-content:center; font-size:23px; flex-shrink:0; }
.install-t { font-family:var(--font-titulo); font-size:var(--t-md); font-weight:700; letter-spacing:-0.015em; }
.install-s { font-size:var(--t-xs); color:var(--text2); margin-top:4px; line-height:1.55; }

.beta { display:inline-block; background:rgba(245,197,24,.18); color:var(--gold);
  font-size:10px; font-weight:700; letter-spacing:.08em; padding:4px 9px;
  border-radius:7px; vertical-align:middle; margin-left:7px; }

/* ---------- botón de Google ---------- */
.btn-google { background:#fff; color:#1f1f1f; font-weight:600; border:1px solid rgba(0,0,0,.1); }
.btn-google:active { background:#f1f3f4; }

.separador { display:flex; align-items:center; gap:12px; margin:18px 0; }
.separador::before, .separador::after { content:''; flex:1; height:1px; background:var(--border); }
.separador span { font-size:var(--t-xs); color:var(--text3); font-weight:500; }

/* ---------- foto de perfil ---------- */
.foto-wrap { display:flex; justify-content:center; }
.foto { width:104px; height:104px; border-radius:50%; object-fit:cover;
  border:3px solid rgba(0,229,160,.45); display:block; }
.foto-vacia { display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--surface2) 0%,var(--dark3) 100%);
  font-family:var(--font-titulo); font-size:40px; font-weight:750; color:var(--accent); }

/* Foto pequeña en el menú del panel de administración */
.mini-foto { width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; }

/* ---------- resumen de tasas ---------- */
.tasa-fila { padding:14px 0; border-bottom:1px solid var(--border2); }
.tasa-fila:last-child { border-bottom:none; padding-bottom:0; }
.tasa-top { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.tasa-nombre { font-size:var(--t-sm); font-weight:600; color:var(--text); min-width:0; }
.tasa-valor { font-family:var(--font-titulo); font-size:var(--t-lg); font-weight:750;
  color:var(--accent); white-space:nowrap; letter-spacing:-0.02em; }
.tasa-nota { font-size:var(--t-xs); color:var(--text2); margin-top:4px; line-height:1.5; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.tag { font-size:10.5px; font-weight:600; background:rgba(255,255,255,.06);
  border:1px solid var(--border2); color:var(--text2); padding:4px 9px; border-radius:14px; }
.cp-item.tz { width:100%; background:none; border:none; cursor:pointer; text-align:left; font:inherit; }
.cp-item.tz .cp-ic { background:rgba(0,229,160,.14); }

/* ---------- sin conexión ---------- */
.offline-bar { position:fixed; top:5px; left:0; right:0; z-index:400;
  background:rgba(255,107,107,.96); color:#2a0606; padding:12px 18px;
  display:flex; align-items:center; justify-content:center; gap:9px;
  font-size:var(--t-sm); font-weight:600; line-height:1.45; text-align:center; }
.off-ic { font-size:17px; flex-shrink:0; }

/* ---------- indicadores de confianza ---------- */
.trust { display:grid; gap:12px; margin:26px 0 8px; }
.trust-card { position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--border); padding:20px 18px; display:flex; align-items:center; gap:16px; }
.trust-1 { background:linear-gradient(135deg,rgba(0,229,160,.14) 0%,rgba(28,38,96,.92) 62%); }
.trust-2 { background:linear-gradient(135deg,rgba(107,159,255,.16) 0%,rgba(28,38,96,.92) 62%); }
.trust-3 { background:linear-gradient(135deg,rgba(245,197,24,.14) 0%,rgba(28,38,96,.92) 62%); }
.trust-art { width:62px; height:62px; flex-shrink:0; }
.trust-tx { min-width:0; flex:1; }
.trust-v { font-family:var(--font-titulo); font-size:var(--t-2xl); font-weight:800;
  letter-spacing:-0.03em; line-height:1.1; }
.trust-l { font-size:var(--t-sm); color:var(--text2); margin-top:4px; line-height:1.5; }

/* ---------- foto ampliada ---------- */
.lightbox { position:fixed; inset:0; z-index:500; background:rgba(5,8,24,.94);
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  gap:18px; padding:24px; animation:fade .2s ease; }
.lightbox img { max-width:100%; max-height:74vh; border-radius:18px;
  border:2px solid rgba(255,255,255,.14); }
.lightbox .lb-nombre { font-family:var(--font-titulo); font-size:var(--t-lg); font-weight:700; }
.lightbox .btn { max-width:280px; }

/* ---------- misc ---------- */
.notice { border-radius:var(--radius-xs); padding:14px 16px; font-size:var(--t-sm);
  line-height:1.7; margin-bottom:14px; font-weight:450; }
.notice.info { background:rgba(107,159,255,.1); border:1px solid rgba(107,159,255,.25); color:#C5D6FF; }
.notice.warn { background:rgba(245,197,24,.1); border:1px solid rgba(245,197,24,.28); color:#FFE9A8; }
.notice.good { background:rgba(0,229,160,.1); border:1px solid rgba(0,229,160,.28); color:#A8FFE0; }
.notice.bad  { background:rgba(255,107,107,.1); border:1px solid rgba(255,107,107,.28); color:#FFC5C5; }

.empty { text-align:center; padding:52px 20px; }
.empty .e { font-size:52px; margin-bottom:14px; opacity:.55; }
.empty .t { font-size:var(--t-lg); font-weight:700; margin-bottom:9px; font-family:var(--font-titulo); }
.empty .d { font-size:var(--t-sm); color:var(--text2); line-height:1.7; margin-bottom:22px; }

.spinner { width:34px; height:34px; border:3px solid var(--border); border-top-color:var(--accent);
  border-radius:50%; animation:spin .7s linear infinite; margin:44px auto; }
@keyframes spin { to { transform:rotate(360deg); } }

.toast { position:fixed; left:50%; bottom:calc(var(--nav-h) + var(--safe-b) + 22px); transform:translateX(-50%);
  background:var(--dark3); border:1px solid var(--border); border-radius:14px; padding:14px 20px;
  font-size:var(--t-sm); font-weight:600; line-height:1.5; z-index:200; max-width:88vw; text-align:center;
  box-shadow:0 8px 28px rgba(0,0,0,.45); animation:up .3s ease; }
.toast.bad  { border-color:rgba(255,107,107,.5); color:#FFC5C5; }
.toast.good { border-color:rgba(0,229,160,.5); color:#A8FFE0; }
@keyframes up { from{opacity:0; transform:translate(-50%,14px);} to{opacity:1; transform:translate(-50%,0);} }

.tabs { display:flex; gap:6px; background:var(--surface2); border-radius:12px; padding:4px; margin-bottom:15px; }
.tab { flex:1; background:none; border:none; padding:11px 8px; border-radius:10px; font-size:var(--t-sm);
  font-weight:600; color:var(--text2); cursor:pointer; letter-spacing:-0.01em; white-space:nowrap; }
.tab.active { background:var(--accent); color:#04211A; }

.kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-bottom:15px; }
.kpi { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:15px 9px; text-align:center; }
.kpi .v { font-size:var(--t-xl); font-weight:750; font-family:var(--font-titulo);
  color:var(--accent); letter-spacing:-0.02em; }
.kpi .l { font-size:11px; color:var(--text2); font-weight:500; margin-top:5px; line-height:1.4; }

.hero { text-align:center; padding:60px 0 20px; }
.hero .logo { font-family:var(--font-titulo); font-size:32px; font-weight:800; letter-spacing:-0.035em; }
.hero .logo .star { color:var(--gold); font-size:26px; }
.hero .sl { font-size:var(--t-md); color:var(--text2); margin-top:8px; line-height:1.55; font-weight:450; }

.check-row { display:flex; align-items:flex-start; gap:11px; cursor:pointer; padding:12px 0; }
.check-row input { width:21px; height:21px; accent-color:var(--accent); flex-shrink:0; margin-top:1px; }
.check-row span { font-size:var(--t-sm); line-height:1.65; font-weight:450; }

.link { color:var(--accent); font-weight:800; cursor:pointer; text-decoration:none; }
.center { text-align:center; }
.mt { margin-top:var(--gap); }
.mb0 { margin-bottom:0; }

/* ==========================================================================
   ═══ REFINAMIENTO VISUAL ═══
   Esta sección afina lo anterior sin cambiar ninguna estructura. La idea:
   dar profundidad (la luz cae desde arriba), unificar el movimiento y hacer
   que cada elemento se sienta cuidado. Nada de esto altera el comportamiento.
   ========================================================================== */

/* ---------- 1 · Profundidad en las superficies ---------- */
.card {
  background:linear-gradient(180deg, rgba(255,255,255,.028) 0%, rgba(255,255,255,0) 42%), var(--surface);
  box-shadow:var(--sombra-2), var(--brillo);
  transition:box-shadow var(--medio), border-color var(--medio);
}
.order {
  background:linear-gradient(180deg, rgba(255,255,255,.026) 0%, rgba(255,255,255,0) 46%), var(--surface);
  box-shadow:var(--sombra-1), var(--brillo);
  transition:transform var(--rapido), box-shadow var(--medio), border-color var(--medio);
}
.order:hover { border-color:rgba(0,229,160,.3); box-shadow:var(--sombra-2), var(--brillo); }
.order:active { transform:scale(.988); }

.notif, .kpi, .copy-box, .pkg, .gbtn, .pick {
  box-shadow:var(--sombra-1), var(--brillo);
}

/* ---------- 2 · Botones con peso real ---------- */
.btn {
  transition:transform var(--rapido), box-shadow var(--medio), opacity var(--rapido), background var(--medio);
  position:relative;
}
.btn-primary {
  box-shadow:var(--halo-accent), inset 0 1px 0 rgba(255,255,255,.28);
  font-weight:700;
}
.btn-primary:active { box-shadow:0 2px 8px rgba(0,229,160,.22), inset 0 1px 0 rgba(255,255,255,.2); }
.btn-blue { box-shadow:0 6px 20px rgba(60,107,255,.28), inset 0 1px 0 rgba(255,255,255,.22); font-weight:700; }
.btn-wa   { box-shadow:0 6px 20px rgba(37,211,102,.24), inset 0 1px 0 rgba(255,255,255,.28); font-weight:700; }
.btn-ghost { box-shadow:var(--brillo); transition:border-color var(--medio), background var(--medio), transform var(--rapido); }
.btn-ghost:hover { border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.09); }
.btn-danger:hover { background:rgba(255,107,107,.2); }
.btn:disabled { box-shadow:none; }
.btn-google { box-shadow:var(--sombra-2); }

/* Accesibilidad: quien navega con teclado ve dónde está */
.btn:focus-visible, .tab:focus-visible, .chip:focus-visible,
.pick:focus-visible, .gbtn:focus-visible, .link:focus-visible,
.contact-btn:focus-visible, .bell-btn:focus-visible, .topbar .back:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px;
}

/* ---------- 3 · Campos con foco evidente ---------- */
.input:focus, select.input:focus, textarea.input:focus {
  border-color:var(--accent);
  background:rgba(0,229,160,.05);
  box-shadow:0 0 0 3.5px rgba(0,229,160,.14);
}
.input { box-shadow:inset 0 1px 3px rgba(0,0,0,.20); }

/* ---------- 4 · Selección de servicio: marca lateral al elegir ---------- */
.pick { position:relative; overflow:hidden; transition:border-color var(--medio), background var(--medio), transform var(--rapido); }
.pick::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--accent); opacity:0; transition:opacity var(--medio);
}
.pick.selected::before { opacity:1; }
.pick.selected { box-shadow:var(--sombra-2), var(--brillo); }
.pick:hover { border-color:rgba(0,229,160,.32); }
.pick .ic {
  background:linear-gradient(140deg, rgba(0,229,160,.16) 0%, rgba(255,255,255,.05) 100%);
  border:1px solid var(--border2);
}

/* ---------- 5 · Pestañas: la activa flota ---------- */
.tabs { box-shadow:inset 0 1px 3px rgba(0,0,0,.22); }
.tab { transition:background var(--medio), color var(--medio); }
.tab.active {
  box-shadow:0 2px 8px rgba(0,229,160,.30);
  font-weight:700;
}
.tab:not(.active):hover { color:var(--text); background:rgba(255,255,255,.05); }

.chip { transition:border-color var(--medio), color var(--medio), background var(--medio); }
.chip:hover { border-color:rgba(255,255,255,.24); }
.chip.selected { background:rgba(0,229,160,.10); box-shadow:0 0 0 1px rgba(0,229,160,.18); }

/* ---------- 6 · Cabecera de pantalla ---------- */
.topbar { padding-top:20px; }
.topbar .back {
  transition:background var(--medio), border-color var(--medio), transform var(--rapido);
  box-shadow:var(--brillo);
}
.topbar .back:hover { background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22); color:var(--text); }

/* Título de sección con filetes a los lados */
.seccion-tit { display:flex; align-items:center; gap:14px; margin:30px 0 16px; }
.seccion-tit .st-linea { flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--border), transparent); }
.seccion-tit .st-tx {
  font-family:var(--font-titulo); font-size:var(--t-md); font-weight:700;
  letter-spacing:-0.015em; color:var(--text);
  white-space:nowrap;
}

/* ---------- 7 · Portada ---------- */
.hero .logo .star { filter:drop-shadow(0 0 12px rgba(245,197,24,.5)); }

/* Degradado en el nombre. Solo si el navegador lo admite: si no, se queda
   en blanco de toda la vida y nunca desaparece el texto. */
@supports (-webkit-background-clip: text) {
  .hero .logo {
    background:linear-gradient(120deg, #fff 0%, #DCE6FF 46%, var(--menta) 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    display:inline-block; padding-bottom:2px;
  }
  .hero .logo .star { -webkit-text-fill-color:var(--gold); }
  .hero .logo .beta { -webkit-text-fill-color:var(--gold); }
}

/* ---------- 8 · Resultado del cálculo: es la cifra que importa ---------- */
.result {
  box-shadow:0 8px 26px rgba(0,229,160,.13), var(--brillo);
  position:relative; overflow:hidden;
}
.result::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 90% at 50% -20%, rgba(0,229,160,.16), transparent 62%);
}
.result .rv { text-shadow:0 2px 18px rgba(0,229,160,.28); }

.codigo-box { box-shadow:0 10px 30px rgba(0,229,160,.15), var(--brillo); }

/* ---------- 9 · Cuarto indicador de confianza ---------- */
.trust-4 { background:linear-gradient(135deg,rgba(185,139,255,.16) 0%,rgba(28,38,96,.92) 62%); }
.trust-card {
  box-shadow:var(--sombra-2), var(--brillo);
  transition:transform var(--medio), box-shadow var(--medio);
}
.trust-card:hover { transform:translateY(-2px); box-shadow:var(--sombra-3), var(--brillo); }
.trust-card::after {
  content:''; position:absolute; right:-38px; top:-38px; width:120px; height:120px;
  border-radius:50%; background:rgba(255,255,255,.028); pointer-events:none;
}
.trust-art { filter:drop-shadow(0 3px 10px rgba(0,0,0,.32)); }

/* ---------- 10 · Panel flotante y campanita ---------- */
.contact-btn, .bell-btn {
  box-shadow:var(--sombra-2), var(--brillo);
  transition:transform var(--rapido), border-color var(--medio), box-shadow var(--medio);
}
.contact-btn:hover, .bell-btn:hover { border-color:rgba(0,229,160,.4); box-shadow:var(--sombra-3), var(--brillo); }
.contact-panel { box-shadow:var(--sombra-3), var(--brillo); }
.cp-item:hover { background:rgba(255,255,255,.055); }
.cp-ic { box-shadow:var(--brillo); }
.cp-legal {
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
  padding:11px 6px 5px; margin-top:6px; border-top:1px solid var(--border2);
}
.cp-legal button {
  background:none; border:none; cursor:pointer; padding:2px;
  font:inherit; font-size:10.5px; font-weight:600; color:var(--text3);
  transition:color var(--medio);
}
.cp-legal button:hover { color:var(--accent); }
.cp-legal span { color:var(--text3); font-size:10.5px; }

/* ---------- 11 · Línea de tiempo del pedido ---------- */
.tl-item.current .tl-dot { animation:latido 2.2s ease-in-out infinite; }
@keyframes latido {
  0%,100% { box-shadow:0 0 0 5px rgba(245,197,24,.16); }
  50%     { box-shadow:0 0 0 9px rgba(245,197,24,.07); }
}

/* ---------- 12 · Pie con los documentos legales ---------- */
.pie-legal {
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:26px 0 6px; padding-top:18px; border-top:1px solid var(--border2);
}
.pie-legal .link { font-size:var(--t-xs); font-weight:600; color:var(--text3); }
.pie-legal .link:hover { color:var(--accent); }
.pie-legal .pl-sep { color:var(--text3); font-size:var(--t-xs); }

/* ---------- 13 · Documentos legales ---------- */
.legal { margin-top:4px; }
.legal-intro {
  font-size:var(--t-md); line-height:1.8; color:var(--text2);
  border-left:3px solid var(--accent); padding:2px 0 2px 16px; margin-bottom:26px;
}
.legal-sec { margin-bottom:26px; }
.legal-h {
  font-family:var(--font-titulo); font-size:var(--t-lg); font-weight:750;
  letter-spacing:-0.02em; line-height:1.3; margin-bottom:12px; color:#fff;
}
.legal-p { font-size:var(--t-sm); line-height:1.85; color:var(--text2); margin-bottom:12px; }
.legal-p:last-child { margin-bottom:0; }
.legal-ul { list-style:none; margin:0 0 12px; padding:0; }
.legal-ul li {
  position:relative; padding-left:22px; margin-bottom:11px;
  font-size:var(--t-sm); line-height:1.8; color:var(--text2);
}
.legal-ul li::before {
  content:''; position:absolute; left:5px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.65;
}
.legal strong { color:#fff; font-weight:650; }
.legal-pie {
  margin-top:32px; padding-top:20px; border-top:1px solid var(--border2);
  font-size:var(--t-xs); color:var(--text3); line-height:1.9; text-align:center;
}
.legal-head { text-align:center; padding:34px 0 24px; }
.legal-logo { width:66px; height:66px; border-radius:18px; margin-bottom:14px; box-shadow:var(--sombra-2); }
.legal-head h1 { font-size:var(--t-2xl); font-weight:800; letter-spacing:-0.03em; }
.legal-sub { font-size:var(--t-sm); color:var(--text2); margin-top:8px; line-height:1.6; }

/* ---------- 14 · Detalles finos ---------- */
.badge { box-shadow:var(--brillo); letter-spacing:.01em; }
.empty .e { filter:grayscale(.25); }
.sum-row.big { border-top:1px solid var(--border2); margin-top:4px; padding-top:16px; }
.spinner { border-top-color:var(--accent); box-shadow:0 0 18px rgba(0,229,160,.14); }
.separador span { letter-spacing:0; font-weight:500; }
.toast { box-shadow:var(--sombra-3); }
.install-bar { box-shadow:0 -10px 36px rgba(0,0,0,.55); }
.lightbox img { box-shadow:var(--sombra-3); }
.foto { box-shadow:0 6px 22px rgba(0,0,0,.4), 0 0 0 6px rgba(0,229,160,.08); }
::selection { background:rgba(0,229,160,.3); color:#fff; }

/* ==========================================================================
   ═══ 15 · LA DISCIPLINA DEL COLOR ═══  (versión 10.0)

   Una sola regla: el color dice el estado, y si no dice un estado no se usa.

     🟡 oro   = corre el tiempo   → los 40 min de pago, el borrador de 10
     🔵 azul  = estás operando    → lo seleccionado, el paso actual, cargando
     🟢 menta = hay dinero        → el importe que recibe la familia, completado

   Antes el menta estaba a la vez en botones, focos, viñetas de listas, spinner,
   selección de texto, aros de foto y bordes de aviso. Estaba en todo, así que no
   distinguía nada. Aquí se le quita de todo lo que no es dinero.

   Qué NO cambia: el menta sigue en los botones principales y en las cifras que
   recibe la familia. Son las dos cosas que sí son dinero, y son la marca.
   ========================================================================== */

/* ---------- 15.1 · Lo que se selecciona y lo que se está operando: azul ---------- */
.pick.selected { border-color:var(--transito); background:rgba(107,159,255,.10); }
.pick.selected::before { background:var(--transito); }
.pick:hover { border-color:rgba(107,159,255,.34); }
.pick .chk { color:var(--transito); }
.pick .rt { color:var(--transito); }
.pick .ic {
  background:linear-gradient(140deg, rgba(107,159,255,.16) 0%, rgba(255,255,255,.05) 100%);
}

.gbtn.selected { border-color:var(--transito); background:rgba(107,159,255,.10); }
.chip.selected, .chip:active { border-color:var(--transito); color:var(--transito); }
.chip.selected { background:rgba(107,159,255,.10); box-shadow:0 0 0 1px rgba(107,159,255,.18); }
.pkg.selected { border-color:var(--transito); background:rgba(107,159,255,.10); }
.pkg .p { color:var(--transito); }

.tab.active { background:var(--transito); color:#06183F; box-shadow:0 2px 8px rgba(107,159,255,.30); }
.nav-btn.active { color:var(--transito); }

.step-dot.active { background:var(--transito); border-color:var(--transito); color:#06183F; }
.step-dot.done   { background:rgba(107,159,255,.2); border-color:var(--transito); color:var(--transito); }
.step-line.done  { background:var(--transito); }

/* El foco es «estás aquí», no «llegó el dinero» */
.input:focus, select.input:focus, textarea.input:focus {
  border-color:var(--transito);
  background:rgba(107,159,255,.05);
  box-shadow:0 0 0 3.5px rgba(107,159,255,.14);
}
.btn:focus-visible, .tab:focus-visible, .chip:focus-visible,
.pick:focus-visible, .gbtn:focus-visible, .link:focus-visible,
.contact-btn:focus-visible, .bell-btn:focus-visible, .topbar .back:focus-visible {
  outline:2px solid var(--transito); outline-offset:3px;
}
.contact-btn:hover, .bell-btn:hover { border-color:rgba(107,159,255,.42); }
.contact-btn.open { border-color:var(--transito); }
.order:hover { border-color:rgba(107,159,255,.32); }

/* Cargando es tránsito, no llegada */
.spinner { border-top-color:var(--transito); box-shadow:0 0 18px rgba(107,159,255,.14); }
::selection { background:rgba(107,159,255,.32); color:#fff; }

/* ---------- 15.1b · La línea de tiempo del detalle sigue la misma regla ----------
   Antes cada paso cumplido se pintaba de menta, así que un pedido a mitad de
   camino se veía tan «llegado» como uno entregado. Ahora los pasos cumplidos son
   azules (avance), el paso actual es oro (te estamos esperando) y solo el último,
   cuando se alcanza, se pone verde. */
.tl-item.done::before      { background:var(--transito); }
.tl-item.done .tl-dot      { background:var(--transito); border-color:var(--transito); color:#06183F; }
.tl-item.current .tl-dot   { background:var(--reloj); border-color:var(--reloj); color:#221800;
                             box-shadow:0 0 0 5px rgba(245,197,24,.16); }
/* El último paso del flujo es «completado»: ahí sí, verde. */
.tl-item.done:last-child .tl-dot,
.tl-item.current:last-child .tl-dot {
  background:var(--llegada); border-color:var(--llegada); color:#04211A;
  box-shadow:0 0 0 5px rgba(0,229,160,.16);
}

/* ---------- 15.2 · Lo decorativo pierde el menta ---------- */
.legal-ul li::before { background:var(--text3); opacity:1; }
.legal-intro { border-left-color:var(--transito); }
.foto { border-color:rgba(255,255,255,.18); box-shadow:0 6px 22px rgba(0,0,0,.4); }
.foto-vacia { color:var(--text2); }
.link { color:var(--transito); }
.notif.nueva { border-color:rgba(107,159,255,.42); background:rgba(107,159,255,.07); }
.install-bar { border-top-color:rgba(107,159,255,.42); }
.install-ic { background:rgba(107,159,255,.14); }
.cp-item.ch .cp-ic, .cp-item.tz .cp-ic { background:rgba(107,159,255,.14); }
.copy-box.ok { border-color:rgba(107,159,255,.45); }
.ok { color:var(--transito); }

/* El nombre en la portada pierde el menta: se queda en blanco y azul muy claro.
   OJO: hay que usar `background-image`, NO la abreviatura `background`. La
   abreviatura reinicia `background-clip` a `border-box` y entonces el degradado
   pinta la caja entera en vez del texto: el nombre desaparece y queda un
   rectángulo blanco. Es exactamente lo que pasó al escribir esto la primera vez. */
@supports (-webkit-background-clip: text) {
  .hero .logo {
    background-image:linear-gradient(120deg, #fff 0%, #DCE6FF 100%);
    -webkit-background-clip:text; background-clip:text;
  }
}

/* ---------- 15.3 · Donde SÍ se enciende el menta: el dinero ---------- */
.result .rv, .sum-row.big .v, .order-amt .to, .tasa-valor, .kpi .v {
  color:var(--llegada);
}

/* ---------- 15.4 · Las cifras se alinean ----------
   IBM Plex Sans y Archivo traen cifras de ancho fijo. Con ellas los importes se
   alinean en columna y una tarjeta se lee de 4 en 4 sin que bailen los dígitos. */
.order-amt, .result .rv, .sum-row .v, .kpi .v, .tasa-valor, .trust-v,
.codigo-box .cod, .copy-box .cb-val, .input-big, .pkg .c, .badge, .bell-dot {
  font-variant-numeric:tabular-nums lining-nums;
}

/* ==========================================================================
   ═══ 16 · JERARQUÍA: NO TODO ES LA MISMA TARJETA ═══

   Antes cada bloque llevaba el mismo radio y la misma sombra, así que un pedido
   con el reloj corriendo pesaba lo mismo que un aviso menor. Ahora el peso visual
   depende de lo que es la cosa:

     un documento vivo (pedido)   → sombra y barra lateral de estado
     un panel que agrupa (card)   → sombra suave
     un control (botón, chip)     → plano, solo borde
   ========================================================================== */

/* Los controles son planos: un borde ya dice «esto se toca» */
.pick, .gbtn, .pkg, .chip { box-shadow:var(--brillo); }

/* ---------- 16.1 · La línea de estado del pedido ----------
   Es el único sitio de la app donde gasto audacia, porque contesta la única
   pregunta que de verdad tiene el cliente: «¿ya llegó?». */
.order { position:relative; overflow:hidden; }
.order::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--text3); opacity:.5;
}
.order.e-reloj::before   { background:var(--reloj);    opacity:1; }
.order.e-transito::before{ background:var(--transito); opacity:1; }
.order.e-llegada::before { background:var(--llegada);  opacity:1; }
.order.e-fallo::before   { background:var(--danger);   opacity:1; }

.order.e-reloj    { box-shadow:var(--sombra-2), var(--brillo); }
.order.e-transito { box-shadow:var(--sombra-2), var(--brillo); }

/* El riel: cuánto le queda al pedido para llegar */
.riel { height:3px; background:rgba(255,255,255,.09); border-radius:2px;
  margin-top:12px; position:relative; overflow:hidden; }
.riel i { position:absolute; left:0; top:0; bottom:0; border-radius:2px;
  background:var(--text3); transition:width var(--medio); }
.order.e-reloj    .riel i { background:var(--reloj); }
.order.e-transito .riel i { background:var(--transito); }
.order.e-llegada  .riel i { background:var(--llegada); }
.order.e-fallo    .riel i { background:var(--danger); }

.riel-tx { display:flex; justify-content:space-between; gap:10px; margin-top:7px;
  font-size:var(--t-xs); color:var(--text3); line-height:1.4; }
.riel-tx .ahora { color:var(--text2); font-weight:600; }

/* ---------- 16.2 · Los indicadores de confianza no son botones ----------
   Levantarlos al pasar el ratón prometía que se podían pulsar. No se pueden. */
.trust-card:hover { transform:none; box-shadow:var(--sombra-2), var(--brillo); }

/* Barra de desplazamiento discreta en escritorio */
@media (min-width:700px) {
  ::-webkit-scrollbar { width:10px; }
  ::-webkit-scrollbar-track { background:var(--dark); }
  ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:6px;
    border:3px solid var(--dark); }
  ::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.24); }
}

/* Respeta a quien pide menos movimiento en su teléfono */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* ==========================================================================
   CUENTA BLOQUEADA
   Tiene que leerse de lejos y no confundirse con un aviso cualquiera: es la
   única pantalla que la persona va a ver hasta que decida qué hacer.
   ========================================================================== */
.bloqueo{
  background:rgba(255,107,107,.12);
  border:2px solid var(--danger);
  border-radius:var(--radius);
  padding:26px 20px;
  text-align:center;
  margin-bottom:18px;
  box-shadow:0 0 0 6px rgba(255,107,107,.07);
}
.bloqueo-ico{ font-size:46px; line-height:1; margin-bottom:12px }
.bloqueo-tx{
  color:var(--danger);
  font-family:var(--font-titulo);
  font-weight:800;
  font-size:var(--t-lg);
  line-height:1.45;
  letter-spacing:.3px;
}

/* ==========================================================================
   INVITACIÓN A INSTALAR LA APP
   Va encima del logo, lo primero que se ve. Antes esto era un iconito perdido
   en la esquina de la cabecera que nadie pulsaba.
   ========================================================================== */
.inst-bloque{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px;
  background:linear-gradient(180deg,rgba(0,229,160,.13),rgba(0,229,160,.06));
  border:1px solid rgba(0,229,160,.36);
  border-radius:var(--radius);
  padding:16px 18px;
  margin-bottom:6px;
  box-shadow:var(--sombra-2);
}
.inst-ic{ font-size:32px; line-height:1; flex-shrink:0 }
.inst-tx{ flex:1; min-width:170px }
.inst-t{
  font-family:var(--font-titulo); font-weight:750;
  font-size:var(--t-lg); color:#fff; line-height:1.3; margin-bottom:3px;
}
.inst-s{ font-size:var(--t-sm); color:var(--text2); line-height:1.5 }
.inst-btn{
  width:auto; flex-shrink:0; margin:0;
  padding:13px 22px; font-size:var(--t-md);
  text-decoration:none;
}
.inst-nota{
  flex-basis:100%;
  font-size:var(--t-xs); color:var(--text3); line-height:1.5;
  margin-top:-2px;
}
/* En pantallas estrechas el botón ocupa el ancho: es la acción principal. */
@media (max-width:460px){
  .inst-bloque{ gap:12px; padding:15px 16px }
  .inst-btn{ width:100%; }
}

/* ==========================================================================
   HOJAS DEL PANEL FLOTANTE  (Opiniones · Acerca de la App)
   Se abren encima de la pantalla y la dejan intacta debajo: el usuario no
   pierde el sitio donde estaba.
   ========================================================================== */
.hoja{
  position:fixed; inset:0; z-index:500;
  background:rgba(4,7,24,.82); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:flex-end; justify-content:center;
  animation:fade .2s ease;
}
@media (min-width:600px){ .hoja{ align-items:center } }

.hoja-caja{
  width:100%; max-width:480px; max-height:88vh;
  background:var(--dark2); border:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0;
  display:flex; flex-direction:column;
  box-shadow:var(--sombra-3);
  animation:subir .26s var(--curva);
}
@media (min-width:600px){ .hoja-caja{ border-radius:var(--radius) } }
@keyframes subir{ from{ transform:translateY(24px); opacity:0 } to{ transform:none; opacity:1 } }

.hoja-top{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px; border-bottom:1px solid var(--border); flex-shrink:0;
}
.hoja-t{
  flex:1; min-width:0;
  font-family:var(--font-titulo); font-weight:750; font-size:var(--t-lg); color:#fff;
}
.hoja-x{
  flex-shrink:0; width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.07); border:1px solid var(--border);
  color:var(--text2); font-size:15px; cursor:pointer; line-height:1;
}
.hoja-x:hover{ background:rgba(255,255,255,.13); color:#fff }

.hoja-cuerpo{
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:18px 18px calc(20px + var(--safe-b));
}

/* La caja de las reseñas lleva su propio fondo opaco. El marco de dentro ya
   trae el suyo, pero algunos móviles componen los marcos aparte y lo dejaban
   ver a través: se leía el formulario de detrás mezclado con las reseñas. */
#ti-caja{
  background:var(--dark2);
  border-radius:var(--radius-sm);
  overflow:hidden;
  min-height:120px;
}

/* ==========================================================================
   QUIÉN GESTIONA CADA PEDIDO
   Una franja al pie de cada pedido de la lista. Con varios administradores
   mirando la misma pantalla, saber de un vistazo qué está cogido y qué no es
   lo que evita que dos manden el mismo dinero.
   ========================================================================== */
.gest{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-top:12px; padding-top:12px;
  border-top:1px solid var(--border2);
}
.gest .btn{ width:auto; margin:0; flex-shrink:0 }
.gest-tx{ flex:1; min-width:150px; font-size:var(--t-sm); line-height:1.45 }
.gest-mio  .gest-tx{ color:var(--accent) }
.gest-otro .gest-tx{ color:var(--gold) }
.gest-libre{ justify-content:flex-start }

/* Punto con el número de verificaciones pendientes, sobre la pestaña. */
.tab-punto{
  display:inline-block; margin-left:6px;
  min-width:18px; height:18px; padding:0 5px;
  border-radius:9px; background:var(--danger); color:#fff;
  font-size:11px; font-weight:800; line-height:18px; text-align:center;
  vertical-align:middle;
}