/*
 * Tema de AMOVENCA Viáticos y AMOVENCA Approvals (D-25).
 *
 * CSS plano, sin compilación: lo publica `filament:assets`. Todo lo propio
 * lleva prefijo `vt-` y se apoya en las variables de color del panel
 * (`--primary-*`, `--gray-*`), así que el modo oscuro sale de redefinir las
 * fichas de abajo y no de duplicar reglas.
 */

:root {
    --vt-surface: #fff;
    --vt-sunken: var(--gray-50);
    --vt-ink: var(--primary-950);
    --vt-muted: var(--gray-600);
    --vt-line: var(--gray-200);
    --vt-line-strong: var(--gray-300);
    --vt-accent: var(--primary-700);
    --vt-accent-soft: var(--primary-50);
    --vt-accent-line: var(--primary-400);
    --vt-track: var(--gray-200);

    /* Ámbar: reservado a «te toca a ti» y a las alertas de reglas. */
    --vt-due: oklch(0.72 0.15 75);
    --vt-due-bg: oklch(0.955 0.045 85);
    --vt-due-ink: oklch(0.34 0.08 65);

    --vt-stop: oklch(0.55 0.16 28);
    --vt-stop-bg: oklch(0.96 0.025 28);
    --vt-stop-ink: oklch(0.36 0.12 28);

    --vt-ok: oklch(0.5 0.1 160);
    --vt-ok-bg: oklch(0.955 0.035 160);
    --vt-ok-ink: oklch(0.34 0.08 160);

    --vt-radius: 0.625rem;
}

.dark {
    --vt-surface: var(--gray-900);
    --vt-sunken: var(--gray-950);
    --vt-ink: var(--gray-50);
    --vt-muted: var(--gray-400);
    --vt-line: var(--gray-700);
    --vt-line-strong: var(--gray-600);
    --vt-accent: var(--primary-300);
    --vt-accent-soft: oklch(0.27 0.035 228);
    /* En oscuro el 600 se pierde contra la pista y contra el fondo. */
    --vt-accent-line: var(--primary-500);
    --vt-track: var(--gray-700);

    --vt-due-bg: oklch(0.3 0.05 75);
    --vt-due-ink: oklch(0.9 0.08 85);
    --vt-stop-bg: oklch(0.29 0.06 28);
    --vt-stop-ink: oklch(0.9 0.05 28);
    --vt-ok-bg: oklch(0.29 0.04 160);
    --vt-ok-ink: oklch(0.9 0.06 160);
}

/* Las cifras de las tablas se alinean por columnas. */
.fi-ta-text,
.fi-wi-stats-overview-stat-value {
    font-variant-numeric: tabular-nums;
}

/* --- Marca ------------------------------------------------------------- */

.vt-brand {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    color: var(--vt-ink);
}

.vt-brand__house {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--vt-muted);
}

.vt-brand__product {
    font-size: 1.125rem;
    font-weight: 600;
}

/* --- Importes ---------------------------------------------------------- */

.vt-money {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    white-space: nowrap;
}

.vt-money__currency {
    white-space: pre;
    font-size: 0.6em;
    font-weight: 500;
    color: var(--vt-muted);
}

.vt-money--lg {
    font-size: 1.875rem;
    line-height: 1.15;
}

.vt-money--xl {
    font-size: 2.5rem;
    line-height: 1.05;
    font-weight: 600;
}

.vt-money--strong {
    font-weight: 600;
}

/* --- Superficies ------------------------------------------------------- */

.vt-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vt-card {
    background: var(--vt-surface);
    border: 1px solid var(--vt-line);
    border-radius: var(--vt-radius);
    color: var(--vt-ink);
}

.vt-card--pad {
    padding: 1rem 1.25rem;
}

.vt-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--vt-muted);
}

.vt-eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vt-accent);
}

.vt-muted {
    color: var(--vt-muted);
}

.vt-small {
    font-size: 0.8125rem;
}

/* --- Progreso del ciclo ------------------------------------------------ */

.vt-progress {
    overflow: hidden;
}

.vt-progress__steps {
    list-style: none;
    margin: 0;
    padding: 1.25rem;
    display: grid;
    grid-template-columns: repeat(var(--vt-steps, 6), minmax(0, 1fr));
    gap: 0.75rem;
}

.vt-progress__step {
    min-width: 0;
    overflow-wrap: anywhere;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--vt-muted);
}

.vt-progress__bar {
    height: 0.375rem;
    border-radius: 999px;
    background: var(--vt-track);
}

.vt-progress__step--done {
    color: var(--vt-ink);
    font-weight: 600;
}

.vt-progress__step--done .vt-progress__bar {
    background: var(--vt-accent);
}

.vt-progress__step--current {
    color: var(--vt-ink);
    font-weight: 700;
}

.vt-progress__step--current .vt-progress__bar {
    background: var(--vt-due);
}

.vt-progress__note {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--vt-muted);
}

.vt-progress__hint {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
    background: var(--vt-sunken);
    border-top: 1px solid var(--vt-line);
}

.vt-progress__hint--due {
    background: var(--vt-due-bg);
    color: var(--vt-due-ink);
    border-top-color: transparent;
}

.vt-progress__hint--stop {
    background: var(--vt-stop-bg);
    color: var(--vt-stop-ink);
    border-top-color: transparent;
}

.vt-progress__hint--ok {
    background: var(--vt-ok-bg);
    color: var(--vt-ok-ink);
    border-top-color: transparent;
}

/* En el teléfono, sólo las barras: los nombres no caben en seis columnas. */
@media (max-width: 40rem) {
    .vt-progress__steps {
        gap: 0.25rem;
        padding: 1rem;
    }

    .vt-progress__step > :not(.vt-progress__bar) {
        display: none;
    }

    .vt-progress__hint {
        padding-inline: 1rem;
    }
}

/* --- Alertas de reglas y análisis asistido ----------------------------- */

/* Dos lenguajes distintos a propósito: lo que dice una regla de la empresa
   (relleno, color de aviso) y lo que resume la IA (borde discontinuo, color
   de marca). Que no se confundan es parte de D-16. */

.vt-alert {
    padding: 0.875rem 1rem;
    border-radius: var(--vt-radius);
    border: 1px solid var(--vt-due);
    background: var(--vt-due-bg);
    color: var(--vt-due-ink);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vt-alert--danger {
    border-color: var(--vt-stop);
    background: var(--vt-stop-bg);
    color: var(--vt-stop-ink);
}

.vt-alert--info {
    border-color: var(--vt-line-strong);
    background: var(--vt-sunken);
    color: var(--vt-ink);
}

.vt-alert__kicker {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.vt-alert__title {
    font-weight: 600;
}

.vt-ai {
    padding: 1rem;
    border-radius: var(--vt-radius);
    border: 1px dashed var(--vt-accent-line);
    background: var(--vt-accent-soft);
    color: var(--vt-ink);
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.vt-ai__title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--vt-accent);
}

.vt-ai__disclaimer {
    font-size: 0.75rem;
    color: var(--vt-muted);
}

.vt-ai__list {
    margin: 0;
    padding-inline-start: 1.1rem;
    list-style: disc;
    font-size: 0.875rem;
}

/* --- AMOVENCA Approvals: bandeja --------------------------------------- */

.vt-inbox {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vt-inbox__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
    gap: 1rem;
    align-items: start;
}

.vt-switch {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--vt-line);
}

.vt-switch__item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0 0.875rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--vt-muted);
    cursor: pointer;
}

.vt-switch__item--active {
    color: var(--vt-ink);
    font-weight: 600;
    box-shadow: inset 0 -3px 0 var(--vt-accent);
}

/* En escritorio «Ir a Viáticos» ya está en la barra superior. */
.vt-switch__item--away {
    display: none;
}

.vt-switch__count {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.0625rem 0.4375rem;
    border-radius: 999px;
    background: var(--vt-due-bg);
    color: var(--vt-due-ink);
}

.vt-request {
    display: flex;
    flex-direction: column;
}

.vt-request__body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1rem 0.875rem;
}

.vt-request__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.vt-request__who {
    font-weight: 600;
}

.vt-request__actions {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 0.625rem;
    padding: 0 1rem 1rem;
}

.vt-request__actions .fi-btn,
.vt-actionbar .fi-btn {
    min-height: 3rem;
    width: 100%;
}

.vt-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.vt-empty__icon {
    width: 2.5rem;
    height: 2.5rem;
    color: var(--vt-muted);
}

.vt-empty__title {
    font-weight: 600;
}

@media (max-width: 40rem) {
    /* En el teléfono las bandejas se eligen con el pulgar, abajo. */
    .vt-switch {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding: 0.375rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
        background: var(--vt-surface);
        border-bottom: 0;
        border-top: 1px solid var(--vt-line);
    }

    .vt-switch__item {
        min-height: 3.25rem;
        padding: 0;
        border-radius: 0.5rem;
        font-size: 0.8125rem;
    }

    .vt-switch__item--active {
        box-shadow: none;
        background: var(--vt-accent-soft);
    }

    .vt-switch__item--away {
        display: flex;
    }

    .vt-inbox {
        padding-bottom: 4.5rem;
    }
}

/* --- AMOVENCA Approvals: ficha de decisión ----------------------------- */

.vt-hero {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.25rem;
    border-radius: var(--vt-radius);
    background: var(--primary-950);
    color: #fff;
}

.vt-hero .vt-eyebrow,
.vt-hero .vt-muted,
.vt-hero .vt-money__currency {
    color: var(--primary-200);
}

.vt-hero__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.vt-hero__back {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 500;
    color: #fff;
}

.vt-hero__who {
    font-size: 1.0625rem;
    font-weight: 600;
}

.vt-section-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--vt-muted);
}

.vt-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vt-line);
    font-size: 0.875rem;
}

.vt-facts dt {
    font-size: 0.75rem;
    color: var(--vt-muted);
}

.vt-facts dd {
    margin: 0;
    font-weight: 500;
}

.vt-lines {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vt-lines__row {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.vt-levels {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.vt-levels__item {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
}

.vt-levels__dot {
    flex: none;
    width: 0.625rem;
    height: 0.625rem;
    margin-top: 0.375rem;
    border-radius: 50%;
    background: var(--vt-track);
}

.vt-levels__dot--approved {
    background: var(--vt-ok);
}

.vt-levels__dot--rejected {
    background: var(--vt-stop);
}

.vt-levels__dot--current {
    background: var(--vt-due);
}

.vt-levels__role {
    font-weight: 600;
}

/* La barra de decisión se queda a la vista: se decide con el pulgar. */
.vt-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-inline: -1rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: var(--vt-surface);
    border-top: 1px solid var(--vt-line);
}

.vt-actionbar__buttons {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 0.625rem;
}

.vt-actionbar__buttons--single {
    grid-template-columns: 1fr;
}

.vt-actionbar__note {
    font-size: 0.75rem;
    text-align: center;
    color: var(--vt-muted);
}

@media (min-width: 40rem) {
    .vt-actionbar {
        margin-inline: 0;
        border: 1px solid var(--vt-line);
        border-radius: var(--vt-radius);
        bottom: 1rem;
    }
}

/* --- Ficha del expediente ---------------------------------------------- */

.vt-ficha__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

.vt-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 1rem;
}

.vt-figure {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.vt-figure--due {
    border-color: var(--vt-due);
}

.vt-figure--due .vt-label {
    color: var(--vt-due-ink);
    font-weight: 600;
}

.dark .vt-figure--due .vt-label {
    color: var(--vt-due);
}

.vt-meter {
    display: block;
    height: 0.5rem;
    margin-top: 0.25rem;
    border-radius: 999px;
    background: var(--vt-track);
}

.vt-meter__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--vt-accent);
}

/* En el teléfono las tres cifras caben en una tarjeta, no en tres. */
@media (max-width: 40rem) {
    .vt-figures {
        gap: 0.5rem;
    }

    .vt-figure {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        padding: 0.75rem 1rem;
    }

    .vt-figure .vt-money--lg {
        font-size: 1.375rem;
    }

    .vt-figure .vt-meter,
    .vt-figure .vt-small {
        flex-basis: 100%;
    }
}

/* --- Rendición y páginas de una sola columna --------------------------- */

.vt-narrow {
    max-width: 40rem;
}

.vt-lines__row--total {
    align-items: baseline;
    padding-top: 0.75rem;
    border-top: 1px solid var(--vt-line);
}

/* --- Gastos ------------------------------------------------------------ */

.vt-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.vt-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3.75rem;
    overflow: hidden;
    border-radius: 0.25rem;
    border: 1px solid var(--vt-line-strong);
    background: var(--vt-sunken);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--vt-muted);
}

.vt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vt-thumb--missing {
    padding: 0.125rem;
    border-style: dashed;
    border-color: var(--vt-due);
    background: var(--vt-due-bg);
    color: var(--vt-due-ink);
    font-size: 0.6875rem;
    text-align: center;
}

/* --- Barra inferior del panel de Viáticos (teléfono) ------------------- */

.vt-bottomnav {
    display: none;
}

@media (max-width: 40rem) {
    .vt-bottomnav {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 20;
        display: grid;
        grid-template-columns: repeat(var(--vt-items, 3), minmax(0, 1fr));
        gap: 0.25rem;
        padding: 0.375rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
        background: var(--vt-surface);
        border-top: 1px solid var(--vt-line);
    }

    .vt-bottomnav__item {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.375rem;
        min-height: 3.25rem;
        border-radius: 0.5rem;
        font-size: 0.8125rem;
        font-weight: 500;
        color: var(--vt-muted);
    }

    .vt-bottomnav__item--active {
        font-weight: 700;
        color: var(--vt-ink);
        background: var(--vt-accent-soft);
    }

    /* Que la barra no tape el final de la página. */
    .fi-panel-app .fi-main {
        padding-bottom: 5rem;
    }
}

/* --- Inicio ------------------------------------------------------------ */

.vt-todo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.vt-todo__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--vt-radius);
    border: 1px solid var(--vt-due);
    background: var(--vt-due-bg);
    color: var(--vt-due-ink);
}

.vt-todo__item--danger {
    border-color: var(--vt-stop);
    background: var(--vt-stop-bg);
    color: var(--vt-stop-ink);
}

.vt-todo__text {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}

.vt-todo__go {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-weight: 700;
}

/* --- Tablero de proyecto ----------------------------------------------- */

.vt-text-due {
    color: var(--vt-due-ink);
    font-weight: 600;
}

.vt-text-stop {
    color: var(--vt-stop-ink);
    font-weight: 600;
}

.dark .vt-text-due {
    color: var(--vt-due);
}

/* En oscuro la tinta de aviso es casi blanca: sirve sobre su fondo rojizo,
   pero suelta sobre la tarjeta no se lee como alerta. */
.dark .vt-text-stop {
    color: oklch(0.76 0.14 28);
}

.vt-budgetbar {
    display: flex;
    height: 0.875rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--vt-track);
}

.vt-budgetbar__accepted {
    background: var(--vt-accent);
}

.vt-budgetbar__committed {
    background: var(--vt-accent-line);
}

.vt-budgetbar__committed--due {
    background: var(--vt-due);
}

.vt-budgetbar__committed--stop {
    background: var(--vt-stop);
}

.vt-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1rem;
    font-size: 0.8125rem;
    color: var(--vt-muted);
}

.vt-legend__dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    margin-inline-end: 0.375rem;
    border-radius: 2px;
    background: var(--vt-track);
}

.vt-legend__dot--accepted {
    background: var(--vt-accent);
}

.vt-legend__dot--committed {
    background: var(--vt-accent-line);
}

.vt-bars {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.vt-bars__row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.125rem 1rem;
    font-size: 0.875rem;
}

.vt-bars__label {
    font-weight: 500;
}

.vt-bars__value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.vt-bars__row .vt-meter {
    grid-column: 1 / -1;
}

/* --- Inicio del trabajador --------------------------------------------- */

.vt-balances {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vt-balance {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.875rem 1rem;
    font-size: 1.25rem;
}

.vt-balance + .vt-balance {
    border-inline-start: 1px solid var(--vt-line);
}

.vt-balance .vt-label,
.vt-balance .vt-small {
    font-size: 0.8125rem;
}

.vt-balance--due .vt-label {
    color: var(--vt-due-ink);
    font-weight: 600;
}

.dark .vt-balance--due .vt-label {
    color: var(--vt-due);
}

.vt-doors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 0.625rem;
}

.vt-door {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.25rem;
    padding: 0.75rem 1rem;
    border-radius: var(--vt-radius);
    border: 1px solid var(--vt-accent-line);
    background: var(--vt-surface);
    color: var(--vt-ink);
    font-weight: 700;
    text-align: start;
    cursor: pointer;
}

.vt-door--primary {
    border-color: var(--primary-700);
    background: var(--primary-700);
    color: #fff;
}

.vt-door__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.vt-door__title {
    font-size: 1rem;
    font-weight: 600;
}

.vt-door__hint {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--vt-muted);
}

.vt-door--primary .vt-door__hint {
    color: var(--primary-100);
}

@media (max-width: 40rem) {
    .vt-balance {
        padding: 0.75rem;
        font-size: 1.0625rem;
    }

    /* En el teléfono las acciones de la ficha van abajo, al alcance del
       pulgar, y ocupan el sitio de la barra de navegación. */
    .fi-resource-expedientes.fi-resource-view-record-page .fi-header-actions-ctn {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 20;
        padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom));
        background: var(--vt-surface);
        border-top: 1px solid var(--vt-line);
    }

    .fi-resource-expedientes.fi-resource-view-record-page .fi-header-actions-ctn .fi-ac {
        display: flex;
        flex-wrap: nowrap;
        width: 100%;
        gap: 0.5rem;
    }

    .fi-resource-expedientes.fi-resource-view-record-page .fi-header-actions-ctn .fi-ac > .fi-btn:last-child {
        flex: 1;
        min-height: 3rem;
    }

    .fi-resource-expedientes.fi-resource-view-record-page .fi-header-actions-ctn .fi-btn {
        min-height: 3rem;
    }
}

/* --- Lista de expedientes en el teléfono -------------------------------- */

/* La tabla sirve en escritorio; en el teléfono se desbordaba. Mismas
   celdas, recolocadas como tarjeta: qué es arriba, estado e importe debajo.
   Las columnas que Filament ya oculta en pantallas pequeñas siguen ocultas.
   Vale también para «Mis expedientes recientes» del inicio. */
@media (max-width: 40rem) {
    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-content-ctn {
        overflow-x: visible;
    }

    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-table,
    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-table tbody {
        display: block;
        width: 100%;
    }

    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-table thead {
        display: none;
    }

    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        padding-block: 0.375rem;
    }

    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-cell[class*=':fi-visible'] {
        display: none;
    }

    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-cell-code {
        grid-column: 1 / -1;
    }

    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-cell-status {
        grid-row: 2;
        grid-column: 1;
    }

    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-cell-requested {
        grid-row: 2;
        grid-column: 2;
    }

    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-cell .fi-ta-text {
        white-space: normal;
    }

    :is(.fi-resource-expedientes.fi-resource-list-records-page, .fi-panel-app .fi-wi-table) .fi-ta-cell-requested .fi-ta-text-item {
        font-family: var(--font-mono);
        font-weight: 500;
    }
}