/* Tarjetas de crédito */
.cc-wrap{display:grid;gap:18px}
.cc-summary small{color:var(--muted);font-size:13px;display:block}
.cc-sumtop{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.cc-sumtop > div:first-child{flex:1;min-width:0}
.cc-sumtop b{font-size:clamp(26px,6vw,32px);font-weight:800;letter-spacing:-.02em;white-space:nowrap}
.cc-sumtop .r{text-align:right}
.cc-sumtop .r b{font-size:20px}
.cc-summary .accent{color:var(--accent)}
.cc-sumfoot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px;color:var(--muted);font-size:12px}
.cc-warn{display:flex;gap:6px;align-items:flex-start;color:var(--warning);font-size:12px;margin:12px 0 0}
.cc-warn svg{width:16px;height:16px;flex:none}
.cc-bar{height:10px;border-radius:5px;background:rgba(255,255,255,.1);overflow:hidden}
.cc-bar i{display:block;height:100%;border-radius:5px}
.cc-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))}
.cc-link{display:block;color:inherit;text-decoration:none;border-radius:24px;transition:transform .15s}
.cc-link:hover{transform:translateY(-2px)}
.cc-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Plástico */
.cc{position:relative;display:grid;gap:14px;padding:20px;border-radius:24px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,var(--cc),color-mix(in srgb,var(--cc) 55%,transparent) 55%,rgba(0,0,0,.9));
  border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px -14px color-mix(in srgb,var(--cc) 60%,transparent)}
.cc-top{display:flex;align-items:center;gap:10px;min-width:0}
.cc-mark{width:30px;height:30px;border-radius:9px;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none}
.cc-bank{flex:1;min-width:0;font-size:12px;font-weight:900;letter-spacing:.1em;color:rgba(255,255,255,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-top svg{width:22px;height:22px;color:rgba(255,255,255,.7);flex:none}
.cc-name{min-width:0}
.cc-name b{display:block;font-size:20px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-name small{display:block;font-size:12px;color:rgba(255,255,255,.75)}
.cc-nums{display:flex;align-items:flex-end;gap:12px}
.cc-nums > div:first-child{flex:1;min-width:0}
.cc-nums small{display:block;font-size:11px;color:rgba(255,255,255,.7)}
.cc-nums b{display:block;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-nums b.cc-debt{font-size:22px;font-weight:700}
.cc-nums .r{text-align:right;min-width:0}
.cc-foot{display:flex;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.8);min-width:0}
.cc-foot .spacer{flex:1}
.cc-foot > span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cc-four{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;white-space:nowrap}
.cc-net{font-size:10px;font-weight:900;letter-spacing:.06em;padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.15);white-space:nowrap}
.cc-thumb{width:50px;height:32px;border-radius:6px;flex:none;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(135deg,var(--cc),color-mix(in srgb,var(--cc) 50%,transparent))}

/* Detalle */
.cc-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-detail{display:grid;gap:18px;align-items:start}
.cc-col{min-width:0}
.cc-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0 18px}
.cc-val{margin-left:auto;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cc-del{width:36px;height:36px;border-radius:11px;flex:none;color:var(--muted)}
.cc-del svg{width:18px;height:18px}
@media (min-width:960px){ .cc-detail{grid-template-columns:minmax(0,420px) minmax(0,1fr)} }

/* Formularios */
.cc-preview{margin:4px 0 16px}
.cc-payall{display:block;width:100%;text-align:left;padding:12px 16px;border-top:1px solid var(--stroke);color:var(--accent);font-weight:600}
.cc-payall:disabled{color:var(--muted)}
.cc-foot-note{margin:-6px 6px 16px;font-size:12px}