/**


 * Estilos del plugin Gestión de Socios


 *


 * @package GestionSociosBanda


 * @since 1.0.0


 */





/* ==========================================


   Variables de color


   ========================================== */


:root {


    --gs-color-boton: #d9c151;


    --gs-color-oscuro: #2b2b2b;


    --gs-color-gris: #f4f4f4;


    --gs-color-carbon: #3c3c3c;


    --gs-color-azul: #4a6fa5;


    --gs-color-verde: #73a580;


    --gs-color-rojo: #c57268;


}





/* ==========================================


   Estilos base - implementar


   ========================================== */





/* Wrapper general */


.gs-area-socio {


    max-width: 1200px;


    margin: 0 auto;


    padding: 20px;


}





/* ==========================================


   Sistema de pestañas


   ========================================== */





.gs-tabs {


    background: #fff;


    border-radius: 8px;


    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


    overflow: hidden;


}





.gs-tab-nav {


    display: flex;


    list-style: none;


    margin: 0;


    padding: 0;


    background: var(--gs-color-gris);


    border-bottom: 2px solid var(--gs-color-oscuro);


}





.gs-tab-item {


    flex: 1;


}





.gs-tab-link {


    display: block;


    padding: 18px 24px;


    text-decoration: none;


    color: var(--gs-color-carbon);


    text-align: center;


    font-weight: 500;


    transition: all 0.3s ease;


    border-bottom: 3px solid transparent;


}





.gs-tab-link:hover {


    background: rgba(217, 193, 81, 0.1);


    color: var(--gs-color-oscuro);


}





.gs-tab-link.active {


    background: #fff;


    color: var(--gs-color-oscuro);


    border-bottom-color: var(--gs-color-boton);


}





.gs-tab-content-wrapper {


    padding: 30px;


}





/* Tabs del área de socio (JavaScript) */


.gs-area-socio .gs-tab-content {


    display: none;


}





.gs-area-socio .gs-tab-content.active {


    display: block;


    animation: fadeIn 0.3s ease-in;


}





/* Tabs del área de alumno (JavaScript) */


.gs-area-alumno .gs-tab-content {


    display: none;


}





.gs-area-alumno .gs-tab-content.active {


    display: block;


    animation: fadeIn 0.3s ease-in;


}





/* Tabs del panel admin (PHP con parámetro ?tab=) */


.gs-panel-admin .gs-tab-content {


    /* Siempre visible, gestionado por PHP */


}





.gs-tab-content.active {


    display: block;


    animation: fadeIn 0.3s ease-in;


}





@keyframes fadeIn {


    from {


        opacity: 0;


        transform: translateY(10px);


    }


    to {


        opacity: 1;


        transform: translateY(0);


    }


}





.gs-tab-content h2 {


    margin-top: 0;


    margin-bottom: 24px;


    color: var(--gs-color-oscuro);


    font-size: 26px;


    border-bottom: 2px solid var(--gs-color-gris);


    padding-bottom: 12px;


}





/* ==========================================


   Tablas de datos


   ========================================== */





.gs-data-table,


.gs-alumnos-table {


    width: 100%;


    min-width: 760px;
    border-collapse: collapse;


    margin: 20px 0;


}


.gs-table-scroll {


    width: 100%;


    overflow-x: auto;


    -webkit-overflow-scrolling: touch;


}



.gs-data-table th,


.gs-data-table td,


.gs-alumnos-table th,


.gs-alumnos-table td {


    padding: 14px 16px;


    text-align: left;


    border-bottom: 1px solid #e0e0e0;


}





.gs-data-table th {


    width: 30%;


    font-weight: 600;


    color: var(--gs-color-carbon);


    background: var(--gs-color-gris);


}





.gs-data-table td {


    color: var(--gs-color-oscuro);


}





.gs-alumnos-table thead th {


    background: var(--gs-color-carbon);


    color: #fff;


    font-weight: 600;


    text-transform: uppercase;


    font-size: 13px;


    letter-spacing: 0.5px;


}





.gs-alumnos-table tbody tr:nth-child(even) {


    background: #f9f9f9;


}





.gs-alumnos-table tbody tr:hover {


    background: rgba(217, 193, 81, 0.1);


}





.gs-alumno-nombre {


    font-weight: 500;


    color: var(--gs-color-oscuro);


}





/* ==========================================


   Botones


   ========================================== */





.gs-btn {


    display: inline-block;


    padding: 12px 24px;


    font-size: 15px;


    font-weight: 500;


    text-decoration: none;


    text-align: center;


    border: none;


    border-radius: 4px;


    cursor: pointer;


    transition: all 0.3s ease;


}





.gs-btn-primary {


    background: var(--gs-color-boton);


    color: var(--gs-color-oscuro);


}





.gs-btn-primary:hover {


    background: #c5ae47;


    transform: translateY(-2px);


    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);


}





.gs-btn-secondary {


    background: var(--gs-color-azul);


    color: #fff;


}





.gs-btn-secondary:hover {


    background: #3d5c8c;


}





.gs-btn-secondary:disabled {


    background: #ccc;


    cursor: not-allowed;


    opacity: 0.6;


}





.gs-btn-tertiary {


    background: #6c757d;


    color: white;


}





.gs-btn-tertiary:hover {


    background: #5a6268;


}





.gs-btn-small {


    padding: 8px 16px;


    font-size: 13px;


}





/* ==========================================


   Tarjetas y contenedores


   ========================================== */





.gs-card {


    background: var(--gs-color-gris);


    padding: 24px;


    border-radius: 6px;


    border-left: 4px solid var(--gs-color-boton);


}





.gs-form-container {


    background: #fff;


    padding: 20px;


    border-radius: 6px;


}





/* ==========================================


   Badges y etiquetas


   ========================================== */





.gs-badge {


    display: inline-block;


    padding: 4px 12px;


    font-size: 13px;


    font-weight: 500;


    border-radius: 12px;


}





.gs-badge-success {


    background: var(--gs-color-verde);


    color: #fff;


}





.gs-badge-default {


    background: #ddd;


    color: var(--gs-color-carbon);


}





/* ==========================================


   Avisos y mensajes


   ========================================== */





.gs-notice {


    padding: 16px 20px;


    margin: 20px 0;


    border-radius: 4px;


    border-left: 4px solid;


}





.gs-notice-error {


    background: #ffeaea;


    border-color: var(--gs-color-rojo);


    color: #a94442;


}





.gs-notice-warning {


    background: #fff4e5;


    border-color: #f0ad4e;


    color: #8a6d3b;


}





.gs-notice-info {


    background: #e8f4f8;


    border-color: var(--gs-color-azul);


    color: #31708f;


}





.gs-notice-success {


    background: #eef7f0;


    border-color: var(--gs-color-verde);


    color: #3c763d;


}





/* ==========================================


   Utilidades


   ========================================== */





.gs-help-text {


    font-size: 14px;


    color: #777;


    font-style: italic;


    margin-top: 12px;


}





.gs-mt-3 {


    margin-top: 16px;


}





.gs-text-muted {


    color: #777;


    font-size: 14px;


}





/* ==========================================


   Materiales


   ========================================== */





.gs-materiales-section {


    max-width: 1200px;


    margin: 0 auto;


    padding: 20px;


}





.gs-materiales-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    margin-bottom: 20px;


    flex-wrap: wrap;


    gap: 15px;


}





.gs-materiales-header h2 {


    margin: 0;


    font-size: 24px;


    color: var(--gs-color-oscuro);


}





.gs-materiales-table {


    width: 100%;


    background: white;


    border-collapse: collapse;


    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);


    border-radius: 4px;


    overflow: hidden;


}





.gs-materiales-table thead {


    background: var(--gs-color-gris);


    border-bottom: 2px solid #ddd;


}





.gs-materiales-table thead th {


    padding: 14px 12px;


    text-align: left;


    font-size: 13px;


    font-weight: 600;


    color: var(--gs-color-oscuro);


    text-transform: uppercase;


    letter-spacing: 0.5px;


}





.gs-materiales-table tbody tr {


    border-bottom: 1px solid #e0e0e0;


    transition: background 0.2s;


}





.gs-materiales-table tbody tr:hover {


    background: #f9f9f9;


}





.gs-materiales-table tbody tr:last-child {


    border-bottom: none;


}





.gs-materiales-table td {


    padding: 14px 12px;


    font-size: 14px;


    color: #555;


}





.gs-materiales-table td strong {


    color: var(--gs-color-oscuro);


    font-weight: 600;


}





.gs-material-tipo {


    display: inline-block;


    padding: 4px 10px;


    border-radius: 12px;


    font-size: 12px;


    font-weight: 600;


    text-transform: uppercase;


    letter-spacing: 0.5px;


}





.gs-material-tipo.tipo-global {


    background: #e3f2fd;


    color: #1976d2;


}





.gs-material-tipo.tipo-curso {


    background: #fff3e0;


    color: #f57c00;


}





.gs-material-tipo.tipo-individual {


    background: #f3e5f5;


    color: #7b1fa2;


}





/* ==========================================


   Área de Profesor


   ========================================== */





.gs-area-profesor {


    max-width: 1400px;


    margin: 0 auto;


    padding: 20px;


}





.gs-profesor-header {


    margin-bottom: 30px;


    border-bottom: 2px solid var(--gs-color-gris);


    padding-bottom: 15px;


}





.gs-profesor-header h1 {


    margin: 0 0 10px 0;


    font-size: 28px;


    color: var(--gs-color-oscuro);


}





.gs-welcome {


    margin: 0;


    font-size: 16px;


    color: #555;


}





.gs-alumnos-profesor-section {


    background: white;


    border-radius: 4px;


    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);


    padding: 20px;


}





.gs-section-header {


    margin-bottom: 20px;


    padding-bottom: 10px;


    border-bottom: 1px solid #ddd;


}





.gs-section-header h2 {


    margin: 0;


    font-size: 22px;


    color: var(--gs-color-oscuro);


}





/* ==========================================


   Modales


   ========================================== */





.gs-modal {


    display: none;


    position: fixed;


    z-index: 9999;


    left: 0;


    top: 0;


    width: 100%;


    height: 100%;


    background: rgba(0, 0, 0, 0.6);


    overflow-y: auto;


}





.gs-modal-content {


    background: white;


    margin: 50px auto;


    padding: 30px;


    width: 90%;


    max-width: 800px;


    border-radius: 4px;


    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);


    animation: slideDown 0.3s ease;


}





@keyframes slideDown {


    from {


        opacity: 0;


        transform: translateY(-30px);


    }


    to {


        opacity: 1;


        transform: translateY(0);


    }


}





.gs-modal-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    padding: 20px 25px;


    border-bottom: 1px solid #ddd;


    background: var(--gs-color-gris);


}





.gs-modal-header h3 {


    margin: 0;


    font-size: 20px;


    color: var(--gs-color-oscuro);


}





.gs-modal-close {


    background: none;


    border: none;


    font-size: 32px;


    line-height: 1;


    color: #999;


    cursor: pointer;


    padding: 0;


    width: 30px;


    height: 30px;


    display: flex;


    align-items: center;


    justify-content: center;


    transition: color 0.2s;


}





.gs-modal-close:hover {


    color: var(--gs-color-oscuro);


}





.gs-modal-body {


    padding: 25px;


    max-height: 60vh;


    overflow-y: auto;


}





.gs-text-center {


    text-align: center;


}





/* ==========================================


   Formularios en Modales


   ========================================== */





.gs-form-group {


    margin-bottom: 20px;


}





.gs-form-group label {


    display: block;


    margin-bottom: 6px;


    font-weight: 600;


    color: var(--gs-color-oscuro);


    font-size: 14px;


}





.gs-form-group input[type="text"],


.gs-form-group input[type="file"],


.gs-form-group select,


.gs-form-group textarea {


    width: 100%;


    padding: 10px 12px;


    border: 1px solid #ddd;


    border-radius: 4px;


    font-size: 14px;


    font-family: inherit;


    transition: border-color 0.2s;


}





.gs-form-group input[type="text"]:focus,


.gs-form-group select:focus,


.gs-form-group textarea:focus {


    outline: none;


    border-color: var(--gs-color-boton);


}





.gs-form-group textarea {


    resize: vertical;


    min-height: 80px;


}





.gs-form-actions {


    display: flex;


    gap: 10px;


    margin-top: 25px;


    padding-top: 20px;


    border-top: 1px solid #ddd;


    justify-content: flex-start;


}





.gs-form-actions .gs-btn {


    min-width: 140px;


    white-space: nowrap;


}





.gs-btn-danger {


    background: #dc3545;


    color: white;


}





.gs-btn-danger:hover {


    background: #c82333;


}





/* ==========================================


   Ficha del alumno


   ========================================== */





.gs-alumno-ficha {


    max-width: 1200px;


    margin: 0 auto;


    padding: 20px;


}





.gs-ficha-header {


    background: var(--gs-color-oscuro);


    color: #fff;


    padding: 20px 30px;


    border-radius: 8px 8px 0 0;


    margin-bottom: 0;


}





.gs-ficha-header h1 {


    margin: 0;


    font-size: 28px;


    font-weight: 600;


    color: #fff !important;


}





.gs-ficha-section {


    background: #fff;


    padding: 30px;


    margin-bottom: 20px;


    border-radius: 8px;


    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


}





.gs-ficha-section h2 {


    color: var(--gs-color-oscuro);


    font-size: 20px;


    margin-top: 0;


    margin-bottom: 20px;


    padding-bottom: 10px;


    border-bottom: 2px solid var(--gs-color-boton);


}





.gs-action-buttons {


    display: flex;


    align-items: center;


    gap: 10px;


}





.gs-ficha-footer {


    margin-top: 30px;


    text-align: center;


}





/* ==========================================


   Responsive


   ========================================== */





@media (max-width: 768px) {


    .gs-tab-nav {


        flex-direction: column;


    }





    .gs-tab-link {


        border-bottom: 1px solid #ddd;


    }





    .gs-tab-link.active {


        border-bottom: 3px solid var(--gs-color-boton);


        border-right: none;


    }





    .gs-tab-content-wrapper {


        padding: 20px;


    }





    .gs-data-table th {


        width: 40%;


    }





    .gs-alumnos-table {


        font-size: 14px;


    }





    .gs-alumnos-table th,


    .gs-alumnos-table td {


        padding: 10px 8px;


    }





    .gs-ficha-header h1 {


        font-size: 22px;


    }





    .gs-ficha-section {


        padding: 20px;


    }





    .gs-action-buttons {


        flex-direction: column;


        align-items: flex-start;


    }





    .gs-materiales-table {


        font-size: 14px;


    }





    .gs-materiales-table th,


    .gs-materiales-table td {


        padding: 10px 8px;


    }


}





/* ==========================================


   Panel de Administración


   ========================================== */





.gs-panel-admin {


    max-width: 1400px;


    margin: 0 auto;


    padding: 20px;


}





.gs-panel-header {


    margin-bottom: 30px;


}





.gs-panel-header h1 {


    color: var(--gs-color-oscuro);


    margin: 0;


}





/* Navegación de tabs */


.gs-panel-admin .gs-tabs {


    display: flex;


    gap: 10px;


    background: transparent;


    border-bottom: 2px solid #e0e0e0;


    margin-bottom: 30px;


    padding-bottom: 0;


}





.gs-panel-admin .gs-tab {


    padding: 12px 24px;


    text-decoration: none;


    color: var(--gs-color-carbon);


    border: none;


    background: transparent;


    border-bottom: 3px solid transparent;


    font-weight: 500;


    transition: all 0.3s ease;


    cursor: pointer;


}





.gs-panel-admin .gs-tab:hover {


    color: var(--gs-color-oscuro);


    border-bottom-color: var(--gs-color-boton);


}





.gs-panel-admin .gs-tab.active {


    color: var(--gs-color-oscuro);


    border-bottom-color: var(--gs-color-boton);


    background: rgba(217, 193, 81, 0.1);


}





/* Grid de estadísticas */


.gs-stats-grid {


    display: grid;


    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


    gap: 20px;


    margin-top: 20px;


}





.gs-stat-card {


    background: #fff;


    padding: 30px;


    border-radius: 8px;


    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);


    text-align: center;


    transition: transform 0.3s ease;


}





.gs-stat-card:hover {


    transform: translateY(-5px);


    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);


}





.gs-stat-number {


    font-size: 48px;


    font-weight: bold;


    color: var(--gs-color-boton);


    line-height: 1;


}





.gs-stat-label {


    font-size: 18px;


    color: var(--gs-color-carbon);


    margin-top: 10px;


    font-weight: 500;


}





/* Header con botón */


.gs-section-header {


    display: flex;


    justify-content: space-between;


    align-items: center;


    margin-bottom: 20px;


}





.gs-section-header h2 {


    margin: 0;


}





/* Filtros */


.gs-filters {


    background: #fff;


    padding: 20px;


    border-radius: 8px;


    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


    margin-bottom: 20px;


}





.gs-filters form {


    display: flex;


    gap: 15px;


    align-items: flex-end;


    flex-wrap: wrap;


}





.gs-filters label {


    display: flex;


    flex-direction: column;


    gap: 5px;


    font-weight: 500;


    color: var(--gs-color-carbon);


}





.gs-filters select {


    padding: 8px 12px;


    border: 1px solid #ddd;


    border-radius: 4px;


    font-size: 14px;


    min-width: 150px;


}





/* Tabla genérica */


.gs-table {


    width: 100%;


    background: #fff;


    border-radius: 8px;


    overflow: hidden;


    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);


    border-collapse: collapse;


}





.gs-table thead {


    background: var(--gs-color-gris);


}





.gs-table th {


    padding: 15px;


    text-align: left;


    font-weight: 600;


    color: var(--gs-color-oscuro);


    border-bottom: 2px solid #e0e0e0;


}





.gs-table td {


    padding: 12px 15px;


    border-bottom: 1px solid #f0f0f0;


    color: var(--gs-color-carbon);


}





.gs-table tbody tr:hover {


    background: rgba(217, 193, 81, 0.05);


}





.gs-table tbody tr:last-child td {


    border-bottom: none;


}





/* Botones pequeños en tablas */


.gs-btn-small {


    padding: 6px 12px;


    font-size: 13px;


}





/* Responsive para admin panel */


@media (max-width: 768px) {


    .gs-panel-admin .gs-tabs {


        flex-wrap: wrap;


    }





    .gs-stats-grid {


        grid-template-columns: 1fr;


    }





    .gs-section-header {


        flex-direction: column;


        align-items: flex-start;


        gap: 15px;


    }





    .gs-filters form {


        flex-direction: column;


        align-items: stretch;


    }





    .gs-filters select {


        width: 100%;


    }





    .gs-table {


        font-size: 14px;


    }





    .gs-table th,


    .gs-table td {


        padding: 10px 8px;


    }





    .gs-btn-small {


        font-size: 12px;


        padding: 5px 10px;


    }


}





/* ==========================================


   Elementos específicos de modales de admin


   ========================================== */





.gs-lista-alumnos {


    list-style: none;


    padding: 0 0 10px 10px;


    margin: 0;


}





.gs-lista-alumnos li {


    padding: 12px 12px 12px 20px;


    border-bottom: 1px solid #f0f0f0;


}





.gs-lista-alumnos li:last-child {


    border-bottom: none;


}





.gs-checkbox-grid {


    display: grid;


    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));


    gap: 10px;


    max-height: 400px;


    overflow-y: auto;


    padding: 10px;


    border: 1px solid #e0e0e0;


    border-radius: 4px;


    background: #f9f9f9;


}





.gs-checkbox-label {


    display: flex;


    align-items: center;


    padding: 8px;


    background: #fff;


    border-radius: 4px;


    cursor: pointer;


    transition: background 0.2s ease;


}





.gs-checkbox-label:hover {


    background: rgba(217, 193, 81, 0.1);


}





.gs-checkbox-label input[type="checkbox"] {


    margin-right: 8px;


    cursor: pointer;


}





.gs-datos-socio {


    padding: 10px;


}





.gs-datos-socio p {


    margin: 8px 0;


    padding: 8px;


    background: #f9f9f9;


    border-radius: 4px;


}





.gs-datos-socio strong {


    color: var(--gs-color-carbon);


    min-width: 150px;


    display: inline-block;


}





#contenidoModalVerAlumnos,


#contenidoAsignarAlumnos,


#contenidoDatosSocio {


    padding: 15px;


    min-height: 100px;


}





#contenidoModalVerAlumnos .gs-table,


#contenidoAsignarAlumnos .gs-checkbox-grid {


    margin-top: 10px;


}





.gs-modal-content h3 {


    padding-left: 25px;


}





.gs-modal-content .gs-form-group {


    padding: 0 25px;


}





.gs-modal-content .gs-form-actions {


    padding: 15px 25px;


}





/* Gravity Forms dentro del modal */


.gs-modal-content .gform_wrapper {


    margin: 0;


}





.gs-modal-content .gform_wrapper .gform_body {


    padding: 20px 0;


}





.gs-modal-content .gform_wrapper .gfield {


    margin-bottom: 20px;


}





.gs-modal-content .gform_wrapper .gform_footer,


.gs-modal-content .gform_wrapper .gform_page_footer {


    padding: 20px 0;


    margin: 0;


}





.gs-modal-content .gform_confirmation_message {


    padding: 30px;


    margin: 0;


    background: #f0f9ff;


    border-radius: 4px;


    border-left: 4px solid #0ea5e9;


}