div.alphabet {
clear:both;
position:relative;
margin:0.5em 0;
}
@media screen and (max-width:640px){
div.alphabet {
text-align:center;
}
}
div.alphabet ul {
display:inline-block;
margin:0;
padding:0;
list-style:none;
}
div.alphabet li {
display:inline-block;
}
div.alphabet a {
display:inline-block;
cursor:pointer;
text-align:center;
text-decoration:none;
box-sizing:content-box;
padding:0.2em 0.1em;
min-width:1.3em;
color:#ec6608 !important;
border:1px solid transparent;
border-radius:2px;
} div.alphabet a:hover {
color:#FFF !important;
border:1px solid #ec6608 !important;
background-color:#ec6608 !important;
background:linear-gradient(to bottom, #ec6608 0%, #d45507 100%) !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(236,102,8,0.3);
transition: all 0.25s ease-in-out;
} div.alphabet a.empty:hover {
color:red !important;
border:1px solid transparent !important;
background:none !important;
transform: none;
box-shadow: none;
}
div.alphabet a:active {
outline:none;
background-color:#ec6608;
background:linear-gradient(to bottom, #ec6608 0%, #b33924 100%);
box-shadow:inset 0 0 3px #ec6608;
} 
div.alphabet a.empty {
color:#888 !important;
} div.alphabet a.active,
div.alphabet a.active.empty {
color:#FFF !important;
border:1px solid #ec6608;
background-color:#ec6608 !important;
background:linear-gradient(to bottom, #ec6608 0%, #d45507 100%);
transform: scale(1.05);
box-shadow: 0 3px 6px rgba(236,102,8,0.4);
} div.alphabet .alphabet-info-display {
display: none !important;
visibility: hidden !important;
}
div.alphabet div.alphabet-info {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position:absolute;
border:1px solid #ec6608;
background-color:#f9f3e9;
background:linear-gradient(to bottom, #f9f3e9 0%, #ec6608 100%);
border-radius:2px;
color:#f9f3e9;
margin-top:0.2em;
padding:0.2em 0.4em;
text-align:center;
z-index:9999;
}
tr.alphabet-group, tr.alphabet-group:hover {
background-color:#ec6608 !important;
}
div.alphabet div.alphabet-info[style] {
display: none !important;
opacity: 0 !important;
}@import url("https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap");
:root {
--color-principal: #192847;
--color-acento: #ec6608;
--color-fondo: #F9F3E9;
--color-texto: #333;
--radio-filtros: 25px;
--fuente-principal: "Fira Sans", sans-serif;
}
body {
font-family: var(--fuente-principal);
}
.container-filtros {
margin: 0 auto !important;
}
.container-filtros p {
margin-bottom: 0 !important;
} .filtros-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 15px;
align-items: center;
} .filtros-grid select,
.filtros-grid input[type="text"] {
padding: 14px 18px;
border: 2px solid var(--color-acento);
border-radius: var(--radio-filtros);
background-color: transparent;
color: var(--color-principal);
font-size: 0.95rem;
font-family: var(--fuente-principal);
transition: all 0.25s ease-in-out;
max-width: 1920px;
min-height: 45px;
height: auto;
box-sizing: border-box;
appearance: none;
text-align: center;
line-height: 1.0 !important;
padding-bottom: 16px !important;
} .filtros-grid select {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23244064" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
padding-right: 35px;
background-repeat: no-repeat;
background-position: right 12px center;
transition: all 0.25s ease-in-out; } .filtros-grid select:hover,
.filtros-grid input:hover {
background-color: var(--color-acento);
color: white; border-color: var(--color-acento);
box-shadow: 0 2px 8px rgba(208, 74, 49, 0.3);
} .filtros-grid select:hover {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>');
}
.filtros-grid select:focus,
.filtros-grid input:focus {
outline: none;
border-color: var(--color-acento);
box-shadow: 0 0 8px rgba(208, 74, 49, 0.5);
} #limpiar-filtros {
background: var(--color-acento);
color: #fff;
border: none;
border-radius: var(--radio-filtros);
padding: 10px 18px;
font-weight: 500;
font-size: 0.95rem;
font-family: var(--fuente-principal);
cursor: pointer;
transition: background 0.25s ease-in-out;
width: 100%;
}
#limpiar-filtros:hover {
background: #ec6604;
} .table-usuarios {
width: 100%;
border-collapse: collapse;
margin: 40px auto;
max-width: 1900px;
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
font-family: var(--fuente-principal);
}
.table-usuarios th {
background: var(--color-principal);
color: #fff;
text-align: left;
padding: 14px 20px;
font-size: 1rem;
font-weight: 600;
max-width: 1900px;
}
.table-usuarios td {
padding: 12px 20px;
border-bottom: 1px solid #e0e0e0;
color: var(--color-texto);
}
.table-usuarios tr:hover {
background: #f3f6f9;
}
.table-usuarios a {
color: var(--color-acento);
text-decoration: none;
font-weight: 500;
} div.alphabet {
display: flex !important;
align-items: center;
flex-wrap: wrap;
gap: 15px 20px !important;
margin: 25px auto !important;
padding: 10px 0;
max-width: 1900px;
justify-content: center;
background: transparent !important;
}
div.alphabet a {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
cursor: pointer;
margin: 2px;
width: 45px;
height: 45px;
padding: 0;
font-size: 0.95rem;
font-weight: 600;
text-transform: uppercase;
border-radius: 50% ;
border: 2px solid var(--color-principal);
color: var(--color-principal) !important;
background-color: white !important;
transition: all 0.25s ease-in-out;
}
div.alphabet a.btn-todos {
width: auto !important;
height: auto !important;
padding: 8px 14px !important;
border-radius: 25px !important;
} div.alphabet a:hover:not(.active):not(.empty) {
background-color: var(--color-acento);
color: #fff !important;
border-color: var(--color-acento);
transform: translateY(-2px);
}
div.alphabet a.active {
background-color: var(--color-acento) !important;
color: #fff !important;
border-color: var(--color-acento) !important;
transform: scale(1.05);
}
div.alphabet a.empty {
opacity: 0.35;
pointer-events:none;
} div.alphabet .alphabet-info-display,
div.alphabet div.alphabet-info {
display: none !important;
} .dataTables_length {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
margin-left: 15px !important;
margin-top: 5px !important;
}
.dataTables_length select {
width: auto !important;
padding: 6px 12px;
border-radius: 20px;
border: 2px solid var(--color-acento);
background: white;
cursor: pointer;
} @media (max-width: 768px) {
.filtros-grid {
grid-template-columns: 1fr;
gap: 15px; } .filtro-item {
width: 100%;
margin-bottom: 10px;
}
.filtro-item label {
font-size: 14px;
margin-bottom: 5px;
display: block;
white-space: normal; word-wrap: break-word;
}
.filtro-item select {
width: 100% !important;
max-width: 100%;
font-size: 14px;
padding: 8px;
box-sizing: border-box;
}
.dataTables_length {
margin-top: 15px !important;
justify-content: center;
} .select2-container {
width: 100% !important;
max-width: 100%;
}
.select2-container .select2-selection--single {
height: auto;
min-height: 38px;
}
} @media (max-width: 480px) {
.filtro-item label {
font-size: 13px;
}
.filtro-item select {
font-size: 13px;
padding: 6px;
}
} .alphabet,
.dataTables_length {
display: inline-flex !important;
align-items: center !important;
vertical-align: middle !important;
}
.dataTables_length {
margin-left: 15px !important;
margin-bottom: 10px !important;
} .dt-top-container {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.dt-top-container .alphabet {
margin-top: 5px !important;
}
.dt-top-container .dataTables_length {
margin-top: 0 !important;
padding-top: 0 !important;
}  .dataTables_paginate {
display: flex !important;
justify-content: center !important;
margin-top: 200px !important; margin-bottom: 25px !important; font-family: var(--fuente-principal);
padding-top: 20px !important;
} .dataTables_paginate .paginate_button {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
padding: 0;
margin: 4px;
margin-top: 30px;
height: 45px;
width: 45px;
border-radius: 50%;
border: 2px solid var(--color-principal);
background: white;
color: var(--color-principal) !important;
font-weight: 600;
cursor: pointer;
text-decoration: none !important;
transition: all 0.25s ease-in-out;
} .dataTables_paginate .paginate_button:hover:not(.current) {
background: var(--color-acento);
border-color: var(--color-acento);
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(236,102,8,0.3);
} .dataTables_paginate .paginate_button.current {
background: var(--color-acento) !important;
border-color: var(--color-acento) !important;
color: #fff !important;
transform: scale(1.05);
cursor: default;
} .dataTables_paginate .paginate_button.disabled {
opacity: 0.4;
pointer-events: none;
} .dataTables_paginate .paginate_button.previous,
.dataTables_paginate .paginate_button.next {
width: auto !important;
height: auto !important;
padding: 4px 14px !important;
border-radius: 25px !important;
} @media (max-width: 600px) { .dataTables_wrapper .dataTables_paginate span {
display: none !important;
} .dataTables_wrapper .dataTables_paginate span .paginate_button.current {
display: inline-block !important;
} .dataTables_wrapper .dataTables_paginate span:has(.current) {
display: inline-block !important;
} .dataTables_wrapper .dataTables_paginate .paginate_button.previous,
.dataTables_wrapper .dataTables_paginate .paginate_button.next {
display: inline-block !important;
} .dataTables_wrapper .dataTables_paginate span .ellipsis,
.dataTables_wrapper .dataTables_paginate span .paginate_button:not(.current) {
display: none !important;
}
} table.dataTable tr.group td {
background: #ec6608 !important;
color: white !important;
font-weight: 700;
padding: 12px 15px !important;
font-size: 1.1rem;
border: none !important;
height: 48px !important;
line-height: 48px !important;
} .elementor-location-header,
header,
.site-header {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
} .container-filtros {
margin-top: 4px !important;
padding-top: 0 !important;
background: #fff;
} .elementor-section {
margin-bottom: 0 !important;
} .dataTables_wrapper {
background: white !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.dataTables_wrapper .row {
margin-top: 0 !important;
padding-top: 0 !important;
} .dataTables_wrapper .dt-top-container {
margin: 0 !important;
padding: 0 !important;
} .dataTables_wrapper > div:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
} .dataTables_wrapper,
.dataTables_wrapper > div,
.dataTables_wrapper .dt-top-container,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .row:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
} .dt-top-container > div {
margin-top: 0 !important;
padding-top: 0 !important;
} .container-filtros {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
} div.alphabet {
margin-top: 0 !important;
padding-top: 0 !important;
}