/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 * Slim, elegant scrollbar for the wide horizontally-scrolling order tables.
 * Thin transparent track with a rounded slate thumb that darkens on hover.
 */
.scrollbar-thin {
    scrollbar-width: thin;                          /* Firefox */
    scrollbar-color: rgba(100, 116, 139, 0.5) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.5);     /* slate-500 @ 50% */
    border-radius: 9999px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.8);
}

/*
 * Flash highlight for a row jumped to from the orders quick search: a soft
 * amber pulse that fades back to transparent.
 */
.orders-search-flash > td {
    animation: orders-search-flash 2.2s ease-out;
}

@keyframes orders-search-flash {
    0%   { background-color: rgba(250, 204, 21, 0.55); }
    100% { background-color: transparent; }
}

/*
 * Desplegables de filtro (<details>): el de tiendas de /admin/orders y el de
 * ubicaciones de inventario y traspasos. El ::before del summary abierto es la
 * capa que cierra el menú al tocar fuera, y los z-index lo ponen por encima del
 * resto de la interfaz en tablet, donde las tarjetas crean su propio contexto.
 *
 * Las pantallas antiguas repiten estas reglas en un <style> propio; al ir
 * después ganan por cascada y siguen valiendo igual.
 */
details > summary::-webkit-details-marker { display: none; }
.filter-dropdown { position: relative; z-index: 30; }
.filter-dropdown[open] { z-index: 80; }
.filter-dropdown[open] summary::before { content: ' '; position: fixed; inset: 0; z-index: 70; cursor: default; }
.filter-dropdown-menu { z-index: 90; }

/* Hide Spinners around Tailwind Number inputs */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

input[type='number'] {
    -moz-appearance: textfield;
    /* Firefox */
    appearance: textfield;
}


/*
 * La plancha de /admin/tiempos, dibujada en SVG (admin/tiempos/_plancha).
 *
 * Los huecos libres, mientras hay una paella cogida (`kitchen-layout` pone y
 * quita `.is-free-target`), llevan un **aro índigo que respira**: dice dónde se
 * la puede dejar, se ve de lejos y no mueve el dibujo. Antes temblaban, y con
 * mesas y quemadores dibujados un fuego que se mueve parece que se cae. Con
 * `prefers-reduced-motion` el aro se queda quieto, pero sigue ahí.
 *
 * Un <g> sólo escala sobre sí mismo con `transform-box: fill-box`: sin eso, el
 * quemador de tres aros crecería desde la esquina del dibujo. El foco del
 * teclado va en su propio aro, porque un <g> no pinta `outline`.
 */
.kitchen-scene .kitchen-free {
    display: none;
}

.kitchen-scene .kitchen-slot.is-free-target .kitchen-free {
    display: inline;
    animation: burner-breathe 1.4s ease-in-out infinite;
}

@keyframes burner-breathe {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .kitchen-scene .kitchen-slot.is-free-target .kitchen-free {
        animation: none;
    }
}

.kitchen-scene .kitchen-disc {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.kitchen-scene .slot-focus {
    stroke: transparent;
}

.kitchen-scene .kitchen-slot:focus-visible .slot-focus {
    stroke: #4F46E5;
}

/* Los gestos de los menús de /admin/tiempos (la tanda y el fuego): filas de
 * menú del estilo del panel, pero de 44 px —se tocan de pie y con prisa—. El
 * color se queda en los dos que importan: arrancar el crono (ámbar, como el
 * paso «Echar arroz» de la tarjeta) y sacar las paellas (verde, el que cierra
 * la tanda). Sin `display` propio: lo pone `kitchen-layout` al enseñarlas. */
.kitchen-action {
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    padding: 0 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    cursor: pointer;
    transition: background-color 0.15s ease;
}
.kitchen-action:hover { background: rgba(0, 0, 0, 0.04); }
.kitchen-action svg { width: 16px; height: 16px; flex-shrink: 0; }
.kitchen-action-start { background: #FEF3C7; color: #92400E; }
.kitchen-action-start:hover { background: #FDE68A; }
.kitchen-action-done { background: #16A34A; color: #FFFFFF; }
.kitchen-action-done:hover { background: #15803D; }
.kitchen-action-danger { color: #DC2626; }
.kitchen-action-danger:hover { background: #FEF2F2; }

/* La tarjeta del catálogo cuya ficha está puesta en el panel lateral.
 *
 * Va en CSS y no como clases de Tailwind alternadas desde el JS porque son tres
 * propiedades a la vez, y el aro se dibuja **por fuera** del borde para que la
 * tarjeta no cambie de tamaño al elegirla: media rejilla se movería un píxel
 * cada vez que se abre una ficha.
 */
.item-card.is-selected {
    border-color: #4F46E5;
    box-shadow: 0 0 0 2px #4F46E5;
}

/*
 * Una celda de la rejilla de franjas de /admin/franjas.
 *
 * El dibujo vive aquí y no en clases alternadas desde el JS porque el estado es
 * **un dato** —`data-closed`— y así hay un solo sitio que decide cómo se ve una
 * franja cerrada: la pantalla que la pinta al cargar y el controlador que la
 * repinta al tocarla ponen el mismo atributo y no dos listas de clases que
 * acabarían separándose.
 *
 * Sólo tiñe lo cerrado, como en la rejilla de planificación sólo tiñe el
 * agotado: lo abierto es lo normal, y pintarlo también llenaría el mes de color
 * sin decir nada. La cerrada lleva además su aspa: un color solo no dice "aquí
 * no se sirve" —ni a quien no lo distingue ni a quien mira de lejos.
 */
.slot-cell {
    display: inline-block;
    width: 2.25rem;
    height: 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid #E5E7EB;
    background-color: #FFFFFF;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.slot-cell:hover {
    border-color: #9CA3AF;
}

.slot-cell:focus-visible {
    outline: 2px solid #4F46E5;
    outline-offset: 1px;
}

.slot-cell[data-closed="true"] {
    border-color: #D1D5DB;
    background-color: #E5E7EB;
    /* El aspa, dibujada con dos degradados para no meter un SVG por celda: son
       doscientas diez en un mes. */
    background-image:
        linear-gradient(to top right, transparent calc(50% - 1px), #9CA3AF calc(50% - 1px), #9CA3AF calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(to bottom right, transparent calc(50% - 1px), #9CA3AF calc(50% - 1px), #9CA3AF calc(50% + 1px), transparent calc(50% + 1px));
}

/* La misma celda cuando no se puede tocar: un día ya pasado y los dos ejemplos
   de la leyenda. Se ve igual, pero no invita al dedo. */
.slot-cell.is-static {
    cursor: default;
    opacity: 0.75;
}

/* Mientras el guardado va de viaje. Si vuelve mal, el controlador deshace lo
   pintado: dejarlo puesto haría creer que hay una franja cerrada que al
   recargar vuelve a estar abierta. */
.slot-cell.is-saving {
    opacity: 0.5;
}

/* ── El pliegue de Producto/s en /admin/ecommerce_orders ────────────────────
   La fila mide un producto de alto y el resto se despliega con su botón: un
   pedido de cuatro arroces estiraba su fila al cuádruple, y con dos de ésos en
   pantalla la tabla se recorría a saltos de pedido en vez de leerse de un
   vistazo.

   El alto de renglón está escrito **una vez** y lo leen las tres cosas que se
   pliegan con la fila: los productos y las dos notas. Y el estado plegado es el
   del CSS y no el de un `hidden` que ponga el JS al conectarse — así el servidor
   pinta la fila ya plegada y la tabla no da un salto al cargar. */
:root {
    --prod-row: 1.5rem;
}

.prod-row {
    height: var(--prod-row);
}

tr:not(.is-expanded) [data-prod-unit] ~ [data-prod-unit] {
    display: none;
}

/* El chevrón lo da la vuelta la misma clase que despliega la fila, y no el JS:
   `rotate-180` a secas no existe en el build (Tailwind sólo compila el
   `group-open:rotate-180` que usan los <details> del panel), así que puesta
   desde el JS habría sido una clase que no gira nada. */
tr.is-expanded [data-prod-caret] {
    transform: rotate(180deg);
}

/* Las dos notas de la fila van al mismo pliegue: plegadas miden un renglón, como
   la fila, y desplegadas crecen con ella. Eran las celdas que estiraban la fila
   —una nota de cuatro renglones medía el triple que sus vecinas— y ahí el
   pliegue de Producto/s no llegaba, porque una nota no es una línea de pedido.
   Se leen enteras con su propio scroll, y el texto completo va en el `title`.

   Plegadas se cortan por **una línea entera** (`line-clamp`) y no por un alto en
   píxeles: un tope de 24 px sobre un renglón de 16 dejaba asomando la mitad de
   la segunda línea, y media línea de texto cortada a lo ancho se lee como una
   pantalla rota. Cortando por líneas la fila plegada mide siempre lo que mide un
   renglón de esa nota, se escriba con la letra que se escriba.

   La de cocina lleva **la misma regla** que la del cliente y no una suya: son
   las dos notas de la misma fila, viven una encima de otra, y a dos alturas la
   de abajo se leería como un pie de página de la de arriba. */
.customer-note,
.kitchen-note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

tr.is-expanded .customer-note,
tr.is-expanded .kitchen-note {
    display: block;
    max-height: 5rem;
    overflow-y: auto;
}

/* ── La columna de ID congelada en /admin/ecommerce_orders ──────────────────
   Son dieciséis columnas: a mitad de scroll se está mirando el coste o el
   teléfono de una fila sin saber de qué pedido son, y la única manera de
   averiguarlo era volver al principio. El ID viaja pegado a la izquierda.

   El fondo tiene que ser **opaco** —la celda tapa lo que pasa por debajo— y no
   siempre es el mismo: blanco en una fila, gris en la cabecera, ámbar en la
   tabla de los pedidos sin fecha. Lo dice quien lo sabe (`--sticky-bg`, escrita
   en el <thead>) en vez de haber aquí una lista de colores que se queda vieja
   en cuanto alguien cambia uno. */
.sticky-col {
    position: sticky;
    left: 0;
    z-index: 2;
    /* Sigue la banda de su fila (`--row-bg`) salvo que alguien le diga otra
       cosa: el <thead> sí lo hace, porque su gris no es el de ninguna fila. */
    background-color: var(--sticky-bg, var(--row-bg, #FFFFFF));
}

/* La columna congelada **no dibuja ninguna costura**, y eso es una decisión.
   Hubo una sombra que salía al desplazar para decir "aquí hay algo pasando por
   debajo", y se quitó: era lo único que hacía que la tabla quieta y la tabla
   desplazada no se parecieran. Además se cortaba en las filas que no tienen
   columnas —la banda del rider y la cabecera del día, que no llevan celda
   congelada—, así que ni siquiera era una línea: eran trozos de línea a distintas
   alturas. Lo que dice que el ID está congelado es que se queda quieto. */

/* La cabecera va por encima de las celdas congeladas de las filas, que si no la
   primera fila se le sube encima al llegar arriba del todo. */
thead .sticky-col {
    z-index: 3;
    /* Y su raya de abajo se dibuja **dentro** de la celda. Con
       `border-collapse: collapse` el borde es de la tabla y no de la celda, así
       que se queda quieto mientras el ID congelado viaja: a mitad de scroll la
       esquina de arriba a la izquierda se quedaba sin la raya que la separa de
       las filas, y con ella se perdía el borde que hace que eso siga leyéndose
       como una tabla. Es la misma razón por la que la sombra va en un `::after`
       y no en un `box-shadow` de la celda. */
    box-shadow: inset 0 -1px 0 #E5E7EB;
}

/* ── La banda del rider ─────────────────────────────────────────────────────
   No es una fila de datos: es un `<td>` a todo lo ancho, así que el scroll
   horizontal se llevaba su texto por delante y a mitad de tabla quedaba un
   "…gnar 5 pedidos" sin sujeto — justamente lo que hace falta saber para leer
   las filas de al lado, que es lo mismo que el ID congelado resuelve para cada
   fila.

   Se congela el **contenido** y no la celda: la celda es tan ancha como la tabla
   y anclarla no movería nada. El envoltorio mide lo que mide su texto, así que
   se queda pegado a la izquierda mientras su banda sigue de fondo, y lleva su
   propio margen porque anclado al borde del viewport el texto daría un salto del
   ancho del padding en cuanto la tabla empieza a rodar.

   La cabecera del día no necesita esto: vive **fuera** del viewport de scroll de
   su tarjeta, como la de la tabla de sin fecha, así que no se desplaza. */
.sticky-label {
    position: sticky;
    left: 0;
    z-index: 1;
}

/* El realce de la fila al pasar el ratón tiene que alcanzar también a la celda
   congelada: con su fondo blanco encima, la fila se iluminaba entera menos su
   ID, que es justo donde está el ojo. Es `indigo-50/40` resuelto sobre blanco,
   porque aquí el color no puede ser translúcido. */
tr:hover > .sticky-col {
    background-color: var(--row-hover-bg, #F8FAFF);
}

/* ── Las dos minibarras de la tabla de pedidos ──────────────────────────────
   El verde del total y el rojo del coste van **ancladas abajo del todo de su
   celda** y no pegadas debajo de su cifra. Las filas no miden todas lo mismo —el
   coste lleva una segunda línea y los productos se despliegan—, así que colgando
   de la cifra cada barra caía a una altura distinta y dejaban de poder
   compararse de un vistazo, que es lo único para lo que están.

   La celda se declara `bar-cell` y la barra `bar-track`, y la regla es
   **anidada** a propósito: el dibujo del coste es un parcial compartido con
   /admin/horeca_orders y con las filas de tienda, donde la celda no declara
   nada y la barra se queda en su sitio de siempre. Así una pantalla no arrastra
   a las otras. */
.bar-cell {
    position: relative;
    /* El hueco que ocupa la barra, para que no se suba encima de la cifra de la
       fila más corta. */
    padding-bottom: 0.75rem;
}

.bar-cell .bar-track {
    position: absolute;
    bottom: 0.375rem;
    left: 0.5rem;
    /* Ancho fijo y corto, no el de la celda. Una barra que llega de lado a lado
       compite con las cifras que tiene encima y encima miente sobre lo que mide:
       la columna es ancha porque cabe un importe, no porque el valor sea grande.
       Fija, las cinco barras de una pantalla se comparan entre ellas, que es lo
       único para lo que están. */
    width: 3.5rem;
    margin: 0;
}

/* ── Las bandas de la tabla de pedidos ──────────────────────────────────────
   Blanco y gris alternados. Con dieciséis columnas y filas que además cambian de
   alto al desplegar sus productos, seguir una fila hasta el teléfono o el
   cliente era irse a la de arriba a mitad de camino.

   Los tres grises de esta tabla son una escalera y el orden importa: la fila
   par (gray-100) pesa más que el blanco, y la banda del rider —que agrupa— pesa
   más que las dos. Subir uno sin mirar los otros deja la agrupación leyéndose
   al revés, que es justo lo que pasó al oscurecer las filas.

   Va en CSS y no en una clase escrita fila a fila desde el servidor porque la
   tabla se **reordena en el navegador** (`table-sort` mueve los <tr> dentro de
   su grupo): unas bandas cocidas en el HTML quedarían a pares y nones después
   del primer clic en una cabecera, mientras que `:nth-child` se recalcula solo.

   Y va en una variable y no en `background-color` a secas porque hay una celda
   —el ID congelado— que tiene que pintarse del mismo color con su propio fondo
   opaco. Una segunda lista de colores para ella sería el sitio donde una de las
   dos se queda vieja. */
tr[data-sortable-row] {
    background-color: var(--row-bg, #FFFFFF);
}

/* Las tablas sin cabecera de grupo (cancelados, unificados, sin fecha) empiezan
   en la primera fila; las de un día llevan delante la banda del rider, que corre
   la cuenta un sitio. Son dos selectores y no uno porque lo que hay que contar
   son filas de pedido y CSS sólo sabe contar hermanos, y son excluyentes entre
   sí —`:not(:has(…))` frente a `:has(…)`— para no tener que desteñir después lo
   que el otro haya teñido de más. Así las dos clases de tabla empiezan en
   blanco. */
tbody:not(:has(> tr[data-group-head])) > tr[data-sortable-row]:nth-child(even),
tbody:has(> tr[data-group-head]) > tr[data-sortable-row]:nth-child(odd) {
    --row-bg: #F3F4F6;
    /* El realce del ratón resuelto sobre el gris: en la celda congelada el color
       no puede ser translúcido, así que el tono se declara. */
    --row-hover-bg: #F1F3FA;
}