section#principal{
    top: 50px;
    left: 0;
    background-color: white;
    color: #198754;
    display: block;
}

#resultadosTitulo{
    margin: 5px auto;
    height: 40px;
    text-align: center;
    text-decoration: underline;
}

#resultadosTitulo > h3 > b{
    font-family: segoe-print;
}

#resultadosContenido{
    overflow-y: overlay;
    height: 600px;
    margin:auto;
}

div.form-group{
    margin: 10px auto;
}
h3.card-title{
    margin: 10px auto 25px;
    color:white;
}
#cartaBuscador, #cartaDatosParticipante, #cartaDatosJuego{
    color: white;
    background-color: #198754;
}
input, input::placeholder, input:focus{
    color: #198754 !important;
}
body{
    overflow-x: hidden;
}
#cartaBuscador{
    margin: 10px auto;
}
#cartaDatosParticipante{
    margin: 10px auto 10px 0;
}
#cartaDatosJuego{
    margin: 10px 0 10px auto;
}
button.nav-link{
    background-color: white !important;
    color: #198754 !important;
    border:2.5px solid #198754 !important; 
    border-bottom: 0 !important;
    margin: 5px;
}
button.nav-link.active{
    background-color: #198754 !important;
    border-bottom: 0 !important;
    color: white !important;
}
.nav-tabs {
    border:0;
}
.tab-pane{
    border:2.5px solid #198754 !important; 
}
.tab-content{
    margin: 5px auto;
}
#nav-resultados{
    margin:5px;
    padding:2.5px;
    background-color: white;
}
#tablaResultados_wrapper{
    border: 1px solid #198754;
    padding:2.5px 5px;
    color:green;
}

th, td{
    color: #198754 !important;
}
.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: white;
    color: white !important;
    --bs-table-bg-type: #198754;
}
.table-striped>tbody>tr:nth-of-type(even)>* {
    --bs-table-bg-type: white;
    --bs-table-color-type: #198754;
    color: #198754 !important;
}
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
    color: white !important;
    background-color: #198754 !important;
}

div.dt-container .dt-paging .dt-paging-button:hover {
    color: white !important;
    background: #198754 !important;
}
div.dt-container .dt-paging .dt-paging-button.disabled:hover{
    color: rgba(0, 0, 0, 0.5) !important;
    background: transparent !important;
}
#alerta-resultados {
    min-height: 100px;
}

/* Botones numéricos de paginación: fondo verde, texto blanco */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: #198754 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px;
    margin: 0 2px;
    transition: background 0.2s, color 0.2s;
}

/* Botones numéricos hover: fondo blanco, texto verde */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #fff !important;
    color: #198754 !important;
    border: 1px solid #198754 !important;
}

/* Botones especiales (first, last, previous, next, disabled): fondo blanco, texto verde */
div.dt-container .dt-paging .dt-paging-button.first,
div.dt-container .dt-paging .dt-paging-button.last,
div.dt-container .dt-paging .dt-paging-button.previous,
div.dt-container .dt-paging .dt-paging-button.next {
    background-color: #fff !important;
    color: #198754 !important;
    border: 1px solid #198754 !important;
    border-radius: 4px;
    margin: 0 2px;
    transition: background 0.2s, color 0.2s;
}

/* Botones especiales hover: fondo verde, texto blanco */
div.dt-container .dt-paging .dt-paging-button.first:hover,
div.dt-container .dt-paging .dt-paging-button.last:hover,
div.dt-container .dt-paging .dt-paging-button.previous:hover,
div.dt-container .dt-paging .dt-paging-button.next:hover {
    background-color: #198754 !important;
    color: #fff !important;
    border: none !important;
}

.accordion{
    --bs-accordion-bg: #198754;
    --bs-accordion-btn-color: white;
    --bs-accordion-border-color: white;
    --bs-accordion-border-left-color: white;
    --bs-accordion-border-right-color: white;
    --bs-accordion-border-radius: 1px;
    --bs-accordion-inner-border-radius: 1px;
}
.accordion-header{
    background-color:#198754;
    color: white;
    --bs-accordion-active-bg: #198754;
    --bs-accordion-border-color: #198754;
    --bs-accordion-active-color: white;
}
.accordion-collapse{
    color:#198754;
    background-color: white;
}
.accordion-item{
    background-color:#198754;
    border: white solid 2.5px;
    border-left-color: #198754;
    border-right-color: #198754;
}
/* Centrar la paginación de DataTables */
.dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    float: none !important;
    margin: 10px 0;
}
#collapseDatos {
    max-height: 300px;
    overflow-y: auto;
}

/* Canvas para gráficas */
canvas {
    max-height: 300px;
}

/* Mejoras visuales para estadísticas */
#estadisticasContenido {
    margin-bottom: 50px; /* Espacio antes del footer */
}

#estadisticasContenido .articulos {
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 20px;
    margin-bottom: 20px;
}

#estadisticasContenido .articulos h3 {
    color: #198754;
    border-bottom: 2px solid #198754;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Mejorar apariencia de tablas en estadísticas */
#estadisticasContenido .table {
    margin-bottom: 0;
}

#estadisticasContenido .table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Badges más grandes y legibles */
#estadisticasContenido .badge {
    font-size: 1rem;
    padding: 8px 12px;
    min-width: 50px;
}

#estadisticasContenido .badge.fs-5 {
    font-size: 1.5rem !important;
    padding: 10px 15px;
}

/* Iconos de información con hover */
[data-bs-toggle="tooltip"] {
    cursor: help;
    transition: color 0.2s;
}

[data-bs-toggle="tooltip"]:hover {
    color: #198754 !important;
}

/* Alert de información mejorado */
.alert-info {
    background-color: #e7f3ff;
    border-color: #b8daff;
    color: #004085;
}

.alert-info h5 {
    color: #004085;
    font-weight: bold;
}

/* Espaciado del footer */
footer {
    /*margin-top: 60px;
    min-height: 80px;*/
}

/* Títulos de sección más destacados */
#estadisticasTitulo h3 {
    background: linear-gradient(135deg, #198754 0%, #20c997 100%);
    color: white;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* Mejorar thead de tablas */
#estadisticasContenido thead {
    background-color: #f8f9fa;
}

#estadisticasContenido thead th {
    color: #198754;
    font-weight: bold;
    border-bottom: 2px solid #198754;
}

/* Responsive: ajustes para móviles */
@media (max-width: 768px) {
    #estadisticasContenido .articulos {
        padding: 15px;
    }
    
    #estadisticasContenido .badge {
        font-size: 0.9rem;
        padding: 6px 10px;
    }
    
    #estadisticasContenido .articulos h3 {
        font-size: 1.2rem;
    }
}