/* mobile.css — superficie mobile del portal (porte del diseño mobile de payment_platform).
 *
 * Reglas del archivo (las exige apps/portal/tests/test_mobile_css.py):
 *  - Se carga con <link media="screen and (max-width: 767.98px)"> en partials/_head.html,
 *    DESPUÉS de dashboard.css, y TODO lo que contiene va dentro de ese @media: un solo corte (768),
 *    nunca un tramo intermedio 640-767.
 *  - Solo reflujo, densidad, visibilidad y navegación. Nada de lógica por ancho ni de reordenar
 *    el DOM. Lo que NO es mobile (ocultar la variante mobile en escritorio) vive en dashboard.css,
 *    al final, bajo el título «Mobile: bases».
 *  - Solo tokens del design system (--color-*, --bg-*, --border-color, --text-*).
 */
@media (max-width: 767.98px) {
    /* ---- Listado de documentos: la lista reemplaza a la tabla ---- */
    .documents-table {
        display: none;
    }

    .ds-rows {
        display: block;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ds-row {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-height: 4.25rem;
        padding: 0.75rem 0.875rem;
        border-bottom: 1px solid var(--border-color);
    }

    .ds-row:last-child {
        border-bottom: 0;
    }

    .ds-row--empty {
        align-items: center;
        color: var(--text-muted);
        text-align: center;
    }

    .ds-row__line {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    /* Título a la izquierda (se corta con «…»), monto a la derecha junto al chevron. */
    .ds-row__link {
        flex: 1 1 0;
        min-width: 0;
        overflow: hidden;
        color: var(--text-heading);
        font-weight: 600;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Enlace principal «estirado»: el pseudo-elemento cubre la fila, el <a> sigue siendo un
       enlace normal (nombre accesible = el número, foco y teclado nativos). */
    .ds-row__link::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .ds-row:has(.ds-row__link:focus-visible) {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    .ds-row__link:focus-visible {
        outline: none;
    }

    .ds-row__amount {
        flex: 0 0 auto;
        margin-left: auto;
        color: var(--text-heading);
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        text-align: right;
        white-space: nowrap;
    }

    .ds-row__meta {
        margin: 0;
        color: var(--text-muted);
        font-size: 0.875rem;
    }

    .ds-row__status {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem;
    }

    /* Las acciones secundarias quedan POR ENCIMA del enlace estirado y con caja táctil de 44px. */
    .ds-row__actions {
        position: relative;
        z-index: 1;
        justify-content: flex-start;
        margin-top: 0.25rem;
    }

    .ds-row__actions:empty {
        display: none;
    }

    .ds-row__actions .table-action-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* ---- Primitivas F1 (docs/mobile.md «Primitivas») ---- */

    /* Fila: chevron «abre» al final del título y CTA del vacío. */
    .ds-row__chevron {
        flex: 0 0 auto;
        align-self: center;
        color: var(--text-muted);
    }

    .ds-row--empty {
        gap: 0.75rem;
        padding-block: 1.5rem;
    }

    .ds-row__cta {
        min-height: 2.75rem;
    }

    /* Hoja: el <dialog class="ds-form-modal ds-sheet"> se ancla abajo. Gana a
       `.ds-form-modal:modal` (inset:0, margin:auto !important) por especificidad. */
    .ds-form-modal.ds-sheet:modal {
        inset: auto 0 0 0;
        margin: 0 !important;
        width: 100%;
        max-width: 100%;
        max-height: 85dvh;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        border-bottom: 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Hoja «Emitir» de la barra inferior: icono, título y «x» centrados entre sí y cabecera más baja. */
    #emit-sheet .ds-form-modal__header {
        align-items: center;
        padding: 0.75rem 1rem;
    }

    #emit-sheet .ds-form-modal__heading {
        align-items: center;
    }

    #emit-sheet .ds-form-modal__heading p {
        margin: 0;
    }

    .ds-sheet .ds-form-modal__close {
        width: 2.75rem;
        height: 2.75rem;
    }

    /* Barra de acción: fija abajo con safe-area; el botón principal mide 48px. */
    .ds-actionbar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 40;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
    }

    .ds-actionbar__summary {
        display: flex;
        flex-direction: column;
        margin-right: auto;
        color: var(--text-muted);
        font-size: 0.875rem;
    }

    .ds-actionbar__summary-value {
        color: var(--text-heading);
        font-size: 1.125rem;
    }

    .ds-actionbar__primary,
    .ds-actionbar__secondary {
        min-height: 3rem;
        justify-content: center;
    }

    .ds-actionbar__primary {
        flex: 1 1 auto;
    }

    /* La acción principal puede venir envuelta en su <form> (reintentar). */
    .ds-actionbar > form {
        display: flex;
        flex: 1 1 auto;
        margin: 0;
    }

    .ds-actionbar > form > .ds-actionbar__primary {
        flex: 1 1 auto;
    }

    /* Deja sitio al final de la página para que la barra no tape el último campo. */
    body:has(.ds-actionbar) {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom));
    }

    /* Formulario de una columna: aplicar `ds-form--stack` al <form>. Campos de 48px y 16px
       (evita el zoom de iOS), etiquetas arriba, errores debajo del campo. */
    .ds-form--stack {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .ds-form--stack label {
        display: block;
        margin-bottom: 0.25rem;
    }

    /* El selector segmentado (`components/ui/_segmented.html`) maneja su propio layout. */
    .ds-form--stack .ds-seg__opt {
        display: flex;
        margin-bottom: 0;
    }

    .ds-form--stack input:not([type="checkbox"]):not([type="radio"]),
    .ds-form--stack select,
    .ds-form--stack textarea {
        width: 100%;
        min-height: 3rem;
        font-size: 1rem;
    }

    .ds-form--stack .btn {
        min-height: 3rem;
    }

    /* ---- Inicio del facturador: números apilados si no entran ---- */
    .home-alert {
        flex-wrap: wrap;
        row-gap: 0.125rem;
    }

    /* Aviso compacto (components/alerts/_alert_compact.html): icono + título + enlace en una
       línea; el mensaje largo queda solo en escritorio. */
    .home-alert {
        flex-wrap: nowrap;
    }

    .home-alert__msg {
        display: none;
    }

    .home-alert__link {
        margin-left: auto;
    }

    .home-figure dd {
        font-size: 1.25rem;
    }

    /* Inicio: la lista de «Últimos documentos» va de borde a borde de su tarjeta
       (la fila ya lleva su propio padding lateral). */
    .home-recent .card-body {
        padding: 0;
    }

    /* ---- Barra inferior del facturador (F3, partials/_bottom_nav.html) ----
       Solo existe para el facturador; el estudio no la renderiza, así que estas reglas
       `:has(.bottom-nav)` no le tocan nada. */
    .bottom-nav {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 40;
        display: block;
        background: var(--bg-card);
        border-top: 1px solid var(--border-color);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-nav__list {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .bottom-nav__item {
        flex: 1 1 0;
        min-width: 0;
    }

    .bottom-nav__link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        width: 100%;
        min-height: 3.5rem;
        padding: 0.375rem 0.25rem;
        border: 0;
        background: transparent;
        color: var(--text-muted);
        font: inherit;
        font-size: 0.75rem;
        text-decoration: none;
        cursor: pointer;
    }

    .bottom-nav__link[aria-current="page"] {
        color: var(--color-primary);
        font-weight: 600;
    }

    .bottom-nav__link:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    /* Topbar mobile: solo hamburguesa a la izquierda (campana y avatar a la derecha). La marca
       vive arriba del menú lateral. */
    body.has-appbar-back .app-header .appbar-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 2.75rem;
        height: 2.75rem;
        margin-left: -0.5rem;
        color: var(--text-heading);
    }

    body.has-appbar-back .appbar-back:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: -2px;
    }

    body.has-appbar-back #button-toggle-menu {
        display: none;
    }

    .app-header .logo-topbar {
        display: none;
    }

    /* Con barra: lupa y breadcrumb fuera (la hamburguesa queda) y sitio al final del contenido. */
    body:has(.bottom-nav) .ds-command-trigger-mobile,
    body:has(.bottom-nav) .breadcrumb {
        display: none;
    }

    body:has(.bottom-nav) .content {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom));
    }

    /* Título de la sección en la barra superior (hamburguesa + título + campana/avatar). El
       <h1> del contenido queda solo para lectores de pantalla: sigue habiendo uno por página. */
    .app-header > div:first-child {
        flex: 1 1 auto;
        min-width: 0;
    }

    .app-header__title {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text-heading);
        font-size: 1.125rem;
        font-weight: 600;
    }

    /* Sin hueco bajo la barra: el h1 es sr-only y el breadcrumb no se ve, no hay nada que separar. */
    .page-title-shell {
        margin-bottom: 0;
    }

    .page-title-shell > div {
        gap: 0;
    }

    .page-title-shell .page-title {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* Menú lateral abierto: por encima de la barra superior (si no, la barra tapa la marca). */
    html.sidenav-enable[data-sidenav-size="offcanvas"] .app-menu.sidenav {
        z-index: calc(var(--z-topbar) + 2);
    }

    html.sidenav-enable[data-sidenav-size="offcanvas"] .sidenav-backdrop {
        z-index: calc(var(--z-topbar) + 1);
    }

    /* Botón flotante «+» (components/mobile/_fab.html): 56 px, sobre la barra inferior y el safe-area. */
    .ds-fab {
        position: fixed;
        right: 1rem;
        bottom: calc(1rem + env(safe-area-inset-bottom));
        z-index: 41;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3.5rem;
        height: 3.5rem;
        min-height: 3.5rem;
        padding: 0;
        border-radius: 50%;
        box-shadow: 0 6px 18px rgb(15 23 42 / 0.3);
    }

    .ds-fab .ds-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    body:has(.bottom-nav) .ds-fab {
        bottom: calc(3.5rem + 1rem + env(safe-area-inset-bottom));
    }

    /* Reserva al final del contenido para que el FAB no tape la última fila. */
    body:has(.ds-fab) .content {
        padding-bottom: calc(3.5rem + 3.5rem + 3rem + env(safe-area-inset-bottom));
    }

    /* El «+» ya es la acción: el vacío no repite el CTA. */
    body:has(.ds-fab) .ds-row--empty .ds-row__cta {
        display: none;
    }

    /* Las pantallas de emisión y los formularios con barra de acción traen la suya. */
    body:has(.emit-action-bar, .ds-actionbar) .bottom-nav {
        display: none;
    }

    /* Sin barra inferior, la barra de acción ocupa su lugar: el contenido deja su alto libre
       (antes quedaba en 0 y la barra tapaba el final del formulario, p. ej. Presupuesto). */
    body:has(.ds-actionbar) .content,
    body:has(.bottom-nav):has(.ds-actionbar) .content {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom));
    }

    /* Hoja «Emitir». */
    .emit-sheet__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .emit-sheet__link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 3rem;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border-color);
        color: var(--text-heading);
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
    }

    /* ---- Emitir en el teléfono (F4): solo presentación sobre los MISMOS controles ----
       Una columna, orden de tarea Cliente > Ítems > Cobro > barra de acción. Ningún campo, id ni
       listener cambia (`emit_document.js` sigue leyendo #sticky-total / #emit-invoice-submit). */
    .emit-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
        min-height: 3rem;
        font-size: 1rem;
    }

    .emit-form textarea {
        min-height: 5rem;
    }

    .emit-form .emit-chip {
        min-height: 3rem;
        align-items: center;
    }

    /* El listado del combobox de cliente flota bajo el campo (no empuja el contenido); cada opción es un objetivo táctil. */
    .emit-customer-search {
        position: relative;
    }

    .emit-customer-search [data-customer-search-list] {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 25;
        max-height: 16rem;
        padding: 0.25rem;
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        background: var(--bg-card);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    }

    .emit-customer-search [data-customer-search-list][hidden] {
        display: none;
    }

    .emit-customer-search [role="option"] {
        min-height: 3rem;
    }

    /* Barra de acción: la misma `.emit-action-bar` (sticky en escritorio) queda fija abajo. */
    .emit-action-bar {
        position: fixed;
        inset: auto 0 0 0;
        z-index: 40;
        margin: 0;
        padding: 0.5rem 1rem calc(0.5rem + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 0.25rem 0.75rem;
        border-width: 1px 0 0;
        border-radius: 0;
    }

    .emit-action-bar__total {
        grid-column: 1;
        min-width: 0;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0 0.5rem;
    }

    .emit-action-bar__amount {
        font-size: 1.125rem;
    }

    /* Los hijos de «actions» pasan a la grilla de la barra: Emitir junto al total, borrador debajo. */
    .emit-action-bar__actions {
        display: contents;
    }

    .emit-action-bar .emit-kbd-hint {
        display: none;
    }

    .emit-action-bar .emit-submit {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        min-height: 3rem;
    }

    .emit-action-bar .emit-submit-secondary {
        grid-column: 1 / -1;
        grid-row: 2;
        min-height: 2.25rem;
        padding-block: 0.25rem;
        border: 0;
        background: transparent;
        box-shadow: none;
        font-size: 0.8125rem;
        color: var(--text-muted);
        text-decoration: underline;
    }

    /* El último campo no queda detrás de la barra (alto de la barra + safe-area + aire). */
    body:has(.emit-action-bar) .content,
    body:has(.bottom-nav):has(.emit-action-bar) .content {
        padding-bottom: calc(7.5rem + env(safe-area-inset-bottom));
    }

    .emit-form :is(input, select, textarea) {
        scroll-margin-bottom: 7.5rem;
    }

    /* Ítems: la misma fila del formset es una tarjeta compacta (descripción arriba; cantidad x
       precio; IVA e importe; descuento al final). El tacho pasa a 44px. */
    .emission-lines-table-wrap tr.emission-line-row {
        row-gap: 0.25rem;
        background: var(--bg-card);
    }

    .emission-lines-table-wrap tr.emission-line-row td[data-label="Descripción"]::before {
        min-height: 2.75rem;
        padding-right: 3rem;
    }

    .emission-lines-table-wrap tr.emission-line-row td:last-child {
        top: 0;
        right: 0;
    }

    .emission-lines-table-wrap .remove-line-btn {
        width: 2.75rem;
        height: 2.75rem;
    }

    .emission-lines-table-wrap tr.emission-line-row td.line-amount {
        align-self: end;
        font-size: 1.125rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .emit-add-line {
        width: 100%;
        min-height: 3rem;
        justify-content: center;
    }

    /* ---- Listas a filas (F5): ruido fuera, buscar arriba, filtros en hoja, paginador ---- */

    /* Variante de escritorio de una lista migrada (tabla, KPI, botones «Nueva …», intro). */
    .ds-table-desktop,
    .ds-desktop-only {
        display: none !important;
    }

    .ds-summary-line {
        display: block;
        margin: 0;
        color: var(--text-muted);
        font-size: 0.875rem;
    }

    .ds-list-tools {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .ds-list-tools__search {
        flex: 1 1 0;
        min-width: 0;
        min-height: 3rem;
        font-size: 1rem;
    }

    .ds-list-tools__filter {
        flex: 0 0 auto;
        min-height: 3rem;
    }

    .ds-sheet .ds-filter-field {
        display: block;
        margin-bottom: 0.75rem;
    }

    .ds-sheet .ds-filter-field select,
    .ds-sheet .ds-filter-field input {
        min-height: 3rem;
        font-size: 1rem;
    }

    .ds-sheet__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
    }

    .ds-sheet__actions .btn {
        min-height: 3rem;
    }

    /* Paginador móvil «‹ Página N de M ›»: botones de 44px. */
    .ds-pager {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding-top: 0.5rem;
    }

    .ds-pager__btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 2.75rem;
        min-height: 2.75rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-card);
        background: var(--bg-card);
        color: var(--text-heading);
        font-size: 1.25rem;
        text-decoration: none;
    }

    .ds-pager__btn[aria-disabled="true"] {
        opacity: 0.4;
        pointer-events: none;
    }

    .ds-pager__label {
        color: var(--text-muted);
        font-size: 0.875rem;
    }

    /* Acciones con formulario dentro de una fila (Equipo): select + guardar en una línea. */
    .ds-row__actions form {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .ds-row__actions select {
        min-height: 3rem;
        font-size: 1rem;
    }

    /* Iteración 2: una sola superficie (sin tarjeta dentro de tarjeta), filas de borde a borde. */
    .card.ds-flat-mobile,
    .ds-flat-mobile .card.saas-table-card {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    /* Bloques planos apilados: sin tarjeta que los separe, un filete y aire entre uno y otro. */
    .card.ds-flat-mobile ~ .card.ds-flat-mobile {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--border-color);
    }

    .card.ds-flat-mobile > .card-body,
    .ds-flat-mobile .saas-table-card > .card-body {
        padding: 0;
    }

    /* La fila abre el detalle, que tiene las acciones: un toque obvio por fila. */
    .documents-rows .ds-row__actions {
        display: none;
    }

    .ds-btn-block-mobile {
        width: 100%;
        min-height: 3rem;
        justify-content: center;
    }

    /* ---- Detalles y configuración (F6) ---- */

    /* Variante mobile de un detalle: «‹ Volver», «⋯», estado con texto y total. */
    .ds-mobile-only {
        display: block;
    }

    .detail-mobile-top {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .detail-mobile-top__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    /* Estado, total y «⋯» en una sola línea (sin banda vacía arriba). */
    .detail-mobile-top__row {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .detail-mobile-top__row .detail-summary {
        flex: 1 1 auto;
        min-width: 0;
    }

    .detail-mobile-top__row .detail-more {
        flex: 0 0 auto;
    }

    .detail-mobile-top__bar--end {
        justify-content: flex-end;
    }

    /* Anterior/siguiente no se usa en el teléfono: se vuelve a la lista. */
    .ds-document-pager {
        display: none;
    }

    .detail-more {
        width: 2.75rem;
        min-height: 2.75rem;
        padding: 0;
        justify-content: center;
    }

    .detail-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 0.5rem 1rem;
        margin: 0;
    }

    .detail-summary__item dt {
        color: var(--text-muted);
        font-size: 0.75rem;
    }

    .detail-summary__item dd {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem;
        margin: 0;
    }

    .detail-summary__sub {
        color: var(--text-muted);
        font-size: 0.875rem;
    }

    .detail-summary__total {
        color: var(--text-heading);
        font-size: 1.5rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    /* Hoja «⋯»: filas de 44px; lo destructivo se distingue y su confirmación vive en el destino. */
    .detail-sheet__list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .detail-sheet__item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        width: 100%;
        min-height: 3rem;
        padding: 0.5rem 0;
        border: 0;
        border-bottom: 1px solid var(--border-color);
        background: transparent;
        color: var(--text-heading);
        font: inherit;
        font-weight: 600;
        text-align: left;
        text-decoration: none;
        cursor: pointer;
    }

    .detail-sheet__item--danger {
        color: var(--color-danger, var(--text-heading));
    }

    /* Formularios de una columna dentro de una grilla de Tailwind (cliente: sm:grid-cols-2). */
    .ds-form--stack .grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ds-form--stack .ds-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .ds-form--stack [type="submit"],
    .ds-form--stack .ds-form-actions .btn {
        width: 100%;
        min-height: 3rem;
        justify-content: center;
    }

    .ds-form--stack .saas-btn-primary {
        min-height: 3rem;
    }

    /* Los modales de formulario del facturador (Datos fiscales, Predeterminados) son hojas. */
    body:has(.bottom-nav) .ds-form-modal:modal {
        inset: auto 0 0 0;
        margin: 0 !important;
        width: 100%;
        max-width: 100%;
        max-height: 90dvh;
        border-radius: var(--radius-card) var(--radius-card) 0 0;
        padding-bottom: env(safe-area-inset-bottom);
    }

    body:has(.bottom-nav) .ds-form-modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
        min-height: 3rem;
        font-size: 1rem;
    }

    body:has(.bottom-nav) .ds-form-modal__footer .btn {
        min-height: 3rem;
    }

    /* ---- Menú de la hamburguesa (panel lateral): filas de 44px con chevron, por sección ----
       Solo el facturador (donde existe la barra inferior): el estudio conserva su menú tal cual. */
    body:has(.bottom-nav) .sidenav .sidebar-section-toggle {
        min-height: 2.75rem;
    }

    body:has(.bottom-nav) .sidenav .menu-link {
        position: relative;
        min-height: 2.75rem;
        padding-right: 2rem;
    }

    body:has(.bottom-nav) .sidenav .menu-link::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 0.875rem;
        width: 0.5rem;
        height: 0.5rem;
        border-top: 2px solid currentColor;
        border-right: 2px solid currentColor;
        opacity: 0.6;
        transform: translateY(-50%) rotate(45deg);
    }

    body:has(.bottom-nav) .sidenav .menu-hotkey-badge {
        display: none;
    }

    /* ---- Lista de 3 líneas a dos columnas (Documentos, luego Clientes) sobre superficie blanca ---- */

    /* Superficie de la lista: --bg-card (blanco en claro, la tarjeta del tema en oscuro). */
    .ds-rows[data-rows-layout="split"] {
        overflow: hidden;
        border: 1px solid var(--border-color);
        border-radius: 0.75rem;
        background: var(--bg-card);
    }

    .ds-rows[data-rows-layout="split"] .ds-row__meta,
    .ds-rows[data-rows-layout="split"] .ds-row__status {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .ds-rows[data-rows-layout="split"] .ds-row__col {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ds-rows[data-rows-layout="split"] .ds-row__col--end {
        flex: 0 0 auto;
        margin-left: auto;
        text-align: right;
    }

    .ds-rows[data-rows-layout="split"] .ds-row__status {
        color: var(--text-muted);
        font-size: 0.875rem;
    }

    /* Consultas: una columna, botones de 48px y a todo el ancho; la hoja de compartir apila sus acciones. */
    .lookup-form .ds-filters-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-left: 0;
    }

    .lookup-form .ds-filters-actions .btn,
    .ds-share-actions .btn {
        width: 100%;
        min-height: 3rem;
        justify-content: center;
    }

    .ds-share-trigger {
        min-width: 2.75rem;
        min-height: 2.75rem;
        margin-left: auto;
    }

    /* Equipo: pestañas Miembros/Roles a todo el ancho bajo el título */
    .team-tabs {
        display: flex;
    }

    .team-tabs .ds-segmented__item {
        flex: 1;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* «Guardar como borrador»: bajo el CTA principal, ancho completo (`.emit-submit` ya es 100%). */

    /* Chips en fila: sin barra de scroll y con un desvanecido a la derecha que delata que hay más. */
    .ds-chips {
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 2rem), transparent);
    }

    /* Contactos: el buscador queda a 16px del header (sin el padding de `.content` ni el hueco de `space-y`). */
    .space-y-4.ds-list-top-flush > .card:first-of-type:not([hidden]) {
        margin-top: calc(-1 * var(--space-base));
    }

    /* Contactos: círculo de iniciales a la izquierda y chevron centrado en la fila (alto de las dos líneas). */
    .ds-customer-rows .ds-row:has(> .avatar) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.75rem;
        align-items: center;
        padding-right: 2.5rem;
    }

    .ds-customer-rows .ds-row > .avatar {
        grid-row: 1 / span 2;
    }

    .ds-customer-rows .ds-row .ds-row__chevron {
        position: absolute;
        top: 50%;
        right: 0.875rem;
        transform: translateY(-50%);
    }

    /* Barra de sección (Productos · Stock · Compras): pegada al header; anula el margen de `space-y` del primer hijo visible. */
    .space-y-4 > .ds-subnav-wrap:not([hidden]) {
        margin-top: 0;
    }

    /* Barra de tipo de página (Documentos): como la de sección, a todo el ancho y pegada al header. */
    .ds-subnav-wrap--page {
        position: sticky;
    }

    .ds-subnav--inline {
        margin: calc(-1 * var(--space-base)) calc(-1 * var(--space-base)) 0.75rem;
    }

    /* Con la barra de sección, el bloque «Volver a …/título» sobra (la barra navega); queda en el DOM para lectores de pantalla. */
    .content:has(.ds-subnav-wrap) > .page-title-shell {
        height: 0;
        margin: 0;
        overflow: hidden;
    }

    .ds-chips--mobile-row {
        display: flex;
    }

    .ds-chips::-webkit-scrollbar {
        display: none;
    }

    /* KPIs en 2 columnas: el importe no parte «Gs.» de la cifra. */
    .ds-kpi-grid .kpi-value {
        white-space: nowrap;
        font-size: 1.125rem !important;
    }

    /* Detalle: valores monoespaciados largos (CDC, clave de reintento) cortan en cualquier carácter. */
    .ds-detail-row dd.font-mono,
    .ds-detail-row dd code {
        min-width: 0;
        word-break: break-all;
        overflow-wrap: anywhere;
    }


    /* Lotes: la acción va después de la introducción (la de la cabecera se oculta). */
    body:has(.batches-create--inline) .page-title-actions {
        display: none;
    }

    .batches-create--inline {
        display: block;
    }

    /* ---- Emitir 2026-10-20: resumen arriba, cabecera 2x2, hoja de ítem y barra de 3 botones ---- */
    /* Resumen: total y desglose arriba de todo (los totales del final se ocultan). */
    .emit-summary {
        display: block;
        position: sticky;
        top: var(--topbar-height);
        z-index: 30;
        margin-inline: calc(-1 * var(--space-base));
        border: 0;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        background: var(--bg-card);
        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    }

    /* Avisos del borrador/corrección: debajo del Total (los de escritorio, `ds-desktop-only`, se ocultan). */
    .emit-notice-mobile {
        display: block;
    }

    /* El Total abre el form (pegado al header) salvo que lo preceda el panel de resultado: el sticky compensa
       el padding de `.content` (su propio margen de `space-y-4` se reemplaza). Los avisos de escritorio ocultos (`ds-desktop-only`) no cuentan: se anula el margen del form. */
    .emit-form:is(:first-child, .ds-desktop-only:first-child + .emit-form, .ds-desktop-only:first-child + .ds-desktop-only + .emit-form) {
        margin-top: 0;
    }

    .emit-form:is(:first-child, .ds-desktop-only:first-child + .emit-form, .ds-desktop-only:first-child + .ds-desktop-only + .emit-form) > .emit-summary:not([hidden]) {
        margin-top: calc(-1 * var(--space-base));
    }

    .emit-form > .emit-summary:not([hidden]) {
        margin-bottom: 1rem;
    }

    /* Cobro > «Más opciones»: los campos van en un <details> de bloque (sin el gap de 0.75rem de
       `.emit-payment-fields`) y quedaban pegados; misma separación que el resto de la sección. */
    .emit-payment-fields .emit-more > .emit-field {
        margin-bottom: 0.75rem;
    }

    .emit-summary__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        min-height: 3.25rem;
        padding: 0.5rem 1rem;
        list-style: none;
        cursor: pointer;
    }

    .emit-summary__head::-webkit-details-marker {
        display: none;
    }

    .emit-summary__label {
        display: flex;
        flex-direction: column;
        color: var(--text-muted);
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .emit-summary__items {
        font-weight: 400;
        text-transform: none;
        letter-spacing: 0;
    }

    .emit-summary__amount {
        color: var(--text-heading);
        font-size: 1.375rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
    }

    .emit-summary__amount::after {
        content: "\25BE";
        margin-left: 0.375rem;
        color: var(--text-muted);
        font-size: 0.875rem;
    }

    .emit-summary[open] .emit-summary__amount::after {
        content: "\25B4";
    }

    .emit-summary__list {
        margin: 0;
        padding: 0 1rem 0.75rem;
        border-top: 1px dashed var(--border-color);
    }

    .emit-summary__list > div {
        display: flex;
        justify-content: space-between;
        padding-top: 0.375rem;
        font-size: 0.875rem;
    }

    .emit-summary__list dt {
        color: var(--text-muted);
    }

    .emit-payment-grid > .emit-totals {
        display: none;
    }

    /* Cabecera: timbrado y número lado a lado; condición y moneda a todo el ancho. */
    .emit-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.5rem;
    }

    .emit-head__tile {
        padding: 0.625rem 0.75rem;
    }

    .emit-head__tile--condition,
    .emit-head__tile--currency {
        grid-column: 1 / -1;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.75rem;
    }

    .emit-head__tile--condition > .emit-head__label,
    .emit-head__tile--currency > .emit-head__label {
        flex: 0 0 5.5rem;
    }

    .emit-head__tile--condition .ds-seg-group,
    .emit-head__tile--currency .emit-doc-strip__currency {
        flex: 1;
    }

    .emit-head__tile--currency .emit-doc-strip__rate {
        flex: 1 1 100%;
    }

    .emit-head__value {
        font-size: 0.9375rem;
    }

    /* Condición y moneda más compactas (Timbrado/N.º no cambian). */
    .emit-head__tile--condition,
    .emit-head__tile--currency {
        padding: 0.25rem 0.75rem;
    }

    .emit-head .ds-seg__opt {
        min-height: 2rem;
        font-size: 0.875rem;
    }

    /* Ítems: línea de solo lectura; los campos viven en la hoja (`is-editing`). */
    .emission-lines-table-wrap tr.emission-line-row--sheet:not(.is-editing) {
        padding: 0;
        overflow: hidden;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet:not(.is-editing) > td:not(.emit-line-summary),
    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td.emit-line-summary {
        display: none;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet:not(.is-editing) {
        display: block;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet > td.emit-line-summary,
    .emission-lines-table-wrap tr.emission-line-row--sheet > td.emit-line-sheet-head {
        grid-column: 1 / -1;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet:not(.is-editing) > td.emit-line-summary {
        display: block;
        padding: 0 !important;
    }

    .emission-lines-table-wrap td.emit-line-summary::before,
    .emission-lines-table-wrap td.emit-line-sheet-head::before {
        display: none !important;
    }

    .emit-line-summary__btn {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        width: 100%;
        min-height: 3.5rem;
        padding: 0.625rem 0.875rem;
        border: 0;
        background: transparent;
        color: inherit;
        text-align: left;
    }

    .emit-line-summary__main {
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        min-width: 0;
    }

    .emit-line-summary__desc {
        overflow: hidden;
        color: var(--text-heading);
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .emit-line-summary__meta {
        color: var(--text-muted);
        font-size: 0.8125rem;
    }

    .emit-line-summary__amount {
        flex-shrink: 0;
        color: var(--text-heading);
        font-weight: 700;
    }

    /* Un error del servidor en la fila se ve en la línea cerrada. */
    .emission-lines-table-wrap tr.emission-line-row--sheet:has(.text-danger-700):not(.is-editing) {
        border-color: var(--color-danger, #dc2626);
    }

    .emission-line-row--sheet:has(.text-danger-700) .emit-line-summary__meta::after {
        content: " \00B7  Revisá este ítem";
        color: var(--color-danger, #dc2626);
    }

    /* Hoja a pantalla completa con los MISMOS campos de la fila. */
    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing {
        position: fixed;
        inset: 0;
        z-index: 70;
        margin: 0;
        padding: 0 1rem calc(1.5rem + env(safe-area-inset-bottom));
        border: 0;
        border-radius: 0;
        background: var(--bg-card);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td.emit-line-sheet-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: auto;
        margin: 0 -1rem 0.5rem;
        padding: 0.75rem 1rem !important;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-card);
    }

    .emit-line-sheet-head__title {
        color: var(--text-heading);
        font-size: 1.125rem;
        font-weight: 700;
    }

    /* Orden de la hoja: descripción/producto, cantidad + precio, descuento, IVA, importe y botones. */
    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td {
        order: 2;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td.emit-line-sheet-head {
        order: 0;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td[data-label="Descripción"] {
        order: 1;
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td[data-label="Descuento"] {
        order: 3;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td[data-label="IVA"] {
        order: 4;
        grid-column: 1 / -1;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td.line-amount {
        order: 5;
        grid-column: 1 / -1;
        border-top: 1px solid var(--border-color);
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td:last-child {
        order: 6;
        grid-column: 1 / -1;
    }

    /* Un solo campo: la descripción es también el buscador de catálogo (el buscador propio se oculta). */
    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing [data-product-picker-input] {
        display: none;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing .product-picker {
        order: 1;
        margin: 0;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td[data-label="Descripción"] > .mt-1 {
        order: 2;
    }

    /* Pie: Eliminar, Cancelar y Confirmar en una fila. */
    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td:last-child {
        position: static;
        display: flex;
        gap: 0.5rem;
        padding-top: 1rem !important;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td:last-child > .emit-line-sheet-foot {
        display: contents;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing > td:last-child > .table-action-btn,
    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing .emit-line-sheet-foot-btn {
        display: inline-flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 0;
        min-height: 2.75rem;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing .remove-line-btn {
        gap: 0.5rem;
    }

    .emission-lines-table-wrap tr.emission-line-row--sheet.is-editing .remove-line-btn::after {
        content: "Eliminar";
        font-weight: 600;
    }

    html.emit-line-sheet-open,
    html.emit-line-sheet-open body {
        overflow: hidden;
    }

    html.emit-line-sheet-open .emit-action-bar,
    html.emit-line-sheet-open .emit-summary {
        visibility: hidden;
    }

    /* «Agregar ítem»: una línea más, con el + a la derecha. */
    .emit-add-line {
        flex-direction: row-reverse;
        justify-content: space-between;
        border-style: dashed;
        background: transparent;
    }

    /* Barra inferior: Cancelar · Borrador · Emitir, a lo ancho. El total ya está arriba. */
    .emit-action-bar {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
        padding-top: 0.625rem;
    }

    .emit-action-bar__total {
        display: none;
    }

    .emit-action-bar:has([data-anonymous-over]:not([hidden])) .emit-action-bar__total {
        display: flex;
        grid-column: 1 / -1;
    }

    .emit-action-bar__total > :not([data-anonymous-over]) {
        display: none;
    }

    .emit-action-bar .emit-cancel,
    .emit-action-bar .emit-submit-secondary,
    .emit-action-bar .emit-submit {
        grid-row: auto;
        grid-column: auto;
        width: 100%;
        min-height: 3rem;
        justify-content: center;
        padding-inline: 0.5rem;
        font-size: 0.9375rem;
        text-decoration: none;
    }

    .emit-action-bar .emit-submit-secondary {
        border: 1px solid var(--border-color-strong);
        background: var(--bg-card);
        color: var(--text-heading);
        box-shadow: none;
    }

    .emit-action-bar .emit-cancel { order: 1; }
    .emit-action-bar .emit-submit-secondary { order: 2; }
    .emit-action-bar .emit-submit { order: 3; }

    /* Sin borrador (editar borrador / corregir): 2 botones. */
    .emit-action-bar:not(:has(.emit-submit-secondary)) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    .emit-submit__long {
        display: none;
    }

    .emit-submit__short {
        display: inline;
    }

    body:has(.emit-action-bar) .content,
    body:has(.bottom-nav):has(.emit-action-bar) .content {
        padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
    }
}