/* Estilos personalizados para el panel de administración de Olé Consulting */

/* Espacio entre contenido y footer para todas las páginas de administración */
#admin-content {
    min-height: calc(100vh - 350px); /* Altura mínima para dar espacio */
    margin-bottom: 2rem; /* Margen reducido para móviles */
    margin-top: 1rem; /* Margen superior reducido para móviles */
}

/* Media query para tablets */
@media (min-width: 768px) and (max-width: 991px) {
    #admin-content {
        margin-bottom: 3rem;
        margin-top: 2rem;
    }
}

/* Media query para escritorio */
@media (min-width: 992px) {
    #admin-content {
        margin-bottom: 6rem; /* Margen adicional antes del footer en escritorio */
        margin-top: 6rem; /* Margen superior para separar del navbar en escritorio */
    }
}

/* Ajuste específico para la página de listado de usuarios */
.admin-users-list {
    padding-top: 1rem; /* Padding adicional solo para la lista de usuarios */
}

/* Ajuste específico para la página de gestión de leads */
#admin-content.container-fluid {
    max-width: 95%; /* Mayor ancho para tablas con muchas columnas */
    margin-left: auto;
    margin-right: auto;
}

/* Espaciado específico para el formulario de creación/edición de usuarios */
.users-form-container {
    margin-top: 6rem; /* Añade un margen grande para separar del navbar */
    margin-bottom: 4rem; /* Añade espacio inferior */
}

/* Estilos para elementos arrastrables en la tabla de redes sociales */
.drag-handle {
    cursor: grab;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border-radius: 4px;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
}

.drag-handle:hover {
    background-color: #e9ecef;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.drag-handle i {
    margin-right: 5px;
    color: #6c757d;
}

.network-item.sortable-chosen {
    background-color: #f8f9fa;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.network-item.sortable-ghost {
    opacity: 0.5;
}

/* Estilo para los iconos sociales */
.social-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
}

/* Estilo para el botón de usuario en la barra de navegación */
.btn-user-nav {
    background-color: #6c757d; /* Gris Bootstrap */
    color: #fff !important; /* Texto blanco forzado */
    border-radius: 50px !important; /* Forma ovalada */
    padding: 0.375rem 1rem !important;
    margin-top: 0.125rem;
    margin-bottom: 0.125rem;
    border: none !important;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    line-height: 1.5;
    font-weight: 400;
}

.btn-user-nav:hover,
.btn-user-nav:focus,
.btn-user-nav:active,
.btn-user-nav.active,
.btn-user-nav.show {
    background-color: #5a6268 !important; /* Un gris más oscuro al hacer hover */
    color: #fff !important; /* Mantener el texto blanco */
    text-decoration: none;
    box-shadow: 0 0 0 0.25rem rgba(108, 117, 125, 0.25);
}

/* Paleta de colores del proyecto */
:root {
    --ole-purple: #8A2BE2; /* Violeta principal */
    --ole-pink: #FF69B4;   /* Rosa para acentos */
    --ole-success: #28a745; /* Verde para éxito (se mantiene) */
    --ole-danger: #dc3545;  /* Rojo para peligro (se mantiene) */
    --ole-info: #17a2b8;    /* Azul para información */
    --ole-warning: #ffc107; /* Amarillo para advertencias */
    --ole-gray: #6c757d;    /* Gris para estado inactivo */
    --ole-orange: #ed1793; /* Naranja corporativo para editar */
    --ole-dark-orange: #b200f7;
}

/* ---- Estilos para botones de acción en tablas ---- */

/* Botón Editar (Amarillo/Naranja) */
.btn-edit-custom {
    color: #fff;
    background-color: var(--ole-orange);
    background-image: linear-gradient(180deg, var(--ole-orange) 10%, var(--ole-dark-orange) 100%);
    background-size: 100% 200%;
    background-position: 0 0;
    border: none;
    transition: background-position .2s;
}
.btn-edit-custom:hover {
    color: #fff;
    background-position: 0 100%;
}

/* Botón Activo (Magenta) */
.btn-active-custom {
    background-color: #ed1793;
    border-color: #ed1793;
    color: #fff;
}
.btn-active-custom:hover {
    background-color: #c51077; /* Un poco más oscuro */
    border-color: #b3006b;
    color: #fff;
}

/* Botón Inactivo (Gris) */
.btn-inactive-custom {
    background-color: var(--ole-gray);
    border-color: var(--ole-gray);
    color: #fff;
}
.btn-inactive-custom:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: #fff;
}

/* Botón Eliminar (Rojo - se mantiene el de Bootstrap) */
.btn-delete-custom {
    background-color: var(--ole-danger);
    border-color: var(--ole-danger);
    color: #fff;
}
.btn-delete-custom:hover {
    background-color: #c82333;
    border-color: #bd2130;
    color: #fff;
}


/* ---- Estilos para Alertas Bootstrap ---- */

.alert-success {
    background-color: var(--ole-success);
    color: #fff;
    border-color: var(--ole-success);
}

.alert-danger {
    background-color: var(--ole-danger);
    color: #fff;
    border-color: var(--ole-danger);
}

.alert-warning {
    background-color: var(--ole-warning);
    color: #212529;
    border-color: var(--ole-warning);
}

.alert-info {
    background-color: var(--ole-purple);
    color: #fff;
    border-color: var(--ole-purple);
}