/* ═══════════════════════════════════════════════════════════════
   Cash Market · Mercado — extensiones a app.css
   Envoltura visual: bnav / .panel / .cli-exec / .od-row heredados literal.
   Aquí: tabs cromáticos (verde/rojo semántico), hero de mejor tasa,
   filas con impulso conductual (chips MM, borde-left por urgencia),
   pulso vivo del motor.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Tabs cromáticos · reemplazan .seg neutro por color semántico
       Oferta (verde) = alguien pone efectivo → tú captas → recibes
       Demanda (rojo) = alguien pide efectivo → tú colocas → entregas ─── */
.mkt-tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px;
}
.mkt-tab{
  border:1.5px solid var(--brd2);background:var(--surf);border-radius:12px;
  padding:11px 12px;cursor:pointer;font-family:var(--f);text-align:left;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
  display:flex;flex-direction:column;gap:2px;
}
.mkt-tab:active{transform:translateY(1px)}
.mkt-tab-lbl{
  font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);
}
.mkt-tab-n{
  font-size:1.08rem;font-weight:900;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.mkt-tab-s{
  font-size:.7rem;font-weight:700;color:var(--ink3);letter-spacing:.02em;
  margin-top:2px;
}
.mkt-tab.on.oferta{
  background:var(--green-bg);border-color:var(--green-brd);
  box-shadow:inset 0 -3px 0 var(--green);
}
.mkt-tab.on.oferta .mkt-tab-lbl{color:var(--green)}
.mkt-tab.on.demanda{
  background:var(--red-bg);border-color:var(--red-brd);
  box-shadow:inset 0 -3px 0 var(--red);
}
.mkt-tab.on.demanda .mkt-tab-lbl{color:var(--red)}

/* ─── Hero de "mejor tasa disponible" — dinero visible antes del libro ─── */
.mkt-hero{
  background:var(--surf);border:1.5px solid var(--brd2);border-radius:14px;
  padding:16px 15px 15px;margin-bottom:14px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
}
.mkt-hero-l{flex:1;min-width:0}
.mkt-hero-ey{
  font-size:.56rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:5px;
}
.mkt-hero-v{
  font-size:2.15rem;font-weight:900;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.mkt-hero-v.green{color:var(--green)}
.mkt-hero-v.red{color:var(--red)}
.mkt-hero-v .u{font-size:.9rem;color:var(--ink3);font-weight:800;letter-spacing:0;margin-left:2px}
.mkt-hero-s{
  font-size:.76rem;color:var(--ink3);margin-top:6px;line-height:1.45;
  font-variant-numeric:tabular-nums;
}
.mkt-hero-s strong{color:var(--ink2);font-weight:800}
.mkt-hero-r{
  flex-shrink:0;text-align:right;
}
.mkt-hero-vol-l{
  font-size:.5rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);
}
.mkt-hero-vol-v{
  font-size:.94rem;font-weight:900;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:2px;
}

/* ─── El libro (dentro de .panel) ─── */

/* Cabecera del libro: MONTO / TASA MENSUAL, densa, tipo ticker */
.book-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 15px;
  background:var(--surf2);
  border-bottom:1px solid var(--brd);
  font-size:.55rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink3);
}

/* Fila del libro — patrón .lrow.tap · con espacio para chip y chevron */
.book-row{
  display:flex;align-items:center;gap:10px;
  padding:13px 15px 13px 12px;
  border-bottom:1px solid var(--brd);
  cursor:pointer;
  transition:background var(--t-fast);
  border-left:3px solid transparent;
}
.book-row:last-child{border-bottom:none}
.book-row:hover{background:var(--surf2)}
.book-row:active{background:var(--surf3)}

/* Prioridades visuales — reutilizan la lógica de cli-row.fuga */
.book-row.top{border-left-color:var(--green)}
.book-row.urgente{border-left-color:var(--amber)}
.book-row.top.urgente{border-left-color:var(--green)}

/* Columna izquierda: monto + chip de contexto (mejor tasa / urgente) */
.book-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.book-monto{
  font-family:var(--f);
  font-size:1.04rem;font-weight:800;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;color:var(--ink);
  line-height:1.1;
}
.book-chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}

/* Chip idéntico a .bdg de MM (misma masa visual) */
.b-chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.5rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 6px;border:1px solid var(--brd2);background:var(--surf2);color:var(--ink3);
  border-radius:9999px;line-height:1;white-space:nowrap;
}
.b-chip.green{color:var(--green);background:var(--green-bg);border-color:var(--green-brd)}
.b-chip.amber{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-brd)}
.b-chip.gray{color:var(--ink3);background:var(--surf3);border-color:var(--brd2)}

/* Columna derecha: tasa con color según lado + chevron para invitar tap */
.book-r{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.book-tasa{
  font-family:var(--f);
  font-size:1rem;font-weight:800;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  display:flex;align-items:baseline;gap:3px;
  line-height:1.1;
}
.book-tasa.green{color:var(--green)}
.book-tasa.red{color:var(--red)}
.book-tasa .u{font-size:.6rem;color:var(--ink3);font-weight:700;letter-spacing:.04em}
.book-chev{color:var(--ink4);font-size:1rem;line-height:1;flex-shrink:0}

/* Contador del panel-h con el número resaltado */
#book-count-n{
  color:var(--ink);letter-spacing:.04em;text-transform:none;
  font-size:.66rem;font-weight:800;
}

/* Empty state */
.book-empty{
  text-align:center;padding:44px 20px;
  color:var(--ink3);font-size:.82rem;line-height:1.5;
}

/* ─── Reloj live-dot verde parpadeante en el appbar (aire de mercado activo) ─── */
.appbar .clock .cdot{animation:live-pulse 1.6s infinite}
@keyframes live-pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ─── Pie del panel: motor en vivo + hora de última actualización ─── */
.mkt-pulse{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 15px;
  background:var(--surf2);
  border-top:1px solid var(--brd);
  font-size:.68rem;font-weight:700;color:var(--ink3);letter-spacing:.04em;
  text-transform:uppercase;
}
.mkt-pulse-l{display:flex;align-items:center;gap:7px}
.mkt-pulse-dot{
  width:6px;height:6px;border-radius:50%;background:var(--green);
  animation:live-pulse 1.6s infinite;flex-shrink:0;
}
.mkt-pulse-v{color:var(--ink2);font-variant-numeric:tabular-nums;font-weight:800}

/* ═══ Bottom sheet nativo iOS · override sobre .modal de MM
   MM ya trae align-items:flex-end y padding-bottom safe-area, pero le
   faltaba: border-radius superior, handle grabber, safe-area lateral,
   uso de dvh para Safari y padding interno más generoso.
   Sólo aplica en móvil; en desktop (≥561px) hereda el modal centrado
   con border-radius:16px de MM tal cual. ═══ */
@media (max-width:560px){
  .modal{
    border-radius:20px 20px 0 0;
    padding-top:26px;
    padding-bottom:calc(env(safe-area-inset-bottom,12px) + 26px);
    padding-left:max(22px, env(safe-area-inset-left));
    padding-right:max(22px, env(safe-area-inset-right));
    max-height:88dvh;
    max-height:88vh;
  }
  /* Handle grabber iOS · barra 38×4 arriba, invita a arrastrar */
  .modal::before{
    content:"";
    display:block;
    width:38px;height:4px;
    background:var(--brd3);
    border-radius:9999px;
    margin:-12px auto 14px;
    opacity:.4;
  }
  /* X del cierre baja para no chocar con el handle */
  .modal-x{top:18px;right:16px}
}

/* ═══ Modal de postura — pop premium con jerarquía monto+tasa ═══ */

/* Contenedor con acento de lado (barra superior 3px) */
.pop{position:relative;margin-top:-4px}
.pop::before{
  content:"";position:absolute;top:-8px;left:-20px;right:-20px;height:3px;
  background:var(--brd2);
}
.pop.oferta::before{background:var(--green)}
.pop.demanda::before{background:var(--red)}

/* Sub del modal tomando color del lado (refuerza identidad) */
.pop.oferta ~ .modal-sub, .pop.oferta + .modal-sub{color:var(--green)}
.pop.demanda ~ .modal-sub, .pop.demanda + .modal-sub{color:var(--red)}

/* Chips arriba — mismos que la fila (MEJOR TASA, EN 6 H, etc.) */
.pop-chips{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;
}

/* Hero split · Monto | Tasa — dominantes, mismo peso que .mkt-hero-v */
.pop-hero{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--surf);border:1.5px solid var(--brd2);border-radius:14px;
  padding:15px 16px;margin-bottom:12px;align-items:center;
}
.pop-hero-cell{min-width:0}
.pop-hero-cell:first-child{
  padding-right:14px;border-right:1px solid var(--brd);
}
.pop-hero-cell:last-child{padding-left:14px;text-align:right}
.pop-hero-l{
  font-size:.5rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:6px;line-height:1.15;
}
.pop-hero-v{
  font-size:1.36rem;font-weight:900;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--ink);
}
.pop-hero-v.green{color:var(--green)}
.pop-hero-v.red{color:var(--red)}
.pop-hero-v .u{
  font-size:.64rem;color:var(--ink3);font-weight:800;letter-spacing:.02em;
  margin-left:2px;
}

/* Mini fila · Plazo y Disponibilidad — secundarios, tono gris */
.pop-mini{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:var(--surf2);border-radius:12px;
  padding:11px 14px;margin-bottom:4px;
}
.pop-mini-cell{min-width:0}
.pop-mini-cell:last-child{text-align:right}
.pop-mini-l{
  font-size:.48rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:3px;line-height:1.15;
}
.pop-mini-v{
  font-size:.82rem;font-weight:800;color:var(--ink);letter-spacing:-.005em;
  font-variant-numeric:tabular-nums;
}

/* Nota de compromiso firme del modal · §5 del contrato */
.commit-note{
  margin-top:14px;padding:13px 14px;
  background:var(--amber-bg);
  border-left:2px solid var(--amber-brd);
  font-size:.82rem;color:var(--amber);line-height:1.5;
}
.commit-note strong{font-weight:900;color:var(--amber)}

/* Sub del modal · sobrescribe .modal-sub de MM (0.74rem) para dar 1 pt más */
.modal .modal-sub{font-size:.82rem;line-height:1.5;color:var(--ink3);margin-bottom:18px}

/* ─── Órdenes: KPIs verticales, patrón .kpis + hero credencial ─── */
.ord-hero{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1.5px solid var(--brd2);border-radius:14px;background:var(--surf);
  padding:14px 8px;margin-bottom:14px;
}
.ord-hero-cell{text-align:center;padding:0 6px;border-right:1px solid var(--brd)}
.ord-hero-cell:last-child{border-right:none}
.ord-hero-v{
  font-size:1.14rem;font-weight:900;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1;
}
.ord-hero-v.green{color:var(--green)}
.ord-hero-v.red{color:var(--red)}
.ord-hero-l{
  font-size:.52rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);margin-top:5px;line-height:1.2;
}
.ord-empty{
  text-align:center;padding:32px 20px;color:var(--ink3);
  font-size:.82rem;line-height:1.55;
}
.ord-empty strong{color:var(--ink2);font-weight:800;display:block;margin-bottom:4px}

/* Botón de salir en el appbar (log-out) — patrón MM discreto */
.appbar-exit{
  flex-shrink:0;background:none;border:none;
  color:var(--ink3);cursor:pointer;
  padding:8px;margin:-4px -6px -4px 4px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;transition:background var(--t-fast), color var(--t-fast);
  font-family:inherit;
}
.appbar-exit:active,.appbar-exit:hover{background:var(--surf2);color:var(--ink2)}
.appbar-exit svg{
  width:20px;height:20px;stroke:currentColor;stroke-width:1.8;
  fill:none;stroke-linecap:round;stroke-linejoin:round;display:block;
}

/* ═══════════════════════════════════════════════════════════════
   Alta de postura · borrador privado + situar + confirmar
   §2 y §5 del contrato v3. El borrador NO existe para el mercado
   hasta que el usuario confirma en el modal de comparación.
   ═══════════════════════════════════════════════════════════════ */

/* Overlay full-screen del borrador (aparece si ?entrada=X en la URL) */
.borrador-ovl{
  position:fixed;inset:0;z-index:180;
  background:var(--surf);
  display:none;flex-direction:column;
  overflow:hidden;
  padding-top:env(safe-area-inset-top,0px);
}
.borrador-ovl.on{display:flex}

.borrador-hdr{
  padding:16px 20px 14px;
  border-bottom:1px solid var(--brd);
  background:var(--surf);
  position:relative;
}
.borrador-hdr::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--brd2);
}
.borrador-ovl.colocar .borrador-hdr::before{background:var(--green)}
.borrador-ovl.captar .borrador-hdr::before{background:var(--red)}

.borrador-ey{
  font-size:.58rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink3);
}
.borrador-ovl.colocar .borrador-ey{color:var(--green)}
.borrador-ovl.captar .borrador-ey{color:var(--red)}

.borrador-title{
  font-size:1.32rem;font-weight:900;letter-spacing:-.028em;line-height:1.15;
  color:var(--ink);margin-top:5px;
}
.borrador-sub{
  font-size:.86rem;color:var(--ink3);line-height:1.5;margin-top:7px;
}
.borrador-sub strong{color:var(--ink2);font-weight:800}

.borrador-body{
  flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:18px 20px 12px;
}
.borrador-fld{margin-bottom:22px}
.borrador-fld:last-child{margin-bottom:0}

.borrador-lbl{
  font-size:.58rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);margin-bottom:10px;display:block;
}

.borrador-hint{
  font-size:.78rem;color:var(--ink3);margin-top:8px;line-height:1.5;
}

/* Segmentado para plazo y disponibilidad (patrón .seg de MM) */
.brd-seg{
  display:grid;grid-template-columns:repeat(3,1fr);
  border:1.5px solid var(--brd2);border-radius:10px;overflow:hidden;
}
.brd-seg.cols5{grid-template-columns:repeat(5,1fr)}
.brd-seg button{
  background:var(--surf);border:none;font-family:var(--f);
  font-size:.72rem;font-weight:800;letter-spacing:.02em;
  padding:12px 4px;color:var(--ink3);cursor:pointer;
  border-right:1px solid var(--brd2);
  transition:background .1s, color .1s;
}
.brd-seg button:last-child{border-right:none}
.brd-seg button.on{background:var(--ink);color:var(--surf)}
.brd-seg button:active{background:var(--surf2)}
.brd-seg button.on:active{background:var(--ink)}

/* Footer con el CTA principal */
.borrador-foot{
  padding:16px 20px calc(env(safe-area-inset-bottom,12px) + 16px);
  background:var(--surf);border-top:1px solid var(--brd);
}
.borrador-foot .cli-exec{margin-top:0}

/* ─── Modal "Sitúa tu postura" · comparación real contra el libro ─── */
.pop.compare::before{background:var(--brd2)}
.pop.colocar.compare::before{background:var(--green)}
.pop.captar.compare::before{background:var(--red)}

.compare-card{
  background:var(--surf2);border-radius:12px;
  padding:14px 15px;margin-top:12px;
}
.compare-card-l{
  font-size:.5rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:6px;
}
.compare-card-v{
  font-size:1.15rem;font-weight:900;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.15;
}
.compare-card-v.green{color:var(--green)}
.compare-card-v.red{color:var(--red)}
.compare-card-s{
  font-size:.78rem;color:var(--ink3);margin-top:6px;line-height:1.5;
}
.compare-card-s strong{color:var(--ink2);font-weight:800}

/* Grid de dos indicadores lado a lado en el modal de comparación */
.compare-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px;
}
.compare-grid .compare-card{margin-top:0}
.compare-grid .compare-card-v{font-size:1.08rem}

/* Acciones apiladas (confirmar rojo + editar ghost) */
.pop-actions{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.pop-actions .cli-exec{margin-top:0}
.pop-actions .btn-editar{
  background:var(--surf2);color:var(--ink2);border:1.5px solid var(--brd2);
  padding:14px;font-family:var(--f);font-size:.78rem;font-weight:800;
  letter-spacing:.03em;text-transform:uppercase;cursor:pointer;
  border-radius:12px;
}
.pop-actions .btn-editar:active{background:var(--surf3)}
.pop-actions .btn-editar.mia-cancelar{
  color:var(--red);border-color:var(--red-brd);background:var(--red-bg);
}
.pop-actions .btn-editar.mia-cancelar:active{background:rgba(208,2,27,.14)}

/* Aviso previo a confirmar */
.pop-priv{
  margin-top:12px;padding:10px 12px;
  background:var(--blue-bg);border-left:2px solid var(--blue-brd);
  font-size:.74rem;color:var(--blue);line-height:1.45;
}
.pop-priv strong{font-weight:900;color:var(--blue)}

/* Mi postura publicada — resalta la fila con marca de color del lado
   Con pulso momentáneo al momento de publicar para llamar la atención. */
.book-row.mia{
  background:var(--surf2);
  border-left-width:4px;
  position:relative;
}
.book-row.mia.oferta{border-left-color:var(--green)}
.book-row.mia.demanda{border-left-color:var(--red)}
.book-row.mia .book-monto,.book-row.mia .book-tasa{color:var(--ink)}
.book-row.mia.pulse{animation:mia-pulse 1.8s var(--ease) 1}
@keyframes mia-pulse{
  0%   {box-shadow:inset 0 0 0 0 rgba(9,9,15,0)}
  20%  {box-shadow:inset 0 0 0 3px var(--brd3)}
  100% {box-shadow:inset 0 0 0 0 rgba(9,9,15,0)}
}
.b-chip.mia-chip.oferta{
  color:var(--green);background:var(--green-bg);border-color:var(--green-brd);
}
.b-chip.mia-chip.demanda{
  color:var(--red);background:var(--red-bg);border-color:var(--red-brd);
}

/* ─── Modal "sitúa tu postura" · botón contextual + aviso premium ───
   El botón "confirmar y publicar" toma el color del lado (verde para
   colocar, rojo para captar) y le pone un glow acorde. */
.cli-exec.side-colocar{
  background:var(--green);
  box-shadow:0 4px 18px rgba(22,163,74,.28);
}
.cli-exec.side-colocar:active{
  background:#0f8a3d;
  box-shadow:0 2px 8px rgba(22,163,74,.22);
}
.cli-exec.side-captar{
  background:var(--red);
  box-shadow:0 4px 18px rgba(208,2,27,.28);
}
.cli-exec.side-captar:active{
  background:var(--red-h);
  box-shadow:0 2px 8px rgba(208,2,27,.22);
}

/* Aviso "Borrador privado" en el modal de situar — más premium
   con un pequeño ícono candado a la izquierda y peso visual mejor. */
.pop-priv{
  margin-top:14px;padding:12px 14px 12px 40px;
  background:var(--surf2);border:1px solid var(--brd2);border-radius:12px;
  font-size:.8rem;color:var(--ink2);line-height:1.5;
  position:relative;
}
.pop-priv strong{font-weight:900;color:var(--ink)}
.pop-priv::before{
  content:"";position:absolute;left:14px;top:14px;
  width:18px;height:18px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6b82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* ─── Perfil: credencial estilo cli-row + rejilla de KPIs de historial ─── */
.pf-cred{
  display:flex;align-items:center;gap:14px;
  padding:16px 15px;
  background:var(--surf);border:1.5px solid var(--brd2);border-radius:14px;
  margin-bottom:14px;
}
.pf-cred-av{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--red) 0%,#a3011a 100%);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:900;letter-spacing:-.02em;flex-shrink:0;
}
.pf-cred-b{flex:1;min-width:0}
.pf-cred-name{font-size:.98rem;font-weight:900;color:var(--ink);letter-spacing:-.01em}
.pf-cred-id{
  font-size:.62rem;color:var(--ink3);margin-top:3px;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.pf-cred-tag{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.52rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--green);background:var(--green-bg);border:1px solid var(--green-brd);
  padding:3px 8px;border-radius:9999px;margin-top:6px;
}

.pf-kpis{
  display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px;
}
.pf-kpi{
  background:var(--surf);border:1.5px solid var(--brd2);border-radius:12px;
  padding:13px 14px;
}
.pf-kpi-l{
  font-size:.52rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);
}
.pf-kpi-v{
  font-size:1.16rem;font-weight:900;color:var(--ink);letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;margin-top:5px;
}
.pf-kpi-s{
  font-size:.62rem;color:var(--ink3);margin-top:3px;
}