/* Fuentes y Tipografía */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,400;0,700;1,400&display=swap');

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    color: #0f172a; /* slate-900 */
}

/* Si usas tarjetas (cards) para el contenido, asegúrate que sean blancas */
.card, .bg-white {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}

.serif-title {
    font-family: 'Lora', serif;
}

/* Scrollbar personalizada minimalista */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #e2e8f0;
    border-radius: 10px;
}

/* Efecto de brillo para el logo */
.bulb-glow {
    filter: drop-shadow(0 0 3px rgba(250, 204, 21, 0.6));
}

/* Animación para el menú lateral en móvil */
#mobile-sidebar {
    transition: transform 0.3s ease-in-out;
}

    #mobile-sidebar.hidden-sidebar {
        transform: translateX(-100%);
    }

/* Estilos para el Tab Bar Inferior (Solo móvil) */
.mobile-tab-bar {
    box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
}

/* Estilos para el Modal */
.modal-overlay {
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
}

#modal-content-wrapper {
    max-height: 70vh;
    overflow-y: auto;
}

/* Estilo para navegadores Chrome, Safari y Edge */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px; /* Scrollbar muy finito */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent; /* Fondo invisible */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #cbd5e1; /* Color gris suave (slate-300) */
    border-radius: 20px; /* Bordes redondeados */
}

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background-color: #94a3b8; /* Un poco más oscuro al pasar el mouse */
    }

/* Estilo para Firefox */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

/* 1. Forzamos el fondo oscuro en el body */
body {
    background-color: #e2e8f0 !important; /* Gris visible para la prueba */
}

/* 2. Hacemos que los "paneles" que tapan el body sean transparentes */
/* Esto busca los contenedores principales de ASP.NET y Blazor */
main,
.container,
.container-fluid,
.content,
.main-content,
#app,
.page {
    background-color: transparent !important;
}

/* 3. El Header debe seguir siendo blanco para que se note el corte */
header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #cbd5e1 !important;
    z-index: 50;
}

/* Forzamos que el fondo de la página de Identity sea transparente para ver el body */
.flex.flex-1.h-\[calc\(100vh-64px\)\] {
    background-color: transparent !important;
}

/* El contenedor que limita el ancho debe ser el que tenga el color o ser transparente */
.max-w-\[1600px\] {
    background-color: transparent !important;
}

/* En app.css */
aside.hidden.lg\:flex {
    background-color: transparent !important;
}

/* Y para que el contenido central resalte, asegúrate de que sea blanco puro */
main.flex-1.bg-white {
    background-color: #ffffff !important;
}

/* Clase estándar para todos los inputs de la plataforma */
/* gpi-input Versión 2 con Borde Estructural */
.gpi-input {
    width: 100%;
    padding: 0.75rem 1rem;
    /* Fondo un poco más claro que antes para que el borde resalte */
    background-color: #f1f5f9 !important; /* Slate-100 */
    /* Borde estructural */
    border: 1px solid #cbd5e1 !important; /* Slate-300 */
    border-radius: 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    transition: all 0.2s ease-in-out !important;
    outline: none !important;
}

/* 2. Ajustes EXCLUSIVOS para el Textarea */
/* Esto solo se activará si la etiqueta es textarea Y tiene la clase gpi-input */
textarea.gpi-input {
    min-height: 120px !important; /* Solo el textarea será alto */
    resize: vertical !important; /* Solo el textarea se podrá estirar */
    line-height: 1.5 !important;
}

/* Efecto de Foco: El borde se vuelve azul y más grueso visualmente */
.gpi-input:focus {
    background-color: #ffffff !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    border-width: 1px !important;
}

/* Estilo específico para Inputs Deshabilitados (Ej: Username) */
.gpi-input:disabled, .gpi-input[readonly] {
    background-color: #e2e8f0 !important; /* Slate-200 (más oscuro) */
    border: 1px dashed #94a3b8 !important; /* Borde punteado para indicar 'bloqueo' */
    color: #64748b !important; /* Texto más suave */
    cursor: not-allowed !important; /* Cursor de prohibido */
    opacity: 0.8;
}

/* Redondear la parte superior de la barra de herramientas de Quill */
.ql-toolbar.ql-snow {
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    border-color: #e2e8f0; /* Color pizarra suave como tu modal */
    background-color: #f8fafc;
}

/* Redondear la parte inferior del contenedor del editor */
.ql-container.ql-snow {
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border-color: #e2e8f0;
    min-height: 150px; /* Altura mínima cómoda */
    font-size: 14px;
}

/* Animación personalizada para la barra de progreso del Toast (Izquierda a Derecha) */
@keyframes toast-progress-ltr {
    0% {
        transform: scaleX(1);
        opacity: 1;
    }

    99% {
        opacity: 1;
    }

    100% {
        transform: scaleX(0);
        opacity: 0;
    }
}

.animate-toast-progress {
    /* Forzamos el origen en la esquina inferior izquierda */
    transform-origin: 0% 50%;
    /* Aplicamos la animación personalizada */
    animation: toast-progress-ltr 4s linear forwards;
    /* Optimizaciones de renderizado para GPU */
    will-change: transform, opacity;
    backface-visibility: hidden;
    /* Aseguramos que la barra comience llena */
    transform: scaleX(1);
}