/*
 * Detalle de cobros con desglose de impuestos — Cobranza / Contabilidad. Landing tipo artículo: cada sección lleva su figura.
 * Concepto: "cada cobro con su composición fiscal". El hero es el listado de cobros de marzo con filtros (radios + :has,
 * sin JS): todos, con retenciones, en moneda extranjera o sin póliza; al filtrar, las filas que quedan vuelven a "imprimirse".
 * El ejemplo práctico pone dos cobros con el mismo total ($14,300.00) en una escala común: uno solo con IVA y otro con
 * IVA, IVA retenido e ISR retenido; la línea del total cae en el mismo punto.
 * Verde azulado = impuesto trasladado (IVA); ciruela = retenciones; azul = moneda extranjera; rojo solo para "sin póliza",
 * siempre con texto; dorado = lo que se está revisando.
 * Display Gabarito, cuerpo Inter, cifras tabulares.
 * Movimiento: al cargar, los cobros se imprimen fila por fila; cada figura de sección tiene su propia entrada al hacer
 * scroll (fusión de reportes, campos que se escriben, pasos que giran, barras que se llenan, etapas que se encienden),
 * solo donde el navegador soporta animaciones ligadas al scroll y sin movimiento reducido.
 */
[data-function-layout="cobros"] {
    --dc-ink: #041f49;
    --dc-gold: #fac63f;
    --dc-pick: #fff6dc;
    --dc-tax: #12685f;
    --dc-tax-tint: #e0f0ed;
    --dc-ret: #7a4a8c;
    --dc-ret-tint: #efe6f3;
    --dc-fx: #1f5f99;
    --dc-fx-tint: #e2edf6;
    --dc-stop: #b42b26;
    --dc-stop-tint: #fbe7e5;
    --dc-on: #1f7a4a;
    --dc-on-tint: #e1f1e8;
    --dc-acct: #8a5200;
    --dc-paper: #f3f5f8;
    --dc-line: #c3ccd7;
    --dc-rule: #e1e6ed;
    --dc-muted: #46505e;
    --dc-text: #1f2a3d;
    --dc-display: "Gabarito", "Hanken Grotesk", ui-sans-serif, sans-serif;
    --dc-ease: cubic-bezier(.2, .7, .2, 1);
}

[data-function-layout="cobros"] .cv-hero-title,
[data-function-layout="cobros"] .cv-section-title { font-family: var(--dc-display); font-weight: 800; letter-spacing: -.015em; }

[data-function-layout="cobros"] .cv-hero-title,
[data-function-layout="cobros"] .cv-section-title,
[data-function-layout="cobros"] .cv-form-title { font-family: var(--dc-display); font-weight: 800; letter-spacing: -.025em; }
[data-function-layout="cobros"] .cv-section-title { font-size: clamp(1.75rem, 2.7vw, 2.5rem); line-height: 1.12; }
[data-function-layout="cobros"] .dc-narrow { max-width: 50rem; }
[data-function-layout="cobros"] .dc-subtitle { margin: 1.75rem 0 0; font-family: var(--dc-display); font-size: 1.25rem; font-weight: 800; }

/* ---------- Superficies ---------- */
[data-function-layout="cobros"] .dc-paper { background: var(--dc-paper); }
[data-function-layout="cobros"] .dc-navy { background: var(--dc-ink); color: #fff; }
[data-function-layout="cobros"] .dc-navy .cv-section-title,
[data-function-layout="cobros"] .dc-navy .dc-subtitle { color: #fff; }
[data-function-layout="cobros"] .dc-split { display: grid; gap: 2.5rem 4rem; align-items: center; }
[data-function-layout="cobros"] .dc-lead { max-width: 42rem; margin-top: 1.25rem; color: var(--dc-text); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.75; }
[data-function-layout="cobros"] .dc-subtitle + .dc-lead { margin-top: .6rem; }
[data-function-layout="cobros"] .dc-lead--light { color: rgb(255 255 255 / .88); }

/* ---------- Hero ---------- */
[data-function-layout="cobros"] #inicio { background: linear-gradient(155deg, #041f49 0%, #0a2c5c 70%, #0f3870 100%); color: #fff; }
[data-function-layout="cobros"] #inicio .function-hero__media img { object-position: 65% 50%; }
[data-function-layout="cobros"] #inicio .function-hero__overlay {
    background:
        linear-gradient(180deg, transparent 65%, rgb(4 31 73 / .7) 100%),
        linear-gradient(90deg, rgb(4 31 73 / .97) 0%, rgb(4 31 73 / .9) 42%, rgb(10 44 92 / .72) 70%, rgb(15 56 112 / .55) 100%);
}
[data-function-layout="cobros"] .rh-hero-layout { position: relative; z-index: 1; align-items: center; }
[data-function-layout="cobros"] #inicio .cv-hero-title { max-width: 12ch; color: #fff; font-size: clamp(2.5rem, 5vw, 4.4rem); line-height: 1.02; }
[data-function-layout="cobros"] #inicio .cv-hero-description { max-width: 34rem; margin-top: 1.5rem; color: rgb(255 255 255 / .86); }
[data-function-layout="cobros"] .dc-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
[data-function-layout="cobros"] #inicio .cv-primary-button { border-color: var(--dc-gold); background: var(--dc-gold); color: var(--dc-ink); box-shadow: 0 14px 30px rgb(0 0 0 / .3); }
[data-function-layout="cobros"] #inicio .cv-primary-button:hover,
[data-function-layout="cobros"] #inicio .cv-primary-button:focus-visible { background: #ffd666; }
[data-function-layout="cobros"] #inicio .cv-secondary-button { border-color: rgb(255 255 255 / .7); background: transparent; color: #fff; }
[data-function-layout="cobros"] #inicio .cv-secondary-button:hover,
[data-function-layout="cobros"] #inicio .cv-secondary-button:focus-visible { background: #fff; color: var(--dc-ink); }
[data-function-layout="cobros"] #inicio .cv-primary-button:focus-visible,
[data-function-layout="cobros"] #inicio .cv-secondary-button:focus-visible { outline: 3px solid var(--dc-gold); outline-offset: 3px; }

[data-function-layout="cobros"] #inicio .cv-hero-title { max-width: 18ch; font-size: clamp(2.1rem, 3.5vw, 3rem); line-height: 1.08; }
[data-function-layout="cobros"] #inicio .cv-hero-description { font-size: 1.02rem; }

/* El listado de cobros. */
[data-function-layout="cobros"] .dc-ledger { justify-self: center; width: 100%; max-width: 33rem; margin: 0; padding: 1.1rem 1.2rem 1rem; border-radius: .55rem; background: #fff; box-shadow: 0 24px 50px rgb(0 0 0 / .35); color: var(--dc-text); font-variant-numeric: tabular-nums; }
[data-function-layout="cobros"] .dc-ledger .cv-icon { width: 15px; height: 15px; flex-basis: 15px; flex-shrink: 0; }
[data-function-layout="cobros"] .dc-ledger__title { margin: 0; }
[data-function-layout="cobros"] .dc-ledger__title b { display: block; color: var(--dc-ink); font-family: var(--dc-display); font-size: 1.15rem; font-weight: 800; }
[data-function-layout="cobros"] .dc-ledger__title span { color: var(--dc-muted); font-size: .78rem; font-weight: 600; }
[data-function-layout="cobros"] .dc-filters { min-width: 0; margin: .8rem 0 0; padding: 0; border: 0; }
[data-function-layout="cobros"] .dc-filters legend { display: flex; align-items: center; gap: .35rem; margin: 0 0 .4rem; padding: 0; color: var(--dc-muted); font-size: .74rem; font-weight: 700; }
[data-function-layout="cobros"] .dc-filters__chips { display: flex; flex-wrap: wrap; gap: .35rem; }
[data-function-layout="cobros"] .dc-filters label { position: relative; cursor: pointer; }
[data-function-layout="cobros"] .dc-filters input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
[data-function-layout="cobros"] .dc-filters label span { display: block; padding: .34rem .7rem; border-radius: 2rem; box-shadow: inset 0 0 0 1.5px var(--dc-line); color: var(--dc-ink); font-size: .76rem; font-weight: 700; transition: background-color .15s, color .15s, box-shadow .15s; }
[data-function-layout="cobros"] .dc-filters label:hover span { background: var(--dc-paper); }
[data-function-layout="cobros"] .dc-filters input:checked + span { background: var(--dc-ink); box-shadow: none; color: #fff; }
[data-function-layout="cobros"] .dc-filters input:focus-visible + span { outline: 3px solid var(--dc-gold); outline-offset: 2px; }
[data-function-layout="cobros"] .dc-ledger__count { min-height: 1.2rem; margin: .6rem 0 .2rem; color: var(--dc-ink); font-size: .78rem; font-weight: 700; }
[data-function-layout="cobros"] .dc-count { display: none; }
[data-function-layout="cobros"] .dc-count--all { display: inline; }
[data-function-layout="cobros"] .dc-rows { width: 100%; border-collapse: collapse; font-size: .78rem; }
[data-function-layout="cobros"] .dc-rows thead th { padding: 0 .3rem .35rem; border-bottom: 2px solid var(--dc-ink); color: var(--dc-muted); font-size: .68rem; font-weight: 700; text-align: left; }
[data-function-layout="cobros"] .dc-rows thead th:nth-child(4) { text-align: right; }
[data-function-layout="cobros"] .dc-row > * { padding: .42rem .3rem; border-bottom: 1px solid var(--dc-rule); text-align: left; vertical-align: top; }
[data-function-layout="cobros"] .dc-row th b { display: block; color: var(--dc-ink); font-weight: 700; white-space: nowrap; }
[data-function-layout="cobros"] .dc-row small { display: block; color: var(--dc-muted); font-size: .7rem; font-weight: 600; }
[data-function-layout="cobros"] .dc-row th small { font-weight: 500; }
[data-function-layout="cobros"] .dc-row__client { color: var(--dc-ink); font-weight: 600; }
[data-function-layout="cobros"] .dc-row--fx .dc-row__currency { color: var(--dc-fx); font-weight: 700; }
[data-function-layout="cobros"] .dc-row__taxes { white-space: normal; }
[data-function-layout="cobros"] .dc-chip { display: inline-block; margin: 0 .2rem .2rem 0; padding: .05rem .38rem; border-radius: .25rem; background: var(--dc-tax-tint); color: var(--dc-tax); font-size: .66rem; font-style: normal; font-weight: 700; white-space: nowrap; }
[data-function-layout="cobros"] .dc-chip--ret { background: var(--dc-ret-tint); color: var(--dc-ret); }
[data-function-layout="cobros"] .dc-row__total { color: var(--dc-ink); font-weight: 700; text-align: right !important; white-space: nowrap; }
[data-function-layout="cobros"] .dc-row__policy { color: var(--dc-ink); font-weight: 600; white-space: nowrap; }
[data-function-layout="cobros"] .dc-nopol { display: inline-flex; align-items: center; gap: .25rem; padding: .08rem .4rem; border-radius: .25rem; background: var(--dc-stop-tint); color: var(--dc-stop); font-size: .68rem; font-style: normal; font-weight: 700; }
[data-function-layout="cobros"] .dc-nopol .cv-icon { width: 12px; height: 12px; flex-basis: 12px; }
[data-function-layout="cobros"] .dc-ledger figcaption { margin-top: .7rem; color: var(--dc-muted); font-size: .72rem; }
/* Al cargar, y cada vez que un filtro las vuelve a mostrar, las filas se imprimen una tras otra. */
[data-function-layout="cobros"] .dc-row { animation: dc-print .45s var(--dc-ease) backwards; }
[data-function-layout="cobros"] .dc-row:nth-child(2) { animation-delay: .08s; }
[data-function-layout="cobros"] .dc-row:nth-child(3) { animation-delay: .16s; }
[data-function-layout="cobros"] .dc-row:nth-child(4) { animation-delay: .24s; }
[data-function-layout="cobros"] .dc-row:nth-child(5) { animation-delay: .32s; }
[data-function-layout="cobros"] .dc-row:nth-child(6) { animation-delay: .4s; }
/* Filtros. shortcut: sin :has se ven siempre todos los cobros (navegadores previos a 2023). */
@supports selector(:has(*)) {
    [data-function-layout="cobros"] .dc-ledger:has(input:not([value="all"]):checked) .dc-count--all { display: none; }
    [data-function-layout="cobros"] .dc-ledger:has(input[value="ret"]:checked) .dc-count--ret,
    [data-function-layout="cobros"] .dc-ledger:has(input[value="fx"]:checked) .dc-count--fx,
    [data-function-layout="cobros"] .dc-ledger:has(input[value="nopol"]:checked) .dc-count--nopol { display: inline; }
    [data-function-layout="cobros"] .dc-ledger:has(input[value="ret"]:checked) .dc-row:not(.dc-row--ret),
    [data-function-layout="cobros"] .dc-ledger:has(input[value="fx"]:checked) .dc-row:not(.dc-row--fx),
    [data-function-layout="cobros"] .dc-ledger:has(input[value="nopol"]:checked) .dc-row:not(.dc-row--nopol) { display: none; }
    /* Lo que el filtro busca se resalta en las filas que quedan. */
    [data-function-layout="cobros"] .dc-ledger:has(input[value="ret"]:checked) .dc-chip--ret { background: var(--dc-ret); color: #fff; }
    [data-function-layout="cobros"] .dc-ledger:has(input[value="fx"]:checked) .dc-row__currency { color: #fff; background: var(--dc-fx); width: fit-content; padding: 0 .3rem; border-radius: .2rem; }
    [data-function-layout="cobros"] .dc-ledger:has(input[value="nopol"]:checked) .dc-nopol { background: var(--dc-stop); color: #fff; }
}

/* ---------- Comunes ---------- */
[data-function-layout="cobros"] .dc-table { width: 100%; margin-top: 1.8rem; border-collapse: collapse; table-layout: fixed; }
[data-function-layout="cobros"] .dc-table thead th { padding: .8rem 1rem; border-bottom: 3px solid var(--dc-rule); color: var(--dc-muted); font-size: .95rem; font-weight: 700; text-align: left; }
[data-function-layout="cobros"] .dc-table tbody th,
[data-function-layout="cobros"] .dc-table td { padding: .95rem 1rem; border-bottom: 1px solid var(--dc-rule); font-size: 1.02rem; line-height: 1.5; text-align: left; vertical-align: top; }
[data-function-layout="cobros"] .dc-table tbody th { color: var(--dc-ink); font-family: var(--dc-display); font-weight: 700; }
[data-function-layout="cobros"] .dc-table td { color: var(--dc-muted); font-weight: 500; }
/* Colores de los cuatro grupos de datos del cobro. */
[data-function-layout="cobros"] .dc-field--operation, [data-function-layout="cobros"] .dc-legend--operation { --dc-group: var(--dc-ink); }
[data-function-layout="cobros"] .dc-field--accounting, [data-function-layout="cobros"] .dc-legend--accounting { --dc-group: var(--dc-acct); }
[data-function-layout="cobros"] .dc-field--amounts, [data-function-layout="cobros"] .dc-legend--amounts { --dc-group: var(--dc-fx); }
[data-function-layout="cobros"] .dc-field--fiscal, [data-function-layout="cobros"] .dc-legend--fiscal { --dc-group: var(--dc-tax); }
[data-function-layout="cobros"] .dc-dot { display: inline-block; width: .7rem; height: .7rem; margin-right: .6rem; border-radius: 50%; background: var(--dc-ink); vertical-align: 1px; }
[data-function-layout="cobros"] .dc-dot--accounting { background: var(--dc-acct); }
[data-function-layout="cobros"] .dc-dot--amounts { background: var(--dc-fx); }
[data-function-layout="cobros"] .dc-dot--fiscal { background: var(--dc-tax); }

/* ---------- 1. Tres reportes frente a una sola consulta ---------- */
[data-function-layout="cobros"] .dc-merge { margin: 0; padding: clamp(1.1rem, 3vw, 1.5rem); border-radius: .6rem; background: var(--dc-paper); }
[data-function-layout="cobros"] .dc-merge .cv-icon { width: 16px; height: 16px; flex-basis: 16px; flex-shrink: 0; }
[data-function-layout="cobros"] .dc-merge__sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
[data-function-layout="cobros"] .dc-merge__source { padding: .75rem .7rem; border-radius: .45rem; background: #fff; outline: 1.5px dashed var(--dc-line); outline-offset: -1.5px; }
[data-function-layout="cobros"] .dc-merge__source p,
[data-function-layout="cobros"] .dc-merge__result p { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; color: var(--dc-ink); font-family: var(--dc-display); font-size: .95rem; font-weight: 800; }
[data-function-layout="cobros"] .dc-merge ul { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0; padding: 0; list-style: none; }
[data-function-layout="cobros"] .dc-merge li { padding: .2rem .45rem; border-radius: .3rem; background: var(--dc-paper); color: var(--dc-text); font-size: .76rem; font-weight: 700; }
/* Una flecha por columna baja de cada reporte hacia la consulta única. */
[data-function-layout="cobros"] .dc-merge__result { position: relative; margin-top: 1.6rem; padding: .85rem .9rem; border-radius: .45rem; background: var(--dc-ink); }
[data-function-layout="cobros"] .dc-merge__result::before { content: ""; position: absolute; top: -1.2rem; left: 50%; width: .7rem; height: .7rem; border-right: 2px solid var(--dc-ink); border-bottom: 2px solid var(--dc-ink); transform: translateX(-50%) rotate(45deg); }
[data-function-layout="cobros"] .dc-merge__result p { color: #fff; }
[data-function-layout="cobros"] .dc-merge__result p .cv-icon { color: var(--dc-gold); }
[data-function-layout="cobros"] .dc-merge__result li { background: rgb(255 255 255 / .12); color: #fff; }

/* ---------- 2. El cobro completo ---------- */
[data-function-layout="cobros"] .dc-record { margin: 1.8rem 0 0; padding: clamp(1.1rem, 3vw, 1.5rem); border-radius: .6rem; background: #fff; box-shadow: 0 12px 30px rgb(4 31 73 / .08); }
[data-function-layout="cobros"] .dc-record .cv-icon { width: 18px; height: 18px; flex-basis: 18px; flex-shrink: 0; }
[data-function-layout="cobros"] .dc-record__title { display: flex; align-items: center; gap: .45rem; margin: 0 0 1rem; color: var(--dc-ink); font-family: var(--dc-display); font-size: 1.2rem; font-weight: 800; }
[data-function-layout="cobros"] .dc-record__body { display: grid; gap: 1rem; }
[data-function-layout="cobros"] .dc-record__fields { display: grid; gap: .45rem; margin: 0; }
[data-function-layout="cobros"] .dc-field { padding: .55rem .75rem; border-radius: .4rem; background: var(--dc-paper); box-shadow: inset 4px 0 0 var(--dc-group); }
[data-function-layout="cobros"] .dc-field dt { color: var(--dc-muted); font-size: .74rem; font-weight: 700; }
[data-function-layout="cobros"] .dc-field dd { margin: .1rem 0 0; color: var(--dc-ink); font-size: .92rem; font-variant-numeric: tabular-nums; font-weight: 700; overflow-wrap: anywhere; }
[data-function-layout="cobros"] .dc-record__amounts { align-self: start; margin: 0; padding: .9rem 1rem; border-radius: .45rem; background: var(--dc-paper); box-shadow: inset 4px 0 0 var(--dc-fx); font-variant-numeric: tabular-nums; }
[data-function-layout="cobros"] .dc-record__amounts div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .35rem 0; border-bottom: 1px solid var(--dc-rule); }
[data-function-layout="cobros"] .dc-record__amounts dt { color: var(--dc-text); font-size: .9rem; font-weight: 600; }
[data-function-layout="cobros"] .dc-record__amounts dd { margin: 0; color: var(--dc-ink); font-size: .95rem; font-weight: 700; }
[data-function-layout="cobros"] .dc-record__amounts dd i { display: inline-block; width: 1rem; color: var(--dc-tax); font-style: normal; }
[data-function-layout="cobros"] .dc-record__amounts div.is-ret dd,
[data-function-layout="cobros"] .dc-record__amounts div.is-ret dd i { color: var(--dc-ret); }
[data-function-layout="cobros"] .dc-record__amounts div.is-empty dd { color: var(--dc-muted); font-weight: 500; }
[data-function-layout="cobros"] .dc-record__amounts .dc-record__total { padding-top: .55rem; border-bottom: 0; }
[data-function-layout="cobros"] .dc-record__total dt { color: var(--dc-ink); font-family: var(--dc-display); font-size: 1rem; font-weight: 800; }
[data-function-layout="cobros"] .dc-record__total dd { font-family: var(--dc-display); font-size: 1.15rem; text-decoration: underline double; text-underline-offset: .3rem; }
[data-function-layout="cobros"] .dc-record__legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 1rem 0 0; }
[data-function-layout="cobros"] .dc-legend { display: inline-flex; align-items: center; gap: .4rem; color: var(--dc-muted); font-size: .8rem; font-weight: 700; }
[data-function-layout="cobros"] .dc-legend::before { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--dc-group); }
[data-function-layout="cobros"] .dc-table--fields thead th:first-child { width: 34%; }

/* ---------- 3. Cinco pasos sobre azul ---------- */
[data-function-layout="cobros"] .dc-locate { display: grid; gap: .9rem; margin: 2rem 0 0; padding: 0; list-style: none; perspective: 900px; }
[data-function-layout="cobros"] .dc-locate li { position: relative; display: grid; align-content: start; gap: .5rem; padding: 1.05rem 1.05rem 1.2rem; border-radius: .5rem; background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16); }
[data-function-layout="cobros"] .dc-locate__head { display: flex; align-items: center; justify-content: space-between; color: var(--dc-gold); }
[data-function-layout="cobros"] .dc-locate__head .cv-icon { width: 20px; height: 20px; flex-basis: 20px; }
[data-function-layout="cobros"] .dc-locate__head i { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--dc-gold); color: var(--dc-ink); font-family: var(--dc-display); font-style: normal; font-weight: 800; }
[data-function-layout="cobros"] .dc-locate h3 { margin: .3rem 0 0; color: #fff; font-family: var(--dc-display); font-size: 1.1rem; font-weight: 800; line-height: 1.3; }
[data-function-layout="cobros"] .dc-locate p { margin: 0; color: rgb(255 255 255 / .82); font-size: .96rem; line-height: 1.5; }

/* ---------- 4. Beneficios ---------- */
[data-function-layout="cobros"] .dc-benefits .dc-benefits__icon { color: var(--dc-tax); }

/* ---------- 5. Mismo total, distinta composición ---------- */
[data-function-layout="cobros"] .dc-callout { margin-top: 1.4rem; padding: 1.1rem 1.2rem; border-radius: .5rem; background: #fff; box-shadow: inset 4px 0 0 var(--dc-gold); }
[data-function-layout="cobros"] .dc-callout__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .45rem; color: var(--dc-ink); font-family: var(--dc-display); font-size: 1.1rem; font-weight: 800; }
[data-function-layout="cobros"] .dc-callout__title .cv-icon { width: 18px; height: 18px; flex-basis: 18px; flex-shrink: 0; color: var(--dc-tax); }
[data-function-layout="cobros"] .dc-callout p:not(.dc-callout__title) { margin: 0; color: var(--dc-text); font-size: 1rem; line-height: 1.6; }
[data-function-layout="cobros"] .dc-same { margin: 0; padding: clamp(1.1rem, 3vw, 1.5rem); border-radius: .6rem; background: #fff; box-shadow: 0 12px 30px rgb(4 31 73 / .08); }
[data-function-layout="cobros"] .dc-same__chart { position: relative; display: grid; gap: 1.6rem; padding-top: 2.1rem; }
/* La línea del total: cae en el mismo punto de las dos barras. */
[data-function-layout="cobros"] .dc-same__line { position: absolute; top: 0; bottom: 0; left: calc(var(--at) * 1%); width: 0; border-left: 2px dashed var(--dc-ink); }
[data-function-layout="cobros"] .dc-same__line b { position: absolute; top: 0; right: .45rem; padding: .15rem .5rem; border-radius: .3rem; background: var(--dc-gold); color: var(--dc-ink); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
[data-function-layout="cobros"] .dc-case__folio { margin: 0 0 .35rem; color: var(--dc-ink); font-family: var(--dc-display); font-size: 1rem; font-weight: 800; }
[data-function-layout="cobros"] .dc-case__bar { position: relative; display: flex; height: 1.7rem; border-radius: .3rem; background: var(--dc-paper); }
[data-function-layout="cobros"] .dc-seg { display: block; width: calc(var(--w) * 1%); height: 100%; }
[data-function-layout="cobros"] .dc-seg--base { border-radius: .3rem 0 0 .3rem; background: var(--dc-ink); }
[data-function-layout="cobros"] .dc-seg--tax { background: var(--dc-tax); }
/* Las retenciones se restan desde el final de la barra: rayado ciruela sobre el IVA y el importe. */
[data-function-layout="cobros"] .dc-seg--ret { position: absolute; top: 0; left: calc((var(--end) - var(--w)) * 1%); background: repeating-linear-gradient(135deg, var(--dc-ret) 0 6px, rgb(122 74 140 / .55) 6px 12px); box-shadow: inset 0 0 0 2px var(--dc-ret); }
[data-function-layout="cobros"] .dc-case__parts { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: .5rem 0 0; padding: 0; list-style: none; }
[data-function-layout="cobros"] .dc-case__part { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-variant-numeric: tabular-nums; }
[data-function-layout="cobros"] .dc-case__part::before { content: ""; width: .65rem; height: .65rem; border-radius: 2px; background: var(--dc-ink); }
[data-function-layout="cobros"] .dc-case__part--tax::before { background: var(--dc-tax); }
[data-function-layout="cobros"] .dc-case__part--ret::before { background: var(--dc-ret); }
[data-function-layout="cobros"] .dc-case__part span { color: var(--dc-muted); font-weight: 600; }
[data-function-layout="cobros"] .dc-case__part b { color: var(--dc-ink); }
[data-function-layout="cobros"] .dc-case__part--ret b { color: var(--dc-ret); }

/* ---------- 6. El mismo cobro en cada etapa ---------- */
[data-function-layout="cobros"] .dc-process { display: grid; gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; }
[data-function-layout="cobros"] .dc-process li { position: relative; display: grid; align-content: start; gap: .45rem; padding: 1.05rem 1.05rem 1.15rem; border-radius: .5rem; background: var(--dc-paper); }
[data-function-layout="cobros"] .dc-process__icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--dc-ink); color: var(--dc-gold); }
[data-function-layout="cobros"] .dc-process__icon .cv-icon { width: 18px; height: 18px; flex-basis: 18px; }
[data-function-layout="cobros"] .dc-process h3 { margin: .3rem 0 0; color: var(--dc-ink); font-family: var(--dc-display); font-size: 1.08rem; font-weight: 800; }
[data-function-layout="cobros"] .dc-process h3 i { color: var(--dc-tax); font-style: normal; }
[data-function-layout="cobros"] .dc-process p { margin: 0; color: var(--dc-muted); font-size: .96rem; line-height: 1.5; }
[data-function-layout="cobros"] .dc-process__sample { width: fit-content; margin-top: .2rem; padding: .2rem .55rem; border-radius: .3rem; background: #fff; box-shadow: inset 0 0 0 1.5px var(--dc-line); color: var(--dc-ink); font-size: .8rem; font-variant-numeric: tabular-nums; font-weight: 700; }

/* ---------- 7. Comparación: la columna de Evidence va marcada ---------- */
[data-function-layout="cobros"] .dc-table--compare thead th:first-child { width: 20%; }
[data-function-layout="cobros"] .dc-table--compare thead th:nth-child(3) { box-shadow: inset 0 4px 0 var(--dc-gold); color: var(--dc-ink); }
[data-function-layout="cobros"] .dc-table--compare td:nth-child(3) { background: var(--dc-pick); color: var(--dc-ink); font-weight: 600; }

/* ---------- 8. Funciones relacionadas ---------- */
/* El id gana a la regla compartida, que va después en el archivo. */
[data-function-layout="cobros"] #relacion-function .dc-related { display: grid; gap: .8rem; margin-top: 1.6rem; }
[data-function-layout="cobros"] .dc-related .dc-related__link { background: #fff; box-shadow: inset 0 0 0 1.5px var(--dc-ink); }
[data-function-layout="cobros"] .dc-related .dc-related__link:hover { box-shadow: inset 0 0 0 2.5px var(--dc-ink); }
[data-function-layout="cobros"] .dc-related .dc-related__link:focus-visible { outline-color: var(--dc-ink); }
[data-function-layout="cobros"] .dc-related .dc-related__icon { background: var(--dc-tax-tint); color: var(--dc-tax); }

/* ---------- Entradas al hacer scroll: una distinta por figura ---------- */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        /* Los tres reportes llegan desde lados distintos y la consulta única se arma debajo. */
        [data-function-layout="cobros"] .dc-merge__source { animation: dc-from-side linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
        [data-function-layout="cobros"] .dc-merge__source--0 { --dc-from: -2.5rem; }
        [data-function-layout="cobros"] .dc-merge__source--1 { --dc-from: 0; animation-name: dc-from-top; }
        [data-function-layout="cobros"] .dc-merge__source--2 { --dc-from: 2.5rem; }
        [data-function-layout="cobros"] .dc-merge__result { animation: dc-zip linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
        /* Los datos del cobro se escriben de izquierda a derecha. */
        [data-function-layout="cobros"] .dc-field,
        [data-function-layout="cobros"] .dc-record__amounts { animation: dc-type linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; }
        /* Los pasos giran como fichas al entrar. */
        [data-function-layout="cobros"] .dc-locate li { transform-origin: top; animation: dc-flip linear both; animation-timeline: view(); animation-range: entry 0% cover 30%; }
        /* Las barras se llenan y la línea del total baja después. */
        [data-function-layout="cobros"] .dc-case__bar { transform-origin: left; animation: dc-grow linear both; animation-timeline: view(); animation-range: entry 15% cover 40%; }
        [data-function-layout="cobros"] .dc-same__line { transform-origin: top; animation: dc-drop linear both; animation-timeline: view(); animation-range: entry 35% cover 50%; }
        /* Las etapas se encienden una tras otra según avanzan. */
        [data-function-layout="cobros"] .dc-process li { animation: dc-light linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
        /* La columna de Evidence se ilumina de arriba abajo. */
        [data-function-layout="cobros"] .dc-table--compare td:nth-child(3) { animation: dc-sweep linear both; animation-timeline: view(); animation-range: entry 20% cover 40%; }
    }
}

@media (min-width: 640px) {
    [data-function-layout="cobros"] .dc-locate,
    [data-function-layout="cobros"] .dc-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-function-layout="cobros"] .dc-record__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
    [data-function-layout="cobros"] #relacion-function .dc-related { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    [data-function-layout="cobros"] .dc-record__body { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
    [data-function-layout="cobros"] .dc-locate,
    [data-function-layout="cobros"] .dc-process { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    /* Flecha entre pasos y etapas en la fila de cinco. */
    [data-function-layout="cobros"] .dc-locate li:not(:last-child)::after,
    [data-function-layout="cobros"] .dc-process li:not(:last-child)::after { content: ""; position: absolute; top: 1.95rem; right: -.65rem; width: .42rem; height: .42rem; border-top: 2px solid var(--dc-muted); border-right: 2px solid var(--dc-muted); transform: rotate(45deg); }
    [data-function-layout="cobros"] .dc-locate li:not(:last-child)::after { border-color: rgb(255 255 255 / .5); }
    [data-function-layout="cobros"] #relacion-function .dc-related { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Capacidades ---------- */
[data-function-layout="cobros"] .dc-capabilities { display: grid; gap: .75rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
[data-function-layout="cobros"] .dc-capabilities li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .9rem; align-items: center; padding: 1rem 1.1rem; border-radius: .5rem; background: #fff; box-shadow: inset 0 0 0 1px var(--dc-rule); }
[data-function-layout="cobros"] .dc-capabilities__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: .45rem; background: var(--dc-on-tint); color: var(--dc-on); }
[data-function-layout="cobros"] .dc-capabilities__icon .cv-icon { width: 21px; height: 21px; flex-basis: 21px; }
[data-function-layout="cobros"] .dc-capabilities p { margin: 0; color: var(--dc-ink); font-size: 1.0625rem; font-weight: 600; line-height: 1.45; }

/* ---------- Problemas: problema / respuesta ---------- */
[data-function-layout="cobros"] .dc-fixes { width: 100%; margin-top: 2.5rem; border-collapse: collapse; table-layout: fixed; }
[data-function-layout="cobros"] .dc-fixes thead th { padding: 1rem 1.25rem; border-bottom: 3px solid var(--dc-rule); color: var(--dc-muted); font-family: var(--dc-display); font-size: 1.15rem; font-weight: 800; text-align: left; }
[data-function-layout="cobros"] .dc-fixes thead th:last-child { border-bottom-color: var(--dc-ink); color: var(--dc-ink); }
[data-function-layout="cobros"] .dc-fixes tbody th,
[data-function-layout="cobros"] .dc-fixes td { padding: 1.2rem 1.25rem; border-bottom: 1px solid var(--dc-rule); font-size: 1.0625rem; line-height: 1.6; text-align: left; vertical-align: middle; }
[data-function-layout="cobros"] .dc-fixes tbody th { color: var(--dc-text); font-weight: 700; }
[data-function-layout="cobros"] .dc-fixes td { background: var(--dc-paper); color: var(--dc-ink); font-weight: 600; }
[data-function-layout="cobros"] .dc-fixes__icon { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; margin-right: .75rem; border-radius: .4rem; background: #e3e8ef; color: var(--dc-muted); vertical-align: middle; }
[data-function-layout="cobros"] .dc-fixes__icon .cv-icon { width: 18px; height: 18px; flex-basis: 18px; }
[data-function-layout="cobros"] .dc-fixes__check { display: inline-grid; margin-right: .6rem; vertical-align: -.3em; color: var(--dc-on); }
[data-function-layout="cobros"] .dc-fixes__check .cv-icon { width: 20px; height: 20px; flex-basis: 20px; stroke-width: 2.4; }

/* ---------- Beneficios ---------- */
[data-function-layout="cobros"] .dc-benefits { display: grid; gap: 1.5rem 3rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
[data-function-layout="cobros"] .dc-benefits li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; padding-top: 1.25rem; border-top: 3px solid var(--dc-ink); }
[data-function-layout="cobros"] .dc-benefits__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .45rem; background: #fff; box-shadow: inset 0 0 0 1px var(--dc-rule); color: var(--dc-ink); }
[data-function-layout="cobros"] .dc-benefits__icon .cv-icon { width: 22px; height: 22px; flex-basis: 22px; }
[data-function-layout="cobros"] .dc-benefits p { margin: .3rem 0 0; color: var(--dc-ink); font-size: 1.125rem; font-weight: 600; line-height: 1.5; }

/* ---------- Cómo encaja: funciones relacionadas ---------- */
[data-function-layout="cobros"] .dc-related { display: grid; gap: .75rem; }
[data-function-layout="cobros"] .dc-related__title { margin: 0; color: #fff; font-family: var(--dc-display); font-size: 1.25rem; font-weight: 800; }
[data-function-layout="cobros"] .dc-related__link { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: .55rem; background: #fff; color: var(--dc-ink); text-decoration: none; box-shadow: 0 18px 36px rgb(0 0 0 / .25); transition: box-shadow .2s; }
[data-function-layout="cobros"] .dc-related__link:hover { box-shadow: 0 18px 36px rgb(0 0 0 / .25), inset 0 0 0 2px var(--dc-gold); }
[data-function-layout="cobros"] .dc-related__link:focus-visible { outline: 3px solid var(--dc-gold); outline-offset: 3px; }
[data-function-layout="cobros"] .dc-related__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: .45rem; background: var(--dc-on-tint); color: var(--dc-on); }
[data-function-layout="cobros"] .dc-related__icon .cv-icon { width: 22px; height: 22px; flex-basis: 22px; }
[data-function-layout="cobros"] .dc-related__link b { display: block; font-family: var(--dc-display); font-size: 1.15rem; font-weight: 800; }
[data-function-layout="cobros"] .dc-related__link small { display: block; margin-top: .2rem; color: var(--dc-muted); font-size: .92rem; font-weight: 500; line-height: 1.45; }
[data-function-layout="cobros"] .dc-related__go .cv-icon { width: 20px; height: 20px; flex-basis: 20px; }

/* ---------- Responsive ---------- */
@media (min-width: 768px) {
    [data-function-layout="cobros"] .dc-capabilities,
    [data-function-layout="cobros"] .dc-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    [data-function-layout="cobros"] .rh-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    [data-function-layout="cobros"] .dc-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    [data-function-layout="cobros"] .dc-capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    [data-function-layout="cobros"] #inicio .function-hero__overlay { background: linear-gradient(180deg, rgb(4 31 73 / .95) 0%, rgb(4 31 73 / .86) 50%, rgb(10 44 92 / .7) 100%); }
    [data-function-layout="cobros"] #inicio .cv-hero-title { max-width: none; }
}
@media (max-width: 767px) {
    [data-function-layout="cobros"] .dc-hero__actions > * { width: 100%; }
    [data-function-layout="cobros"] .dc-fixes thead { display: none; }
    [data-function-layout="cobros"] .dc-fixes,
    [data-function-layout="cobros"] .dc-fixes tbody,
    [data-function-layout="cobros"] .dc-fixes tr,
    [data-function-layout="cobros"] .dc-fixes tbody th,
    [data-function-layout="cobros"] .dc-fixes td { display: block; width: 100%; }
    [data-function-layout="cobros"] .dc-fixes tr { padding: .75rem 0; border-bottom: 1px solid var(--dc-rule); }
    [data-function-layout="cobros"] .dc-fixes tbody th,
    [data-function-layout="cobros"] .dc-fixes td { padding: .65rem .85rem; border-bottom: 0; }
    [data-function-layout="cobros"] .dc-fixes tbody th::before,
    [data-function-layout="cobros"] .dc-fixes td::before { content: attr(data-label); display: block; margin-bottom: .35rem; color: var(--dc-muted); font-size: .82rem; font-weight: 700; }
    [data-function-layout="cobros"] .dc-related__link { grid-template-columns: 3rem minmax(0, 1fr); }
    [data-function-layout="cobros"] .dc-related__go { display: none; }
}

/* ---------- Keyframes ---------- */

@media (prefers-reduced-motion: reduce) {
    [data-function-layout="cobros"] *,
    [data-function-layout="cobros"] *::before,
    [data-function-layout="cobros"] *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 767px) {
    [data-function-layout="cobros"] .dc-ledger { padding: .95rem .8rem; }
    /* En móvil cada cobro es una ficha de dos renglones: folio y total arriba; cliente, impuestos y póliza abajo. */
    [data-function-layout="cobros"] .dc-rows thead { display: none; }
    [data-function-layout="cobros"] .dc-rows,
    [data-function-layout="cobros"] .dc-rows tbody { display: block; }
    [data-function-layout="cobros"] .dc-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem .6rem; padding: .5rem .1rem; border-bottom: 1px solid var(--dc-rule); }
    [data-function-layout="cobros"] .dc-row > * { padding: 0; border: 0; }
    [data-function-layout="cobros"] .dc-row th { grid-column: 1; grid-row: 1; display: flex; gap: .4rem; align-items: baseline; }
    [data-function-layout="cobros"] .dc-row__total { grid-column: 2; grid-row: 1; }
    [data-function-layout="cobros"] .dc-row td:nth-child(2) { grid-column: 1 / -1; }
    [data-function-layout="cobros"] .dc-row__taxes { grid-column: 1; }
    [data-function-layout="cobros"] .dc-row__policy { grid-column: 2; text-align: right; }
    [data-function-layout="cobros"] .dc-merge__sources { grid-template-columns: minmax(0, 1fr); }
    [data-function-layout="cobros"] .dc-same__line b { font-size: .7rem; }
    [data-function-layout="cobros"] .dc-table--compare thead { display: none; }
    [data-function-layout="cobros"] .dc-table--compare,
    [data-function-layout="cobros"] .dc-table--compare tbody,
    [data-function-layout="cobros"] .dc-table--compare tr,
    [data-function-layout="cobros"] .dc-table--compare tbody th,
    [data-function-layout="cobros"] .dc-table--compare td { display: block; width: 100%; }
    [data-function-layout="cobros"] .dc-table--compare tr { padding: .8rem .5rem; border-bottom: 1px solid var(--dc-rule); }
    [data-function-layout="cobros"] .dc-table--compare tbody th,
    [data-function-layout="cobros"] .dc-table--compare td { padding: .3rem 0; border: 0; }
    /* En móvil cada valor lleva el nombre de su columna. */
    [data-function-layout="cobros"] .dc-table--compare td::before { content: attr(data-label); display: block; color: var(--dc-muted); font-size: .76rem; font-weight: 700; }
    [data-function-layout="cobros"] .dc-table--compare td:nth-child(3) { padding: .4rem .5rem; border-radius: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
    [data-function-layout="cobros"] .dc-row { animation: none !important; }
    [data-function-layout="cobros"] .dc-filters label span { transition: none; }
}

@keyframes dc-print { from { opacity: 0; transform: translateY(-.45rem); } }
@keyframes dc-from-side { from { opacity: 0; transform: translateX(var(--dc-from)); } }
@keyframes dc-from-top { from { opacity: 0; transform: translateY(-1.5rem); } }
@keyframes dc-zip { from { clip-path: inset(0 50% 0 50%); } }
@keyframes dc-type { from { clip-path: inset(0 100% 0 0); } }
@keyframes dc-flip { from { opacity: 0; transform: rotateX(-70deg); } }
@keyframes dc-grow { from { transform: scaleX(0); } }
@keyframes dc-drop { from { transform: scaleY(0); } }
@keyframes dc-light { from { opacity: .35; filter: grayscale(1); } }
@keyframes dc-sweep { from { background-color: transparent; } }