/*
   Paleta corporativa D&A Insumos Ferreteros.
   Los dos colores base se extrajeron del logo oficial: el negro #010102 y el rojo vino
   #830001 son los únicos colores que aparecen en él. El resto son derivados para estados
   (hover, bordes, fondos suaves) construidos a partir del rojo.
*/
:root {
    --dya-negro: #010102;
    --dya-rojo: #830001;
    --dya-rojo-oscuro: #5c0001;
    --dya-rojo-claro: #a50002;
    --dya-rojo-suave: #f6e9e9;
    --dya-gris: #f4f4f5;
    --dya-borde: #dcdcde;
    --dya-tenue: #5f6065;

    /*
       La fuente. Antes se pedían 'Helvetica Neue' y Helvetica, que no están instaladas en
       Windows, así que todo caía a Arial sin que nadie lo hubiera decidido. Segoe UI sí está
       en todas las máquinas, no descarga nada y se lee mejor en pantalla. El resto de la
       lista cubre Mac y Linux por si algún día se entra desde otro sitio.
    */
    --dya-fuente: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

    /*
       La escala de tamaños, sacada de la que ya usaban las tarjetas del tablero —1,02 para el
       nombre, 0,82 para la descripción, 0,68 para la etiqueta—. Seis medidas para toda la
       aplicación, en vez de `small`, `fs-5` y tamaños escritos a mano por ahí.
    */
    --txt-xs: 0.72rem;
    --txt-sm: 0.82rem;
    --txt-base: 0.94rem;
    --txt-md: 1.02rem;
    --txt-lg: 1.25rem;
    --txt-xl: 1.75rem;

    /* Dos distancias, no siete: entre cosas de un bloque, y entre secciones. */
    --esp-bloque: 0.75rem;
    --esp-seccion: 2rem;

    /* Bootstrap toma estas variables para botones, enlaces y focus. */
    --bs-primary: var(--dya-rojo);
    --bs-primary-rgb: 131, 0, 1;
    --bs-link-color: var(--dya-rojo);
    --bs-link-hover-color: var(--dya-rojo-oscuro);
    --bs-link-color-rgb: 131, 0, 1;
}

html, body {
    font-family: var(--dya-fuente);
    color: var(--dya-negro);
}

body {
    font-size: var(--txt-base);
}

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

a:hover, .btn-link:hover {
    color: var(--dya-rojo-oscuro);
}

.btn-primary {
    color: #fff;
    background-color: var(--dya-rojo);
    border-color: var(--dya-rojo);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    color: #fff;
    background-color: var(--dya-rojo-oscuro);
    border-color: var(--dya-rojo-oscuro);
}

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

.btn-outline-primary:hover, .btn-outline-primary:active {
    background-color: var(--dya-rojo);
    border-color: var(--dya-rojo);
    color: #fff;
}

.text-bg-primary {
    background-color: var(--dya-rojo) !important;
    color: #fff !important;
}

.border-primary {
    border-color: var(--dya-rojo) !important;
}

/* El anillo de foco usa el rojo corporativo en vez del azul de Bootstrap. */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-control:focus, .form-check-input:focus, .form-select:focus {
    box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem var(--dya-rojo-claro);
}

.form-control:focus, .form-select:focus {
    border-color: var(--dya-rojo-claro);
}

.spinner-border.text-primary {
    color: var(--dya-rojo) !important;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

/* Los encabezados llevan el negro del logo, no el gris por omisión. */
h1, h2, h3, h4, h5 {
    color: var(--dya-negro);
}

/*
   El título de página. Antes era el tamaño por omisión de Bootstrap, 2,5 rem, que está
   pensado para una portada y no para una pantalla de datos donde el título compite con la
   tabla que hay debajo. El filo rojo baja de 3 px a 2 px por la misma razón: a un título más
   pequeño, 3 px le pesaban.
*/
h1 {
    font-size: var(--txt-xl);
    font-weight: 600;
    letter-spacing: -0.015em;
    border-bottom: 2px solid var(--dya-rojo);
    padding-bottom: .35rem;
    margin-bottom: var(--esp-bloque);
}

/*
   El bloque con el que abre toda pantalla interna: título y entradilla.

   Lo pone <EncabezadoDePagina>, no cada página a su manera. Antes cinco páginas abrían con un
   párrafo gris bajo el título, dos no abrían con nada y el hueco hasta el contenido lo ponía
   quien escribiera la página.
*/
.encabezado-pagina {
    margin-bottom: var(--esp-seccion);
}

.entradilla {
    font-size: var(--txt-sm);
    line-height: 1.5;
    color: var(--dya-tenue);

    /* Una línea de texto muy larga se lee mal aunque haya sitio. Sesenta y dos caracteres es
       el ancho al que el ojo encuentra el principio del renglón siguiente sin buscarlo. */
    max-width: 62ch;
    margin: 0;
}

/*
   El subtítulo de sección, uno solo.

   Antes la misma clase de encabezado se escribía de cinco formas según la página: `h2.h6` y
   `h2.h5` en el conciliador —en el mismo archivo—, `h4` en bancos y en configuración, y `h5`
   en el buzón y en registrar pago. Así «Cargar extractos» salía más pequeño que «Cuentas de
   retención» siendo la misma clase de cosa, y eso es lo que se percibe como desorden.

   La etiqueta es siempre <h2>: la apariencia se unifica sin que la estructura del documento
   mienta sobre la jerarquía. La marca roja de la izquierda ata la sección al logo sin repetir
   el relieve del menú, que allí significa «esto se pulsa».

   Con una excepción deliberada, para que nadie la tome por un descuido: un encabezado que vive
   DENTRO de una tarjeta, una alerta o un modal no se convierte. Ahí titula un trozo de interfaz
   y no una sección del documento, y el tamaño pequeño es lo correcto. Por eso «Cargar
   extractos» sigue siendo un h2.h6 en el conciliador aunque este comentario lo cite arriba
   entre los cinco tamaños del problema: estaba mal por ser el quinto tamaño, no por estar
   dentro de una tarjeta. Quedan así trece secciones convertidas y tres respetadas.
*/
.seccion {
    font-size: var(--txt-md);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--dya-negro);
    line-height: 1.25;
    margin: var(--esp-seccion) 0 var(--esp-bloque);
    padding-left: 0.6rem;
    border-left: 3px solid var(--dya-rojo);
}

/* La primera sección tras el encabezado no necesita el hueco de arriba: ya lo puso él. */
.encabezado-pagina + .seccion {
    margin-top: 0;
}

/*
   Una sección con un botón a su derecha.

   El margen lo lleva la fila, no el título. Si lo llevara el <h2>, `align-items: center`
   centraría cada hijo sobre su caja de márgenes —dos rem de aire arriba en el título, ninguno
   en el botón— y el botón acabaría dibujado por encima del texto en vez de a su altura. Es
   exactamente lo que pasó al convertir «Retenciones faltantes» en registrar pago, donde el
   <h5 class="mb-0"> anterior existía justo para evitarlo.
*/
.seccion-con-accion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin: var(--esp-seccion) 0 var(--esp-bloque);
}

.seccion-con-accion > .seccion {
    margin: 0;
}

.encabezado-pagina + .seccion-con-accion {
    margin-top: 0;
}

/*
   Las cifras, alineadas.

   Hay 44 columnas de importes en la aplicación. En una fuente proporcional el 1 es mucho más
   estrecho que el 7, así que una columna de pesos queda con el borde derecho serrado y la
   vista tiene que recolocarse en cada fila. Con cifras tabulares todos los dígitos miden lo
   mismo y la columna se recorre de arriba abajo de un tirón, que es exactamente lo que se
   hace todo el día con una cartera.

   Se aplica a las celdas alineadas a la derecha, que en esta aplicación son siempre números,
   y a `.cifra` para los importes que viven fuera de una tabla. En una celda con botones no
   hace nada: solo afecta a cómo se dibujan los dígitos.
*/
.table td.text-end,
.table th.text-end,
.cifra {
    font-variant-numeric: tabular-nums;
}

code {
    color: var(--dya-rojo-oscuro);
}

.table-light > :not(caption) > * > * {
    background-color: var(--dya-gris);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: var(--dya-rojo-oscuro);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "Ha ocurrido un error.";
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ------------------------------------------------------------------ Acceso */

.fondo-acceso {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, var(--dya-negro) 0%, #2a0708 55%, var(--dya-rojo) 100%);
}

.tarjeta-acceso {
    width: 100%;
    max-width: 25rem;
    background: #fff;
    border-radius: .75rem;
    padding: 2rem;
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .35);
}

.tarjeta-ancha {
    max-width: 32rem;
}

.marca-acceso {
    display: block;
    max-height: 3.25rem;
    max-width: 12rem;
    object-fit: contain;
    margin: 0 auto 1.5rem;
}

/* El código de seis dígitos se lee mejor espaciado y en cifras de ancho fijo. */
.campo-codigo {
    letter-spacing: .35em;
    font-variant-numeric: tabular-nums;
}

.qr-factor {
    width: 12rem;
    height: 12rem;
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    padding: .5rem;
    background: #fff;
}

.clave-manual {
    font-family: var(--bs-font-monospace);
    font-size: .95rem;
    letter-spacing: .1em;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .5rem .75rem;
    word-break: break-all;
}

.codigos-recuperacion {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .4rem;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    padding: .75rem;
}

.codigos-recuperacion code {
    font-size: .95rem;
    color: var(--dya-negro);
}

.pie-acceso {
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, .65);
    font-size: .8rem;
}

/* Identidad de la sesión en la barra superior. */
.barra-sesion {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .85rem;
}