h1:focus {
    outline: none;
}

/* Panel lateral claro, alineado al resto del tablero. */
.mud-drawer.app-drawer-modern,
.mud-drawer.app-drawer-modern .mud-drawer-content {
    background: #f8fafc !important;
    color: #1e293b;
    border-right: 1px solid #e6ebf2;
}

.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: #1e293b;
}

.app-bar-usuario {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    margin-right: 6px;
    min-width: 0;
    max-width: 200px;
}

.app-bar-usuario__saludo {
    font-size: 11px;
    opacity: 0.8;
}

.app-bar-usuario__nombre {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.mud-drawer.app-drawer-modern .app-drawer-usuario {
    color: #64748b;
    display: block;
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    /* En móvil el nombre completo ya vive en el menú del avatar (ícono de la derecha) — mostrarlo
       ACÁ TAMBIÉN, al lado del nombre de la empresa, es lo que hacía que los dos textos compitieran
       por el mismo espacio angosto y se vieran pegados/cortados uno contra el otro (reportado por
       el usuario probando en un teléfono real). Se oculta entero, no solo el "Bienvenido". */
    .app-bar-usuario {
        display: none;
    }
}

/* Crédito de marca al pie del panel lateral, debajo de todos los módulos. */
.app-drawer-credito {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 0.9rem 0.75rem 1.1rem;
    margin-top: auto;
}

.app-drawer-credito-linea {
    font-size: 0.68rem;
    color: #64748b;
    opacity: 1;
}

.app-drawer-credito-marca {
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 2px 0;
}

.app-drawer-credito-anthony { color: #ff6b7a; }
.app-drawer-credito-sistem { color: #7c96f5; }

.app-drawer-credito-version {
    font-size: 0.68rem;
    color: #94a3b8;
    opacity: 1;
    margin-top: 4px;
}

/* 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;
    color: #64748b;
    opacity: 1;
}

.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: #eef2ff !important;
    color: #1e293b !important;
}

.mud-drawer .mud-nav-link:hover .mud-nav-link-text {
    color: #1e293b !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-mensual .mud-nav-link-icon { color: #0284c7 !important; }
.mud-drawer .nav-credito .mud-nav-link-icon { color: #7c3aed !important; }
.mud-drawer .nav-pos .mud-nav-group-icon,
.mud-drawer .nav-pos > .mud-nav-link .mud-nav-link-icon { color: #db2777 !important; }

/* Colores por opción del Punto de Venta (antes todos heredaban el magenta del grupo). */
.mud-drawer .nav-pos-facturacion .mud-nav-link-icon { color: #16a34a !important; }
.mud-drawer .nav-pos-ventas .mud-nav-link-icon { color: #0d9488 !important; }
.mud-drawer .nav-pos-dashboard .mud-nav-link-icon { color: #6366f1 !important; }
.mud-drawer .nav-pos-cartera .mud-nav-link-icon { color: #7c3aed !important; }
.mud-drawer .nav-pos-facturas .mud-nav-link-icon { color: #0284c7 !important; }
.mud-drawer .nav-pos-devoluciones .mud-nav-link-icon { color: #ea580c !important; }
.mud-drawer .nav-pos-productos .mud-nav-link-icon { color: #0891b2 !important; }
.mud-drawer .nav-pos-inventario .mud-nav-link-icon { color: #059669 !important; }
.mud-drawer .nav-pos-proveedores .mud-nav-link-icon { color: #2563eb !important; }
.mud-drawer .nav-pos-compras .mud-nav-link-icon { color: #d97706 !important; }
.mud-drawer .nav-pos-turnos .mud-nav-link-icon { color: #ca8a04 !important; }
.mud-drawer .nav-pos-cotizaciones .mud-nav-link-icon { color: #8b5cf6 !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: #e8eefc !important;
    color: #1d4ed8 !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;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-text,
.mud-drawer .mud-nav-link.mud-selected .mud-nav-link-text,
.mud-drawer .nav-modulo.active .mud-nav-link-text,
.mud-drawer .nav-modulo.mud-selected .mud-nav-link-text {
    color: #1d4ed8 !important;
}

.mud-drawer .nav-modulo.mud-selected,
.mud-drawer .nav-modulo.active,
.mud-drawer .nav-modulo:focus,
.mud-drawer .nav-modulo:focus-visible {
    color: #1d4ed8 !important;
    background-color: #e8eefc !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: #1e293b !important;
    background-color: #eef2ff !important;
    box-shadow: none !important;
}

.mud-drawer .mud-nav-link.active:hover,
.mud-drawer .mud-nav-link.mud-selected:hover,
.mud-drawer .nav-modulo.active:hover,
.mud-drawer .nav-modulo.mud-selected:hover {
    color: #1d4ed8 !important;
    background-color: #e0e9fb !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 quietas: el salto al pasar el mouse movía tablas, diálogos y formularios. */
.mud-paper {
    border-radius: 14px;
    transition: box-shadow 0.2s ease;
}

.stat-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08) !important;
}

/* 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. */
.app-main-container {
    padding: 24px 32px !important;
}

.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.icon-circle:hover {
    transform: scale(1.08);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
}

.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.75rem;
    border-radius: 18px;
    background: var(--cf-surface, #fff);
    border: 1px solid var(--cf-border, rgba(15, 23, 42, 0.06));
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 8px 28px rgba(16, 24, 40, 0.08);
    color: var(--cf-text, #172033);
}

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

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

@media (max-width: 600px) {
    .account-card {
        padding: 1.75rem 1.25rem;
        border-radius: 14px;
    }

    /* Menos relleno lateral y letra un toque más chica: un nombre de usuario largo pierde
       menos espacio real contra el ícono y el borde en una pantalla angosta. */
    .account-field input {
        height: 2.875rem;
        padding-left: 2.65rem;
        font-size: 0.95rem;
    }

    .account-field input:-webkit-autofill,
    .account-field input:-webkit-autofill:hover,
    .account-field input:-webkit-autofill:focus {
        padding-left: 2.65rem !important;
    }

    .account-input-wrap .account-input-icon {
        left: 0.8rem;
    }
}

/* 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;
    height: 3.125rem;
    padding: 0 1.5rem;
    margin-top: 0.75rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #fff;
    background: var(--cf-primary, var(--mud-palette-primary));
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: box-shadow 0.15s ease, opacity 0.15s ease, background-color 0.15s ease;
}

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

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

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

.account-submit-btn--secondary:hover {
    background: color-mix(in srgb, var(--cf-primary, 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: 3.125rem;
    height: 3.125rem;
    padding: 0;
    color: var(--cf-primary, var(--mud-palette-primary));
    background: transparent;
    border: 1px solid var(--cf-primary, 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(--cf-primary, 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.35rem;
}

.account-field label {
    display: block;
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--cf-text-secondary, var(--mud-palette-text-secondary));
    margin-bottom: 0.4rem;
}

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

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

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

/* Campo de usuario/contraseña más alto y con texto más grande a propósito: un nombre de
   usuario largo (o un correo usado por compatibilidad) tiene que leerse completo de un
   vistazo, sin sentirse apretado contra el ícono ni el borde del campo. */
.account-field input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    height: 3.125rem;
    padding: 0.75rem 1rem 0.75rem 3.1rem;
    font-size: 1.05rem;
    line-height: 1.4;
    letter-spacing: 0.01em;
    border: 1.5px solid var(--cf-border, var(--mud-palette-lines-inputs, #dfe3ea));
    border-radius: 12px;
    background: var(--cf-field-background, var(--mud-palette-surface, #fff));
    color: var(--cf-text, var(--mud-palette-text-primary));
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* El autocompletado de Chrome/Edge (huella, rostro, contraseña guardada) ignora el padding
   y el texto queda debajo del ícono: se ve el usuario cortado. */
.account-field input:-webkit-autofill,
.account-field input:-webkit-autofill:hover,
.account-field input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--cf-text, #172033);
    caret-color: var(--cf-text, #172033);
    box-shadow: 0 0 0 1000px var(--cf-field-background, #fff) inset;
    padding-left: 3.1rem !important;
    transition: background-color 9999s ease-out;
}

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

.account-field input:focus {
    outline: none;
    border-color: var(--cf-primary, var(--mud-palette-primary));
    box-shadow: var(--cf-shadow-focus, 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;
}

::deep .mud-grid {
    margin: -8px !important;
}

::deep .mud-item {
    padding: 8px !important;
}

::deep .mud-button-base {
    transition: all 0.15s ease;
}

::deep .mud-button-root:not(.mud-button-size-large) {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}

::deep .mud-select,
::deep .mud-select-root {
    font-size: 0.95rem !important;
}

::deep .mud-input-slot {
    padding: 10px 12px;
}

::deep .mud-paper {
    margin: 0;
}

::deep .mud-button-root {
    border-radius: 10px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

::deep .mud-button-root:hover {
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.25);
    transform: translateY(-1px);
}

::deep .mud-button-filled {
    background: linear-gradient(135deg, #2563EB, #1d4ed8);
}

::deep .mud-chip {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.15s ease;
}

::deep .mud-chip:hover {
    transform: scale(1.05);
}

::deep .mud-table-row {
    transition: all 0.15s ease;
}

::deep .mud-table-row:hover {
    background-color: rgba(37, 99, 235, 0.04) !important;
    transform: translateX(2px);
}

::deep .mud-icon-button {
    border-radius: 8px;
}

::deep .mud-icon-button:hover {
    background-color: rgba(37, 99, 235, 0.08) !important;
}

/* Gradientes sutiles en fondos de secciones */
::deep .app-form-section {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.02), rgba(37, 99, 235, 0));
}

/* Mejora visual de campos de entrada */
::deep .mud-input-root {
    border-radius: 8px;
    transition: all 0.2s ease;
}

::deep .mud-input-root:hover {
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}

::deep .mud-input-root:focus-within {
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.16) !important;
}

/* Botones compactos: tamaño pequeño y fuente reducida (solo Size.Small) */
::deep .mud-button-root.mud-button-size-small {
    font-size: 0.75rem;
    padding: 6px 12px;
}

html.mud-theme-dark .mud-drawer.app-drawer-modern,
html.mud-theme-dark .mud-drawer.app-drawer-modern .mud-drawer-content,
html[data-sigepef-theme="dark"] .mud-drawer.app-drawer-modern,
html[data-sigepef-theme="dark"] .mud-drawer.app-drawer-modern .mud-drawer-content {
    background: #0f172a !important;
    color: #e2e8f0;
    border-right-color: #1e293b;
}

html.mud-theme-dark .mud-drawer.app-drawer-modern .app-drawer-brand-text,
html.mud-theme-dark .mud-drawer.app-drawer-modern .mud-nav-link,
html.mud-theme-dark .mud-drawer.app-drawer-modern .mud-nav-link-text,
html.mud-theme-dark .mud-drawer.app-drawer-modern .nav-modulos-titulo,
html[data-sigepef-theme="dark"] .mud-drawer.app-drawer-modern .app-drawer-brand-text,
html[data-sigepef-theme="dark"] .mud-drawer.app-drawer-modern .mud-nav-link,
html[data-sigepef-theme="dark"] .mud-drawer.app-drawer-modern .mud-nav-link-text,
html[data-sigepef-theme="dark"] .mud-drawer.app-drawer-modern .nav-modulos-titulo {
    color: #e2e8f0;
}

html.mud-theme-dark .mud-drawer .mud-nav-group > button.mud-nav-link .mud-nav-link-text,
html[data-sigepef-theme="dark"] .mud-drawer .mud-nav-group > button.mud-nav-link .mud-nav-link-text,
html.mud-theme-dark .app-drawer-credito-linea,
html.mud-theme-dark .app-drawer-credito-version,
html[data-sigepef-theme="dark"] .app-drawer-credito-linea,
html[data-sigepef-theme="dark"] .app-drawer-credito-version {
    color: #94a3b8;
}

html.mud-theme-dark .mud-drawer .mud-nav-link:hover,
html.mud-theme-dark .mud-drawer .mud-nav-link:hover .mud-nav-link-text,
html[data-sigepef-theme="dark"] .mud-drawer .mud-nav-link:hover,
html[data-sigepef-theme="dark"] .mud-drawer .mud-nav-link:hover .mud-nav-link-text {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

html.mud-theme-dark .mud-drawer .mud-nav-link.active,
html.mud-theme-dark .mud-drawer .mud-nav-link.mud-selected,
html.mud-theme-dark .mud-drawer .nav-modulo.active,
html.mud-theme-dark .mud-drawer .nav-modulo.mud-selected,
html.mud-theme-dark .mud-drawer .mud-nav-link.active .mud-nav-link-text,
html.mud-theme-dark .mud-drawer .mud-nav-link.mud-selected .mud-nav-link-text,
html[data-sigepef-theme="dark"] .mud-drawer .mud-nav-link.active,
html[data-sigepef-theme="dark"] .mud-drawer .mud-nav-link.mud-selected,
html[data-sigepef-theme="dark"] .mud-drawer .nav-modulo.active,
html[data-sigepef-theme="dark"] .mud-drawer .nav-modulo.mud-selected,
html[data-sigepef-theme="dark"] .mud-drawer .mud-nav-link.active .mud-nav-link-text,
html[data-sigepef-theme="dark"] .mud-drawer .mud-nav-link.mud-selected .mud-nav-link-text {
    background-color: rgba(37, 99, 235, 0.22) !important;
    color: #bfdbfe !important;
}