/*
 * FullCargo — capa fina sobre el tema de Filament.
 *
 * Dos ideas, las dos funcionales:
 *
 * 1. Los identificadores se leen carácter por carácter, no como palabras.
 *    Un número de contenedor (MSKU7841203) se verifica contra el que está
 *    estampado en la chapa, y un chasis contra el que está grabado en el
 *    vehículo. Van en monoespaciada, con el 0 barrado, porque quien compara
 *    necesita distinguir O de 0 y l de 1 sin dudar.
 *
 * 2. La plata se compara entre filas. Cifras tabulares para que los dígitos
 *    caigan en columna: ₲ 3.200.000 arriba de ₲ 450.000 y que la diferencia
 *    de magnitud se vea sin leer.
 *
 * No hay decoración acá. Todo lo demás lo resuelve Filament.
 */

:root {
    --fc-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
}

/* Identificadores: contenedores, chasis, documentos, tokens. */
.fc-code {
    font-family: var(--fc-mono);
    font-variant-ligatures: none;
    font-feature-settings: 'zero' 1; /* cero barrado */
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/*
 * Importes. Alineados a la derecha además de tabulares: una columna de
 * dinero centrada o a la izquierda obliga a leer cada número entero para
 * saber cuál es más grande.
 */
.fc-amount {
    font-family: var(--fc-mono);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Las tablas del panel son lo que el staff mira todo el día. Un poco más de
 * aire vertical y encabezados que se distingan del contenido sin gritar.
 */
.fi-ta-header-cell {
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.6875rem;
}

/* Los badges de estado son el vocabulario del sistema: que se lean. */
.fi-badge {
    letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/*
 * La marca. Mismo gesto que los identificadores: si el panel lee los códigos
 * en monoespaciada porque se verifican carácter por carácter, la marca puede
 * hablar ese idioma en vez de inventar otro.
 */
.fc-wordmark {
    font-family: var(--fc-mono);
    font-weight: 500;
    letter-spacing: 0.18em;
    font-size: 1.0625rem;
    white-space: nowrap;
}

.fc-wordmark__mark { color: var(--fc-brand, rgb(14 90 94)); }
.fc-wordmark__tail { color: rgb(100 116 139); }

.dark .fc-wordmark__mark { color: rgb(94 197 200); }
.dark .fc-wordmark__tail { color: rgb(148 163 184); }

/*
 * La pantalla de entrada es lo primero que ve cualquiera y se abre todos los
 * días, así que no lleva nada que haya que mirar dos veces: el fondo es una
 * cuadrícula muy tenue, del tamaño de una estiba vista desde arriba. Da una
 * sensación de lugar y desaparece apenas alguien empieza a tipear.
 */
.fi-simple-layout {
    background-image:
        linear-gradient(rgba(14, 90, 94, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(14, 90, 94, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    background-position: center;
}

.dark .fi-simple-layout {
    background-image:
        linear-gradient(rgba(94, 197, 200, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(94, 197, 200, 0.06) 1px, transparent 1px);
}

/* Una línea que dice de qué sistema es esta puerta, y nada más. */
.fc-login-note {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    line-height: 1.5;
    color: rgb(100 116 139);
}

.dark .fc-login-note { color: rgb(148 163 184); }