.tabbed-content {
  background: #fff;
  box-shadow: 1px 1px 6px #ccc;
  max-width: 600px;
  padding: 1em;
  margin: 1em auto;
}

.tabs ul {
  margin: 0;
  padding: 0 0 1em 0;
  font-weight: bold;
}
.tabs ul li {
  background: #eee;
}
.tabs ul li a {
  padding: 0.5em 1em;
}
.tabs ul li a:hover, .tabs ul li a.active {
  background: #444bbb;
  color: #eee;
}

.item {
  margin-bottom: 2px;
}
.item::before {
  cursor: pointer;
  font-weight: bold;
  background: #eee;
  padding: 0.5em;
  display: block;
}
.item.active::before {
  background: #444;
  color: #eee;
}
.item.active .item-content {
  padding: 1em;
  -webkit-transition: opacity 0.3s ease-in-out;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  -ms-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

@media all and (min-width: 800px) {
  .item.active .item-content {
    padding-top: 0;
  }

  .tabs-side .tabs li {
    margin-bottom: 2px;
  }
}
/* 
The project specific CSS starts here
This is the minimum CSS that you will need in order for this to work
*/
.tabbed-content .tabs {
  display: none;
}
.tabbed-content .item {
  min-height: 2em;
}
.tabbed-content .item::before {
  content: attr(data-title);
}
.tabbed-content .item .item-content {
  opacity: 0;
  visibility: hidden;
  height: 0;
}
.tabbed-content .item.active .item-content {
  opacity: 1;
  visibility: visible;
  height: auto;
}

@media all and (min-width: 800px) {
  .tabbed-content .tabs {
    display: block;
  }
  .tabbed-content .tabs li {
    display: inline-block;
  }
  .tabbed-content .tabs li a {
    display: block;
  }
  .tabbed-content .item {
    min-height: 0;
  }
  .tabbed-content .item::before {
    display: none;
  }
  .tabbed-content.tabs-side .tabs {
    width: 150px;
    float: left;
  }
  .tabbed-content.tabs-side .tabs li {
    display: block;
  }
  .tabbed-content.tabs-side .item {
    margin-left: 150px;
  }
}





/* =========================================================
   Marco externo SOLO en la tabla (laterales + inferior)
   - Mostrar laterales (1)
   - Mostrar inferior (2)
   - Ocultar separador arriba de paginación (3)
   ========================================================= */

/* 1) No usar bordes del wrapper (evita línea 3) */
.cmx-tabla-nombres .dataTables_wrapper{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* 2) El “cuadro” lo dibuja la tabla: laterales + inferior */
.cmx-tabla-nombres table.dataTable{
  border-left: 1px solid #d9e1ea !important;   /* (1) */
  border-right: 1px solid #d9e1ea !important;  /* (1) */
  border-bottom: 1px solid #d9e1ea !important; /* (2) */
  border-top: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* 3) Asegurar que el último renglón “cierre” visualmente */
.cmx-tabla-nombres table.dataTable tbody tr:last-child td{
  border-bottom: 0 !important; /* el cierre lo hace el border-bottom de la tabla */
}

/* 4) Grid interno (líneas finas) */
.cmx-tabla-nombres table.dataTable tbody td{
  border-top: 1px solid #d9e1ea !important;
  border-right: 1px solid #d9e1ea !important;
}
.cmx-tabla-nombres table.dataTable tbody td:last-child{
  border-right: 0 !important; /* sin borde extra al final */
}

/* 5) Quitar cualquier separador del pie (línea 3) */
.cmx-tabla-nombres .dataTables_info,
.cmx-tabla-nombres .dataTables_paginate{
  border-top: 0 !important;
  box-shadow: none !important;
}

/* (Opcional) Si algún tema agrega borde al “footer” de DataTables */
.cmx-tabla-nombres .dataTables_wrapper .row,
.cmx-tabla-nombres .dataTables_wrapper .dataTables_paginate{
  border: 0 !important;
}


/* Color del tab activo */
.cmx-tabla-nombres .tabs a.active{
  color: #003057 !important;
}






/* =====================================
   Paginación - estado activo
   ===================================== */

.cmx-tabla-nombres .dataTables_paginate .paginate_button.current{
  background: #003057 !important;
  color: #ffffff !important;
  border: 1px solid #003057 !important;
}

/* evitar que cambie al pasar el mouse */
.cmx-tabla-nombres .dataTables_paginate .paginate_button.current:hover{
  background: #003057 !important;
  color: #ffffff !important;
}


.cmx-tabla-nombres .dataTables_paginate .paginate_button{
  color: #003057;
}

/* Hover paginación */
.cmx-tabla-nombres .dataTables_paginate .paginate_button:hover{
  background: #00A3A6 !important;
  color: #ffffff !important;
  border: 1px solid #00A3A6 !important;
}


/* ======================================
   Hover row outline
   Reliable version for tables
   ====================================== */

/* Keep the row background as is */
.cmx-tabla-nombres table.dataTable tbody tr:hover td{
  position: relative;
  border-top: 1px solid #7a8a96 !important;
  border-bottom: 1px solid #7a8a96 !important;
}

/* Left side of the outline */
.cmx-tabla-nombres table.dataTable tbody tr:hover td:first-child{
  border-left: 1px solid #7a8a96 !important;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
}

/* Right side of the outline */
.cmx-tabla-nombres table.dataTable tbody tr:hover td:last-child{
  border-right: 1px solid #7a8a96 !important;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}

/* ======================================
   Encabezados de tabla sin negritas
   ====================================== */

.cmx-tabla-nombres table.dataTable thead th{
  font-family: Roboto, Helvetica, Arial, sans-serif !important;
  font-weight: 400 !important;   /* Roboto Regular */
}


/* Bordes horizontales del mismo grosor que los verticales */
.cmx-tabla-nombres table.dataTable tbody td{
  border-top: 1px solid #dee2e6 !important;
}

.cmx-tabla-nombres table.dataTable thead th{
  border-bottom: 1px solid #dee2e6 !important;
}
.cmx-tabla-nombres table.dataTable tbody td{
  border-right: 1px solid #dee2e6 !important;
}