body {
    background-color: #F2F5F9;
}


/* --- Estilos para la tarjeta (card) --- */
.card {
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.06);
    border: 1px solid rgba(0,0,0,.06);
    overflow: hidden;
}

/* --- Estilos para la cabecera de la tarjeta (card-header) --- */
.card-header {
    /* Estilo del DIV con la clase .card-header */
    background: linear-gradient(90deg, #24447F, #2f5fb3);
    color: #fff;
    padding: .5rem 1rem;
    display:flex;
    align-items:center;
    justify-content:space-between;
}


  .card-header .subtitle {
    opacity: .85;
    font-size: .85rem;
  }
  .panel-soft {
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.04);
  }
  .panel-soft .panel-header{
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(0,0,0,.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: .75rem;
  }
  .panel-soft .panel-body{
    padding: .75rem 1rem 1rem 1rem;
  }
  .sticky-actions {
    position: sticky;
    top: .75rem;
    z-index: 5;
  }
  .table-wrap {
    max-height: 380px; /* ajusta a tu gusto */
    overflow: auto;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.06);
  }
  .table thead th {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 1;
  }
  .hint {
    font-size: .85rem;
    color: #6c757d;
  }
  .chip-count{
    background: rgba(36,68,127,.12);
    color:#24447F;
    border-radius: 999px;
    padding: .25rem .6rem;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
  }




.table-button-elimina {
    background-color: #DC4C64;  /* Color amarillo */
    color: white;
    border: none;
    padding: 10px;  /* Ajusta el padding para darle más espacio al botón */
    text-align: center;
    font-size: 16px; /* Aumenta el tamaño de fuente si es necesario */
    border-radius: 10px;  /* Ajusta el borde redondeado */
    display: flex;
    justify-content: center;  /* Asegura que el contenido esté centrado horizontalmente */
    align-items: center;      /* Asegura que el contenido esté centrado verticalmente */
    width: 30px; /* Ajusta el ancho del botón */
    height: 30px; /* Ajusta la altura del botón */
}

.table-button-elimina i {
    margin: 0;  /* Elimina cualquier margen del icono */
}

.table-button-edita {
    background-color: #E4A11B;  /* Color amarillo */
    color: white;
    border: none;
    padding: 10px;  /* Ajusta el padding para darle más espacio al botón */
    text-align: center;
    font-size: 10px; /* Aumenta el tamaño de fuente si es necesario */
    border-radius: 10px;  /* Ajusta el borde redondeado */
    display: flex;
    justify-content: center;  /* Asegura que el contenido esté centrado horizontalmente */
    align-items: center;      /* Asegura que el contenido esté centrado verticalmente */
    width: 30px; /* Ajusta el ancho del botón */
    height: 30px; /* Ajusta la altura del botón */
}

.table-button-edita i {
    margin: 0;  /* Elimina cualquier margen del icono */
}

.table-button-activa {
    background-color: #28af24;  /* Color amarillo */
    color: white;
    border: none;
    padding: 10px;  /* Ajusta el padding para darle más espacio al botón */
    text-align: center;
    font-size: 10px; /* Aumenta el tamaño de fuente si es necesario */
    border-radius: 10px;  /* Ajusta el borde redondeado */
    display: flex;
    justify-content: center;  /* Asegura que el contenido esté centrado horizontalmente */
    align-items: center;      /* Asegura que el contenido esté centrado verticalmente */
    width: 30px; /* Ajusta el ancho del botón */
    height: 30px; /* Ajusta la altura del botón */
}

.table-button-activa i {
    margin: 0;  /* Elimina cualquier margen del icono */
}

.table-button-lista {
    background-color: #50daec;  /* Color amarillo */
    color: white;
    border: none;
    padding: 10px;  /* Ajusta el padding para darle más espacio al botón */
    text-align: center;
    font-size: 10px; /* Aumenta el tamaño de fuente si es necesario */
    border-radius: 10px;  /* Ajusta el borde redondeado */
    display: flex;
    justify-content: center;  /* Asegura que el contenido esté centrado horizontalmente */
    align-items: center;      /* Asegura que el contenido esté centrado verticalmente */
    width: 30px; /* Ajusta el ancho del botón */
    height: 30px; /* Ajusta la altura del botón */
}

.table-button-lista i {
    margin: 0;  /* Elimina cualquier margen del icono */
}


.table-button-oka {
    background-color: #12b403;  /* Color amarillo */
    color: white;
    border: none;
    padding: 10px;  /* Ajusta el padding para darle más espacio al botón */
    text-align: center;
    font-size: 10px; /* Aumenta el tamaño de fuente si es necesario */
    border-radius: 10px;  /* Ajusta el borde redondeado */
    display: flex;
    justify-content: center;  /* Asegura que el contenido esté centrado horizontalmente */
    align-items: center;      /* Asegura que el contenido esté centrado verticalmente */
    width: 30px; /* Ajusta el ancho del botón */
    height: 30px; /* Ajusta la altura del botón */
}

.table-button-oka i {
    margin: 0;  /* Elimina cualquier margen del icono */
}


/* Paginación y selectores */
.dataTables_paginate .paginate_button {
    padding: 5px 10px;
    margin: 0 2px;
    font-size: 14px;
}

.dataTables_length select, .dataTables_filter input {
    height: 30px;
    font-size: 14px;
    padding: 2px 5px;
}



#modal_lista .modal-content {
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

#modal_lista .modal-header {
    background-color: #3c8dbc;
    color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#modal_lista .modal-body {
    padding: 20px;
    font-size: 16px;
}

#modal_lista h6 {
    color: #3c8dbc;
    margin-bottom: 5px;
}

#modal_lista p {
    font-size: 14px;
    color: #555;
}

#modal_lista .modal-footer {
    background-color: #f8f9fa;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}







#modal_marcador .modal-content {
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

#modal_marcador .modal-header {
    background-color: #3c8dbc;
    color: white;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

#modal_marcador .modal-body {
    padding: 20px;
    font-size: 16px;
}

#modal_marcador h6 {
    color: #3c8dbc;
    margin-bottom: 5px;
}

#modal_marcador p {
    font-size: 14px;
    color: #555;
}

#modal_marcador .modal-footer {
    background-color: #f8f9fa;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}



#map {
    height: 400px;
    width: 100%;
}


#datatable-botones table {
        font-size: 12px;
        border-collapse: collapse;
    }

    #datatable-botones thead th {
        background-color: #f5f5f5;
        font-weight: bold;
    }

    #datatable-botones tbody tr {
        transition: background-color 0.2s ease-in-out;
    }

    #datatable-botones tbody tr:nth-child(odd) {
        background-color: #ffffff;
    }

    #datatable-botones tbody tr:nth-child(even) {
        background-color: #f1f1f1;
    }

    #datatable-botones tbody tr:hover {
        background-color: #d4edda; /* Verde claro como hover */
        cursor: pointer;
    }

    #datatable-botones td, #datatable-botones th {
        padding: 6px 8px !important;
        vertical-align: middle;
    }



/* =========================================================
   MDB DATATABLE - CSS FINAL COMPLETO (FIX SCROLL LATERAL)
   ========================================================= */

/* -----------------------
   Base
------------------------ */
.datatable-wrapper {
  font-size: 0.85rem;
  overflow: visible !important; /* Evita la barra doble exterior */
}

.datatable {
  font-size: 0.85rem;
  table-layout: auto !important; /* Permite que el ancho crezca y active el scroll */
  width: 100% !important;
}

.datatable,
.datatable-wrapper * {
  box-sizing: border-box;
}

/* FIX: Contenedor específico para el scroll lateral único */
.datatable-inner {
  overflow-x: auto !important; 
  display: block !important;
  box-shadow: none !important;
}

/* -----------------------
   Header
------------------------ */
.datatable thead th,
.datatable-wrapper thead th {
  position: relative;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;

  background: #f8f9fa !important;
  color: #6c757d;

  padding: 8px 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
  border-top: none !important;

  white-space: nowrap;
  vertical-align: middle !important;
  line-height: 1.1 !important;
}

/* columnas ordenables (tus TH tienen cursor:pointer inline) */
.datatable thead th[style*="cursor: pointer"],
.datatable-wrapper thead th[style*="cursor: pointer"] {
  padding-left: 24px !important;
}

/* Sort icon (NO pisar transform; MDB rota up/down) */
.datatable thead th .datatable-sort-icon,
.datatable-wrapper thead th .datatable-sort-icon {
  position: absolute !important;
  left: 8px !important;
  top: 50% !important;

  margin: 0 !important;
  line-height: 1 !important;
  pointer-events: none !important;

  font-size: 0.70rem !important;
  opacity: 0.65 !important;

  /* centrado vertical sin translateY para no interferir */
  margin-top: -0.35rem !important;
}

.datatable thead th .datatable-sort-icon.active,
.datatable-wrapper thead th .datatable-sort-icon.active {
  opacity: 0.9 !important;
}

/* -----------------------
   Body compacto + FIX última fila alta
------------------------ */
.datatable tbody tr,
.datatable-wrapper tbody tr {
  height: 38px !important;
}

.datatable tbody td,
.datatable-wrapper tbody td {
  padding: 7px 12px !important;
  font-size: 0.84rem;
  line-height: 1.15 !important;
  vertical-align: middle !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
  height: 38px !important;
  white-space: nowrap; /* Mantiene el contenido en una línea para forzar scroll */
}

/* Si hay <center> en celdas, evitar saltos */
.datatable tbody td center,
.datatable-wrapper tbody td center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Botones dentro de tabla compactos */
.datatable tbody td button,
.datatable-wrapper tbody td button {
  padding: 6px 10px !important;
  line-height: 1 !important;
  border-radius: 10px !important;
}

.datatable tbody td button i,
.datatable-wrapper tbody td button i {
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* hover fila */
.datatable tbody tr,
.datatable-wrapper tbody tr {
  transition: background-color .15s ease;
}

.datatable tbody tr:hover,
.datatable-wrapper tbody tr:hover {
  background: rgba(13,110,253,0.06);
}

/* -----------------------
   Buscador
------------------------ */
.datatable-wrapper input.form-control,
.datatable input.form-control {
  font-size: 0.85rem !important;
  border-radius: 12px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.datatable-wrapper input.form-control:focus,
.datatable input.form-control:focus {
  border-color: rgba(13, 110, 253, 0.55) !important;
  box-shadow: 0 0 0 3px rgba(13,110,253,.12) !important;
}

/* -----------------------
   Paginador (estructura real)
------------------------ */
.datatable-pagination,
.datatable-wrapper .datatable-pagination {
  padding: 10px 12px !important;
  border-top: 1px solid rgba(0,0,0,.06) !important;
  font-size: 0.82rem !important;
  color: #6c757d !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 14px !important;
}

/* nav "1-10 of 10" */
.datatable-pagination .datatable-pagination-nav,
.datatable-wrapper .datatable-pagination .datatable-pagination-nav {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

/* Botones flecha */
.datatable-pagination .datatable-pagination-buttons a,
.datatable-wrapper .datatable-pagination .datatable-pagination-buttons a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 32px !important;
  height: 32px !important;

  border-radius: 10px !important;
  margin: 0 2px !important;

  color: #495057 !important;
  background: transparent !important;
  transition: background-color .15s ease;
}

.datatable-pagination .datatable-pagination-buttons a:hover,
.datatable-wrapper .datatable-pagination .datatable-pagination-buttons a:hover {
  background: rgba(0,0,0,.05) !important;
}

.datatable-pagination .datatable-pagination-buttons .disabled,
.datatable-wrapper .datatable-pagination .datatable-pagination-buttons .disabled {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* =========================================================
   ✅ FIX DEFINITIVO: SELECT "Filas por página" (MDB select-wrapper)
   ========================================================= */

/* Wrapper del paginador select */
.datatable-pagination .datatable-select-wrapper,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Texto "Filas por página" */
.datatable-pagination .datatable-select-text,
.datatable-wrapper .datatable-pagination .datatable-select-text {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 0.82rem !important;
  color: #6c757d !important;
  white-space: nowrap;
}

/* Quitar márgenes del select-wrapper */
.datatable-pagination .datatable-select-wrapper .select-wrapper,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper .select-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}

/* Quitar bordes/notch del form-outline (doble marco) */
.datatable-pagination .datatable-select-wrapper .form-outline,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper .form-outline {
  margin: 0 !important;
  padding: 0 !important;
}

.datatable-pagination .datatable-select-wrapper .form-notch,
.datatable-pagination .datatable-select-wrapper .form-notch-leading,
.datatable-pagination .datatable-select-wrapper .form-notch-middle,
.datatable-pagination .datatable-select-wrapper .form-notch-trailing,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper .form-notch,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper .form-notch-leading,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper .form-notch-middle,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper .form-notch-trailing {
  border: 0 !important;
}

/* El INPUT fake (el que se ve) -> lo dejamos perfecto */
.datatable-pagination .datatable-select-wrapper input.select-input,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper input.select-input {
  height: 30px !important;
  min-height: 30px !important;

  padding: 2px 28px 2px 10px !important; /* espacio para flecha */
  font-size: 0.82rem !important;
  line-height: 1 !important;

  border-radius: 10px !important;
  border: 1px solid rgba(0,0,0,.15) !important;
  box-shadow: none !important;
  outline: none !important;
  background: #fff !important;

  display: inline-flex !important;
  align-items: center !important;
}

/* Flecha del select: centrada */
.datatable-pagination .datatable-select-wrapper .select-arrow,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper .select-arrow {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  pointer-events: none !important;
}

/* Ocultar el <select> real para que no afecte altura/espacio */
.datatable-pagination .datatable-select-wrapper select.datatable-select,
.datatable-wrapper .datatable-pagination .datatable-select-wrapper select.datatable-select {
  display: none !important;
}

/* -----------------------
   Quitar sombras MDB
------------------------ */
.datatable .datatable-header,
.datatable-wrapper .datatable-header {
  box-shadow: none !important;
}