/* user-management.css */
/* Colores base */
:root {
    --usermgmt-dark: #151515;     /* Gris oscuro para fondos */
    --usermgmt-light: #ffffff;    /* Blanco para textos */
    --usermgmt-border: #333333;   /* Gris más claro para bordes */
    --usermgmt-hover: #2a2a2a;    /* Gris para hover */
    --usermgmt-card-bg: #1a1a1a;  /* Fondo para tarjetas/elementos internos, un poco más claro que --usermgmt-dark */
}

/* Reseteo y configuración básica del contenedor */
.ast-container {
    max-width: 900px;
    margin: auto;
    padding: 20px;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Ocultar título de página si es necesario */
.page-title {
    display: none;
}

/* Encabezados con franja de color (usando el color de user-management) */
/* Header y títulos */
.usermgmt-header {
    background-color: var(--usermgmt-dark);
    text-align: center;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.usermgmt-title {
    color: var(--usermgmt-light) !important;
    font-size: 1.8em;
    font-weight: bold;
    margin: 0;
    display: inline-block;
}
.avatar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px auto;
    width: 100%;
    max-width: 200px; /* O el tamaño máximo que prefieras */
}

.avatar-preview {
    width: 150px; /* O el tamaño que prefieras */
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 15px;
}

.avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-upload-button {
    width: 100%;
    margin-top: 10px;
}

/* Formularios */
.usermgmt-form {
    max-width: 800px !important;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
}

/* Campos de formulario */
.usermgmt-input,
.usermgmt-textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--usermgmt-border); /* Usar la variable de borde */
    border-radius: 4px;
    margin-bottom: 15px;
    background-color: var(--usermgmt-dark); /* Fondo oscuro por defecto */
    color: var(--usermgmt-light); /* Texto claro */
}


/* Labels y textos */
.usermgmt-label {
    color: var(--usermgmt-light);
    font-weight: bold;
    margin-bottom: 5px;
	padding: 10px;
}

/* Botones */
/* Estilo base para botones generales */
.usermgmt-btn {
    background-color: var(--usermgmt-dark);
    color: var(--usermgmt-light);
    padding: 10px 20px;
    border: 1px solid var(--usermgmt-border);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    /*margin-left: 30px;*/
    display:flex;
    justify-content: center;
}

.usermgmt-btn:hover {
    background-color: var(--usermgmt-hover); /* Usar la variable de hover */
}
/* Base para todos los inputs, selects y botones de formulario */
.usermgmt-input,
.usermgmt-select,
.usermgmt-btn.toggle-categorias {
    width: 100%;
    height: 53px; /* Altura estándar para todos */
    padding: 10px;
    border: 1px solid var(--usermgmt-border);
    border-radius: 4px;
    background-color: var(--usermgmt-dark);
    color: var(--usermgmt-light);
    margin-bottom: 15px;
    box-sizing: border-box;
}
/* Botones */
.usermgmt-btn, 
.toggle-categorias {
    background-color: var(--usermgmt-dark);
    color: var(--usermgmt-light);
    padding: 10px 20px;
    border: 1px solid var(--usermgmt-border);
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
	/*margin-left: 30px;*/
	text-align: center;
	justify-content: center;
}

/* Estilo específico para el botón de categorías en el formulario de perfil */
.form-row .usermgmt-btn.toggle-categorias {
    width: 100%;
    height: 53px;
    padding: 10px;
    border: 1px solid var(--usermgmt-border);
    border-radius: 4px;
    background-color: var(--usermgmt-dark);
    color: var(--usermgmt-light);
    margin: 0;
    cursor: pointer;
    font-weight: bold;
    transition: all 0.3s ease;
    text-align: center;
    display: flex;
    align-items: center;
	justify-content: center;
}
.usermgmt-btn:hover,
.toggle-categorias:hover {
    background-color: var(--usermgmt-hover);
}
/* Grid de categorías */
.usermgmt-categories-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin-top: 10px;
}

.usermgmt-categoria-label {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: var(--usermgmt-dark);
    color: var(--usermgmt-light);
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background-color 0.3s ease, color 0.3s ease;
    border: 1px solid var(--usermgmt-border);
}

.usermgmt-categoria-label:hover {
    background-color: var(--usermgmt-hover);
}

.usermgmt-categoria-label.seleccionada {
    background-color: var(--usermgmt-light);
    color: var(--usermgmt-dark);
}
.save-changes-container {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: 100%;
    max-width: 200px;
}
.iniciar-sesion-container {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: 100%;
    max-width: 200px;
}
.registrarse-container {
    display: flex;
    justify-content: center;
    margin: 20px auto;
    width: 100%;
    max-width: 200px;
}
/* Grid de elementos (si es necesario) */
.usermgmt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    padding: 20px 0;
    justify-content: center;
}

/* Tarjetas o elementos individuales */
.usermgmt-item {
    background: var(--usermgmt-card-bg); /* Usar el nuevo color para tarjetas */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    border: 1px solid var(--usermgmt-border);
    color: var(--usermgmt-light); /* Asegurar texto claro */
}

.usermgmt-item:hover {
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

/* Enlaces */
.usermgmt-link {
    color: var(--usermgmt-light);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.usermgmt-link:hover {
    opacity: 0.8;
}

/* Mensajes */
.usermgmt-message {
    padding: 10px;
    border-radius: 4px;
    margin: 10px 0;
    text-align: center;
    color: var(--usermgmt-light);
    background-color: var(--usermgmt-dark);
}

.usermgmt-message.success {
    background-color: #4CAF50;
}

.usermgmt-message.error {
    background-color: #F44336;
}
/* Inputs y campos de formulario */
/* Ya definidos arriba para consistencia */
/* .usermgmt-input,
.usermgmt-textarea,
.usermgmt-select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--usermgmt-border);
    border-radius: 4px;
    background-color: var(--usermgmt-dark);
    color: var(--usermgmt-light);
    margin-bottom: 15px;
} */

/* Checkbox personalizado */
.usermgmt-checkbox {
    color: var(--usermgmt-light);
    display: flex;
    align-items: center;
    gap: 8px;
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .usermgmt-grid {
        grid-template-columns: 1fr;
    }

    .usermgmt-form {
        padding: 10px;
    }
}

/* Reset completo para el contenedor principal */
/* Las siguientes reglas están commented out porque parecen ser overrides globales que afectan a más que solo el formulario.
   Se mantienen en el archivo original, pero mi recomendación es ser más específico o usarlos con precaución.
.user-page-content .site-content,
.user-page-content .ast-container,
.user-page-content #primary,
.user-page-content .dcid-form-container,
.user-page-content .entry-content {
    background-color: #151515 !important;
}*/

/* Ocultar sidebar */
.user-page-content #secondary,
.user-page-content .widget-area.secondary {
    display: none !important;
}

/* Contenedor del formulario */
.user-page-content .dcid-form-container {
    /* Eliminamos las propiedades que estaban causando conflicto con .ast-container */
    /* width: 90% !important; */
    /* max-width: 1400px !important; */
    margin: 0 auto !important; /* Mantenemos este para asegurar el centrado del propio contenedor */
    /* padding: 40px !important; */
    /* Dejamos que herede el max-width y padding del .ast-container */

    /* Forzamos el background para que sea el del contenedor de pestañas */
    background-color: var(--usermgmt-card-bg) !important; /* Para que el fondo del área de contenido sea consistente */
    padding: 20px !important; /* Usar el mismo padding que el tab-content para consistencia */
    border-radius: 8px !important; /* Mantener bordes redondeados */
    border: 1px solid var(--usermgmt-border) !important; /* Mantener el borde */
}

/* Fila del formulario */
.user-page-content .form-row {
    display: grid !important;
    grid-template-columns: 300px minmax(300px, 800px) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
    align-items: center !important;
}

/* Campos de entrada */
.user-page-content .dcid-form input[type="text"],
.user-page-content .dcid-form input[type="email"],
.user-page-content .dcid-form input[type="password"],
.user-page-content .dcid-form input[type="date"],
.user-page-content .dcid-form select,
.user-page-content .dcid-form textarea {
    width: 100% !important;
    height: 45px !important;
    background-color: var(--usermgmt-dark) !important; /* Usar variable */
    border: 1px solid var(--usermgmt-border) !important; /* Usar variable */
    color: var(--usermgmt-light) !important; /* Usar variable */
    padding: 8px 12px !important;
    font-size: 16px !important;
}

/* Contenedor de categorías */
.user-page-content #user-categorias-container {
    width: 100% !important;
    max-width: 1120px !important;
    display: none !important;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 10px !important;
    padding: 20px !important;
    margin-top: 10px !important;
    grid-column: 1 / -1 !important;
    background-color: var(--usermgmt-card-bg); /* Fondo coherente */
    border: 1px solid var(--usermgmt-border);
    border-radius: 8px;
}

/* Botón de categorías */
.user-page-content #user-toggle-categorias {
    max-width: 1120px !important;
    margin: 60 !important;
	height: 45px !important;
    grid-column: 1 / -1 !important;
    background-color: var(--usermgmt-dark) !important; /* Usar variable */
    border: 1px solid var(--usermgmt-border) !important; /* Usar variable */
    color: var(--usermgmt-light) !important; /* Usar variable */
    padding: 15px !important;
    cursor: pointer !important;
	text-align: center
}
.user-page-content #user-categorias-container.visible {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}

/* Contenedor principal para asegurar el ancho completo */
.user-page-content .form-row {
    display: grid !important;
    grid-template-columns: 300px minmax(300px, 800px) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
    align-items: start !important; /* Cambiado de center a start */
    width: 100% !important;
}
/* Ajustar el contenedor de categorías para usar todo el ancho */
.user-page-content .form-row:has(#user-categorias-container) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: block !important; /* Permitir que use todo el ancho */
}

/* Labels de categorías */
.user-page-content .categoria-label {
    background-color: var(--usermgmt-card-bg) !important; /* Fondo coherente */
    border: 1px solid var(--usermgmt-border) !important; /* Usar variable */
    color: var(--usermgmt-light) !important; /* Usar variable */
    padding: 10px !important; /* Aumentado el padding */
    text-align: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 50px !important; /* Altura mínima para uniformidad */
}

.user-page-content .categoria-label:hover {
    background-color: var(--usermgmt-hover) !important; /* Usar variable */
}

.user-page-content .categoria-label.seleccionada {
    background-color: var(--usermgmt-light) !important; /* Fondo claro para seleccionada */
    color: var(--usermgmt-dark) !important; /* Texto oscuro para seleccionada */
    border-color: var(--usermgmt-light) !important;
}

/* Asegurar que el contenido principal ocupa todo el ancho */
.user-page-content #primary {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Eliminar cualquier margen o padding que pueda estar causando espacio */
.user-page-content .site-content {
    padding: 0 !important;
}

.user-page-content .ast-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* NUEVOS ESTILOS PARA LA SECCIÓN DE GRUPOS - COLORES ADAPTADOS */
#user-groups-section {
    background-color: var(--usermgmt-dark); /* Fondo oscuro para la sección principal de grupos */
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-top: 30px;
    color: var(--usermgmt-light); /* Texto claro para toda la sección */
}

#user-groups-section .usermgmt-title {
    color: var(--usermgmt-light) !important; /* Título claro */
    font-size: 1.8em;
    margin-bottom: 25px;
    border-bottom: 2px solid var(--usermgmt-border); /* Borde claro */
    padding-bottom: 10px;
}

#groups-management-area {
    margin-top: 20px;
}

#create-group-form-container {
    /*background-color: var(--usermgmt-card-bg); /* Fondo de tarjeta para el formulario */
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--usermgmt-border);
    margin-bottom: 25px;
}

#create-group-form-container h4,
#my-groups-list h4,
#group-invitations-list h4,
#group-sent-requests-list h4,
#group-received-requests-list h4 {
    color: var(--usermgmt-light); /* Títulos de lista claros */
    font-size: 1.3em;
    margin-bottom: 15px;
    border-bottom: 1px dashed var(--usermgmt-border); /* Borde claro */
    padding-bottom: 8px;
}
#my-groups-list h5,
#group-invitations-list h5,
#group-sent-requests-list h5,
#group-received-requests-list h5 {
    color: var(--usermgmt-light); /* Títulos de lista claros */
    font-size: 1.1em;
    margin-top: 15px;
    margin-bottom: 10px;
}


#my-groups-list ul,
#group-invitations-list ul,
#group-sent-requests-list ul,
#group-received-requests-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#my-groups-list li,
#group-invitations-list li,
#group-sent-requests-list li,
#group-received-requests-list li {
    background-color: var(--usermgmt-card-bg); /* Fondo de tarjeta para ítems de lista */
    border: 1px solid var(--usermgmt-border);
    padding: 12px 15px;
    margin-bottom: 10px;
    border-radius: 6px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px; /* Espacio entre elementos flexibles */
    color: var(--usermgmt-light); /* Texto claro para ítems de lista */
}

#my-groups-list li strong {
    color: var(--usermgmt-light); /* Texto fuerte claro */
}

/* Botones específicos de grupo - ya definidos con colores absolutos o que no necesitan cambio */
/* Specific button colors */
.accept-invitation-btn, .accept-request-btn, .accept-request-member-btn {
    background-color: #28a745; /* Green */
    color: white;
    border: 1px solid #28a745;
}
.accept-invitation-btn:hover, .accept-request-btn:hover, .accept-request-member-btn:hover {
    background-color: #218838;
}

.reject-invitation-btn, .reject-request-btn, .reject-request-member-btn, .remove-member-btn, .leave-group-btn, .withdraw-request-btn {
    background-color: #dc3545; /* Red */
    color: white;
    border: 1px solid #dc3545;
}
.reject-invitation-btn:hover, .reject-request-btn:hover, .reject-request-member-btn:hover, .remove-member-btn:hover, .leave-group-btn:hover, .withdraw-request-btn:hover {
    background-color: #c82333;
}

.view-members-btn, .edit-group-btn {
    background-color: #6c757d; /* Gris como Eliminar */
    color: white;
    border: 1px solid #6c757d;
}
.view-members-btn:hover, .edit-group-btn:hover {
    background-color: #5a6268; /* Gris oscuro al hover como Eliminar */
}

.delete-group-btn {
    background-color: #6c757d; /* Grey */
    color: white;
    border: 1px solid #6c757d;
}
.delete-group-btn:hover {
    background-color: #5a6268;
}

.change-member-rol-btn {
    background-color: #ffc107; /* Yellow */
    color: #212529;
    border: 1px solid #ffc107;
}
.change-member-rol-btn:hover {
    background-color: #e0a800;
}


/* Modal de miembros y edición de grupo - FONDOS OSCUROS */
.dcid-modal-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo semi-transparente más oscuro */
    z-index: 1000;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.dcid-modal-content {
    background: var(--usermgmt-dark); /* Fondo oscuro para el contenido del modal */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Sombra más pronunciada */
    position: relative;
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
    color: var(--usermgmt-light); /* Texto claro por defecto en modal */
}

.dcid-modal-content h3 {
    color: var(--usermgmt-light) !important; /* Títulos en modal claros */
}

.dcid-modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    cursor: pointer;
    color: var(--usermgmt-border); /* Color de cierre claro */
}

.dcid-modal-close-btn:hover {
    color: var(--usermgmt-light); /* Color de cierre claro al hover */
}

#group-members-modal-body h4,
#group-members-modal-body h5 {
    font-size: 1.2em;
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--usermgmt-light); /* Títulos de subsección claros */
}

#group-members-modal-body ul {
    list-style: none;
    padding: 0;
}

#group-members-modal-body li {
    background-color: var(--usermgmt-card-bg); /* Fondo de tarjeta para ítems de lista en modal */
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--usermgmt-light); /* Texto claro en ítems de lista */
    border: 1px solid var(--usermgmt-border);
}

#group-members-modal-body li button {
    margin-left: auto;
    padding: 5px 10px;
    font-size: 0.85em;
}

#member-search-results ul {
    padding-left: 0;
    list-style: none;
}

#member-search-results li {
    background-color: var(--usermgmt-card-bg); /* Fondo de tarjeta para resultados de búsqueda */
    padding: 8px 12px;
    margin-bottom: 5px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    color: var(--usermgmt-light); /* Texto claro en resultados de búsqueda */
    border: 1px solid var(--usermgmt-border);
}

#member-search-results li button {
    margin-left: auto;
}

/* ESTILOS PARA PESTAÑAS DE PERFIL */
.dcid-profile-tabs {
    margin-top: 20px; /* Espacio antes de las pestañas */
    margin-bottom: 30px;
    background-color: var(--usermgmt-card-bg, #1a1a1a);
    border-radius: 8px;
    border: 1px solid var(--usermgmt-border, #333);
    /* Asegurarse de que este contenedor ocupe el ancho completo de su padre si es necesario */
    width: 100%;
    box-sizing: border-box; /* Incluir padding y borde en el ancho */
}

.dcid-profile-tabs .nav-tabs {
    list-style: none;
    padding: 0 20px; /* **CRUCIAL**: Este padding debe coincidir con el padding lateral del .ast-container o el contenedor que realmente limita el ancho, para alinear el "contenido" de las pestañas. */
    margin: 0;
    display: flex;
    /*justify-content: center; /* Centra el grupo de pestañas dentro de su propio padding */
    align-items: flex-end; /* Alinea las pestañas en la parte inferior si tienen alturas diferentes */
    gap: 30px; /* ESPACIO ENTRE PESTAÑAS - ajusta este valor si necesitas más o menos */

    border-bottom: 2px solid var(--usermgmt-border, #333);
    background-color: var(--usermgmt-dark, #151515);
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    box-sizing: border-box;
}

.dcid-profile-tabs .nav-tabs li {
    margin-right: 0; /* Aseguramos que no haya margen externo que interfiera con gap */
    margin-bottom: -2px; /* Para que el borde de la pestaña activa cubra el borde del nav-tabs */
    flex-shrink: 0; /* Evita que las pestañas se encojan si el espacio es limitado */
}

.dcid-profile-tabs .nav-tabs li a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: var(--usermgmt-light, #fff);
    background-color: transparent;
    border: 2px solid transparent;
    border-bottom: none;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    position: relative;
    white-space: nowrap; /* Evita que el texto de la pestaña se rompa en varias líneas */
}

.dcid-profile-tabs .nav-tabs li a:hover {
    background-color: var(--usermgmt-hover, #2a2a2a);
    color: var(--usermgmt-light, #fff);
}

.dcid-profile-tabs .nav-tabs li.active-tab a {
    background-color: var(--usermgmt-card-bg, #1a1a1a);
    color: var(--usermgmt-light, #fff);
    border-color: var(--usermgmt-border, #333);
    border-bottom-color: var(--usermgmt-card-bg, #1a1a1a);
}

.dcid-profile-tabs .tab-content {
    padding: 20px; /* Padding para el contenido de todas las pestañas */
}

.dcid-profile-tabs .tab-content .tab-pane {
    display: none;
}

.dcid-profile-tabs .tab-content .tab-pane.active-pane {
    display: block;
}



/* Contenedor para mensajes AJAX dentro del formulario de perfil */
.usermgmt-form .usermgmt-messages-wrapper {
    margin-bottom: 15px;
}
.usermgmt-form .usermgmt-messages-wrapper .usermgmt-message {
    padding: 10px 15px;
    border-radius: 4px;
    text-align: center;
    color: var(--usermgmt-light);
}
.usermgmt-form .usermgmt-messages-wrapper .usermgmt-message.success {
    background-color: #28a745; /* Verde para éxito */
    border: 1px solid #1e7e34;
}
.usermgmt-form .usermgmt-messages-wrapper .usermgmt-message.error {
    background-color: #dc3545; /* Rojo para error */
    border: 1px solid #b21f2d;
}


/* Ajustes para que los form-row dentro de las pestañas se vean bien */
.tab-content .form-row {
    /* display: grid !important; */ /* Puede que no sea necesario si tu CSS global ya lo maneja */
    /* grid-template-columns: 300px minmax(300px, 1fr) !important; */
    /* gap: 20px !important; */
    margin-bottom: 25px !important; /* Aumentar un poco el espacio inferior */
    align-items: start !important; 
}

/* Para el layout especial de categorías y comparaciones conocidas */
.tab-content .form-row.special-layout > label.usermgmt-label {
    margin-bottom: 10px; /* Espacio entre label y el botón/contenedor */
    display: block; /* Para que ocupe su propia línea si es necesario */
}
.tab-content .form-row.special-layout > div {
    /* Contenedor del botón y el div de categorías/comparaciones */
}

/* Título de la sección de grupos dentro de la pestaña */
#tab-grupos .usermgmt-subtitle {
    color: var(--usermgmt-light) !important;
    font-size: 1.6em; 
    margin-top: 0; /* Quitar margen si el tab-content ya tiene padding */
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--usermgmt-border);
}

#user-groups-section {
    margin-top: 0; 
    padding: 0; /* El padding ya está en .tab-content */
    border: none; 
    box-shadow: none; 
    background-color: transparent; 
}
/* Mejorar espaciado en listas de grupos y botones */
#my-groups-list ul li, 
#group-invitations-list ul li, 
#group-sent-requests-list ul li, 
#group-received-requests-list ul li,
#group-members-modal-body ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px; /* Espacio entre el texto y los botones */
}
.group-actions button {
    margin-left: 5px; /* Pequeño margen entre botones de acción */
}
.save-section-container {
    margin-top: 20px;
    display: flex !important; /* Añadimos !important aquí */
    justify-content: center;
    width: 100%;
}

.user-page-content .form-row.save-section-container {
    display: flex !important; /* Ahora es más específico y tiene !important */
    justify-content: center !important; /* Añadimos !important aquí también */
    width: 100% !important; /* Y aquí por si acaso, para asegurar que abarque el ancho */
    margin-top: 20px !important; /* Asegurar que el margen se mantiene */
}

.user-page-content .form-row.description-row {
    display: block !important; /* Fuerza que el contenedor se comporte como un bloque y cada hijo en su propia línea */
    /* Elimina las columnas de grid para este caso */
    grid-template-columns: none !important; 
    gap: 0 !important; /* Elimina cualquier espacio de grid */
}

/* Ajuste para los elementos dentro de la fila de descripción */
.user-page-content .form-row.description-row .usermgmt-label {
    margin-bottom: 10px; /* Añade un poco de espacio debajo de la etiqueta */
    display: block; /* Asegura que la etiqueta ocupe su propia línea */
}

.user-page-content .form-row.description-row .usermgmt-textarea {
    width: 100% !important; /* Asegura que el textarea ocupe todo el ancho disponible */
}
/* ESTILOS ADICIONALES PARA EL HOVER/FOCUS DE INPUTS Y TEXTAREAS */
.usermgmt-input:hover,
.usermgmt-textarea:hover,
.usermgmt-input:focus, /* También lo aplicamos al focus para consistencia */
.usermgmt-textarea:focus {
    background-color: var(--usermgmt-light) !important; /* Fondo blanco al hover/focus */
    color: var(--usermgmt-dark) !important; /* Texto negro al hover/focus */
    border-color: var(--usermgmt-light) !important; /* Opcional: El borde también se vuelve blanco */
}

/* Estilos específicos para la fila de productos/servicios conocidos */
.user-page-content .form-row.known-products-row {
    display: block !important; /* Fuerza que el contenedor se comporte como un bloque */
    grid-template-columns: none !important; /* Elimina las columnas de grid */
    gap: 0 !important; /* Elimina cualquier espacio de grid */
    align-items: start !important; /* Asegura que los elementos se alineen arriba si el display flex/grid es re-aplicado */
}

/* Ajuste para los elementos dentro de la fila de productos conocidos */
.user-page-content .form-row.known-products-row .usermgmt-label {
    margin-bottom: 10px; /* Añade espacio debajo de la etiqueta */
    display: block; /* Asegura que la etiqueta ocupe su propia línea */
}

/* Ajuste para el contenedor principal de los productos y el botón */
.user-page-content .form-row.known-products-row #user-known-comparaciones-wrapper {
    width: 100%; /* Asegura que este contenedor ocupe todo el ancho */
}

/* Ajuste para la lista de productos seleccionados dentro del wrapper */
.user-page-content .form-row.known-products-row #selected-comparaciones-list {
    margin-top: 5px; /* Pequeño ajuste de margen superior si es necesario */
}

/* Estilo para los ítems de la lista de productos conocidos (para que ocupen todo el ancho y se vean bien) */
.user-page-content .form-row.known-products-row #selected-comparaciones-list ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Asegura que cada ítem de la lista ocupe todo el ancho */
    gap: 10px; /* Espacio entre el texto y el botón de eliminar */
}

/* Estilo para el botón "Añadir/editar productos conocidos" dentro de su contenedor */
.user-page-content .form-row.known-products-row .button-center-container {
    width: 100%; /* Asegura que el contenedor del botón ocupe todo el ancho */
    display: flex; /* Para centrar el botón */
    justify-content: center; /* Centra el botón horizontalmente */
    margin-top: 15px; /* Margen superior para separarlo de la lista */
}

.remove-known-item-btn {
    color: #dc3545 !important; /* El color rojo que usas para eliminar/rechazar */
    cursor: pointer; /* Indicar que es un elemento interactivo */
    font-size: 1.2em; /* Hazlo un poco más grande para que se vea mejor */
    font-weight: bold; /* Para que resalte más */
    margin-left: 10px; /* Separar un poco del texto del producto */
    transition: color 0.2s ease; /* Transición suave al pasar el ratón */
}

.remove-known-item-btn:hover {
    color: #c82333 !important; /* Un rojo un poco más oscuro al pasar el ratón */
}
#my-groups-list li.group-item-card {
    display: flex; /* Usar flexbox para el diseño general de la tarjeta */
    flex-direction: column; /* Apilar los elementos (nombre, detalles, botones) verticalmente */
    align-items: center; /* Centrar todo el contenido horizontalmente por defecto */
    background-color: var(--usermgmt-card-bg); /* Asegurar el fondo de la tarjeta */
    border: 1px solid var(--usermgmt-border); /* Borde */
    padding: 15px; /* Aumentar el padding interno */
    margin-bottom: 30px; /* Mantener espacio entre tarjetas */
    border-radius: 8px; /* Bordes redondeados */
    color: var(--usermgmt-light); /* Texto claro */
    text-align: center; /* Asegurar que el texto dentro esté centrado */
}

.group-item-card .group-name-display {
    font-size: 1.4em; /* Nombre del grupo un poco más grande */
    font-weight: bold;
    margin-bottom: 5px; /* Espacio debajo del nombre */
    width: 100%; /* Asegurar que ocupe todo el ancho para el centrado */
    color: var(--usermgmt-light); /* Asegurar color de texto */
}

.group-item-card .group-details-display {
    font-size: 0.9em;
    color: var(--usermgmt-light); /* Asegurar color de texto */
    margin-bottom: 15px; /* Espacio antes de los botones */
    width: 100%; /* Asegurar que ocupe todo el ancho para el centrado */
}

.group-item-card .group-actions-container {
    display: flex; /* Usar flexbox para alinear los botones horizontalmente */
    justify-content: space-between; /* Distribuir los botones: izquierda, centro, derecha */
    width: 100%; /* Ocupar todo el ancho disponible para la alineación */
    gap: 10px; /* Espacio entre los botones */
    flex-wrap: wrap; /* Permitir que los botones pasen a la siguiente línea en pantallas pequeñas */
}

.group-item-card .group-actions-container .usermgmt-btn {
    flex-grow: 1; /* Permite que los botones crezcan para ocupar el espacio */
    text-align: center; /* Centrar el texto dentro de cada botón */
    margin: 0; /* Eliminar márgenes por defecto para que gap funcione */
    min-width: 100px; /* Ancho mínimo para que no se compriman demasiado */
    /* Ancho máximo si necesitas que no sean muy grandes, e.g., max-width: 32%; */
}

/* Ajustes para el caso de 2 o 1 botón, si es necesario */
.group-item-card .group-actions-container:has(button:nth-child(2):last-child) {
    justify-content: center; /* Si solo hay 2 botones, centrarlos */
}
.group-item-card .group-actions-container:has(button:only-child) {
    justify-content: center; /* Si solo hay 1 botón, centrarlo */
}

/* Esto asegura que los botones individuales puedan alinearse sin problema */
.group-item-card .group-actions-container .view-members-btn,
.group-item-card .group-actions-container .edit-group-btn,
.group-item-card .group-actions-container .delete-group-btn,
.group-item-card .group-actions-container .leave-group-btn {
    /* Mantener los estilos de los botones ya definidos, solo asegurar el flex-grow */
    flex-grow: 1;
    /* Si quieres un tamaño más controlado y no solo crecer, puedes usar: */
    /* flex-basis: 30%; Opcional, para controlar el ancho base de cada botón */
    /* max-width: 32%; Opcional, para que no crezcan demasiado */
}
.group-item-card .group-description-display {
    font-size: 0.9em;
    color: var(--usermgmt-light); /* Color de texto claro */
    margin-top: 10px; /* Espacio superior */
    margin-bottom: 15px; /* Espacio antes de los botones */
    width: 100%; /* Asegura que ocupe todo el ancho para el centrado */
    text-align: center; /* Centrar el texto */
    line-height: 1.4; /* Mejora la legibilidad */
}

/* Estilo para centrar los botones en su propia fila */
.button-row-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 10px auto; /* Mantener este margen general si se desea espacio vertical para todos los .button-row-center */
}

/* Espacio adicional para el botón "Crear Nuevo Grupo" */
.button-row-center.create-group-button-row {
    margin-bottom: 30px; /* ¡Triplicamos el espacio aquí! */
    /* Anulamos el margin-bottom del 10px auto general para esta regla,
       o el margin-top del siguiente div, dependiendo de cómo los márgenes colapsen.
       30px es el total deseado de espacio entre los dos botones. */
}