:root {
    --verde-oscuro: #5A7D72;
    --verde-medio: #8FB9A8;
    --verde-claro: #CCE3DE;
    --azul-hielo: #EAF4F4;
    --blanco-suave: #F6FFF8;
    --texto-gris: #444;
    --gris-claro: #E0E0E0;
    --negro-suave: #222;
    --rojo: #E57373; /* I've added a specific red color for the delete button */
    --rojo-oscuro: #D32F2F;
}

/* ESTRUCTURA GENERAL */
body,
.layout-cuerpo {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--blanco-suave);
}

.layout-contenedor {
    display: flex;
    min-height: 100vh;
}

/* SIDEBAR */
.layout-sidebar {
    width: 250px;
    background-color: var(--verde-medio);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: width 0.3s ease;
}

.sidebar-encabezado {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    border-bottom: 1px solid var(--verde-claro);
    transition: all 0.3s ease;
}

.icono-logo {
    font-size: 1.5rem;
    color: white;
    margin-right: 0.5rem;
}

.titulo-logo {
    font-size: 1.2rem;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}

.sidebar-menu {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

.sidebar-item {
    display: flex;
    align-items: center;
    padding: 0.7rem 1rem;
    margin-bottom: 0.5rem;
    color: var(--texto-gris);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s;
}

.sidebar-item i {
    margin-right: 0.8rem;
    color: var(--texto-gris);
}

.sidebar-item:hover {
    background-color: var(--verde-claro);
    color: var(--verde-oscuro);
}

/* BOTÓN DE INICIAR SESIÓN */
.sidebar-login {
    padding: 1rem;
    text-align: center;
    border-top: 1px solid var(--verde-claro);
    transition: all 0.3s ease;
}

.btn-login {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background-color: var(--verde-oscuro);
    color: white;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
    border: none;
    cursor: pointer;
}

.btn-login:hover {
    background-color: #557566;
}

/* CONTENIDO PRINCIPAL */
.layout-principal {
    flex-grow: 1;
    padding: 1rem;
    background-color: var(--azul-hielo);
    overflow-y: auto;
}

/* PANEL DE CLIENTES */
.panel-clientes {
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 8px rgba(0,0,0,0.05);
    margin-bottom: 2rem;
}

.panel-clientes h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    color: var(--verde-oscuro);
}

/* TARJETAS */
.tarjeta-membresia {
    background-color: var(--blanco-suave);
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border: 1px solid var(--verde-claro);
}

.tarjeta-membresia .btn {
    background-color: var(--verde-oscuro);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
}

.tarjeta-membresia .btn:hover {
    background-color: #557566;
}

/* DISTRIBUCIÓN DE TARJETAS EN GRID */
.grid-clientes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

/* ESTILOS PARA SIDEBAR COLAPSADO (PC Y MÓVIL) */
.layout-sidebar.colapsado {
    width: 70px;
}

.layout-sidebar.colapsado .titulo-logo,
.layout-sidebar.colapsado .sidebar-texto {
    display: none;
}

.layout-sidebar.colapsado .sidebar-item {
    justify-content: center;
}

.layout-sidebar.colapsado .sidebar-item i {
    margin-right: 0;
}

.layout-sidebar.colapsado .sidebar-login .btn-login {
    padding: 0.6rem;
}

.layout-sidebar.colapsado .sidebar-login .btn-login .sidebar-texto {
    display: none;
}

/* Ocultar Barra */
.toggle-sidebar {
    /* Oculta el botón de la hamburguesa por defecto (para escritorio) */
    display: none; 
}

/* Contenedor principal de clientes */

/* Contenedor principal de clientes */
/* Contenedor principal */
.cliente-page {
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    max-width: 1200px;
    margin: 40px auto;
}

/* Título */
.cliente-titulo-principal {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--verde-oscuro);
    margin-bottom: 25px;
}

/* Botones */
.cliente-boton-add, .cliente-boton-guardar {
    background-color: var(--verde-medio);
    color: var(--blanco-suave);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.cliente-boton-add:hover, .cliente-boton-guardar:hover {
    background-color: var(--verde-oscuro);
    transform: translateY(-2px);
}

/* Tabla */
.table-container {
    margin-top: 30px;
    overflow-x: auto;
}

.cliente-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.cliente-tabla thead {
    background-color: var(--verde-oscuro);
    color: #FFFFFF;
}

.cliente-tabla th, .cliente-tabla td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--gris-claro);
}

.cliente-tabla tbody tr:nth-child(even) {
    background-color: var(--blanco-suave);
}

.cliente-tabla tbody tr:hover {
    background-color: var(--verde-claro);
    color: var(--negro-suave);
}

/* Botones de acción en tabla */
.cliente-boton-edit, .cliente-boton-delete {
    padding: 8px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
}

.cliente-boton-edit {
    background-color: var(--verde-medio);
    color: var(--blanco-suave);
}

.cliente-boton-edit:hover {
    background-color: var(--verde-oscuro);
    transform: scale(1.1);
}

.cliente-boton-delete {
    background-color: var(--rojo);
    color: var(--blanco-suave);
}

.cliente-boton-delete:hover {
    background-color: var(--rojo-oscuro);
    transform: scale(1.1);
}

/* Sección de clientes pendientes */
.cliente-pendientes {
    margin-top: 30px;
}

.pendientes-titulo {
    background-color: var(--verde-claro);
    color: var(--negro-suave);
    padding: 15px 20px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pendientes-titulo:hover {
    background-color: var(--azul-hielo);
}

/* Modales - ESTA ES LA SECCIÓN CLAVE */
.cliente-modal {
    display: none; /* Asegura que el modal está oculto por defecto */
    position: fixed; /* Lo fija en la pantalla */
    z-index: 1000; /* Lo pone por encima de todo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    backdrop-filter: blur(5px); /* Efecto borroso para el fondo */
    -webkit-backdrop-filter: blur(5px);
}

.cliente-modal-contenido {
    background-color: #FFFFFF;
    margin: 60px auto;
    padding: 30px;
    border-radius: 12px;
    width: 90%;
    max-width: 650px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.cliente-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--gris-claro);
    margin-bottom: 20px;
}

.cliente-modal-titulo {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--verde-oscuro);
}

.cliente-modal-cerrar {
    font-size: 2rem;
    cursor: pointer;
    color: var(--negro-suave);
    transition: 0.2s;
}

.cliente-modal-cerrar:hover {
    color: var(--rojo);
}

/* Formularios */
.cliente-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.cliente-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cliente-form-group label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--verde-oscuro);
}

.cliente-form-group input, .cliente-form-group select {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--gris-claro);
    font-size: 0.95rem;
    background-color: #FFFFFF;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cliente-form-group input:focus, .cliente-form-group select:focus {
    outline: none;
    border-color: var(--verde-oscuro);
    box-shadow: 0 0 0 3px rgba(143, 185, 168, 0.3);
}

/* Footer del modal */
.cliente-modal-footer {
    margin-top: 30px;
    display: flex;
    justify-content: flex-end;
}

/* Botón guardar dentro del modal */
.cliente-boton-guardar {
    background-color: var(--verde-medio);
    color: var(--blanco-suave);
    border: none;
    padding: 12px 25px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.cliente-boton-guardar:hover {
    background-color: var(--verde-oscuro);
    transform: translateY(-2px);
}

/* Formularios dentro del modal */
.cliente-form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.cliente-form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.cliente-form-group label {
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--verde-oscuro);
}

.cliente-form-group input,
.cliente-form-group select {
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--gris-claro);
    font-size: 0.95rem;
    background-color: #FFFFFF;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.cliente-form-group input:focus,
.cliente-form-group select:focus {
    outline: none;
    border-color: var(--verde-oscuro);
    box-shadow: 0 0 0 3px rgba(143, 185, 168, 0.3);
}

/* Sección de clientes pendientes */
.cliente-pendientes {
    margin-top: 30px;
}

.pendientes-titulo {
    background-color: var(--verde-claro);
    color: var(--negro-suave);
    padding: 15px 20px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    transition: background-color 0.3s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.pendientes-titulo:hover {
    background-color: var(--azul-hielo);
}
/* Estilos para el contenedor de los filtros */
.cliente-form-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end; /* Asegura que todos los elementos estén alineados en la parte inferior */
}

/* Estilo para el nuevo grupo de botones */
.cliente-boton-group {
    display: flex; /* Convierte el div en un contenedor flex */
    gap: 10px;    /* Espacio entre los botones */
}

/* Estilos de los botones de acción (Filtrar y Limpiar) */
.cliente-boton-filter,
.cliente-boton-clear {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: white;         /* Asegura que el texto sea blanco para mejor contraste */
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.cliente-boton-filter {
    background-color: #5A7D72; /* Aplica el color deseado */
}

.cliente-boton-filter:hover {
    background-color: #496a5f; /* Un tono más oscuro para el hover */
}

.cliente-boton-clear {
    background-color: #496a5f; /* Color rojo para el botón de limpiar */
}

.cliente-boton-clear:hover {
    background-color: #496a5f;
}

/* Cliente Membresias */


.clientemem-page {
    background-color: #FFFFFF;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    max-width: 1200px;
    margin: 40px auto;
}

.clientemem-titulo {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--verde-oscuro);
    margin-bottom: 25px;
}

/* Tabla */
.clientemem-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    margin-top: 20px;
}

.clientemem-tabla thead {
    background-color: var(--verde-oscuro);
    color: #FFFFFF;
}

.clientemem-tabla th,
.clientemem-tabla td {
    padding: 15px 20px;
    text-align: left;
    border-bottom: 1px solid var(--gris-claro);
}

.clientemem-tabla tbody tr:nth-child(even) {
    background-color: var(--blanco-suave);
}

.clientemem-tabla tbody tr:hover {
    background-color: var(--verde-claro);
    color: var(--negro-suave);
}

/* Estilos para el Modal de Edición */
.clientemem-modal {
    display: none; 
    position: fixed; 
    z-index: 1000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.5); 
    padding-top: 60px;
}

.clientemem-modal-contenido {
    background-color: #f0fdf4; /* Un verde muy claro */
    margin: 5% auto;
    padding: 25px;
    border: 1px solid #c8e6c9; 
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    position: relative;
    animation-name: animatetop;
    animation-duration: 0.4s;
}

/* Animación de entrada */
@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

.clientemem-modal-header {
    padding: 15px;
    border-bottom: 1px solid var(--gris-claro);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.clientemem-modal-titulo {
    margin: 0;
    color: var(--verde-oscuro); 
    font-size: 1.5rem;
    font-weight: 600;
}

.clientemem-modal-cerrar {
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
}

.clientemem-modal-cerrar:hover,
.clientemem-modal-cerrar:focus {
    color: var(--verde-oscuro);
    text-decoration: none;
}

.clientemem-modal-body {
    padding: 20px 0;
}

.clientemem-form-group {
    margin-bottom: 1rem;
}

.clientemem-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--verde-oscuro);
}

.clientemem-form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--gris-claro);
    border-radius: 8px;
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.clientemem-form-control:focus {
    outline: none;
    border-color: var(--verde-claro);
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.5);
}

.clientemem-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    border-top: 1px solid var(--gris-claro);
}

.clientemem-boton-guardar, .clientemem-boton-cancelar {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s, transform 0.2s;
}

.clientemem-boton-guardar {
    background-color: var(--verde-oscuro);
    color: white;
}

.clientemem-boton-guardar:hover {
    background-color: #15803d;
    transform: translateY(-2px);
}

.clientemem-boton-cancelar {
    background-color: var(--gris-claro);
    color: #4b5563;
}

.clientemem-boton-cancelar:hover {
    background-color: #e5e7eb;
    transform: translateY(-2px);
}
.clientemem-filtros-container {
    background-color: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 20px;
}

.clientemem-filtros-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 20px;
}

.clientemem-form-group {
    display: flex;
    flex-direction: column;
}

.clientemem-form-group label {
    font-weight: bold;
    margin-bottom: 5px;
    color: #495057;
}

.clientemem-form-group input,
.clientemem-form-group select {
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    width: 200px;
    font-size: 1rem;
}
/* Estilo para el contenedor del grupo de botones */
.clientemem-button-group {
    display: flex;
    gap: 10px;
    align-self: flex-end;
}
/* Estilos para los botones de acción */
.clientemem-boton-filter,
.clientemem-boton-clear {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    color: white;         /* Asegura que el texto sea blanco para mejor contraste */
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.clientemem-boton-filter {
    background-color: #5A7D72; /* Color específico para el botón de filtrar */
}

.clientemem-boton-filter:hover {
    background-color: #496a5f; /* Un tono más oscuro al pasar el cursor */
}

.clientemem-boton-clear {
    background-color: #496a5f; /* Color rojo para el botón de limpiar */
}
.clientemem-boton-clear:hover {
    background-color: #496a5f;
}
/* Estilos adicionales que podrías necesitar si no usas Tailwind */
/* Contenedor principal de la página de inicio */
/* Contenedor principal de la página de inicio */
.inicioprinci-page {
    background-color: var(--blanco-suave);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-family: 'Inter', sans-serif;
}

/* Título principal de bienvenida */
.inicioprinci-titulo {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--negro-suave);
}

/* Subtítulo o descripción */
.inicioprinci-subtitulo {
    margin-top: 10px;
    font-size: 1.1rem;
    text-align: center;
    color: var(--texto-gris);
}

/* Contenedor de paneles (usuarios admin / usuario normal) */
.inicioprinci-panel {
    margin-top: 2rem;
}

/* Título de las subtablas */
.inicioprinci-subtitulo-tabla {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Panel de membresías de administrador */
.inicioprinci-tabla {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.inicioprinci-tabla th,
.inicioprinci-tabla td {
    padding: 12px 15px;
    text-align: left;
}

.inicioprinci-tabla th {
    background-color: var(--verde-medio);
    color: white;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.inicioprinci-tabla tbody tr {
    background-color: white;
    transition: background-color 0.2s;
}

.inicioprinci-tabla tbody tr:hover {
    background-color: var(--verde-claro);
}

/* Estilo para la tabla de membresías vencidas */
.inicioprinci-tabla.table-vencidas thead th {
    background-color: #dc3545; /* Rojo más intenso */
}
.inicioprinci-tabla.table-vencidas tbody tr:hover {
    background-color: #f8d7da;
}
.inicioprinci-tabla.table-vencidas .text-danger {
    color: #dc3545;
}


/* Estados de vencimiento */
.inicioprinci-vencimiento {
    font-weight: 600;
}

.inicioprinci-vencido {
    color: var(--rojo);
}

.inicioprinci-activo {
    color: var(--verde-oscuro);
}

/* Tarjetas de usuario normal */
.inicioprinci-card {
    background-color: var(--verde-claro);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--verde-medio);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s;
}

.inicioprinci-card:hover {
    transform: scale(1.05);
}

.inicioprinci-card-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--verde-oscuro);
}

.inicioprinci-card-text {
    margin-top: 8px;
    color: var(--texto-gris);
    font-size: 0.95rem;
}

/* Contenedor para invitado */
.inicioprinci-guest {
    margin-top: 2rem;
    background-color: var(--azul-hielo);
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    color: var(--texto-gris);
    font-weight: 500;
}

.inicioprinci-guest a {
    color: var(--verde-oscuro);
    font-weight: 700;
    text-decoration: underline;
}

.inicioprinci-guest a:hover {
    color: var(--verde-medio);
}
.inicioprinci-proximo {
    color: #856404; /* amarillo/marrón alerta */
    font-weight: 600;
}

.inicioprinci-alerta {
    background-color: #FFF3CD; /* fondo amarillo suave para alertas */
    border-radius: 6px;
    padding: 4px;
}

/* Fondo rojo para las filas próximas a vencer */
.table-danger {
    background-color: #dc3545 !important;
}

/* Tarjetas de usuarios regulares próximas a vencer */
.card-alerta {
    background-color: #dc3545 !important;
    border: 1px solid #dc3545;
}
.card-alerta .inicioprinci-card-titulo,
.card-alerta .inicioprinci-card-text {
    color: white;
}

/* Campana de alertas */
.alerta-campana {
    font-size: 1rem;
    font-weight: 600;
}

/* Rojo intenso para membresías próximas a vencer */
.table-danger, .card-alerta {
    background-color: #ff4d4d !important;
    color: #e91313;
}

/* Fecha en blanco y negrita */
.table-danger td,
.card-alerta .inicioprinci-vencimiento {
    font-weight: bold;
    color: white !important;
}



/* ================== Membresías: contenedor y títulos ================== */
.membresia-page{
    background: var(--blanco-suave);
    padding: 32px;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,.08);
    max-width: 1100px;
    margin: 32px auto;
}
.membresia-header{
    display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;
}
.membresia-titulo{
    font-size:2.2rem; font-weight:700; color:var(--verde-oscuro); letter-spacing:.3px;
}

/* ================== Botones principales ================== */
.membresia-btn-agregar{
    background:var(--verde-medio); color:var(--blanco-suave);
    border:none; padding:12px 18px; border-radius:10px; cursor:pointer;
    display:inline-flex; align-items:center; gap:10px; font-weight:600;
    box-shadow:0 4px 10px rgba(0,0,0,.08); transition:.2s;
}
.membresia-btn-agregar:hover{ background:var(--verde-oscuro); transform:translateY(-1px); }

/* ================== Tabla ================== */
.membresia-tabla-wrapper{ overflow-x:auto; }
.membresia-tabla{
    width:100%; border-collapse:collapse; font-size:1rem; border-radius:12px; overflow:hidden;
    box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.membresia-tabla thead{ background:var(--verde-oscuro); color:#fff; }
.membresia-tabla th, .membresia-tabla td{ padding:14px 16px; border-bottom:1px solid var(--gris-claro); }
.membresia-tabla tbody tr:nth-child(even){ background:var(--azul-hielo); }
.membresia-tabla tbody tr:hover{ background:var(--verde-claro); }
.membresia-col-acciones{ width:160px; text-align:center; }
.membresia-td-acciones{ display:flex; gap:8px; align-items:center; justify-content:center; }

.membresia-form-inline{ display:inline; }

/* ================== Botones icono ================== */
.membresia-btn-icon{
    width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
    border:none; border-radius:10px; cursor:pointer; transition:.2s; font-size:1rem;
    box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.membresia-btn-editar{ background:var(--verde-medio); color:var(--blanco-suave); }
.membresia-btn-editar:hover{ background:var(--verde-oscuro); transform:scale(1.05); }
.membresia-btn-eliminar{ background:#E57373; color:#fff; }
.membresia-btn-eliminar:hover{ background:#D32F2F; transform:scale(1.05); }

/* ================== Estado vacío ================== */
.membresia-vacio{
    text-align:center; padding:26px; color:var(--texto-gris); background:var(--azul-hielo);
}

/* ================== Modales (sin Bootstrap) ================== */
.membresia-modal{
    display:none; position:fixed; z-index:1000; inset:0;
    background:rgba(0,0,0,.45); backdrop-filter:blur(4px);
    padding:24px; overflow:auto;
}
.membresia-no-scroll{ overflow:hidden; }

.membresia-modal-contenido{
    background:#fff; margin:60px auto; padding:28px; border-radius:14px;
    width:92%; max-width:720px; box-shadow:0 14px 40px rgba(0,0,0,.22);
    animation:membresiaFade .18s ease-out;
}
@keyframes membresiaFade{
    from{ opacity:0; transform:translateY(-8px); }
    to{ opacity:1; transform:translateY(0); }
}
.membresia-modal-header{
    display:flex; align-items:center; justify-content:space-between;
    padding-bottom:14px; border-bottom:1px solid var(--gris-claro); margin-bottom:18px;
}
.membresia-modal-titulo{
    font-size:1.6rem; font-weight:700; color:var(--verde-oscuro); display:flex; gap:10px; align-items:center;
}
.membresia-modal-cerrar{
    font-size:2rem; line-height:1; cursor:pointer; color:#333; transition:.2s;
}
.membresia-modal-cerrar:hover{ color:#D32F2F; }

/* ================== Formularios ================== */
.membresia-form-row{ display:flex; gap:18px; flex-wrap:wrap; }
.membresia-form-group{ flex:1 1 260px; display:flex; flex-direction:column; }
.membresia-label{ font-weight:600; margin-bottom:8px; color:var(--verde-oscuro); }
.membresia-input{
    padding:12px 14px; border:1px solid var(--gris-claro); border-radius:10px; font-size:1rem;
    transition:border-color .15s, box-shadow .15s; background:#fff;
}
.membresia-input:focus{
    outline:none; border-color:var(--verde-oscuro);
    box-shadow:0 0 0 3px rgba(143,185,168,.35);
}
.membresia-modal-footer{ margin-top:22px; display:flex; justify-content:flex-end; }
.membresia-btn-guardar{
    background:var(--verde-medio); color:var(--blanco-suave); border:none;
    padding:12px 20px; border-radius:10px; cursor:pointer; font-weight:700; transition:.2s;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
}
.membresia-btn-guardar:hover{ background:var(--verde-oscuro); transform:translateY(-1px); }
.membresia-btn-actualizar{ background:#5A7D72; }


 .modal-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
        max-width: 80%;
        max-height: 80%;
        margin: auto;
    }
    .modal-image {
        max-width: 100%;
        max-height: 100%;
        border: 2px solid #ccc;
        border-radius: 5px;
        display: block;
    }


.clientemem-col-acciones {
    width: 160px;
    text-align: center;
}

.clientemem-td-acciones {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.clientemem-form-inline {
    display: inline;
}

/* ================== Botones con Icono ================== */
.clientemem-btn-icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: .2s;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

.clientemem-btn-editar {
    background: var(--verde-medio);
    color: var(--blanco-suave);
}

.clientemem-btn-editar:hover {
    background: var(--verde-oscuro);
    transform: scale(1.05);
}

.clientemem-btn-eliminar {
    background: #E57373;
    color: #fff;
}

.clientemem-btn-eliminar:hover {
    background: #D32F2F;
    transform: scale(1.05);
}


/* --- Estilos base del formulario (ya los tienes) --- */
/* ========================================================= */
/* --- Estilos base del formulario (diseño genérico) --- */
/* ========================================================= */
.formem-body {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.formem-card {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: 40px;
    max-width: 680px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.5s ease;
}
.formem-header {
    text-align: center;
    margin-bottom: 30px;
}
.formem-logo {
    max-width: 120px;
    margin-bottom: 15px;
    border-radius: 50%;
}
.formem-title {
    font-size: 28px;
    font-weight: 700;
    color: #333;
}
.formem-subtitle {
    font-size: 16px;
    color: #666;
}
.formem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.formem-field {
    display: flex;
    flex-direction: column;
}
.formem-field-full {
    grid-column: 1 / -1;
}
.formem-field label {
    font-weight: 600;
    margin-bottom: 8px;
    color: #555;
}
.formem-field input, .formem-field select {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
}
.formem-field input:focus, .formem-field select:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}
.formem-btn {
    width: 100%;
    padding: 15px;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 20px;
}
.formem-btn:hover {
    transform: translateY(-2px);
}
.formem-small {
    text-align: center;
    font-size: 12px;
    color: #888;
    margin-top: 10px;
}
.formem-id-upload {
    border: 2px dashed #ccc;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    height: 150px;
    overflow: hidden;
    transition: all 0.3s ease;
}
#placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 100%;
}
.formem-id-icon {
    font-size: 40px;
    color: #888;
    margin-bottom: 10px;
}
.formem-id-text {
    color: #666;
    font-size: 14px;
}
.formem-id-upload input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.formem-id-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* ========================================================= */
        /* --- Estilos para la marca AIR --- */
        /* ========================================================= */
        .formem-air {
            background-color: #e6f7ff; /* Fondo azul cielo */
        }
        .formem-air .formem-card {
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 70, 150, 0.15);
            background-image: linear-gradient(135deg, #e6f7ff 0%, #ffffff 100%);
        }
        .formem-air .formem-title, .formem-air .formem-subtitle {
            color: #004694; /* Azul oscuro */
        }
        .formem-air .formem-field input, .formem-air .formem-field select {
            background-color: #f0f8ff;
            border-color: #a3d4ff;
        }
        .formem-air .formem-field input:focus, .formem-air .formem-field select:focus {
            border-color: #007bff;
            box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.1);
        }
        .formem-air .formem-btn {
            background-color: #007bff;
            box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
        }
        .formem-air .formem-btn:hover {
            background-color: #0056b3;
        }
        .formem-air .formem-id-upload {
            border: 2px dashed #007bff;
            background-color: #f0f8ff;
            transition: background-color 0.3s ease;
        }
        .formem-air .formem-id-upload:hover {
            background-color: #d1e7ff;
        }
        .formem-air .formem-id-icon {
            color: #007bff;
        }
        .formem-air .formem-id-text {
            color: #0056b3;
            font-weight: bold;
        }
        .formem-air .formem-field-phone {
            grid-column: 1 / -1; /* Ocupa de la primera a la última columna */
        }
/* ========================================================= */
/* --- Estilos para la marca WTA (VERSION OSCURA) --- */
/* ========================================================= */
.formem-wta {
    background-color: #2c2c2c; /* Fondo oscuro sutil */
}
.formem-wta .formem-card {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    background-color: #383838; /* Color de tarjeta más oscuro */
    border: 1px solid #e8ed00; /* Borde sutil amarillo */
}
.formem-wta .formem-header {
    margin-bottom: 25px;
}
.formem-wta .formem-title {
    font-family: 'Georgia', serif;
    color: #e8ed00; /* Título en amarillo brillante */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
.formem-wta .formem-subtitle,
.formem-wta .formem-field label {
    color: #f0f0f0; /* Subtítulo y etiquetas en blanco para contraste */
}
.formem-wta .formem-grid {
    grid-template-columns: 1fr; /* Una columna en lugar de dos */
}
.formem-wta .formem-field input,
.formem-wta .formem-field select {
    background-color: #4c4c4c; /* Fondo de campos de entrada */
    border: 1px solid #5a5a5a;
    border-radius: 8px;
    color: #fff; /* Texto dentro de los campos en blanco */
}
.formem-wta .formem-field input:focus,
.formem-wta .formem-field select:focus {
    border-color: #e8ed00; /* Borde amarillo al hacer clic */
    box-shadow: 0 0 0 4px rgba(232, 237, 0, 0.2);
}
.formem-wta .formem-btn {
    background-color: #e8ed00; /* Botón en color amarillo */
    color: #333; /* Texto del botón en un gris oscuro */
    box-shadow: 0 4px 15px rgba(232, 237, 0, 0.3);
}
.formem-wta .formem-btn:hover {
    background-color: #f5f540; /* Amarillo más claro al pasar el mouse */
}
.formem-wta .formem-id-upload {
    border: 3px dashed #e8ed00; /* Borde punteado amarillo */
    background-color: #4c4c4c; /* Fondo del área de subida oscuro */
    border-radius: 12px;
    transition: all 0.3s ease;
}
.formem-wta .formem-id-upload:hover {
    transform: scale(1.02);
}
.formem-wta .formem-id-icon {
    font-size: 50px;
    color: #e8ed00; /* Icono amarillo */
}
.formem-wta .formem-id-text {
    font-family: 'Georgia', serif;
    color: #f0f0f0; /* Texto en blanco */
    font-weight: bold;
    font-style: italic;
}
.formem-wta .formem-small {
    color: #aaa; /* Texto pequeño en un gris claro */
}
.formem-wta .formem-phone-field select {
    flex: 0 0 auto;
    width: auto;
    max-width: 150px;
    padding: 12px;
    
    /* 🎨 Los estilos oscuros que quieres aplicar */
    background-color: #4c4c4c;
    border: 1px solid #5a5a5a;
    color: #fff; 
    
    border-radius: 8px;
}
.formem-wta .formem-phone-field .select2-container {
    /* Asegura que el contenedor de Select2 tenga el mismo tamaño que el input */
    height: 44px; /* Altura de 12px de padding arriba y abajo + 20px de fuente/interno = 44px */
    line-height: 44px; /* Para centrar el texto verticalmente */
}

/* 2. Estilos para el campo de Select2 que contiene el texto "Buscar país..." */
.formem-wta .select2-container .select2-selection--single {
    /* Los estilos oscuros que quieres aplicar */
    background-color: #4c4c4c !important; /* !important es necesario para sobrescribir los estilos de Select2 */
    border: 1px solid #5a5a5a !important;
    border-radius: 8px !important;
    
    /* Asegurar que la altura y el padding coincidan con el input del teléfono */
    height: 44px !important; /* Coincide con el input */
}

/* 3. Estilos del texto y placeholder dentro del campo Select2 */
.formem-wta .select2-container .select2-selection__rendered {
    color: #fff !important; /* Texto en blanco para el prefijo seleccionado */
    padding-left: 12px !important; /* Padding izquierdo para alineación */
    line-height: 44px !important; /* Centrado vertical del texto */
}

/* 4. Estilos de la flecha de menú desplegable */
.formem-wta .select2-container .select2-selection__arrow b {
    border-color: #fff transparent transparent transparent !important; /* Cambia el color de la flecha a blanco */
    top: 20px !important; /* Posiciona la flecha para centrarla */
}

/* 5. Estilos para la caja de búsqueda cuando se abre el menú */
.select2-container--open .select2-dropdown {
    background-color: #383838; /* Fondo del menú de opciones (el mismo que el fondo de la tarjeta) */
    border: 1px solid #e8ed00; /* Borde amarillo para el menú */
}

/* 6. Estilos del input de búsqueda DENTRO del menú de Select2 */
.select2-search--dropdown .select2-search__field {
    background-color: #4c4c4c !important;
    border: 1px solid #5a5a5a !important;
    color: #fff !important;
}

/* 7. Estilos de las opciones en el menú desplegable */
.select2-results__option {
    color: #f0f0f0; /* Texto de las opciones en blanco */
}
/* Estilo para la opción resaltada/seleccionada */
.select2-results__option--highlighted {
    background-color: #e8ed00 !important; /* Fondo amarillo para la opción sobre la que se pasa el mouse */
    color: #333 !important; /* Texto oscuro para contraste */
}
/* =============================
   Facturación - Estilos Custom
   ============================= */
/* =============================
    Facturación - Estilos Custom
    ============================= */
.facturacion-container {
    padding: 2rem;
    background: var(--blanco-suave);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.facturacion-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--gris-claro);
}

.facturacion-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--verde-medio);
    color: white;
    padding: 1rem 1.5rem;
}

.facturacion-card-body {
    padding: 1.5rem;
}

/* ====================================================
    📊 Tabla de pagos
==================================================== */
.facturacion-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    border-radius: 8px;
    overflow: hidden;
}

.facturacion-table th {
    background: var(--verde-oscuro);
    color: white;
    padding: 0.8rem;
    text-align: center;
    font-weight: 600;
}

.facturacion-table td {
    padding: 0.8rem;
    text-align: center;
    border-bottom: 1px solid var(--gris-claro);
}

.facturacion-table tbody tr:nth-child(even) {
    background: var(--azul-hielo);
}

/* ====================================================
    🏷️ Badges de estado
==================================================== */
.facturacion-badge {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgb(106, 88, 88);
}

.facturacion-badge-pagado {
    background: var(--verde-oscuro);
}

.facturacion-badge-pendiente {
    background: #E57373;
}

/* ====================================================
    🖱️ Botones personalizados
==================================================== */
.facturacion-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.3s ease;
}

.facturacion-btn i {
    font-size: 0.85rem;
}

.facturacion-btn-agregar {
    background: var(--verde-claro);
    color: var(--negro-suave);
}

.facturacion-btn-agregar:hover {
    background: var(--verde-medio);
    color: white;
}

.facturacion-btn-ver {
    background: var(--azul-hielo);
    color: var(--verde-medio);
}

.facturacion-btn-editar {
    background: 
    color: white;
}

.facturacion-btn-cancelar {
    background: var(--gris-claro);
    color: var(--negro-suave);
}

.facturacion-btn-guardar {
    background: var(--verde-oscuro);
    color: white;
}

.facturacion-btn-guardar:hover {
    background: var(--verde-medio);
}
.facturacion-btn-excel {
    background-color: var(--verde-medio);
    color: var(--blanco-suave);
    border: 1px solid var(--verde-oscuro);
}

.facturacion-filtros-container {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    margin-bottom: 25px;
}

/* Contenedor de los inputs y select de filtro */
.facturacion-filtros-inputs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end; /* Alinea los elementos al final (abajo) */
    gap: 20px; /* Espacio entre cada elemento */
}

/* Estilo para cada grupo de formulario (label + input/select) */
.facturacion-form-group {
    display: flex;
    flex-direction: column;
}

.facturacion-form-group label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 5px;
    white-space: nowrap; /* Evita que el texto de la etiqueta se rompa */
}

.facturacion-form-group input,
.facturacion-form-group select {
    padding: 10px 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 1rem;
    color: #495057;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.facturacion-form-group input:focus,
.facturacion-form-group select:focus {
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* ==================================== */
/* ESTILOS PARA LOS BOTONES DE FILTRO  */
/* ==================================== */

/* Grupo de botones de filtrar y limpiar */
.facturacion-button-group {
    display: flex;
    gap: 10px;
    align-self: flex-end; /* Alinea los botones con la parte inferior de los inputs */
}

/* Estilo base para todos los botones de la página */
.facturacion-btn {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    text-decoration: none;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.facturacion-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Estilo específico para el botón de "Filtrar" */
.facturacion-btn-filter {
    background-color: #5A7D72;
}

.facturacion-btn-filter:hover {
    background-color: #5A7D72;
}

/* Estilo específico para el botón de "Limpiar" */
.facturacion-btn-clear {
    background-color: #456359;
}

.facturacion-btn-clear:hover {
    background-color: #456359;
}
/* 🔄 Ajustes para el modal de comprobante */


.modal-dialog {
    /* Mantenemos el centrado vertical para una mejor experiencia */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Reducimos el alto mínimo para que el modal no ocupe toda la pantalla y pueda subir */
    min-height: calc(100vh - 40px); /* 40px es un margen de seguridad */
    margin: 20px auto; /* Centramos y damos un margen superior/inferior */
}

/* Redefinimos la clase para el modal grande */
.modal-xl-custom {
    max-width: 900px; /* Ancho máximo para el modal, ajusta según necesidad */
    width: 95%; /* Ocupa el 95% del ancho de la pantalla */
}
/* 🔍 Nuevo estilo para un modal más grande */
.modal-xl-custom {
    max-width: 95%; /* 👈 Usamos un porcentaje para mayor adaptabilidad */
}

/* ====================================================
    💳 Modal personalizado
==================================================== */
.facturacion-modal {
    border-radius: 12px;
    border: none;
    background: var(--blanco-suave);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    width: 320px !important;

    margin: 0% auto !important;
}

.facturacion-modal-header {
    background: var(--verde-medio);
    color: white;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.facturacion-close {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
}


.facturacion-modal-body {
    padding: 1rem;
    max-height: 80vh; /* La altura máxima del cuerpo del modal es el 80% de la pantalla */
    overflow-y: auto; /* Habilita el scroll vertical si el contenido excede el espacio */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.facturacion-modal-body img {
    /* La clave para solucionar el problema: */
    width: auto; /* El ancho de la imagen se ajusta automáticamente */
    height: auto; /* La altura de la imagen se ajusta automáticamente */
    max-width: 100%; /* La imagen nunca será más ancha que su contenedor (el modal-body) */
    max-height: 70vh; /* La imagen nunca será más alta que el 70% de la altura de la pantalla */
    object-fit: contain; /* Asegura que la imagen se mantenga en su relación de aspecto */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.facturacion-modal-footer {
    padding: 1rem 1.5rem;
    background: var(--azul-hielo);
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
}

/* ====================================================
    📝 Formularios
==================================================== */
.facturacion-input,
.facturacion-input-file {
    width: 100%;
    border: 1px solid var(--gris-claro);
    border-radius: 6px;
    padding: 0.6rem;
    font-size: 0.9rem;
    color: var(--texto-gris);
    background: white;
}

.facturacion-input:focus {
    border-color: var(--verde-medio);
    box-shadow: 0 0 6px rgba(143,185,168,0.4);
    outline: none;
}
/* =============================
   ESTILOS PROFESOR - CLIENTES WTA
   ============================= */

.profesor-container {
    padding: 20px;
    background: var(--azul-hielo);
    min-height: 100vh;
}

.profesor-titulo {
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--verde-oscuro);
    margin-bottom: 20px;
    border-left: 5px solid var(--verde-medio);
    padding-left: 10px;
}

.profesor-card {
    background: var(--blanco-suave);
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    padding: 15px;
}

.profesor-vacio {
    color: var(--texto-gris);
    font-style: italic;
    text-align: center;
    padding: 20px 0;
}

.profesor-tabla {
    width: 100%;
    border-collapse: collapse;
    border-radius: 10px;
    overflow: hidden;
}

.profesor-tabla thead {
    background: var(--verde-medio);
    color: var(--blanco-suave);
    text-align: left;
}

.profesor-tabla th, 
.profesor-tabla td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--gris-claro);
}

.profesor-tabla tr:nth-child(even) {
    background: var(--verde-claro);
}

.profesor-tabla tr:hover {
    background: var(--verde-medio);
    color: var(--blanco-suave);
    transition: all 0.2s ease-in-out;
}
.profesor-acciones {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.btn-profesor {
    background: var(--verde-medio);
    color: var(--blanco-suave);
    padding: 8px 15px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    transition: background 0.2s ease-in-out;
}

.btn-profesor:hover {
    background: var(--verde-oscuro);
    color: var(--blanco-suave);
}

.btn-profesor.imprimir {
    background: var(--azul-hielo);
    color: var(--texto-gris);
    border: 1px solid var(--verde-medio);
}

.btn-profesor.imprimir:hover {
    background: var(--verde-claro);
    color: var(--negro-suave);
}
.contenedor-links {
    display: flex;
    gap: 0.8rem;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    flex-wrap: wrap; /* Para que en pantallas pequeñas se bajen */
}

/* Botones generales */
.contenedor-links a,
.contenedor-links button {
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    border: none;
}

/* AIR */
.btn-link-air {
    background-color: var(--verde-oscuro);
    color: var(--blanco-suave);
}
.btn-link-air:hover {
    background-color: var(--verde-medio);
}

/* WTA */
.btn-link-wta {
    background-color: var(--azul-hielo);
    color: var(--negro-suave);
}
.btn-link-wta:hover {
    background-color: var(--verde-claro);
}

/* Copiar */
.btn-copy {
    background-color: var(--gris-claro);
    color: var(--negro-suave);
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}
.btn-copy:hover {
    background-color: var(--verde-medio);
    color: var(--blanco-suave);
}