/* components.css — PULSE
   TODAS las clases de componente del mockup, COPIADAS VERBATIM de
   design/dashboard-mobile.html. Regla de extraccion: docs/design-app.md §2.
   Fuera quedan (BORRADO, chrome del contact sheet): body, .page-head, .frames,
   .frame-col, .frame-label, .phone, .screen, .statusbar, .island, .sb-icons,
   .home-indicator, .section-break, .footnote.
   Aqui vive la TRADUCCION 3/3 (.dim/.sheet: absolute sobre .screen -> fixed
   sobre el viewport); las otras dos estan en tokens.css y base.css.
   PROHIBIDO inventar clases: el mockup es el golden master. check-fidelidad.mjs
   falla si una view usa una clase que el mockup no define. */

/* ============ APP HEADER ============ */
.app-head { display:flex; justify-content:space-between; align-items:center; padding:14px 0 18px; }
.store { display:flex; align-items:center; gap:12px; }
.store-logo { width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
    display:flex; align-items:center; justify-content:center; box-shadow:0 6px 16px rgba(20,197,126,.35); }
.store-logo svg { display:block; }
.store-name { font-size:17px; font-weight:800; letter-spacing:-.01em; color:var(--tx); }
.store-sub { font-size:12px; color:var(--tx2); display:flex; align-items:center; gap:5px; margin-top:2px; }
.live-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.range-btn { display:flex; align-items:center; gap:7px; background:var(--chip); border:1px solid var(--line);
    color:var(--tx); font-size:13px; font-weight:600; padding:9px 13px; border-radius:999px; }
.range-btn svg { display:block; }
/* ============ HERO CARD ============ */
.hero { border-radius:24px; padding:22px 22px 18px; background:var(--hero-grad); color:#fff;
    position:relative; overflow:hidden; box-shadow:var(--shadow); }
.hero::after { content:""; position:absolute; right:-70px; top:-70px; width:230px; height:230px; border-radius:50%;
    background:radial-gradient(circle,rgba(61,220,151,.25) 0%,transparent 70%); }
.hero-label { font-size:13px; font-weight:600; color:rgba(255,255,255,.65); display:flex; align-items:center; gap:7px; }
.hero-value { font-size:40px; font-weight:800; letter-spacing:-.03em; margin-top:8px; font-variant-numeric:tabular-nums; }
.hero-value small { font-size:20px; font-weight:700; color:rgba(255,255,255,.55); }
.hero-foot { display:flex; align-items:center; justify-content:space-between; margin-top:12px; position:relative; z-index:1; }
.delta { display:inline-flex; align-items:center; gap:4px; font-size:13px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap; flex-shrink:0; }
.delta.up { color:#5CF0B4; background:rgba(61,220,151,.16); }
.delta.down { color:#FF9B9B; background:rgba(255,107,107,.16); }
.delta-note { font-size:12px; color:rgba(255,255,255,.5); }
.spark { position:absolute; right:18px; bottom:44px; opacity:.9; }
/* ============ KPI GRID ============ */
.kpis { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.kpi { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:16px 16px 14px; box-shadow:var(--shadow); }
.kpi-top { display:flex; align-items:center; justify-content:space-between; }
.kpi-label { font-size:12.5px; font-weight:600; color:var(--tx2); }
.kpi-ico { width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); }
.kpi-ico.spend { background:rgba(255,176,32,.14); }
.kpi-value { font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--tx); margin-top:10px; font-variant-numeric:tabular-nums; }
.kpi-delta { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; margin-top:7px; padding:3px 8px; border-radius:999px; }
.kpi-delta.up { color:var(--accent); background:var(--accent-soft); }
.kpi-delta.down { color:var(--bad); background:var(--bad-soft); }
.kpi-delta span { color:var(--tx3); font-weight:500; }
/* ============ CHART CARD ============ */
.card { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:18px 18px 14px; margin-top:14px; box-shadow:var(--shadow); }
.card-head { display:flex; justify-content:space-between; align-items:baseline; }
.card-title { font-size:15px; font-weight:700; color:var(--tx); }
.card-hint { font-size:12px; color:var(--tx3); font-weight:500; }
.chart { display:flex; align-items:flex-end; gap:3.5px; height:132px; margin-top:34px; position:relative; }
.chart .grid-line { position:absolute; left:0; right:0; height:1px; background:var(--line); }
.bar { flex:1; border-radius:4px 4px 2px 2px; background:var(--bar-dim); min-width:0; position:relative; }
.bar.hi { background:var(--bar-grad); }
.bar.peak { background:var(--bar-grad); box-shadow:0 0 14px rgba(61,220,151,.5); }
.tip { position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--tx); color:var(--bg);
    font-size:11px; font-weight:800; padding:5px 9px; border-radius:8px; white-space:nowrap; }
.tip::after { content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--tx); }
.x-axis { display:flex; justify-content:space-between; margin-top:8px; padding:0 2px; }
.x-axis span { font-size:10.5px; color:var(--tx3); font-weight:600; }
/* ============ ACCORDION / DETALLES ============ */
.acc-head { display:flex; align-items:center; justify-content:space-between; padding:2px 2px 0; }
.acc-title { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:700; color:var(--tx); }
.count-badge { font-size:11.5px; font-weight:800; color:var(--accent); background:var(--accent-soft); padding:3px 9px; border-radius:999px; }
.chev { transition:transform .2s; color:var(--tx3); }
.chev.openned { transform:rotate(180deg); }
.sale { display:flex; align-items:center; gap:10px; padding:13px 0; border-top:1px solid var(--line); }
.sale:first-of-type { border-top:none; margin-top:6px; }
.avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:800; color:#fff; flex-shrink:0; }
.av1{background:linear-gradient(135deg,#7C5CFF,#5A3DF0)}
.av2{background:linear-gradient(135deg,#FF8A5C,#F0563D)}
.av3{background:linear-gradient(135deg,#3DAEFF,#2F6BFF)}
.av4{background:linear-gradient(135deg,#FF5CA8,#E03D8E)}
.av5{background:linear-gradient(135deg,#3DDC97,#0FA968)}
.sale-info { flex:1; min-width:0; }
.sale-name { font-size:13.5px; font-weight:700; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sale-phone { font-size:11.5px; color:var(--tx2); margin-top:3px; display:block; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sale-phone svg { vertical-align:-1.5px; margin-right:2px; }
.sale-right { text-align:right; flex-shrink:0; }
.sale-amount { font-size:14.5px; font-weight:800; color:var(--tx); font-variant-numeric:tabular-nums; }
.sale-receipt { font-size:11px; font-weight:700; color:var(--link); margin-top:4px; display:inline-flex; align-items:center; gap:4px; text-decoration:none; }
.see-all { display:block; text-align:center; font-size:13.5px; font-weight:700; color:var(--link); padding:13px 0 6px; border-top:1px solid var(--line); margin-top:2px; text-decoration:none; }
.acc-closed-note { font-size:12.5px; color:var(--tx3); padding:4px 2px 2px; }
/* ============ TAB BAR ============ */
.tabbar { display:flex; justify-content:space-around; align-items:center; margin-top:16px; padding:12px 10px 2px; border-top:1px solid var(--line); }
.tab { display:flex; flex-direction:column; align-items:center; gap:4px; font-size:10.5px; font-weight:600; color:var(--tx3); }
.tab.active { color:var(--accent); }
/* ============ BOTTOM SHEET (frame 3) ============ */
.dim { position:fixed; inset:0; background:rgba(4,6,10,.62); backdrop-filter:blur(3px); z-index:20; border-radius:44px; }
.sheet { position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--card2); border-radius:28px 28px 44px 44px;
    padding:10px 20px 26px; box-shadow:0 -20px 60px rgba(0,0,0,.5); }
.sheet-grab { width:40px; height:5px; border-radius:3px; background:var(--tx3); opacity:.4; margin:6px auto 14px; }
.sheet-title { font-size:17px; font-weight:800; color:var(--tx); padding:0 4px 12px; }
.opt { display:flex; align-items:center; justify-content:space-between; padding:15px 14px; border-radius:16px; font-size:15px; font-weight:600; color:var(--tx); }
.opt .sub { display:block; font-size:12px; color:var(--tx3); font-weight:500; margin-top:2px; }
.opt.sel { background:var(--accent-soft); color:var(--tx); border:1px solid rgba(61,220,151,.35); }
.opt.custom { border-top:1px solid var(--line); border-radius:0; margin-top:6px; padding-top:17px; color:var(--link); }
.radio { width:22px; height:22px; border-radius:50%; border:2px solid var(--tx3); opacity:.5; }
.radio.on { border:none; opacity:1; background:var(--accent); display:flex; align-items:center; justify-content:center; }
/* ============ CHART LEGEND ============ */
.legend { display:flex; gap:16px; margin-top:11px; padding-top:10px; border-top:1px solid var(--line); }
.lg { font-size:11px; color:var(--tx3); font-weight:600; display:flex; align-items:center; gap:6px; }
.dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.dot.g { background:var(--bar-grad); }
.dot.d { background:var(--bar-dim); }
/* ============ VISTA VENTAS ============ */
.summary-strip { display:flex; justify-content:space-around; background:var(--card); border:1px solid var(--line);
    border-radius:16px; padding:13px 10px; margin-top:2px; box-shadow:var(--shadow); }
.ss { text-align:center; }
.ss b { display:block; font-size:16.5px; font-weight:800; color:var(--tx); font-variant-numeric:tabular-nums; }
.ss span { font-size:11px; color:var(--tx3); font-weight:600; }
.search { display:flex; align-items:center; gap:9px; background:var(--card); border:1px solid var(--line);
    border-radius:14px; padding:12px 14px; margin-top:12px; color:var(--tx3); font-size:14px; font-weight:500; }
.chips { display:flex; gap:8px; margin-top:12px; }
.chips.canal { margin:0 0 14px; overflow:hidden;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent); }
.chip { font-size:12px; font-weight:700; padding:8px 12px; border-radius:999px; background:var(--chip); color:var(--tx2); border:1px solid var(--line); white-space:nowrap; }
.chip.on { background:var(--accent-soft); color:var(--accent); border-color:rgba(61,220,151,.4); }
.day-head { display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; font-weight:800;
    color:var(--tx3); text-transform:uppercase; letter-spacing:.07em; margin:18px 4px 0; }
.day-head b { color:var(--tx2); font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none; font-size:12px; }
.sale-receipt.warn { color:#FFB020; }
/* ============ VISTA PAUTA ============ */
.delta.warn { color:#FFD37E; background:rgba(255,176,32,.18); }
.kpis.three { grid-template-columns:repeat(3,1fr); }
.kpis.three .kpi { padding:13px 12px 12px; }
.kpis.three .kpi-value { font-size:18px; margin-top:7px; }
.bar.amber { background:linear-gradient(180deg,#FFB020 0%,#D97E06 100%); }
.camp { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:16px; margin-top:12px; box-shadow:var(--shadow); }
.camp-top { display:flex; align-items:center; gap:11px; }
.camp-logo { width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:var(--accent-soft); }
.camp-logo.rt { background:rgba(125,169,255,.13); }
.camp-logo.vid { background:rgba(255,176,32,.13); }
.camp-info { flex:1; min-width:0; }
.camp-name { font-size:14.5px; font-weight:700; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.camp-sub { font-size:11.5px; color:var(--tx3); margin-top:2px; }
.badge { font-size:10px; font-weight:800; letter-spacing:.06em; padding:4px 9px; border-radius:999px; flex-shrink:0; }
.badge.on { color:var(--accent); background:var(--accent-soft); }
.badge.warn { color:#FFB020; background:rgba(255,176,32,.13); }
.camp-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); }
.cs b { display:block; font-size:13.5px; font-weight:800; color:var(--tx); font-variant-numeric:tabular-nums; }
.cs b.good { color:var(--accent); }
.cs b.bad { color:#FFB020; }
.cs span { font-size:10px; color:var(--tx3); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.camp-note { margin-top:12px; font-size:11.5px; color:#FFD37E; background:rgba(255,176,32,.09); padding:9px 12px; border-radius:10px; font-weight:600; line-height:1.45; }
/* ============ VISTA AJUSTES ============ */
.set-label { font-size:11px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--tx3); margin:20px 6px 8px; }
.set-group { background:var(--card); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow); }
.set-row { display:flex; align-items:center; gap:12px; padding:14px 16px; border-top:1px solid var(--line); font-size:14.5px; font-weight:600; color:var(--tx); }
.set-row:first-child { border-top:none; }
.set-ico { width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--chip); color:var(--tx2); flex-shrink:0; }
.set-val { margin-left:auto; font-size:13px; color:var(--tx3); font-weight:600; display:flex; align-items:center; gap:7px; white-space:nowrap; }
.set-val .go { color:var(--link); font-weight:700; }
.conn-dot { width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.toggle { margin-left:auto; width:46px; height:28px; border-radius:999px; background:var(--accent); position:relative; flex-shrink:0; }
.toggle::after { content:""; position:absolute; top:3px; right:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,.3); }
.seg { margin-left:auto; display:flex; background:var(--chip); border-radius:10px; padding:3px; gap:2px; }
.seg span { font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:8px; color:var(--tx3); }
.seg .on { background:var(--card2); color:var(--tx); box-shadow:0 1px 4px rgba(0,0,0,.35); }
.logout { color:#FF6B6B !important; justify-content:center; font-weight:700 !important; }
.version { text-align:center; font-size:11.5px; color:var(--tx3); margin-top:16px; }
/* ============ REGISTRAR VENTA ============ */
.fab { position:absolute; right:22px; bottom:114px; width:56px; height:56px; border-radius:19px;
    background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
    display:flex; align-items:center; justify-content:center; z-index:15;
    box-shadow:0 12px 28px rgba(61,220,151,.42), 0 3px 8px rgba(0,0,0,.3); }
.form-head { display:flex; align-items:center; justify-content:space-between; padding:14px 0 6px; }
.icon-btn { width:36px; height:36px; border-radius:12px; background:var(--chip); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; color:var(--tx2); }
.form-title { font-size:17px; font-weight:800; color:var(--tx); }
.f-label { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tx3); margin:20px 2px 8px; }
.f-label small { text-transform:none; letter-spacing:0; font-weight:600; color:var(--tx3); opacity:.8; }
.money-input { display:flex; align-items:baseline; gap:6px; background:var(--card); border:1.5px solid rgba(61,220,151,.45);
    border-radius:18px; padding:16px 20px; box-shadow:var(--shadow), 0 0 0 4px rgba(61,220,151,.07); }
.money-input b { font-size:34px; font-weight:800; letter-spacing:-.02em; color:var(--tx); font-variant-numeric:tabular-nums; }
.money-input .cur { color:var(--tx3); font-weight:700; font-size:15px; }
.caret { width:2.5px; height:30px; background:var(--accent); border-radius:2px; align-self:center; }
.seg-full { display:flex; background:var(--chip); border-radius:14px; padding:4px; gap:4px; }
.seg-full span { flex:1; text-align:center; font-size:12.5px; font-weight:700; padding:10px 0; border-radius:11px;
    color:var(--tx3); display:flex; align-items:center; justify-content:center; gap:6px; }
.seg-full .on { background:var(--card2); color:var(--tx); box-shadow:0 2px 8px rgba(0,0,0,.35); }
.f-input { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:13px 15px;
    font-size:14.5px; font-weight:600; color:var(--tx); margin-top:8px; display:flex; align-items:center; gap:10px; }
.f-input .ph { color:var(--tx3); font-weight:500; }
.f-input .edit { margin-left:auto; color:var(--link); font-size:12.5px; font-weight:700; }
.pay-chips { display:flex; gap:8px; }
.pay-chips .chip { flex:1; display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 0; border-radius:12px; }
.upload { border:1.5px dashed rgba(140,150,175,.35); border-radius:16px; padding:15px 16px; display:flex; align-items:center; gap:13px;
    color:var(--tx2); font-size:13.5px; font-weight:700; background:var(--card); }
.upload small { display:block; color:var(--tx3); font-weight:500; font-size:11.5px; margin-top:3px; }
.upload-ico { width:42px; height:42px; border-radius:13px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.cta { margin-top:24px; background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%); color:#06251A;
    font-size:15.5px; font-weight:800; text-align:center; padding:16px; border-radius:16px;
    box-shadow:0 14px 30px rgba(61,220,151,.35); }
.cta-note { text-align:center; font-size:11.5px; color:var(--tx3); margin-top:11px; line-height:1.5; }
/* ============ CANALES ============ */
.split-row { display:flex; align-items:center; gap:11px; padding:10px 0 2px; }
.split-ico { width:30px; height:30px; border-radius:10px; background:var(--chip); display:flex; align-items:center; justify-content:center; color:var(--tx2); flex-shrink:0; }
.split-info { flex:1; min-width:0; }
.split-top { display:flex; justify-content:space-between; font-size:12.5px; font-weight:700; color:var(--tx); }
.split-top span:last-child { color:var(--tx2); font-weight:600; font-variant-numeric:tabular-nums; }
.split-bar { height:6px; border-radius:4px; background:var(--chip); margin-top:7px; overflow:hidden; }
.split-fill { height:100%; border-radius:4px; background:var(--bar-grad); }
.split-fill.b2 { background:linear-gradient(90deg,#7DA9FF,#4A7DFF); }
.split-fill.b3 { background:linear-gradient(90deg,#FFB020,#D97E06); }
/* ============ VISTA RESPUESTA ============ */
.hero.resp { background:linear-gradient(135deg,#141B30 0%,#182642 100%); }
.hero.resp::after { background:radial-gradient(circle,rgba(125,169,255,.22) 0%,transparent 70%); }
.target-line { position:absolute; left:0; right:0; border-top:2px dashed rgba(255,176,32,.6); z-index:2; }
.target-tag { position:absolute; right:0; bottom:3px; font-size:9.5px; font-weight:800; color:#FFB020; letter-spacing:.03em; background:var(--card); padding:1px 5px; border-radius:5px; }
.dot.a { background:linear-gradient(135deg,#FFB020,#D97E06); }
.heat { display:grid; grid-template-columns:44px repeat(6,1fr); gap:4px; margin-top:16px; }
.heat .hd { font-size:9.5px; font-weight:800; color:var(--tx3); text-align:center; text-transform:uppercase; padding-bottom:2px; }
.heat .hl { font-size:9.5px; font-weight:700; color:var(--tx3); display:flex; align-items:center; white-space:nowrap; font-variant-numeric:tabular-nums; }
.hm { height:26px; border-radius:7px; }
.heat-legend { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:10.5px; color:var(--tx3); font-weight:600; }
.heat-scale { flex:1; height:8px; border-radius:4px; background:linear-gradient(90deg,#3DDC97 0%,#FFB020 55%,#E5484D 100%); opacity:.85; }
.wait { text-align:right; flex-shrink:0; }
.wait b { font-size:14px; font-weight:800; color:var(--bad); font-variant-numeric:tabular-nums; display:block; }
.wait small { font-size:10.5px; color:var(--tx3); font-weight:600; margin-top:3px; display:block; }
/* ============ LOGIN ============ */
.login-wrap { padding:40px 4px 0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.login-logo { width:76px; height:76px; border-radius:25px; background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%);
    display:flex; align-items:center; justify-content:center; box-shadow:0 18px 42px rgba(61,220,151,.35); }
.login-title { font-size:26px; font-weight:800; margin-top:18px; color:var(--tx); letter-spacing:-.02em; }
.login-sub { font-size:13.5px; color:var(--tx2); margin-top:7px; line-height:1.5; }
.otp { display:flex; gap:8px; margin-top:10px; justify-content:center; }
.otp span { width:44px; height:52px; border-radius:12px; background:var(--card); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:800; color:var(--tx); }
.otp span.focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.resend { font-size:12.5px; color:var(--tx3); font-weight:600; margin-top:14px; }
.resend b { color:var(--link); }
/* ============ MULTI-TIENDA ============ */
.tenant { display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:16px; margin-top:6px; }
.tenant.sel { background:var(--accent-soft); border:1px solid rgba(61,220,151,.35); }
.tenant-logo { width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:16px; color:#fff; flex-shrink:0; }
.tl-a { background:linear-gradient(135deg,#FFB020,#E8641B); }
.tl-b { background:linear-gradient(135deg,#FF5CA8,#B03DF0); }
.tenant-info { flex:1; min-width:0; text-align:left; }
.tenant-name { font-size:14.5px; font-weight:800; color:var(--tx); }
.tenant-sub { font-size:11.5px; color:var(--tx3); margin-top:2px; }
/* ============ DETALLE VENTA ============ */
.status-pill { font-size:10.5px; font-weight:800; padding:5px 11px; border-radius:999px; letter-spacing:.05em; white-space:nowrap; }
.status-pill.ok { color:var(--accent); background:var(--accent-soft); }
.status-pill.rev { color:#FFB020; background:rgba(255,176,32,.13); }
.kv { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:11px 2px; border-top:1px solid var(--line); font-size:13px; }
.kv:first-child { border-top:none; }
.kv .k { color:var(--tx3); font-weight:600; white-space:nowrap; }
.kv .v { color:var(--tx); font-weight:700; text-align:right; }
.btn { border-radius:14px; padding:14px; text-align:center; font-size:14px; font-weight:800; margin-top:10px; }
.btn.primary { background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%); color:#06251A; box-shadow:0 10px 24px rgba(61,220,151,.28); }
.btn.ghost { background:var(--chip); color:var(--tx); border:1px solid var(--line); }
.btn.danger { background:transparent; color:#FF6B6B; border:1px solid rgba(255,107,107,.3); }
.btn-row { display:flex; gap:10px; }
.btn-row .btn { flex:1; }
.verified-by { text-align:center; font-size:11.5px; color:var(--tx3); margin-top:12px; }
/* ============ VISOR COMPROBANTE ============ */
.receipt { background:#FFFFFF; color:#1A1D26; border-radius:16px; padding:18px; margin-top:14px; box-shadow:0 22px 55px rgba(0,0,0,.45); }
.r-bank { display:flex; align-items:center; gap:8px; font-weight:800; font-size:13px; color:#123B8C; }
.r-ok { font-size:10.5px; font-weight:800; color:#0B8A55; background:rgba(15,169,104,.1); padding:4px 9px; border-radius:999px; margin-left:auto; }
.r-amount { font-size:30px; font-weight:800; margin-top:12px; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.r-line { display:flex; justify-content:space-between; font-size:11.5px; margin-top:9px; color:#5C6474; }
.r-line b { color:#1A1D26; font-variant-numeric:tabular-nums; }
.ai-check { display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; margin-top:10px; padding:10px 13px; border-radius:11px; line-height:1.4; }
.ai-check.ok { color:var(--accent); background:var(--accent-soft); }
.ai-check.warn { color:#FFD37E; background:rgba(255,176,32,.12); }
.t-light .ai-check.warn { color:#8A5B00; }
/* ============ CALENDARIO ============ */
.cal { background:var(--card); border:1px solid var(--line); border-radius:20px; padding:16px; margin-top:14px; box-shadow:var(--shadow); }
.cal-head { display:flex; justify-content:space-between; align-items:center; font-size:14px; font-weight:800; color:var(--tx); padding:0 4px 10px; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); row-gap:3px; }
.cal-grid .dw { font-size:9.5px; font-weight:800; color:var(--tx3); text-align:center; padding:5px 0; text-transform:uppercase; }
.cal-grid .d { font-size:12.5px; font-weight:600; color:var(--tx2); text-align:center; padding:8px 0; }
.cal-grid .d.mut { opacity:.22; }
.cal-grid .d.in { background:var(--accent-soft); color:var(--tx); }
.cal-grid .d.cap-a { background:var(--accent); color:#06251A; font-weight:800; border-radius:10px 0 0 10px; }
.cal-grid .d.cap-b { background:var(--accent); color:#06251A; font-weight:800; border-radius:0 10px 10px 0; }
/* ============ ESTADOS ============ */
@keyframes shimmer { 0% { background-position:-300px 0; } 100% { background-position:300px 0; } }
.sk { border-radius:14px; background:linear-gradient(90deg, var(--card) 30%, var(--card2) 50%, var(--card) 70%);
    background-size:600px 100%; animation:shimmer 1.4s infinite linear; border:1px solid var(--line); }
.sk-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.banner { display:flex; gap:10px; align-items:flex-start; border-radius:14px; padding:12px 14px; font-size:12.5px; font-weight:600; line-height:1.5; margin:0 0 14px; }
.banner svg { flex-shrink:0; margin-top:1px; }
.banner.stale { background:rgba(255,176,32,.1); color:#FFD37E; border:1px solid rgba(255,176,32,.25); }
.banner.err { background:rgba(255,107,107,.1); color:#FF9B9B; border:1px solid rgba(255,107,107,.25); }
.t-light .banner.stale { color:#8A5B00; }
.t-light .banner.err { color:#B3261E; }
.banner b { font-weight:800; }
.banner .retry { margin-left:auto; font-weight:800; color:inherit; text-decoration:underline; white-space:nowrap; }
.empty { text-align:center; padding:30px 18px 26px; }
.empty .e-ico { width:64px; height:64px; border-radius:22px; background:var(--chip); display:flex; align-items:center; justify-content:center; margin:0 auto; }
.empty h4 { font-size:15.5px; font-weight:800; color:var(--tx); margin-top:14px; }
.empty p { font-size:12.5px; color:var(--tx3); margin-top:6px; line-height:1.55; }
.empty .btn { display:inline-block; padding:11px 22px; margin-top:14px; }