/**
 * Clinaltec - Estilos personalizados
 * Basado en la plantilla Velonic con la paleta de colores institucional
 */

:root {
    /* Colores primarios */
    --primary-yellow: #ffd206;
    --primary-purple: #662483;

    /* Colores secundarios */
    --secondary-pink: #e4267e;
    --secondary-orange: #ef7d31;
    --secondary-green: #aac337;
    --secondary-blue: #1d71b8;

    /* Colores neutros y auxiliares */
    --light-bg: #f7f7f7;
    --border-color: #e5e5e5;
    --text-muted: #6c757d;
}

/* ========== Elementos generales ========== */

/* Colores de texto */
.text-primary {
    color: var(--primary-purple) !important;
}

.text-secondary {
    color: var(--secondary-pink) !important;
}

.text-success {
    color: var(--secondary-green) !important;
}

.text-info {
    color: var(--secondary-blue) !important;
}

.text-warning {
    color: var(--primary-yellow) !important;
}

.text-danger {
    color: var(--secondary-pink) !important;
}

.text-orange {
    color: var(--secondary-orange) !important;
}

/* Fondos de color */
.bg-primary {
    background-color: var(--primary-purple) !important;
}

.bg-secondary {
    background-color: var(--secondary-pink) !important;
}

.bg-success {
    background-color: var(--secondary-green) !important;
}

.bg-info {
    background-color: var(--secondary-blue) !important;
}

.bg-warning {
    background-color: var(--primary-yellow) !important;
}

.bg-danger {
    background-color: var(--secondary-pink) !important;
}

.bg-orange {
    background-color: var(--secondary-orange) !important;
}

.bg-purple-light {
    background-color: rgba(102, 36, 131, 0.1) !important;
}

.bg-yellow-light {
    background-color: rgba(255, 210, 6, 0.1) !important;
}

/* Botones */
.btn-primary {
    background-color: var(--primary-purple) !important;
    border-color: var(--primary-purple) !important;
    color: white !important;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: #552070 !important;
    border-color: #552070 !important;
}

.btn-soft-primary {
    background-color: rgba(102, 36, 131, 0.1) !important;
    color: var(--primary-purple) !important;
    border-color: transparent !important;
}

.btn-soft-primary:hover {
    background-color: var(--primary-purple) !important;
    color: white !important;
}

.btn-secondary {
    background-color: var(--secondary-pink) !important;
    border-color: var(--secondary-pink) !important;
}

.btn-soft-secondary {
    background-color: rgba(228, 38, 126, 0.1) !important;
    color: var(--secondary-pink) !important;
    border-color: transparent !important;
}

.btn-soft-secondary:hover {
    background-color: var(--secondary-pink) !important;
    color: white !important;
}

.btn-success {
    background-color: var(--secondary-green) !important;
    border-color: var(--secondary-green) !important;
}

.btn-info {
    background-color: var(--secondary-blue) !important;
    border-color: var(--secondary-blue) !important;
}

.btn-warning {
    background-color: var(--primary-yellow) !important;
    border-color: var(--primary-yellow) !important;
    color: #212529 !important;
}

.btn-outline-primary {
    color: var(--primary-purple) !important;
    border-color: var(--primary-purple) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-purple) !important;
    color: white !important;
}

/* Badges */
.badge.bg-primary {
    background-color: var(--primary-purple) !important;
}

.badge.bg-secondary {
    background-color: var(--secondary-pink) !important;
}

.badge.bg-success {
    background-color: var(--secondary-green) !important;
}

.badge.bg-info {
    background-color: var(--secondary-blue) !important;
}

.badge.bg-warning {
    background-color: var(--primary-yellow) !important;
    color: #212529;
}

/* ========== Login y Autenticación ========== */

/* Fondo de autenticación */
.authentication-bg {
    background-color: var(--light-bg);
    background-image: linear-gradient(45deg, rgba(102, 36, 131, 0.1), rgba(255, 210, 6, 0.1));
}

/* Tarjetas */
.card {
    border-top: 4px solid var(--primary-purple);
    border-radius: 0.5rem;
}

.card .card-header {
    background-color: white;
    border-bottom-color: var(--border-color);
}

/* Inputs */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 0.15rem rgba(102, 36, 131, 0.25);
}

.custom-input-container {
    position: relative;
}

.custom-input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-purple);
    font-size: 18px;
}

.input-with-icon {
    padding-left: 45px;
}

.form-check-input:checked {
    background-color: var(--primary-purple);
    border-color: var(--primary-purple);
}

/* ========== Ajustes para inputs más pequeños ========== */
.form-control,
.form-select {

    /* Barra superior */
    .navbar-custom {
        background-color: var(--primary-purple);
    }

    .navbar-custom .logo-box {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .navbar-custom .nav-link {
        color: rgba(255, 255, 255, 0.8) !important;
    }

    .navbar-custom .nav-link:hover {
        color: white !important;
    }

    .navbar-custom .dropdown-menu {
        border-top: 3px solid var(--primary-yellow);
    }

    /* Sidebar */
    .left-side-menu {
        background-color: #ffffff;
        border-right: 1px solid var(--border-color);
    }

    #sidebar-menu>ul>li>a.active {
        color: var(--primary-purple);
        background-color: rgba(102, 36, 131, 0.1);
        border-left: 3px solid var(--primary-purple);
    }

    #sidebar-menu>ul>li>a:hover {
        color: var(--primary-purple);
    }

    #sidebar-menu>ul>li>a>i {
        color: var(--text-muted);
    }

    #sidebar-menu>ul>li>a.active>i {
        color: var(--primary-purple);
    }

    /* Menú de segundo nivel */
    .nav-second-level>li>a:hover,
    .nav-second-level>li>a:focus,
    .nav-second-level>li>a.active {
        color: var(--primary-purple);
    }

    /* ========== Componentes ========== */

    /* Alertas */
    .alert-primary {
        background-color: rgba(102, 36, 131, 0.15);
        border-color: rgba(102, 36, 131, 0.3);
        color: var(--primary-purple);
    }

    .alert-secondary {
        background-color: rgba(228, 38, 126, 0.15);
        border-color: rgba(228, 38, 126, 0.3);
        color: var(--secondary-pink);
    }

    .alert-success {
        background-color: rgba(170, 195, 55, 0.15);
        border-color: rgba(170, 195, 55, 0.3);
        color: #3c5212;
    }

    .alert-info {
        background-color: rgba(29, 113, 184, 0.15);
        border-color: rgba(29, 113, 184, 0.3);
        color: var(--secondary-blue);
    }

    .alert-warning {
        background-color: rgba(255, 210, 6, 0.15);
        border-color: rgba(255, 210, 6, 0.3);
        color: #856404;
    }

    /* Tabs */
    .nav-tabs .nav-link.active {
        color: var(--primary-purple);
        border-bottom: 2px solid var(--primary-purple);
    }

    .nav-tabs .nav-link:hover {
        color: var(--primary-purple);
    }

    /* Paginación */
    .page-item.active .page-link {
        background-color: var(--primary-purple);
        border-color: var(--primary-purple);
    }

    .page-link {
        color: var(--primary-purple);
    }

    .page-link:hover {
        color: #552070;
    }

    /* Progreso */
    .progress-bar {
        background-color: var(--primary-purple);
    }

    /* Tablas */
    .table-primary {
        --bs-table-bg: rgba(102, 36, 131, 0.1);
        --bs-table-color: var(--primary-purple);
    }

    /* Modales */
    .modal-header {
        border-top: 4px solid var(--primary-purple);
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

    /* ========== Elementos decorativos ========== */

    /* Círculos decorativos para usar con position:absolute */
    .circle-primary-yellow {
        width: 80px;
        height: 80px;
        background-color: var(--primary-yellow);
        border-radius: 50%;
        opacity: 0.8;
    }

    .circle-primary-purple {
        width: 60px;
        height: 60px;
        background-color: var(--primary-purple);
        border-radius: 50%;
        opacity: 0.8;
    }

    .circle-secondary-green {
        width: 40px;
        height: 40px;
        background-color: var(--secondary-green);
        border-radius: 50%;
        opacity: 0.7;
    }

    .circle-secondary-pink {
        width: 50px;
        height: 50px;
        background-color: var(--secondary-pink);
        border-radius: 50%;
        opacity: 0.7;
    }

    .circle-secondary-blue {
        width: 45px;
        height: 45px;
        background-color: var(--secondary-blue);
        border-radius: 50%;
        opacity: 0.7;
    }

    .circle-secondary-orange {
        width: 55px;
        height: 55px;
        background-color: var(--secondary-orange);
        border-radius: 50%;
        opacity: 0.7;
    }

    /* ========== Footer ========== */

    .footer {
        border-top: 0px solid var(--border-color);
    }

    .footer a {
        color: var(--primary-purple);
        text-decoration: none;
    }

    .footer a:hover {
        text-decoration: underline;
    }

    /* ========== Utilidades ========== */

    /* Bordes con colores de la marca */
    .border-primary {
        border-color: var(--primary-purple) !important;
    }

    .border-secondary {
        border-color: var(--secondary-pink) !important;
    }

    .border-warning {
        border-color: var(--primary-yellow) !important;
    }

    .border-success {
        border-color: var(--secondary-green) !important;
    }

    .border-info {
        border-color: var(--secondary-blue) !important;
    }

    .border-orange {
        border-color: var(--secondary-orange) !important;
    }

    /* Sombras y efectos */
    .shadow-purple {
        box-shadow: 0 0.5rem 1rem rgba(102, 36, 131, 0.15) !important;
    }

    .hover-shadow:hover {
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        transition: all 0.3s ease;
    }

    /* ========== Ajustes para dispositivos móviles ========== */
    @media (max-width: 767.98px) {
        .navbar-custom {
            padding: 0 10px;
        }

        .custom-input-icon {
            font-size: 16px;
        }

        .input-with-icon {
            padding-left: 40px;
        }
    }

    /* Estilo para el botón de menú hamburguesa */
    .button-toggle-menu {
        color: white !important;
    }

    .button-toggle-menu i {
        color: white !important;
        font-size: 22px;
    }

    /* Estilo para las líneas del botón de menú horizontal */
    .navbar-toggle .lines {
        color: white !important;
    }

    .navbar-toggle .lines span {
        background-color: white !important;
    }

    /* Ajuste para el botón toggle en modo móvil */
    .navbar-custom .navbar-toggle {
        color: white !important;
    }

    /* Sobrescribir estilos de Velonic para el menú lateral activo */

    /* Estilos para enlaces activos del primer nivel */
    .side-nav>li>a.active,
    .side-nav .side-nav-link.active,
    .side-nav-item a.active,
    #sidebar-menu>ul>li>a.active,
    .left-side-menu .side-nav>li>a.active,
    .left-side-menu #sidebar-menu>ul>li>a.active {
        color: #aac337 !important;
        background-color: rgba(170, 195, 55, 0.1) !important;
        border-left: 3px solid #aac337 !important;
    }

    /* Asegurarse de que los íconos también tomen el color correcto */
    .side-nav>li>a.active i,
    .side-nav .side-nav-link.active i,
    .side-nav-item a.active i,
    #sidebar-menu>ul>li>a.active i,
    .left-side-menu .side-nav>li>a.active i {
        color: #aac337 !important;
    }

    /* Estilos para enlaces de segundo nivel */
    .side-nav-second-level li a.active,
    .side-nav-second-level li a:active,
    .side-nav-second-level li a:focus,
    .nav-second-level li a.active,
    #sidebar-menu>ul>li>ul>li>a.active {
        color: #aac337 !important;
    }

    /* Asegurarse de que al pasar el mouse también use el color verde */
    .side-nav>li>a:hover,
    .side-nav .side-nav-link:hover,
    .side-nav-item a:hover,
    #sidebar-menu>ul>li>a:hover {
        color: #aac337 !important;
    }

    /* Asegurarse de que los íconos al pasar el mouse también cambien de color */
    .side-nav>li>a:hover i,
    .side-nav .side-nav-link:hover i,
    .side-nav-item a:hover i,
    #sidebar-menu>ul>li>a:hover i {
        color: #aac337 !important;
    }
}

/* ========== Data Table Styling ========== */

/* Header styling */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 15px;
}

/* Table header */
table.dataTable thead th {
    background-color: rgba(102, 36, 131, 0.05);
    border-bottom: 2px solid var(--primary-purple) !important;
    font-weight: 600;
    padding: 12px 10px;
}

/* Hover effect on rows */
table.dataTable tbody tr:hover {
    background-color: rgba(170, 195, 55, 0.05) !important;
}

/* Pagination buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--primary-purple) !important;
    color: white !important;
    border-color: var(--primary-purple) !important;
    border-radius: 4px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: rgba(102, 36, 131, 0.1) !important;
    color: var(--primary-purple) !important;
    border-color: transparent !important;
}

/* Search input */
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px 10px;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--primary-purple);
    box-shadow: 0 0 0 0.15rem rgba(102, 36, 131, 0.25);
    outline: none;
}

/* Stripped rows */
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: rgba(247, 247, 247, 0.5);
}

/* Info text */
.dataTables_wrapper .dataTables_info {
    color: var(--text-muted);
    padding-top: 15px;
}

/* Responsive table */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    background-color: var(--primary-purple);
}

/* Fix for responsive table width */
.table-responsive {
    width: 100%;
    overflow-x: auto;
}

table.dataTable {
    width: 100% !important;
}

/* Fix for DataTables container width */
.dataTables_wrapper {
    width: 100%;
    overflow: hidden;
}

/* Ensure cells don't wrap text unnecessarily */
table.dataTable td,
table.dataTable th {
    white-space: nowrap;
}

/* Give priority to important columns in responsive view */
@media screen and (max-width: 767px) {

    table.dataTable.responsive.priority-columns thead,
    table.dataTable.responsive.priority-columns tfoot {
        display: none;
    }

    table.dataTable.responsive.priority-columns td {
        display: block;
        width: 100%;
    }

    /* Keep the most important columns visible */
    table.dataTable.responsive.priority-columns td:nth-child(1),
    table.dataTable.responsive.priority-columns td:nth-child(3),
    table.dataTable.responsive.priority-columns td:nth-child(5) {
        background: rgba(102, 36, 131, 0.05);
    }
}


/* Estilos adicionales para garantizar scroll horizontal en móviles */
@media screen and (max-width: 767px) {

    /* Forzar el comportamiento de scroll táctil en móviles */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
        display: block;
    }

    /* Asegurar que DataTables no interfiera con el scroll */
    .dataTables_wrapper {
        overflow: visible !important;
        width: 100% !important;
        padding-bottom: 15px;
    }

    /* Asegurar que la tabla tenga un ancho mínimo para forzar scroll */
    table.dataTable {
        min-width: 650px;
        width: 100% !important;
    }

    /* Eliminar cualquier propiedad que pueda interferir */
    .dataTables_scrollBody,
    .dataTables_wrapper .dataTables_scroll {
        overflow: visible !important;
    }

    /* Ajustar tamaño de texto para mejor visualización en móviles */
    table.dataTable td,
    table.dataTable th {
        padding: 8px 10px;
        font-size: 0.9rem;
    }

    /* Mejorar la visualización de los botones en vista móvil */
    table.dataTable td .btn-sm {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Estilo adicional para deshabilitar transformaciones en el contenedor */
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody {
    transform: none !important;
}

/* Añadir indicador visual de scroll horizontal */
@media screen and (max-width: 767px) {
    .table-responsive::after {
        content: "≪ Desliza ≫";
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        color: #662483;
        font-size: 0.8rem;
        opacity: 0.8;
        pointer-events: none;
    }
}