.fdatos:hover {
  background-color: rgb(241, 241, 241);
}

.carta {
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.05);
  transition: 0.3s transform cubic-bezier(0.155, 1.105, 0.295, 1.12),
    0.3s box-shadow,
    0.3s -webkit-transform cubic-bezier(0.155, 1.105, 0.295, 1.12);
  padding: 14px 80px 18px 36px;
  cursor: pointer;
}

.carta:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
}

.carta h3 {
  font-weight: 600;
}

.carta img {
  position: absolute;
  top: 20px;
  right: 15px;
  max-height: 120px;
}

.carta-1 {
  background-image: url('../img/azabache.png');
  background-repeat: no-repeat;
  background-position: right;
  background-size: 90px;
}

.carta-2 {
  background-image: url(https://ionicframework.com/img/getting-started/components-card.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 80px;
}

.carta-3 {
  background-image: url(https://ionicframework.com/img/getting-started/theming-card.png);
  background-repeat: no-repeat;
  background-position: right;
  background-size: 80px;
}

.azabache-color {
  background-color: rgb(54, 100, 143);
}

.botonA {
  border: none;
  padding: 10px;
  border-radius: 7px;
  color: white;
  font-weight: bolder;
  cursor: pointer;
  background-color: gray;
}

.botonA:hover {
  color: white;
  text-decoration: none;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results_options .select2-resultsoption.select2-results_option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results_options .select2-resultsoption[aria-selected=true]:not(.select2-results_option--highlighted) {
  color: #fff;
  background-color: gray;
}

.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: black;
  box-shadow: none;
}

.select2-container--bootstrap-5 .select2-dropdown {
  z-index: 1056;
  overflow: hidden;
  color: #212529;
  background-color: #fff;
  border-color: black;
  border-radius: 0.25rem;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field:focus {
  border-color: black;
  box-shadow: 0 0 0 0.25rem gray;
}

/* (La vieja regla de .sidebar ya no es necesaria)
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
}
*/

table.dataTable > tbody > tr {
  /* background-color: transparent; */
}

.eAceptado {
  background-color: rgb(171, 255, 155);
}
.ePendiente {
  background-color: gainsboro;
}
.eRechazado {
  background-color: rgb(255, 178, 178);
}

/* ========== Estilos para Control de Tiempos ========== */

/* Hover en items de fase */
.hover-bg:hover {
  background-color: #f8f9fa !important;
  cursor: pointer;
}

/* Fase seleccionada (activa) */
.fase-item.active {
  background-color: #e3f2fd !important;
  font-weight: bold;
  border-left: 3px solid #007bff;
}

/* Acordeón expandido */
.accordion-button:not(.collapsed) {
  background-color: #e7f3ff;
  color: #0056b3;
}

/* Quitar sombra del focus en botones del acordeón */
.accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.125);
}

/* Tamaño de fuente del acordeón */
.accordion-button {
  font-size: 0.875rem;
}

/* Ajuste específico del dropdown del reloj (puedes mantenerlo) */
#clockDropdown + .dropdown-menu {
  right: 10px !important;
  left: auto !important;
}

/* ========== Estilos para botones de DataTables ========== */

.dt-buttons {
  display: inline-block !important;
  margin-bottom: 1rem !important;
  vertical-align: middle !important;
}

.dt-buttons .btn,
.dt-button {
  background-color: #4e73df !important;
  color: white !important;
  border: 1px solid #4e73df !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 0.875rem !important;
  line-height: 1.5 !important;
  border-radius: 0.35rem !important;
  margin-right: 0.25rem !important;
  margin-bottom: 0 !important;
  cursor: pointer !important;
  transition: all 0.15s ease-in-out !important;
  display: inline-block !important;
}

.dt-buttons .btn:hover,
.dt-button:hover {
  background-color: #2e59d9 !important;
  border-color: #2653d4 !important;
  color: white !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.dt-buttons .btn:active,
.dt-button:active {
  background-color: #2653d4 !important;
  border-color: #244ec5 !important;
}

/* ===================================================== */

/* ✅ Sidebar fijo a la izquierda dividido en 3 zonas:
   - top fijo (logo + Escritorio)
   - centro con scroll
   - bottom fijo (Salir al inicio + toggler) */

.navbar-nav.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 260px;            /* ajusta al ancho real */
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;        /* el scroll vive en sidebar-scroll */
}

/* Ocultar el botón flotante de colapsar sidebar */
#sidebarToggle {
  display: none !important;
}

/* Zona fija superior */
.sidebar-fixed-top {
  flex-shrink: 0;
}

/* Zona central con scroll */
.sidebar-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Zona fija inferior */
.sidebar-fixed-bottom {
  flex-shrink: 0;
}

/* Empujar el contenido principal hacia la derecha del sidebar */
#content-wrapper,
#content {
  margin-left: 112px;      /* ajusta según el ancho visual deseado */
}

/* Ocultar scrollbar en navegadores WebKit (Chrome, Edge, etc.) */
.sidebar-scroll::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Firefox */
.sidebar-scroll {
  scrollbar-width: none;   /* Firefox */
}

/* IE / Edge antiguo */
.sidebar-scroll {
  -ms-overflow-style: none;
}

/* Líneas separadoras del sidebar más notorias */
.navbar-nav.sidebar hr.sidebar-divider {
  border: none;
  height: 2px;                            /* grosor de la línea */
  margin: 0.5rem 1rem;                    /* espacio arriba/abajo y hacia los lados */
  background-color: rgba(255,255,255,0.35);  /* color más visible en el azul */
  border-radius: 999px;                   /* bordes redondeados (opcional) */
}

/* === Topbar dropdowns: posición y tamaño seguros === */

/* Todos los menús desplegables del topbar */
.navbar .dropdown-menu {
  max-width: 380px;              /* ancho máximo razonable */
  width: max-content;            /* se adapta al contenido hasta el máximo */
  right: 0 !important;           /* anclado al icono */
  left: auto !important;
  transform: none !important;    /* evita desplazamientos raros */
}

/* Mensajes: scroll interno si es muy alto */
#messagesDropdown + .dropdown-menu {
  max-height: 60vh;
  overflow-y: auto;
}