h1:focus {
    outline: none;
}

/* Fondo gris oscuro para todo el panel lateral. */
.mud-drawer.app-drawer-modern,
.mud-drawer.app-drawer-modern .mud-drawer-content {
    background-color: #4b5563 !important;
    color: #f9fafb;
}

.mud-drawer.app-drawer-modern .app-drawer-brand-text,
.mud-drawer.app-drawer-modern .mud-nav-link,
.mud-drawer.app-drawer-modern .mud-nav-link-text,
.mud-drawer.app-drawer-modern .nav-modulos-titulo {
    color: #f9fafb;
}

/* Navegación lateral: separación entre grupos, resalte de ítem activo con barra de acento.
   OJO: el selector debe apuntar solo al botón-cabecera de cada grupo (Administración, Clientes,
   Caja), NUNCA a ".mud-nav-group .mud-nav-link" a secas — ese selector también matchea los
   enlaces HIJOS reales (Usuarios, Roles y permisos, etc.), y encogerlos a 0.72rem/60% opacidad
   además encoge su ícono hasta volverlo casi invisible, dejando el menú con enlaces de dos
   tamaños distintos y sin alinear entre sí (bug real, reportado por el usuario 2026-09-11). */
.mud-drawer .mud-nav-group > button.mud-nav-link .mud-nav-link-text {
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    opacity: 0.6;
}

.mud-drawer .mud-nav-link {
    border-radius: 10px;
    margin: 2px 0.5rem;
    min-height: 42px;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-inline-start: 1rem !important;
    padding-inline-end: 0.75rem !important;
}

.mud-drawer .mud-nav-link:hover {
    background-color: #6b7280 !important;
    color: #ffffff !important;
}

.mud-drawer .mud-nav-link:hover .mud-nav-link-text {
    color: #ffffff !important;
}

.mud-drawer .mud-nav-link:hover .mud-nav-link-icon {
    filter: brightness(1.18);
    transform: scale(1.06);
}

/* Una sola columna vertical para cabeceras, opciones internas y módulos. MudBlazor agrega
   sangría automática a los hijos de MudNavGroup; se neutraliza aquí deliberadamente. */
.mud-drawer .mud-nav-group .mud-nav-link,
.mud-drawer .mud-nav-group > button.mud-nav-link,
.mud-drawer .nav-modulos-panel .mud-nav-link {
    padding-inline-start: 1rem !important;
    padding-inline-end: 0.75rem !important;
}

.mud-drawer .mud-nav-link .mud-nav-link-icon {
    width: 24px;
    min-width: 24px;
    margin-inline-end: 12px;
}

/* Los módulos comerciales forman un bloque gris independiente y mantienen exactamente
   la misma sangría entre sí, aunque unos tengan nombres más largos. */
.mud-drawer .nav-modulos-panel {
    margin: 0.55rem 0;
    padding: 0.35rem 0 0.4rem;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.mud-drawer .nav-modulos-titulo {
    display: block;
    padding: 0 0.85rem 0.25rem;
    color: var(--mud-palette-text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.09em;
}

.mud-drawer .nav-modulos-panel .mud-nav-link {
    margin-inline: 0.25rem;
}

.mud-drawer .nav-modulos-panel .mud-nav-link-text {
    white-space: nowrap;
    overflow: visible;
    font-size: 0.92rem;
}

/* Identidad visual por área/módulo. */
.mud-drawer .nav-dashboard .mud-nav-link-icon { color: #6366f1 !important; }
.mud-drawer .nav-admin .mud-nav-link-icon { color: #8b5cf6 !important; }
.mud-drawer .nav-clientes .mud-nav-link-icon { color: #0891b2 !important; }
.mud-drawer .nav-caja .mud-nav-link-icon { color: #16a34a !important; }
.mud-drawer .nav-financiamientos .mud-nav-link-icon { color: #4f46e5 !important; }
.mud-drawer .nav-semanal .mud-nav-link-icon { color: #059669 !important; }
.mud-drawer .nav-quincenal .mud-nav-link-icon { color: #ea580c !important; }
.mud-drawer .nav-reportes .mud-nav-link-icon { color: #0284c7 !important; }
.mud-drawer .nav-configuracion .mud-nav-link-icon { color: #6b7280 !important; }

@media (prefers-color-scheme: dark) {
    .mud-drawer .nav-modulos-panel {
        border-color: transparent;
        background: transparent;
    }
}

.mud-drawer .mud-nav-link.mud-selected,
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-nav-link:focus,
.mud-drawer .mud-nav-link:focus-visible {
    background-color: transparent !important;
    color: #f9fafb !important;
    box-shadow: none !important;
    outline: none !important;
    font-weight: 600;
}

.mud-drawer .mud-nav-link.mud-selected::before,
.mud-drawer .mud-nav-link.active::before,
.mud-drawer .mud-nav-link.mud-selected::after,
.mud-drawer .mud-nav-link.active::after {
    background: transparent !important;
    box-shadow: none !important;
    opacity: 0 !important;
}

/* La ruta seleccionada no conserva ningún cuadro; el fondo solo aparece con hover. */
.mud-drawer .nav-modulo.mud-selected,
.mud-drawer .nav-modulo.active,
.mud-drawer .nav-modulo:focus,
.mud-drawer .nav-modulo:focus-visible {
    color: #f9fafb !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.mud-drawer .mud-nav-link:hover,
.mud-drawer .nav-modulo.mud-selected:hover,
.mud-drawer .nav-modulo.active:hover {
    color: #ffffff !important;
    background-color: #6b7280 !important;
    box-shadow: none !important;
}

.mud-drawer .mud-nav-group {
    margin-bottom: 0.25rem;
}

/* Cabeceras de tabla uniformes en todas las páginas (Empresas, Usuarios, Financiamientos, etc.):
   texto en mayúsculas pequeñas, más separación entre letras, sin negrita pesada. */
.mud-table-head .mud-table-cell {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--mud-palette-text-secondary);
}

.mud-table-row:hover {
    background-color: var(--mud-palette-action-default-hover, rgba(79, 70, 229, 0.04));
}

/* Tarjetas y paneles: transición suave al pasar el mouse, para un aire moderno sin exagerar. */
.mud-paper {
    transition: box-shadow 0.15s ease;
}

/* Círculo de ícono con color de acento tenue de fondo, usado en las tarjetas de estadísticas
   (Panel principal) y en cualquier otra tarjeta que quiera el mismo lenguaje visual (p. ej. la
   tarjeta de saldo de Caja). Global (no scoped) a propósito: se reutiliza entre componentes. */
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
}

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

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

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    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;
}

/* Tarjeta compartida por las páginas de cuenta (Login/Recuperar/Restablecer/Cambiar contraseña/
   confirmaciones), dentro del panel derecho de AccountLayout. */
.account-card {
    width: 100%;
    box-sizing: border-box;
    padding: 2.5rem;
    border-radius: 16px;
    background: var(--mud-palette-surface, #fff);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 24px rgba(16, 24, 40, 0.08);
}

.account-card-title {
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.account-card-subtitle {
    margin-bottom: 2rem;
}

/* Botón de envío de los formularios de cuenta: HTML puro a propósito, sin MudButton. MudButton
   depende de MudBlazor.min.js (para el efecto ripple); en una página estática cuyo envío escribe
   la cookie de autenticación, cualquier JS de por medio en el propio botón es un riesgo innecesario. */
.account-submit-btn {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 0.85rem 1.5rem;
    margin-top: 0.5rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background: var(--mud-palette-primary);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
}

.account-submit-btn:hover {
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.35);
}

.account-submit-btn:active {
    opacity: 0.9;
}

.account-submit-btn--secondary {
    color: var(--mud-palette-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-primary);
    box-shadow: none;
}

.account-submit-btn--secondary:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    box-shadow: none;
}

/* Botón de huella/rostro: solo ícono, sin texto — el navegador ya sabe distinguir huella de rostro
   por su cuenta al pedir la verificación, no hace falta anunciarlo con una etiqueta larga. */
.account-biometric-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    color: var(--mud-palette-primary);
    background: transparent;
    border: 1px solid var(--mud-palette-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.account-biometric-btn:hover {
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, transparent);
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.25);
}

.account-status-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.account-status-icon .mud-icon-root {
    font-size: 2.25rem;
}

.account-status-icon-success {
    background: rgba(46, 158, 91, 0.12);
    color: var(--mud-palette-success);
}

/* Campos de las páginas de cuenta (Login/Recuperar/Restablecer/Cambiar contraseña): se usan
   inputs planos (no MudTextField) porque estas páginas se renderizan de forma estática para poder
   escribir la cookie de autenticación al enviar el formulario. Los íconos decorativos SÍ pueden ser
   MudIcon (no participan del envío del formulario), solo el <input> en sí debe quedar plano. */
.account-field {
    margin-bottom: 1.25rem;
}

.account-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 0.375rem;
}

.account-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.account-input-wrap .account-input-icon {
    position: absolute;
    left: 0.875rem;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
}

.account-input-wrap:focus-within .account-input-icon {
    color: var(--mud-palette-primary);
}

.account-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 0.75rem 0.9rem 0.75rem 2.75rem;
    font-size: 0.95rem;
    border: 1.5px solid var(--mud-palette-lines-inputs, #dfe3ea);
    border-radius: 10px;
    background: var(--mud-palette-surface, #fff);
    color: var(--mud-palette-text-primary);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.account-field input.has-toggle {
    padding-right: 2.75rem;
}

.account-field input:focus {
    outline: none;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.account-toggle-password {
    position: absolute;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    background: transparent;
    border-radius: 50%;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.account-toggle-password:hover {
    background: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.05));
}

.account-toggle-password .icon-hide {
    display: none;
}

.account-toggle-password.is-visible .icon-show {
    display: none;
}

.account-toggle-password.is-visible .icon-hide {
    display: inline-flex;
}

.account-field .validation-message {
    color: var(--mud-palette-error);
    font-size: 0.75rem;
    margin-top: 0.375rem;
    display: block;
}

.account-field-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.account-field-check input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--mud-palette-primary);
    cursor: pointer;
}

.account-field-check label {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}