@font-face {
    font-family: 'Archivo';
    font-weight: 600 800;
    font-display: swap;
    src: url('fonts/archivo.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans 3';
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/sourcesans3.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-weight: 400;
    font-display: swap;
    src: url('fonts/plexmono-400.woff2') format('woff2');
}

@font-face {
    font-family: 'IBM Plex Mono';
    font-weight: 600;
    font-display: swap;
    src: url('fonts/plexmono-600.woff2') format('woff2');
}

:root {
    --color-primario: #2f468a;
    --color-secundario: #c86b28;
    --color-terciario: #c5ced5;
    color-scheme: light;

    /* Variantes oscuras de marca. Existían como literales sueltos en los hover de los
       botones (#253972 y #a8571f) y no tenían nombre; se declaran con el mismo valor
       para poder migrarlos sin cambiar cómo se ve nada. */
    --color-primario-hover: #253972;
    --color-secundario-hover: #a8571f;

    --ink: #1a2233;
    --ink-soft: #5b6478;
    --ink-faint: #8b93a6;
    --paper: #f6f6f3;
    --surface: #ffffff;
    --line: #e4e2db;
    --line-strong: #d2cfc5;

    /* Tinta y superficie sobre fondo oscuro. La barra lateral es el único sitio del
       sistema con fondo oscuro y no tenía tokens: --ink y sus variantes son para papel.
       --surface-dark y --ink-inverse son los valores que ya existían sueltos, solo con
       nombre. --ink-inverse-soft sí cambia: el #adb4ba anterior daba 4,24:1 contra la
       parte más clara del degradado y no llegaba al mínimo AA; este da 4,83:1. */
    --surface-dark: #1f2f5c;
    --ink-inverse: #d7d7d7;
    --ink-inverse-soft: #b8c0c8;

    --success: #1e7f4f;
    --success-soft: #ddeee3;
    --warning: #9c6b0b;
    --warning-soft: #f5e7cb;
    --danger: #b23b3b;
    --danger-soft: #f5dede;
    /* --info-soft existía sin su par. Se resuelve como alias de --color-primario en vez
       de inventar un hex nuevo: "informativo" y "de marca" son el mismo azul, y así el
       sistema no gana un color más. Se usa para estados que no son éxito, advertencia
       ni peligro, sino ausencia de dato: por ejemplo un producto sin costo registrado. */
    --info-soft: #dde6f5;
    --info: var(--color-primario);

    /* Tipografía: Minor Third (1.2) con base 16px, redondeada a píxel entero.
       Se eligió 1.2 y no una razón más amplia porque 11 de los 15 tamaños que
       había vivían por debajo de 1rem: con 1.25 o 1.33 quedaban sólo dos
       escalones en esa banda. Al redondear a píxel, --fs-xs y --fs-sm caen
       exactamente sobre los dos tamaños más repetidos del proyecto. */
    --fs-xs: 0.6875rem;  /* 11px */
    --fs-sm: 0.8125rem;  /* 13px */
    --fs-md: 1rem;       /* 16px */
    --fs-lg: 1.1875rem;  /* 19px */
    --fs-xl: 1.4375rem;  /* 23px */
    --fs-2xl: 1.75rem;   /* 28px */

    /* Espaciado: es la escala de Bootstrap 5.1 tal cual, más los dos escalones
       que le faltan. Nombres de talla y no números a propósito: si --space-3
       valiera 0.75rem estaría conviviendo en el mismo markup con p-3 de
       Bootstrap, que vale 1rem. */
    --space-2xs: 0.25rem;  /* = bootstrap 1 */
    --space-xs: 0.5rem;    /* = bootstrap 2 */
    --space-sm: 0.75rem;   /* nuevo, Bootstrap no lo tiene */
    --space-md: 1rem;      /* = bootstrap 3 */
    --space-lg: 1.5rem;    /* = bootstrap 4 */
    --space-xl: 2rem;      /* nuevo, tapa el salto de 1.5rem a 3rem */
    --space-2xl: 3rem;     /* = bootstrap 5 */

    /* Radios. OJO: Bootstrap 5.1 pinta 0.25rem en .btn, .dropdown-menu y .alert.
       Mientras no se sobreescriban esas clases, --radius-sm no llega a los
       botones y el 4px sigue vivo ahí. --radius-sm vale 0.375rem porque es el
       valor por defecto de Bootstrap 5.3: si actualizamos, ya queda alineado. */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-pill: 100px;
    --radius-full: 50%;     /* círculo, fuera de la escala */

    /* Elevación. El rgba(26, 34, 51) es --ink en RGB: sobre --paper, que es un
       blanco cálido, la sombra de negro puro se ve sucia. Las alfas suben una o
       dos centésimas respecto del negro equivalente porque --ink es más claro y
       a igual alfa rinde menos; conviene verificarlo en pantalla.
       --shadow-up existe porque el desplazamiento negativo de la barra inferior
       no se puede derivar de los otros tres. */
    --shadow-sm: 0 1px 2px rgba(26, 34, 51, 0.06);
    --shadow-md: 0 0.375rem 1rem rgba(26, 34, 51, 0.14);
    --shadow-lg: 0 0.5rem 1.5rem rgba(26, 34, 51, 0.24);
    --shadow-up: 0 -1px 2px rgba(26, 34, 51, 0.20);
}

html, body {
    font-family: 'Source Sans 3', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--paper);
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -0.01em;
}

/* h1 estaba en 1.7rem (27.2px) mientras h2 heredaba el 2rem (32px) de Bootstrap: el
   titulo de pagina se veia mas chico que el de seccion. Ahora los seis salen de la
   escala, en orden. h4 y h5 comparten escalon a proposito —en esta aplicacion no son
   niveles de documento sino etiquetas de componente— y se separan por peso. */
h1 {
    font-weight: 800;
    font-size: var(--fs-2xl);
}

h2 {
    font-size: var(--fs-xl);
}

h3 {
    font-size: var(--fs-lg);
}

h4 {
    font-size: var(--fs-md);
}

h5 {
    font-weight: 600;
    font-size: var(--fs-md);
}

h6 {
    font-weight: 600;
    font-size: var(--fs-sm);
}

.card-title {
    font-family: 'Archivo', 'Segoe UI', sans-serif;
    font-size: var(--fs-md);
}

small, .text-muted, .form-text {
    font-size: var(--fs-sm);
}

a, .btn-link {
    color: var(--color-primario);
}

.btn-primary {
    color: var(--surface);
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--color-primario-hover);
    border-color: var(--color-primario-hover);
}

.btn-secondary {
    color: var(--surface);
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus {
    background-color: var(--color-secundario-hover);
    border-color: var(--color-secundario-hover);
}

.btn-outline-primary {
    color: var(--color-primario);
    border-color: var(--color-primario);
}

.btn-outline-primary:hover {
    color: var(--surface);
    background-color: var(--color-primario);
    border-color: var(--color-primario);
}

/* btn-outline-secondary es LA accion neutra de la aplicacion: paginacion, editar,
   activar/desactivar, en una docena de pantallas. Estaba pintado con el naranja de
   acento, asi que toda accion neutra se leia como advertencia -y daba 3,76:1, por
   debajo del minimo AA cuando el boton lleva texto-. Vuelve a ser neutro: 5,93:1.
   El naranja se queda en .btn-secondary solido, donde el acento si es deliberado. */
.btn-outline-secondary {
    color: var(--ink-soft);
    border-color: var(--line-strong);
}

.btn-outline-secondary:hover {
    color: var(--surface);
    background-color: var(--ink-soft);
    border-color: var(--ink-soft);
}

/* app.css sobreescribia .btn-primary y .btn-secondary pero no .btn-outline-danger, que
   se quedaba con el #dc3545 de Bootstrap. Es el boton de eliminar de nueve pantallas. */
.btn-outline-danger {
    color: var(--danger);
    border-color: var(--danger);
}

.btn-outline-danger:hover {
    color: var(--surface);
    background-color: var(--danger);
    border-color: var(--danger);
}

/* El único badge con fondo sólido: no sigue la regla de fondo suave más texto en tinta
   de los otros cinco, así que necesita su propio color de texto. Con --ink daría 1,79:1
   —ilegible—; con --surface da 8,88:1. */
.badge.bg-primary {
    background-color: var(--color-primario) !important;
    color: var(--surface) !important;
    border-color: var(--color-primario) !important;
}

.card.border-primary {
    border-color: var(--color-primario) !important;
}

.text-primary {
    color: var(--color-primario) !important;
}

/* .form-select estaba fuera de esta lista y caia al azul por defecto de Bootstrap
   (#86b7fe + rgba(13,110,253,.25)). Se suma aca para que todos los controles
   compartan el anillo de --color-terciario. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem var(--surface), 0 0 0 0.25rem var(--color-terciario);
}

.content {
    padding-top: var(--space-md);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
}

.invalid {
    outline: 1px solid var(--danger);
}

.validation-message {
    color: var(--danger);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--danger);
    /* El 3.7rem deja sitio al icono SVG del propio fondo: es una medida del
       elemento, no espaciado de la escala. */
    padding: var(--space-md) var(--space-md) var(--space-md) 3.7rem;
    color: var(--surface);
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    /* Primer consumidor de --ink-faint: como borde es un objeto grafico y le basta
       3:1, que es justo lo que da (3,08:1). Para texto no alcanzaria. */
    border-color: var(--ink-faint);
}

/* Tarjetas: estilo claro y uniforme en todo el sistema */
.card {
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.card-title {
    font-weight: 700;
    color: var(--ink);
}

/* Formularios: apariencia uniforme, sin fondos oscuros */
.form-control,
.form-select {
    background-color: var(--surface);
    border-color: var(--line);
    border-radius: var(--radius-md);
    min-height: 2.5rem;
}

.form-control:disabled,
.form-control:read-only,
.form-select:disabled {
    background-color: var(--paper);
}

/* Ocultar los controles nativos de incremento/decremento en campos numéricos */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

/* Badges: estilo pill con fondo suave en vez de bloques de color sólido */
/* Los badges van con fondo suave, texto en --ink y borde del color semantico.
   Antes el texto usaba el color de su propia familia sobre el fondo -soft, y a 11px
   eso no llega al minimo AA: bg-success daba 4,14:1 y bg-warning 3,80:1; danger y
   secondary pasaban por centesimas. Con --ink todos quedan sobre 12:1 y el color se
   mantiene como borde, que al ser objeto grafico solo necesita 3:1.
   El estado nunca dependio solo del color: el badge siempre lleva su texto. */
.badge {
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--fs-xs);
    /* Relativos al propio texto del badge a proposito, no son espaciado de layout. */
    padding: 0.35em 0.7em;
    border: 1px solid transparent;
    color: var(--ink) !important;
}

.badge.bg-success {
    background-color: var(--success-soft) !important;
    border-color: var(--success) !important;
}

.badge.bg-warning {
    background-color: var(--warning-soft) !important;
    border-color: var(--warning) !important;
}

.badge.bg-danger {
    background-color: var(--danger-soft) !important;
    border-color: var(--danger) !important;
}

.badge.bg-secondary {
    background-color: var(--line) !important;
    border-color: var(--line-strong) !important;
}

.badge.bg-info {
    background-color: var(--info-soft) !important;
    border-color: var(--info) !important;
}

/* Cifras tabulares: montos y códigos alineados en columna, tipografía monoespaciada */
.table td.text-end,
.table th.text-end {
    font-family: 'IBM Plex Mono', monospace;
    font-variant-numeric: tabular-nums;
}

/* Íconos de línea (Components/Shared/Icon.razor), reemplazan a los emoji */
.ico {
    width: 1.05em;
    height: 1.05em;
    stroke: currentColor;
    stroke-width: 1.7;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.15em;
    flex-shrink: 0;
}