/* ==================================================
   Widget: Tabla Nombres Dinámica
   Scope único: .cmx-tabla-nombres
   NO GLOBAL – NO INVASIVO
   ================================================== */

.cmx-tabla-nombres {
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  font-size: 14px;
  color: #27251f;
}

/* --- Tabs (barra superior) --- */
.cmx-tabla-nombres .tabs {
  text-align: center;
}

.cmx-tabla-nombres .tabs table {
  margin: 0 auto;
  border-collapse: collapse;
}

.cmx-tabla-nombres .tabs td {
  padding: 6px 10px;
}

.cmx-tabla-nombres .tabs a {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

.cmx-tabla-nombres .tabs a.active {
  font-weight: bold;
}


/* ===============================
   Fuente alineada con tabla
   =============================== */

.cmx-tabla-nombres .fuente-tabla {
  font-family: Roboto, Arial, sans-serif;
  font-size: 12px;
  line-height: 14px;
  color: #27251f; /* o el color exacto del estático */
}

/* Forzar que tome el mismo ancho que DataTables */
.cmx-tabla-nombres .dataTables_wrapper + .fuente-tabla {
  width: 100%;
  max-width: 100%;
}

/* --- Texto auxiliar --- */
.cmx-tabla-nombres .fuente {
  font-size: 11px;
  color: #999;
  text-align: right;
  margin-top: 4px;
}

/* --- Secciones controladas por JS --- */
.cmx-tabla-nombres .item {
  display: none;
}

.cmx-tabla-nombres .item.active {
  display: block;
}

/* --- Ajustes suaves a DataTables SIN pisarlo --- */
.cmx-tabla-nombres table.display {
  width: 100%;
}

.cmx-tabla-nombres table.display th,
.cmx-tabla-nombres table.display td {
  vertical-align: middle;
}


/* ===============================
   Ajuste flechas DataTables
   Quita el recuadro blanco
   =============================== */

.cmx-tabla-nombres table.dataTable thead th.sorting,
.cmx-tabla-nombres table.dataTable thead th.sorting_asc,
.cmx-tabla-nombres table.dataTable thead th.sorting_desc,
.cmx-tabla-nombres table.dataTable thead th.sorting_asc_disabled,
.cmx-tabla-nombres table.dataTable thead th.sorting_desc_disabled {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
}


/* ===============================
   FIX: quitar "cuadritos" del header (pseudo-elementos)
   sin tocar las flechas PNG de DataTables (background-image)
   =============================== */
.cmx-tabla-nombres table.dataTable thead th::before,
.cmx-tabla-nombres table.dataTable thead th::after,
.cmx-tabla-nombres table.dataTable thead td::before,
.cmx-tabla-nombres table.dataTable thead td::after {
  content: none !important;
  display: none !important;
}

/* Cambia el hover naranja de DataTables dentro del widget */
.cmx-tabla-nombres table.dataTable.hover tbody tr:hover,
.cmx-tabla-nombres table.dataTable.display tbody tr:hover {
  background-color: #ffffff !important; /* elige el color que quieras */
}

/* Hover: contorno alrededor de TODA la fila */
.cmx-tabla-nombres table.dataTable tbody tr {
  position: relative; /* necesario para el pseudo-elemento */
}

.cmx-tabla-nombres table.dataTable tbody tr:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border: 2px solid #8a99a8;   /* color del contorno */
  border-radius: 4px;          /* esquinas suaves, como tu ejemplo */
  pointer-events: none;        /* para no bloquear clicks */
}


/* Evitar doble línea al final */
.cmx-tabla-nombres table.dataTable thead th:last-child,
.cmx-tabla-nombres table.dataTable tbody td:last-child {
  border-right: none !important;
}

/* ===============================
   Zebra más oscuro (homologar diseño)
   =============================== */

/* Filas pares */
.cmx-tabla-nombres table.dataTable tbody tr.even {
  background-color: #f2f2f2 !important;
}

/* Filas impares */
.cmx-tabla-nombres table.dataTable tbody tr.odd {
  background-color: #ffffff !important;
}

/* Mantener el hover por encima del zebra */
.cmx-tabla-nombres table.dataTable.hover tbody tr:hover,
.cmx-tabla-nombres table.dataTable.display tbody tr:hover {
  background-color: #ffffff !important;
}

/* ===============================
   Aumentar altura de filas
   =============================== */

.cmx-tabla-nombres table.dataTable thead th {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  line-height: 1.2;
}

.cmx-tabla-nombres table.dataTable tbody td {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}


/* ===============================
   Bordes completos de la tabla
   (mismo estilo que división de columnas)
   =============================== */

.cmx-tabla-nombres table.dataTable {
  border: 1px solid #dee2e6 !important; /* borde exterior */
  border-collapse: separate !important;
  border-spacing: 0;
}

/* Bordes verticales y horizontales */
.cmx-tabla-nombres table.dataTable thead th,
.cmx-tabla-nombres table.dataTable tbody td {
  border-right: 1px solid #dee2e6 !important;
  border-bottom: 1px solid #dee2e6 !important;
}

/* Quitar borde derecho de la última columna */
.cmx-tabla-nombres table.dataTable thead th:last-child,
.cmx-tabla-nombres table.dataTable tbody td:last-child {
  border-right: none !important;
}

/* Quitar doble borde inferior en la última fila */
.cmx-tabla-nombres table.dataTable tbody tr:last-child td {
  border-bottom: none !important;
}

/* FIX: desactivar contorno con ::after (provoca compresión en tabs) */
.cmx-tabla-nombres table.dataTable tbody tr:hover::after {
  content: none !important;
  display: none !important;
}

/* Hover: contorno sin afectar el ancho/alto de la tabla */
.cmx-tabla-nombres table.dataTable tbody tr:hover {
  box-shadow: inset 0 0 0 2px #8a99a8;
}

/* Estabiliza el ancho de columnas para evitar brincos */
.cmx-tabla-nombres table.dataTable {
  table-layout: fixed !important;
  width: 100% !important;
}



/* Tab activo más notorio */
.cmx-tabla-nombres .tabs a.active{
  font-weight: 700;
  position: relative;
}

/* Subrayado */
.cmx-tabla-nombres .tabs a.active::after{
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: -6px;
  height: 3px;
  background: #02aab0;
  border-radius: 2px;
}


/* Honorio */
/* ===============================
   Aviso SOBRE el buscador
   =============================== */

/* Contenedor del buscador */
.cmx-tabla-nombres .dataTables_filter{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

/* Aviso debajo del buscador con icono */
.cmx-tabla-nombres .dataTables_filter::after{
  content: "El buscador no reconoce acentos";
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 12px;
  color: #6b7785;
  line-height: 1.2;
  margin-top: 4px;

  padding-left: 18px;
  background-image: url("/explora/poblacion/natalidad/scripts/alerta30.png");
  background-repeat: no-repeat;
  background-size: 14px 14px;
  background-position: left center;
}

/* Input del buscador */
.cmx-tabla-nombres .dataTables_filter input{
  margin: 0;
}

/* Ocultar texto original del HTML */
.cmx-tabla-nombres .tabbed-content .fuente{
  display: none;
}






/* ===============================
   FIX overflow: tabla no se sale del contenedor
   =============================== */

/* El contenedor del widget nunca debe desbordar */
.cmx-tabla-nombres{
  max-width: 100%;
  overflow-x: auto;
}

/* Wrapper que usa DataTables */
.cmx-tabla-nombres .dataTables_wrapper{
  width: 100%;
  max-width: 100%;
}

/* La tabla siempre se ajusta al ancho disponible */
.cmx-tabla-nombres table.dataTable{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* Evita que celdas largas “empujen” más ancho */
.cmx-tabla-nombres table.dataTable th,
.cmx-tabla-nombres table.dataTable td{
  box-sizing: border-box;
}

/* Quitar bold del encabezado de la tabla de nombres */
.cmx-tabla-nombres table.dataTable thead th {
  font-weight: normal !important;
}

/* Quitar marco exterior (card) del widget de nombres */
.cmx-tabla-nombres .tabbed-content {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Separación entre buscador y tabla */
.cmx-tabla-nombres .dataTables_filter {
  margin-bottom: 16px;
}

/* Tabs Mujer / Hombre / Ambos - estado normal */
.cmx-tabla-nombres .tabs a {
  color: #999999;          /* gris */
  font-weight: 400;        /* normal */
}

/* Tab activo */
.cmx-tabla-nombres .tabs a.active {
  color: #000000;          /* negro puro */
  font-weight: 700;        /* negritas */
}



/* ==================================================
   LOOK "tabla estática" (como tu imagen)
   Scope: solo dentro del widget .cmx-tabla-nombres
   ================================================== */

/* Marco con borde y esquinas redondeadas */
.cmx-tabla-nombres .dataTables_wrapper{
  border: 1px solid #d9e1ea;
  border-radius: 4px;
  overflow: hidden;          /* recorta esquinas del header/filas */
  background: #fff;
}

/* Tabla: grid continuo (SIN border-spacing) */
.cmx-tabla-nombres table.dataTable{
  width: 100% !important;
  margin: 0 !important;
  border: none !important;   /* el borde lo maneja el wrapper */
  border-collapse: separate !important;
  border-spacing: 0 !important;  /* <- clave para que se vea como la imagen */
}

/* Encabezado turquesa con texto blanco */
.cmx-tabla-nombres table.dataTable thead th{
  background: #00a7a7 !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-align: center !important;
  border-bottom: 0 !important;
}

/* Celdas: borde fino tipo grid */
.cmx-tabla-nombres table.dataTable tbody td,
.cmx-tabla-nombres table.dataTable tbody th{
  border-top: 1px solid #d9e1ea !important;
  border-right: 1px solid #d9e1ea !important;
  text-align: center !important;
}

/* Quitar borde derecho en última columna */
.cmx-tabla-nombres table.dataTable thead th:last-child,
.cmx-tabla-nombres table.dataTable tbody td:last-child{
  border-right: 0 !important;
}

/* Zebra como la imagen */
.cmx-tabla-nombres table.dataTable tbody tr:nth-child(odd) td{
  background: #f3f3f3 !important;
}
.cmx-tabla-nombres table.dataTable tbody tr:nth-child(even) td{
  background: #ffffff !important;
}

/* (Opcional) desactiva el hover naranja de DataTables si te estorba */
.cmx-tabla-nombres table.dataTable.hover tbody tr:hover td,
.cmx-tabla-nombres table.dataTable.display tbody tr:hover td{
  background: inherit !important;
}