/* =====================================================================
   PROYECTO ARK · Responsive + menú hamburguesa
   Hoja ADITIVA: solo añade reglas para móvil/tablet y el menú.
   No modifica el diseño de escritorio (todo va dentro de @media o
   aplica solo al botón hamburguesa, que está oculto por defecto).
   ===================================================================== */

/* ---------- Menú: usa más ancho y deja respirar los enlaces ---------- */
.logo { white-space: nowrap; flex-shrink: 0; }
.header .contenedor { width: min(95%, 150rem); }
.nav { gap: 2rem; }
.nav a { font-size: 1.45rem; padding: .4rem .25rem; }
.nav__usuario { font-size: 1.35rem; padding-left: .6rem; }

/* ---------- Enlace de la zona actual en el menú ---------- */
.nav a.activo {
    color: #fff;
    border-bottom-color: #0F766E;
}

/* ---------- Botón hamburguesa (oculto en escritorio) ---------- */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: .5rem;
    width: 4.6rem;
    height: 4.6rem;
    padding: 1rem;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .22);
    border-radius: .9rem;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.nav-toggle:hover { border-color: rgba(255, 255, 255, .45); }
.nav-toggle span {
    display: block;
    height: .3rem;
    width: 100%;
    background: #E7E5E4;
    border-radius: 2px;
    transition: transform .28s ease, opacity .2s ease;
}
.nav-toggle.abierto span:nth-child(1) { transform: translateY(.8rem) rotate(45deg); }
.nav-toggle.abierto span:nth-child(2) { opacity: 0; }
.nav-toggle.abierto span:nth-child(3) { transform: translateY(-.8rem) rotate(-45deg); }

/* =====================================================================
   MENÚ HAMBURGUESA  ( <= 1500px )
   El menú se colapsa en hamburguesa hasta 1500px (móvil, tablet y
   pantallas medianas). A partir de 1501px se muestra la navbar completa,
   que es cuando de verdad caben todos los enlaces sin apretarse.
   ===================================================================== */
@media (max-width: 1500px) {

    /* --- Cabecera: logo a la izquierda, hamburguesa a la derecha --- */
    .barra {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        flex-wrap: wrap;
        gap: 1rem;
    }
    .nav-toggle { display: flex; }

    /* --- El menú se colapsa y se despliega al tocar --- */
    .nav {
        flex-basis: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .32s ease;
    }
    .nav.abierto { max-height: 80rem; }
    .nav a {
        width: 100%;
        padding: 1.35rem .6rem !important;
        font-size: 1.6rem !important;
        text-align: center;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    }
    .nav a:hover { border-bottom-color: rgba(255, 255, 255, .08) !important; }
    .nav__usuario {
        order: -1;                 /* el saludo aparece arriba del todo */
        width: 100%;
        text-align: center;
        padding: 1.2rem .6rem !important;
        font-size: 1.45rem;
    }
    .nav__logout { width: 100%; padding: 1.1rem 0 .4rem; }
    .nav__logout input { width: 100%; padding: 1.1rem; }
    .nav__logo-link { display: none !important; }   /* logo redundante con hamburguesa */
}

/* =====================================================================
   MÓVIL  ( <= 767px )
   ===================================================================== */
@media (max-width: 767px) {

    /* --- Tablas: más compactas para leer mejor (siguen con scroll) --- */
    .tabla { font-size: 1.4rem; }
    .tabla th, .tabla td { padding: 1.1rem 1.2rem; }
    .tabla--catalogo { font-size: 1.45rem; }
    .tabla--catalogo .tabla__acciones { min-width: 12rem; }

    /* --- Buscador a todo el ancho --- */
    .barra-acciones { gap: 1rem; }
    .buscador { margin-left: 0; width: 100%; }
    .buscador input[type="search"] { min-width: 0; width: 100%; }

    /* --- Paddings de página más cómodos --- */
    .admin { padding: 2.4rem 0 3.5rem; }
    .clientes-pagina { padding: 2.6rem 0 3.5rem; }
    .panel { padding: 2.6rem 0 3.5rem; }

    /* --- Cabeceras / barras centradas --- */
    .cat-cliente-barra { justify-content: center; text-align: center; }
    .cat-cliente-barra__nombre { width: 100%; }
    /* El botón "Ver resumen anual" deja de empujarse a la derecha y se centra */
    .cat-cliente-barra .boton { margin-left: 0 !important; }

    /* --- Centrar casi toda la información escrita en celular --- */
    .seccion__cabecera { justify-content: center; text-align: center; }
    .seccion__titulo { width: 100%; }
    .seccion__nota { margin-left: 0; margin-right: 0; text-align: center; }
    .barra-acciones { justify-content: center; }
    .form-sub { text-align: center; }
    .preview-imagen { justify-content: center; }
    .estado-control { justify-content: center; }
    .acciones-linea { justify-content: center; }

    /* --- Formularios en línea: apilados y a todo el ancho en celular --- */
    .form-remision {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .form-remision .fr-campo { width: 100%; }
    .form-remision .fr-campo input { width: 100% !important; max-width: 100% !important; }
    .form-remision > .boton,
    .form-remision > input[type="submit"] { width: 100%; }

    /* --- Utilidad: botón al ancho completo solo en celular --- */
    .movil-ancho { width: 100% !important; display: block; }

    /* --- "Generar gastos fijos": el texto va debajo, no encimado --- */
    .movil-ancho + .seccion__nota { display: block !important; margin: .8rem 0 0 !important; text-align: center; }

    /* --- "← Volver" del pedido como botón a todo el ancho --- */
    .boton-volver-movil {
        display: block;
        width: 100%;
        margin-top: 1rem;
        padding: 1rem;
        text-align: center;
        border: 1.5px solid var(--neutro_300, #D6D3D1);
        border-radius: .8rem;
        color: #0F766E;
        font-weight: 600;
    }

    /* --- Tabla de totales y formularios al ancho --- */
    .tabla--totales { max-width: 100%; }
    .formulario { padding: 2.2rem; }
    .tarjeta-form { padding: 1.6rem; }

    /* --- Formularios de pedido: apilar campos --- */
    .form-remision .fr-campo input,
    .fr-campo--ancho input { max-width: 100%; }
    .fr-campo { width: 100%; }
    .editar-linea input { max-width: 100%; }

    /* --- Acciones de formulario en columna --- */
    .acciones { justify-content: center; }

    /* ===================================================================
       CATÁLOGO EN CELULAR · tarjetas desplegables (acordeón)
       CERRADA: solo NOMBRE + PRECIO + flecha (sin botones).
       ABIERTA: imagen a la IZQUIERDA · código/color/precio a la DERECHA ·
       los 4 botones ABAJO. Sin borde ni fondo de color (solo en celular).
       =================================================================== */
    .seccion--catalogo .tabla-scroll,
    .seccion--desactivados .tabla-scroll,
    .seccion--papelera .tabla-scroll {
        overflow: visible;
        box-shadow: none;
        border-radius: 0;
    }

    .tabla--prodcat,
    .tabla--prodcat tbody { display: block; width: 100%; }
    .tabla--prodcat thead { display: none; }
    .tabla--prodcat { border-top: none !important; }   /* quita el verde/amarillo/rojo en celular */

    /* Tarjeta (cerrada = columna) */
    .tabla--prodcat tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1.5px solid #E7E5E4;
        border-radius: 1.1rem;
        margin-bottom: 1.1rem;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .tabla--prodcat tr.fila--inactiva { opacity: 1; }

    /* Base: celdas ocultas */
    .tabla--prodcat td { width: 100%; border: none !important; font-size: 1.5rem; }

    /* NOMBRE (arriba, centrado) + flecha — SIEMPRE visible */
    .tabla--prodcat td.celda-desc {
        display: block;
        order: -2;
        position: relative;
        cursor: pointer;
        text-align: center;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.35;
        padding: 1.25rem 3.6rem !important;
        background: #FAF9F7;
    }
    .tabla--prodcat td.celda-desc::after {
        content: '⌄';
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-60%);
        font-size: 2.3rem;
        color: #A8A29E;
        transition: transform .22s ease;
    }
    .tabla--prodcat tr.abierto td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    /* PRECIO — SIEMPRE visible (resumen en la tarjeta cerrada) */
    .tabla--prodcat td.tabla__precio {
        display: block;
        order: -1;
        text-align: center;
        font-weight: 700;
        color: #0F766E;
        padding: .9rem 1.2rem !important;
    }
    .tabla--prodcat td.tabla__precio::before { content: 'Precio: '; color: #78716C; font-weight: 600; }

    /* El resto: OCULTO mientras está cerrada (incluidos los botones) */
    .tabla--prodcat td.celda-foto,
    .tabla--prodcat td:nth-child(2),
    .tabla--prodcat td:nth-child(4),
    .tabla--prodcat td.tabla__acciones { display: none !important; }

    /* ABIERTA: grid → NOMBRE (full) · imagen+datos CENTRADOS · botones (full).
       Columnas espaciadoras (1fr) a los lados para centrar el bloque imagen+datos;
       los datos con text-align:left, pegados a la imagen. */
    .tabla--prodcat tr.abierto {
        display: grid;
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-areas:
            "head head head head"
            ".    foto cod  ."
            ".    foto col  ."
            ".    foto pre  ."
            "acc  acc  acc  acc";
        align-items: center;
        column-gap: 1.3rem;
        row-gap: .15rem;
    }
    .tabla--prodcat tr.abierto td.celda-desc { grid-area: head; }
    .tabla--prodcat tr.abierto td.celda-foto {
        grid-area: foto;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 1.3rem 0 !important;
    }
    .tabla--prodcat tr.abierto td.celda-foto .miniatura { width: 10rem; height: 10rem; border-radius: .9rem; }

    .tabla--prodcat tr.abierto td:nth-child(2) { grid-area: cod; display: block !important; text-align: left; padding: .35rem 0 !important; white-space: nowrap; }
    .tabla--prodcat tr.abierto td:nth-child(4) { grid-area: col; display: block !important; text-align: left; padding: .35rem 0 !important; white-space: nowrap; }
    .tabla--prodcat tr.abierto td.tabla__precio { grid-area: pre; text-align: left; padding: .35rem 0 !important; white-space: nowrap; }
    .tabla--prodcat td:nth-child(2)::before { content: 'Código: '; color: #78716C; font-weight: 600; }
    .tabla--prodcat td:nth-child(4)::before { content: 'Color: ';  color: #78716C; font-weight: 600; }

    /* Los 4 botones ABAJO, en 2 columnas, centrados */
    .tabla--prodcat tr.abierto td.tabla__acciones {
        grid-area: acc;
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: row;
        gap: .6rem;
        width: 100%;
        max-width: 36rem;
        margin: .8rem auto .2rem;
        padding: 1rem 1.2rem 1.3rem !important;
        border-top: 1px solid #F0EFEC;
    }
    .tabla--prodcat td.tabla__acciones .boton { width: 100%; text-align: center; }
    .tabla--prodcat td.tabla__acciones form { width: 100%; margin: 0; }

    /* Sin fondo de color al pasar/tocar (quita el verde/naranja/rojo en celular) */
    .tabla--prodcat tbody tr:hover td { background-color: #fff; }
    .tabla--prodcat tbody tr:hover td.celda-desc { background-color: #FAF9F7; }

    /* Mensaje de "sin productos / papelera vacía": bloque a todo el ancho, centrado */
    .tabla--prodcat td.tabla__vacia {
        display: block !important;
        width: 100%;
        min-width: 100%;
        flex-basis: 100%;
        text-align: center;
        white-space: normal;
        padding: 2rem 1.4rem !important;
        color: #78716C;
        font-style: italic;
    }

    /* ===================================================================
       PEDIDOS EN CELULAR · acordeón (SIN color de fondo, como el catálogo).
       CERRADA: SOLO nombre del pedido + cliente + flecha (sin botones).
       ABIERTA: periodo, estado, piezas, total y botones — todo vertical, centrado.
       =================================================================== */
    .tabla--pedidos,
    .tabla--pedidos tbody { display: block; width: 100%; }
    .tabla--pedidos thead { display: none; }

    .tabla--pedidos tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1.5px solid #E7E5E4;
        border-radius: 1.1rem;
        margin-bottom: 1.1rem;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    /* Quitar el color amarillo/verde de fondo en celular */
    .tabla--pedidos tbody tr td,
    .tabla--pedidos tbody tr.fila-proceso td,
    .tabla--pedidos tbody tr.fila-completado td { background: transparent !important; }
    .tabla--pedidos tr.fila--inactiva { opacity: 1; }

    /* Base: celdas ocultas */
    .tabla--pedidos td {
        display: none;
        width: 100%;
        text-align: center;
        border: none !important;
        font-size: 1.5rem;
        padding: .45rem 1.2rem !important;
    }

    /* NOMBRE del pedido (arriba, centrado) + flecha — SIEMPRE visible */
    .tabla--pedidos td.celda-desc {
        display: block !important;
        order: -2;
        position: relative;
        cursor: pointer;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.3;
        padding: 1.2rem 3.6rem .3rem !important;
        background: #FAF9F7 !important;
    }
    .tabla--pedidos td.celda-desc::after {
        content: '⌄';
        position: absolute;
        right: 1.5rem;
        top: 1.4rem;
        font-size: 2.3rem;
        color: #A8A29E;
        transition: transform .22s ease;
    }
    .tabla--pedidos tr.abierto td.celda-desc::after { transform: rotate(180deg); }

    /* CLIENTE (subtítulo) — SIEMPRE visible */
    .tabla--pedidos td.ped-cliente {
        display: block !important;
        order: -1;
        color: #57534E;
        font-size: 1.45rem;
        background: #FAF9F7 !important;
        padding: 0 1.2rem 1.1rem !important;
    }

    /* El resto (periodo, estado, piezas, total y BOTONES): OCULTO cuando cerrada */
    .tabla--pedidos td[data-label],
    .tabla--pedidos td.tabla__acciones { display: none !important; }

    /* Al abrir: mostrar los datos con su etiqueta */
    .tabla--pedidos tr.abierto td[data-label] { display: block !important; padding: .4rem 1.2rem !important; }
    .tabla--pedidos td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--pedidos td.tabla__precio { font-weight: 700; }

    /* Botones: apilados, centrados, al abrir */
    .tabla--pedidos tr.abierto td.tabla__acciones {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: .55rem;
        max-width: 30rem;
        margin: .7rem auto .2rem;
        padding: .9rem 1.2rem 1.2rem !important;
        border-top: 1px solid #F0EFEC;
    }
    .tabla--pedidos td.tabla__acciones .boton { width: 100%; text-align: center; }
    .tabla--pedidos td.tabla__acciones form { width: 100%; margin: 0; }

    /* Mensaje de vacío */
    .tabla--pedidos td.tabla__vacia {
        display: block !important;
        width: 100%;
        text-align: center;
        white-space: normal;
        padding: 2rem 1.4rem !important;
        color: #78716C;
        font-style: italic;
        background: #fff !important;
    }

    /* ===================================================================
       PRODUCTOS DEL PEDIDO EN CELULAR · acordeón (dentro del detalle del pedido).
       CERRADA: nombre del producto + flecha.
       ABIERTA: foto centrada arriba, luego cantidad, p.unit, importe, entregado,
       pendiente y los botones — todo vertical y centrado.
       =================================================================== */
    .tabla--peditems,
    .tabla--peditems tbody { display: block; width: 100%; }
    .tabla--peditems thead { display: none; }

    .tabla--peditems tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1.5px solid #E7E5E4;
        border-radius: 1.1rem;
        margin-bottom: 1.1rem;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }

    .tabla--peditems td {
        display: none;
        width: 100%;
        text-align: center;
        border: none !important;
        font-size: 1.5rem;
        padding: .4rem 1.2rem !important;
    }

    /* NOMBRE (descripción) arriba + flecha — SIEMPRE visible */
    .tabla--peditems td.celda-desc {
        display: block !important;
        order: -1;
        position: relative;
        cursor: pointer;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.3;
        padding: 1.2rem 3.6rem !important;
        background: #FAF9F7 !important;
    }
    .tabla--peditems td.celda-desc::after {
        content: '⌄';
        position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%);
        font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--peditems tr.abierto td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    /* Cerrada: ocultar foto, datos y botones (el # queda oculto siempre) */
    .tabla--peditems td.celda-foto,
    .tabla--peditems td[data-label],
    .tabla--peditems td.celda-acc { display: none !important; }

    /* ABIERTA: foto centrada arriba */
    .tabla--peditems tr.abierto td.celda-foto {
        display: block !important; order: 0;
        padding: 1.4rem 1.2rem .4rem !important;
    }
    .tabla--peditems td.celda-foto .miniatura {
        width: 11rem; height: 11rem; margin: 0 auto; display: inline-block; border-radius: .9rem;
    }

    /* ABIERTA: datos con etiqueta, centrados */
    .tabla--peditems tr.abierto td[data-label] {
        display: block !important; order: 1; padding: .4rem 1.2rem !important;
    }
    .tabla--peditems td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--peditems td.tabla__precio { font-weight: 700; }

    /* ABIERTA: botones abajo, apilados y centrados */
    .tabla--peditems tr.abierto td.celda-acc {
        display: block !important; order: 2;
        max-width: 30rem; margin: .6rem auto .2rem;
        padding: .9rem 1.2rem 1.2rem !important;
        border-top: 1px solid #F0EFEC;
    }
    .tabla--peditems td.celda-acc .acciones-linea {
        flex-direction: column; align-items: center; gap: .55rem;
    }
    .tabla--peditems td.celda-acc .boton { width: 100%; text-align: center; }
    .tabla--peditems td.celda-acc form { width: 100%; margin: 0; }

    /* Vacío */
    .tabla--peditems td.tabla__vacia {
        display: block !important; width: 100%; text-align: center; white-space: normal;
        padding: 2rem 1.4rem !important; color: #78716C; font-style: italic; background: #fff !important;
    }

    /* ===================================================================
       REGISTRAR ENTREGA EN CELULAR · acordeón.
       CERRADA: solo la descripción del producto + flecha.
       ABIERTA: color, entregado, pendiente y el campo «Entregar ahora».
       (El botón «Registrar entrega» queda abajo del formulario, como siempre.)
       =================================================================== */
    .tabla--regentrega,
    .tabla--regentrega tbody { display: block; width: 100%; }
    .tabla--regentrega thead { display: none; }

    .tabla--regentrega tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1.5px solid #E7E5E4;
        border-radius: 1.1rem;
        margin-bottom: 1.1rem;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .tabla--regentrega tbody tr td,
    .tabla--regentrega tbody tr.fila-completado td { background: transparent !important; }

    .tabla--regentrega td {
        display: none;
        width: 100%;
        text-align: center;
        border: none !important;
        font-size: 1.5rem;
        padding: .4rem 1.2rem !important;
    }

    /* NOMBRE (descripción) arriba + flecha — SIEMPRE visible */
    .tabla--regentrega td.celda-desc {
        display: block !important;
        order: -1;
        position: relative;
        cursor: pointer;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.3;
        padding: 1.2rem 3.6rem !important;
        background: #FAF9F7 !important;
    }
    .tabla--regentrega td.celda-desc::after {
        content: '⌄';
        position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%);
        font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--regentrega tr.abierto td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    /* Cerrada: ocultar datos y el campo */
    .tabla--regentrega td[data-label] { display: none !important; }

    /* Abierta: datos con etiqueta, centrados */
    .tabla--regentrega tr.abierto td[data-label] {
        display: block !important; padding: .5rem 1.2rem !important;
    }
    .tabla--regentrega td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--regentrega td.tabla__precio { font-weight: 700; }
    .tabla--regentrega td[data-label] input { margin-top: .35rem; text-align: center; }

    /* ===================================================================
       ENTREGAS REGISTRADAS EN CELULAR · acordeón.
       CERRADA: solo la fecha de entrega + flecha.
       ABIERTA: productos, cantidad, total de piezas y botones (Editar/Borrar).
       La fila del formulario de edición (js-ent-form) se muestra a lo ancho.
       Scoping con «> tbody > tr > td» para NO afectar la tabla anidada de edición.
       =================================================================== */
    .tabla--entregas,
    .tabla--entregas > tbody { display: block; width: 100%; }
    .tabla--entregas thead { display: none; }

    .tabla--entregas > tbody > tr:not(.js-ent-form) {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1.5px solid #E7E5E4;
        border-radius: 1.1rem;
        margin-bottom: 1.1rem;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }

    .tabla--entregas > tbody > tr > td {
        display: none;
        width: 100%;
        text-align: center;
        border: none !important;
        font-size: 1.5rem;
        padding: .4rem 1.2rem !important;
    }

    /* FECHA arriba + flecha — SIEMPRE visible */
    .tabla--entregas > tbody > tr > td.celda-desc {
        display: block !important;
        order: -1;
        position: relative;
        cursor: pointer;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.3;
        padding: 1.2rem 3.6rem !important;
        background: #FAF9F7 !important;
    }
    .tabla--entregas > tbody > tr > td.celda-desc::after {
        content: '⌄';
        position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%);
        font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--entregas > tbody > tr.abierto > td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    /* Cerrada: ocultar datos y botones */
    .tabla--entregas > tbody > tr > td[data-label],
    .tabla--entregas > tbody > tr > td.celda-acc { display: none !important; }

    /* Abierta: datos con etiqueta, centrados */
    .tabla--entregas > tbody > tr.abierto > td[data-label] {
        display: block !important; padding: .5rem 1.2rem !important;
    }
    .tabla--entregas > tbody > tr > td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--entregas > tbody > tr > td.tabla__precio { font-weight: 700; }
    /* Listas multilínea (Productos / Cantidad): la etiqueta en su propio renglón
       y los valores apilados debajo, centrados. */
    .tabla--entregas > tbody > tr > td[data-label="Productos"]::before,
    .tabla--entregas > tbody > tr > td[data-label="Cantidad"]::before {
        display: block;
        margin-bottom: .25rem;
    }

    /* Abierta: botones abajo, apilados y centrados */
    .tabla--entregas > tbody > tr.abierto > td.celda-acc {
        display: block !important;
        max-width: 30rem; margin: .6rem auto .2rem;
        padding: .9rem 1.2rem 1.2rem !important;
        border-top: 1px solid #F0EFEC;
    }
    .tabla--entregas td.celda-acc .acciones-linea {
        flex-direction: column; align-items: center; gap: .55rem;
    }
    .tabla--entregas td.celda-acc .boton { width: 100%; text-align: center; }
    .tabla--entregas td.celda-acc form { width: 100%; margin: 0; }

    /* Fila del formulario de edición: a lo ancho, sin tarjeta */
    .tabla--entregas > tbody > tr.js-ent-form { display: block; width: 100%; margin: 0 0 1.1rem; }
    .tabla--entregas > tbody > tr.js-ent-form.oculto { display: none !important; }
    .tabla--entregas > tbody > tr.js-ent-form > td {
        display: block !important; width: 100%; padding: 0 !important;
    }

    /* Vacío */
    .tabla--entregas > tbody > tr > td.tabla__vacia {
        display: block !important; width: 100%; text-align: center; white-space: normal;
        padding: 2rem 1.4rem !important; color: #78716C; font-style: italic; background: #fff !important;
    }

    /* ===================================================================
       MAPA DE ENTREGAS EN CELULAR · acordeón (una tarjeta por producto).
       CERRADA: solo el nombre del producto + flecha.
       ABIERTA: un renglón por cada fecha (etiqueta = fecha, con su casilla),
       luego Pedido, Entregado y Pendiente — todo vertical y centrado.
       (El botón «Guardar mapa» queda abajo del formulario, como siempre.
        Editar/borrar una fecha se hace desde «Entregas registradas».)
       =================================================================== */
    .tabla--mapa,
    .tabla--mapa tbody { display: block; width: 100%; }
    .tabla--mapa thead { display: none; }

    .tabla--mapa tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1.5px solid #E7E5E4;
        border-radius: 1.1rem;
        margin-bottom: 1.1rem;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .tabla--mapa tbody tr td { background: transparent !important; }

    .tabla--mapa td {
        display: none;
        width: 100%;
        text-align: center;
        border: none !important;
        font-size: 1.5rem;
        padding: .4rem 1.2rem !important;
    }

    /* NOMBRE (producto) arriba + flecha — SIEMPRE visible */
    .tabla--mapa td.celda-desc {
        display: block !important;
        order: -1;
        position: relative;
        cursor: pointer;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.3;
        padding: 1.2rem 3.6rem !important;
        background: #FAF9F7 !important;
    }
    .tabla--mapa td.celda-desc::after {
        content: '⌄';
        position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%);
        font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--mapa tr.abierto td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    /* Cerrada: ocultar fechas y totales */
    .tabla--mapa td[data-label] { display: none !important; }

    /* Abierta: fechas (con casilla) y totales, etiquetados y centrados */
    .tabla--mapa tr.abierto td[data-label] {
        display: block !important; padding: .5rem 1.2rem !important;
    }
    .tabla--mapa td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--mapa td.tabla__precio { font-weight: 700; }
    .tabla--mapa td[data-label] input { margin-top: .35rem; text-align: center; }

    /* ===================================================================
       ARMAR REMISIÓN EN CELULAR · acordeón (una tarjeta por producto).
       CERRADA: solo la descripción del producto + flecha.
       ABIERTA: color, «en el pedido» y la casilla «cantidad en esta remisión».
       (El botón «Generar remisión PDF» queda abajo del formulario, como siempre.)
       =================================================================== */
    .tabla--armar,
    .tabla--armar tbody { display: block; width: 100%; }
    .tabla--armar thead { display: none; }

    .tabla--armar tr {
        display: flex;
        flex-direction: column;
        background: #fff;
        border: 1.5px solid #E7E5E4;
        border-radius: 1.1rem;
        margin-bottom: 1.1rem;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .tabla--armar tbody tr td { background: transparent !important; }

    .tabla--armar td {
        display: none;
        width: 100%;
        text-align: center;
        border: none !important;
        font-size: 1.5rem;
        padding: .4rem 1.2rem !important;
    }

    /* NOMBRE (descripción) arriba + flecha — SIEMPRE visible */
    .tabla--armar td.celda-desc {
        display: block !important;
        order: -1;
        position: relative;
        cursor: pointer;
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 1.3;
        padding: 1.2rem 3.6rem !important;
        background: #FAF9F7 !important;
    }
    .tabla--armar td.celda-desc::after {
        content: '⌄';
        position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%);
        font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--armar tr.abierto td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    /* Cerrada: ocultar datos y la casilla */
    .tabla--armar td[data-label] { display: none !important; }

    /* Abierta: datos con etiqueta, centrados */
    .tabla--armar tr.abierto td[data-label] {
        display: block !important; padding: .5rem 1.2rem !important;
    }
    .tabla--armar td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--armar td.tabla__precio { font-weight: 700; }
    .tabla--armar td[data-label] input { margin-top: .35rem; text-align: center; }

    /* ===================================================================
       REGISTRO DE REMISIONES EN CELULAR · acordeón (tarjeta por remisión).
       CERRADA: solo el No. de remisión + flecha.
       ABIERTA: fecha, tipo, piezas, total y botones (Abrir / Descargar PDF).
       =================================================================== */
    .tabla--remis,
    .tabla--remis tbody { display: block; width: 100%; }
    .tabla--remis thead { display: none; }

    .tabla--remis tr {
        display: flex; flex-direction: column; background: #fff;
        border: 1.5px solid #E7E5E4; border-radius: 1.1rem; margin-bottom: 1.1rem;
        overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .tabla--remis tbody tr td { background: transparent !important; }

    .tabla--remis td {
        display: none; width: 100%; text-align: center; border: none !important;
        font-size: 1.5rem; padding: .4rem 1.2rem !important;
    }
    .tabla--remis td.celda-desc {
        display: block !important; order: -1; position: relative; cursor: pointer;
        font-weight: 700; font-size: 1.6rem; line-height: 1.3;
        padding: 1.2rem 3.6rem !important; background: #FAF9F7 !important;
    }
    .tabla--remis td.celda-desc::after {
        content: '⌄'; position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%); font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--remis tr.abierto td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    .tabla--remis td[data-label],
    .tabla--remis td.celda-acc { display: none !important; }
    .tabla--remis tr.abierto td[data-label] { display: block !important; padding: .5rem 1.2rem !important; }
    .tabla--remis td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--remis td.tabla__precio { font-weight: 700; }

    .tabla--remis tr.abierto td.celda-acc {
        display: block !important; max-width: 30rem; margin: .6rem auto .2rem;
        padding: .9rem 1.2rem 1.2rem !important; border-top: 1px solid #F0EFEC;
    }
    .tabla--remis td.celda-acc .acciones-linea { flex-direction: column; align-items: center; gap: .55rem; }
    .tabla--remis td.celda-acc .boton { width: 100%; text-align: center; }
    .tabla--remis td.tabla__vacia {
        display: block !important; width: 100%; text-align: center; white-space: normal;
        padding: 2rem 1.4rem !important; color: #78716C; font-style: italic; background: #fff !important;
    }

    /* ===================================================================
       ANTICIPOS EN CELULAR · acordeón (tarjeta por anticipo).
       CERRADA: solo la fecha del anticipo + flecha.
       ABIERTA: No., monto, IVA, tipo, factura, facturado c/IVA y botones.
       La fila del formulario de edición (js-ant-form) se muestra a lo ancho.
       Scoping con «> tbody > tr > td» para NO afectar campos anidados.
       =================================================================== */
    .tabla--anticipos,
    .tabla--anticipos > tbody { display: block; width: 100%; }
    .tabla--anticipos thead { display: none; }

    .tabla--anticipos > tbody > tr:not(.js-ant-form) {
        display: flex; flex-direction: column; background: #fff;
        border: 1.5px solid #E7E5E4; border-radius: 1.1rem; margin-bottom: 1.1rem;
        overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }

    .tabla--anticipos > tbody > tr > td {
        display: none; width: 100%; text-align: center; border: none !important;
        font-size: 1.5rem; padding: .4rem 1.2rem !important;
    }
    .tabla--anticipos > tbody > tr > td.celda-desc {
        display: block !important; order: -1; position: relative; cursor: pointer;
        font-weight: 700; font-size: 1.6rem; line-height: 1.3;
        padding: 1.2rem 3.6rem !important; background: #FAF9F7 !important;
    }
    .tabla--anticipos > tbody > tr > td.celda-desc::after {
        content: '⌄'; position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%); font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--anticipos > tbody > tr.abierto > td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    .tabla--anticipos > tbody > tr > td[data-label],
    .tabla--anticipos > tbody > tr > td.celda-acc { display: none !important; }
    .tabla--anticipos > tbody > tr.abierto > td[data-label] { display: block !important; padding: .5rem 1.2rem !important; }
    .tabla--anticipos > tbody > tr > td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--anticipos > tbody > tr > td.tabla__precio { font-weight: 700; }

    .tabla--anticipos > tbody > tr.abierto > td.celda-acc {
        display: block !important; max-width: 30rem; margin: .6rem auto .2rem;
        padding: .9rem 1.2rem 1.2rem !important; border-top: 1px solid #F0EFEC;
    }
    .tabla--anticipos td.celda-acc .acciones-linea { flex-direction: column; align-items: center; gap: .55rem; }
    .tabla--anticipos td.celda-acc .boton { width: 100%; text-align: center; }
    .tabla--anticipos td.celda-acc form { width: 100%; margin: 0; }

    .tabla--anticipos > tbody > tr.js-ant-form { display: block; width: 100%; margin: 0 0 1.1rem; }
    .tabla--anticipos > tbody > tr.js-ant-form.oculto { display: none !important; }
    .tabla--anticipos > tbody > tr.js-ant-form > td { display: block !important; width: 100%; padding: 0 !important; }

    .tabla--anticipos > tbody > tr > td.tabla__vacia {
        display: block !important; width: 100%; text-align: center; white-space: normal;
        padding: 2rem 1.4rem !important; color: #78716C; font-style: italic; background: #fff !important;
    }

    /* ===================================================================
       AGREGAR ANTICIPO EN CELULAR · formulario apilado (sin scroll lateral).
       =================================================================== */
    .tabla--antform,
    .tabla--antform tbody,
    .tabla--antform tr { display: block; width: 100%; }
    .tabla--antform thead { display: none; }
    .tabla--antform td {
        display: block; width: 100%; border: none !important;
        text-align: left; padding: .5rem 0 !important;
    }
    .tabla--antform td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: .3rem;
        color: #78716C; font-weight: 600; font-size: 1.35rem;
    }
    .tabla--antform td input,
    .tabla--antform td select {
        width: 100% !important; max-width: 100% !important; box-sizing: border-box;
    }
    .tabla--antform td .boton { width: 100%; margin-top: .4rem; }

    /* ===================================================================
       TOTALES / FINIQUITO EN CELULAR · a lo ancho, sin scroll lateral.
       =================================================================== */
    .tabla--totales { min-width: 0 !important; width: 100% !important; }

    /* ===================================================================
       CONCEPTOS DE LA COTIZACIÓN EN CELULAR · acordeón (tarjeta por concepto).
       CERRADA: solo el concepto + flecha.
       ABIERTA: #, cantidad, P. unitario, importe y botones (Editar/Quitar).
       El pie (Subtotal / IVA / Total) se muestra como resumen a lo ancho.
       =================================================================== */
    .tabla--conceptos,
    .tabla--conceptos > tbody { display: block; width: 100%; }
    .tabla--conceptos thead { display: none; }

    .tabla--conceptos > tbody > tr:not(.js-coti-form) {
        display: flex; flex-direction: column; background: #fff;
        border: 1.5px solid #E7E5E4; border-radius: 1.1rem; margin-bottom: 1.1rem;
        overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }

    .tabla--conceptos > tbody > tr > td {
        display: none; width: 100%; text-align: center; border: none !important;
        font-size: 1.5rem; padding: .4rem 1.2rem !important;
    }
    .tabla--conceptos > tbody > tr > td.celda-desc {
        display: block !important; order: -1; position: relative; cursor: pointer;
        font-weight: 700; font-size: 1.6rem; line-height: 1.3;
        padding: 1.2rem 3.6rem !important; background: #FAF9F7 !important;
    }
    .tabla--conceptos > tbody > tr > td.celda-desc::after {
        content: '⌄'; position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%); font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--conceptos > tbody > tr.abierto > td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    .tabla--conceptos > tbody > tr > td[data-label],
    .tabla--conceptos > tbody > tr > td.celda-acc { display: none !important; }
    .tabla--conceptos > tbody > tr.abierto > td[data-label] { display: block !important; padding: .5rem 1.2rem !important; }
    .tabla--conceptos > tbody > tr > td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--conceptos > tbody > tr > td.tabla__precio { font-weight: 700; }

    .tabla--conceptos > tbody > tr.abierto > td.celda-acc {
        display: block !important; max-width: 30rem; margin: .6rem auto .2rem;
        padding: .9rem 1.2rem 1.2rem !important; border-top: 1px solid #F0EFEC;
    }
    .tabla--conceptos td.celda-acc .acciones-linea { flex-direction: column; align-items: center; gap: .55rem; }
    .tabla--conceptos td.celda-acc .boton { width: 100%; text-align: center; }
    .tabla--conceptos td.celda-acc form { width: 100%; margin: 0; }

    .tabla--conceptos > tbody > tr.js-coti-form { display: block; width: 100%; margin: 0 0 1.1rem; }
    .tabla--conceptos > tbody > tr.js-coti-form.oculto { display: none !important; }
    .tabla--conceptos > tbody > tr.js-coti-form > td { display: block !important; width: 100%; padding: 0 !important; }

    .tabla--conceptos > tbody > tr > td.tabla__vacia {
        display: block !important; width: 100%; text-align: center; white-space: normal;
        padding: 2rem 1.4rem !important; color: #78716C; font-style: italic; background: #fff !important;
    }

    /* Pie de totales: cada renglón a lo ancho (etiqueta izquierda, monto derecha) */
    .tabla--conceptos tfoot { display: block; width: 100%; }
    .tabla--conceptos tfoot tr {
        display: flex; justify-content: space-between; align-items: baseline;
        padding: .7rem 1.4rem; border-top: 1px solid #F0EFEC;
    }
    .tabla--conceptos tfoot td {
        display: block; border: none !important; padding: 0 !important; text-align: left !important;
    }
    .tabla--conceptos tfoot td:empty { display: none; }
    .tabla--conceptos tfoot td.tabla__precio { font-weight: 700; text-align: right !important; }

    /* ===================================================================
       COTIZACIÓN · botón «Generar PDF» al ancho del campo No. de cotización.
       =================================================================== */
    .cot-pdf { flex-direction: column; align-items: stretch !important; gap: .8rem !important; }
    .cot-pdf .fr-campo,
    .cot-pdf input,
    .cot-pdf .boton { width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
    .cot-pdf .boton { white-space: nowrap; }

    /* ===================================================================
       GUARDADO · botón «Descargar PDF» debajo de la fecha en celular.
       =================================================================== */
    .guar-pdf { margin-left: 0 !important; width: 100%; flex-direction: column; align-items: stretch !important; }
    .guar-pdf input,
    .guar-pdf .boton { width: 100% !important; box-sizing: border-box; }

    /* ===================================================================
       GASTOS FIJOS EN CELULAR · acordeón (tarjeta por gasto fijo).
       CERRADA: solo el nombre + flecha.
       ABIERTA: monto mensual y botones (Editar/Quitar).
       La fila de edición (js-gfijo-form) se muestra a lo ancho.
       El pie (Total fijo mensual) se muestra como resumen a lo ancho.
       =================================================================== */
    .tabla--gfijos,
    .tabla--gfijos > tbody { display: block; width: 100%; }
    .tabla--gfijos thead { display: none; }

    .tabla--gfijos > tbody > tr:not(.js-gfijo-form) {
        display: flex; flex-direction: column; background: #fff;
        border: 1.5px solid #E7E5E4; border-radius: 1.1rem; margin-bottom: 1.1rem;
        overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }

    .tabla--gfijos > tbody > tr > td {
        display: none; width: 100%; text-align: center; border: none !important;
        font-size: 1.5rem; padding: .4rem 1.2rem !important;
    }
    .tabla--gfijos > tbody > tr > td.celda-desc {
        display: block !important; order: -1; position: relative; cursor: pointer;
        font-weight: 700; font-size: 1.6rem; line-height: 1.3;
        padding: 1.2rem 3.6rem !important; background: #FAF9F7 !important;
    }
    .tabla--gfijos > tbody > tr > td.celda-desc::after {
        content: '⌄'; position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%); font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--gfijos > tbody > tr.abierto > td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    .tabla--gfijos > tbody > tr > td[data-label],
    .tabla--gfijos > tbody > tr > td.celda-acc { display: none !important; }
    .tabla--gfijos > tbody > tr.abierto > td[data-label] { display: block !important; padding: .5rem 1.2rem !important; }
    .tabla--gfijos > tbody > tr > td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--gfijos > tbody > tr > td.tabla__precio { font-weight: 700; }

    .tabla--gfijos > tbody > tr.abierto > td.celda-acc {
        display: block !important; max-width: 30rem; margin: .6rem auto .2rem;
        padding: .9rem 1.2rem 1.2rem !important; border-top: 1px solid #F0EFEC;
    }
    .tabla--gfijos td.celda-acc .acciones-linea { flex-direction: column; align-items: center; gap: .55rem; }
    .tabla--gfijos td.celda-acc .boton { width: 100%; text-align: center; }
    .tabla--gfijos td.celda-acc form { width: 100%; margin: 0; }

    .tabla--gfijos > tbody > tr.js-gfijo-form { display: block; width: 100%; margin: 0 0 1.1rem; }
    .tabla--gfijos > tbody > tr.js-gfijo-form.oculto { display: none !important; }
    .tabla--gfijos > tbody > tr.js-gfijo-form > td { display: block !important; width: 100%; padding: 0 !important; }

    .tabla--gfijos > tbody > tr > td.tabla__vacia {
        display: block !important; width: 100%; text-align: center; white-space: normal;
        padding: 2rem 1.4rem !important; color: #78716C; font-style: italic; background: #fff !important;
    }

    /* Pie: Total fijo mensual a lo ancho (etiqueta izquierda, monto derecha) */
    .tabla--gfijos tfoot { display: block; width: 100%; }
    .tabla--gfijos tfoot tr {
        display: flex; justify-content: space-between; align-items: baseline;
        padding: .9rem 1.4rem; border-top: 2px solid #1c1917;
    }
    .tabla--gfijos tfoot td {
        display: block; border: none !important; padding: 0 !important; text-align: left !important;
        font-weight: 800;
    }
    .tabla--gfijos tfoot td:empty { display: none; }
    .tabla--gfijos tfoot td.tabla__precio { text-align: right !important; }

    /* ===================================================================
       PRESUPUESTO DEL MES EN CELULAR · acordeón (tarjeta por subcategoría).
       Los encabezados de categoría (Alimentación, Personal…) quedan como
       títulos centrados a lo ancho. Cada subcategoría: cerrada solo el
       nombre + flecha; abierta gastado, tope, gastado/tope y «Ocultar».
       =================================================================== */
    .presu-leyenda {
        flex-direction: column; align-items: center !important;
        text-align: center; gap: .8rem !important;
    }

    .tabla--presu,
    .tabla--presu > tbody { display: block; width: 100%; }
    .tabla--presu thead { display: none; }

    /* Encabezado de categoría: banda centrada a lo ancho (no es tarjeta) */
    .tabla--presu > tbody > tr.presu-cat {
        display: block; width: 100%; margin: 1.4rem 0 .6rem; border-radius: .6rem;
    }
    .tabla--presu > tbody > tr.presu-cat > td {
        display: block; width: 100%; text-align: center !important;
        border: none !important; padding: .8rem 1rem !important;
        font-family: 'Fraunces', serif; font-weight: 700; font-size: 1.7rem; color: #1C1917;
    }

    /* Subcategorías: tarjeta acordeón */
    .tabla--presu > tbody > tr:not(.presu-cat) {
        display: flex; flex-direction: column; background: #fff;
        border: 1.5px solid #E7E5E4; border-radius: 1.1rem; margin-bottom: 1.1rem;
        overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .tabla--presu > tbody > tr:not(.presu-cat) > td {
        display: none; width: 100%; text-align: center; border: none !important;
        font-size: 1.5rem; padding: .4rem 1.2rem !important;
    }
    .tabla--presu > tbody > tr > td.celda-desc {
        display: block !important; order: -1; position: relative; cursor: pointer;
        font-weight: 700; font-size: 1.6rem; line-height: 1.3;
        padding: 1.2rem 3.6rem !important; background: #FAF9F7 !important;
    }
    .tabla--presu > tbody > tr > td.celda-desc::after {
        content: '⌄'; position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%); font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--presu > tbody > tr.abierto > td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    .tabla--presu > tbody > tr > td[data-label],
    .tabla--presu > tbody > tr > td.celda-acc { display: none !important; }
    .tabla--presu > tbody > tr.abierto > td[data-label] { display: block !important; padding: .5rem 1.2rem !important; }
    .tabla--presu > tbody > tr > td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--presu > tbody > tr > td.tabla__precio { font-weight: 700; }
    .tabla--presu > tbody > tr > td[data-label] input { margin-top: .35rem; text-align: center; }

    .tabla--presu > tbody > tr.abierto > td.celda-acc {
        display: block !important; text-align: center !important;
        max-width: 30rem; margin: .4rem auto .2rem; padding: .5rem 1.2rem 1rem !important;
    }
    .tabla--presu td.celda-acc .boton { width: 100%; text-align: center; }

    /* ===================================================================
       GASTOS FIJOS DEL MES EN CELULAR · acordeón (tarjeta por gasto fijo).
       CERRADA: solo el nombre + flecha.  ABIERTA: monto y botones.
       La fila de edición (js-fijo-form) se muestra a lo ancho.
       =================================================================== */
    .tabla--fijomes,
    .tabla--fijomes > tbody { display: block; width: 100%; }
    .tabla--fijomes thead { display: none; }

    .tabla--fijomes > tbody > tr:not(.js-fijo-form) {
        display: flex; flex-direction: column; background: #fff;
        border: 1.5px solid #E7E5E4; border-radius: 1.1rem; margin-bottom: 1.1rem;
        overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .tabla--fijomes > tbody > tr > td {
        display: none; width: 100%; text-align: center; border: none !important;
        font-size: 1.5rem; padding: .4rem 1.2rem !important;
    }
    .tabla--fijomes > tbody > tr > td.celda-desc {
        display: block !important; order: -1; position: relative; cursor: pointer;
        font-weight: 700; font-size: 1.6rem; line-height: 1.3;
        padding: 1.2rem 3.6rem !important; background: #FAF9F7 !important;
    }
    .tabla--fijomes > tbody > tr > td.celda-desc::after {
        content: '⌄'; position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%); font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--fijomes > tbody > tr.abierto > td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    .tabla--fijomes > tbody > tr > td[data-label],
    .tabla--fijomes > tbody > tr > td.celda-acc { display: none !important; }
    .tabla--fijomes > tbody > tr.abierto > td[data-label] { display: block !important; padding: .5rem 1.2rem !important; }
    .tabla--fijomes > tbody > tr > td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--fijomes > tbody > tr > td.tabla__precio { font-weight: 700; }

    .tabla--fijomes > tbody > tr.abierto > td.celda-acc {
        display: block !important; max-width: 30rem; margin: .6rem auto .2rem;
        padding: .9rem 1.2rem 1.2rem !important; border-top: 1px solid #F0EFEC;
    }
    .tabla--fijomes td.celda-acc .acciones-linea { flex-direction: column; align-items: center; gap: .55rem; }
    .tabla--fijomes td.celda-acc .boton { width: 100%; text-align: center; }
    .tabla--fijomes td.celda-acc form { width: 100%; margin: 0; }

    .tabla--fijomes > tbody > tr.js-fijo-form { display: block; width: 100%; margin: 0 0 1.1rem; }
    .tabla--fijomes > tbody > tr.js-fijo-form.oculto { display: none !important; }
    .tabla--fijomes > tbody > tr.js-fijo-form > td { display: block !important; width: 100%; padding: 0 !important; }

    .tabla--fijomes > tbody > tr > td.tabla__vacia {
        display: block !important; width: 100%; text-align: center; white-space: normal;
        padding: 2rem 1.4rem !important; color: #78716C; font-style: italic; background: #fff !important;
    }

    /* ===================================================================
       MOVIMIENTOS DEL MES EN CELULAR · acordeón (Gastos e Ingresos).
       CERRADA: categoría (gastos) o fecha (ingresos) + flecha.
       ABIERTA: los demás datos y el botón Eliminar.
       El pie (Total) se muestra como resumen a lo ancho.
       =================================================================== */
    .tabla--movs,
    .tabla--movs > tbody { display: block; width: 100%; }
    .tabla--movs thead { display: none; }

    .tabla--movs > tbody > tr {
        display: flex; flex-direction: column; background: #fff;
        border: 1.5px solid #E7E5E4; border-radius: 1.1rem; margin-bottom: 1.1rem;
        overflow: hidden; box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .tabla--movs > tbody > tr > td {
        display: none; width: 100%; text-align: center; border: none !important;
        font-size: 1.5rem; padding: .4rem 1.2rem !important;
    }
    .tabla--movs > tbody > tr > td.celda-desc {
        display: block !important; order: -1; position: relative; cursor: pointer;
        font-weight: 700; font-size: 1.6rem; line-height: 1.3;
        padding: 1.2rem 3.6rem !important; background: #FAF9F7 !important;
    }
    .tabla--movs > tbody > tr > td.celda-desc::after {
        content: '⌄'; position: absolute; right: 1.5rem; top: 50%;
        transform: translateY(-55%); font-size: 2.3rem; color: #A8A29E; transition: transform .22s ease;
    }
    .tabla--movs > tbody > tr.abierto > td.celda-desc::after { transform: translateY(-30%) rotate(180deg); }

    .tabla--movs > tbody > tr > td[data-label],
    .tabla--movs > tbody > tr > td.celda-acc { display: none !important; }
    .tabla--movs > tbody > tr.abierto > td[data-label] { display: block !important; padding: .5rem 1.2rem !important; }
    .tabla--movs > tbody > tr > td[data-label]::before { content: attr(data-label) ': '; color: #78716C; font-weight: 600; }
    .tabla--movs > tbody > tr > td.tabla__precio { font-weight: 700; }

    .tabla--movs > tbody > tr.abierto > td.celda-acc {
        display: block !important; max-width: 30rem; margin: .6rem auto .2rem;
        padding: .9rem 1.2rem 1.2rem !important; border-top: 1px solid #F0EFEC;
    }
    .tabla--movs td.celda-acc .boton { width: 100%; text-align: center; }
    .tabla--movs td.celda-acc form { width: 100%; margin: 0; }

    .tabla--movs > tbody > tr > td.tabla__vacia {
        display: block !important; width: 100%; text-align: center; white-space: normal;
        padding: 2rem 1.4rem !important; color: #78716C; font-style: italic; background: #fff !important;
    }

    /* Pie de total a lo ancho (etiqueta izquierda, monto derecha) */
    .tabla--movs tfoot { display: block; width: 100%; }
    .tabla--movs tfoot tr {
        display: flex; justify-content: space-between; align-items: baseline;
        padding: .9rem 1.4rem; border-top: 2px solid #E7E5E4; background: #FAF9F7;
        border-radius: 1.1rem; margin-top: .2rem;
    }
    .tabla--movs tfoot td {
        display: block; border: none !important; padding: 0 !important; text-align: left !important;
    }
    .tabla--movs tfoot td:empty { display: none; }
    .tabla--movs tfoot td.tabla__precio { text-align: right !important; }

    /* Gastos e Ingresos del mes: una sola columna en celular.
       (El grid original pide columnas de 36rem, que no caben y desbordan.) */
    .fz-dos-tablas { grid-template-columns: 1fr !important; }
}

/* =====================================================================
   TABLET  ( 768px – 1024px )
   ===================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    .contenedor { width: 94%; }
    .tabla th, .tabla td { padding: 1.3rem 1.4rem; }
}

/* =====================================================================
   TELÉFONO CHICO  ( <= 420px )
   ===================================================================== */
@media (max-width: 420px) {
    .logo { font-size: 1.9rem; }
    .titulo { font-size: 2.4rem; }
    .tabla th, .tabla td { padding: .9rem 1rem; }
    .tabla { font-size: 1.35rem; }
}

/* =====================================================================
   APUESTAS · evitar que el mercado y los goles se encimen en celular
   (el selector de mercado pasa a su propia línea, completo)
   ===================================================================== */
@media (max-width: 600px) {
    .ap-wrap .ap-leg__meta { grid-template-columns: 1fr auto; gap: .7rem; }
    .ap-wrap .ap-leg__meta > .ap-sel { grid-column: 1 / -1; }
    .ap-wrap .ap-marc { justify-content: center; }
    .ap-wrap .ap-goin { width: 5rem; }
}