/* Panel de administración de compras. Prefijo pa- para no chocar con styles.css. */

/* Cliente visual P1: el panel ya no es una capa sobre la tienda. Vive dentro
   del armazón común (shell.css, #panel-admin.cp-shell) y aquí solo queda lo
   propio de Pedidos. `.pa-caja` es la columna de contenido: sin marco ni
   sombra, sobre el fondo de la sección, con las tarjetas (.cp-tarjeta) dentro. */
.pa-caja {
    /* El hueco lateral va en una variable porque la barra de filtros, que es
       pegajosa, tiene que sangrar hasta el borde de la columna para tapar lo
       que pasa por debajo. Sin esto habría que repetir el valor en cada media. */
    --pa-pad: 28px;
    /* El relleno de arriba también es variable: el bloque pegajoso lo anula
       con un margen negativo y lo repone como relleno propio, para que la
       cabecera se vea en el mismo sitio y quede aire sobre ella al fijarse. */
    --pa-pad-top: 22px;
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: var(--pa-pad-top) var(--pa-pad) 48px;
}
.pa-caja-detalle { max-width: 820px; }
/* En el cajón el fondo es el de la sección: la ficha y la tabla llevan el
   blanco de las tarjetas para no fundirse con él. */
.cp-cajon .pa-ficha { background: #fff; border: 1px solid #e3e3e0; }
.cp-cajon .pa-tabla-scroll { background: #fff; border-color: #e3e3e0; }
.pa-caja.pa-ocupado { opacity: .55; pointer-events: none; }

.pa-cargando { padding: 48px; text-align: center; color: #5c6670; }
.pa-error { color: #e03131; }

.pa-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.pa-cabecera h2 { margin: 0; font-size: 23px; font-weight: 700; letter-spacing: -.02em; color: #16181d; }
.pa-alcance { margin: 3px 0 0; color: #5c6670; font-size: 13px; }

.pa-cerrar {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border: 0; border-radius: 50%;
    background: #f1f3f5; color: #495057;
    font-size: 22px; line-height: 1; cursor: pointer;
}
.pa-cerrar:hover { background: #e9ecef; }

/* ── Pestañas + filtros, pegados juntos ─────────────────────────────────── */
/* Pestañas de restaurante y barra de filtros suben como un solo bloque
   pegajoso: era el punto de la reunión del 12/08 —los filtros (y, con varios
   locales, el selector de restaurante) se perdían con el scroll justo cuando
   hacían falta, delante de los rankings y de la tabla de pedidos.
   Sangra hasta el borde de la ficha (de ahí --pa-pad) para que el contenido no
   asome por los lados al pasar por debajo. */
.pa-sticky-top {
    position: sticky;
    top: 0;
    z-index: 6;
    margin: calc(var(--pa-pad-top) * -1) calc(var(--pa-pad) * -1) 0;
    padding: var(--pa-pad-top) var(--pa-pad) 0;
    background: var(--cp-fondo, #f6f6f5);
    /* Sombra mínima: invisible cuando el bloque está en su sitio, suficiente
       para despegarlo del contenido que le pasa por debajo. */
    box-shadow: 0 8px 12px -12px rgba(15, 17, 21, .5);
}

.pa-barra-filtros {
    padding-top: 10px;
}

.pa-filtros {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e3e3e0;
}

/* Quién compró y proveedor van siempre a la vista: son las dos preguntas que
   originaron el panel. Detrás del botón quedan solo las fechas. */
.pa-filtro-principal { flex: 1 1 240px; max-width: 420px; }

.pa-filtros label, .pa-filtros-extra label { display: block; }
.pa-filtros label > span, .pa-filtros-extra label > span {
    display: block;
    margin-bottom: 4px;
    color: #495057;
    font-size: 12px;
    font-weight: 650;
}

.pa-filtros select, .pa-filtros-extra select, .pa-filtros-extra input {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #dee2e6;
    border-radius: 9px;
    background: #fff;
    color: #16181d;
    font: inherit;
    font-size: 14px;
}
.pa-filtros select:focus, .pa-filtros-extra select:focus, .pa-filtros-extra input:focus {
    outline: 2px solid #2563eb; outline-offset: -1px;
}

.pa-filtros-extra {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    align-items: end;
    padding: 16px 0;
    border-bottom: 1px solid #e3e3e0;
}
.pa-filtros-extra[hidden] { display: none; }

.pa-rangos { display: flex; gap: 6px; }
.pa-rangos button {
    flex: 1;
    padding: 9px 4px;
    border: 1px solid #dee2e6;
    border-radius: 9px;
    background: #fff;
    color: #495057;
    font: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer;
}
.pa-rangos button:hover { background: #f8f9fa; }

.pa-btn, .pa-btn-sec {
    padding: 9px 16px;
    border: 1px solid #dee2e6;
    border-radius: 9px;
    background: #fff;
    color: #495057;
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
}
.pa-btn-sec:hover { background: #f8f9fa; }
.pa-btn { background: #2563eb; border-color: #2563eb; color: #fff; }

.pa-btn-link {
    padding: 9px 6px;
    border: 0; background: none;
    color: #2563eb;
    font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer;
}

/* ── Resumen ─────────────────────────────────────────────────────────── */
.pa-resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin: 20px 0;
}
.pa-tarjeta { padding: 15px 16px; }
.pa-tarjeta span { display: block; color: #5c6670; font-size: 12px; font-weight: 600; }
.pa-tarjeta strong {
    display: block; margin-top: 3px;
    color: #16181d; font-size: 22px; font-weight: 700;
    letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}

.pa-vacio { padding: 40px; text-align: center; color: #5c6670; }

/* ── Rankings ────────────────────────────────────────────────────────── */
/* Reunión del 12/08 (00:38): "tengo que meter una línea de separación porque
   chocan aquí". Los tres rankings compartían el fondo blanco de la ficha y se
   leían como una sola mancha: el importe de la última fila de una columna
   quedaba a un dedo del título de la siguiente, y con nombres largos (los
   productos ocupan dos líneas) no se sabía qué dato pertenecía a qué bloque.
   Cada uno lleva ahora su propio marco, el mismo de la gráfica de evolución.
   Se eligió marco y no una línea vertical porque el bloque se apila en móvil,
   donde una vertical no separa nada; el marco funciona en las dos formas. */
.pa-rankings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Cada ficha con su altura: por defecto la rejilla las estira todas a la
       del ranking más largo, y "Proveedores" (4 filas) quedaba como una caja
       vacía de la altura de "Productos" (20 filas). Sin marco no se notaba. */
    align-items: start;
    gap: 14px;
    margin-bottom: 26px;
}

.pa-ranking { padding: 15px 16px 16px; }

/* La lista de pedidos es una tarjeta más, como la tabla de la consola. */
.pa-pedidos { margin-bottom: 8px; }

.pa-ranking h3, .pa-pedidos h3, .pa-caja-detalle h3 {
    margin: 0 0 10px;
    color: #16181d;
    font-size: 14.5px; font-weight: 700;
}

/* Las barras sangran hasta casi el borde del marco, pero el texto sigue
   alineado con el título: el hueco negativo del <ol> compensa exactamente el
   relleno de cada fila. */
.pa-ranking ol { margin: 0 -10px; padding: 0; list-style: none; counter-reset: rk; }
.pa-ranking li {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 9px;
    font-size: 13.5px;
    overflow: hidden;
}
/* Las filas eran exactamente contiguas: una acababa en el píxel en el que
   empezaba la siguiente. Como la barra de importe ocupa todo el alto de su
   fila, dos barras seguidas de ancho parecido se fundían en una sola mancha y
   no se veía dónde terminaba un producto y empezaba otro —peor cuanto más
   largo el nombre, porque las filas pasan de 40 a 95 px de alto—.
   Un hueco basta: cada barra vuelve a leerse como una pastilla suelta. */
.pa-ranking li + li { margin-top: 5px; }
/* La barra va detrás del texto y mide el peso relativo del importe. */
.pa-barra {
    position: absolute;
    inset: 0 auto 0 0;
    background: #eef4ff;
    border-radius: 9px;
    z-index: 0;
}
.pa-ranking li > span:not(.pa-barra) { position: relative; z-index: 1; }

.pa-rk-nombre { color: #16181d; font-weight: 600; }
.pa-rk-nombre small { display: block; color: #5c6670; font-size: 12px; font-weight: 400; }
.pa-rk-medio { color: #5c6670; font-size: 12px; white-space: nowrap; }
.pa-rk-valor { color: #16181d; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Tablas ──────────────────────────────────────────────────────────── */
.pa-contador {
    margin-left: 6px; padding: 2px 8px;
    border-radius: 999px; background: #f1f3f5;
    color: #5c6670; font-size: 12px; font-weight: 700;
}

.pa-tabla-scroll { overflow-x: auto; border: 1px solid #f1f3f5; border-radius: 12px; }

.pa-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pa-tabla th {
    padding: 11px 14px;
    background: #f8f9fa;
    color: #5c6670;
    font-size: 12px; font-weight: 700; text-align: left;
    text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.pa-tabla td { padding: 11px 14px; border-top: 1px solid #f1f3f5; color: #16181d; vertical-align: top; }
.pa-tabla td small { color: #5c6670; font-size: 12px; }
.pa-tabla .pa-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pa-tabla tfoot td { background: #f8f9fa; border-top: 1px solid #e9ecef; }

.pa-pedidos tbody tr { cursor: pointer; }
.pa-pedidos tbody tr:hover { background: #f8f9fa; }
.pa-pedidos tbody tr:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }

.pa-madrugada { margin-left: 4px; }

/* ── Detalle ─────────────────────────────────────────────────────────── */
.pa-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin: 0 0 22px;
    padding: 16px;
    border-radius: 13px;
    background: #f8f9fa;
}
.pa-ficha dt { color: #5c6670; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pa-ficha dd { margin: 3px 0 0; color: #16181d; font-size: 14px; font-weight: 600; }
.pa-ficha dd small { display: block; color: #5c6670; font-size: 12px; font-weight: 400; }
.pa-total { font-size: 20px !important; font-variant-numeric: tabular-nums; }

.pa-estado {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    background: #e7f5ff;
    color: #1971c2;
    font-size: 12px; font-weight: 700;
}

.pa-eventos { margin: 0; padding: 0 0 0 4px; list-style: none; }
.pa-eventos li {
    padding: 8px 0 8px 16px;
    border-left: 2px solid #e9ecef;
    color: #495057;
    font-size: 13px;
}
.pa-eventos small { color: #5c6670; }

@media (max-width: 720px) {
    .pa-caja { --pa-pad: 16px; --pa-pad-top: 16px; padding: var(--pa-pad-top) var(--pa-pad) 32px; }
    /* Desde el 24/10 el bloque fijo solo está en Estadísticas, donde no hay
       lista que filtrar mientras se baja: en el teléfono sus tres filtros fijos
       tapaban un cuarto de pantalla sobre cifras y rankings. Suben con el
       contenido (26/10). */
    .pa-sticky-top { position: static; box-shadow: none; }
    .pa-cabecera .cp-titulo { font-size: 20px; }
    /* Cada pedido ya es una ficha con su marco: la tarjeta de fuera solo
       sumaría otro borde alrededor. */
    .pa-pedidos.cp-tarjeta { padding: 0; border: 0; background: none; box-shadow: none; }
    .pa-pedidos .pa-tabla tbody tr { background: #fff; }
    .pa-filtro-principal { flex-basis: 100%; max-width: none; }
    .pa-tabla th, .pa-tabla td { padding: 9px 10px; }

    /* ── La tabla de pedidos se vuelve fichas ────────────────────────── */
    /* Reunión del 12/08 (00:43-00:47): "el formato debe ser adaptable para
       dispositivos móviles... sin necesidad de navegación compleja". Seis
       columnas en 375 px obligaban a arrastrar la tabla de lado para ver el
       total, que es justo el dato que se busca. Cada pedido pasa a ser una
       ficha con el número y el importe en la primera línea —lo que se mira de
       un vistazo— y el resto debajo. Se conserva la <table> del escritorio: el
       mismo HTML, solo cambia cómo se coloca. */
    .pa-pedidos .pa-tabla-scroll { border: 0; border-radius: 0; overflow-x: visible; }
    .pa-pedidos .pa-tabla { display: block; }
    .pa-pedidos .pa-tabla thead { display: none; }
    .pa-pedidos .pa-tabla tbody { display: block; }

    .pa-pedidos .pa-tabla tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "pedido total"
            "estado estado"
            "prov   prov"
            "local  local"
            "quien  cuando"
            "pdf    inc";
        gap: 2px 10px;
        margin-bottom: 8px;
        padding: 12px 14px;
        border: 1px solid #e9ecef;
        border-radius: 12px;
    }
    .pa-pedidos .pa-tabla tbody td { display: block; padding: 0; border: 0; }

    .pa-pedidos [data-col="pedido"] { grid-area: pedido; font-size: 14px; white-space: nowrap; }
    .pa-pedidos [data-col="total"]  { grid-area: total; font-size: 15px; font-weight: 700; }
    .pa-pedidos [data-col="estado"] { grid-area: estado; margin: 2px 0 4px; }
    .pa-pedidos [data-col="prov"]   { grid-area: prov; color: #495057; font-size: 13px; }
    .pa-pedidos [data-col="pdf"]    { grid-area: pdf; margin-top: 6px; }
    .pa-pedidos [data-col="inc"]    { grid-area: inc; margin-top: 6px; text-align: right; }
    /* Local y quién compró son el contexto, no el titular: van en gris y
       pequeños, y su <small> interior se pone en línea para no gastar cuatro
       renglones en el NIF y el rol. */
    .pa-pedidos [data-col="local"] { grid-area: local; }
    .pa-pedidos [data-col="quien"] { grid-area: quien; }
    .pa-pedidos [data-col="local"],
    .pa-pedidos [data-col="quien"] { color: #5c6670; font-size: 12px; }
    .pa-pedidos [data-col="local"] br,
    .pa-pedidos [data-col="quien"] br { display: none; }
    .pa-pedidos [data-col="local"] small::before,
    .pa-pedidos [data-col="quien"] small::before { content: ' · '; }

    /* La fecha comparte renglón con quién compró, a la derecha: son los dos
       datos de "cuándo y quién" y juntos se leen como una sola frase. La fecha
       manda porque no se puede partir sin quedar rara; el nombre se corta con
       puntos suspensivos si hace falta —va delante del rol, así que lo que se
       pierde es "Cocinero" y no "Rocío Soler"— y el detalle completo está a un
       toque, al abrir el pedido. */
    .pa-pedidos [data-col="cuando"] {
        grid-area: cuando;
        color: #5c6670; font-size: 12px;
        text-align: right;
        white-space: nowrap;
    }
    .pa-pedidos [data-col="quien"] {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .pa-pedidos .pa-tabla tbody tr:hover,
    .pa-pedidos .pa-tabla tbody tr:active { background: #f8f9fa; }
}

/* Ventanas bajas (portátil pequeño, móvil apaisado): cabecera + pestañas +
   filtros pueden pasar de la altura útil, y lo que queda debajo se volvería
   inalcanzable porque el bloque fijo lo taparía. Se le pone techo y scroll
   propio: sigue estando todo, pero nunca ocupa más de dos tercios. */
@media (max-height: 620px) {
    .pa-sticky-top { max-height: 66dvh; overflow-y: auto; }
}
/* Teléfono en horizontal: ni con techo cabe. Título, filtros y barra de abajo
   dejaban unos 7 px a la lista (auditoría móvil del 29/09). Aquí el bloque sube
   con el contenido; los filtros están a un gesto. En vertical siguen fijos. */
@media (orientation: landscape) and (max-height: 500px) {
    .pa-sticky-top { position: static; max-height: none; overflow: visible; box-shadow: none; }
}

/* ── Pestañas de restaurante ─────────────────────────────────────────── */
/* Cambiar de local es la acción principal del dueño, no un filtro avanzado:
   por eso va arriba del todo y cada pestaña ya enseña su cifra. */
.pa-pestanas {
    display: flex;
    gap: 8px;
    /* `overflow-x: auto` obliga al navegador a poner `overflow-y: auto`
       también, así que este contenedor RECORTA por arriba y por abajo. Las
       pestañas estaban pegadas al borde superior (padding-top: 0) y el
       `translateY(-1px)` del hover se cortaba: en vez de levantarse, se les
       rebanaba el borde y las esquinas redondeadas, que es lo que se ve como
       un choque contra el borde.
       El relleno da sitio al movimiento y el margen negativo lo devuelve, para
       que la fila siga alineada con el resto del panel. */
    margin: -4px 0 12px;
    padding: 4px 0 8px;
    overflow-x: auto;
    scrollbar-width: thin;
}

.pa-pest {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 132px;
    padding: 10px 14px;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font: inherit;
    text-align: left;
}
.pa-pest:hover { background: #f8f9fa; border-color: #dee2e6; }
.pa-pest.es-activa { border-color: #2563eb; background: #eef4ff; }

.pa-pest-nombre { font-size: 13.5px; font-weight: 650; color: #16181d; }
.pa-pest-dato   { font-size: 12px; color: #495057; font-variant-numeric: tabular-nums; }
.pa-pest-nif    { font-size: 12px; color: #5c6670; letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* ── Gráfica de evolución ────────────────────────────────────────────── */
.pa-caja-grafica {
    margin: 0 0 18px;
    padding: 16px 18px 10px;
}
.pa-caja-grafica h3 { margin: 0; font-size: 15px; font-weight: 650; color: #16181d; }
.pa-sub { margin: 2px 0 12px; font-size: 12.5px; color: #5c6670; }

/* ── Controles de orden ──────────────────────────────────────────────── */
/* La cabecera se separa de su lista con una línea: dentro del marco, título y
   primera fila quedaban pegados y el título parecía otro elemento del ranking. */
.pa-ranking-cab {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f3f5;
}
.pa-ranking-cab h3 { margin: 0; }

.pa-orden { display: flex; gap: 3px; }
.pa-orden button {
    min-height: 32px;   /* 24 px era poco para el dedo (05/11) */
    padding: 6px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #5c6670;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.pa-orden button:hover { background: #f1f3f5; color: #495057; }
.pa-orden button.es-activo { background: #eef4ff; color: #2563eb; }

.pa-ver-todo { margin-top: 6px; font-size: 12.5px; }

@media (max-width: 640px) {
    .pa-pest { min-width: 116px; padding: 9px 11px; }
    .pa-ranking-cab { flex-direction: column; gap: 4px; }
    .pa-orden { flex-wrap: wrap; }
}

/* ── Paleta de las gráficas dentro del panel ─────────────────────────── */
/* graficas.css no fija ningún color: los toma de estas variables. Aquí se le
   dan los de la tienda (fondo claro) en vez de los de la consola (oscura),
   que es lo que permite compartir el mismo motor de gráficas en las dos. */
#panel-admin {
    --serie-1:      #2563eb;
    --comparacion:  #adb5bd;
    --sup-1:        #ffffff;
    --sup-2:        #f1f3f5;
    --borde:        #dee2e6;
    --borde-suave:  #e9ecef;
    --texto:        #16181d;
    --texto-2:      #495057;
    --texto-3:      #868e96;
    --bien:         #2f9e44;
    --aviso:        #f08c00;
    --critico:      #e03131;
    --serio:        #d9480f;
    --curva:        cubic-bezier(.22,.61,.36,1);
    --curva-suave:  cubic-bezier(.22,.61,.36,1);
}

/* ── Movimiento ──────────────────────────────────────────────────────── */
/* Mismo criterio que la consola /admin y el selector de restaurante:
   curvas de salida cortas, escalonado por posición, y todo apagado con
   prefers-reduced-motion. Antes el panel aparecía de golpe y desentonaba
   con el resto de la web. */

@keyframes pa-entra { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }

.pa-tarjeta,
.pa-caja,
.pa-ranking {
    animation: pa-entra .34s cubic-bezier(.22,.61,.36,1) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}

/* El número del KPI se asienta un poco después que su tarjeta: la vista
   entera no se mueve a la vez y se lee mejor. */
.pa-num { animation: pa-entra .4s cubic-bezier(.22,.61,.36,1) 90ms backwards; }

.pa-tarjeta,
.pa-ranking li,
.pa-tabla tbody tr {
    transition: background-color .16s ease, transform .16s cubic-bezier(.22,.61,.36,1);
}
.pa-tarjeta:hover { transform: translateY(-2px); }

.pa-pest { transition: background-color .16s ease, border-color .16s ease, transform .16s cubic-bezier(.22,.61,.36,1); }
.pa-pest:hover { transform: translateY(-1px); }

.pa-btn, .pa-btn-sec, .pa-btn-link, .pa-cerrar, .pa-rangos button, .pa-orden button {
    transition: background-color .14s ease, border-color .14s ease,
                color .14s ease, transform .14s cubic-bezier(.22,.61,.36,1);
}
.pa-btn:hover:not(:disabled),
.pa-btn-sec:hover:not(:disabled),
.pa-rangos button:hover { transform: translateY(-1px); }
.pa-btn:active:not(:disabled),
.pa-btn-sec:active:not(:disabled) { transform: translateY(0); transition-duration: .06s; }

/* La ficha de detalle entra desde la derecha, como el cajón de la consola. */
.pa-caja-detalle { animation: pa-detalle .32s cubic-bezier(.22,.61,.36,1); }
@keyframes pa-detalle { from { opacity: 0; transform: translateX(16px) } to { opacity: 1; transform: none } }

/* "Cargando" pulsa en vez de quedarse fijo: deja claro que sigue vivo. */
.pa-cargando:not(.pa-error) { animation: pa-late 1.3s ease-in-out infinite; }
@keyframes pa-late { 0%, 100% { opacity: .45 } 50% { opacity: .9 } }

@media (prefers-reduced-motion: reduce) {
    .pa-tarjeta, .pa-caja, .pa-ranking, .pa-num, .pa-caja-detalle {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
    .pa-cargando:not(.pa-error) { animation: none; opacity: .7; }
    .pa-tarjeta:hover,
    .pa-btn:hover:not(:disabled),
    .pa-btn-sec:hover:not(:disabled),
    .pa-rangos button:hover,
    .pa-pest:hover { transform: none; }
}

/* Acciones al pie de la ficha del pedido (albarán). Separadas del contenido:
   son lo que HACES con el pedido, no un dato más de él. */
.pa-acciones-detalle {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #f1f3f5;
}


/* ── Listado de pedidos: búsqueda, estado y paginación (14G.1) ───────────── */
.pa-sr {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}
.pa-lista-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.pa-buscar { flex: 2 1 240px; }
.pa-estado-filtro { flex: 1 1 180px; }
.pa-buscar input, .pa-estado-filtro select {
    width: 100%; box-sizing: border-box; min-height: 40px; padding: 8px 12px;
    border: 1px solid #dee2e6; border-radius: 10px; background: #fff;
    font: inherit; font-size: 14px; color: #16181d;
}
.pa-buscar input:focus, .pa-estado-filtro select:focus {
    outline: 2px solid #2563eb; outline-offset: 0; border-color: #2563eb;
}
.pa-estado {
    display: inline-block; padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; white-space: nowrap;
    background: #f1f3f5; color: #495057;
}
.pa-estado-pendiente  { background: #fff4e0; color: #8f4a00; }
.pa-estado-preparando { background: #e7f1ff; color: #1d5fbf; }
.pa-estado-enviado    { background: #ece8ff; color: #5b3fc4; }
.pa-estado-entregado  { background: #e3f6e8; color: #1e7a3a; }
.pa-estado-cancelado  { background: #fdecea; color: #c92a2a; }
.pa-estado-devuelto   { background: #f1f3f5; color: #5c6670; }
.pa-paginas {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-top: 12px; flex-wrap: wrap;
}
.pa-paginas-txt { font-size: 13px; color: #495057; text-align: center; flex: 1 1 auto; }
.pa-paginas-txt small { display: block; color: #5c6670; font-size: 12px; }
.pa-paginas .pa-btn-sec:disabled { opacity: .45; cursor: default; }

.pa-nota-metricas { margin: -4px 0 14px; font-size: 12px; color: #5c6670; }

/* Faltas y cambios que el proveedor marca en las líneas (plan Choco, 20/10). */
.pa-aviso-servicio { background: #fff8e6; border: 1px solid rgba(200, 150, 0, .25); color: #6b5200; border-radius: 8px; padding: 10px 12px; margin: 12px 0; font-size: 14px; font-weight: 600; }
.pa-servicio { display: inline-block; margin-top: 4px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.pa-servicio-falta { background: #fdecea; color: #c1121f; }
.pa-servicio-cambio { background: #e7f1ff; color: #0058b0; }

/* La compra entera (22/10): los pedidos de un mismo carrito, uno por proveedor. */
.pa-lote { color: #5c6670; font-weight: 600; }
.pa-misma-compra { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pa-misma-compra .pa-btn-sec { width: 100%; text-align: left; }
.pa-repetir { margin: 0 0 18px; }

/* ── Pedidos (24/10, diseño de alex): historial y ficha del pedido ──────── */
.pa-cabecera-pedidos { align-items: center; padding-bottom: 16px; margin-bottom: 20px; border-bottom: 1px solid #e2e8f0; }
.pa-cabecera-pedidos .cp-titulo { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.pa-chip-local {
    display: inline-flex; align-items: center; gap: 6px; padding: 0 12px 0 0;
    border: 1px solid #e2e8f0; border-radius: 999px; background: #f8fafc; color: #64748b;
    font: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.pa-chip-local:hover { background: #f1f5f9; }
.pa-chip-local .sn-chip { border: 0; background: none; box-shadow: none; }
/* El selector de establecimiento (negocios.js, z 6000) se abre desde el chip, encima del panel (6100). */
body:has(#panel-admin) #selector-negocio { z-index: 6300; }

.pa-historial.cp-tarjeta { padding: 0; overflow: hidden; border-radius: 16px; border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, .04), 0 2px 6px -1px rgba(15, 23, 42, .02); }
.pa-hist-cab { display: flex; align-items: center; gap: 10px; padding: 18px 24px 16px; border-bottom: 1px solid #f1f5f9; }
.pa-hist-cab h2 { margin: 0; color: #0f172a; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.pa-hist-cab .pa-contador { margin: 0; background: #f1f5f9; color: #475569; font-weight: 600; }
.pa-hist-filtros { padding: 20px 24px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }

.pa-filtros-tabla {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px;
    padding: 0 0 14px; border-bottom: 0;
}
.pa-filtros-tabla label > span {
    color: #64748b; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
}
.pa-filtros-tabla select, .pa-filtros-tabla input[type="date"], .pa-filtros-tabla input[type="number"],
.pa-buscar input, .pa-estado-filtro select {
    width: 100%; box-sizing: border-box; min-height: 38px; padding: 7px 11px;
    border: 1px solid #e2e8f0; border-radius: 8px; background: #fff; color: #334155;
    font: inherit; font-size: 13px; font-weight: 500; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.pa-filtros-tabla select:focus, .pa-filtros-tabla input[type="date"]:focus, .pa-filtros-tabla input[type="number"]:focus,
.pa-buscar input:focus, .pa-estado-filtro select:focus { outline: 0; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
/* Desde y Hasta, y los dos importes, van siempre juntos en su fila (29/10):
   antes Desde quedaba al lado de Proveedor y Hasta en la fila de abajo. */
.pa-filtro-par { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pa-hist-filtros .pa-lista-filtros { margin: 0; align-items: center; }
.pa-buscar { position: relative; }
.pa-buscar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #64748b; pointer-events: none; }
.pa-buscar input { padding-left: 36px; font-weight: 400; }
.pa-estado-filtro { flex: 0 1 260px; }
.pa-estado-filtro select { font-weight: 600; }

.pa-historial .pa-tabla-scroll { border: 0; border-radius: 0; }
.pa-historial .pa-tabla { font-size: 13px; }
.pa-historial .pa-tabla th { padding: 11px 12px; background: #f8fafc; color: #64748b; font-size: 12px; letter-spacing: .06em;
    border-bottom: 1px solid #e2e8f0; }
.pa-caja:has(.pa-historial) { max-width: 1540px; }
.pa-historial .pa-tabla td { padding: 13px 12px; border-top: 1px solid #f1f5f9; vertical-align: middle; white-space: nowrap; }
/* Los nombres pueden partirse; número, estado, fecha, importe y botones no.
   Con «td» delante: sin él ganaba el nowrap de arriba y la tabla se salía de la caja (07/11). */
.pa-historial .pa-tabla td:is([data-col="prov"], [data-col="local"], [data-col="quien"]) { white-space: normal; min-width: 110px; }
.pa-historial .pa-tabla th:first-child, .pa-historial .pa-tabla td:first-child { padding-left: 24px; }
.pa-historial .pa-tabla th:last-child, .pa-historial .pa-tabla td:last-child { padding-right: 24px; }
/* En portátiles de 1280–1439 px las nueve columnas caben con menos aire entre ellas (07/11). */
@media (min-width: 561px) and (max-width: 1439px) {
    .pa-historial .pa-tabla :is(th, td) { padding-left: 9px; padding-right: 9px; }
    .pa-historial .pa-tabla :is(th, td):first-child { padding-left: 18px; }
    .pa-historial .pa-tabla :is(th, td):last-child { padding-right: 18px; }
    .pa-historial .pa-tabla td:is([data-col="prov"], [data-col="local"], [data-col="quien"]) { min-width: 96px; }
}
.pa-historial .pa-tabla td strong { display: block; color: #1e293b; font-weight: 600; }
.pa-historial .pa-tabla td small { display: block; color: #64748b; font-size: 12px; }
.pa-historial [data-col="prov"] strong, .pa-historial [data-col="total"] strong { font-weight: 700; }
.pa-historial [data-col="total"] strong { color: #0f172a; font-size: 14px; }
.pa-fecha { display: block; color: #1e293b; font-weight: 500; }
.pa-ref { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -.01em; }
.pa-historial [data-col="pedido"] .pa-ref { color: #0f172a; font-weight: 700; }
.pa-historial [data-col="local"] small.pa-ref { font-size: 12px; }
.pa-tabla .pa-centro { text-align: center; }
.pa-pedidos tbody tr:hover { background: #f8fafc; }
.pa-pedidos tbody tr:hover [data-col="pedido"] .pa-ref { color: #2563eb; }

.pa-estado { border: 1px solid transparent; font-size: 12px; font-weight: 600; }
.pa-estado-pendiente  { border-color: #fde68a99; }
.pa-estado-preparando { border-color: #bfdbfe99; }
.pa-estado-enviado    { border-color: #ddd6fe99; }

.pa-mini {
    display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 12px;
    border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; color: #334155;
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05); transition: background-color .15s, border-color .15s, transform .1s;
}
.pa-mini svg { color: #64748b; }
.pa-mini:hover { background: #f8fafc; border-color: #cbd5e1; }
.pa-mini:active { transform: scale(.96); }
.pa-inc {
    min-height: 34px; padding: 6px 14px; border: 0; border-radius: 999px; background: #f1f5f9; color: #475569;
    font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background-color .15s;
}
.pa-inc:hover { background: #e2e8f0; color: #0f172a; }
.pa-inc-abierta { background: #fef2f2; color: #b91c1c; font-weight: 600; box-shadow: inset 0 0 0 1px #fecaca; }
.pa-inc-abierta:hover { background: #fee2e2; color: #991b1b; }

.pa-historial .pa-paginas {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 0; padding: 14px 24px; border-top: 1px solid #e2e8f0; background: #fff;
}
.pa-historial .pa-paginas-txt { color: #64748b; font-size: 12.5px; }
.pa-historial .pa-paginas-txt strong { color: #0f172a; font-weight: 600; }
.pa-paginas-botones { display: inline-flex; align-items: center; gap: 6px; }
.pa-pag {
    min-width: 32px; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
    color: #334155; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.pa-pag:hover:not(:disabled) { background: #f8fafc; }
.pa-pag:disabled { color: #64748b; background: #f8fafc; cursor: not-allowed; }
.pa-pag.es-actual { border-color: #2563eb; background: #2563eb; color: #fff; font-weight: 600; }
.pa-pag-hueco { color: #64748b; padding: 0 2px; }

/* La ficha del pedido: ventana centrada en escritorio, cajón a pantalla entera en el móvil. */
#pa-detalle .pa-det { display: flex; flex-direction: column; padding: 0; background: #fff; }
@media (min-width: 901px) {
    #pa-detalle.cp-cajon { justify-content: center; align-items: center; padding: 24px; backdrop-filter: blur(2px); }
    #pa-detalle .pa-det {
        width: min(900px, 100%); height: auto; max-height: 94dvh; overflow: hidden;
        border: 1px solid #e2e8f0; border-radius: 24px;
        box-shadow: 0 20px 45px -10px rgba(15, 23, 42, .12), 0 10px 20px -5px rgba(15, 23, 42, .04);
        animation: pa-det-entra .22s cubic-bezier(.22,.61,.36,1);
    }
}
@keyframes pa-det-entra { from { transform: translateY(10px) scale(.99); opacity: .6 } to { transform: none; opacity: 1 } }
.pa-det-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 26px 32px 18px; border-bottom: 1px solid #f1f5f9; }
.pa-det-cab h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0;
    color: #0f172a; font-size: 23px; font-weight: 700; letter-spacing: -.02em; }
.pa-det-sep { color: #cbd5e1; font-weight: 300; }
.pa-det-local { color: #334155; font-weight: 600; }
.pa-det-fiscal { margin: 4px 0 0; color: #64748b; font-size: 13px; font-weight: 500; }
.pa-det .pa-cerrar { display: grid; place-items: center; background: #f8fafc; color: #64748b; }
.pa-det .pa-cerrar:hover { background: #f1f5f9; color: #334155; }
.pa-det-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding: 24px 32px; }
.pa-det-cuerpo > * + * { margin-top: 26px; }
.pa-det-meta {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 32px;
    padding: 22px 24px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafcb3;
}
.pa-det-meta > div > div + div { margin-top: 16px; }
.pa-det-et { display: block; color: #64748b; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pa-det-valor { margin: 3px 0 0; color: #0f172a; font-size: 15px; font-weight: 600; }
.pa-det-meta small, .pa-det-meta a { display: block; color: #64748b; font-size: 12px; text-decoration: none; }
.pa-det-meta a:hover { color: #2563eb; }
.pa-det-entrega { display: flex; align-items: center; gap: 4px; font-size: 14px; }
.pa-det-entrega svg { color: #64748b; flex-shrink: 0; }
.pa-det-total { margin-top: 2px; color: #0f172a; font-size: 26px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pa-verificado { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid #dbeafe; border-radius: 4px;
    background: #eff6ff; color: #1d4ed8; font-size: 12px; font-weight: 600; vertical-align: 2px; }
.pa-punto { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: 1px; }
.pa-estado-pendiente .pa-punto { animation: pa-late 1.6s ease-in-out infinite; }
.pa-det-seccion h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: #0f172a; font-size: 15px; font-weight: 700; }
.pa-det-seccion h3 .pa-contador { margin: 0; background: #f1f5f9; color: #475569; font-weight: 600; }
.pa-det .pa-tabla-scroll { border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, .04); }
.pa-det .pa-tabla th { padding: 11px 20px; background: #f8fafc; color: #64748b; font-size: 12px; letter-spacing: .06em; }
.pa-det .pa-tabla td { padding: 13px 20px; border-top: 1px solid #f1f5f9; }
.pa-det .pa-tabla td.pa-ref { color: #64748b; font-size: 12px; font-weight: 500; }
.pa-det .pa-tabla tfoot td { background: #f8fafccc; color: #1e293b; }
.pa-det .pa-tabla tfoot tr:last-child td { background: #f1f5f9; font-size: 15px; }
.pa-congelado { display: inline-block; margin-left: 8px; padding: 1px 6px; border: 1px solid #a5f3fc; border-radius: 4px;
    background: #ecfeff; color: #0e7490; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pa-det .pa-sub { margin: 0 0 12px; color: #64748b; font-size: 13px; }

.pa-incidencias { list-style: none; margin: 0 0 12px; padding: 0; }
.pa-incidencias li { padding: 9px 0; border-bottom: 1px solid #f1f5f9; font-size: 13.5px; }
.pa-incidencias small { color: #64748b; }
.pa-inc-form { display: grid; grid-template-columns: 4fr 8fr; gap: 14px 16px; padding: 18px 20px;
    border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc99; }
.pa-inc-form label > span { display: block; margin-bottom: 6px; color: #334155; font-size: 12px; font-weight: 700; }
.pa-inc-form select, .pa-inc-form textarea {
    width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 12px;
    background: #fff; color: #1e293b; font: inherit; font-size: 13.5px; resize: none; box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.pa-inc-form select:focus, .pa-inc-form textarea:focus { outline: 0; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.pa-inc-form .pa-inc-enviar { grid-column: 1 / -1; justify-self: end; }
.pa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; }
.pa-det .pa-eventos { padding-left: 8px; border-left: 2px solid #e2e8f0; margin-left: 4px; }
.pa-det .pa-eventos li { position: relative; padding: 4px 0 4px 16px; border: 0; color: #1e293b; font-size: 13px; }
.pa-det .pa-eventos li::before { content: ''; position: absolute; left: -14px; top: 9px; width: 10px; height: 10px;
    border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 4px #fff; }
.pa-det-pie { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px;
    padding: 16px 32px; border-top: 1px solid #e2e8f0; background: #f8fafccc; }
.pa-det-pie .pa-btn, .pa-det-pie .pa-btn-sec { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 12px; font-weight: 600; }

.pa-ver-filtros { display: none; }
@media (max-width: 900px) {
    .pa-det-meta { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    /* En el móvil los filtros de columna van detrás de «Filtros»: abiertos se
       comían la primera pantalla entera antes del primer pedido. */
    .pa-ver-filtros { display: inline-flex; margin-bottom: 10px; }
    .pa-pedidos:not(.pa-filtros-abiertos) .pa-filtros-tabla { display: none; }
    .pa-filtros-tabla { grid-template-columns: 1fr 1fr; }
    .pa-hist-cab, .pa-hist-filtros { padding-left: 0; padding-right: 0; background: none; border: 0; }
    .pa-historial .pa-tabla td, .pa-historial .pa-tabla td:first-child, .pa-historial .pa-tabla td:last-child { padding: 0; white-space: normal; }
    .pa-historial .pa-paginas { padding: 12px 0; background: none; border: 0; justify-content: center; }
    .pa-historial .pa-paginas-txt { width: 100%; text-align: center; }
    .pa-historial.cp-tarjeta { border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
    .pa-hist-cab { padding-top: 0; padding-bottom: 8px; border: 0; }
    /* Con la letra a 14 px (accesibilidad.css, 07/11) el título, el contador y
       «Descargar CSV» no caben en una línea y se partían los tres: el título
       arriba y lo demás debajo, cada cosa entera. */
    .pa-hist-cab { flex-wrap: wrap; row-gap: 6px; }
    .pa-hist-cab h2 { flex-basis: 100%; }
    .pa-hist-cab :is(.pa-contador, .pa-btn-link) { white-space: nowrap; }
    .pa-hist-filtros { padding-top: 4px; }
    .pa-estado-filtro { flex: 1 1 100%; }
    .pa-historial .pa-tabla td.pa-centro[data-col="pdf"] { text-align: left; }
    .pa-historial .pa-tabla td.pa-centro[data-col="inc"] { text-align: right; }
    .pa-historial .pa-tabla [data-col="local"] strong, .pa-historial .pa-tabla [data-col="quien"] strong,
    .pa-historial .pa-tabla [data-col="local"] small, .pa-historial .pa-tabla [data-col="quien"] small {
        display: inline; font-weight: 400; color: inherit; font-size: inherit; }
    .pa-historial .pa-tabla [data-col="cuando"] small, .pa-historial .pa-tabla [data-col="local"] small.pa-ref { display: none; }
    .pa-det-cab { padding: 18px 16px 14px; }
    .pa-det-cab h2 { font-size: 19px; flex-direction: column; gap: 2px; }
    .pa-det-sep { display: none; }
    .pa-det .pa-tabla { font-size: 12.5px; }
    .pa-det .pa-tabla th, .pa-det .pa-tabla td { padding: 9px 8px; }
    .pa-det .pa-tabla th:first-child, .pa-det .pa-tabla td:first-child { padding-left: 12px; }
    .pa-det .pa-tabla th:last-child, .pa-det .pa-tabla td:last-child { padding-right: 12px; }
    .pa-det-cuerpo { padding: 18px 16px; }
    .pa-det-meta { grid-template-columns: 1fr; padding: 16px; }
    .pa-inc-form { grid-template-columns: 1fr; }
    .pa-det-pie { padding: 12px 16px; }
    .pa-det-pie > * { flex: 1 1 100%; justify-content: center; }
}

/* Filtro desde el título de cada columna del historial (28/10). */
.pa-th-filtro {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 6px; margin: -6px -6px;
    border: 0; border-radius: 6px; background: none; color: inherit; font: inherit; letter-spacing: inherit;
    text-transform: inherit; cursor: pointer;
}
.pa-th-filtro svg { width: 12px; height: 12px; }
.pa-th-filtro:hover, .pa-th-filtro[aria-expanded="true"] { background: #e2e8f0; color: #334155; }
.pa-th-filtro.es-activo { color: #2563eb; }
.pa-th-fondo { position: fixed; inset: 0; z-index: 6400; }
.pa-th-pop {
    position: fixed; z-index: 6401; width: 260px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px;
    background: #fff; box-shadow: 0 10px 30px -6px rgba(15, 23, 42, .18);
}
.pa-th-campos { display: flex; flex-direction: column; gap: 10px; }
.pa-th-campos label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #64748b; }
.pa-th-campos select, .pa-th-campos input { width: 100%; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 14px; color: #0f172a; }
.pa-th-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 12px; }
.pa-th-acciones:empty { display: none; }
/* 28/10: en escritorio se filtra solo desde los títulos; la barra de arriba
   queda para el móvil, donde la tabla es fichas y no tiene títulos. Desde el
   29/10 también en la tabla del proveedor. */
@media (min-width: 721px) { .pa-historial .pa-hist-filtros { display: none; } }
@media (max-width: 720px) { .pa-limpiar-cab { display: none; } }
.pa-limpiar-cab { margin-left: auto; }
/* Las listas del filtro (29/10): un <select> nativo invisible sobre el título abre el menú del sistema. */
span.pa-th-filtro { position: relative; }
span.pa-th-filtro:focus-within { background: #e2e8f0; color: #334155; }
.pa-th-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 14px; }
/* Filas de recuadros de Estadísticas (28/10): el mismo hueco entre filas que dentro. */
.pa-resumen + .pa-resumen { margin-top: -8px; }
.pa-tarjeta strong.pa-tarjeta-texto { font-size: 16px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pa-tarjeta small { display: block; margin-top: 2px; color: #64748b; font-size: 12px; font-variant-numeric: tabular-nums; }
.pa-ver-mas { display: flex; gap: 16px; }
/* «Cargar más» del historial (28/10): el contador y, debajo, el botón. */
#panel-admin .pa-historial .pa-paginas { flex-direction: column; justify-content: center; gap: 10px; }
.pa-cargar-mas { min-width: 220px; min-height: 44px; font-weight: 600; }
.pa-cargar-mas:disabled { opacity: .6; cursor: progress; }

/* ── Recuadros por secciones (29/10) ─────────────────────────────────────
   Cada persona los ordena y agrupa (Personalizar). El nombre de la sección va
   pequeño encima, como los grupos de los ajustes de iOS; el restaurante y el
   proveedor usan las mismas piezas. */
.pa-seccion-tarjetas { margin: 20px 0; }
/* Columnas fijas: en una sección de uno o de cinco, cada recuadro mide lo mismo. */
.pa-seccion-tarjetas .pa-resumen { margin: 8px 0 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 640px) { .pa-seccion-tarjetas .pa-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pa-seccion-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 24px; }
.pa-seccion-titulo { margin: 0; color: #64748b; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.pt-editor { display: grid; gap: 14px; margin: 20px 0 28px; }
.pt-cab h2 { margin: 0; color: #0f172a; font-size: 17px; font-weight: 700; }
.pt-cab p { margin: 4px 0 0; color: #64748b; font-size: 14px; }
.pt-seccion { border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; overflow: hidden; }
.pt-seccion-cab { display: flex; align-items: center; gap: 4px; padding: 8px 10px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.pt-titulo {
    flex: 1 1 auto; min-width: 0; padding: 7px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
    background: #fff; color: #0f172a; font: inherit; font-size: 15px; font-weight: 600;
}
.pt-titulo:focus, .pt-mover:focus { outline: 0; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.pt-quitar { margin-left: 4px; }
.pt-lista { margin: 0; padding: 0; list-style: none; }
.pt-fila { display: flex; align-items: center; gap: 4px; padding: 6px 10px 6px 14px; }
.pt-fila + .pt-fila { border-top: 1px solid #f1f5f9; }
.pt-nombre { flex: 1 1 auto; min-width: 0; color: #1e293b; font-size: 15px; }
.pt-mover {
    flex: 0 1 190px; min-width: 0; padding: 6px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
    background: #fff; color: #334155; font: inherit; font-size: 13px;
}
.pt-flecha {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: #475569; cursor: pointer;
}
.pt-flecha:hover:not(:disabled) { background: #f1f5f9; color: #0f172a; }
.pt-flecha:focus-visible { outline: 2px solid #2563eb; outline-offset: 0; }
.pt-flecha:disabled { color: #cbd5e1; cursor: default; }
.pt-vacia { padding: 12px 14px; color: #64748b; font-size: 14px; }
.pt-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pt-hueco { flex: 1 1 auto; }
@media (pointer: coarse) { .pt-flecha { width: 44px; height: 44px; } }
@media (max-width: 640px) {
    .pt-fila { flex-wrap: wrap; padding: 10px 10px 10px 14px; }
    .pt-nombre { flex-basis: 100%; }
    .pt-mover { flex: 1 1 auto; }
    .pt-hueco { display: none; }
    .pt-acciones [data-cancelar], .pt-acciones [data-guardar] { flex: 1 1 40%; min-height: 44px; }
}

/* «Descargar CSV» (29/10): a la derecha del contador; «Quitar filtros» va detrás. */
.pa-hist-cab .pa-csv { margin-left: auto; }
.pa-hist-cab .pa-csv ~ .pa-limpiar-cab { margin-left: 0; }
.pa-rankings-cab { margin: 28px 0 10px; }

/* Avisos en el móvil (29/10): campana y texto, sin más peso que un enlace. */
.pa-avisos { display: inline-flex; align-items: center; gap: 6px; }
.pa-cabecera-pedidos .pa-avisos { margin-left: auto; }
/* En el teléfono no cabe junto al título y el local: baja a su propia línea. */
.pa-cabecera-pedidos { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 640px) { .pa-cabecera-pedidos .pa-avisos { order: 3; flex-basis: 100%; margin-left: 0; } }
.pa-avisos[aria-pressed="true"] { color: #1d6b3a; }

/* Detalle de un pedido en el móvil (07/11): la tabla de cinco columnas no
   cabía y el importe salía cortado. Cada producto pasa a ser una ficha: la
   referencia pequeña arriba, el nombre, y debajo cantidad · precio a la
   izquierda y el importe a la derecha. Los totales, etiqueta e importe. */
@media (max-width: 560px) {
    #pa-detalle .pa-det-seccion .pa-tabla-scroll { overflow: visible; }
    #pa-detalle .pa-det-seccion .pa-tabla,
    #pa-detalle .pa-det-seccion .pa-tabla :is(tbody, tfoot) { display: block; width: 100%; }
    #pa-detalle .pa-det-seccion .pa-tabla thead { display: none; }
    #pa-detalle .pa-det-seccion .pa-tabla tbody tr {
        display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 2px;
        padding: 12px 14px; border-bottom: 1px solid #eef0f3;
    }
    #pa-detalle .pa-det-seccion .pa-tabla tbody td { padding: 0; border: 0; text-align: left; }
    #pa-detalle .pa-det-seccion .pa-tabla tbody td:nth-child(1) { grid-column: 1 / -1; font-size: 13px; color: #5c6670; }
    #pa-detalle .pa-det-seccion .pa-tabla tbody td:nth-child(2) { grid-column: 1 / -1; font-weight: 600; }
    #pa-detalle .pa-det-seccion .pa-tabla tbody td:nth-child(3) { grid-column: 1; color: #3d444b; }
    #pa-detalle .pa-det-seccion .pa-tabla tbody td:nth-child(4) { grid-column: 2; color: #5c6670; }
    #pa-detalle .pa-det-seccion .pa-tabla tbody td:nth-child(4)::before { content: '× '; }
    #pa-detalle .pa-det-seccion .pa-tabla tbody td:nth-child(5) { grid-column: 3; text-align: right; }
    #pa-detalle .pa-det-seccion .pa-tabla tfoot tr { display: flex; justify-content: space-between; gap: 12px; padding: 8px 14px; }
    #pa-detalle .pa-det-seccion .pa-tabla tfoot td { padding: 0; border: 0; }
}