/* Botones personalizados */
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    padding: 8px 20px;
    border: 2px solid #007BFF !important; /* Azul */
    border-radius: 999px !important;
    background-color: #fff !important;
    color: #55a1f1 !important;
    font-weight: 600;
    /*text-transform: uppercase;*/
    text-decoration: none;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    font-family: 'Tahoma', sans-serif !important;
    font-size: 0.9rem !important;
}

.btn-custom:hover {
    background-color: #007bff !important;
    color: #fff !important;
}

/*-------------------------------------------------------------------------------------- */

/* Inputs del modal */
.modal .form-control {
  border: 1px solid #ced4da;
  border-radius: 12px !important; /* redondeo moderno */
  font-family: 'Tahoma', sans-serif;
  font-size: 0.9rem;
  padding: 8px 12px;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.modal .form-control:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* Labels */
.modal label,
.modal .form-label {
  font-weight: 600;
  color: #333;
  font-family: 'Tahoma', sans-serif;
  font-size: 0.9rem;
  margin-bottom: .25rem;
  display: block;
}

#modalInfoMuestra label {
  margin-bottom: 0 !important;
}

#modalInfoMuestra .form-group {
  margin-bottom: 0.35rem; /* prueba 0.25rem - 0.5rem */
}

/*-------------------------------------------------------------------------------------- */

/* Header del modal */
.modal .modal-header {
  background: linear-gradient(90deg, #007BFF 0%, #55a1f1 100%);
  color: #fff;
  /*border-top-left-radius: 12px;*/
  /*border-top-right-radius: 6px;*/
  padding: 8px 14px;
  align-items: center;
  min-height: auto;
}

/* Título dentro del header */
.modal-header .modal-title {
    font-family: 'Tahoma', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    margin: 0;
}

/* Botón de cerrar (X) */
.modal-header .btn-close {
    filter: invert(1); /* convierte la X en blanca */
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

.modal-header .btn-close:hover {
    opacity: 1;
}

/*-------------------------------------------------------------------------------------- */

/* Footer del modal */
.modal .modal-footer {
  border-top: 1px solid #e9ecef;
  padding: 4px 10px !important;      /* ✅ reducido de 12px 16px */
  display: flex;
  justify-content: flex-end;
  gap: 8px;              /* un poco más compacto */
  min-height: auto;      /* evita altura fija */
}

/* Botones dentro del modal */
.modal-footer .btn-custom,
.modal-footer .btn-outline-custom {
  min-width: 110px;      /* un poco más compacto */
  padding: 4px 10px;     /* ✅ menos padding interno */
  font-size: 0.9rem;     /* ✅ letra ligeramente más pequeña */
}

/* Cerrar en header (BS4): blanco y sin borde raro */
.modal-header .close {
  color: #fff !important;
  opacity: .9 !important;
  font-size: 1.5rem;
  line-height: 1;
  text-shadow: none;
  border: 0;          /* elimina borde si aparece */
  background: none;   /* evita cajas raras */
}
.modal-header .close:hover {
  opacity: 1 !important;
}

/*-------------------------------------------------------------------------------------- */

/* -----------------------
   Sidebar
   ----------------------- */
.sidebar-brand img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 1);
}

.sidebar-brand .brand-title {
  color: white;
  font-weight: bold;
  font-size: 1.7rem;
}

/* Menús principales */
aside.sidebar-wrapper .nav-item > a.nav-link {
  color: #000000 !important;
  font-weight: 500;
  font-size: 1.05rem;
}

aside.sidebar-wrapper .nav-item > a.nav-link:hover,
aside.sidebar-wrapper .nav-item > a.nav-link.active {
  color: #000000 !important;
  background: var(--hover-bg);
}

/* Submenús */
.submenu a {
  text-decoration: none !important;
  display: block;
  padding: .45rem .85rem;
  color: #222;
  font-size: .95rem;
  font-weight: 500;
  border-radius: .4rem;
}

.submenu a:hover,
.submenu a.active {
  text-decoration: none !important;
  background: rgba(253, 253, 253, 1);
}

/*-------------------------------------------------------------------------------------- */

/************** Card container ***************/
/* Contenedor superior (filtros + botones) estilo corporativo */
.card {
  background-color: #fff;
  border-radius: 6px;        /* bordes suaves, más corporativo */
  box-shadow: none !important;  /* ❌ elimina la sombra */

  margin: 0;                     /* sin margen exterior */
  padding: 12px 16px;             /* espacio interno balanceado */
  width: 100%;                   /* ocupa todo el ancho disponible */

  opacity: 1 !important;        /* siempre visible */
  transform: none !important;   /* sin movimientos */
  animation: none !important;   /* sin animación */
  border: 1px solid #ddd;       /* borde fino en lugar de sombra */
}

.card-header {
  background-color: transparent !important;
  border-bottom: none !important;
}

/*-------------------------------------------------------------------------------------- */

/* -----------------------
   Tabla estilo SAP
   ----------------------- */
.table-sap thead {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Tahoma', sans-serif;
    font-size: 0.7rem;
    /* color: #333; */
    background: linear-gradient(180deg, #fce178 0%, #f4c430 100%); /* amarillo degradado */
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.6),
                inset 0 -2px 4px rgba(0, 0, 0, 0.2);
                border-bottom: 2px solid #d4a017; /* borde más oscuro */
    
}

/* Ajuste de altura y estilo SAP en tablas */
.table-sap td, 
.table-sap th {
  border: 1px solid #ccc !important;  /* borde visible en toda la grid */
  padding: 2px 6px !important;   /* alto de fila estándar (más compacto) */
  font-size: 0.82rem;
  line-height: 1.1;
  vertical-align: middle !important;
  text-align: center;
}

/* Encabezados centrados explícitamente */
.table-sap thead th {
    text-align: center !important;
    vertical-align: middle !important;
}

.table-sap tbody tr:hover {
    background-color: #f9f9f9;
}

.table-sap .form-control-sm {
    font-size: 0.7rem !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
}

/*-------------------------------------------------------------------------------------- */

/* Botones de acción en grillas SIN bordes ni fondo (SAP style) */
.action-icon {
    border: none !important;        /* elimina borde Bootstrap */
    background: transparent !important; /* elimina fondo */
    padding: 0 !important;
    margin: 0 6px !important;
    box-shadow: none !important;    /* elimina sombra */
    outline: none !important;       /* elimina borde al hacer focus */
    cursor: pointer;
}

.action-icon i {
    font-size: 14px !important;  /* tamaño del icono */
    color: #1e7ef3;
    line-height: 1 !important;
}

.action-icon:hover i {
    color: #000;      /* un poco más oscuro en hover */
}

/*-------------------------------------------------------------------------------------- */

.pagination .page-item .page-link {
  border: none;
  border-radius: 8px;
  margin: 0 3px;
  color: #0d6efd;            /* azul Bootstrap */
  font-weight: 300;
  padding: 6px 12px;
  transition: all 0.2s ease;
  background-color: #f8f9fa; /* gris muy claro */
  font-size: 14px !important;
}

.pagination .page-item .page-link:hover {
  background: linear-gradient(135deg, #e9f2ff, #d6e6ff);
  color: #0a58ca;
  font-size: 14px !important;
}

.pagination .page-item.active .page-link {
  background-color: #0d6efd;
  color: #fff;
  font-weight: 300;
  font-size: 14px !important;
}

.pagination .page-item.disabled .page-link {
  color: #adb5bd;
  background-color: #f1f3f5;
  font-size: 14px !important;
}

ul.pagination li.page-item a.page-link {
  font-size: 14px;
}

/*-------------------------------------------------------------------------------------- */
.custom-close {
  color: #fff !important;     /* Hace la X blanca */
  background: none !important;/* Sin fondo */
  border: none !important;    /* Sin borde */
  font-size: 1.5rem;          /* Ajusta tamaño de la X */
  opacity: 1;                 /* Fuerza opacidad completa */
  line-height: 1;
}

/*-------------------------------------------------------------------------------------- */

/* Modal hijo (anidado) */
.modal-nested .modal-content {
  background-color: #fdf8f1;   /* beige claro */
  border: 2px solid #004080;   /* borde azul oscuro */
  box-shadow: 0 6px 18px rgba(0,0,0,0.35); /* sombra más marcada */
}

.modal-nested .modal-header {
  background: linear-gradient(135deg, #003366, #0055aa); /* azul oscuro degradado */
  color: #fff;
  font-weight: bold;
  border-bottom: 2px solid #004080;
}

.modal-nested .modal-footer {
  background-color: #f3f3f3; /* gris suave para distinguir */
  border-top: 2px solid #004080;
}

/* Backdrop distinto para modales hijos */
.modal-nested ~ .modal-backdrop {
  background-color: rgba(0, 51, 102, 0.6); /* azul oscuro semi-transparente */
}

/* ------------------------------------------------------------------------------------------------------ */

/* Popup más bajo */
.swal2-mini-popup {
  padding: 0.2rem 1rem !important;   /* menos espacio arriba/abajo */
  font-size: 0.85rem !important;
  line-height: 1.2rem !important;    /* líneas más pegadas */
}

/* Título más pequeño */
.swal2-mini-title {
  font-size: 0.95rem !important;
  margin-bottom: 0.3rem !important;  /* menos espacio bajo el título */
}

/* Botones más compactos */
.swal2-styled.swal2-confirm,
.swal2-styled.swal2-cancel {
  padding: 0.3rem 1rem !important;
  font-size: 0.85rem !important;
}

/*-------------------------------------------------------------------------------------- */

/*DISEÑO PARA TABS */

/* Tabs container */
.nav-tabs {
  border-bottom: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 2px !important;
}

/* Todas las pestañas */
.nav-tabs .nav-link {
  border: 1px solid #dee2e6 !important;
  border-bottom: none !important;
  border-radius: .5rem .5rem 0 0 !important;
  background: #f1f1f1 !important;   /* gris claro inactivo */
  color: #333 !important;
  font-size: 0.9rem !important;     /* un poco más pequeño */
  font-weight: 500 !important;
  margin-right: 4px !important;
  padding: 2px 14px !important;
  margin-bottom: 0 !important;  
}

/* Hover */
.nav-tabs .nav-link:hover {
  background: #e6e6e6 !important;
  color: #000 !important;
}

/* Pestaña activa: mismo gris que el panel */
.nav-tabs .nav-link.active {
  background: #f7f7f7 !important;   /* gris suave corporativo */
  color: #000 !important;           /* texto negro */
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border-color: #dee2e6 #dee2e6 #f7f7f7 !important;
  padding: 2px 14px !important;
  margin-bottom: 0 !important;
}

/* Panel con mismo fondo */
.tab-content {
  border: 1px solid #dee2e6 !important;
  border-radius: 0 .5rem .5rem .5rem !important;
  background: #f7f7f7 !important;   /* mismo gris que pestaña activa */
  padding: 0.5rem !important;
  margin-top: 0 !important;
}

/* ------------------------------------------------------------------------------------------ */

/* Inputs personalizados en analisis */
.styled-input {
  border-radius: 12px !important;        /* redondeo fuerte */
  background-color: #f1f1f1 !important;  /* gris claro */
  border: 1px solid #007bff !important;  /* borde azul sutil */
  padding: 6px 10px;
  width: 100%;
  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.styled-input:focus {
  border-color: #0056b3 !important;   /* azul más intenso en focus */
  background: #fff !important;        /* se aclara al enfocar */
  outline: none;
}
/* Subrayado de labels */
label.text-dark {
  font-weight: bold;
  color: #333;
  display: flex;            /* alineación con el input */
  align-items: center;      /* centrado vertical */
  margin-bottom: 6px;
  text-align: left;
  border-bottom: 1px solid #ccc; /* línea más delgada y sutil */
  padding-bottom: 2px;
  width: 100%;              /* ocupa todo el ancho hasta el input */
}
/* ------------------------------------------------------------------------------------------ */

/* Campos más angostos dentro de modales */
.modal .field-narrow {
  display: inline-block;   /* anula el display:block de .form-control */
  width: 100%;             /* evita 100% */
   /*min-width: 250px;        ajusta a gusto */
  max-width: 550px;        /* ajusta a gusto */
}
/* ------------------------------------------------------------------------------------------ */
/* Tamaño de fuente y celda para el campo resultado "input" en tareaasignadas*/
.table-sap td .form-control-sm {
  font-size: 0.82rem !important;       /* misma fuente que el resto */
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  line-height: 1.1 !important;         /* centra visualmente el texto */
  height: auto !important;             /* evita que crezca la celda */
  color: #044a94 !important;         /* texto azul visible */
  font-weight: 400 !important;       /* más resaltado */
  text-align: center !important;
}

/* ----   Cuando no usamos sidebar, el contenido ocupa todo----- */

HTML, body {
    HEIGHT: 100%
}

#wrapper {
    display: block !important;
    min-height: 100vh;
}

/* El contenido principal no deja hueco lateral y también se estira */
#content-wrapper {
    margin-left: 0 !important;
    min-height: 100vh;           /* también ocupa todo el alto */
}


            /* ---------------------- */
            /* ESTILOS DEL MENÚ       */
            /* ---------------------- */
            .nav-item .nav-link {
                color: #000;
                font-weight: bold;
                padding: 10px 20px;
                transition: all 0.3s ease;
                border: 2px solid #007bff;
                border-radius: 30px;
                background-color: #fff;
                margin-right: 10px;
            }

            .nav-item .nav-link:hover {
                color: #fff !important;               /* Letras blancas */
                background-color: #007bff !important; /* Fondo azul */
                transform: scale(1.05);
                box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
            }


            .nav-item .dropdown-menu {
                background-color: #f0f8ff;
                border-radius: 15px;
                padding: 10px;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
                border: none;
            }

            .nav-item .dropdown-item {
                padding: 10px 20px;
                margin-bottom: 5px;
                border: 2px solid #007bff;
                border-radius: 25px;
                background-color: #fff;
                color: #000;
                font-weight: 500;
                transition: all 0.3s ease;
            }

            .nav-item .dropdown-item:hover {
                background-color: #007bff;
                color: #fff;
                transform: scale(1.03);
                box-shadow: 0 0 8px rgba(0, 123, 255, 0.4);
            }

            .nav-item .dropdown-divider {
                background-color: #007bff;
                margin: 10px 0;
            }

            .nav-item .dropdown-item i {
                margin-right: 10px;
                transition: transform 0.3s ease;
            }

            .nav-item .dropdown-item:hover i {
                transform: rotate(15deg);
            }

            /* --------------------------- */
            /* ANIMACIÓN DE APERTURA      */
            /* --------------------------- */
            @keyframes slideFadeDown {
                0% {
                    opacity: 0;
                    transform: translateY(-10px);
                }
                100% {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .dropdown-menu.show {
                animation: slideFadeDown 0.3s ease forwards;
            }
            
            /* =====================================================
            MODALES PERSONALIZADOS — SOLO APLICA SI LE PONES LA CLASE
            EJEMPLO: <div class="modal-dialog modal-wide">
            ===================================================== */

            .modal-wide {
              max-width: 900px !important;  /* Ajusta el tamaño que quieras */
              width: 95% !important;         /* Responsivo */
            }

            .modal-xl-wide {
              max-width: 1200px !important; /* Opcional: modal extra ancho */
              width: 96% !important;
            }