/*
 * Estilos de las vistas propias del panel.
 *
 * Filament 4 no expone las utilidades de Tailwind a las vistas de la
 * aplicación: un `class="flex gap-4"` en un blade nuestro no hace nada, y
 * la pantalla sale con todo apilado. Se descubrió mirando el informe en el
 * navegador; en el HTML las clases estaban, pero no existían.
 *
 * Esta hoja se registra con FilamentAsset, así que no hace falta montar un
 * pipeline de Tailwind solo para tres pantallas.
 */

.ros-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
}

.ros-row + .ros-row {
    border-top: 1px solid rgb(0 0 0 / 8%);
}

.dark .ros-row + .ros-row {
    border-top-color: rgb(255 255 255 / 8%);
}

.ros-row-name {
    flex: 1 1 12rem;
    min-width: 0;
    font-weight: 600;
}

/*
 * En tablet, apiladas.
 *
 * A 1024 las tres partes de la fila —nombre, contexto e importe— no caben
 * en línea y la última se partía por la mitad, dejando «1 × 1 000 g» en un
 * renglón y el precio pegado debajo sin alinear con nada.
 */
@media (max-width: 1100px) {
    .ros-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
    }

    /*
     * Y el `flex-basis` se suelta.
     *
     * En columna, la base de 12 rem deja de ser ancho y pasa a ser **alto**:
     * cada nombre se quedaba con doce rem de hueco vacío debajo y la fila
     * medía media pantalla.
     */
    .ros-row-name {
        flex: 0 0 auto;
    }
}

/*
 * Las cifras del informe.
 *
 * `auto-fit` con un mínimo de 11 rem dejaba tres arriba y una sola abajo a
 * 1024, que se lee como si la última fuera otra cosa. Con 8 rem caben las
 * cuatro en una fila en tablet y siguen entrando cinco en escritorio.
 */
.ros-stats {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.ros-stat-label {
    font-size: 0.875rem;
    opacity: 0.65;
}

.ros-stat-value {
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ros-num {
    font-variant-numeric: tabular-nums;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.875rem;
}

.ros-muted {
    font-size: 0.875rem;
    opacity: 0.65;
}

/*
 * Los avisos del escritorio.
 *
 * Cada uno dice qué pasa, por qué importa y a dónde ir. El borde de la
 * izquierda lleva el color —no el fondo entero—: cinco tarjetas rojas
 * seguidas se leen como un error del sistema y no como cinco cosas que
 * hacer.
 */
.ros-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0 0.75rem 0.9rem;
    border-left: 3px solid rgb(217 119 6);
}

.ros-alert + .ros-alert {
    margin-top: 0.5rem;
}

.ros-alert-urgent {
    border-left-color: rgb(190 18 60);
}

.ros-alert-text {
    flex: 1 1 20rem;
    min-width: 0;
}

.ros-alert-title {
    font-weight: 600;
}

.ros-alert-link {
    flex: 0 0 auto;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Un dato que acompaña al de arriba y no compite con él: va en su propio
   renglón. Inline se parte por la mitad en cuanto la columna se estrecha
   —«Pepperoni última / vez el 30/08»— y se lee como si fuera el nombre. */
.ros-sub {
    display: block;
    font-size: 0.875rem;
    opacity: 0.65;
}

/* Un faltante tiene que verse como un faltante. */
.ros-danger {
    color: rgb(190 18 60);
}

.dark .ros-danger {
    color: rgb(253 164 175);
}

.ros-warn {
    color: rgb(180 83 9);
}

.dark .ros-warn {
    color: rgb(253 186 116);
}

.ros-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.ros-filters label {
    display: grid;
    gap: 0.25rem;
    font-size: 0.875rem;
}

.ros-filters input {
    border: 1px solid rgb(0 0 0 / 15%);
    border-radius: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: transparent;
    color: inherit;
}

.ros-note {
    margin-top: 1rem;
    font-size: 0.875rem;
    opacity: 0.65;
}

/*
 * Tabla del informe de descuadres.
 *
 * Se desborda en horizontal dentro de su caja en vez de estirar el modal:
 * son cinco columnas con importes y en una pantalla de portátil no caben
 * sin encogerse hasta no poder leerse.
 */
.ros-table-wrap {
    overflow-x: auto;
    margin-top: 0.75rem;
}

.ros-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ros-table th,
.ros-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
}

.dark .ros-table th,
.dark .ros-table td {
    border-bottom-color: rgb(255 255 255 / 8%);
}

.ros-table th {
    font-weight: 600;
    white-space: nowrap;
    opacity: 0.7;
}

.ros-table td.ros-num,
.ros-table th.ros-num {
    text-align: right;
    white-space: nowrap;
}

/*
 * La primera columna acompaña al scroll.
 *
 * El cuadre tiene nueve columnas y en una tablet de 1024 se ven seis: al
 * arrastrar hacia la derecha para llegar a «ajustes» —que es la columna por
 * la que existe el informe— se pierde de vista de qué insumo se está
 * hablando, y hay que volver a la izquierda a comprobarlo en cada fila.
 * Reordenar las columnas para que quepan rompería el orden del libro, que
 * se lee de izquierda a derecha como pasaron las cosas.
 */
.ros-table th:first-child,
.ros-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--ros-surface, #ffffff);
}

.dark .ros-table th:first-child,
.dark .ros-table td:first-child {
    background: var(--ros-surface-dark, #1f2937);
}

.ros-table small {
    opacity: 0.65;
}

/* Encabezado del informe de descuadres: el importe manda. */
.ros-claim {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 1.05rem;
}

/*
 * El histórico de puntos de un cliente.
 *
 * Se lee por teléfono mientras el cliente reclama, así que lo que manda es
 * la columna de la derecha: cuánto entró o salió y cuánto quedó. Lo demás
 * es contexto.
 */
.ros-ledger-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4, 1rem);
    padding: var(--space-3, 0.75rem) 0;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
}

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

.ros-ledger-type {
    font-weight: 600;
}

.ros-ledger-points {
    text-align: right;
    white-space: nowrap;
}

/* Lo que sale, en rojo: es lo que el cliente viene a preguntar. */
.ros-ledger-out {
    color: rgb(190 24 60);
}

/*
 * «Tu plan»: lo que se consume frente a lo que se paga.
 *
 * El número manda sobre la barra. Una barra al 80 % no dice si quedan dos
 * locales o doscientos pedidos, y eso es justo lo que hay que saber para
 * decidir si toca cambiar de plan.
 */
.ros-plan-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-4, 1rem);
    padding-bottom: var(--space-4, 1rem);
}

.ros-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-5, 1.25rem);
    padding-bottom: var(--space-5, 1.25rem);
}

.ros-plan-item {
    padding: var(--space-4, 1rem);
    border: 1px solid rgb(0 0 0 / 0.08);
    border-radius: var(--radius-control, 10px);
}

.ros-plan-label {
    display: block;
    font-size: 0.875rem;
    opacity: 0.7;
}

.ros-plan-count strong {
    font-size: 1.5rem;
    margin-right: 0.35rem;
}

.ros-plan-count .ros-sub { display: inline; }

.ros-plan-bar {
    margin-top: var(--space-3, 0.75rem);
    height: 6px;
    border-radius: 3px;
    background: rgb(0 0 0 / 0.08);
    overflow: hidden;
}

.ros-plan-fill {
    height: 100%;
    background: rgb(37 99 235);
}

/* En el límite, en rojo: es lo que va a frenar el próximo local. */
.ros-plan-fill-over { background: rgb(190 24 60); }

.ros-plan-over { color: rgb(190 24 60); }

/*
 * El histograma de horas de la ficha del cliente.
 *
 * En barras y no en una línea: son cuentas de pedidos por hora, y una curva
 * suave entre las 19 y las 21 dibujaría una colina donde solo hay dos datos.
 * La altura la fija el pico —no una escala absoluta—, porque quien tiene tres
 * pedidos también tiene derecho a ver su hora.
 *
 * Sin Tailwind: Filament 4 no expone sus utilidades a los blades de la
 * aplicación, así que un `class="flex"` aquí está en el HTML y no existe.
 */
.ros-hours {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    margin-top: var(--space-4, 1rem);
    /* Alto fijo y pequeño: es un dato de apoyo, no la pantalla. Sin tope, una
       barra al 100 % empuja fuera de la vista todo lo que viene debajo. */
    height: 5rem;
}

.ros-hour {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    /* Mínimo para que en un móvil las 24 barras no se queden en un pelo. */
    min-width: 0.5rem;
}

.ros-hour-bar {
    width: 100%;
    border-radius: 2px 2px 0 0;
    background: rgb(37 99 235 / 0.75);
}

.ros-hour-label {
    margin-top: 2px;
    font-size: 0.625rem;
    line-height: 1;
    opacity: 0.6;
}

/*
 * Tres listas en paralelo —sus marcas, sus platos, cómo paga— que en una
 * tablet caben y en un móvil se apilan.
 *
 * `minmax(12rem, 1fr)` y no `flex: 1 1 12rem`: al apilar, la base de un flex
 * en columna pasa a ser **alto** y deja doce rem de hueco vacío debajo de cada
 * bloque.
 */
.ros-columnas {
    display: grid;
    gap: var(--space-6, 1.5rem);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

/*
 * Cada marca del informe «Por marca», en su propio bloque.
 *
 * En bloques y no en una tabla: son doce números por marca y una tabla de doce
 * columnas en una tablet se lee arrastrando, que es justo lo que no se puede
 * hacer cuando se está comparando tres enseñas entre sí.
 */
.ros-marca {
    padding: var(--space-4, 1rem) 0;
    border-top: 1px solid rgb(0 0 0 / 0.08);
}

.ros-marca:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.ros-marca-head {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    margin-bottom: var(--space-3, 0.75rem);
}

.ros-marca-nombre {
    font-size: 1.125rem;
    font-weight: 600;
}

/*
 * Un segundo rótulo dentro de una columna necesita aire.
 *
 * En la ficha del cliente, «Cómo paga» y «Por dónde pide» comparten bloque, y
 * al apilarse en un móvil el segundo rótulo quedaba pegado a la última línea
 * del primero: se leía como si «WhatsApp» fuera una forma de pago.
 */
.ros-columnas .ros-stat-label + * {
    margin-top: 0.125rem;
}

.ros-columnas .ros-stat-label:not(:first-child) {
    margin-top: var(--space-4, 1rem);
}

/*
 * El hilo de una conversación de WhatsApp, en el panel (#162).
 *
 * Se parece a un chat a propósito: quien atiende viene de usar WhatsApp en el
 * móvil, y una tabla de mensajes obliga a aprender a leer otra cosa. Lo del
 * negocio a la derecha y lo del cliente a la izquierda, que es la convención
 * que ya tiene todo el mundo en la cabeza.
 */
.ros-chat {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* Con tope: el histórico de quien pide cada semana son cientos de mensajes
       y sin alto máximo la caja de responder queda a tres pantallas de scroll. */
    max-height: 26rem;
    overflow-y: auto;
    padding-right: 0.25rem;
}

.ros-chat-row {
    display: flex;
    justify-content: flex-start;
}

.ros-chat-mine {
    justify-content: flex-end;
}

.ros-chat-bubble {
    max-width: 80%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: rgb(244 244 245);
}

.dark .ros-chat-bubble {
    background: rgb(39 39 42);
}

.ros-chat-bubble-mine {
    background: rgb(219 234 254);
}

.dark .ros-chat-bubble-mine {
    background: rgb(30 58 138);
}

.ros-chat-text {
    font-size: 0.875rem;
    /* Los saltos de línea del cliente se respetan: un pedido escrito en tres
       líneas en una sola se lee mal. */
    white-space: pre-wrap;
    word-break: break-word;
}

.ros-chat-meta {
    margin-top: 0.125rem;
    font-size: 0.6875rem;
    opacity: 0.6;
}

.ros-chat-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.ros-chat-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid rgb(212 212 216);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    background: transparent;
}

.dark .ros-chat-input {
    border-color: rgb(63 63 70);
}

/*
 * La fila del botón de una pantalla propia.
 *
 * En un recurso el botón de guardar lo pinta Filament; en una página con
 * formulario propio no hay ninguno, y sin esto el botón se queda pegado al
 * borde izquierdo debajo de la última tarjeta, donde no se lee como «ya está».
 */
.ros-acciones {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1rem;
}

/*
 * La captura del pago dentro del aviso de confirmar.
 *
 * Acotada en alto: una captura de móvil es más alta que ancha y sin tope
 * empuja el botón de confirmar fuera de la pantalla de la tablet.
 */
.ros-voucher {
    display: block;
    max-width: 100%;
    max-height: 60vh;
    margin: 0.75rem auto 0;
    border-radius: 0.5rem;
    border: 1px solid rgb(0 0 0 / 15%);
}

/*
 * El selector de marca de la barra superior.
 *
 * El nombre de la marca va en negrita porque es lo que se mira de un
 * vistazo: «Marca:» solo dice qué es el botón. En un móvil el rótulo sobra y
 * se esconde; el nombre se recorta antes que empujar el avatar fuera.
 */
.ros-marca-selector {
    display: flex;
    align-items: center;
    margin-inline-end: 0.75rem;
}

.ros-marca-disparador {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 16rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgb(0 0 0 / 12%);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    background: transparent;
    cursor: pointer;
}

.dark .ros-marca-disparador {
    border-color: rgb(255 255 255 / 15%);
}

.ros-marca-disparador:hover {
    background: rgb(0 0 0 / 4%);
}

.dark .ros-marca-disparador:hover {
    background: rgb(255 255 255 / 6%);
}

.ros-marca-rotulo {
    opacity: 0.7;
}

.ros-marca-actual {
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ros-marca-pie {
    margin: 0;
    padding: 0.5rem 0.75rem 0.65rem;
    border-top: 1px solid rgb(0 0 0 / 8%);
    font-size: 0.75rem;
    line-height: 1rem;
    opacity: 0.7;
}

.dark .ros-marca-pie {
    border-top-color: rgb(255 255 255 / 8%);
}

@media (max-width: 640px) {
    .ros-marca-rotulo {
        display: none;
    }

    .ros-marca-disparador {
        max-width: 9rem;
    }
}

/*
 * Lo que se está viendo con una marca elegida, al principio de la pantalla.
 *
 * Discreto a propósito: sale en cada pantalla mientras haya una marca
 * elegida, y un aviso de color que no se va enseña a no leerlo.
 */
.ros-marca-aviso {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 0.75rem;
    font-size: 0.875rem;
    background: rgb(0 0 0 / 3%);
}

.dark .ros-marca-aviso {
    border-color: rgb(255 255 255 / 8%);
    background: rgb(255 255 255 / 4%);
}

.ros-marca-aviso-form {
    display: inline;
    margin: 0;
}

.ros-marca-aviso-enlace {
    padding: 0;
    border: 0;
    font-weight: 600;
    color: #FF5C35;
    background: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/*
 * «Hoy por marca» en el escritorio.
 *
 * Una fila por marca con cifras alineadas a la derecha, como una tabla de
 * contabilidad. En tablet se desliza en horizontal en vez de apretar las
 * columnas hasta partir las cifras.
 */
.ros-comparativa {
    overflow-x: auto;
}

.ros-comparativa table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.ros-comparativa th,
.ros-comparativa td {
    padding: 0.5rem 0.6rem;
    text-align: end;
    white-space: nowrap;
}

.ros-comparativa th:first-child,
.ros-comparativa td:first-child {
    text-align: start;
}

.ros-comparativa th {
    font-weight: 600;
    opacity: 0.7;
}

.ros-comparativa tbody tr + tr td {
    border-top: 1px solid rgb(0 0 0 / 8%);
}

.dark .ros-comparativa tbody tr + tr td {
    border-top-color: rgb(255 255 255 / 8%);
}

.ros-comparativa-accion {
    margin: 0;
}

.ros-comparativa-accion button {
    padding: 0;
    border: 0;
    font-size: 0.8125rem;
    color: #FF5C35;
    background: none;
    cursor: pointer;
}

.ros-comparativa-pie {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

/* Lo que va bien, en el mismo tono que lo que va mal pero en verde. */
.ros-good {
    color: rgb(21 128 61);
}

.dark .ros-good {
    color: rgb(134 239 172);
}

/*
 * El estado de resultados del control de costos.
 *
 * Una fila por renglón, con el importe y su peso sobre la venta en dos
 * columnas fijas: así se baja con la vista por la columna del porcentaje,
 * que es lo que se compara de un mes a otro.
 */
.ros-pl {
    display: grid;
    grid-template-columns: 1fr auto 4.5rem;
    gap: 0.35rem 1.25rem;
    align-items: baseline;
}

.ros-pl-label small {
    display: block;
    font-size: 0.8rem;
    opacity: 0.6;
}

.ros-pl-amount,
.ros-pl-rate {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ros-pl-rate {
    opacity: 0.65;
    font-size: 0.875rem;
}

.ros-pl-total {
    padding-top: 0.5rem;
    border-top: 1px solid rgb(0 0 0 / 10%);
    font-weight: 600;
}

.dark .ros-pl-total {
    border-top-color: rgb(255 255 255 / 12%);
}

.ros-pl-indent {
    padding-left: 1rem;
    opacity: 0.8;
}

/*
 * Las tablas del panel, un poco más prietas.
 *
 * Filament deja 12 px a cada lado de cada celda. En la lista de pedidos son
 * diez columnas, y esos 24 px por columna eran los que dejaban «Pago» y
 * «Compromiso» fuera de la pantalla de un portátil de 1366. Con 8 px cabe
 * todo y se sigue leyendo; las tablas cortas ni se enteran.
 */
.fi-ta-text,
.fi-ta-header-cell,
.fi-ta-actions-cell,
.fi-ta-actions-header-cell {
    padding-inline: 0.5rem;
}

.fi-ta-text {
    padding-block: 0.75rem;
}