/* =====================================================================
   LA CUENTA DE PAGO · la tarjeta de la ficha y el aviso para Finanzas
   (E5, 9-nov-2026 · maqueta `docs/aud/mockups/cuenta-de-pago/clabe.css`)

   Sólo tokens de `orvik-tokens.css` (08 · Sistema visual v2). Lo que la
   maqueta traía fuera de la escala, y a qué se llevó:
     · 19 px de la CLABE y de la inicial     → 17 (`--t-tarjeta`)
     · 14 px de las etiquetas y la hora      → 15 (`--t-cuerpo-f`)
     · 12 px de la nota (`--t-nota`)         → 13 (`--t-sec`)
     · columnas de 200 y 150 px              → 200 y 144 (múltiplos de la
       escala de espacio: 5 × 40 y 3 × 48)
     · sombra del aviso                      → `--sombra-2`
   ===================================================================== */
.cp { display: flex; flex-direction: column; gap: var(--e-5); margin: var(--e-4) 0; }
.cp .cp-card {
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--linea); border-radius: var(--r-tarjeta);
  padding: var(--e-4) var(--e-5);
}
.cp h2 { font: var(--t-tarjeta); color: var(--texto); margin: 0 0 var(--e-2); }
/* La rayita de acento que `panel.css` le pone a todo h2 no está en la maqueta. */
.cp h2::before { content: none; }
.cp .cp-s { color: var(--texto-2); font: var(--t-sec); margin: 0 0 var(--e-2); }
.cp .cp-n { color: var(--texto-3); font: var(--t-sec); }
/* «código PRUEBA-C2» no se parte en dos renglones (a 390 se cortaba en el
   guion): si no cabe, baja completo al renglón siguiente. Sin `.cp`
   delante: también lo usa el paso Económicos de «Completar lo que falta». */
.cp-cod { white-space: nowrap; }
.cp .cp-dato {
  display: grid; grid-template-columns: calc(var(--e-10) * 5) 1fr; gap: var(--e-3);
  padding: var(--e-3) 0; border-top: 1px solid var(--linea); align-items: start;
  font: var(--t-cuerpo); color: var(--texto);
}
.cp .cp-alerta + .cp-dato { margin-top: var(--e-3); }
.cp h2 + .cp-dato, .cp .cp-alerta + .cp-dato { border-top: 0; }
.cp .cp-k { color: var(--texto-2); font: var(--t-cuerpo-f); }
.cp .cp-clabe {
  font: var(--t-tarjeta); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: var(--texto); display: block;
}
.cp .cp-duena { display: flex; gap: var(--e-2); align-items: center; flex-wrap: wrap; margin-top: var(--e-2); }
.cp .cp-ins, .cp-fcard .cp-ins {
  font: var(--t-sec); font-weight: 600; padding: var(--e-1) var(--e-2);
  border-radius: var(--r-chico); display: inline-block;
}
.cp .ok  { background: var(--exito-suave); color: var(--exito-texto); }
.cp .avi { background: var(--aviso-suave); color: var(--aviso-texto); }
.cp .neu { background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--linea); }
.cp .cp-alerta {
  border: 1px solid var(--peligro-borde); background: var(--peligro-suave); color: var(--peligro-texto);
  border-radius: var(--r-control); padding: var(--e-3) var(--e-4); font: var(--t-cuerpo);
}
.cp .cp-alerta b { display: block; margin-bottom: var(--e-1); font-weight: 600; }
.cp .cp-bar { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-3); }
.cp .cp-btn, .cp-fcard .cp-btn {
  min-height: var(--toque); border-radius: var(--r-control); font: var(--t-cuerpo-f);
  display: inline-grid; place-items: center; padding: 0 var(--e-5); cursor: pointer;
  border: 1px solid var(--linea-fuerte); background: var(--superficie); color: var(--texto);
}
.cp .cp-btn.prim, .cp-fcard .cp-btn.prim { background: var(--marca-principal); color: var(--marca-sobre-principal); border: 0; }
.cp .cp-h {
  display: grid; grid-template-columns: calc(var(--e-12) * 3) 1fr auto; gap: var(--e-3);
  padding: var(--e-3) 0; border-top: 1px solid var(--linea); align-items: start;
  font: var(--t-cuerpo); color: var(--texto);
}
.cp .cp-s + .cp-h { border-top: 0; }
.cp .cp-t { font: var(--t-cuerpo-f); font-variant-numeric: tabular-nums; color: var(--texto); }
.cp-oculto { position: fixed; top: calc(var(--e-12) * -20); opacity: 0; }

@media (max-width: 700px) {
  .cp .cp-dato { grid-template-columns: 1fr; gap: var(--e-1); }
  .cp .cp-h { grid-template-columns: 1fr; }
  .cp .cp-h .cp-ins { justify-self: start; }
  .cp .cp-bar { flex-direction: column; }
}

/* ── EL AVISO PARA FINANZAS · flota, de vidrio ── */
.cp-fcard {
  position: fixed; right: var(--e-6); top: calc(var(--e-12) + var(--e-6) + var(--e-3)); z-index: var(--z-aviso);
  width: calc(var(--e-10) * 10); max-width: calc(100vw - var(--e-8));
  background: var(--vidrio-fondo); backdrop-filter: var(--vidrio-filtro); -webkit-backdrop-filter: var(--vidrio-filtro);
  border: 1px solid var(--vidrio-borde); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-2);
  padding: var(--e-4) var(--e-5); display: flex; flex-direction: column; gap: var(--e-3);
  color: var(--texto); font: var(--t-cuerpo);
}
.cp-fcard .cp-ft { font: var(--t-sec); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--aviso-texto); }
.cp-fcard .cp-ftt { font: var(--t-tarjeta); color: var(--texto); }
.cp-fcard .cp-s { color: var(--texto-2); font: var(--t-sec); }
.cp-fcard .cp-ffila { display: grid; grid-template-columns: calc(var(--e-6) * 3) 1fr; gap: var(--e-2); font: var(--t-sec); color: var(--texto); }
.cp-fcard .cp-ffila span:first-child { color: var(--texto-3); }
.cp-fcard .cp-fbb { display: flex; gap: var(--e-2); }
.cp-fcard .cp-fbb > * { flex: 1; padding: 0 var(--e-3); }
@media (max-width: 700px) {
  .cp-fcard { left: var(--e-4); right: var(--e-4); top: auto; bottom: calc(var(--e-12) * 2 + var(--e-2)); width: auto; }
}