/*
   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;

    /* 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: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--dya-negro);
}

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);
}

h1 {
    border-bottom: 3px solid var(--dya-rojo);
    padding-bottom: .4rem;
    margin-bottom: 1rem;
}

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;
}