/* NovaFreight — overlays sobre MudBlazor (institucional portuario) */

:root {
    --nf-primary:  #0E246E;
    --nf-accent:   #3BBFF5;
    --nf-neutral:  #697478;
    --nf-mute:     #AABABA;
    --nf-canvas:   #F5F7FA;
    --nf-surface:  #FFFFFF;
    --nf-text:     #0F1730;
    --nf-text-2:   #3F4A55;
    --nf-border:   #E4E8EE;
    --nf-border-2: #CFD6DE;
}

html, body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--nf-canvas);
    color: var(--nf-text);
}

/* Consecutivo / ticker monoespaciado — la firma visual */
.nf-ticker {
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--nf-primary);
}

.nf-ticker-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(14, 36, 110, 0.06);
    border: 1px solid rgba(14, 36, 110, 0.15);
    font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--nf-primary);
}

.nf-ticker-chip.nf-empty {
    background: rgba(170, 186, 186, 0.10);
    border-color: var(--nf-border);
    color: var(--nf-mute);
}

.nf-ticker-chip--lg {
    font-size: 1.125rem;
    padding: 6px 14px;
    border-radius: 8px;
    letter-spacing: 0.04em;
}

/* Cabecera de página estándar */
.nf-page-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--nf-text);
    margin: 0;
}

.nf-page-subtitle {
    font-size: .8125rem;
    color: var(--nf-text-2);
    margin: 0;
}

/* Numero tabular para grids de datos */
.nf-tabular,
.mud-table-cell.nf-tabular,
.mud-input-input.nf-tabular {
    font-variant-numeric: tabular-nums;
}

/* Suavizar bordes de inputs */
.mud-input-control.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--nf-border-2);
    transition: border-color .12s ease;
}

.mud-input-control.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--nf-neutral);
}

/* Validación */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #1F9D55;
}

.invalid {
    outline: 1px solid #C0392B;
}

.validation-message {
    color: #C0392B;
    font-size: .75rem;
    margin-top: .25rem;
}

/* Pantalla de error de Blazor */
.blazor-error-boundary {
    background: #C0392B;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Se produjo un error al procesar la solicitud."
}

/* Loading spinner full-page */
.nf-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
}