table.dataTable tbody td {
    white-space: nowrap !important;
    font-size: 12px !important;
    vertical-align: middle !important; /* Alinea el texto verticalmente al centro */

}



.table>thead {
  vertical-align: bottom;
    white-space: nowrap !important;
   
}

.note-editable {
  font-size: 14px !important;
}

.addNewRecord {
    background-color: #363A40 !important;
    color: white !important;
}

.addNewRecordError {
    background-color: #eb3030 !important;
    color: white !important;
}

.addNewRecordCorrect {
    background-color: #2d50ec !important;
    color: white !important;
}

.buttons-excel{
    background-color: #363A40 !important;
    color: white !important;
}
.buttons-print{
    background-color: #363A40 !important;
    color: white !important;
}
.dt-button{
   padding-top: 5px !important;
   padding-bottom: 5px !important;
}

.sidebar-mini{
    height: 100vh !important;
}

.select2-container .select2-selection--single {
    height: 32px; /* Ajusta la altura del contenedor */
    font-size: 14px; /* Tamaño de fuente del texto */
}

.select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 22px; /* Ajusta la alineación vertical del texto */
}

.select2-container .select2-selection--single .select2-selection__arrow {
    height: 22px; /* Ajusta la altura de la flecha */
}

/* Estilo para el dropdown de opciones */
.select2-container .select2-results__option {
    font-size: 12px; /* Tamaño de fuente de las opciones del dropdown */
}

/* Estilo para la barra de búsqueda de Select2 */
.select2-container--default .select2-search--dropdown .select2-search__field {
    font-size: 12px; /* Tamaño de fuente del texto en la barra de búsqueda */
    height: 32px; /* Altura de la barra de búsqueda */
    padding: 6px; /* Espaciado interno de la barra de búsqueda */
}

/* En custom.css - Asegúrate de que este archivo se cargue DESPUÉS de adminlte.min.css */



/* 4. Cambiar el color de los botones con clase .btn-primary */
.btn-primary {
     background: linear-gradient(90deg, #7C3AED, #4F46E5);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
    
}
/* Estilos para el hover/focus/active de los botones primary */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.focus,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
    background-color: darken(#0c62b3, 5%) !important; /* Un poco más oscuro al interactuar */
    border-color: darken(#0c62b3, 7%) !important;
}

/* 5. Cambiar el color de los enlaces activos en el sidebar si usan bg-primary para ellos */
/* Estos selectores son más específicos para AdminLTE */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active.bg-primary,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link.active.bg-primary {
    background-color: #0c62b3 !important;
    color: #ffffff !important; /* Asegura el color del texto si el fondo es oscuro */
}
/* Asegurar que el texto y el icono dentro del enlace activo también sean blancos */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active.bg-primary p,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link.active.bg-primary p,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active.bg-primary .nav-icon,
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-treeview > .nav-item > .nav-link.active.bg-primary .nav-icon {
    color: #ffffff !important;
}


/* Cambiar el color de fondo y texto al hacer hover, focus y active */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary.focus,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle {
    color: #fff; /* Texto blanco al hacer hover/active */
    background-color: #0c62b3; /* Fondo con tu color primario */
    border-color: #0c62b3; /* Borde con tu color primario */
}

/* Para el estado active cuando se selecciona */
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle:active {
    color: #fff;
    background-color: #0c62b3;
    border-color: #0c62b3;
    /* Puedes ajustar un color ligeramente más oscuro para el hover/active si lo deseas */
    /* background-color: darken(#045199, 5%) !important; */ /* Esto requeriría SASS o calcular el color manualmente */
}


/* El número de página ACTUAL (Círculo Morado Neón) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #6200ee !important; /* El morado vibrante de tu imagen */
    color: white !important;
    border-radius: 12px !important; /* Un poco más cuadrado-redondeado según la imagen */
    width: 32px;
    height: 32px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-weight: bold !important;
    box-shadow: 0 4px 10px rgba(98, 0, 238, 0.3) !important;
    border: none !important;
    margin: 0 10px !important;
}


/* Botones deshabilitados */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #cbd5e1 !important;
    cursor: default;
    background: transparent !important;
}

.custom-sidebar {
  background-color: #12123B !important;
}

.nav-user-menu .nav-link:focus,
.nav-user-menu .nav-link:active,
.nav-user-menu .nav-link:hover,
.nav-user-menu .nav-link.show {
    background-color: transparent !important;
}


/* SIDEBAR BASE */
.main-sidebar.custom-sidebar {
    background: linear-gradient(180deg, #0F172A 0%, #1E293B 100%);
    border-right: none;
}

/* LOGO */
.brand-link {
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.brand-text {
    color: #fff;
    letter-spacing: 0.5px;
}

/* ITEMS GENERALES */
.nav-sidebar .nav-item {
    margin: 4px 10px;
}

.nav-sidebar .nav-link {
    border-radius: 12px;
    color: #cbd5f5;
    transition: all 0.25s ease;
    padding: 10px 14px;
    font-weight: 500;
}

/* ICONOS */
.nav-sidebar .nav-icon {
    color: #94a3b8;
    transition: all 0.25s ease;
}

/* HOVER */
.nav-sidebar .nav-link:hover {
    background: rgba(124, 58, 237, 0.15);
    color: #fff;
}

.nav-sidebar .nav-link:hover .nav-icon {
    color: #a78bfa;
}

/* ACTIVO (CLAVE 🔥) */
.nav-sidebar .nav-link.active {
    background: linear-gradient(90deg, #7C3AED, #4F46E5);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

.nav-sidebar .nav-link.active .nav-icon {
    color: #fff;
}

/* SUBMENÚ */
.nav-treeview {
    margin-left: 10px;
}

.nav-treeview .nav-link {
    font-size: 13px;
    border-radius: 10px;
    padding: 8px 12px;
    color: #94a3b8;
}

/* SUBMENU HOVER */
.nav-treeview .nav-link:hover {
    background: rgba(79, 70, 229, 0.15);
    color: #fff;
}

/* SUBMENU ACTIVO */
.nav-treeview .nav-link.active {
    background: rgba(124, 58, 237, 0.25);
    color: #fff;
}

/* ELIMINAR BORDE AZUL ANTIGUO */
.nav-treeview .nav-item {
    border-left: none !important;
}

/* FLECHA */
.nav-sidebar .nav-link .right {
    color: #64748b;
}

/* SCROLL BONITO */
.sidebar {
    scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: #7C3AED;
    border-radius: 10px;
}

/* BOTÓN ABAJO (NEWS) */
.sidebar .btn,
.sidebar .astra-news {
    background: linear-gradient(135deg, #7C3AED, #4F46E5);
    border-radius: 16px;
    color: #fff;
}

/* PERFIL USUARIO */
.user-panel {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 10px;
}

/* Igualar tamaño de TODOS los items del sidebar */
.nav-sidebar .nav-link {
    font-size: 13px !important;
}

/* Submenú (por si acaso) */
.nav-treeview .nav-link {
    font-size: 13px !important;
}

.nav-treeview {
    margin-left: 10px;
}

.nav-treeview .nav-link {
    padding-left: 20px;
}

/* COLOR BASE SUBMENU */
.nav-treeview .nav-link {
    color: #cbd5f5 !important;
    background: transparent !important;
}

/* HOVER SUBMENU */
.nav-treeview .nav-link:hover {
    background: rgba(124, 58, 237, 0.15) !important;
    color: #fff !important;
}

/* ACTIVO SUBMENU (igual que principal 🔥) */
.nav-treeview .nav-link.active {
    background: linear-gradient(90deg, #7C3AED, #4F46E5) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
}

/* ICONOS SUBMENU */
.nav-treeview .nav-icon {
    color: #94a3b8 !important;
}

.nav-treeview .nav-link.active .nav-icon {
    color: #fff !important;
}

/* CONTENEDOR HEADER */
.dashboard-header {
    margin-bottom: 25px;
}

.container-fluid {
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* TITULO PRINCIPAL */
.dashboard-title {
    font-size: 25px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.5px;
}

/* NOMBRE (para resaltarlo) */
.dashboard-title span {
    color: #7C3AED;
}

/* SUBTITULO */
.dashboard-subtitle {
    font-size: 13px;
    color: #64748b;
    margin-top: 4px;
}

/* OPCIONAL: EFECTO SUAVE */
.dashboard-title,
.dashboard-subtitle {
    animation: fadeInUp 0.4s ease;
}

/* CLIMA HEADER */
.header-weather {
    text-align: right;
    background: #fff;
    border: 1px solid #edf0f5;
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 160px;
}

/* ICONO + TEMP */
.weather-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    font-weight: 600;
    color: #111827;
}

.weather-top i {
    color: #6d28d9;
}

/* TEXTO */
.weather-bottom {
    font-size: 12px;
    color: #6b7280;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.content-wrapper {
    background-color: #f5f7fb !important;
}

.content {
    padding-bottom: 15px !important; /* Ajusta el valor según cuánto espacio quieras al final */
}

.stat-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    border: 1px solid #f1f1f1;
     transition: all 0.25s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.stat-icon {
    width: 55px;
    height: 55px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #fff;
}

/* GRADIENTES (CLAVE DEL DISEÑO) */
.icon-purple {
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
}

.icon-blue {
    background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.icon-green {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.icon-red {
    background: linear-gradient(135deg, #c52222, #d62f2f);
}

.icon-orange {
    background: linear-gradient(135deg, #f59e0b, #ea580c);
}

.stat-content h6 {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
}

.stat-content h3 {
    margin: 5px 0;
    font-weight: 700;
}

.stat-sub {
    font-size: 13px;
}


.gender-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    padding: 8px;
    background: #f3f0ff; /* fondo suave morado */
}

/* CONTENEDOR GENERAL */
.section-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 22px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.05);
    border: 1px solid #f1f1f1;
    margin-bottom: 0; /* Deja que Bootstrap maneje el espacio con mb-x */
    height: 100%;    /* Esto hará que todas las tarjetas de una fila midan lo mismo */
    overflow: visible !important;
}

/* HEADER */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-header h6 {
    margin: 0;
    font-weight: 600;
}

.section-header a {
    font-size: 13px;
    color: #6366f1;
    text-decoration: none;
}

/* ITEM COMUNICADO */
.comunicado-item {
    display: flex;
    gap: 15px;
    padding: 15px;
    border-radius: 14px;
    transition: all 0.2s ease;

      border: 1px solid #edf0f5;
    background: #ffffff;
    margin-bottom: 10px;
}



.comunicado-item:hover {
     background: #f8fafc;
    border-color: #e0e7ff;
}

.comunicado-icon {
    width: 55px;
    height: 55px;
    border-radius: 12px;
    object-fit: cover;
}

.comunicado-item.destacado {
    background: #f3f0ff;
    border-color: #e0d9ff;
}

.comunicado-item:not(:last-child) {
    margin-bottom: 12px;
}

.comunicado-title {
    font-weight: 600;
    margin-bottom: 5px;
}

.comunicado-text {
    font-size: 13px;
    color: #6c757d;
}

/* BADGES */
.badge-soft {
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 8px;
}

.badge-importante { background:#fee2e2; color:#dc2626; }
.badge-aviso      { background:#fef3c7; color:#d97706; }
.badge-novedad    { background:#dcfce7; color:#16a34a; }

/* TAREAS */
.task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    transition: all 0.2s ease;

    border: 1px solid #edf0f5; /* 👈 BORDE SUAVE */
    background: #ffffff;
    margin-bottom: 10px;
}

.task-item:hover {
    background: #f8fafc;
    border-color: #e0e7ff;
    transform: translateY(-2px);
}

.task-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-title {
    font-weight: 600;
    font-size: 14px;
    color: #111827;
}

.task-project {
     font-size: 12px;
    color: #6b7280;
}

.section-header h6 {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    color: #111827;
}

.task-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.task-right small {
    font-size: 12px;
    color: #9ca3af;
}

/* PRIORIDADES */
.badge-priority {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 8px;
}



.prio-alta  { background:#ede9fe; color:#6d28d9; }
.prio-media { background:#fef3c7; color:#d97706; }
.prio-baja  { background:#e0f2fe; color:#0284c7; }

/* AVATAR */
.avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.section-header a {
    font-size: 13px;
    color: #6366f1;
    text-decoration: none;
    font-weight: 500;
}

.section-header a:hover {
    text-decoration: underline;
}

/* CONTENEDOR IZQUIERDO DEL HEADER */
.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ICONO */
.header-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* COLORES SUAVES */
.icon-purple-soft {
    background: #f1efff;
    color: #6d28d9;
}

.icon-blue-soft {
    background: #e0f2fe;
    color: #0284c7;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.header-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* MISMO ESTILO PARA TODOS */
.icon-soft {
    background: #f1efff;
    color: #6d28d9;
}

.section-header h6 {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
    color: #111827;
}


.quick-card {
    background: #f9fafb;
    border: 1px solid #edf0f5;
    border-radius: 14px;

    padding: 18px 10px; /* 👈 clave */
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;

    min-height: 95px; /* 👈 altura correcta */
}

.quick-card i {
    font-size: 20px;
    margin-bottom: 6px;
    color: #6d28d9;
}

.quick-card span {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.quick-card:hover {
    background: #f3f0ff;
    border-color: #ddd6fe;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.project-item {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #edf0f5;
    background: #fff;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.project-item:hover {
    background: #f8fafc;
    border-color: #e0e7ff;
}

/* CONTENEDORES */
.project-left {
    width: 45%;
}

.project-progress {
    width: 35%;
    padding: 0 10px;
}

.project-user {
    width: 20%;
    display: flex;
    justify-content: flex-end;
}

.progress-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress {
    flex: 1; /* 👈 ocupa todo el espacio disponible */
    height: 6px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: #6d28d9;
    border-radius: 10px;
}

.progress-text {
    font-size: 12px;
    color: #6b7280;
    min-width: 35px; /* 👈 evita que salte el layout */
    text-align: right;
}

.gender-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    padding: 10px;
}

.section-card canvas {
    max-height: 200px;
}

.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
}

/* Estenedor de ítems de solicitud */
.request-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f1f4f9;
}

.request-item:last-child {
    border-bottom: none;
}

.request-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Iconos circulares con fondo suave */
.request-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Variedades de colores de iconos */
.icon-blue-light   { background: #eff6ff; color: #3b82f6; }
.icon-purple-light { background: #f5f3ff; color: #8b5cf6; }
.icon-blue-dark    { background: #eef2ff; color: #4f46e5; }
.icon-red-light    { background: #fff1f2; color: #ef4444; }

/* Textos */
.request-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.request-user {
    font-size: 12px;
    color: #64748b;
}

/* Lado derecho: Badge y tiempo */
.request-right {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 140px;
    justify-content: flex-end;
}

.request-right small {
    min-width: 50px;
    text-align: right;
}

/* Badges de estado */
.badge-status {
    padding: 4px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
}

.status-aprobada { background: #dcfce7; color: #15803d; }
.status-pendiente { background: #fef3c7; color: #b45309; }
.status-revision { background: #e0e7ff; color: #4338ca; }
.status-rechazada { background: #fee2e2; color: #b91c1c; }


/* Para alinear los items de las listas sin usar bordes pesados */
.list-item-smooth {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #edf0f5;
}

/* Aprovechar tu color morado principal para los contadores */
.bg-soft-purple {
    background: #f1efff !important;
    color: #7C3AED !important;
}

/* Ajustar el avatar para que sea un poco más grande que el de las tareas */
.avatar-md {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
}



/* ==========================================================================
   NUEVO ESTILO UNIFICADO PARA TODAS LAS TABLAS (ASTRAHUB360)
   ========================================================================== */

/* --- CONTENEDOR Y TABLA --- */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 10px !important; /* Espacio entre filas */
    margin-top: 10px !important;
}

/* Cabecera minimalista */
table.dataTable thead th {
    background-color: #f1f5f9 !important;
    color: #475569  !important;
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.05em;
    padding: 15px !important;
    border: none !important;
}

/* Filas estilo Cápsula */
table.dataTable tbody td {
    background-color: #ffffff !important;
    border-top: 1px solid #f1f4f9 !important;
    border-bottom: 1px solid #f1f4f9 !important;
    padding: 12px 15px !important;
    font-size: 13px !important;
}

table.dataTable tbody tr td:first-child { border-left: 1px solid #f1f4f9 !important; border-top-left-radius: 12px !important; border-bottom-left-radius: 12px !important; }
table.dataTable tbody tr td:last-child { border-right: 1px solid #f1f4f9 !important; border-top-right-radius: 12px !important; border-bottom-right-radius: 12px !important; }

/* --- BUSCADOR Y SELECTOR --- */
.dataTables_filter input {
    border-radius: 20px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 6px 15px !important;
    background: #f8fafc; /* Un gris muy tenue como en tu imagen */
    width: 250px !important;
    outline: none !important;
    transition: 0.3s;
}
.dataTables_filter input:focus { border-color: #7C3AED !important; box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); }

.dataTables_length {
    color: #475569 !important;
    font-size: 14px;
    font-weight: 500;
}

/* Texto: Mostrando registros del 1 al X... */
.dataTables_info {
    font-size: 13px !important;
    color: #475569 !important;
    padding-top: 15px !important;
}

.dataTables_length select {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 4px 8px !important;
    margin: 0 8px !important; /* Espacio para el texto "Mostrar" y "registros" */
    outline: none !important;
    background-color: #f8fafc !important;
}

/* --- PAGINACIÓN CIRCULAR --- */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important; /* Gris claro como la imagen */
    font-size: 12px;
    cursor: pointer;
    padding: 5px 10px !important;
    transition: 0.3s;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(90deg, #7C3AED, #4F46E5) !important;
    color: white !important;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.3) !important;
}

/* Hover para los botones de texto */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current) {
    color: #7C3AED !important;
    background: transparent !important;
}


/* Estilo para el botón de tres puntos */
.btn-action-more {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc; /* Gris muy tenue */
    color: #64748b;            /* Color slate */
    border-radius: 10px;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.btn-action-more:hover {
    background-color: #f1efff;
    color: #7C3AED;
    transform: scale(1.05);
}

/* Ajustes del menú desplegable */
.dropdown-menu {
    min-width: 150px;
    padding: 8px;
    z-index: 9999 !important;
}

.dropdown-item {
    border-radius: 8px;
    transition: all 0.2s;
    color: #475569;
    font-weight: 500;
}


.dropdown-item:hover {
    background-color: #f1efff !important;
    color: #7C3AED !important;
}

.dropdown-item.text-danger:hover {
    background-color: #fef2f2 !important;
    color: #ef4444 !important;
}

.badge-soft-success {
    background-color: #dcfce7;
    color: #166534;
    font-weight: 500;
}

.badge-soft-danger {
    background-color: #ffdfdf;
    color: #ef4444;
    font-weight: 500;
}

.badge-soft-primary {
    background-color: #dbeafe;
    color: #1e3a8a;
    font-weight: 500;
}

.badge-soft-warning {
    background-color: #fef3c7;
    color: #92400e;
    font-weight: 500;
}

.badge-soft-info {
    background-color: #e0f2fe;
    color: #075985;
    font-weight: 500;
}

.badge-soft-secondary {
    background-color: #f1f5f9;
    color: #475569;
    font-weight: 500;
}

/* Opcional: estilo general más moderno */
.badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 11px;
}

/* TOOLBAR SUPERIOR */
.datatable-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
}

.toolbar-left,
.toolbar-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.table-actions{
    display:flex;
    align-items:center;
    gap:12px;
}

/* FILTROS */
.custom-filter{
    min-width:190px;
    height:44px;
    border-radius:14px !important;
    border:1px solid #e2e8f0 !important;
    background:#fff !important;
    font-size:14px !important;
    color:#475569 !important;
    box-shadow:none !important;
}

/* BOTON TOOLBAR */
.btn-toolbar{
    height:44px;
    padding:0 18px;
    border:none;
    border-radius:14px;
    background:#fff;
    border:1px solid #e2e8f0;
    color:#475569;
    font-weight:500;
    transition:.2s;
}

.btn-toolbar:hover{
    background:#f8fafc;
    border-color:#cbd5e1;
}

/* INPUT */
.dataTables_filter input{
    border-radius:14px !important;
    border:1px solid #e2e8f0 !important;
    background:#fff !important;
    height:44px !important;
    padding-left:42px !important;
    padding-right:15px !important;
    width:280px !important;
    margin-left:0 !important;
    box-shadow:none !important;
}

/* OCULTAR TEXTO "BUSCAR:" */
.dataTables_filter label{
    margin:0 !important;
    font-size:0;
}

/* RESTAURAR INPUT */
.dataTables_filter input{
    font-size:14px !important;
}

/* MOSTRAR */
.dataTables_length label{
    font-size:14px;
    color:#475569;
    font-weight:500;
}

/* CONTENEDOR BUSCADOR */
.dataTables_filter{
    position: relative;
    margin: 0;
}


/* Contenedor del filtro */
.filter-group.position-relative {
    display: flex;
    align-items: center;
    position: relative;
    width: auto;
}

/* Icono fijo a la izquierda del Select */
.custom-filter-icon {
    position: absolute;
    left: 12px; /* Distancia desde el borde izquierdo */
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8; /* Gris azulado */
    font-size: 13px;
    z-index: 5; /* Asegura que esté por encima del fondo del select */
    pointer-events: none; /* Evita que el icono bloquee el clic al select */
}

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



/* Ajuste para que el buscador y el filtro no se peguen en móviles */
.gap-2 {
    gap: 0.5rem !important;
}

.btn-columns{
    height:44px;
    border-radius:14px !important;
    border:1px solid #e2e8f0 !important;
    background:#fff !important;
    padding:0 18px !important;
    font-size:13px;
}

#contenedor_longitud .dataTables_length label {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

#contenedor_longitud select {
    width: auto !important;
    height: 40px !important;
    border-radius: 12px !important;
}

/* Para que el buscador no pierda su icono de lupa que pusimos antes */
#contenedor_buscador .dataTables_filter {
    position: relative;
}

/* Contenedor principal de la barra */
.datatable-header-custom {
    padding: 2px 0;
}

/* Contenedor del filtro para posicionamiento */
.dataTables_filter.position-relative {
    display: inline-block;
    position: relative;
    margin: 0 !important; /* Quitar márgenes por defecto de DT */
}


/* 🔥 Estilo y posicionamiento de la lupa */
.custom-search-icon {
    position: absolute;
    left: 14px; /* Distancia desde la izquierda */
    top: 50%;
    transform: translateY(-50%); /* Centrado vertical perfecto */
    color: #94a3b8; /* Un gris suave que combina con el placeholder */
    font-size: 15px; /* Tamaño del icono */
    z-index: 2; /* Asegurar que esté por encima del fondo del input */
    pointer-events: none; /* Que el clic pase a través del icono al input */
}

/* Opcional: Cambiar color de la lupa al hacer focus */
.custom-search-container .dataTables_filter input:focus + .custom-search-icon {
    color: #7C3AED; /* Morado corporativo */
}



.custom-search-container .dataTables_filter input:focus {
    width: 350px !important;
    background: #fff !important;
    border-color: #7C3AED !important;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.08) !important;
}


/* Corregir el texto de "Mostrar registros" */
.custom-length-container .dataTables_length label {
    margin-bottom: 0;
    font-weight: 500;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

/* Divisor Vertical */
.vr {
    display: inline-block;
    align-self: stretch;
    width: 1px;
    min-height: 1em;
    background-color: #e2e8f0;
}

/* --- ESTILO PARA EL SELECTOR DE FILTRO DE ESTADO --- */
.filter-group .filtro-select {
    height: 42px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    font-size: 13px !important;
    
    /* 🔥 Padding izquierdo aumentado para que el texto NO tape el icono */
    padding-left: 40px !important; 
    padding-right: 30px !important;
    
    min-width: 180px;
    cursor: pointer;
    appearance: none; 
    background-image: none !important; /* Quitamos flechas por defecto si estorban */
}

/* --- ICONO DEL FILTRO --- */
.filter-group .custom-filter-icon {
    position: absolute;
    left: 15px !important; /* Posición fija a la izquierda */
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 14px;
    z-index: 10; /* Asegura que esté por encima de todo */
    pointer-events: none;
}

/* Estilizamos el select con su propio icono interno */
.custom-length-container select {
    height: 40px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e8f0 !important;
    background-color: #ffffff !important;
    padding-left: 35px !important; /* Espacio para el icono de la lista */
    padding-right: 10px !important;
    margin: 0 10px !important; /* Espacio entre palabras y select */
    position: relative;
    z-index: 1;
}

/* Posicionamos el icono de lista SOLAMENTE sobre el select */
.custom-length-container label {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0;
}

/* Usamos un selector más preciso para insertar el icono sobre el select */
.custom-length-container label::after {
    content: "\f0ca"; /* Icono de lista */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    /* Ajusta este valor 'left' para que caiga justo encima del select */
    left: 72px; 
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 12px;
    z-index: 5;
    pointer-events: none;
}

/* Limpiamos el icono que sale encima del texto "Mostrar" */
.custom-length-container::before {
    display: none !important;
    content: none !important;
}

/* Creamos un contenedor específico para el select dentro del label */
.custom-length-container .dataTables_length {
    display: flex;
    align-items: center;
}

/* --- BUSCADOR --- */
.custom-search-container .dataTables_filter input {
    padding-left: 40px !important; /* Espacio para la lupa */
}

/* Estilizado moderno para Select2 dentro de modales */
#modalAsignarEncargado .select2-container--default .select2-selection--single {
    border: none !important;
    background-color: #f8fafc !important; /* Un gris muy tenue */
    border-radius: 12px !important;
    height: 45px !important;
    display: flex;
    align-items: center;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

#modalAsignarEncargado .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 15px !important;
    color: #475569 !important;
    font-size: 13px;
}

#modalAsignarEncargado .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 43px !important;
    right: 10px !important;
}

.form-control:focus, .form-select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.1) !important;
}

/* Sobrescribir el color primario de Bootstrap */
.text-primary {
    color: #6366f1 !important;
}

/* También ajustamos el icono-soft para que combine */
.icon-soft {
    background-color: #f3f0ff !important; /* Fondo morado muy claro */
    color: #6366f1 !important;           /* Icono morado */
}

/* Líneas separadoras sutiles en morado */
hr.opacity-10 {
    border-top: 1px solid #6366f1;
    opacity: 0.15;
}

.proceso-bloqueado {
    pointer-events: none !important; /* Evita cualquier clic en botones internos */
    opacity: 0.6;                   /* Efecto visual de deshabilitado */
    user-select: none;              /* Evita copiar texto */
    filter: grayscale(40%);         /* Opcional: la hace un poco más gris */
}

@page {
    size: A4;
    margin: 4.5cm 2cm 3.5cm 2cm;
}