/*
 * Arqoba — el panel, vestido como la app.
 *
 * ── Por qué esto existe ──────────────────────────────────────────────────────
 *
 * La app y el panel son el mismo producto visto desde dos lados: el cliente mira su
 * obra en el teléfono y Leobardo la mueve desde aquí. Cuando los dos se ven distintos,
 * el panel se siente una herramienta prestada, y eso se nota en cómo se habla de él.
 *
 * Los valores de aquí NO se eligieron mirando esta pantalla: salen del mismo sistema
 * que la app, `src/app/src/theme/tokens.ts`, que a su vez se muestreó de los flyers que
 * mandó Leobardo. Si un color cambia allá y no aquí, el cliente ve un teal en su
 * teléfono y otro en la pantalla de su oficina hablando de la misma obra.
 *
 * ── Por qué un archivo y no un tema compilado ────────────────────────────────
 *
 * Filament permite un tema propio con Tailwind, pero eso mete un paso de compilación
 * (npm, Vite, `public/build`) a un proyecto que hoy no tiene ninguno, y un despliegue
 * que hoy es copiar archivos pasaría a depender de que alguien recuerde compilar. Esto
 * se registra con `FilamentAsset` y viaja como PHP: se publica con
 * `php artisan filament:assets`, que el despliegue ya podría correr solo.
 *
 * Se toca lo mínimo: superficies, radios, tipografía y la barra lateral. Nada de
 * reescribir componentes — cuanto menos se pelee con Filament, menos duele actualizarlo.
 */

:root {
    /* --- La paleta, igual que en la app --- */
    --arqoba-teal: #02728a;
    --arqoba-teal-oscuro: #015e73;
    --arqoba-teal-lavado: #e8f3f6;

    --arqoba-carbon: #0f141a;
    --arqoba-carbon-claro: #1a2129;

    --arqoba-fondo: #f5f7f8;
    --arqoba-superficie: #ffffff;
    --arqoba-borde: #e3e8ea;

    /* Nunca negro puro sobre blanco puro: cansa la vista. Este lleva una pizca de teal. */
    --arqoba-texto: #111820;
    --arqoba-texto-suave: #5c6b74;

    /*
     * Radios de la app: 20 para tarjetas, 12 para controles.
     * El radio grande es lo que más define el rediseño; sin él, todo lo demás se
     * queda a medias.
     */
    --arqoba-radio-tarjeta: 20px;
    --arqoba-radio-control: 12px;

    /* Una curva que arranca rápido y frena suave: se siente pronta, no perezosa. */
    --arqoba-salida: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ─── Tipografía ────────────────────────────────────────────────────────────
 *
 * Manrope es la fuente de la marca. La carga Filament desde el proveedor; aquí solo
 * se ajusta el tratamiento: los títulos apretados y con interletrado negativo, que a
 * tamaño grande es lo que los hace verse deliberados en vez de sueltos.
 */

.fi-body {
    background-color: var(--arqoba-fondo);
    color: var(--arqoba-texto);
    -webkit-font-smoothing: antialiased;
}

.fi-header-heading {
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: var(--arqoba-texto);
}

.fi-header-subheading {
    color: var(--arqoba-texto-suave);
    line-height: 1.55;
}

/*
 * Un aviso en el encabezado de una pantalla.
 *
 * Se usa cuando falta algo que el cliente del otro lado ya está viendo —los datos
 * bancarios, hoy—. Va en su propio renglón y con el color de advertencia de la app,
 * porque corrido detrás de la descripción se leía como una parrafada y se perdía justo
 * lo que había que notar.
 */
.fi-header-subheading:has(.fi-arqoba-aviso) {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}

.fi-arqoba-aviso {
    display: inline-block;
    padding: 0.45rem 0.75rem;
    border-radius: var(--arqoba-radio-control);
    background-color: #fbf3e0;
    /* 5.29:1 sobre ese fondo. El tono anterior daba 4.43:1 y el mínimo es 4.5:1. */
    color: #7d6117;
    font-size: 0.8125rem;
    line-height: 1.5;
}

.fi-arqoba-aviso strong {
    font-weight: 700;
}

/*
 * Los títulos de sección van como los rótulos de la app —"TODO SOBRE TU OBRA"—:
 * pequeños, en mayúsculas y espaciados. Ordenan la pantalla sin competir con el
 * título de la página.
 */
.fi-section-header-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--arqoba-texto-suave);
}

.fi-section-header-description {
    line-height: 1.55;
    color: var(--arqoba-texto-suave);
}

/* ─── Superficies ───────────────────────────────────────────────────────────
 *
 * Tarjetas blancas sobre fondo gris claro, con borde de un pelo y **sin sombra**.
 * La app no tiene una sola sombra: la separación la da el contraste de fondo, que es
 * más limpio y no ensucia los bordes.
 */

.fi-section,
.fi-ta-ctn,
.fi-wi-stats-overview-stat,
.fi-fo-repeater-item {
    border-radius: var(--arqoba-radio-tarjeta);
    border-color: var(--arqoba-borde);
    background-color: var(--arqoba-superficie);
    box-shadow: none;
}

.fi-modal-window {
    border-radius: var(--arqoba-radio-tarjeta);
}

/* ─── Barra lateral ─────────────────────────────────────────────────────────
 *
 * Carbón, como la pantalla de bienvenida y el ícono de la app.
 *
 * La identidad de Arqoba es carbón con acento teal, pero el cliente pidió interfaz
 * clara. La app resuelve esa tensión igual: claro donde se trabaja, marca donde
 * enmarca. Aquí la barra es el marco y el contenido se queda claro, así que Leobardo
 * reconoce su marca al entrar y trabaja sobre blanco todo el día.
 */

.fi-sidebar,
.fi-sidebar-header {
    background-color: var(--arqoba-carbon);
    border-color: transparent;
}

.fi-sidebar .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-group-label {
    color: #aab6bd;
}

.fi-sidebar .fi-sidebar-item-icon {
    color: #7d8a92;
}

.fi-sidebar .fi-sidebar-item-btn:hover {
    background-color: var(--arqoba-carbon-claro);
}

.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item-btn:hover .fi-sidebar-item-icon {
    color: #ffffff;
}

/*
 * El renglón activo lleva el teal de marca, que es el único color de la barra.
 *
 * El `fi-active` tiene que ir pegado a `fi-sidebar-item`, no suelto como ancestro:
 * **el grupo que contiene al renglón activo también lleva `fi-active`**, así que un
 * selector de descendencia pintaba de teal todos los renglones de ese grupo y la barra
 * entera se volvía un bloque de color.
 */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    background-color: var(--arqoba-teal);
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-label,
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-sidebar-item-icon {
    color: #ffffff;
}

/* Las insignias de la barra: legibles sobre el carbón, sin gritar. */
.fi-sidebar .fi-badge {
    background-color: var(--arqoba-carbon-claro);
    color: #aab6bd;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn .fi-badge {
    background-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

/* El nombre de la marca, en blanco sobre el carbón. */
.fi-sidebar-header .fi-logo {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* ─── Barra superior ────────────────────────────────────────────────────────*/

.fi-topbar {
    background-color: var(--arqoba-superficie);
    border-bottom: 1px solid var(--arqoba-borde);
    box-shadow: none;
}

/* ─── Controles ─────────────────────────────────────────────────────────────
 *
 * Radio de 12 y altura cómoda. En la app el blanco táctil mínimo son 48 puntos
 * porque se toca con las manos sucias, parado en una obra; aquí se usa ratón, pero
 * un control que se ve como el del teléfono ayuda a que se sienta el mismo producto.
 */

.fi-btn,
.fi-input-wrp,
.fi-dropdown-panel,
.fi-ta-search-field .fi-input-wrp {
    border-radius: var(--arqoba-radio-control);
}

.fi-btn {
    font-weight: 600;
    letter-spacing: -0.005em;
    box-shadow: none;
}

/*
 * El contorno del campo va como anillo, no como borde.
 *
 * Filament dibuja los campos con `border-width: 0` y pinta el contorno con una sombra
 * interior. Al quitar la sombra para limpiar relieves, se quedaron **todos los campos
 * del panel sin contorno**: la caja seguía ahí y seguía funcionando, solo que invisible
 * sobre el blanco de la tarjeta. Un `border-color` no lo arregla, porque sobre un borde
 * de ancho cero no se pinta nada.
 *
 * Así que el contorno se repone por donde Filament lo dibuja, y el foco suma su halo
 * encima sin desplazar el contenido ni un píxel.
 */
.fi-input-wrp {
    box-shadow: inset 0 0 0 1px var(--arqoba-borde);
}

.fi-input-wrp:focus-within {
    box-shadow:
        inset 0 0 0 1px var(--arqoba-teal),
        0 0 0 3px var(--arqoba-teal-lavado);
}

/* ─── Tablas ────────────────────────────────────────────────────────────────
 *
 * El encabezado como rótulo, igual que en las secciones. Una tabla de trabajo se lee
 * mejor cuando la cabecera no pesa lo mismo que el contenido.
 */

.fi-ta-header-cell {
    background-color: var(--arqoba-fondo);
}

/*
 * El rótulo va también en el botón de ordenar, no solo en la celda.
 *
 * Las columnas ordenables pintan su texto dentro de un botón propio, así que una regla
 * puesta solo en la celda las dejaba fuera: en la misma fila convivían "Folio" y "TIPO
 * DE TRABAJO". Una cabecera que no es igual a sí misma es justo lo que hace que una
 * pantalla se sienta descuidada sin que uno sepa señalar por qué.
 */
.fi-ta-header-cell,
.fi-ta-header-cell-sort-btn {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--arqoba-texto-suave);
}

/* La columna por la que se está ordenando se marca con el color de marca. */
.fi-ta-header-cell-sorted .fi-ta-header-cell-sort-btn {
    color: var(--arqoba-teal);
}

.fi-ta-row:hover {
    background-color: var(--arqoba-teal-lavado);
}

/*
 * La línea de apoyo bajo el valor de una celda ("Revertido por la pasarela el …" en
 * Cobranza; la fecha relativa y el número de registro en Auditoría).
 *
 * Filament la pinta con su gris 500, y el gris que le damos (#5C6B74) casi no tiene
 * color, así que Filament lo trata como neutro y su 500 queda en oklch(0.683 0 …):
 * 2.85:1 contra el blanco de la fila, muy abajo del 4.5:1 que pide un texto. Con el
 * texto suave de la app da 5.51:1 sobre el blanco y 4.88:1 sobre el teal lavado de la
 * fila al pasar el ratón.
 */
.fi-ta-text-description {
    color: var(--arqoba-texto-suave);
}

/*
 * El folio de Cobranza no parte renglón.
 *
 * Para que Confirmar y Rechazar quepan a 1366 px, la columna de la obra parte renglón
 * (`->wrap()`), y el navegador partía también el folio en sus guiones: "ARQ-2026-" en un
 * renglón y "0004" en otro. Lo que parte es el nombre del cliente, que va debajo.
 */
.fi-arqoba-folio > .fi-ta-text-item {
    white-space: nowrap;
}

/*
 * Lo declarado por el cliente cuando no es lo programado (Cobranza, debajo del monto).
 *
 * Era la columna "Declarado", pintada con el ámbar 700 de Filament; se volvió línea de
 * apoyo para que Cobranza quepa a 1280 px, y la línea de apoyo es gris (la regla de
 * arriba). Aquí recupera el mismo ámbar, oklch(0.515 0.149 87.4), que en pantalla queda
 * en #8B5F00: 5.62:1 sobre el blanco de la fila y 4.98:1 sobre el teal lavado al pasar
 * el ratón. Las negritas lo dicen también a quien no distingue el color.
 */
.fi-arqoba-difiere {
    color: var(--warning-700);
    font-weight: 600;
}

.fi-ta-header,
.fi-ta-footer {
    background-color: var(--arqoba-superficie);
}

/* ─── Insignias ─────────────────────────────────────────────────────────────
 *
 * Píldora completa, como las de la app. Es un detalle chico y es de los que más
 * hacen que dos pantallas se sientan de la misma mano.
 */

.fi-badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* ─── Acceso ────────────────────────────────────────────────────────────────
 *
 * La pantalla de entrada es la primera impresión del panel, y hoy es una caja gris
 * en medio de la nada. Se le da el mismo aire que la bienvenida de la app.
 */

.fi-simple-layout {
    background-color: var(--arqoba-fondo);
}

.fi-simple-main {
    border-radius: var(--arqoba-radio-tarjeta);
    border: 1px solid var(--arqoba-borde);
    background-color: var(--arqoba-superficie);
    box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * LA MARCA
 * ═══════════════════════════════════════════════════════════════════════════ */

.fi-arqoba-marca {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

/*
 * La placa del isotipo.
 *
 * Carbón sobre carbón en la barra —se funde y solo se lee la "A"— y carbón sobre
 * blanco en el acceso, donde se lee como el ícono de una app. Un solo archivo para
 * los dos sitios.
 */
.fi-arqoba-marca-placa {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex: none;
    border-radius: 0.75rem;
    background-color: var(--arqoba-carbon);
}

.fi-arqoba-marca-placa img {
    width: 1.375rem;
    height: 1.375rem;
}

.fi-arqoba-marca-texto {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.fi-arqoba-marca-nombre {
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: currentColor;
}

/*
 * El giro, en rótulo. Es la misma pieza que el encabezado de la app.
 *
 * La opacidad subió de 0.55 a 0.68 por la pantalla de acceso. Ahí la marca vive sobre la
 * tarjeta blanca y hereda el gris casi negro que Filament le pone al logotipo, así que al
 * 55% se quedaba en 3.67:1 contra el blanco: por debajo del 4.5:1 que pide un texto de
 * nueve píxeles. En la barra lateral el mismo rótulo es blanco sobre carbón y ahí nunca
 * hubo problema; este ajuste es por el otro lado.
 */
.fi-arqoba-marca-giro {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    opacity: 0.68;
}

/* En la barra de carbón, la placa necesita un borde para no desaparecer del todo. */
.fi-sidebar .fi-arqoba-marca-placa {
    background-color: var(--arqoba-carbon-claro);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * MOVIMIENTO
 *
 * Una regla para todo lo de abajo: **si una animación no dice nada, no va.**
 *
 * Leobardo va a vivir en esta pantalla horas al día. Una interfaz que se mueve por
 * gusto se vuelve cansada a la tercera vez, y lenta a la décima. Lo que sí sirve es el
 * movimiento que responde a algo: confirma que el clic llegó, explica de dónde salió lo
 * que acaba de aparecer, o señala qué está tocando el ratón.
 *
 * Todo va por debajo de 300 ms y todo se apaga si el sistema pide menos movimiento.
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * El contenido entra.
 *
 * Sube ocho píxeles mientras aparece. No es decoración: sin esto, al cambiar de
 * pantalla el contenido se planta de golpe y no se sabe si cargó o siempre estuvo ahí.
 * Ocho píxeles y 260 ms es lo justo para que el ojo registre "esto es nuevo".
 */
@keyframes arqoba-entra {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

.fi-main > * {
    animation: arqoba-entra 0.26s var(--arqoba-salida) both;
}

/*
 * Y entra escalonado, no todo junto.
 *
 * Cincuenta milisegundos entre bloques bastan para que se lea un orden —primero el
 * título, luego la tarjeta— en vez de un parpadeo. Más allá del sexto ya no se
 * escalona: a esa altura de la página nadie está mirando.
 */
.fi-main > *:nth-child(2) { animation-delay: 0.04s; }
.fi-main > *:nth-child(3) { animation-delay: 0.08s; }
.fi-main > *:nth-child(4) { animation-delay: 0.12s; }
.fi-main > *:nth-child(n + 5) { animation-delay: 0.16s; }

/*
 * La barra lateral: el renglón que se toca responde.
 *
 * El color entra en 160 ms en vez de saltar. Es la diferencia entre una lista que
 * reacciona y una que parpadea.
 */
.fi-sidebar-item-btn {
    transition:
        background-color 0.16s var(--arqoba-salida),
        color 0.16s var(--arqoba-salida);
}

.fi-sidebar .fi-sidebar-item-btn .fi-sidebar-item-icon,
.fi-sidebar .fi-sidebar-item-btn .fi-sidebar-item-label {
    transition: color 0.16s var(--arqoba-salida);
}

/*
 * El renglón activo lleva además una marca a la izquierda.
 *
 * El fondo teal ya dice cuál es, pero la marca sobrevive cuando la barra se colapsa a
 * solo íconos, que es donde el fondo solo se distingue a medias.
 */
.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn {
    position: relative;
}

.fi-sidebar .fi-sidebar-item.fi-active > .fi-sidebar-item-btn::before {
    content: '';
    position: absolute;
    inset-block: 0.5rem;
    inset-inline-start: 0;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background-color: #ffffff;
}

/*
 * Las filas de una tabla.
 *
 * Sobre cientos de renglones, saber cuál está bajo el ratón evita abrir el equivocado.
 * El acento de la izquierda aparece con el color de marca: es lo mismo que hace el
 * renglón activo de la barra, así que el gesto ya se aprendió.
 */
.fi-ta-row {
    transition: background-color 0.14s var(--arqoba-salida);
    box-shadow: inset 3px 0 0 0 transparent;
}

.fi-ta-row:hover {
    box-shadow: inset 3px 0 0 0 var(--arqoba-teal);
}

/*
 * Los botones se hunden al pulsarlos.
 *
 * Dos por ciento de escala. Es imperceptible como imagen y muy perceptible como
 * respuesta: confirma que el clic llegó antes de que el servidor conteste, que es
 * justo el hueco donde la gente vuelve a hacer clic.
 */
.fi-btn {
    transition:
        background-color 0.16s var(--arqoba-salida),
        transform 0.09s var(--arqoba-salida),
        box-shadow 0.16s var(--arqoba-salida);
}

.fi-btn:active {
    transform: scale(0.98);
}

/* Las tarjetas y los campos, para que el foco no llegue de golpe. */
.fi-section,
.fi-input-wrp,
.fi-badge {
    transition:
        border-color 0.16s var(--arqoba-salida),
        box-shadow 0.16s var(--arqoba-salida);
}

/*
 * Y todo esto se apaga si el sistema lo pide.
 *
 * No es un detalle de cortesía: hay gente a la que el movimiento en pantalla le provoca
 * mareo, y el sistema operativo ya tiene el ajuste. Respetarlo cuesta seis líneas.
 */
@media (prefers-reduced-motion: reduce) {
    .fi-main > *,
    .fi-sidebar-item-btn,
    .fi-ta-row,
    .fi-btn,
    .fi-section,
    .fi-input-wrp,
    .fi-badge {
        animation: none !important;
        transition: none !important;
    }

    .fi-btn:active {
        transform: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * EL TABLERO DE INICIO
 * ═══════════════════════════════════════════════════════════════════════════ */

.fi-arqoba-panorama,
.fi-arqoba-pulso {
    background-color: var(--arqoba-superficie);
    border: 1px solid var(--arqoba-borde);
    border-radius: var(--arqoba-radio-tarjeta);
    padding: 1.75rem;
}

/* --- El saludo --- */

.fi-arqoba-panorama-encabezado {
    margin-bottom: 1.5rem;
}

.fi-arqoba-panorama-fecha {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--arqoba-texto-suave);
    margin: 0 0 0.375rem;
}

.fi-arqoba-panorama-saludo {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--arqoba-texto);
    margin: 0;
}

/* --- Cuando no hay nada pendiente --- */

.fi-arqoba-al-corriente {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 1.125rem 1.25rem;
    border-radius: var(--arqoba-radio-control);
    background-color: var(--arqoba-teal-lavado);
    color: var(--arqoba-texto);
    font-size: 0.875rem;
    line-height: 1.5;
}

.fi-arqoba-al-corriente-icono {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    color: var(--arqoba-teal);
}

/* --- La lista de pendientes --- */

.fi-arqoba-pendientes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/*
 * Cada renglón entra un instante después del anterior.
 *
 * Es el único lugar del panel donde el escalonado dice algo: la lista está ordenada por
 * urgencia, y al aparecer de arriba abajo ese orden se percibe sin tener que leerlo. A
 * 45 ms por renglón, la lista completa termina de asentarse antes de medio segundo.
 */
.fi-arqoba-pendiente {
    animation: arqoba-entra 0.3s var(--arqoba-salida) both;
    animation-delay: calc(var(--renglon, 0) * 0.045s);
}

.fi-arqoba-pendiente-enlace {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border-radius: var(--arqoba-radio-control);
    text-decoration: none;
    color: inherit;
    transition:
        background-color 0.16s var(--arqoba-salida),
        transform 0.16s var(--arqoba-salida);
}

.fi-arqoba-pendiente-enlace:hover {
    background-color: var(--arqoba-fondo);
    /* Se recorre lo mínimo para que se note que el renglón entero es el botón. */
    transform: translateX(3px);
}

.fi-arqoba-pendiente-icono {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: var(--arqoba-radio-control);
}

.fi-arqoba-pendiente-icono svg {
    width: 1.25rem;
    height: 1.25rem;
}

/*
 * La cifra, en cifras tabulares.
 *
 * Sin `tabular-nums` el 1 es más angosto que el 8 y la columna de números se desalinea
 * renglón con renglón. Es la diferencia entre una lista que se ve calculada y una que se
 * ve escrita a mano.
 */
.fi-arqoba-pendiente-cuenta {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    min-width: 1.75rem;
    text-align: right;
    flex: none;
}

.fi-arqoba-pendiente-texto {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    flex: 1;
}

.fi-arqoba-pendiente-titulo {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--arqoba-texto);
}

.fi-arqoba-pendiente-detalle {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--arqoba-texto-suave);
}

.fi-arqoba-pendiente-flecha {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    color: #b8c2c8;
    transition:
        transform 0.16s var(--arqoba-salida),
        color 0.16s var(--arqoba-salida);
}

.fi-arqoba-pendiente-enlace:hover .fi-arqoba-pendiente-flecha {
    transform: translateX(3px);
    color: var(--arqoba-teal);
}

/*
 * Los tres tonos.
 *
 * Ámbar para lo que cuesta dinero dejar parado, teal para lo que alguien está
 * esperando, gris para lo que aguanta hasta la tarde. Rojo no se usa: aquí nada está
 * descompuesto, solo pendiente, y un tablero que grita todos los días deja de oírse.
 */
.fi-arqoba-pendiente[data-tono="urgente"] .fi-arqoba-pendiente-icono {
    background-color: #fdf2e2;
    color: #b45309;
}

.fi-arqoba-pendiente[data-tono="urgente"] .fi-arqoba-pendiente-cuenta {
    color: #b45309;
}

.fi-arqoba-pendiente[data-tono="atencion"] .fi-arqoba-pendiente-icono {
    background-color: var(--arqoba-teal-lavado);
    color: var(--arqoba-teal);
}

.fi-arqoba-pendiente[data-tono="atencion"] .fi-arqoba-pendiente-cuenta {
    color: var(--arqoba-teal);
}

.fi-arqoba-pendiente[data-tono="normal"] .fi-arqoba-pendiente-icono {
    background-color: var(--arqoba-fondo);
    color: var(--arqoba-texto-suave);
}

.fi-arqoba-pendiente[data-tono="normal"] .fi-arqoba-pendiente-cuenta {
    color: var(--arqoba-texto-suave);
}

/* --- Las tres cifras --- */

.fi-arqoba-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.375rem;
}

.fi-arqoba-cifra {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    padding: 1rem 1.125rem;
    border-radius: var(--arqoba-radio-control);
    text-decoration: none;
    color: inherit;
    transition: background-color 0.16s var(--arqoba-salida);
    animation: arqoba-entra 0.3s var(--arqoba-salida) both;
    animation-delay: calc(var(--renglon, 0) * 0.05s);
}

.fi-arqoba-cifra:hover {
    background-color: var(--arqoba-fondo);
}

.fi-arqoba-cifra-rotulo {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--arqoba-texto-suave);
}

/*
 * La cifra grande.
 *
 * El tracking negativo es lo que evita que un número de siete dígitos se vea suelto a
 * este tamaño. Tabular otra vez, para que las tres cifras se alineen entre sí.
 */
.fi-arqoba-cifra-monto {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: var(--arqoba-texto);
    line-height: 1.1;
}

.fi-arqoba-cifra-nota {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.fi-arqoba-cifra-nota[data-sentido="sube"] { color: #1f7a4d; }
.fi-arqoba-cifra-nota[data-sentido="baja"] { color: #b45309; }
.fi-arqoba-cifra-nota[data-sentido="neutro"] { color: var(--arqoba-texto-suave); }

/* La explicación va en peso normal: es contexto, no dato. */
.fi-arqoba-cifra-nota-detalle {
    font-weight: 400;
    color: var(--arqoba-texto-suave);
    line-height: 1.4;
}

/* --- El embudo --- */

.fi-arqoba-embudo {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--arqoba-borde);
}

.fi-arqoba-embudo-rotulo {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--arqoba-texto-suave);
    margin: 0 0 0.75rem;
}

.fi-arqoba-embudo-barra {
    display: flex;
    gap: 3px;
    height: 0.625rem;
}

/*
 * Los tramos se reparten con `flex-grow`, no con anchos en por ciento.
 *
 * Con anchos, los 3 px de separación entre tramos se suman al 100% y la barra se
 * desborda. Repartiendo el sobrante, el navegador descuenta las separaciones solo.
 */
.fi-arqoba-embudo-tramo {
    flex-grow: var(--parte, 1);
    flex-shrink: 1;
    flex-basis: 0;
    min-width: 0.75rem;
    border-radius: 999px;
    background-color: var(--tono, var(--arqoba-texto-suave));
    transition: transform 0.16s var(--arqoba-salida);
}

/*
 * Al pasar el ratón, el tramo crece a lo alto.
 *
 * Ensancharlo movería a los demás y la barra entera bailaría; crecer a lo alto señala
 * cuál se está apuntando sin recorrer nada de su lugar.
 */
.fi-arqoba-embudo-tramo:hover {
    transform: scaleY(1.7);
}

.fi-arqoba-embudo-leyenda {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0.875rem 0 0;
    padding: 0;
}

.fi-arqoba-embudo-clave {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    padding: 0.3125rem 0.625rem;
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.75rem;
    color: var(--arqoba-texto);
    transition: background-color 0.16s var(--arqoba-salida);
}

.fi-arqoba-embudo-clave:hover {
    background-color: var(--arqoba-fondo);
}

/* Una etapa vacía se queda en la leyenda, apagada: saber que está en cero es un dato. */
.fi-arqoba-embudo-clave-vacia {
    opacity: 0.45;
}

.fi-arqoba-embudo-punto {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 999px;
    flex: none;
    background-color: var(--tono, var(--arqoba-texto-suave));
}

.fi-arqoba-embudo-cuenta {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/*
 * El color de cada fase.
 *
 * Son los mismos colores con los que la tabla de Solicitudes pinta sus insignias. Que
 * "En obra" fuera verde en la lista y otra cosa en el tablero obligaría a aprenderse dos
 * códigos para lo mismo.
 */
/*
 * El gris y el ámbar se oscurecieron a propósito.
 *
 * En su tono anterior daban 2.46:1 y 2.44:1 contra el blanco, por debajo del 3:1 que
 * necesita una figura para distinguirse sin leerla. En la barra del embudo eso son dos
 * tramos que se desvanecen contra la tarjeta justo en la pieza que existe para verse de
 * un vistazo. Ahora dan 3.31:1 y 3.42:1, y siguen siendo el mismo gris y el mismo ámbar.
 */
[data-fase="solicitud"]  { --tono: #828f9a; }
[data-fase="visita"]     { --tono: #b8801d; }
[data-fase="cotizacion"] { --tono: #4a86b8; }
[data-fase="anticipo"]   { --tono: var(--arqoba-teal); }
[data-fase="en_obra"]    { --tono: #2f9168; }

/* Y todo el movimiento del tablero se apaga junto con el del resto del panel. */
@media (prefers-reduced-motion: reduce) {
    .fi-arqoba-pendiente,
    .fi-arqoba-cifra {
        animation: none !important;
    }

    .fi-arqoba-pendiente-enlace,
    .fi-arqoba-pendiente-flecha,
    .fi-arqoba-embudo-tramo,
    .fi-arqoba-embudo-clave,
    .fi-arqoba-cifra {
        transition: none !important;
    }

    .fi-arqoba-pendiente-enlace:hover,
    .fi-arqoba-pendiente-enlace:hover .fi-arqoba-pendiente-flecha,
    .fi-arqoba-embudo-tramo:hover {
        transform: none;
    }
}

/*
 * El tablero en pantalla angosta.
 *
 * Leobardo abre el panel desde el teléfono estando en obra, así que esto no es un caso
 * de borde. El problema ahí no es el largo de los textos sino el ancho que se gastan las
 * piezas de adorno antes de que empiece a leerse: entre la sangría de la tarjeta, el
 * ícono, la cifra y la flecha se iban unos 160 de los 375 puntos de un teléfono normal, y
 * la explicación de cada renglón quedaba en una columna de cinco líneas.
 *
 * Lo que se recorta es todo de adorno. La flecha se va del todo: en una pantalla táctil
 * no hay puntero que la necesite para saber que el renglón se toca, y el renglón entero
 * ya es el botón.
 */
@media (max-width: 40rem) {
    .fi-arqoba-panorama,
    .fi-arqoba-pulso {
        padding: 1.125rem;
    }

    .fi-arqoba-panorama-saludo {
        font-size: 1.25rem;
    }

    .fi-arqoba-pendiente-enlace {
        gap: 0.625rem;
        padding: 0.75rem 0.5rem;
    }

    .fi-arqoba-pendiente-icono {
        width: 2rem;
        height: 2rem;
        border-radius: 0.625rem;
    }

    .fi-arqoba-pendiente-icono svg {
        width: 1rem;
        height: 1rem;
    }

    .fi-arqoba-pendiente-cuenta {
        font-size: 1.25rem;
        min-width: 1.25rem;
    }

    .fi-arqoba-pendiente-flecha {
        display: none;
    }

    .fi-arqoba-cifra {
        padding: 0.75rem 0.5rem;
    }

    .fi-arqoba-cifra-monto {
        font-size: 1.625rem;
    }
}

/*
 * Texto que solo existe para quien escucha la pantalla.
 *
 * No se puede usar `display: none` ni `visibility: hidden`: eso lo quita también del
 * lector. La receta es sacarlo del flujo con un recorte de un píxel, que es lo que hace
 * que la flecha ▲ pueda ir acompañada de la palabra "Subió" sin que nadie la vea.
 */
.fi-arqoba-solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Miniaturas de la bitácora
 *
 * Al aprobar, al quitar archivos y al elegir las fotos de la vitrina. Antes todo eso
 * se hacía leyendo "Foto del 12 de septiembre", ocho veces igual si eran ocho fotos del
 * mismo día. El HTML lo arma `App\Filament\Support\Miniaturas`.
 * ═══════════════════════════════════════════════════════════════════════════ */

/*
 * La casilla con su foto al lado. La foto va dentro de la etiqueta de la casilla, así
 * que tocarla también la marca: es donde uno está mirando.
 */
.fi-arqoba-opcion-archivo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.fi-arqoba-miniatura {
    width: 5.5rem;
    height: 5.5rem;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: var(--arqoba-radio-control);
    border: 1px solid var(--arqoba-borde);
    background-color: var(--arqoba-fondo);
}

/* Lo que se va a publicar, en rejilla: se acomoda sola al ancho del modal y del teléfono. */
.fi-arqoba-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 0.75rem;
}

.fi-arqoba-galeria-pieza {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
}

.fi-arqoba-galeria-medio {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--arqoba-radio-control);
    border: 1px solid var(--arqoba-borde);
    background-color: var(--arqoba-fondo);
}

/* El texto suave de la app: 5.5:1 sobre blanco. */
.fi-arqoba-galeria-pieza figcaption,
.fi-arqoba-galeria-vacia {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--arqoba-texto-suave);
}

/* ─── Avisos dentro de una ficha ─────────────────────────────────────────────
 *
 * El aviso de Filament (`Callout`), que la ficha de la obra y la del cliente usan para
 * "este cliente pidió borrar su cuenta". De fábrica no llega al contraste mínimo sobre
 * su fondo ámbar claro (#fbf7ec): la descripción va en gris al 75% de opacidad y daba
 * 3.2:1 (el mínimo de un texto es 4.5:1), y el triángulo en el ámbar 400 daba 2.1:1 (el
 * de una figura es 3:1). Medido sobre la captura, no tanteado.
 */
.fi-callout .fi-callout-description {
    /* 5.15:1 sobre el fondo del aviso. */
    color: var(--arqoba-texto-suave);
}

.fi-callout .fi-callout-icon.fi-color-warning {
    /* La tinta ámbar de la app (`warningInk` en tokens.ts): 5.46:1. */
    color: #7d6117;
}

/* ─── Agenda de visitas ──────────────────────────────────────────────────────
 *
 * Cada día es una sección de Filament (tarjeta blanca, título en rótulo) y cada visita un
 * renglón: la hora a la izquierda, grande, porque es lo primero que se busca; a la derecha
 * la obra y los tres datos que se le dictan al especialista (cliente, dirección y quién
 * va). Sin sombras ni fondos por renglón: los separa una línea de un pelo, como las
 * tablas.
 *
 * Los colores son los de siempre, medidos: el texto suave da 5.51:1 sobre el blanco y
 * 5.13:1 sobre el gris del mensaje; el teal de los enlaces, 5.56:1; la tinta ámbar, 5.85:1
 * sobre el blanco y 5.29:1 sobre su fondo ámbar claro (el mismo par que `.fi-arqoba-aviso`).
 */
.fi-arqoba-agenda {
    display: grid;
    gap: 1.5rem;
}

.fi-arqoba-agenda-vacio {
    margin: 0;
    font-size: 0.875rem;
    color: var(--arqoba-texto-suave);
}

.fi-arqoba-agenda-visitas {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fi-arqoba-visita {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--arqoba-borde);
}

.fi-arqoba-visita:first-child {
    border-top: 0;
    padding-top: 0;
}

.fi-arqoba-visita:last-child {
    padding-bottom: 0;
}

.fi-arqoba-visita-cuando {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.4;
    color: var(--arqoba-texto);
    /* Las horas, una debajo de otra, se leen alineadas. */
    font-variant-numeric: tabular-nums;
}

/* El día, arriba de la hora, solo en las visitas de días pasados. */
.fi-arqoba-visita-dia {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    color: var(--arqoba-texto-suave);
}

.fi-arqoba-visita-cuerpo {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.fi-arqoba-visita-encabezado {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem 0.75rem;
}

.fi-arqoba-visita-folio {
    font-weight: 700;
    color: var(--arqoba-teal);
    text-decoration: none;
}

.fi-arqoba-visita-folio:hover {
    text-decoration: underline;
}

.fi-arqoba-visita-trabajo {
    font-size: 0.875rem;
    color: var(--arqoba-texto-suave);
}

.fi-arqoba-visita-nota {
    justify-self: start;
    margin: 0;
    padding: 0.45rem 0.75rem;
    border-radius: var(--arqoba-radio-control);
    background-color: #fbf3e0;
    color: #7d6117;
    font-size: 0.8125rem;
    line-height: 1.5;
}

/*
 * Los tres datos en columnas cuando hay ancho, y uno debajo del otro cuando no. El
 * rótulo de cada uno va como el de las secciones, chico y en mayúsculas.
 */
.fi-arqoba-visita-datos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
    margin: 0;
}

.fi-arqoba-visita-datos dt {
    margin-bottom: 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--arqoba-texto-suave);
}

.fi-arqoba-visita-datos dd {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--arqoba-texto);
    /* Una calle o unas referencias sin espacios no deben empujar la tarjeta. */
    overflow-wrap: anywhere;
}

/*
 * El teléfono en su propio renglón y sin partirse: en el teléfono se toca para llamar, y
 * un número cortado a la mitad no se lee de un vistazo.
 */
.fi-arqoba-visita-telefono {
    display: block;
    width: fit-content;
    font-weight: 600;
    color: var(--arqoba-teal);
    text-decoration: none;
    white-space: nowrap;
}

.fi-arqoba-visita-telefono:hover {
    text-decoration: underline;
}

.fi-arqoba-visita-referencias {
    display: block;
    color: var(--arqoba-texto-suave);
}

.fi-arqoba-visita-falta {
    font-weight: 600;
    color: #7d6117;
}

.fi-arqoba-visita-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
}

.fi-arqoba-visita-mensaje summary {
    width: fit-content;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--arqoba-texto-suave);
}

.fi-arqoba-visita-mensaje pre {
    margin: 0.5rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: var(--arqoba-radio-control);
    background-color: var(--arqoba-fondo);
    color: var(--arqoba-texto);
    /* Es el texto que se va a pegar: con su letra, no con la de código, y sin desbordar. */
    font-family: inherit;
    font-size: 0.8125rem;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* En una laptop angosta o una tableta, los tres datos uno debajo del otro. */
@media (max-width: 64rem) {
    .fi-arqoba-visita-datos {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * En el teléfono, la hora encima de la obra y no a un lado: a 375 puntos, una columna de
 * 7rem solo para la hora dejaba la dirección en un hilo.
 */
@media (max-width: 40rem) {
    .fi-arqoba-visita {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }
}