/* AgenBella — estilos del dashboard */
:root {
  --acc: #be185d;
  --bg: #fff7fa;
  --card: #ffffff;
  --ink: #111827;
  --ink2: #4b5563;
  --mute: #6b7280;
  --line: #f3e3eb;
  --ing: #059669;
  --gas: #e11d48;
  --r: 14px;
  --sh: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
  --side: 248px;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body.ab-noscroll { overflow: hidden; }
a { color: var(--acc); text-decoration: none; font-weight: 500; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -.01em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- controles ---------- */
input, select, textarea {
  font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #d5d9e0; border-radius: 10px; padding: 10px 12px; width: 100%;
  min-height: 42px; outline: none; transition: border-color .15s, box-shadow .15s;
}
select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
input:focus, select:focus, textarea:focus { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent); }
input:disabled { background: #f3f4f6; color: var(--mute); }
label { display: block; font-size: 13px; font-weight: 500; color: var(--ink2); }
label > input, label > select, label > textarea { margin-top: 6px; }

.ab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-weight: 600; font-size: 14px; cursor: pointer;
  border: 1px solid transparent; border-radius: 10px; padding: 10px 16px; min-height: 42px;
  background: #fff; color: var(--ink); transition: filter .15s, background .15s, opacity .15s; text-decoration: none !important;
}
.ab-btn:disabled { opacity: .6; cursor: default; }
.ab-btn svg { width: 18px; height: 18px; stroke-width: 2.2; }
.ab-primary { background: var(--acc); color: #fff; }
.ab-primary:hover { filter: brightness(1.08); }
.ab-ghost { border-color: #d5d9e0; background: #fff; }
.ab-ghost:hover { background: #f3f4f6; }
.ab-danger-ghost { color: var(--gas); border-color: #fecdd3; background: #fff; }
.ab-danger-ghost:hover { background: #fff1f2; }
.ab-block { width: 100%; }
.ab-lg { min-height: 48px; font-size: 15px; }
.ab-sm { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.ab-busy { position: relative; color: transparent !important; }
.ab-busy::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: fpspin .7s linear infinite; }
@keyframes fpspin { to { transform: rotate(360deg); } }

.ab-muted { color: var(--mute); }
.ab-small { font-size: 13px; }
.ab-flex { flex: 1; }
.ab-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ab-err { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; border-radius: 10px; padding: 10px 12px; font-size: 14px; }

/* ---------- logo ---------- */
.ab-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.ab-mark { width: 34px; height: 34px; border-radius: 10px; background: var(--acc); color: #fff; display: grid; place-items: center; flex: none; }
.ab-mark svg { width: 22px; height: 22px; fill: none; stroke: none; overflow: visible; }
.ab-logo-inv .ab-mark { background: rgba(255, 255, 255, .18); }

/* ---------- auth ---------- */
.ab-auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(320px, 44%) 1fr; }
.ab-auth-solo { grid-template-columns: 1fr; }
.ab-auth-side {
  background: var(--acc); color: #fff; padding: 40px 48px; display: flex; flex-direction: column; justify-content: space-between;
  background-image: radial-gradient(circle at 15% 85%, rgba(255,255,255,.12), transparent 45%), radial-gradient(circle at 90% 10%, rgba(255,255,255,.10), transparent 40%);
}
.ab-auth-side h2 { font-size: 34px; line-height: 1.15; max-width: 420px; margin-bottom: 24px; letter-spacing: -.02em; }
.ab-auth-side small { opacity: .7; }
.ab-pitch { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; max-width: 420px; }
.ab-pitch li { padding-left: 32px; position: relative; opacity: .95; }
.ab-pitch li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.2); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ab-auth-main { display: grid; place-items: center; padding: 32px 20px; }
.ab-auth-card { width: 100%; max-width: 400px; display: grid; gap: 16px; }
.ab-auth-card h1 { font-size: 26px; letter-spacing: -.02em; }
.ab-auth-card > p { margin: -8px 0 4px; }
.ab-auth-links { text-align: center; font-size: 14px; color: var(--mute); line-height: 2; }
.ab-center { text-align: center; justify-items: center; background: var(--card); padding: 32px 28px; border-radius: 18px; box-shadow: var(--sh); max-width: 440px; }
.ab-center .ab-logo { justify-content: center; }
.ab-price { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.ab-only-sm { display: none; }

/* ---------- shell ---------- */
.ab-shell { min-height: 100vh; }
.ab-side {
  position: fixed; inset: 0 auto 0 0; width: var(--side); background: var(--card); border-right: 1px solid var(--line);
  padding: 20px 14px; display: flex; flex-direction: column; gap: 18px; z-index: 20;
}
.ab-side .ab-logo { padding: 0 8px; }
.ab-side-new { margin: 4px 0; }
.ab-nav { display: grid; gap: 2px; }
.ab-nav-i {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 10px;
  border: 0; background: none; font: inherit; font-weight: 500; color: var(--ink2); cursor: pointer; text-align: left; text-decoration: none !important;
}
.ab-nav-i:hover { background: #f3f4f6; color: var(--ink); }
.ab-nav-i.on { background: color-mix(in srgb, var(--acc) 10%, #fff); color: var(--acc); font-weight: 600; }
.ab-side-foot { margin-top: auto; display: grid; gap: 6px; border-top: 1px solid var(--line); padding-top: 14px; }
.ab-user { display: flex; gap: 10px; align-items: center; padding: 4px 8px; min-width: 0; }
.ab-user-t { min-width: 0; }
.ab-user-t b, .ab-user-t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-user-t b { font-size: 14px; }
.ab-user-t small { color: var(--mute); font-size: 12px; }
.ab-avatar { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--acc) 14%, #fff); color: var(--acc); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; cursor: pointer; }

.ab-body { margin-left: var(--side); min-width: 0; }
.ab-head { display: flex; align-items: center; gap: 12px; padding: 22px 32px 6px; }
.ab-head h1 { font-size: 24px; letter-spacing: -.02em; flex: 1; }
.ab-main { padding: 12px 32px 48px; max-width: 1280px; }
.ab-banner {
  margin: 10px 32px 0; max-width: 1216px; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  background: color-mix(in srgb, var(--acc) 9%, #fff); border: 1px solid color-mix(in srgb, var(--acc) 25%, #fff); border-radius: 12px; padding: 10px 14px; font-size: 14px;
}
.ab-tabbar, .ab-fab { display: none; }

/* ---------- filtros ---------- */
.ab-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ab-filters select, .ab-filters input { width: auto; min-width: 150px; min-height: 38px; padding-top: 7px; padding-bottom: 7px; font-size: 14px; background-color: #fff; }
.ab-filters .ab-search { flex: 1; min-width: 180px; }
.ab-toolbar { display: flex; justify-content: flex-end; margin: -6px 0 12px; }

/* ---------- tarjetas ---------- */
.ab-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--sh); min-width: 0; }
.ab-card h3 { font-size: 15px; }
.ab-card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ab-card-h a { font-size: 13px; }
.ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ab-span2 { grid-column: span 2; }
.ab-span3 { grid-column: 1 / -1; }
.ab-grid-aj { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.ab-grid-aj .ab-card h3 { margin-bottom: 4px; }

.ab-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.ab-kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px; box-shadow: var(--sh); min-width: 0; }
.ab-kpi-l { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); font-weight: 500; }
.ab-kpi b { display: block; font-size: 24px; letter-spacing: -.02em; margin: 6px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ab-kpi small { color: var(--mute); font-size: 12px; }
.ab-kpi-main { background: var(--acc); border-color: var(--acc); color: #fff; }
.ab-kpi-main .ab-kpi-l, .ab-kpi-main small { color: rgba(255,255,255,.85); }
.ab-kpi-main.neg { background: #be123c; border-color: #be123c; }
.ab-kpi-main .ab-delta { background: rgba(255,255,255,.2) !important; color: #fff !important; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.ing { background: #10b981; } .dot.gas { background: #f43f5e; }
.ab-delta { font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 6px; border-radius: 6px; margin-right: 6px; }
.ab-delta.up { background: #dcfce7; color: #166534; }
.ab-delta.down { background: #ffe4e6; color: #9f1239; }

.ab-chart { position: relative; }
.ab-chart-lg { height: 290px; }
.ab-chart-sm { height: 170px; margin-bottom: 12px; }

.ab-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.ab-legend li { display: grid; grid-template-columns: 10px 1fr auto 38px; gap: 8px; align-items: center; }
.ab-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ab-legend span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-legend b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ab-legend small { color: var(--mute); text-align: right; }
.ab-empty-sm { margin: 24px 0; text-align: center; }

.ab-table-wrap { overflow-x: auto; }
.ab-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.ab-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.ab-table td { padding: 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ab-table th:not(:first-child), .ab-table td:not(:first-child) { text-align: right; }
.ab-table tr:last-child td { border-bottom: 0; }
.ab-table .pos { color: var(--ing); font-weight: 600; } .ab-table .neg { color: var(--gas); font-weight: 600; }

/* ---------- lista de movimientos ---------- */
.ab-totbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 12px; font-size: 14px; }
.ab-tot { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-variant-numeric: tabular-nums; }
.ab-tot b { white-space: nowrap; }
.ab-tot span { font-size: 12px; font-weight: 700; color: var(--mute); }
.ab-tot .ing { color: var(--ing); } .ab-tot .gas { color: var(--gas); }
.ab-card-list { padding: 6px 8px; margin-bottom: 12px; }
.ab-group { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mute); padding: 10px 12px 4px; }
.ab-list { list-style: none; margin: 0; padding: 0; }
.ab-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.ab-row:hover { background: #f6f7f9; }
.ab-row + .ab-row { border-top: 1px solid #f0f1f4; }
.ab-row-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; flex: none; }
.ab-row-ic.ingreso { background: #dcfce7; color: var(--ing); }
.ab-row-ic.gasto { background: #ffe4e6; color: var(--gas); }
.ab-row-main { flex: 1; min-width: 0; }
.ab-row-main b, .ab-row-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-row-main b { font-weight: 500; font-size: 14px; }
.ab-row-main small { color: var(--mute); font-size: 12px; }
.ab-row-amt { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 14px; }
.ab-row-amt.ingreso { color: var(--ing); }
.ab-list-compact { margin: -6px -8px; }
.ab-empty { text-align: center; color: var(--mute); padding: 40px 20px; }
.ab-loading { display: flex; align-items: center; gap: 12px; color: var(--mute); padding: 40px 0; }
.ab-loading span { width: 18px; height: 18px; border: 2px solid var(--acc); border-right-color: transparent; border-radius: 50%; animation: fpspin .7s linear infinite; }

.ab-welcome { text-align: center; padding: 48px 24px; display: grid; gap: 14px; justify-items: center; max-width: 620px; margin: 20px auto; }
.ab-welcome h2 { font-size: 24px; }
.ab-welcome p { margin: 0; max-width: 440px; }
.ab-welcome-ic .ab-mark { width: 56px; height: 56px; border-radius: 16px; }
.ab-welcome-ic .ab-mark svg { width: 30px; height: 30px; }

/* ---------- ajustes / cuenta ---------- */
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ab-chip { display: inline-flex; align-items: center; gap: 4px; background: #f3f4f6; border-radius: 99px; padding: 4px 4px 4px 12px; font-size: 13px; font-weight: 500; }
.ab-chip button { border: 0; background: none; width: 22px; height: 22px; border-radius: 50%; cursor: pointer; color: var(--mute); font-size: 16px; line-height: 1; }
.ab-chip button:hover { background: #e5e7eb; color: var(--gas); }
.ab-add { display: flex; gap: 8px; }
.ab-add input { min-height: 34px; padding: 6px 10px; font-size: 14px; }
.ab-savebar { position: sticky; bottom: 16px; display: flex; justify-content: flex-end; gap: 8px; padding: 12px; background: rgba(255,255,255,.9); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(16,24,40,.08); }
.ab-form { display: grid; gap: 12px; margin-top: 12px; }
.ab-form .ab-btn { justify-self: start; }
.ab-pill { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; margin: 10px 0 2px; }
.ab-pill.ok { background: #dcfce7; color: #166534; } .ab-pill.pr { background: #e0f2fe; color: #075985; } .ab-pill.inf { background: #ede9fe; color: #5b21b6; }

/* ---------- modal ---------- */
.ab-modal { position: fixed; inset: 0; background: rgba(17, 24, 39, .45); display: grid; place-items: center; padding: 20px; z-index: 100; opacity: 0; transition: opacity .2s; font: 15px/1.5 Inter, system-ui, sans-serif; color: var(--ink); }
.ab-modal.on { opacity: 1; }
.ab-sheet { background: #fff; border-radius: 18px; width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow: auto; padding: 20px 22px; display: grid; gap: 16px; box-shadow: 0 24px 48px rgba(16,24,40,.2); transform: translateY(12px); transition: transform .2s; }
.ab-modal.on .ab-sheet { transform: none; }
.ab-sheet-h { display: flex; justify-content: space-between; align-items: center; }
.ab-sheet-h h3 { font-size: 18px; }
.ab-x { border: 0; background: #f3f4f6; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; cursor: pointer; color: var(--ink2); }
.ab-seg { display: grid; grid-template-columns: 1fr 1fr; background: #f3f4f6; border-radius: 12px; padding: 4px; }
.ab-seg label { margin: 0; }
.ab-seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; min-height: 0; }
.ab-seg span { display: block; text-align: center; padding: 9px; border-radius: 9px; font-weight: 600; font-size: 14px; color: var(--mute); cursor: pointer; transition: all .15s; }
.ab-seg input:checked + span { background: #fff; box-shadow: var(--sh); color: var(--gas); }
.ab-sheet.es-ingreso .ab-seg input:checked + span { color: var(--ing); }
.ab-amount { display: flex; gap: 8px; }
.ab-amount select { width: 100px; flex: none; font-weight: 600; }
.ab-amount input { font-size: 26px; font-weight: 700; letter-spacing: -.02em; min-height: 56px; font-variant-numeric: tabular-nums; }
.ab-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ab-fgrid .ab-span2 { grid-column: span 2; }
.ab-sheet-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.ab-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #111827; color: #fff; padding: 10px 16px; border-radius: 10px; font: 500 14px/1.4 Inter, system-ui, sans-serif; opacity: 0; pointer-events: none; transition: all .2s; z-index: 200; max-width: calc(100vw - 32px); }
.ab-toast.on { opacity: 1; transform: translate(-50%, 0); }
.ab-toast.err { background: #be123c; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .ab-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ab-span2 { grid-column: span 2; }
}
@media (max-width: 860px) {
  .ab-auth { grid-template-columns: 1fr; }
  .ab-auth-side { display: none; }
  .ab-only-sm { display: flex; }
  .ab-side { display: none; }
  .ab-body { margin-left: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .ab-head { padding: 14px 16px 4px; padding-top: calc(14px + env(safe-area-inset-top)); }
  .ab-head h1 { font-size: 20px; }
  .ab-head .ab-mark { width: 30px; height: 30px; }
  .ab-main { padding: 10px 16px 24px; }
  .ab-banner { margin: 8px 16px 0; }
  .ab-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ab-span2 { grid-column: auto; }
  .ab-kpis { gap: 10px; }
  .ab-kpi { padding: 14px; }
  .ab-kpi b { font-size: 19px; }
  .ab-kpi-main { grid-column: span 2; order: -1; }
  .ab-kpi:last-child { grid-column: span 2; }
  .ab-kpi-main b { font-size: 28px; }
  .ab-chart-lg { height: 240px; }
  .ab-card { padding: 16px; }
  .ab-filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 0 16px; scrollbar-width: none; }
  .ab-filters::-webkit-scrollbar { display: none; }
  .ab-filters select, .ab-filters input { min-width: 0; flex: none; }
  .ab-filters .ab-search { min-width: 170px; }
  .ab-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .ab-tabbar .ab-nav-i { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 2px; justify-content: center; text-align: center; }
  .ab-tabbar .ab-nav-i.on { background: none; }
  .ab-fab {
    display: grid; place-items: center; position: fixed; right: 18px; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 31;
    width: 56px; height: 56px; border-radius: 18px; border: 0; background: var(--acc); color: #fff; cursor: pointer;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--acc) 40%, transparent);
  }
  .ab-fab svg { width: 26px; height: 26px; stroke-width: 2.4; }
  .ab-modal { place-items: end stretch; padding: 0; }
  .ab-sheet { max-width: none; border-radius: 20px 20px 0 0; max-height: 92vh; padding-bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateY(40px); }
  .ab-savebar { bottom: calc(84px + env(safe-area-inset-bottom)); }
  .ab-toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .ab-fgrid { grid-template-columns: 1fr; }
  .ab-fgrid .ab-span2 { grid-column: auto; }
  .ab-sheet-f .ab-flex { display: none; }
  .ab-sheet-f .ab-btn { flex: 1; }
}

/* ---------- presupuestos ---------- */
.ab-bar { height: 8px; background: #eef0f3; border-radius: 99px; overflow: hidden; }
.ab-bar i { display: block; height: 100%; border-radius: 99px; transition: width .4s; }
.ab-bar i.ok { background: var(--acc); } .ab-bar i.warn { background: #f59e0b; } .ab-bar i.over { background: var(--gas); }
.ab-budget-total { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.ab-budget-total b { font-size: 20px; letter-spacing: -.02em; }
.ab-budget-total .pos { color: var(--ing); font-weight: 600; font-size: 14px; } .ab-budget-total .neg { color: var(--gas); font-weight: 600; font-size: 14px; }
.ab-budget { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 24px; }
.ab-budget-h { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.ab-budget-h span { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-budget-h small { color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; } .ab-budget-h small.neg { color: var(--gas); font-weight: 600; }
.ab-budget-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 16px; margin-top: 12px; }
@media (max-width: 860px) { .ab-presu { order: -1; } }

/* ---------- agenda ---------- */
.ab-icon-btn { border: 1px solid #d5d9e0; background: #fff; width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink2); font-size: 20px; line-height: 1; flex: none; }
.ab-icon-btn:hover { background: #f3f4f6; color: var(--acc); }
.ab-icon-btn svg { width: 17px; height: 17px; }
.ab-alert { border-color: #fcd34d; background: #fffbeb; margin-bottom: 16px; }
.ab-alert h3 { display: flex; align-items: center; gap: 8px; color: #92400e; }
.ab-alert h3 svg { width: 18px; height: 18px; }
.ab-alert .ab-list { margin: -4px -8px -8px; }
.ab-ag { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.ab-ag:hover { background: rgba(0,0,0,.025); }
.ab-ag + .ab-ag { border-top: 1px solid #f0f1f4; }
.ab-ag-date { width: 46px; flex: none; text-align: center; border-radius: 10px; background: #f3f4f6; padding: 5px 0; line-height: 1.1; }
.ab-ag-date b { display: block; font-size: 18px; }
.ab-ag-date span { font-size: 11px; text-transform: uppercase; color: var(--mute); font-weight: 600; }
.ab-ag.soon .ab-ag-date { background: #fef3c7; } .ab-ag.soon .ab-ag-date span { color: #92400e; }
.ab-ag.late .ab-ag-date { background: #ffe4e6; } .ab-ag.late .ab-ag-date span { color: #9f1239; }
.ab-ag-when { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink2); margin-top: 1px; }
.ab-ag.soon .ab-ag-when { color: #b45309; } .ab-ag.late .ab-ag-when { color: var(--gas); }
.ab-ag-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.ab-ag-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.ab-ag-sum { padding: 10px 12px 2px; font-size: 14px; color: var(--ink2); }
.ab-grid-ag { align-items: start; }
.ab-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.ab-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.ab-cal-g small { font-size: 11px; color: var(--mute); font-weight: 600; padding: 4px 0; }
.ab-cal-d { position: relative; border: 0; background: none; font: inherit; font-size: 13px; aspect-ratio: 1; border-radius: 10px; cursor: pointer; color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; }
.ab-cal-d:hover { background: #f3f4f6; }
.ab-cal-d.ev { font-weight: 600; }
.ab-cal-d.hoy { color: var(--acc); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--acc); }
.ab-cal-d.sel { background: var(--acc); color: #fff; }
.ab-cal-d i { display: flex; gap: 2px; height: 5px; }
.ab-cal-d u, .ab-cal-ley u, .ab-mini u { display: inline-block; width: 5px; height: 5px; border-radius: 50%; text-decoration: none; }
u.p { background: var(--gas); } u.c { background: #8b5cf6; }
.ab-cal-d.sel u { background: #fff; }
.ab-cal-ley { display: flex; gap: 14px; font-size: 12px; color: var(--mute); margin-top: 10px; }
.ab-cal-ley span { display: flex; align-items: center; gap: 6px; }
.ab-cal-ley u { width: 7px; height: 7px; }
.ab-cal-sel { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.ab-cal-sel h4 { font-size: 14px; }
.ab-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ab-mini li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.ab-mini li:hover { background: #f3f4f6; }
.ab-mini b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.ab-mini u { width: 7px; height: 7px; flex: none; }
.ab-sheet-sm { max-width: 440px; }
.ab-switch { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ink); cursor: pointer; margin: 10px 0 6px; }
.ab-switch input { position: absolute; opacity: 0; width: 1px; min-height: 0; }
.ab-switch span { width: 42px; height: 24px; border-radius: 99px; background: #d1d5db; position: relative; flex: none; transition: background .15s; }
.ab-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ab-switch input:checked + span { background: var(--acc); }
.ab-switch input:checked + span::after { transform: translateX(18px); }
@media (max-width: 860px) {
  .ab-ag-top .ab-btn { flex: 1; font-size: 13px; padding: 8px 10px; }
  .ab-cal { order: -1; }
  .ab-ag-acts .ab-btn { padding: 6px 10px; }
}

/* ---------- tareas ---------- */
u.t { background: #0ea5e9; }
.ab-cal-d.sel u.t { background: #fff; }
.ab-ag.task .ab-ag-date { background: #e0f2fe; } .ab-ag.task .ab-ag-date span { color: #0369a1; }
.ab-ag.task.late .ab-ag-date { background: #ffe4e6; } .ab-ag.task.late .ab-ag-date span { color: #9f1239; }
.ab-mini small { color: var(--mute); font-size: 12px; font-variant-numeric: tabular-nums; }
.ab-quick { display: flex; gap: 8px; margin-bottom: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px; box-shadow: var(--sh); }
.ab-quick input[name=titulo] { flex: 1; min-width: 0; }
.ab-quick input[type=date] { width: 150px; flex: none; }
.ab-quick input[type=time] { width: 120px; flex: none; }
.ab-chips-f { display: flex; gap: 6px; flex-wrap: wrap; }
.ab-chip-f { border: 1px solid #d5d9e0; background: #fff; border-radius: 99px; padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--ink2); }
.ab-chip-f.on { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (max-width: 860px) {
  .ab-quick { flex-wrap: wrap; }
  .ab-quick input[name=titulo] { flex: 1 1 100%; }
  .ab-quick input[type=date], .ab-quick input[type=time] { flex: 1 1 0; width: auto; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .ab-quick .ab-btn { flex: none; padding: 8px 12px; }
  .ab-ag-top .ab-chips-f { width: 100%; }
  .ab-ag-top .ab-flex { display: none; }
}

/* ---------- planes (pantalla de pago) ---------- */
.ab-pay { max-width: 520px; }
.ab-planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; width: 100%; text-align: left; }
.ab-plan { display: flex; flex-direction: column; gap: 6px; border: 1.5px solid var(--line); border-radius: 16px; padding: 16px; color: var(--ink); text-decoration: none !important; background: #fff; transition: border-color .15s, box-shadow .15s; }
.ab-plan:hover { border-color: var(--acc); }
.ab-plan.on { border: 2px solid var(--acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 12%, transparent); }
.ab-plan-n { font-weight: 700; font-size: 14px; color: var(--ink2); }
.ab-plan-p b { font-size: 28px; letter-spacing: -.02em; }
.ab-plan small { color: var(--mute); font-size: 13px; flex: 1; }
.ab-plan .ab-btn { margin-top: 6px; }
.ab-secure { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; color: var(--mute); margin: 0; }
.ab-secure svg { width: 15px; height: 15px; }
.ab-verif { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; color: var(--ink2); }
.ab-verif span { width: 16px; height: 16px; border: 2px solid var(--acc); border-right-color: transparent; border-radius: 50%; animation: fpspin .7s linear infinite; }
.ab-link { background: none; border: 0; color: var(--mute); font-weight: 500; min-height: 36px; }
.ab-link:hover { color: var(--ink); text-decoration: underline; }
.ab-verif[hidden] { display: none; }

/* Mostrar u ocultar contraseña */
.ab-pass { position: relative; display: block; margin-top: 6px; }
.ab-pass > input { margin-top: 0; padding-right: 46px; width: 100%; }
.ab-pass-ojo { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; background: transparent; color: var(--ink2); cursor: pointer; border-radius: 8px; padding: 0; }
.ab-pass-ojo:hover { color: var(--ink); }

/* Instalar app */
html.ab-standalone [data-instalar], html.ab-standalone [data-instalar-card], html.ab-standalone .ab-inst-banner { display: none !important; }
.ab-instalar-btn { margin-top: 4px; gap: 8px; }
[data-instalar] svg { flex: none; }
.ab-btn[data-instalar] { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ab-inst-banner { align-items: center; }
.ab-inst-acc { display: inline-flex; align-items: center; gap: 4px; flex: none; }
.ab-inst-x { border: 0; background: transparent; font-size: 22px; line-height: 1; width: 32px; height: 32px; cursor: pointer; color: var(--ink2); border-radius: 8px; }
.ab-inst-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(17, 24, 39, .55); display: grid; place-items: end center; padding: 16px; }
.ab-inst-box { background: #fff; color: var(--ink); width: 100%; max-width: 420px; border-radius: 18px; padding: 22px 20px 18px; display: grid; gap: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.ab-inst-box h3 { font-size: 20px; }
.ab-inst-pasos { margin: 0; padding-left: 20px; display: grid; gap: 10px; line-height: 1.45; }
@media (min-width: 700px) { .ab-inst-modal { place-items: center; } }

/* Cuentas protegidas */
.ab-cta-nota { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff7e6; color: #8a5a00; font-size: 13px; line-height: 1.45; }
.ab-cta-edit { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; }
.ab-cta-edit input { flex: 1 1 160px; min-width: 0; }

/* Entrar con Google */
.ab-google { display: flex; justify-content: center; min-height: 44px; }
.ab-google.ab-busy { opacity: .5; pointer-events: none; }
.ab-o { display: flex; align-items: center; gap: 12px; color: var(--ink2); font-size: 13px; }
.ab-o::before, .ab-o::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }

/* Entrar con código por correo */
.ab-auth-links .ab-link { color: var(--acc); font-weight: 600; padding: 0; min-height: 0; font-size: inherit; cursor: pointer; }
.ab-codigo { font-size: 26px !important; letter-spacing: .4em; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.ab-codigo-info { margin: 0; padding: 12px 14px; border-radius: 12px; background: #ecfdf5; color: #065f46; font-size: 14px; line-height: 1.5; }

/* Tutoriales */
.ab-help { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #d1d5db; background: #fff; color: var(--ink2); font-weight: 700; font-size: 16px; cursor: pointer; flex: none; }
.ab-help:hover { border-color: var(--acc); color: var(--acc); }
.ab-tour { position: fixed; inset: 0; z-index: 10000; }
.ab-tour:not(.con) { background: rgba(17, 24, 39, .55); }
.ab-tour-ring { position: fixed; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(17, 24, 39, .55); outline: 3px solid #fff; transition: all .25s ease; pointer-events: none; }
.ab-tour-card { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom)); width: calc(100% - 32px); max-width: 420px; background: #fff; color: var(--ink); border-radius: 18px; padding: 18px 18px 14px; box-shadow: 0 20px 50px rgba(0,0,0,.3); display: grid; gap: 8px; }
.ab-tour-card.arriba { bottom: auto; top: calc(16px + env(safe-area-inset-top)); }
.ab-tour:not(.con) .ab-tour-card { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
.ab-tour-card small { color: var(--acc); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ab-tour-card h3 { font-size: 19px; margin: 0; }
.ab-tour-card p { margin: 0; color: var(--ink2); line-height: 1.5; font-size: 15px; }
.ab-tour-acc { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.ab-acepto{display:flex!important;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ab-muted,#64748b);margin:4px 0 14px;font-weight:400;cursor:pointer}
.ab-acepto input{width:20px!important;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:var(--ab-c,#be185d);padding:0}
.ab-acepto a{color:var(--ab-c,#be185d);text-decoration:underline}
.ab-auth-solo{grid-template-columns:1fr!important}

/* ---------- primer uso: instalar, objetivos, notificaciones ---------- */
.ab-onb .ab-auth-main { align-items: start; padding-top: max(28px, env(safe-area-inset-top)); }
.ab-onb-card { gap: 14px; }
.ab-onb-card h1 { font-size: 24px; line-height: 1.2; }
.ab-onb-ic { width: 64px; height: 64px; border-radius: 18px; background: var(--acc); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(190,24,93,.25); }
.ab-onb-ic .ab-mark { background: transparent; width: 64px; height: 64px; }
.ab-onb-ic .ab-mark svg { width: 34px; height: 34px; }
.ab-onb-bell { color: #fff; }
.ab-onb-bell svg { width: 32px; height: 32px; }
.ab-onb-ben { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ab-onb-ben li { padding-left: 28px; position: relative; }
.ab-onb-ben li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--acc-soft, #fce7f3); color: var(--acc); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ab-onb-pasos { margin: 0; padding: 14px 16px 14px 36px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; display: grid; gap: 10px; font-size: 15px; }
.ab-onb-det { font-size: 14px; color: var(--mute); }
.ab-onb-det summary { cursor: pointer; text-align: center; margin-bottom: 10px; }
.ab-onb-ok { width: 72px; height: 72px; border-radius: 50%; background: var(--acc); color: #fff; font-size: 36px; display: grid; place-items: center; justify-self: center; }
.ab-onb-card .ab-link { justify-self: center; }
.ab-onb-prog { display: flex; gap: 6px; }
.ab-onb-prog span { flex: 1; height: 5px; border-radius: 3px; background: var(--line); }
.ab-onb-prog span.on { background: var(--acc); }
.ab-onb-ops { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab-onb-lista { grid-template-columns: 1fr; }
.ab-onb-op { text-align: left; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 15px; font-weight: 600; color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, background .15s; }
.ab-onb-lista .ab-onb-op { flex-direction: row; align-items: center; padding: 15px 16px; }
.ab-onb-op span { font-size: 24px; line-height: 1; }
.ab-onb-op.on { border-color: var(--acc); background: var(--acc-soft, #fce7f3); }
.ab-onb-meta { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.ab-onb-plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ab-onb-plan li { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px 12px 44px; position: relative; font-size: 15px; line-height: 1.45; }
.ab-onb-plan li::before { content: "✓"; position: absolute; left: 14px; top: 13px; width: 20px; height: 20px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.ab-onb-notif { display: flex; gap: 12px; align-items: center; background: var(--card); border-radius: 16px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(15,23,42,.12); border: 1px solid var(--line); }
.ab-onb-notif-ic .ab-mark { width: 38px; height: 38px; }
.ab-onb-notif b { display: block; font-size: 14px; }
.ab-onb-notif span { font-size: 13px; color: var(--mute); }
.ab-objetivo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.ab-objetivo .ab-chip-o { background: var(--acc-soft, #fce7f3); color: var(--acc); border-radius: 99px; padding: 4px 10px; font-weight: 600; font-size: 13px; }
.ab-notif-est { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 10px; }
.ab-notif-est i { width: 10px; height: 10px; border-radius: 50%; background: #94a3b8; display: inline-block; }
.ab-notif-est.ok i { background: #16a34a; }
.ab-notif-est.no i { background: #e11d48; }
.ab-obj-res{margin:0 0 14px}
.ab-onb-card [hidden]{display:none!important}
.ab-onb-bienv { background: var(--acc); color: #fff; border-radius: 18px; padding: 20px 18px; display: grid; gap: 6px; background-image: radial-gradient(circle at 90% 10%, rgba(255,255,255,.15), transparent 45%); }
.ab-onb-bienv h1 { color: #fff; font-size: 23px; }
.ab-onb-bienv p { margin: 0; opacity: .95; font-size: 15px; line-height: 1.5; }
.ab-onb-confeti { font-size: 34px; line-height: 1; }
.ab-onb-h2 { font-size: 19px; margin-top: 6px; }
.ab-onb-sub { color: var(--acc); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.ab-onb-sel { font-size: 16px; padding: 12px; border-radius: 12px; }
.ab-req-inst { display: flex; gap: 12px; align-items: flex-start; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.ab-req-inst p { margin: 4px 0 10px; font-size: 14px; color: #7c2d12; }
.ab-req-ic { font-size: 26px; line-height: 1; }
body:has(.ab-req-inst) #ab-inst-banner{display:none}

/* ---------- Centro de ayuda ---------- */
.ab-ay { display: grid; gap: 16px; max-width: 860px; }
.ab-ay-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 24px 22px; color: #fff; background: linear-gradient(135deg, var(--acc) 0%, #9d174d 100%); display: flex; gap: 16px; align-items: center; justify-content: space-between; box-shadow: 0 12px 32px rgba(190,24,93,.25); }
.ab-ay-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08); }
.ab-ay-hero h2 { font-size: 22px; line-height: 1.25; margin: 10px 0 6px; letter-spacing: -.01em; }
.ab-ay-hero p { margin: 0; opacity: .92; font-size: 14.5px; line-height: 1.5; }
.ab-ay-badge { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,255,.16); border-radius: 99px; padding: 5px 11px; font-size: 12.5px; font-weight: 600; }
.ab-ay-badge i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.3); }
.ab-ay-avs { display: flex; flex: none; position: relative; z-index: 1; }
.ab-ay-avs span { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.4); display: grid; place-items: center; font-size: 30px; }
.ab-ay-acc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 760px) { .ab-ay-acc { grid-template-columns: repeat(4, 1fr); } }
.ab-ay-tile { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 4px; cursor: pointer; font: inherit; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s, border-color .15s; }
.ab-ay-tile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(16,24,40,.08); border-color: var(--acc); }
.ab-ay-tile b { font-size: 15px; }
.ab-ay-tile small { color: var(--mute); font-size: 12.5px; line-height: 1.35; }
.ab-ay-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; margin-bottom: 8px; }
.ab-ay-ic.t1 { background: #e0f2fe; } .ab-ay-ic.t2 { background: #fef3c7; } .ab-ay-ic.t3 { background: #fce7f3; } .ab-ay-ic.t4 { background: #dcfce7; }
.ab-ay-list { margin: 0; }
.ab-ay-item { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 4px !important; }
.ab-ay-item b { display: block; font-size: 14.5px; }
.ab-ay-item small { font-size: 12.5px; }
.ab-ay-item-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--bg, #f4f6f8); display: grid; place-items: center; font-size: 18px; flex: none; }
.ab-pill.gr { background: #f1f5f9; color: #475569; } .ab-pill.inf { background: #ede9fe; color: #5b21b6; }
.ab-ay-faq details { border-bottom: 1px solid var(--line); padding: 2px 0; }
.ab-ay-faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 10px; }
.ab-ay-faq summary::after { content: "+"; color: var(--acc); font-size: 20px; line-height: 1; }
.ab-ay-faq details[open] summary::after { content: "−"; }
.ab-ay-faq p { margin: 0 0 14px; color: var(--mute); font-size: 14.5px; line-height: 1.55; }
.ab-ay-pie { text-align: center; }
.ab-ay-sheet .ab-form { display: grid; gap: 14px; }
.ab-lbl { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.ab-ay-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-ay-cats label { cursor: pointer; }
.ab-ay-cats input { position: absolute; opacity: 0; pointer-events: none; }
.ab-ay-cats span { display: inline-block; border: 1.5px solid var(--line); border-radius: 99px; padding: 7px 12px; font-size: 13.5px; font-weight: 600; background: var(--card); }
.ab-ay-cats input:checked + span { border-color: var(--acc); background: var(--acc-soft, #fce7f3); color: var(--acc); }
.ab-ay-sheet textarea { width: 100%; font: inherit; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: vertical; }
.ab-ay-ok { text-align: center; display: grid; gap: 10px; justify-items: center; padding: 10px 0 4px; }
.ab-ay-ok-ic { width: 72px; height: 72px; border-radius: 50%; background: var(--acc-soft, #fce7f3); display: grid; place-items: center; font-size: 34px; }
.ab-ay-ok h3 { font-size: 20px; }
.ab-ay-stars { display: flex; justify-content: center; gap: 6px; }
.ab-ay-star { background: none; border: 0; font-size: 44px; line-height: 1; color: #d6dbe1; cursor: pointer; padding: 2px; transition: transform .12s, color .12s; }
.ab-ay-star.on { color: #f59e0b; }
.ab-ay-star:active { transform: scale(1.2); }
.ab-ay-stars-t { text-align: center; font-weight: 700; margin: -4px 0 0; min-height: 22px; }
.ab-ay-hilo { display: grid; gap: 10px; max-height: 50vh; overflow: auto; padding: 2px; }
.ab-ay-msg { padding: 11px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.5; max-width: 88%; }
.ab-ay-msg small { display: block; font-size: 11.5px; opacity: .75; margin-bottom: 3px; }
.ab-ay-msg.yo { background: var(--acc); color: #fff; justify-self: end; border-bottom-right-radius: 4px; }
.ab-ay-msg.sop { background: #f1f5f9; justify-self: start; border-bottom-left-radius: 4px; }
.ab-ay-resp { display: grid; gap: 8px; }
.ab-ay-menu { display: grid; gap: 8px; }
.ab-ay-menu button { display: flex; gap: 12px; align-items: center; text-align: left; font: inherit; font-size: 22px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; color: inherit; }
.ab-ay-menu button:hover { border-color: var(--acc); }
.ab-ay-menu b { display: block; font-size: 15px; }
.ab-ay-menu small { display: block; font-size: 12.5px; color: var(--mute); }
.ab-ay-cta-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ab-rate { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: linear-gradient(135deg, #fff7ed, #fef3c7); border: 1px solid #fde68a; border-radius: 16px; padding: 14px 40px 14px 16px; margin-bottom: 14px; }
.ab-rate b { display: block; }
.ab-rate span { font-size: 13.5px; color: #92400e; }
.ab-rate-st button { background: none; border: 0; font-size: 30px; color: #f59e0b; cursor: pointer; padding: 0 2px; line-height: 1; }
.ab-rate-st button:hover ~ button { color: #e5e7eb; }
.ab-rate-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 20px; color: #92400e; cursor: pointer; }

/* ---------- Presupuesto guiado ---------- */
.ab-pre-pasos { list-style: none; counter-reset: p; margin: 0; padding: 0; display: grid; gap: 8px; }
.ab-pre-pasos li { counter-increment: p; display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.ab-pre-pasos li::before { content: counter(p); grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; }
.ab-pre-pasos span { font-size: 13px; color: var(--mute); }
.ab-pre-big { display: flex; align-items: center; gap: 10px; background: var(--card); border: 2px solid var(--acc); border-radius: 16px; padding: 10px 16px; }
.ab-pre-big em { font-style: normal; font-weight: 700; color: var(--mute); }
.ab-pre-big input { border: 0 !important; outline: 0; font-size: 30px; font-weight: 700; width: 100%; background: transparent; padding: 4px 0 !important; box-shadow: none !important; }
.ab-pre-list { display: grid; gap: 8px; }
.ab-pre-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px 8px 14px; font-weight: 600; font-size: 14.5px; }
.ab-pre-in { display: flex; align-items: center; gap: 6px; flex: none; }
.ab-pre-in em { font-style: normal; font-size: 12px; color: var(--mute); }
.ab-pre-in input { width: 110px !important; text-align: right; font-size: 16px; padding: 8px 10px !important; border-radius: 10px; }
.ab-pre-bar { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #0f172a; color: #fff; border-radius: 14px; padding: 10px 12px; box-shadow: 0 -6px 20px rgba(15,23,42,.15); z-index: 2; }
.ab-pre-bar small { display: block; font-size: 11px; opacity: .7; }
.ab-pre-bar b { font-size: 14px; }
.ab-pre-bar .pos b { color: #4ade80; } .ab-pre-bar .neg b { color: #fb7185; }
.ab-pre-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ab-pre-chips button { background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 4px; cursor: pointer; font: inherit; color: inherit; display: grid; gap: 2px; }
.ab-pre-chips button.on { border-color: var(--acc); background: var(--acc-soft, #fce7f3); }
.ab-pre-chips small { font-size: 11.5px; color: var(--mute); }
.ab-pre-carta { background: #fffdf7; border: 1px solid #f1e6c8; border-radius: 16px; padding: 18px; display: grid; gap: 10px; box-shadow: 0 8px 24px rgba(120,90,20,.08); }
.ab-pre-carta ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ab-pre-carta li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed #eadfbe; padding-bottom: 8px; }
.ab-pre-carta li.ah b { color: var(--acc); font-size: 17px; }
.ab-hold { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: none; }
.ab-hold i { position: absolute; inset: 0; width: 0; background: rgba(255,255,255,.25); }
.ab-hold.on i { width: 100%; transition: width 1.3s linear; }
.ab-hold span { position: relative; }
.ab-pre-sig { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.ab-pre-sig ol { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; }
.ab-comp { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; margin-bottom: 14px; display: grid; gap: 10px; }
.ab-comp-t { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; font-size: 14px; }
.ab-comp-t small { font-weight: 500; color: var(--mute); }
.ab-onb-ok { font-size: 34px; }
.ab-frase { background: linear-gradient(160deg, #0f172a 0%, #831843 100%); color: #fff; border-radius: 22px; padding: 28px 22px; display: grid; gap: 12px; box-shadow: 0 16px 40px rgba(15,23,42,.25); }
.ab-frase-ic { font-size: 30px; }
.ab-frase h1 { color: #fff; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; }
.ab-frase p { margin: 0; font-size: 15.5px; line-height: 1.55; opacity: .92; }
.ab-frase small, .ab-cita small, .ab-pre-verso small { display: block; font-size: 12px; opacity: .7; margin-top: 4px; font-style: normal; font-weight: 600; letter-spacing: .02em; }
.ab-cita { margin: 0; border-left: 3px solid var(--acc); background: var(--card); border-radius: 0 14px 14px 0; padding: 14px 16px; font-size: 15px; line-height: 1.55; font-style: italic; color: var(--ink); }
.ab-pre-ings { display: grid; gap: 12px; }
.ab-pre-ing { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; display: grid; gap: 10px; }
.ab-pre-ing-h { display: flex; gap: 8px; align-items: center; }
.ab-pre-ing-h select { flex: 1; font-weight: 600; border-radius: 10px; padding: 8px 10px; }
.ab-pre-del { background: #fee2e2; color: #b91c1c; border: 0; border-radius: 10px; width: 36px; height: 36px; font-size: 20px; cursor: pointer; }
.ab-pre-frec { display: flex; gap: 6px; flex-wrap: wrap; }
.ab-pre-frec button { border: 1.5px solid var(--line); background: var(--card); border-radius: 99px; padding: 6px 12px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: inherit; }
.ab-pre-frec button.on { border-color: var(--acc); background: var(--acc-soft, #fce7f3); color: var(--acc); }
.ab-pre-tot { display: flex; justify-content: space-between; align-items: center; background: #0f172a; color: #fff; border-radius: 14px; padding: 12px 16px; font-size: 14px; }
.ab-pre-tot b { font-size: 18px; color: #4ade80; }
.ab-pre-verso { margin: 4px 0 0; font-size: 13.5px; font-style: italic; color: #7c6a3c; }
.ab-pre-extra { gap: 8px; padding: 8px !important; border-style: dashed !important; border-color: var(--acc) !important; }
.ab-pre-nom { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.ab-pre-extra .ab-pre-in input { width: 92px !important; }
.ab-pre-extra .ab-pre-del { width: 32px; height: 32px; flex: none; }
.ab-pre-tip { margin: 0; background: #fffbeb; border: 1px solid #fde68a; color: #78350f; border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; }
.ab-onb-ok-mini{justify-self:start;background:#dcfce7;color:#166534;border-radius:99px;padding:6px 12px;font-weight:700;font-size:13.5px}

/* ---------- Recorrido de pantallas (solo admin) ---------- */
body.ab-rec-on { padding-top: 54px; }
.ab-rec { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; display: flex; gap: 6px; align-items: center; padding: 8px 10px; background: #0f172a; color: #fff; box-shadow: 0 4px 16px rgba(0,0,0,.25); font: 14px/1.2 Inter, system-ui, sans-serif; }
.ab-rec select { flex: 1; min-width: 0; background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 10px; padding: 8px; font-size: 14px; }
.ab-rec button, .ab-rec a { background: #1e293b; color: #fff; border: 1px solid #334155; border-radius: 10px; min-width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer; text-decoration: none; font-size: 15px; }
.ab-rec span { font-size: 12px; white-space: nowrap; background: #831843; border-radius: 99px; padding: 6px 10px; }
@media (max-width: 420px) { .ab-rec span { display: none; } }
body.ab-rec-on .ab-side { top: 54px; }
body.ab-rec-inst #ab-inst-banner{display:none!important}
.ab-bv-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ab-bv-pasos li { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 11px 13px; }
.ab-bv-pasos li > span { width: 40px; height: 40px; border-radius: 12px; background: var(--acc-soft, #fce7f3); display: grid; place-items: center; font-size: 20px; flex: none; }
.ab-bv-pasos b { display: block; font-size: 15px; }
.ab-bv-pasos small { color: var(--mute); font-size: 13px; }

/* ---------- Planes y oferta ---------- */
.ab-of { background: linear-gradient(135deg, #7c2d12, #c2410c); color: #fff; border-radius: 18px; padding: 16px; display: grid; gap: 10px; text-align: center; box-shadow: 0 10px 28px rgba(194,65,12,.3); }
.ab-of-t span { display: inline-block; background: rgba(255,255,255,.18); border-radius: 99px; padding: 4px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; }
.ab-of-t b { display: block; font-size: 19px; margin-top: 6px; }
.ab-of small { opacity: .85; font-size: 12.5px; }
.ab-of-clock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ab-of-clock span { background: rgba(0,0,0,.25); border-radius: 12px; padding: 8px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; display: grid; gap: 2px; }
.ab-of-clock b { font-size: 26px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ab-planes2 { display: grid; gap: 12px; text-align: left; margin-top: 4px; }
.ab-p2 { position: relative; display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 16px 14px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.ab-p2.on { border-color: var(--acc); box-shadow: 0 8px 24px rgba(190,24,93,.15); }
.ab-p2.best { padding-top: 22px; }
.ab-p2 input { position: absolute; opacity: 0; pointer-events: none; }
.ab-p2-r { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #cbd5e1; display: grid; place-items: center; }
.ab-p2.on .ab-p2-r { border-color: var(--acc); }
.ab-p2.on .ab-p2-r::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--acc); }
.ab-p2-badge { position: absolute; top: -11px; left: 14px; background: var(--acc); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.ab-p2-n b { display: block; font-size: 17px; }
.ab-p2-n small { display: block; color: var(--mute); font-size: 13px; }
.ab-p2-n em { display: inline-block; margin-top: 6px; font-style: normal; font-weight: 700; font-size: 12.5px; color: #15803d; background: #dcfce7; border-radius: 8px; padding: 3px 8px; }
.ab-p2-p { text-align: right; line-height: 1.1; }
.ab-p2-p b { font-size: 24px; letter-spacing: -.02em; }
.ab-p2-p small { color: var(--mute); font-size: 13px; }
.ab-p2-p s, .ab-p2-n s { display: block; color: #94a3b8; font-size: 13px; }
.ab-p2-n s { display: inline; }
.ab-p2-cta { margin-top: 4px; }
.ab-p2-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; font-size: 13px; color: var(--mute); }
.ab-p2-trust li::before { content: "✓ "; color: var(--acc); font-weight: 700; }
.ab-p2-p i { display: block; font-style: normal; font-size: 11.5px; color: var(--acc); font-weight: 700; margin-top: 4px; }
.ab-v-h { display: block; font-size: 15px; margin-bottom: 10px; }
.ab-v-rating { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13.5px; color: var(--mute); flex-wrap: wrap; }
.ab-v-stars { color: #f59e0b; font-size: 17px; letter-spacing: 1px; } .ab-v-stars i { color: #e2e8f0; font-style: normal; }
.ab-v-rating b { color: var(--ink); }
.ab-v-tl { text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; }
.ab-v-tl ol { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 14px; }
.ab-v-tl ol::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: linear-gradient(var(--acc), #f59e0b); }
.ab-v-tl li { display: flex; gap: 12px; position: relative; }
.ab-v-tl li i { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: 2px solid var(--line); display: grid; place-items: center; font-style: normal; flex: none; z-index: 1; font-size: 16px; }
.ab-v-tl li.on i { border-color: var(--acc); background: var(--acc-soft, #fce7f3); }
.ab-v-tl b { display: block; font-size: 14.5px; } .ab-v-tl span { font-size: 13px; color: var(--mute); line-height: 1.4; }
.ab-v-cafe { display: flex; gap: 12px; align-items: center; text-align: left; background: #fffbeb; border: 1px solid #fde68a; border-radius: 16px; padding: 14px; }
.ab-v-cafe > span { font-size: 30px; }
.ab-v-cafe b { display: block; font-size: 15px; } .ab-v-cafe small { color: #78350f; font-size: 13px; line-height: 1.4; }
.ab-v-incl { text-align: left; }
.ab-v-incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ab-v-incl li { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.ab-v-gar { display: flex; gap: 14px; align-items: center; text-align: left; border: 2px dashed var(--acc); border-radius: 18px; padding: 14px; }
.ab-v-sello { width: 62px; height: 62px; flex: none; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; align-content: center; font-weight: 800; font-size: 22px; line-height: 1; box-shadow: 0 0 0 4px var(--acc-soft, #fce7f3); }
.ab-v-sello small { font-size: 9px; letter-spacing: .1em; }
.ab-v-gar b { display: block; font-size: 15px; } .ab-v-gar span { font-size: 13px; color: var(--mute); line-height: 1.4; }
.ab-pay { gap: 14px; }

/* Presupuesto: "lo completo después" para no abrumar */
.ab-pre-luego { margin-top: 14px; padding: 14px 16px; border-radius: 14px; background: #f4f7f6; border: 1px dashed #c9d6d2; display: grid; gap: 10px; }
.ab-pre-luego p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mute); }
.ab-pre-luego p b { color: var(--ink); }

/* Rueda mientras se abre o se procesa el pago */
.ab-rueda { position: fixed; inset: 0; z-index: 10000; background: rgba(245, 246, 248, .97); display: grid; place-items: center; padding: 24px; }
.ab-rueda-box { display: grid; justify-items: center; gap: 10px; text-align: center; max-width: 320px; }
.ab-rueda-sp { width: 56px; height: 56px; border-radius: 50%; border: 5px solid rgba(15, 118, 110, .18); border-top-color: var(--acc); animation: fpspin .8s linear infinite; margin-bottom: 8px; }
.ab-rueda-box b { font-size: 19px; color: var(--ink); }
.ab-rueda-box small { font-size: 14px; color: var(--mute); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .ab-rueda-sp { animation-duration: 2.4s; } }

/* ---------- Página de pago con marca (Paddle incrustado) ---------- */
.ab-co { min-height: 100vh; background: var(--bg); }
.ab-co-top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line); }
.ab-co-top .ab-logo { font-size: 16px; }
.ab-co-top .ab-mark { width: 30px; height: 30px; border-radius: 9px; }
.ab-co-back { background: none; border: 0; color: var(--ink2); font: inherit; font-size: 14px; font-weight: 600; padding: 8px 0; min-height: 44px; cursor: pointer; }
.ab-co-lock { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--acc); }
.ab-co-lock svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ab-co-grid { max-width: 1040px; margin: 0 auto; padding: 28px 20px 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.ab-co-res { background: #3a1028; color: #d6e4e1; border-radius: 22px; padding: 28px; display: grid; gap: 16px; position: sticky; top: 92px; }
.ab-co-eye { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fd3c7; }
.ab-co-res h1 { margin: 0; font-size: 28px; line-height: 1.15; color: #fff; letter-spacing: -.02em; }
.ab-co-desc { margin: 0; font-size: 15px; line-height: 1.5; }
.ab-co-lines { list-style: none; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid rgba(255,255,255,.14); display: grid; gap: 10px; }
.ab-co-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.ab-co-lines li b { color: #fff; font-variant-numeric: tabular-nums; font-weight: 600; }
.ab-co-lines li.tot { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); font-size: 17px; }
.ab-co-lines li.tot b { font-size: 22px; font-weight: 800; }
.ab-co-sk { height: 18px; border-radius: 6px; background: rgba(255,255,255,.08); }
.ab-co-renew { background: rgba(242, 166, 20, .14); border: 1px solid rgba(242, 166, 20, .35); color: #fde7b5; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.ab-co-renew b { color: #fff; }
.ab-co-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ab-co-trust li { display: flex; gap: 8px; align-items: flex-start; }
.ab-co-trust svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #f9a8d4; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.ab-co-pay { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 24px 20px 12px; box-shadow: var(--sh); min-height: 420px; }
.ab-co-pay h2 { margin: 0 0 8px; font-size: 19px; padding: 0 4px; }
.ab-co-load { display: grid; justify-items: center; gap: 12px; padding: 60px 0; color: var(--mute); }
@media (max-width: 820px) {
  .ab-co-grid { grid-template-columns: 1fr; padding: 16px 16px 40px; gap: 16px; }
  .ab-co-res { position: static; padding: 22px 20px; border-radius: 18px; }
  .ab-co-res h1 { font-size: 23px; }
  .ab-co-pay { padding: 20px 12px 8px; border-radius: 18px; }
  .ab-co-top .ab-logo > span:last-child { display: none; }
}
.ab-co-lines li.ab-co-precio { display: grid; gap: 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.14); }
.ab-co-lines li.ab-co-precio b { font-size: 34px; font-weight: 800; letter-spacing: -.02em; }
.ab-co-lines li.ab-co-precio span { font-size: 14px; color: #a9c9c3; }
.ab-co-lines li.hoy { align-items: center; }
.ab-co-lines li.hoy em { font-style: normal; font-size: 12px; font-weight: 700; color: #3a1028; background: #f9a8d4; border-radius: 99px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; }
.ab-co-lines li.hoy b { color: #f9a8d4; font-size: 18px; }
.ab-co-lines li.imp span { font-size: 12px; color: #a9c9c3; }
.ab-co-lines li.ab-co-hoy { display: grid; grid-template-columns: 1fr; justify-items: start; gap: 4px; }
.ab-co-lines li.ab-co-hoy small { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8fd3c7; }
.ab-co-lines li.ab-co-hoy b { font-size: 44px; color: #f9a8d4; line-height: 1.05; }
.ab-co-lines li.ab-co-hoy em { font-style: normal; font-size: 14px; font-weight: 700; color: #3a1028; background: #f9a8d4; border-radius: 99px; padding: 3px 12px; }
.ab-co-lines li b { white-space: nowrap; }
.ab-co-hero { grid-column: 1 / -1; display: grid; gap: 6px; }
.ab-co-hero h1 { margin: 0; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; color: var(--acc); }
.ab-co-hero p { margin: 0; color: var(--ink2); font-size: 16px; }
.ab-co-res h2.ab-co-plan { margin: 0; font-size: 26px; line-height: 1.15; color: #fff; letter-spacing: -.02em; }
@media (max-width: 820px) { .ab-co-hero h1 { font-size: 30px; } .ab-co-res h2.ab-co-plan { font-size: 22px; } }

/* =====================================================================
   TEMA "NOCHE" — fondo verde oscuro, tarjetas blancas, todo más compacto
   ===================================================================== */
body.ab-noche { background: #3b0a24; background-image: radial-gradient(120% 60% at 0% 0%, #6b1440 0%, rgba(107,20,64,0) 60%), linear-gradient(180deg, #4a0d2c 0%, #2a0718 100%); background-attachment: fixed; }
body.ab-noche .ab-head { color: #fff; }
body.ab-noche .ab-head h1 { color: #fff; font-size: 21px; line-height: 1.15; }
.ab-head-t { flex: 1; min-width: 0; }
.ab-head-t small { display: block; color: rgba(255,255,255,.7); font-size: 12.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ab-noche .ab-head .ab-help { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.18); color: #fff; }
body.ab-noche .ab-head .ab-avatar { background: #fce7f3; color: #be185d; }
body.ab-noche .ab-head .ab-mark { box-shadow: 0 0 0 1px rgba(255,255,255,.15); }
body.ab-noche .ab-banner { background: #f1faf8; border-color: #cfe7e2; color: #24151d; }
.ab-banner-pr { gap: 10px !important; }
.ab-banner-ic { font-style: normal; width: 30px; height: 30px; border-radius: 50%; background: #fff4dc; display: grid; place-items: center; font-size: 15px; flex: none; }
.ab-banner-pr span { flex: 1; font-size: 12.5px; line-height: 1.35; }
.ab-banner-pr .ab-btn { border-radius: 99px; }
body.ab-noche .ab-loading { color: rgba(255,255,255,.8); }
body.ab-noche .ab-main > .ab-muted, body.ab-noche .ab-obj-res .ab-muted { color: rgba(255,255,255,.7); }
body.ab-noche .ab-card { border-color: rgba(255,255,255,.06); box-shadow: 0 6px 20px rgba(0,0,0,.18); }

/* Resumen */
.ab-res { max-width: 760px; }
.ab-res > * { margin-bottom: 10px; }
.ab-hero { position: relative; overflow: hidden; border-radius: 20px; padding: 15px 16px 14px; color: #fff;
  background: radial-gradient(120% 150% at 100% 0%, #db2777 0%, #be185d 45%, #831843 100%); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 10px 28px rgba(0,0,0,.25); }
.ab-hero.neg { background: radial-gradient(120% 150% at 100% 0%, #f2627b 0%, #be123c 50%, #7f1230 100%); }
.ab-hero-l { display: block; font-size: 12.5px; opacity: .85; }
.ab-hero-v { display: block; font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin: 2px 0 8px; font-variant-numeric: tabular-nums; max-width: calc(100% - 96px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-hero-f { display: flex; align-items: center; gap: 6px; min-height: 22px; max-width: calc(100% - 96px); }
.ab-hero-f small { font-size: 11.5px; opacity: .85; }
.ab-hero .ab-delta { background: rgba(255,255,255,.18) !important; color: #fff !important; margin: 0; border-radius: 99px; padding: 3px 8px; }
.ab-hero-ml { position: absolute; right: 14px; top: 12px; font-size: 9.5px; opacity: .7; }
.ab-hero-mini { position: absolute; right: 14px; bottom: 13px; display: flex; align-items: flex-end; gap: 4px; height: 48px; }
.ab-hero-mini i { display: block; width: 7px; border-radius: 4px 4px 2px 2px; background: rgba(255,255,255,.35); }
.ab-hero-mini i.neg { background: rgba(255,170,185,.55); }
.ab-hero-mini i.hoy { background: #fff; }
.ab-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-k { background: #fff; border-radius: 16px; padding: 10px 11px 9px; min-width: 0; box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.ab-k-l { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--mute); }
.ab-k-ic { font-style: normal; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.ab-k-ic.ing { background: #dcfce7; color: #059669; } .ab-k-ic.gas { background: #ffe4e6; color: #e11d48; }
.ab-k b { display: block; font-size: 15.5px; letter-spacing: -.02em; margin: 5px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.ab-spark { display: block; width: 100%; height: 18px; margin: 2px 0 4px; }
.ab-spark path { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.ab-k-f { min-height: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.ab-k-f .ab-delta { border-radius: 99px; font-size: 11px; padding: 2px 7px; margin-right: 4px; }
.ab-k-f small { font-size: 10.5px; color: var(--mute); }
.ab-per { display: flex; gap: 6px; align-items: stretch; }
.ab-per-seg { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border-radius: 12px; padding: 3px; gap: 2px; }
.ab-per-seg button { border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: #3d524e; border-radius: 9px; padding: 7px 0; cursor: pointer; }
.ab-per-seg button.on { background: #be185d; color: #fff; }
.ab-per-mas { position: relative; display: flex; align-items: center; gap: 5px; background: #fff; border-radius: 12px; padding: 0 10px; font-size: 12px; font-weight: 600; color: var(--ink); margin: 0; cursor: pointer; white-space: nowrap; }
.ab-per-mas svg { width: 15px; height: 15px; }
.ab-per-mas select { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; min-height: 0; cursor: pointer; }
.ab-per-extra { margin: 0 !important; }
.ab-res .ab-card { padding: 12px 13px; border-radius: 16px; }
.ab-res .ab-card-h { margin-bottom: 6px; }
.ab-res .ab-card h3 { font-size: 14px; }
.ab-res .ab-card-h a { font-size: 12px; }
.ab-graf .ab-chart-lg { height: 210px; }
.ab-two { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8px; }
.ab-two.solo { grid-template-columns: 1fr; }
.ab-two > .ab-card { margin: 0; }
.ab-dona-c { position: relative; height: 128px; margin: 2px 0 8px; }
.ab-dona-t { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; line-height: 1.1; }
.ab-dona-t b { font-size: 16px; letter-spacing: -.02em; }
.ab-dona-t small { font-size: 9.5px; color: var(--mute); }
.ab-leg2 { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.ab-leg2 li { display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.25; }
.ab-leg2 li i { width: 8px; height: 8px; border-radius: 50%; margin-top: 3px; flex: none; }
.ab-leg2 li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-leg2 li span small { display: block; color: var(--mute); font-size: 10.5px; }
.ab-leg2 li em { font-style: normal; font-weight: 700; font-size: 11.5px; }
.ab-two.solo .ab-dona { display: grid; grid-template-columns: 140px 1fr; gap: 0 14px; align-items: center; }
.ab-two.solo .ab-dona .ab-card-h { grid-column: 1 / -1; }
.ab-two.solo .ab-dona-c { margin: 0; }
.ab-pm-c { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1px; }
.ab-ring { width: 88px; height: 88px; }
.ab-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.ab-ring text { font: 800 8px Inter, system-ui, sans-serif; fill: #24151d; }
.ab-ring text.s { font-size: 3.8px; font-weight: 500; fill: #6b7280; }
.ab-pm-c b { font-size: 14px; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ab-pm-c b.neg { color: var(--gas); }
.ab-pm-c small { font-size: 11px; color: var(--mute); }
.ab-pm-al { width: 100%; margin-top: 6px; border-radius: 9px; padding: 6px; font-size: 11.5px; font-weight: 600; }
.ab-pm-al.neg { background: #fff1f3; color: #be123c; } .ab-pm-al.pos { background: #ecfdf5; color: #047857; }
.ab-pm-det { margin-top: 8px; font-size: 12px; }
.ab-pm-det summary { cursor: pointer; color: var(--acc); font-weight: 600; text-align: center; list-style: none; }
.ab-pm-det summary::-webkit-details-marker { display: none; }
.ab-pm-det[open] summary { margin-bottom: 6px; }
.ab-pm-det .ab-budget { grid-template-columns: 1fr; gap: 8px; margin-top: 4px; }
.ab-pmini .ab-btn { margin-top: 8px; }
.ab-res .ab-alert { background: #fff; border-color: rgba(255,255,255,.06); margin-bottom: 10px; }
.ab-res .ab-alert h3 { color: #b45309; font-size: 14px; }
.ab-res .ab-alert .ab-list { margin: -2px -6px -6px; }
.ab-res .ab-ag { padding: 8px 6px; gap: 10px; }
.ab-res .ab-ag + .ab-ag { border-top: 1px solid #f0f2f1; border-radius: 0; }
.ab-res .ab-ag-date { width: 36px; height: 38px; }
.ab-res .ab-row-main b { font-size: 13px; }
.ab-res .ab-row-main small, .ab-res .ab-ag-when { font-size: 11px; }
.ab-res .ab-ag-acts .ab-btn { min-height: 30px; padding: 5px 10px; font-size: 12px; border-radius: 9px; }
.ab-ult .ab-list-compact { margin: -4px -6px -6px; }
.ab-ult .ab-row { padding: 8px 6px; gap: 10px; }
.ab-ult .ab-row-ic { width: 30px; height: 30px; border-radius: 9px; font-size: 13px; }
.ab-ult .ab-row-amt { font-size: 13px; }
.ab-res .ab-obj-res { margin: 2px 2px 10px; }
.ab-res .ab-comp { margin: 0 0 10px; }

/* Barra inferior con + en el centro */
.ab-tab-mas { display: none; }
@media (max-width: 860px) {
  .ab-fab { display: none !important; }
  .ab-tabbar { grid-template-columns: repeat(5, 1fr) !important; align-items: end; background: #fff !important; border-top: 1px solid #e7ecea; box-shadow: 0 -6px 20px rgba(0,0,0,.12); }
  .ab-tab-mas { display: flex; flex-direction: column; align-items: center; gap: 2px; border: 0; background: none; font: inherit; cursor: pointer; padding: 0 0 4px; color: var(--mute); }
  .ab-tab-mas span { width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; background: #be185d; color: #fff; display: grid; place-items: center; border: 4px solid #fff; box-shadow: 0 8px 18px rgba(190,24,93,.4); }
  .ab-tab-mas span svg { width: 24px; height: 24px; stroke-width: 2.6; }
  .ab-tab-mas em { font-style: normal; font-size: 11px; }
  .ab-head { padding-bottom: 8px; }
  .ab-main { padding: 8px 12px 20px; }
  .ab-banner { margin: 6px 12px 0; padding: 8px 10px; }
}
@media (min-width: 861px) {
  body.ab-noche .ab-main { padding-top: 16px; }
  .ab-res .ab-hero-v { font-size: 34px; }
}
@media (max-width: 380px) {
  .ab-two { grid-template-columns: 1fr; }
  .ab-hero-v { font-size: 24px; }
}
.ab-head .ab-avatar { display: grid !important; }
.ab-ring text { stroke: none; }
.ab-ring circle { stroke-width: 5 !important; }
.ab-two .ab-presu { order: 0 !important; }
.ab-two { grid-template-columns: 1fr 1fr; }
.ab-two .ab-card-h h3 { white-space: nowrap; }
.ab-per-extra { display: flex; gap: 6px; }
.ab-per-extra select, .ab-per-extra input { min-height: 34px !important; font-size: 13px !important; border-radius: 10px; border: 0; }
.ab-res .ab-card-h a { white-space: nowrap; }
.ab-graf .ab-chart-lg { height: 190px; }
.ab-res .ab-ag-date { height: 36px; }
.ab-res .ab-ag .ab-row-main small { display: none; }
.ab-leg2 li { cursor: pointer; }
.ab-catlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ab-catlist li { padding: 10px 6px; border-radius: 10px; cursor: pointer; }
.ab-catlist li:hover { background: #f6f7f9; }
.ab-catlist-h { display: flex; align-items: center; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.ab-catlist-h i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.ab-catlist-h span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-catlist-h b { font-variant-numeric: tabular-nums; font-size: 13.5px; }
.ab-catlist-h em { font-style: normal; color: var(--mute); font-size: 12px; width: 36px; text-align: right; }
.ab-two > .ab-card, .ab-duo > .ab-k, .ab-res > * { min-width: 0; }
.ab-main { overflow-x: hidden; }
.ab-pm-ver { margin-top: 8px; border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--acc); cursor: pointer; padding: 4px; }
.ab-sheet .ab-budget { grid-template-columns: 1fr; gap: 14px; margin-top: 0; }
.ab-sheet .ab-budget li > small { display: block; margin-top: 4px; font-size: 12px; }
.ab-campo-err { color: #be123c !important; }
.ab-campo-err select { border-color: #e11d48 !important; background-color: #fff1f2 !important; box-shadow: 0 0 0 3px rgba(225,29,72,.15) !important; }
.ab-campo-msg { display: block; font-style: normal; font-size: 12px; font-weight: 600; color: #be123c; margin-top: 5px; }
/* Presupuesto: verde sano → ámbar → naranja → rojo */
.ab-pm-et { display: inline-block; margin: -4px 0 4px; font-size: 10.5px; font-weight: 600; color: var(--mute); background: #f3f5f4; border-radius: 99px; padding: 2px 8px; }
.ab-pm-c b { color: var(--ink); }
.ab-pm-sano .ab-pm-al { background: #ecfdf5; color: #047857; }
.ab-pm-llenando .ab-pm-al { background: #fffbeb; color: #b45309; }
.ab-pm-limite .ab-pm-al { background: #fff7ed; color: #c2410c; }
.ab-pm-mal .ab-pm-al { background: #fff1f3; color: #be123c; }
.ab-pm-mal .ab-pm-c b { color: var(--gas); }
.ab-pm-limite .ab-pm-c b { color: #c2410c; }
.ab-pm-al { line-height: 1.25; }
.ab-pm-inv .ab-pm-c { gap: 4px; padding-top: 4px; }
.ab-pm-ic { width: 52px; height: 52px; border-radius: 50%; background: #fce7f3; display: grid; place-items: center; font-size: 24px; margin-bottom: 4px; }
.ab-pm-inv-t { font-size: 13px !important; margin-top: 0 !important; line-height: 1.25; }
.ab-pm-inv small { line-height: 1.35; margin-bottom: 4px; }
.ab-pm-inv .ab-btn { margin-top: 6px; }
/* Tema de día: fondo claro, mismos componentes */
body.ab-dia { background: #eef3f2; }
.ab-head-t small { color: var(--mute); }
body.ab-noche .ab-head-t small { color: rgba(255,255,255,.7); }
body.ab-dia .ab-k, body.ab-dia .ab-per-seg, body.ab-dia .ab-per-mas, body.ab-dia .ab-res .ab-card { box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 2px 8px rgba(16,24,40,.06); border: 1px solid #e3e9e7; }
body.ab-dia .ab-hero { box-shadow: 0 8px 20px rgba(190,24,93,.25); }
.ab-tema { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ab-tema button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 12px; border: 1.5px solid #e3e9e7; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink2); cursor: pointer; }
.ab-tema button span { font-size: 20px; }
.ab-tema button.on { border-color: var(--acc); background: #fce7f3; color: var(--acc); }

/* =====================================================================
   MODO NOCHE COMPLETO — tarjetas, ventanas y formularios oscuros
   (reglas generadas a partir de los estilos claros + ajustes a mano)
   ===================================================================== */
body.ab-oscuro input, body.ab-oscuro select, body.ab-oscuro textarea { background: #3a1028; border: 1px solid rgba(255,255,255,.09); }
body.ab-oscuro input:disabled { background: #4a1733; }
body.ab-oscuro .ab-btn { background: #3a1028; }
body.ab-oscuro .ab-ghost { border-color: rgba(255,255,255,.09); background: #3a1028; }
body.ab-oscuro .ab-ghost:hover { background: #4a1733; }
body.ab-oscuro .ab-danger-ghost { border-color: rgba(255,255,255,.09); background: #3a1028; }
body.ab-oscuro .ab-danger-ghost:hover { background: rgba(255,185,190,.16); }
body.ab-oscuro .ab-err { background: rgba(255,185,190,.16); color: #ef7597; border: 1px solid rgba(255,255,255,.09); }
body.ab-oscuro .ab-nav-i:hover { background: #4a1733; }
body.ab-oscuro .ab-filters select, body.ab-oscuro .ab-filters input { background-color: #3a1028; }
body.ab-oscuro .ab-delta.up { background: rgba(80,240,135,.16); color: #80e4a6; }
body.ab-oscuro .ab-delta.down { background: rgba(255,120,130,.16); color: #ef7597; }
body.ab-oscuro .ab-row:hover { background: #4a1733; }
body.ab-oscuro .ab-row + .ab-row { border-top: 1px solid rgba(255,255,255,.09); }
body.ab-oscuro .ab-row-ic.ingreso { background: rgba(80,240,135,.16); }
body.ab-oscuro .ab-row-ic.gasto { background: rgba(255,120,130,.16); }
body.ab-oscuro .ab-chip { background: #4a1733; }
body.ab-oscuro .ab-chip button:hover { background: #4a1733; }
body.ab-oscuro .ab-pill.ok { background: rgba(80,240,135,.16); color: #80e4a6; }
body.ab-oscuro .ab-pill.pr { background: rgba(100,190,250,.16); color: #6dc7f7; }
body.ab-oscuro .ab-pill.inf { background: rgba(165,145,250,.16); color: #a67de7; }
body.ab-oscuro .ab-sheet { background: #3a1028; }
body.ab-oscuro .ab-x { background: #4a1733; }
body.ab-oscuro .ab-seg { background: #4a1733; }
body.ab-oscuro .ab-seg input:checked + span { background: #3a1028; }
body.ab-oscuro .ab-bar { background: #4a1733; }
body.ab-oscuro .ab-icon-btn { border: 1px solid rgba(255,255,255,.09); background: #3a1028; }
body.ab-oscuro .ab-icon-btn:hover { background: #4a1733; }
body.ab-oscuro .ab-alert { border-color: rgba(255,255,255,.09); background: rgba(255,235,155,.16); }
body.ab-oscuro .ab-alert h3 { color: #f1a373; }
body.ab-oscuro .ab-ag + .ab-ag { border-top: 1px solid rgba(255,255,255,.09); }
body.ab-oscuro .ab-ag.soon .ab-ag-when { color: #f7a96d; }
body.ab-oscuro .ab-cal-d:hover { background: #4a1733; }
body.ab-oscuro .ab-cal-d.sel u { background: #3a1028; }
body.ab-oscuro .ab-mini li:hover { background: #4a1733; }
body.ab-oscuro .ab-switch span::after { background: #3a1028; }
body.ab-oscuro .ab-cal-d.sel u.t { background: #3a1028; }
body.ab-oscuro .ab-chip-f { border: 1px solid rgba(255,255,255,.09); background: #3a1028; }
body.ab-oscuro .ab-plan { background: #3a1028; }
body.ab-oscuro .ab-cta-nota { background: rgba(255,215,130,.16); color: #ffc965; }
body.ab-oscuro .ab-o::before, body.ab-oscuro .ab-o::after { background: #4a1733; }
body.ab-oscuro .ab-codigo-info { background: rgba(160,245,205,.16); color: #6ff5d0; }
body.ab-oscuro .ab-help { border: 1.5px solid rgba(255,255,255,.09); background: #3a1028; }
body.ab-oscuro .ab-req-inst { background: rgba(255,215,165,.16); border: 1px solid rgba(255,255,255,.09); }
body.ab-oscuro .ab-req-inst p { color: #eb9679; }
body.ab-oscuro .ab-ay-ic.t1 { background: rgba(100,190,250,.16); }
body.ab-oscuro .ab-ay-ic.t2 { background: rgba(250,195,0,.16); }
body.ab-oscuro .ab-ay-ic.t3 { background: rgba(240,135,195,.16); }
body.ab-oscuro .ab-ay-ic.t4 { background: rgba(80,240,135,.16); }
body.ab-oscuro .ab-pill.gr { background: #4a1733; color: #a9bdb8; }
body.ab-oscuro .ab-pill.inf { background: rgba(165,145,250,.16); color: #a67de7; }
body.ab-oscuro .ab-ay-msg.sop { background: #4a1733; }
body.ab-oscuro .ab-rate { border: 1px solid rgba(255,255,255,.09); }
body.ab-oscuro .ab-rate span { color: #f1a373; }
body.ab-oscuro .ab-rate-x { color: #f1a373; }
body.ab-oscuro .ab-v-tl li i { background: #3a1028; }
body.ab-oscuro .ab-v-cafe { background: rgba(255,235,155,.16); border: 1px solid rgba(255,255,255,.09); }
body.ab-oscuro .ab-v-cafe small { color: #eea276; }
body.ab-oscuro { --card: #3a1028; --bg: #3b0a24; --ink: #fbe8f1; --ink2: #ecd3df; --mute: #c9a3b6; --line: rgba(255,255,255,.08); --sh: 0 6px 20px rgba(0,0,0,.25); color: var(--ink); }
body.ab-oscuro .ab-primary { background: var(--acc); color: #fff; border-color: transparent; }
body.ab-oscuro .ab-primary:hover { filter: brightness(1.12); }
body.ab-oscuro { --acc: #db2777; }
body.ab-oscuro a { color: #f472b6; }
body.ab-oscuro .ab-card, body.ab-oscuro .ab-k, body.ab-oscuro .ab-kpi, body.ab-oscuro .ab-res .ab-card { background: #3a1028; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 6px 20px rgba(0,0,0,.22); color: var(--ink); }
body.ab-oscuro .ab-card h3, body.ab-oscuro .ab-k b, body.ab-oscuro .ab-row-main b { color: #fdf2f8; }
body.ab-oscuro .ab-muted, body.ab-oscuro small, body.ab-oscuro .ab-k-l, body.ab-oscuro .ab-row-main small { color: var(--mute); }
body.ab-oscuro .ab-per-seg, body.ab-oscuro .ab-per-mas { background: #3a1028; border: 1px solid rgba(255,255,255,.07); color: var(--ink); }
body.ab-oscuro .ab-per-seg button { color: #b9ccc8; }
body.ab-oscuro .ab-per-seg button.on { background: #db2777; color: #fff; }
body.ab-oscuro .ab-banner { background: rgba(18,160,143,.14); border-color: rgba(79,209,191,.25); color: var(--ink); }
body.ab-oscuro .ab-banner .ab-btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.15); }
body.ab-oscuro .ab-banner-ic { background: rgba(242,166,20,.18); }
body.ab-oscuro .ab-tabbar { background: #2a0b1d !important; border-top: 1px solid rgba(255,255,255,.07); box-shadow: 0 -6px 20px rgba(0,0,0,.35); }
body.ab-oscuro .ab-tabbar .ab-nav-i, body.ab-oscuro .ab-tab-mas { color: #8fa8a3; }
body.ab-oscuro .ab-tabbar .ab-nav-i.on { color: #f472b6; }
body.ab-oscuro .ab-tab-mas span { background: #db2777; border-color: #2a0b1d; box-shadow: 0 8px 20px rgba(18,160,143,.45); }
body.ab-oscuro .ab-side { background: #2a0b1d; border-right-color: rgba(255,255,255,.07); }
body.ab-oscuro .ab-side .ab-logo, body.ab-oscuro .ab-user-t b { color: #fff; }
body.ab-oscuro .ab-nav-i { color: #b9ccc8; }
body.ab-oscuro .ab-nav-i.on { background: rgba(18,160,143,.18); color: #f472b6; }
body.ab-oscuro .ab-side-foot { border-top-color: rgba(255,255,255,.07); }
body.ab-oscuro .ab-ring text { fill: #fdf2f8; }
body.ab-oscuro .ab-ring text.s { fill: #c9a3b6; }
body.ab-oscuro .ab-dona-t b, body.ab-oscuro .ab-pm-c b { color: #fdf2f8; }
body.ab-oscuro .ab-pm-mal .ab-pm-c b { color: #ff7b93; }
body.ab-oscuro .ab-pm-limite .ab-pm-c b { color: #fdab6f; }
body.ab-oscuro .ab-pm-sano .ab-pm-al { background: rgba(16,185,129,.16); color: #5ee6b0; }
body.ab-oscuro .ab-pm-llenando .ab-pm-al { background: rgba(245,158,11,.16); color: #fcd06b; }
body.ab-oscuro .ab-pm-limite .ab-pm-al { background: rgba(249,115,22,.16); color: #fdab6f; }
body.ab-oscuro .ab-pm-mal .ab-pm-al { background: rgba(244,63,94,.18); color: #ff8fa3; }
body.ab-oscuro .ab-pm-et { background: rgba(255,255,255,.07); color: #b9ccc8; }
body.ab-oscuro .ab-pm-ic { background: rgba(18,160,143,.18); }
body.ab-oscuro .ab-k-ic.ing, body.ab-oscuro .ab-row-ic.ingreso { background: rgba(16,185,129,.18); color: #4ee0a6; }
body.ab-oscuro .ab-k-ic.gas, body.ab-oscuro .ab-row-ic.gasto { background: rgba(244,63,94,.18); color: #ff7b93; }
body.ab-oscuro .ab-row-amt.ingreso { color: #4ee0a6; }
body.ab-oscuro .ab-row-amt { color: #fdf2f8; }
body.ab-oscuro .ab-delta.up { background: rgba(16,185,129,.18) !important; color: #4ee0a6 !important; }
body.ab-oscuro .ab-delta.down { background: rgba(244,63,94,.18) !important; color: #ff8fa3 !important; }
body.ab-oscuro .ab-hero .ab-delta { background: rgba(255,255,255,.18) !important; color: #fff !important; }
body.ab-oscuro .ab-res .ab-alert, body.ab-oscuro .ab-alert { background: #3a1028; border-color: rgba(255,255,255,.07); }
body.ab-oscuro .ab-alert h3 { color: #fcc46b; }
body.ab-oscuro .ab-res .ab-ag + .ab-ag, body.ab-oscuro .ab-ult .ab-row + .ab-row { border-top-color: rgba(255,255,255,.07); }
body.ab-oscuro .ab-ag.soon, body.ab-oscuro .ab-ag.late, body.ab-oscuro .ab-ag:hover { background: rgba(255,255,255,.04); }
body.ab-oscuro .ab-ag-date { background: rgba(18,160,143,.18); color: #fdf2f8; }
body.ab-oscuro .ab-ag-date span { color: #f472b6; }
body.ab-oscuro .ab-ag.soon .ab-ag-date, body.ab-oscuro .ab-ag.late .ab-ag-date { background: rgba(245,158,11,.18); }
body.ab-oscuro .ab-ag-when { color: #fcc46b; }
body.ab-oscuro .ab-bar { background: rgba(255,255,255,.08); }
body.ab-oscuro .ab-bar i.ok { background: #db2777; }
body.ab-oscuro .ab-catlist li:hover { background: rgba(255,255,255,.05); }
body.ab-oscuro .ab-tema button { background: #4a1733; border-color: rgba(255,255,255,.08); color: #ecd3df; }
body.ab-oscuro .ab-tema button.on { background: rgba(18,160,143,.2); border-color: #db2777; color: #f472b6; }
body.ab-oscuro .ab-comp { background: #3a1028; border-color: rgba(255,255,255,.07); color: var(--ink); }
body.ab-oscuro .ab-rate { background: #3a1028; color: var(--ink); }
body.ab-oscuro .ab-savebar { background: rgba(11,38,35,.92); border-color: rgba(255,255,255,.08); }
body.ab-oscuro .ab-sheet { background: #3a1028; color: var(--ink); box-shadow: 0 -10px 40px rgba(0,0,0,.45); }
body.ab-oscuro .ab-sheet h3, body.ab-oscuro .ab-sheet b { color: #fdf2f8; }
body.ab-oscuro .ab-modal { color: var(--ink); background: rgba(0,0,0,.55); }
body.ab-oscuro .ab-seg { background: #2a0b1d; }
body.ab-oscuro .ab-seg span { color: #c9a3b6; }
body.ab-oscuro .ab-seg input:checked + span { background: #4a1733; box-shadow: none; color: #ff7b93; }
body.ab-oscuro .ab-sheet.es-ingreso .ab-seg input:checked + span, body.ab-oscuro .es-ingreso .ab-seg input:checked + span { color: #4ee0a6; }
body.ab-oscuro input, body.ab-oscuro select, body.ab-oscuro textarea { background-color: #2a0b1d; border-color: rgba(255,255,255,.12); color: #fbe8f1; color-scheme: dark; }
body.ab-oscuro input::placeholder, body.ab-oscuro textarea::placeholder { color: #6f8a85; }
body.ab-oscuro input:focus, body.ab-oscuro select:focus, body.ab-oscuro textarea:focus { border-color: #f472b6; box-shadow: 0 0 0 3px rgba(79,209,191,.18); }
body.ab-oscuro label { color: #ecd3df; }
body.ab-oscuro .ab-campo-err select { background-color: rgba(244,63,94,.12) !important; }
body.ab-oscuro .ab-campo-err, body.ab-oscuro .ab-campo-msg { color: #ff8fa3 !important; }
body.ab-oscuro .ab-x { background: rgba(255,255,255,.08); color: #fbe8f1; }
body.ab-oscuro .ab-ghost, body.ab-oscuro .ab-btn:not(.ab-primary):not(.ab-link) { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fbe8f1; }
body.ab-oscuro .ab-danger-ghost { color: #ff8fa3 !important; border-color: rgba(244,63,94,.35) !important; }
body.ab-oscuro .ab-table th { color: #c9a3b6; border-bottom-color: rgba(255,255,255,.08); }
body.ab-oscuro .ab-table td { border-bottom-color: rgba(255,255,255,.06); }
body.ab-oscuro .ab-group { color: #c9a3b6; }
body.ab-oscuro .ab-chip-f { background: #3a1028; border-color: rgba(255,255,255,.08); color: #ecd3df; }
body.ab-oscuro .ab-chip-f.on { background: #db2777; color: #fff; border-color: #db2777; }
body.ab-oscuro .ab-empty { color: #c9a3b6; }
body.ab-oscuro .ab-toast { background: #fbe8f1; color: #2a0b1d; }
body.ab-oscuro hr { border-top-color: rgba(255,255,255,.08); }
body.ab-oscuro .ab-welcome h2 { color: #fdf2f8; }
body.ab-oscuro .ab-tabbar .ab-nav-i.on, body.ab-oscuro .ab-tabbar .ab-nav-i:hover { background: none; }
body.ab-oscuro .ab-ag-date span, body.ab-oscuro .ab-ag-date small { color: #f472b6 !important; }
body.ab-oscuro .ab-ag.soon .ab-ag-date span, body.ab-oscuro .ab-ag.late .ab-ag-date span { color: #fcc46b !important; }
.ab-campo-err input { border-color: #e11d48 !important; background-color: #fff1f2 !important; box-shadow: 0 0 0 3px rgba(225,29,72,.15) !important; }
body.ab-oscuro .ab-campo-err input { background-color: rgba(244,63,94,.12) !important; }
.ab-add + .ab-campo-msg { margin-top: 6px; }
/* Completadas hoy */
.ab-hechos { margin-top: 12px; }
.ab-hechos h3 small { font-weight: 500; font-size: 12px; }
.ab-hecho { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-top: 1px solid #f0f2f1; }
.ab-hecho:first-child { border-top: 0; }
.ab-hecho-ic { width: 26px; height: 26px; border-radius: 50%; background: #dcfce7; color: #059669; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.ab-hecho .ab-row-main b { text-decoration: line-through; color: var(--mute); font-weight: 500; }
.ab-hecho .ab-btn { flex: none; }
body.ab-oscuro .ab-hecho { border-top-color: rgba(255,255,255,.07); }
body.ab-oscuro .ab-hecho-ic { background: rgba(16,185,129,.18); color: #4ee0a6; }
.ab-hecho .ab-row-main small { white-space: normal; }

/* Salir desde las pantallas de bienvenida */
.ab-onb-salir{text-align:center;font-size:13px;color:var(--ab-muted,#6b7280);margin:14px auto 0;max-width:460px;word-break:break-word}
.ab-onb-salir .ab-link{font-size:13px;padding:0 2px}
body.ab-oscuro .ab-onb-salir{color:#9aa3af}

.ab-pill.can{background:#fdecec;color:#b42318}
body.ab-oscuro .ab-pill.can{background:rgba(244,63,94,.18);color:#fda4af}

/* Invitado 5 estrellas (acceso de por vida) */
.ab-pill.vip{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#92400e;font-weight:700}
.ab-vip-est{color:#f59e0b;font-size:22px;letter-spacing:4px;margin:4px 0 0;line-height:1}
.ab-vip{text-align:center;padding:8px 4px 4px}
.ab-vip .ab-vip-est{font-size:34px;margin:6px 0 10px;animation:fpVip .9s ease-out both}
.ab-vip h3{margin:0 0 8px;font-size:21px}
.ab-vip p{margin:0 0 10px}
.ab-vip .ab-btn{margin-top:8px}
@keyframes fpVip{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.ab-vip .ab-vip-est{animation:none}}
body.ab-oscuro .ab-pill.vip{background:rgba(245,158,11,.2);color:#fcd34d}

/* Encuesta de salida */
.ab-cancel-l{margin:10px 0 0}
.ab-cancel-l .ab-link{font-size:13px;color:var(--ab-muted,#6b7280);text-decoration:underline}
.ab-sal-ops{display:grid;gap:8px;margin:4px 0 14px}
.ab-sal-op{display:block;cursor:pointer}
.ab-sal-op input{position:absolute;opacity:0;pointer-events:none}
.ab-sal-op span{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1.5px solid #e5e7eb;border-radius:12px;font-size:15px;background:#fff;transition:border-color .15s,background .15s}
.ab-sal-op span i{font-style:normal;font-size:18px;width:24px;text-align:center}
.ab-sal-op input:checked+span{border-color:#be185d;background:#ecfdf5;font-weight:600}
.ab-sal-op input:focus-visible+span{outline:2px solid #be185d;outline-offset:2px}
.ab-sal-c{display:block;font-size:14px;margin-bottom:12px}
.ab-sal-c small{color:var(--ab-muted,#6b7280);font-weight:400}
.ab-sal-c textarea{width:100%;margin-top:6px;box-sizing:border-box}
.ab-sal-omitir{display:block;margin:10px auto 0;font-size:13px}
.ab-sal-fin p{margin:0 0 12px}
.ab-sal-fin .ab-btn{margin-top:8px}
.ab-sal-dato{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;padding:10px 12px}
body.ab-oscuro .ab-sal-op span{background:#1d1218;border-color:#43303a}
body.ab-oscuro .ab-sal-op input:checked+span{background:rgba(16,185,129,.15);border-color:#34d399}
body.ab-oscuro .ab-sal-dato{background:rgba(16,185,129,.1);border-color:rgba(52,211,153,.3)}

.ab-sal-c textarea.ab-campo-err{border-color:#dc2626!important;box-shadow:0 0 0 3px rgba(220,38,38,.15)}
.ab-sal-mal .ab-sal-op span{border-color:#fca5a5}

/* Aviso de versión nueva */

.ab-nueva{position:fixed;left:12px;right:12px;top:calc(12px + env(safe-area-inset-top));z-index:10000;display:flex;align-items:center;gap:12px;justify-content:space-between;background:#0f172a;color:#fff;padding:12px 12px 12px 16px;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.3);max-width:560px;margin:0 auto;animation:fpNueva .35s ease-out}
.ab-nueva-t{display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:1.35}
.ab-nueva-t b{font-size:15px}
.ab-nueva-t span{color:#cbd5e1}
.ab-nueva .ab-btn{white-space:nowrap;flex:none}
@keyframes fpNueva{from{transform:translateY(-20px);opacity:0}to{transform:none;opacity:1}}

/* Administrar suscripción: elegir qué hacer */
.ab-sus-ops{display:grid;gap:10px;margin-top:6px}
.ab-sus-op{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:14px;border:1.5px solid #e5e7eb;border-radius:14px;background:#fff;color:inherit;text-decoration:none;font:inherit;cursor:pointer}
.ab-sus-op:hover{border-color:#be185d}
.ab-sus-op i{font-style:normal;font-size:22px;width:30px;text-align:center}
.ab-sus-op span{display:flex;flex-direction:column;gap:2px}
.ab-sus-op small{color:var(--ab-muted,#6b7280)}
body.ab-oscuro .ab-sus-op{background:#1d1218;border-color:#43303a}
/* v1.9.67 registro más ligero */
.ab-acepto-mini{font-size:12px;align-items:center;margin:2px 0 12px;gap:8px}
.ab-acepto-mini input{width:18px!important;height:18px;flex:0 0 18px;margin:0}
.ab-acepto.ab-falta{color:#dc2626;font-weight:600}
.ab-acepto.ab-falta input{outline:2px solid #dc2626;outline-offset:2px}
.ab-reg-nota{font-size:12.5px;color:var(--ab-muted,#64748b);text-align:center;margin:8px 0 0}
/* v1.9.76 claridad del cobro en la prueba */
.ab-cero{display:flex;flex-direction:column;gap:4px;background:#e8f7f1;border:1.5px solid #10b981;border-radius:14px;padding:12px 14px;margin:6px 0 14px;text-align:left}
.ab-cero b{font-size:18px;color:#047857}
.ab-cero span{font-size:13.5px;line-height:1.45;color:var(--ab-ink,#0f172a)}
.ab-p2-hoy{color:#047857}
/* v1.9.77 pago en la misma pantalla de planes */
.ab-aqui{margin:4px 0 10px;text-align:left}
.ab-aqui-t{display:block;font-size:15px;margin:2px 0 8px;color:var(--ab-ink,#0f172a)}
.ab-aqui .ab-paddle-frame{min-height:120px}
.ab-aqui .ab-co-load{display:flex;align-items:center;gap:10px;justify-content:center;padding:18px 0;color:var(--ab-muted,#64748b)}
/* v1.9.79 pantalla única: plan + pago */
.pu{max-width:1120px;margin:0 auto;padding-block:18px 40px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));color:var(--ink)}
.pu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pu-top-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.pu-seg{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mute)}
.pu-seg svg{width:17px;height:17px;color:var(--acc)}
.pu-steps{list-style:none;margin:0 auto 20px;padding:0;display:flex;align-items:center;justify-content:center;gap:12px;max-width:560px}
.pu-steps li{display:flex;gap:10px;align-items:center}
.pu-steps li i{flex:none;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc)}
.pu-steps li.act i{background:var(--acc);color:#fff}
.pu-steps b{display:block;font-size:14px}.pu-steps small{display:block;font-size:12px;color:var(--mute)}
.pu-steps .pu-linea{flex:1;min-width:24px;height:2px;background:color-mix(in srgb,var(--acc) 40%,transparent)}
.pu-h{text-align:center;font-size:clamp(24px,3.4vw,34px);line-height:1.15;margin:0 0 6px;text-wrap:balance}
.pu-sub{text-align:center;color:var(--mute);margin:0 auto 26px;max-width:620px}
.pu-grid{display:grid;grid-template-columns:2fr 1.05fr;grid-template-areas:"planes pago" "hoy pago";gap:18px;align-items:start}
.pu-planes{grid-area:planes;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch}
.pu-hoy{grid-area:hoy}.pu-pago{grid-area:pago}
.pu-plan{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--card);border:1.5px solid var(--line);border-radius:20px;padding:24px 20px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pu-plan.on{border-color:var(--acc);box-shadow:0 18px 40px -26px color-mix(in srgb,var(--acc) 70%,transparent)}
.pu-top{background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 8%,var(--card)) 0%,var(--card) 60%)}
.pu-cab{display:flex;gap:12px;align-items:center}
.pu-cab input{position:absolute;opacity:0;pointer-events:none}
.pu-r{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:inline-block;position:relative}
.pu-plan.on .pu-r{border-color:var(--acc)}
.pu-plan.on .pu-r::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--acc)}
.pu-cab b{display:block;font-size:18px}.pu-cab small{display:block;color:var(--mute);font-size:13.5px}
.pu-pop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;background:#fbcf33;color:#1f1600;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:7px 14px;border-radius:99px;white-space:nowrap}
.pu-pop svg{width:15px;height:15px;stroke-width:2.2}
.pu-sello{position:absolute;top:16px;right:-8px;transform:rotate(8deg);background:#f43f5e;color:#fff;border-radius:14px;padding:8px 13px;text-align:center;font-weight:700;font-size:13px;line-height:1.05;box-shadow:0 10px 22px -10px rgba(244,63,94,.7)}
.pu-sello b{display:block;font-size:26px;font-weight:800}
.pu-antes{display:flex;flex-direction:column;margin-bottom:-6px}
.pu-antes s{font-weight:800;font-size:19px;color:var(--mute);text-decoration-color:#e11d48;text-decoration-thickness:2px}
.pu-antes small{font-size:12px;color:var(--mute)}
.pu-amt{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pu-amt strong{font-size:40px;font-weight:800;letter-spacing:-.02em;line-height:1}
.pu-amt small{color:var(--mute);font-weight:600}.pu-amt s{color:var(--mute)}
.pu-ahorro{display:flex;gap:10px;align-items:center;background:color-mix(in srgb,#10b981 14%,var(--card));color:#047857;border-radius:12px;padding:10px 12px}
.pu-ahorro b{display:block;font-size:15.5px}.pu-ahorro small{display:block;font-size:12.5px;color:var(--ink2)}
.pu-plan hr{border:0;border-top:1px solid var(--line);margin:2px 0}
.pu-lis{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14.5px}
.pu-lis li{display:flex;gap:9px;align-items:center}
.pu .pu-ok{width:20px;height:20px;stroke:none}
.pu .pu-ok circle{fill:var(--acc)}.pu .pu-ok path{stroke:#fff;stroke-width:2.4;fill:none}
.pu-hoy{display:flex;gap:14px;align-items:center;background:color-mix(in srgb,#10b981 10%,var(--card));border:1.5px solid color-mix(in srgb,#10b981 55%,transparent);border-radius:16px;padding:14px 18px}
.pu-hoy svg{width:30px;height:30px;color:var(--acc)}
.pu-hoy b{display:block;font-size:17px}.pu-hoy em{font-style:normal;color:#047857}
.pu-hoy small{display:block;font-size:13px;color:var(--ink2)}
.pu-pago{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:22px 18px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px)}
.pu-pago h2{font-size:19px;margin:0}.pu-mut{color:var(--mute);margin:2px 0 10px;font-size:14px}
.pu-legal{font-size:12px;color:var(--mute);text-align:center;margin:8px 0 0}
.pu-como{margin-top:22px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 22px}
.pu-como h2{font-size:20px;margin:0 0 14px}
.pu-como ol{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;gap:12px}
.pu-como li{display:flex;gap:10px;align-items:flex-start;flex:1;min-width:0}
.pu-como li i{flex:none;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--acc) 14%,transparent);color:var(--acc);font-style:normal;font-weight:800;display:flex;align-items:center;justify-content:center}
.pu-ib{flex:none;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc);display:flex;align-items:center;justify-content:center}
.pu-como b{display:block;font-size:14.5px}.pu-como small{display:block;font-size:13px;color:var(--ink2);line-height:1.45}
.pu-como .pu-fl{flex:none;color:var(--mute);align-self:center}
.pu-trust{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pu-trust li{display:flex;gap:10px;align-items:flex-start;min-width:0}
.pu-trust svg{width:38px;height:38px;padding:8px;border-radius:50%;background:color-mix(in srgb,var(--acc) 12%,transparent);color:var(--acc)}
.pu-trust b{display:block;font-size:13.5px}.pu-trust small{display:block;font-size:12.5px;color:var(--mute)}
.pu-pie{margin-top:22px;text-align:center;color:var(--mute);font-size:13px}
@media (max-width:900px){
  .pu-grid{grid-template-columns:1fr;grid-template-areas:"planes" "hoy" "res" "pago"}
  .pu-planes{grid-template-columns:1fr}
  .pu-pago{position:static}
  .pu-como ol{flex-direction:column}.pu-como .pu-fl{display:none}
  .pu-trust{grid-template-columns:1fr 1fr}
  .pu-steps small{display:none}
}
/* v1.9.80 pantalla única: más compacta y legible en el celular */
.pu-plan,.pu-plan b,.pu-amt strong,.pu-lis li{color:var(--ink)}
.pu-plan .pu-cab small,.pu-amt small{color:var(--mute)}
@media (max-width:900px){
  .pu{padding-block:10px 28px}
  .pu-top-bar{margin-bottom:10px}
  .pu-seg{font-size:12px}
  .pu-steps{margin-bottom:12px}
  .pu-steps li i{width:28px;height:28px;font-size:13px}
  .pu-steps b{font-size:13px}
  .pu-h{font-size:23px}
  .pu-sub{font-size:14px;margin-bottom:22px}
  .pu-grid{gap:12px}
  .pu-planes{gap:18px}
  .pu-top{order:-1}
  .pu-plan{padding:16px 14px;gap:8px;border-radius:16px}
  .pu-plan .pu-lis,.pu-plan hr{display:none}
  .pu-cab b{font-size:16px}.pu-cab small{font-size:12.5px}
  .pu-amt strong{font-size:30px}
  .pu-antes s{font-size:15px}
  .pu-ahorro{padding:6px 10px;align-self:flex-start}
  .pu-ahorro b{font-size:13.5px}
  .pu-sello{top:12px;right:-6px;padding:6px 10px;font-size:11px}
  .pu-sello b{font-size:20px}
  .pu-hoy{padding:10px 12px;gap:10px}
  .pu-hoy svg{width:24px;height:24px}
  .pu-hoy b{font-size:15.5px}.pu-hoy small{font-size:12.5px}
  .pu-pago{padding:14px 6px 6px;border-radius:16px}
  .pu-pago h2,.pu-pago .pu-mut{padding:0 8px}
}
/* v1.9.81 ahorro visible también en el celular */
.pu-dia{font-size:13.5px;font-weight:600;color:var(--acc)}
.pu-ahorro small strong{color:#047857}
@media (max-width:900px){.pu-ahorro{align-self:stretch;padding:9px 12px}.pu-ahorro svg{width:24px;height:24px}.pu-ahorro small{font-size:12.5px}.pu-antes small{font-size:11.5px}}
/* v1.9.82 precio anterior más visible */
.pu-antes s{font-size:22px;color:#be123c;text-decoration-color:#e11d48;text-decoration-thickness:2.5px;opacity:.9}
@media (max-width:900px){.pu-antes s{font-size:20px}}
/* v1.9.88 acceso claro a crear cuenta desde Iniciar sesión */
.ab-nuevo{margin:6px 0 10px;border:1.5px solid var(--acc);color:var(--acc)!important;text-decoration:none!important;font-weight:600}
.ab-nuevo{display:block!important;text-align:center}.ab-nuevo b{margin-left:4px}

/* ---------- v1.9.89 · Mis deudas ---------- */
.ab-deu-res { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink); margin-bottom: 14px; }
.ab-deu-res:hover { border-color: var(--acc); }
.ab-deu-res > span:not(.ab-deu-res-ic) { flex: 1; display: grid; gap: 3px; min-width: 0; }
.ab-deu-res small { color: var(--mute); font-size: 12.5px; line-height: 1.35; }
.ab-deu-res b { font-size: 17px; }
.ab-deu-res b i { font-style: normal; font-size: 12px; color: var(--mute); font-weight: 500; }
.ab-deu-res em { font-style: normal; font-size: 24px; color: var(--mute); }
.ab-deu-res-ic { width: 44px; height: 44px; border-radius: 12px; background: #fff1f2; display: grid; place-items: center; font-size: 22px; flex: none; }
.ab-deu-res-cta { border: 1.5px dashed #fca5a5; background: #fffafa; }
.ab-deu-mark { display: grid; place-items: center; font-size: 28px; background: #fff1f2; }
.ab-deu-bar { height: 8px; border-radius: 99px; background: #e5e7eb; overflow: hidden; margin: 6px 0 2px; }
.ab-deu-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--acc), #ec4899); transition: width .4s; }
.ab-deu-bar-lg { height: 12px; margin: 14px 0 12px; }
.ab-deu-hero { margin-bottom: 14px; }
.ab-deu-hero-t { display: grid; gap: 2px; }
.ab-deu-hero-t small { color: var(--mute); font-size: 13px; }
.ab-deu-hero-t b { font-size: 32px; letter-spacing: -.02em; color: var(--gas); }
.ab-deu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.ab-deu-kpis div { background: var(--bg); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.ab-deu-kpis small { color: var(--mute); font-size: 12px; }
.ab-deu-kpis b { font-size: 16px; }
.ab-deu-kpis b.neg { color: var(--gas); }
.ab-deu-libre { margin: 12px 0 0; font-size: 14.5px; }
.ab-deu-orden { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 18px; padding: 14px 16px; }
.ab-deu-orden > b { flex-basis: 100%; font-size: 14px; }
.ab-deu-orden p { flex-basis: 100%; margin: 0; }
.ab-deu-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ab-deu { position: relative; display: grid; gap: 8px; align-content: start; }
.ab-deu-pagada { opacity: .75; }
.ab-deu-badge { position: absolute; top: -10px; right: 14px; background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.ab-deu-h { display: flex; align-items: center; gap: 10px; }
.ab-deu-h > div { flex: 1; display: grid; min-width: 0; }
.ab-deu-h b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-deu-h small { color: var(--mute); font-size: 12.5px; }
.ab-deu-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--bg); display: grid; place-items: center; font-size: 19px; flex: none; }
.ab-deu-edit { background: none; border: 1px solid var(--line); border-radius: 9px; width: 34px; height: 34px; cursor: pointer; color: var(--ink2); font-size: 15px; }
.ab-deu-saldo { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ab-deu-saldo small { color: var(--mute); font-size: 12.5px; }
.ab-deu-saldo b { font-size: 22px; }
.ab-deu-det { margin: 0; color: var(--ink2); font-size: 13px; }
.ab-deu-fin, .ab-deu-warn, .ab-deu-ok { margin: 0; font-size: 13px; padding: 8px 10px; border-radius: 9px; }
.ab-deu-fin { background: #ecfdf5; color: #065f46; }
.ab-deu-warn { background: #fef2f2; color: #991b1b; }
.ab-deu-ok { background: #ecfdf5; color: #065f46; font-weight: 700; font-size: 15px; }
.ab-deu-hist summary { cursor: pointer; font-size: 13px; color: var(--acc); font-weight: 600; }
.ab-deu-hist ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; }
.ab-deu-hist li { display: flex; align-items: center; gap: 8px; font-size: 13px; border-top: 1px solid var(--line); padding-top: 6px; }
.ab-deu-hist li span { flex: 1; color: var(--ink2); }
@media (max-width: 600px) {
  .ab-deu-hero-t b { font-size: 28px; }
  .ab-deu-lista { grid-template-columns: 1fr; }
}
body.ab-oscuro .ab-deu-res-ic, body.ab-oscuro .ab-deu-mark { background: rgba(244,63,94,.15); }
body.ab-oscuro .ab-deu-res-cta { background: transparent; border-color: rgba(244,63,94,.4); }
body.ab-oscuro .ab-deu-bar { background: rgba(255,255,255,.1); }
body.ab-oscuro .ab-deu-kpis div, body.ab-oscuro .ab-deu-ic { background: rgba(255,255,255,.06); }
body.ab-oscuro .ab-deu-fin, body.ab-oscuro .ab-deu-ok { background: rgba(16,185,129,.15); color: #6ee7b7; }
body.ab-oscuro .ab-deu-warn { background: rgba(244,63,94,.15); color: #fda4af; }
body.ab-oscuro .ab-deu-res { color: inherit; }
/* Mis deudas sencilla: secciones por tipo */
.ab-deu-sec { margin: 0 0 18px; }
.ab-deu-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 2px 10px; color: var(--ink); }
body.ab-noche .ab-deu-sec-h { color: #fff; }
.ab-deu-sec-h h3 { font-size: 16px; color: inherit; }
.ab-deu-sec-h b { font-size: 15px; }
.ab-seg.ab-deu-seg { grid-template-columns: 1fr 1fr; }
.ab-deu-seg span { font-size: 12.5px; text-align: center; padding-left: 4px; padding-right: 4px; }
.ab-deu-hero-t small:last-child { margin-top: 2px; }
/* Encuesta de cancelación: ¿te avisamos si lo resolvemos? */
.ab-sal-avisar { display: grid; gap: 8px; margin: 4px 0 12px; font-size: 14px; }
.ab-sal-sn { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-sal-sn label { margin: 0; position: relative; }
.ab-sal-sn input { position: absolute; opacity: 0; pointer-events: none; }
.ab-sal-sn span { display: block; text-align: center; padding: 10px; border: 1.5px solid var(--line); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.ab-sal-sn input:checked + span { border-color: var(--acc); background: #fdf2f8; color: var(--acc); }
body.ab-oscuro .ab-sal-sn input:checked + span { background: rgba(20,184,166,.15); color: #f9a8d4; }
.ab-aj-acceso .ab-deu-res-ic { background: var(--bg); }
body.ab-oscuro .ab-aj-acceso .ab-deu-res-ic { background: rgba(255,255,255,.06); }
/* Pagos con capital e intereses */
.ab-deu-tot { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-deu-tot div { background: var(--bg); border-radius: 10px; padding: 8px 10px; display: grid; gap: 1px; }
.ab-deu-tot small { color: var(--mute); font-size: 11.5px; line-height: 1.3; }
.ab-deu-tot b { font-size: 14.5px; }
.ab-deu-tot b.neg, .ab-deu-int b { color: var(--gas); }
.ab-deu-int { margin: 10px 0 0; font-size: 14px; }
.ab-deu-hist li span small { display: block; color: var(--mute); font-size: 11.5px; }
.ab-pago-tot { background: var(--bg); border-radius: 10px; padding: 10px 12px; font-size: 14.5px; }
.ab-pago-tot b { font-size: 17px; }
body.ab-oscuro .ab-deu-tot div, body.ab-oscuro .ab-pago-tot { background: rgba(255,255,255,.06); }
.ab-deu-tip { margin: -2px 2px 12px; font-size: 13px; line-height: 1.45; color: var(--ink2); background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 9px 12px; }
.ab-deu-tip-f { margin: 0; }
body.ab-oscuro .ab-deu-tip { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.3); color: #fde68a; }

/* Resumen en computadora: dos columnas que usan todo el ancho */
.ab-res-a > *, .ab-res-b > * { margin-bottom: 10px; }
.ab-res > .ab-deu-res { margin-bottom: 10px; }
@media (min-width: 1180px) {
  .ab-res { max-width: 1240px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .ab-res > .ab-deu-res, .ab-res > .ab-welcome { grid-column: 1 / -1; }
  .ab-res-a > *, .ab-res-b > * { margin-bottom: 14px; }
}
.ab-res > .ab-res-a, .ab-res > .ab-res-b { margin-bottom: 0; }

.ab-xlsx { background: #fff; color: #be185d; font-weight: 700; }
body.ab-noche .ab-xlsx { background: rgba(255,255,255,.08); color: #f9a8d4; }

/* Mis metas */
.ab-meta-barra { height: 9px; border-radius: 99px; background: #e6f3f0; overflow: hidden; margin: 6px 0 2px; }
.ab-meta-barra i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #ec4899, #be185d); transition: width .4s; }
.ab-meta-ok .ab-meta-barra i { background: linear-gradient(90deg, #f59e0b, #22c55e); }
.ab-meta-res .ab-meta-barra { max-width: 260px; }
.ab-meta-num { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.ab-meta-num b { font-size: 22px; letter-spacing: -.02em; }
.ab-meta-num span { color: var(--mute); font-size: 13px; }
.ab-meta-plan { margin: 8px 0; font-size: 13.5px; color: var(--ink); }
.ab-meta-acc { display: flex; gap: 8px; flex-wrap: wrap; }
.ab-meta-acc .ab-btn { flex: 1; min-width: 140px; }
.ab-meta-emojis { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-meta-emojis label { cursor: pointer; }
.ab-meta-emojis input { position: absolute; opacity: 0; pointer-events: none; }
.ab-meta-emojis span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 2px solid #e5e7eb; font-size: 20px; background: #fff; }
.ab-meta-emojis input:checked + span { border-color: var(--acc); background: #e6f6f2; }
.ab-meta-hero { background: linear-gradient(135deg, #e6f6f2, #fff); }
.ab-meta-hero .ab-deu-hero-t b, .ab-meta-hero .ab-deu-int b { color: #be185d !important; }

.ab-plan-tipo { margin: 0 0 6px; font-size: 15px; }
.ab-plan-tipo b { color: var(--acc); }

.pu-billetera{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:#fff7ed;border:1px solid #fdba74;color:#7c2d12;font-size:14px;line-height:1.4}

/* v2.1.9 pantalla de pago en una columna, como el diseño: planes → Hoy pagas → Resumen de tu compra → Método de pago */
.pu{max-width:720px}
.pu-grid{grid-template-columns:1fr;grid-template-areas:"planes" "hoy" "res" "pago"}
.pu-pago{position:static}
.pu-res{grid-area:res;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 20px}
.pu-res-h,.pu-pago-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.pu-res h2{font-size:19px;margin:0}
.pu-res-cambiar{background:none;border:0;color:var(--acc);font-weight:600;font-size:14px;cursor:pointer;padding:4px 0}
.pu-res dl{margin:10px 0 0}
.pu-res dl div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px}
.pu-res dt{color:var(--ink2)}.pu-res dd{margin:0;text-align:right}
.pu-res-hoy dd{color:#047857;font-weight:700}
.pu-res-tip dt,.pu-res-tip dd{color:#047857}
.pu-pago-h .pu-seg{font-size:12.5px;color:var(--mute);display:inline-flex;align-items:center;gap:5px}
.pu-pago-h .pu-seg svg{width:14px;height:14px}
.pu-nota{text-align:center;color:var(--mute);font-size:13px;margin:6px 8px 4px}
.pu-flex{background:color-mix(in srgb,#64748b 10%,var(--card));color:var(--ink)}
.pu-flex svg{color:#475569}.pu-flex small strong{color:#047857}
.pu-plan .pu-lis,.pu-plan hr{display:none}
@media (min-width:600px){.pu-planes{grid-template-columns:1fr 1fr}}
.pu-top{order:-1}
@media (max-width:900px){.pu-res{padding:14px 14px;border-radius:16px}.pu-res h2{font-size:16px}.pu-res dl div{font-size:13.5px;padding:8px 0}.pu-flex{align-self:stretch;padding:9px 12px}}

.pu-dudas{display:block;margin:0 0 10px;font-size:14px;color:var(--ink2)}.pu-dudas a{color:var(--acc);font-weight:600}

a.ab-logo{text-decoration:none;color:inherit}

.pu-correo{margin:4px 0 8px;padding:9px 12px;border-radius:12px;background:color-mix(in srgb,#0ea5e9 9%,var(--card));color:var(--ink);font-size:13.5px;line-height:1.4;word-break:break-word}
@media (max-width:900px){.pu-correo{margin:4px 8px 8px}}

.pu-res-ren{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;cursor:pointer}.pu-res-ren dd{margin:0;text-align:right}.pu-res-mas{color:var(--acc);font-weight:700;margin-left:4px}
.pu-res-info{margin:2px 0 6px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--acc) 8%,var(--card));font-size:14px;line-height:1.45;color:var(--ink)}
@media (max-width:900px){.pu-res-ren{font-size:13.5px;padding:8px 0}}

.ab-subir{margin-top:14px;padding:14px 16px;border-radius:16px;background:color-mix(in srgb,#10b981 10%,var(--card));border:1.5px solid color-mix(in srgb,#10b981 45%,transparent);display:grid;gap:8px}.ab-subir b{font-size:15.5px}.ab-subir small{color:var(--ink2);font-size:13.5px;line-height:1.4}.ab-subir .ab-btn{justify-self:start}

/* 2.1.33: reloj de la oferta en la pantalla de pago */
.pu-oferta { margin: 0 0 16px; }
/* 2.1.34: versión compacta del reloj en la pantalla de pago (mismo contenido, menos alto) */
.pu-oferta .ab-of { padding: 10px 12px; gap: 6px; border-radius: 14px; box-shadow: 0 6px 16px rgba(194,65,12,.22); }
.pu-oferta .ab-of-t { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pu-oferta .ab-of-t span { font-size: 11px; padding: 3px 8px; }
.pu-oferta .ab-of-t b { display: inline; font-size: 14.5px; margin: 0; }
.pu-oferta .ab-of-clock { grid-template-columns: repeat(4, auto); justify-content: center; gap: 6px; }
.pu-oferta .ab-of-clock span { min-width: 48px; padding: 4px 6px; font-size: 9px; border-radius: 8px; gap: 1px; }
.pu-oferta .ab-of-clock b { font-size: 17px; }
.pu-oferta .ab-of small { font-size: 11.5px; opacity: .9; }
/* 2.1.35: pantalla de pago más liviana. Se quitan las 4 garantías de abajo (ya se dicen arriba y en el pago)
   y las tarjetas de los planes son más compactas. Mismo contenido y mismos precios. */
.pu-trust{display:none}
.pu-sub{margin-bottom:18px}
.pu-planes{gap:14px}
.pu-plan{gap:8px;padding:16px 14px 14px;border-radius:16px}
.pu-cab b{font-size:16px}.pu-cab small{font-size:12.5px}
.pu-pop{top:-12px;font-size:11px;padding:5px 11px}
.pu-pop svg{width:13px;height:13px}
.pu-sello{top:10px;right:-6px;padding:5px 9px;font-size:11px;border-radius:11px}
.pu-sello b{font-size:19px}
.pu-antes{margin-bottom:-4px}
.pu-antes s{font-size:15px}.pu-antes small{font-size:11.5px}
.pu-amt strong{font-size:30px}
.pu-amt small{font-size:12.5px}
.pu-ahorro{padding:8px 10px;gap:8px;border-radius:10px}
.pu-ahorro svg{width:20px;height:20px}
.pu-ahorro b{font-size:14px}.pu-ahorro small{font-size:12px}
.pu-hoy{padding:10px 14px;gap:10px}
.pu-hoy svg{width:24px;height:24px}
.pu-hoy b{font-size:15.5px}.pu-hoy small{font-size:12.5px}

/* 2.1.38: qué obtienes, en la pantalla de pago (compacto, a lo ancho debajo de los planes) */
.pu-inc{grid-column:1/-1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.pu-inc>b{display:block;font-size:13.5px;margin-bottom:8px}
.pu-inc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13px;color:var(--ink2)}
.pu-inc li{display:flex;gap:6px;align-items:center;line-height:1.3}
.pu-inc .pu-ok{width:16px;height:16px;flex:none}
.pu-cab input{left:0;top:0;width:1px;height:1px;margin:0}

/* =========================================================
   AgenBella · pantallas del salón
   ========================================================= */
:root { --acc: #be185d; --rosa: #fdf2f8; --rosa2: #fce7f3; }
h1, h2, .ab-head h1, .ab-onb h1 { font-family: Fraunces, Georgia, serif; letter-spacing: -.01em; }
.ab-card h3 { font-family: Inter, system-ui, sans-serif; }
.ab-main > * + * { margin-top: 14px; }
.ab-input { width: 100%; }
.ab-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab-row2 > * { min-width: 0; }
.ab-field { display: block; margin: 12px 0 0; }
.ab-field > span, .ab-lbl { display: block; font-size: 13px; font-weight: 500; color: var(--ink2); margin-bottom: 6px; }
.ab-form label small, .ab-field small { font-weight: 400; color: var(--mute); display: block; margin-top: 2px; }
.ab-form { display: grid; gap: 12px; }
.ab-h4 { font-size: 14px; margin: 16px 0 8px; }
.ab-x2 { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink2); font-size: 12px; cursor: pointer; display: inline-grid; place-items: center; }
.ab-x2:disabled { opacity: .35; cursor: default; }
.ab-danger { background: #be123c; color: #fff; }
.ab-vacio { text-align: center; padding: 22px 10px; color: var(--ink2); }
.ab-vacio > span { font-size: 34px; display: block; }
.ab-vacio p { margin: 6px 0 12px; }
.ab-loading-s { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--acc); animation: fpspin .8s linear infinite; margin: 6px 0; }

/* Enlace de reservas */
.ab-link-card { background: linear-gradient(135deg, #fff 0%, var(--rosa) 100%); border-color: #fbcfe8; }
.ab-link-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ab-link-top small { display: block; color: var(--mute); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ab-link-top b { display: block; font-size: 17px; color: var(--acc); word-break: break-all; }
.ab-link-acc { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ab-link-acc .ab-btn { flex: 1 1 auto; }
.ab-link-acc .ab-btn svg { width: 16px; height: 16px; }
.ab-link-mini .ab-link-top b { font-size: 15px; }
.ab-link-box { padding: 14px; border-radius: 14px; background: var(--rosa); border: 1px dashed #f9a8d4; text-align: center; word-break: break-all; color: var(--acc); font-size: 17px; margin: 4px 0 4px; }

/* Lista de pasos */
.ab-check-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.ab-check-h span { font-size: 13px; color: var(--mute); font-weight: 600; }
.ab-checklist { list-style: none; margin: 12px 0 0; padding: 0; }
.ab-checklist li button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 2px; background: none; border: 0; border-top: 1px solid var(--line); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.ab-checklist li:first-child button { border-top: 0; }
.ab-checklist i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #f9a8d4; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; flex: none; }
.ab-checklist li.ok i { background: var(--acc); border-color: var(--acc); color: #fff; }
.ab-checklist li.ok span { color: var(--mute); text-decoration: line-through; }
.ab-checklist span { flex: 1; font-size: 14.5px; }
.ab-checklist em { font-style: normal; color: var(--acc); font-size: 20px; }

/* Números */
.ab-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ab-stats button { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 8px; text-align: center; font: inherit; color: var(--ink); cursor: pointer; box-shadow: var(--sh); }
.ab-stats b { display: block; font-size: 26px; font-family: Fraunces, Georgia, serif; color: var(--acc); line-height: 1.1; }
.ab-stats span { font-size: 12.5px; color: var(--mute); }

/* Próxima clienta */
.ab-prox { cursor: pointer; }
.ab-prox > small { color: var(--mute); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ab-prox-c { display: flex; align-items: center; gap: 12px; margin: 10px 0 0; }
.ab-prox-c > div:nth-child(2) { flex: 1; min-width: 0; }
.ab-prox-c b { display: block; font-size: 16px; }
.ab-prox-c span { display: block; color: var(--mute); font-size: 13.5px; }
.ab-prox-h { text-align: right; }
.ab-prox-h b { color: var(--acc); }
.ab-wa { margin-top: 12px; }
.ab-wa svg { width: 16px; height: 16px; stroke: none; }
.ab-quick2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Citas */
.ab-citas { display: grid; gap: 8px; }
.ab-cita { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 12px; border-radius: 14px; border: 1px solid var(--line); border-left: 4px solid var(--acc); background: var(--card); font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: transform .1s, box-shadow .15s; }
.ab-cita:hover { box-shadow: 0 6px 16px -8px rgba(190,24,93,.35); }
.ab-cita:active { transform: scale(.99); }
.ab-cita-h { width: 74px; flex: none; line-height: 1.2; }
.ab-cita-h b { display: block; font-size: 14px; }
.ab-cita-h small { display: block; font-size: 11.5px; color: var(--mute); }
.ab-cita-c { flex: 1; min-width: 0; }
.ab-cita-c b { display: block; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-cita-c small { display: block; color: var(--mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-web { font-style: normal; font-size: 10.5px; font-weight: 700; background: var(--rosa2); color: var(--acc); padding: 2px 7px; border-radius: 99px; vertical-align: 2px; margin-left: 4px; }
.ab-cita.e-completada { border-left-color: #10b981; }
.ab-cita.e-no_vino { border-left-color: #f59e0b; }
.ab-cita.e-cancelada { border-left-color: #cbd5e1; opacity: .6; }
.ab-cita.e-cancelada .ab-cita-c b { text-decoration: line-through; }
.ab-cita.bloq { border-left-color: #94a3b8; background: repeating-linear-gradient(-45deg, var(--card), var(--card) 8px, rgba(148,163,184,.08) 8px, rgba(148,163,184,.08) 16px); }
.ab-cita .ab-pill { margin: 0; }
.ab-pill.e-completada { background: #dcfce7; color: #166534; }
.ab-pill.e-no_vino { background: #fef3c7; color: #92400e; }
.ab-pill.e-cancelada { background: #f1f5f9; color: #475569; }
.ab-pill.e-confirmada { background: var(--rosa2); color: var(--acc); }
.ab-cita-det { display: grid; gap: 0; border-radius: 14px; background: var(--rosa); padding: 4px 14px; }
.ab-cita-det > div { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed #f3d1e1; font-size: 14px; }
.ab-cita-det > div:last-child { border: 0; }
.ab-cita-det span { color: var(--mute); }
.ab-cita-det b { text-align: right; font-weight: 600; word-break: break-word; }
.ab-cita-det .ab-pill { margin: 0; }
.ab-cita-cont, .ab-cita-est, .ab-cita-mas { display: flex; gap: 8px; flex-wrap: wrap; }
.ab-cita-cont .ab-btn, .ab-cita-est .ab-btn, .ab-cita-mas .ab-btn { flex: 1 1 140px; }
.ab-cita-cont svg { width: 16px; height: 16px; stroke: none; fill: currentColor; }

/* Agenda */
.ab-ag-top { display: grid; gap: 10px; }
.ab-ag-modos { display: inline-flex; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 4px; gap: 4px; width: 100%; max-width: 360px; }
.ab-ag-modos button { flex: 1; border: 0; background: none; padding: 8px 10px; border-radius: 9px; font: inherit; font-weight: 600; font-size: 14px; color: var(--ink2); cursor: pointer; }
.ab-ag-modos button.on { background: var(--acc); color: #fff; }
.ab-ag-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ab-ag-nav b { font-size: 16px; text-align: center; flex: 1; }
.ab-ag-nav .ab-btn { font-size: 20px; width: 42px; padding: 0; }
.ab-ag-acc { display: flex; gap: 8px; justify-content: flex-end; }
.ab-ag-horario { margin: 0 0 12px; }
.ab-ag-canc { margin-top: 12px; }
.ab-semana { display: grid; gap: 14px; }
.ab-sem-dia.hoy .ab-sem-h b { color: var(--acc); }
.ab-sem-h { display: flex; justify-content: space-between; width: 100%; background: none; border: 0; padding: 4px 2px 8px; font: inherit; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.ab-sem-h span { color: var(--mute); font-size: 13px; }
.ab-cal-sem, .ab-cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.ab-cal-sem span { font-size: 12px; color: var(--mute); font-weight: 600; padding: 4px 0; }
.ab-cal-d { aspect-ratio: 1; border-radius: 12px; border: 1px solid transparent; background: none; font: inherit; color: var(--ink); cursor: pointer; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0; }
.ab-cal-d:hover { background: var(--rosa); }
.ab-cal-d b { font-weight: 500; font-size: 14px; }
.ab-cal-d.con { background: var(--rosa); }
.ab-cal-d.con b { font-weight: 700; }
.ab-cal-d i { font-style: normal; font-size: 10px; font-weight: 700; color: #fff; background: var(--acc); border-radius: 99px; min-width: 18px; padding: 0 5px; line-height: 15px; text-align: center; }
.ab-cal-d.hoy { border-color: var(--acc); }

/* Formulario de cita */
.ab-horas { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-hora-b { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; color: var(--ink); }
.ab-hora-b.on { background: var(--acc); border-color: var(--acc); color: #fff; }
.ab-hora-otra { display: flex !important; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.ab-hora-otra input { width: auto; margin: 0; }

/* Servicios */
.ab-toolbar { display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.ab-servs { display: grid; gap: 8px; }
.ab-serv { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 10px 10px 14px; box-shadow: var(--sh); }
.ab-serv.off { opacity: .6; }
.ab-serv-c { flex: 1; min-width: 0; background: none; border: 0; text-align: left; font: inherit; color: var(--ink); cursor: pointer; padding: 4px 0; }
.ab-serv-c b { display: block; font-size: 15px; }
.ab-serv-c small { display: block; color: var(--mute); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-serv-p { text-align: right; font-weight: 700; white-space: nowrap; }
.ab-serv-p small { display: block; font-weight: 500; color: var(--mute); font-size: 11.5px; }
.ab-serv-p .ab-off { color: #b45309; }
.ab-serv-o { display: grid; gap: 4px; }

/* Clientas */
.ab-clis { display: grid; gap: 6px; }
.ab-cli { display: flex; align-items: center; gap: 12px; width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.ab-cli > span { flex: 1; min-width: 0; }
.ab-cli b { display: block; font-size: 15px; }
.ab-cli small { display: block; color: var(--mute); font-size: 13px; }
.ab-cli em { font-style: normal; text-align: right; font-size: 12px; color: var(--mute); }
.ab-cli em b { font-size: 16px; color: var(--acc); }

/* Mi salón */
.ab-salon-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ab-salon-acc .ab-deu-res { margin: 0; }
.ab-portada { position: relative; height: 150px; border-radius: 14px; background: linear-gradient(135deg, #be185d, #f9a8d4) center/cover; margin-top: 10px; }
.ab-subir-f { position: absolute; right: 10px; top: 10px; background: rgba(255,255,255,.92); cursor: pointer; }
.ab-logo-c { position: absolute; left: 16px; bottom: -36px; width: 80px; height: 80px; border-radius: 50%; border: 4px solid #fff; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.15); display: grid; place-items: center; }
.ab-logo-c img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.ab-logo-c span { font: 700 26px Fraunces, Georgia, serif; color: var(--acc); }
.ab-logo-b { position: absolute; right: -4px; bottom: -2px; width: 30px; height: 30px; border-radius: 50%; background: var(--acc); color: #fff; display: grid; place-items: center; cursor: pointer; font-size: 14px; border: 2px solid #fff; margin: 0; }
.ab-galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ab-gal-f { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--rosa); }
.ab-gal-f img { width: 100%; height: 100%; object-fit: cover; }
.ab-gal-acc { position: absolute; inset: auto 0 0 0; display: flex; justify-content: space-between; padding: 4px; background: linear-gradient(transparent, rgba(0,0,0,.5)); }
.ab-gal-acc button { width: 30px; height: 30px; border-radius: 8px; border: 0; background: rgba(255,255,255,.9); cursor: pointer; font-size: 13px; color: #24151d; }
.ab-gal-acc button:disabled { opacity: .3; }
.ab-gal-acc button[data-seguro="1"] { width: auto; padding: 0 8px; background: #be123c; color: #fff; font-weight: 700; }
.ab-gal-add { aspect-ratio: 1; border-radius: 12px; border: 2px dashed #f9a8d4; background: var(--rosa); display: grid; place-content: center; text-align: center; cursor: pointer; color: var(--acc); margin: 0; }
.ab-gal-add span { display: grid; place-items: center; }
.ab-gal-add small { font-size: 12px; font-weight: 600; color: var(--acc); }
.ab-colores { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-colores button { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--line); cursor: pointer; }
.ab-colores button.on { box-shadow: 0 0 0 2px var(--ink); }

/* Enlace (slug) */
.ab-slug { display: flex; align-items: stretch; border: 1px solid #e2cfd9; border-radius: 10px; overflow: hidden; background: #fff; margin-top: 6px; }
.ab-slug em { font-style: normal; display: flex; align-items: center; padding: 0 4px 0 12px; color: var(--mute); font-size: 14px; background: var(--rosa); white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.ab-slug input { border: 0; border-radius: 0; margin: 0 !important; min-width: 0; box-shadow: none !important; }
.ab-slug-msg { display: block; margin-top: 6px; font-size: 12.5px; color: var(--mute); }
.ab-slug-msg.ok { color: #047857; }
.ab-slug-msg.no { color: #be123c; }

/* Horario */
.ab-hor-d { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.ab-hor-d:first-of-type { border-top: 0; }
.ab-hor-d .ab-switch { margin: 0; width: 140px; }
.ab-hor-r { display: grid; gap: 6px; flex: 1; min-width: 200px; }
.ab-hor-t { display: flex; align-items: center; gap: 6px; }
.ab-hor-t input { width: auto; flex: 1; min-width: 0; }
.ab-hor-t span { color: var(--mute); font-size: 13px; }
.ab-chips-d { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ab-chips-d .ab-chip-o button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; padding: 0 0 0 4px; }

/* Primer paso */
.ab-tipos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ab-tipo { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink); cursor: pointer; }
.ab-tipo i { font-style: normal; font-size: 22px; }
.ab-tipo.on { border-color: var(--acc); background: var(--rosa); color: var(--acc); }
.ab-arr-servs { display: grid; gap: 8px; margin: 12px 0; }
.ab-arr-serv { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; opacity: .65; }
.ab-arr-serv.on { opacity: 1; border-color: #f9a8d4; background: var(--rosa); }
.ab-arr-serv-c { flex: 1; min-width: 0; display: grid; gap: 8px; }
.ab-arr-n { font-weight: 600; }
.ab-arr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ab-arr-row label small { font-size: 12px; color: var(--mute); }
.ab-check { position: relative; margin-top: 10px; }
.ab-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ab-check span { display: block; width: 24px; height: 24px; border-radius: 7px; border: 2px solid #f9a8d4; background: #fff; }
.ab-check input:checked + span { background: var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--acc); }
.ab-dsem { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.ab-dsem button { padding: 10px 0; border-radius: 10px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink2); }
.ab-dsem button.on { background: var(--acc); border-color: var(--acc); color: #fff; }

@media (max-width: 760px) {
  .ab-tipos { grid-template-columns: repeat(4, 1fr); }
  .ab-tipo { font-size: 11px; padding: 8px 2px; }
  .ab-row2 { grid-template-columns: 1fr; }
  .ab-arr-row { grid-template-columns: 1fr 1fr; }
  .ab-salon-acc { grid-template-columns: 1fr; }
  .ab-hor-d .ab-switch { width: 100%; }
}
@media (min-width: 900px) {
  .ab-ag-top { grid-template-columns: auto 1fr auto; align-items: center; }
  .ab-galeria { grid-template-columns: repeat(5, 1fr); }
  .ab-semana { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
  .ab-semana .ab-cita { flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px; }
  .ab-semana .ab-cita-h { width: auto; }
  .ab-semana .ab-sem-h { flex-direction: column; }
}

/* Tema oscuro */
body.ab-oscuro .ab-link-card { background: linear-gradient(135deg, #3a1028, #4a1733); border-color: rgba(255,255,255,.08); }
body.ab-oscuro .ab-cita, body.ab-oscuro .ab-serv, body.ab-oscuro .ab-cli, body.ab-oscuro .ab-stats button, body.ab-oscuro .ab-ag-modos { background: #3a1028; border-color: rgba(255,255,255,.08); color: var(--ink); }
body.ab-oscuro .ab-cita-det, body.ab-oscuro .ab-cal-d.con, body.ab-oscuro .ab-arr-serv.on { background: rgba(255,255,255,.06); }
body.ab-oscuro .ab-hora-b, body.ab-oscuro .ab-x2, body.ab-oscuro .ab-tipo, body.ab-oscuro .ab-dsem button, body.ab-oscuro .ab-arr-serv, body.ab-oscuro .ab-slug, body.ab-oscuro .ab-slug em { background: #4a1733; color: var(--ink); border-color: rgba(255,255,255,.1); }
.ab-cita-h { width: 84px; }
.ab-sem-dia, .ab-semana .ab-citas, .ab-semana .ab-cita, .ab-semana .ab-cita-c { min-width: 0; }
@media (min-width: 900px) {
  .ab-semana .ab-cita { width: 100%; overflow: hidden; }
  .ab-semana .ab-cita-c b, .ab-semana .ab-cita-c small { white-space: normal; }
  .ab-semana .ab-web { display: none; }
  .ab-semana .ab-cita .ab-pill { font-size: 10.5px; padding: 2px 6px; }
}
body.ab-dia { background: #fff7fa; }