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

/* `overscroll-behavior: contain` corta el encadenado del scroll: al llegar
   al final del panel la tienda de detrás ya no se pone a rodar sola. */
.pa-overlay {
    overscroll-behavior: contain;
    position: fixed;
    inset: 0;
    z-index: 6100;               /* por encima del selector de restaurante (6000) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
    background: rgba(15, 17, 21, .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: pa-aparece .18s ease-out;
}
.pa-overlay-detalle { z-index: 6200; align-items: center; }

@keyframes pa-aparece { from { opacity: 0 } to { opacity: 1 } }

.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 ficha para tapar lo que
       pasa por debajo. Sin esto habría que repetir el valor en cada media. */
    --pa-pad: 28px;
    width: 100%;
    max-width: 1140px;
    padding: 26px var(--pa-pad) 32px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
.pa-caja-detalle { max-width: 820px; }
.pa-caja.pa-ocupado { opacity: .55; pointer-events: none; }

.pa-cargando { padding: 48px; text-align: center; color: #6c757d; }
.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: #6c757d; 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: 0 calc(var(--pa-pad) * -1) 0;
    padding: 0 var(--pa-pad);
    background: #fff;
    /* 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 #f1f3f5;
}

/* 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 #f1f3f5;
}
.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;
    border-radius: 13px;
    background: #f8f9fa;
}
.pa-tarjeta span { display: block; color: #6c757d; 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: #868e96; }

/* ── 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;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    background: #fff;
}

.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: #868e96; font-size: 11.5px; font-weight: 400; }
.pa-rk-medio { color: #868e96; 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: #868e96; font-size: 11.5px; 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: #6c757d;
    font-size: 11.5px; 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: #868e96; font-size: 11.5px; }
.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: #6c757d; font-size: 11.5px; 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: #868e96; 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: #868e96; }

@media (max-width: 720px) {
    .pa-caja { --pa-pad: 16px; padding: 20px var(--pa-pad) 26px; border-radius: 16px; }
    .pa-cabecera h2 { font-size: 19px; }
    .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"
            "prov   prov"
            "local  local"
            "quien  cuando";
        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="prov"]   { grid-area: prov; color: #495057; font-size: 13px; }
    /* 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: #868e96; 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: #868e96; 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; }
}

/* ── 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: 10.5px; color: #adb5bd; letter-spacing: .03em; font-variant-numeric: tabular-nums; }

/* ── Gráfica de evolución ────────────────────────────────────────────── */
.pa-caja-grafica {
    margin: 0 0 18px;
    padding: 16px 18px 10px;
    border: 1px solid #e9ecef;
    border-radius: 14px;
    background: #fff;
}
.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: #868e96; }

/* ── 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 {
    padding: 3px 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #868e96;
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    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. */
.pa-overlay {
    --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;
}