/* ============================================================
   Kelp para concesionarios · Administración y financiación. Solo lo propio
   de esta página: el hero y las escenas de "Te sonará" y de las cuatro
   capacidades. Los componentes de la familia están en vertical.css. Prefijo: ad-.
   ============================================================ */

/* ---- Hero: el cuadre del mes, lo que corresponde frente a lo que ha llegado ---- */
#s-adm { height: 620px; }
.ad-cv { --cw: 1104px; --ch: 520px; }
.ad-tt { position: absolute; left: 0; top: 0; display: grid; gap: 2px; }
.ad-tt small { font-size: 13px; font-weight: 600; color: rgb(198 238 227 / .7); }
.ad-tt b { font-size: 40px; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; color: #F2FBF8; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-tt2 { left: 704px; }
.ad-tt2 b { color: #F5C98A; }
.ad-col { position: absolute; top: 80px; width: 400px; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .6); }
.ad-cl { left: 0; }
.ad-cr { left: 704px; }
.ad-h { display: flex; align-items: baseline; justify-content: space-between; height: 46px; padding: 14px 16px 0; border-bottom: 1px solid var(--line); }
.ad-h b { font-size: 14px; font-weight: 600; }
.ad-h small { font-size: 12px; color: var(--ink-3); }
.ad-row { display: flex; align-items: center; gap: 11px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--line); transition: background-color .3s; }
.ad-row:last-child { border-bottom: 0; }
.ad-row b { display: block; font-size: 13.5px; font-weight: 600; }
.ad-row small { display: block; font-size: 11.5px; color: var(--ink-3); }
.ad-v { margin-left: auto; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-cl .ad-v { margin-left: auto; }
.ad-dc { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: #F1F4F2; color: var(--teal); flex: none; }
.ad-dc .ic { width: 15px; height: 15px; }
.ad-ok { width: 18px; height: 18px; border-radius: 50%; flex: none; background: #3BA57E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ad-row.ad-bad .ad-ok { background: #E39B35 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18v.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ad-row.on { background: #E8F6EF; }
.ad-row.ad-bad.on { background: var(--ember-2); }
.ad-row.ad-bad.on .ad-v { color: var(--ember-ink); }
.ad-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ad-l { fill: none; stroke: #7FE0BE; stroke-width: 1.5; stroke-dasharray: 1; }
.ad-l.ad-lx { stroke: #E7B25C; }
.ad-task { position: absolute; left: 330px; top: 420px; width: 444px; display: flex; align-items: center; gap: 12px; padding: 13px 16px 13px 13px; border-radius: 14px; box-shadow: 0 0 0 1.5px #E7B25C, 0 30px 60px -24px rgb(0 0 0 / .6); }
.ad-task .kbot { width: 30px; height: 30px; }
.ad-task b { display: block; font-size: 14px; font-weight: 600; }
.ad-task small { display: block; font-size: 12.5px; color: var(--ink-2); }
.ad-task img { width: 30px; height: 30px; margin-left: auto; border-radius: 50%; object-fit: cover; }

/* ---- Te sonará 01 · El cierre: los ficheros del mes y el cierre listo ---- */
.ad-files { position: absolute; left: 0; top: 4px; width: 250px; height: 142px; }
.ad-f { position: absolute; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 8px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 12px -8px rgb(1 33 32 / .45); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ad-f img { width: 14px; height: 14px; }
.ad-close { position: absolute; left: 88px; top: 30px; width: 204px; display: grid; grid-template-columns: auto 1fr; gap: 10px 10px; padding: 13px 14px; border-radius: 14px; box-shadow: 0 18px 34px -14px rgb(1 33 32 / .55); }
.ad-close .kbot { width: 26px; height: 26px; }
.ad-close b { display: block; font-size: 13.5px; font-weight: 600; }
.ad-close small { display: block; font-size: 11.5px; color: var(--ink-3); line-height: 1.3; }
.ad-close .tag { grid-column: 1 / -1; justify-self: start; }

/* ---- Te sonará 02 · Comisiones: la pregunta y cada línea de lo que cobra ---- */
.ad-ask { position: absolute; left: 0; top: 4px; display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 7px; border-radius: 12px 12px 12px 4px; background: #fff; box-shadow: 0 1px 1px rgb(0 0 0 / .08), 0 10px 20px -12px rgb(1 33 32 / .45); font-size: 12px; font-weight: 600; white-space: nowrap; }
.ad-ask img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ad-rcp { position: absolute; left: 118px; top: 40px; width: 258px; padding: 4px 14px; border-radius: 13px; background-image: radial-gradient(circle at 6px 100%, transparent 5px, #fff 5.5px); }
.ad-rl { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 5px 0; border-bottom: 1px dashed var(--line-2); font-size: 11.5px; color: var(--ink-2); }
.ad-rl b { font-size: 12px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ad-rl.ad-tot { border-bottom: 0; font-weight: 600; color: var(--ink); }
.ad-rl.ad-tot b { font-size: 14px; }

/* ---- Te sonará 03 · Plazos: tres cuentas atrás, ordenadas por urgencia ---- */
.ad-dl { position: absolute; left: 4px; top: 4px; width: 372px; display: grid; gap: 6px; }
.ad-d { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 7px; border-radius: 11px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 6px 12px -8px rgb(1 33 32 / .4); transition: box-shadow .3s; }
.ad-di { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: #F1F4F2; color: var(--teal); flex: none; }
.ad-di img, .ad-di .ic { width: 15px; height: 15px; object-fit: contain; }
.ad-d b { display: block; font-size: 12px; font-weight: 600; }
.ad-d small { display: block; font-size: 10.5px; color: var(--ink-3); }
.ad-cd { margin-left: auto; display: flex; align-items: baseline; gap: 3px; padding: 4px 8px; border-radius: 8px; background: #F1F4F2; transition: background-color .3s; }
.ad-cd b { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ad-cd small { font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.ad-d.on { box-shadow: 0 0 0 1.5px #E7B25C, 0 6px 12px -8px rgb(138 90 23 / .45); }
.ad-d.on .ad-cd { background: var(--ember); }
.ad-d.on .ad-cd b { color: var(--ember-ink); }

/* ---- En concreto · Fraude ---- */
.ad-ml { position: absolute; left: 20px; top: 20px; width: 300px; padding: 13px 15px; border-radius: 14px; }
.ad-ml-h { display: flex; align-items: center; gap: 10px; }
.ad-ml-h .co { width: 30px; height: 30px; border-radius: 50%; font-size: 10.5px; }
.ad-ml-h b { display: block; font-size: 13px; font-weight: 600; }
.ad-ml-h small { display: block; font-size: 11.5px; color: var(--ink-3); }
.ad-dom { padding: 0 2px; border-radius: 3px; transition: background-color .3s, color .3s; }
.ad-dom.on { background: var(--ember); color: var(--ember-ink); font-weight: 700; }
.ad-ml-s { margin-top: 10px; font-size: 13px; font-weight: 600; }
.ad-ml-b { margin-top: 3px; font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.ad-kn { position: absolute; left: 328px; top: 40px; width: 180px; display: grid; gap: 3px; padding: 10px 12px; border-radius: 12px; box-shadow: 0 0 0 1.5px #3BA57E, var(--shadow-card); }
.ad-kn small { font-size: 11px; font-weight: 600; color: var(--ok); }
.ad-kn b { font-size: 11px; font-weight: 600; white-space: nowrap; }
.ad-kn b span { background: #DDF2E8; color: var(--ok); padding: 0 2px; border-radius: 3px; }
.ad-stop { position: absolute; left: 110px; top: 194px; width: 330px; display: flex; align-items: center; gap: 11px; padding: 11px 14px 11px 11px; border-radius: 13px; box-shadow: 0 0 0 1.5px #E7B25C, 0 18px 34px -14px rgb(1 33 32 / .55); }
.ad-stop .kbot { width: 28px; height: 28px; }
.ad-stop b { display: block; font-size: 13.5px; font-weight: 600; }
.ad-stop small { display: block; font-size: 12px; color: var(--ink-2); }

/* ---- En concreto · El expediente de venta ---- */
.ad-fo { position: absolute; left: 70px; top: 16px; width: 380px; }
.ad-tabs { display: flex; gap: 4px; padding-left: 10px; }
.ad-tabs span { padding: 6px 12px 8px; border-radius: 9px 9px 0 0; background: #E6EFEB; font-size: 11.5px; font-weight: 600; color: var(--ink-2); transition: background-color .3s, color .3s; }
.ad-tabs span.ad-tx.on { background: var(--ember); color: var(--ember-ink); }
.ad-ex { position: relative; margin-top: -2px; padding: 12px 15px 13px; border-radius: 14px; }
.ad-ex-h { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ad-ex-h img { width: 26px; height: 26px; border-radius: 6px; object-fit: contain; }
.ad-ex-h b { display: block; font-size: 13.5px; font-weight: 600; }
.ad-ex-h small { display: block; font-size: 11.5px; color: var(--ink-3); }
.ad-ck { display: grid; gap: 8px; margin-top: 10px; }
.ad-ck span { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 500; }
.ad-ck i { width: 17px; height: 17px; border-radius: 50%; flex: none; background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ad-ck .ad-cx { font-weight: 600; color: var(--ember-ink); }
.ad-ck .ad-cx i { background: #E39B35 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M12 6v8M12 18v.5'/%3E%3C/svg%3E") center / 10px no-repeat; }
.ad-req { position: absolute; left: 50%; top: 234px; translate: -50% 0; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 99px; background: var(--deep); color: var(--foam); font-size: 12px; font-weight: 600; white-space: nowrap; box-shadow: 0 12px 24px -12px rgb(1 33 32 / .6); }
.ad-req img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }

/* ---- En concreto · La financiera ---- */
.ad-fi { position: absolute; left: 18px; top: 18px; width: 330px; padding: 10px 16px 6px; border-radius: 15px; }
.ad-fi-h, .ad-op { display: grid; grid-template-columns: 116px 1fr; align-items: center; }
.ad-fi-h { grid-template-columns: 116px repeat(3, 1fr); margin-bottom: 4px; }
.ad-fi-h span { font-size: 10.5px; font-weight: 600; color: var(--ink-3); }
.ad-fi-h span:nth-child(3) { text-align: center; }
.ad-fi-h span:nth-child(4) { text-align: right; }
.ad-op { height: 48px; border-top: 1px solid var(--line); }
.ad-op b { font-size: 12px; font-weight: 600; line-height: 1.25; }
.ad-op b small { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-3); }
.ad-tr { position: relative; height: 14px; margin: 0 6px; }
.ad-tr::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 2px; border-radius: 1px; background: rgb(1 33 32 / .1); }
.ad-fl { position: absolute; left: 0; top: 6px; height: 2px; width: 100%; border-radius: 1px; background: var(--teal); transform-origin: left; }
.ad-op[data-s="2"] .ad-fl { width: 50%; background: #E39B35; }
.ad-p { position: absolute; top: 0; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px #fff; }
.ad-p:nth-of-type(2) { left: 0; }
.ad-p:nth-of-type(3) { left: 50%; }
.ad-p:nth-of-type(4) { left: 100%; }
.ad-op[data-s="2"] .ad-p:nth-of-type(3) { background: #E39B35; }
.ad-op[data-s="2"] .ad-p:nth-of-type(4) { background: #fff; box-shadow: 0 0 0 3px #fff, inset 0 0 0 1.5px rgb(1 33 32 / .25); }
.ad-op.ad-st.on { background: var(--ember-2); margin: 0 -16px; padding: 0 16px; }
.ad-nt { position: absolute; left: 360px; top: 112px; width: 146px; display: grid; gap: 7px; padding: 10px 11px; border-radius: 12px 12px 12px 4px; background: #fff; box-shadow: 0 0 0 1px rgb(227 155 53 / .45), 0 18px 34px -14px rgb(1 33 32 / .55); }
.ad-nt img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.ad-nt p { font-size: 12px; line-height: 1.4; color: var(--ink-2); }

/* ---- En concreto · El año ---- */
.ad-yr { position: absolute; left: 24px; top: 20px; width: 472px; padding: 14px 16px 12px; border-radius: 16px; }
.ad-ms { display: grid; grid-template-columns: repeat(12, 1fr); }
.ad-ms span { font-size: 10.5px; font-weight: 600; color: var(--ink-3); text-align: center; }
.ad-dots { position: relative; height: 46px; margin-top: 8px; border-radius: 9px; background: #F4F7F5; }
.ad-dots i { position: absolute; width: 9px; height: 9px; margin: 0 0 0 -4.5px; border-radius: 50%; background: rgb(1 33 32 / .22); transition: background-color .3s, box-shadow .3s; }
.ad-dots i.ad-up { background: var(--teal); }
.ad-dots i.ad-up.on { background: #E39B35; box-shadow: 0 0 0 4px rgb(227 155 53 / .22); }
.ad-now { position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--deep); }
.ad-up-l { display: grid; gap: 6px; margin-top: 14px; }
.ad-up-l span { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; border-radius: 9px; background: #F4F7F5; font-size: 12.5px; font-weight: 500; }
.ad-up-l b { width: 46px; font-size: 12px; font-weight: 700; color: var(--ember-ink); font-variant-numeric: tabular-nums; }