html, body {
    font-family: 'Inter', sans-serif !important;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #f3f4f6; /* Gris suave de fondo para toda la app */
}

/* Quitar borde azul al hacer clic */
button:focus {
    outline: none;
}

/* Asegurar que la app ocupe toda la pantalla */
#app {
    height: 100%;
}
/* app.css */
:root {
    /* Tu color corporativo principal (ej. Azul oscuro) */
    --rz-primary: #004aad;
    --rz-primary-light: #4d7cc4; /* Una versión más clara para hovers */
    --rz-primary-dark: #002e6b; /* Una versión más oscura para clicks */
    --rz-on-primary: #ffffff; /* Color del texto sobre el primario */
    /* Tu color secundario (ej. Naranja para acciones de llamada) */
    --rz-secondary: #ff8c00;
    --rz-on-secondary: #ffffff;
    /* Opcional: Cambiar el radio de los bordes de botones y cards */
    --rz-border-radius: 6px;
}


/*NUEVO*/
/* Animación de entrada para el contenido */
.rz-body {
    animation: fade-in 1s ease-out forwards;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
body, .rz-layout {
    background-color: #f3f4f6 !important; /* Gris suave corporativo */
}

/* Y asegúrate de que tus cards tengan sombra suave */
.rz-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    border: none !important; /* Quita el borde gris feo si lo hay */
}







/* 1. FONDO GLOBAL SUAVE */
body, #app, .rz-layout {
    background-color: #f8fafc !important; /* Gris muy, muy suave (Slate-50) */
}

/* 2. SIDEBAR TRANSPARENTE Y LIMPIO */
.rz-sidebar {
    background-color: transparent !important; /* El sidebar flota sobre el fondo */
    box-shadow: none !important; /* Quitamos sombras duras */
}

.rz-panel-menu {
    background-color: transparent !important;
}

/* --- TÍTULOS DE SECCIÓN (NAVEGACIÓN, ETC.) --- */
.menu-section-label {
    color: #64748b; /* Gris azulado más legible que el gris claro de antes */
    font-size: 0.75rem; /* Tamaño pequeño pero legible */
    font-weight: 800; /* Muy negrita (Extra Bold) */
    letter-spacing: 1.5px; /* Separación de letras para elegancia */
    text-transform: uppercase;
    margin-bottom: 8px;
    margin-top: 20px;
    padding-left: 12px; /* Alineado con el texto de los botones */
    display: block;
}

/* --- ÍTEMS DEL MENÚ ESTILO "TARJETA/PÍLDORA" --- */
.rz-panel-menu-item-content {
    border-radius: 12px !important; /* Bordes redondeados pero no completamente redondos (estilo iOS) */
    margin: 6px 10px !important; /* Separación entre ítems */
    padding: 10px 16px !important; /* Más relleno para dar "cuerpo" al botón */
    transition: all 0.2s ease;
    font-weight: 500;
    /* ESTADO NORMAL: Sutilmente "caja" */
    background-color: transparent;
    border: 1px solid transparent; /* Reservamos espacio para el borde */
    color: #475569 !important;
}

    /* HOVER: Se convierte en una tarjeta suave */
    .rz-panel-menu-item-content:hover {
        background-color: #f8fafc !important; /* Fondo casi blanco */
        border-color: #e2e8f0 !important; /* Borde gris suave */
        color: var(--rz-primary) !important;
        transform: translateX(4px); /* Pequeño desplazamiento a la derecha */
    }

/* ACTIVO: Píldora sólida y destacada */
.rz-navigation-item-link-active {
    background-color: var(--rz-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px -2px rgba(var(--rz-primary-rgb), 0.4) !important; /* Sombra de color */
    border-color: transparent !important;
}

    .rz-navigation-item-link-active .rz-navigation-item-icon,
    .rz-navigation-item-link-active .rz-navigation-item-text {
        color: #ffffff !important;
    }

/* Iconos del menú un poco más grandes */
.rz-navigation-item-icon {
    font-size: 1.25rem !important;
    margin-right: 12px !important;
    opacity: 0.8;
}


/* 4. HEADER INTEGRADO */
.rz-header {
    background-color: transparent !important; /* Header transparente */
    box-shadow: none !important; /* Sin sombra */
    border: none !important; /* Sin borde inferior */
}

/* 5. REDONDEAR TARJETAS DEL CONTENIDO */
.rz-card {
    border-radius: 24px !important; /* Bordes muy redondeados (estilo iOS/Modern) */
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    border: none !important;
}



.notification-circle {
    width: 42px;
    height: 42px;
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #e2e8f0; /* Borde sutil */
    border-radius: 50%; /* Círculo perfecto */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03); /* Sombra suave */
}

    .notification-circle:hover {
        background-color: #f8fafc;
        border-color: #cbd5e1;
        transform: translateY(-1px); /* Efecto de "pulsar" hacia arriba */
        box-shadow: 0 4px 6px rgba(0,0,0,0.08);
    }

/* Cápsula de usuario */
.user-capsule {
    display: flex;
    align-items: center;
    background-color: #ffffff; /* BLANCO PURO para destacar sobre el fondo gris de la app */
    padding: 6px 12px 6px 6px; /* Un poco más grande el padding */
    border-radius: 40px; /* Muy redondeado */
    border: 1px solid #e2e8f0; /* Borde para definir límites */
    /* LA CLAVE: Una sombra más fuerte para que "flote" */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.2s ease;
    cursor: pointer;
}

    .user-capsule:hover {
        border-color: var(--rz-primary-light); /* Borde azulado al pasar el ratón */
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
        transform: translateY(-1px);
    }

/* Tipografía dentro de la cápsula */
.user-name {
    font-size: 0.9rem;
    font-weight: 700; /* Más negrita */
    color: #1e293b; /* Gris casi negro */
    line-height: 1.2;
}

.user-role {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748b; /* Gris medio */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.avatar-circle-small {
    width: 32px;
    height: 32px;
    background-color: var(--rz-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
}


/* --- SIDEBAR FLOTANTE (Modo Columna Izquierda Completa) --- */
@media (min-width: 768px) {
    .sidebar-floating {
        background-color: #ffffff !important;
        /* Márgenes para que "flote" centrado verticalmente */
        margin-left: 20px !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
        /* Altura: 100vh menos los márgenes de arriba (20) y abajo (20) = 40px */
        height: calc(100vh - 40px) !important;
        border-radius: 24px !important;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01) !important;
        border: none !important;
        z-index: 1000 !important;
    }

    /* Ajuste para que el layout de Radzen entienda que el sidebar va a la izq */
    .rz-layout {
        /* Aseguramos que el fondo se vea detrás de los huecos */
        background-color: #f8fafc !important;
    }
}
/* En MÓVIL, queremos que ocupe todo el alto como siempre */
@media (max-width: 767px) {
    .sidebar-floating {
        height: 100% !important;
        box-shadow: 5px 0 15px rgba(0,0,0,0.1) !important;
    }
}

/* --- BARRA DE BÚSQUEDA (ESTILO HEITKAMP) --- */
.search-bar-container {
    background-color: #ffffff;
    border-radius: 30px;
    padding: 6px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    border: 1px solid #e2e8f0;
    width: 300px; /* Ancho fijo o variable */
    transition: all 0.2s;
}

    .search-bar-container:focus-within {
        border-color: var(--rz-primary);
        box-shadow: 0 4px 12px rgba(var(--rz-primary-rgb), 0.1);
    }

.search-input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    color: #475569;
    font-size: 0.9rem;
}

/* Color del resaltado */
mark.custom-highlight {
    background-color: #fde047; /* Amarillo intenso pero moderno */
    color: #000000;
    border-radius: 2px;
    padding: 0 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    font-weight: bold;
}



/* --- MEJORAS VISUALES DE LA TABLA --- */

/* 1. Iconos de Acción (Editar/Borrar) más grandes y centrados */
.action-icon-btn {
    width: 38px !important; /* Botón más grande */
    height: 38px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .action-icon-btn .rz-button-icon-left {
        font-size: 1.3rem !important; /* Icono interior más grande */
        margin: 0 !important; /* Centrado perfecto */
    }

    .action-icon-btn:hover {
        background-color: #f1f5f9 !important; /* Fondo gris suave al pasar ratón */
    }

/* 2. Iconos del Filtro (Embudo) y Ordenación en Cabeceras */
.rz-grid-table thead th .rz-column-title {
    display: inline-flex;
    align-items: center;
}

/* El icono del filtro (embudo) */
.rz-grid-filter-icon {
    font-size: 1.2rem !important; /* Embudo más visible */
    color: #94a3b8 !important; /* Color gris medio */
    margin-left: 8px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

    .rz-grid-filter-icon:hover {
        background-color: #e2e8f0;
        color: var(--rz-primary) !important;
    }

/* Cuando la columna está filtrada, resaltar el embudo */
.rz-grid-filter-active {
    color: var(--rz-primary) !important;
    background-color: rgba(var(--rz-primary-rgb), 0.1);
}


/* --- SCROLLBARS MODERNOS --- */

/* Ancho de la barra */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

/* El "carril" de fondo */
::-webkit-scrollbar-track {
    background: transparent; /* Transparente para que se vea el fondo de la app */
}

/* El "pulgar" (lo que mueves) */
::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Gris suave (Slate-300) */
    border-radius: 10px; /* Redondeado */
    border: 2px solid transparent; /* Truco para dar margen */
    background-clip: content-box;
}

    /* Al pasar el ratón, se oscurece un poco */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #94a3b8;
    }



/* app.css - Opción SÓLIDA */
.rz-dialog-mask {
    backdrop-filter: none !important; /* Quitamos el efecto cristal */
    background-color: rgba(0, 0, 0, 0.6) !important; /* Fondo negro al 60% */
}

/* Para compensar, le damos una sombra más fuerte al modal para que destaque */
.rz-dialog {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Cabecera del diálogo más limpia */
.rz-dialog-titlebar {
    background-color: white !important;
    border-bottom: 1px solid #f1f5f9 !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 1.5rem !important;
}



/* Estilo para los mensajes de validación de Blazor */
.validation-message {
    color: var(--rz-danger); /* Usa el rojo oficial del tema de Radzen */
    font-size: 0.75rem; /* Texto pequeñito y elegante */
    margin-top: 4px; /* Un poco de aire respecto al input */
    font-weight: 500;
    /* Opcional: Añadir una animación suave */
    animation: fadeIn 0.3s ease-in-out;
}

/* Animación para que no aparezca de golpe */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*
    MODAL DE DETALLES DE SOLICITUD
*/
/* Colores suaves para fondos de alerta/info */
.bg-info-lighter {
    background-color: #f0f9ff;
}

.border-info {
    border: 1px solid #bae6fd !important;
}

/* Estilo de la línea de tiempo */
.timeline-item {
    position: relative;
    border-left: 2px solid #e2e8f0;
}

.timeline-marker {
    position: absolute;
    left: -7px;
    top: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #cbd5e1;
}

    .timeline-marker.approved {
        background: #22c55e;
        border: 2px solid #f0fdf4;
    }

    .timeline-marker.in-progress {
        background: #eab308;
        border: 2px solid #fefce8;
    }


/* Contenedor de identidad tipo "Píldora" */
.user-identity-capsule {
    transition: all 0.3s ease;
}

/* Ajuste del Avatar para el Header */
.avatar-circle-medium {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Tipografía y espaciado */
.letter-spacing-1 {
    letter-spacing: 1px;
}

.modal-header-container {
    background: linear-gradient(to right, #f8fafc, #f1f5f9);
}