/* 1. Contenedor principal del formulario: Limitar ancho y centrar */
form#login-form-121 {
    max-width: 450px; /* Evita que se estire por toda la pantalla */
    margin:  100px auto 40px auto; /* El 'auto' centra el formulario horizontalmente */
    padding: 0 15px; /* Un poco de respiro a los lados */
    box-sizing: border-box;
}

/* 2. Espaciado consistente entre los campos (inputs y botones) */
form#login-form-121 .form-group {
    margin-bottom: 20px;
}

/* 3. Alinear el botón principal "Log in" para que coincida con el de Passkey */
form#login-form-121 button[name="Submit"] {
    width: 100%; /* Hace que el botón rojo ocupe todo el ancho */
    padding: 12px; /* Lo hace un poco más alto y fácil de clickear */
}

/* 4. Alinear correctamente el ícono dentro del botón de Passkey */
form#login-form-121 .plg_system_webauthn_login_button svg {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    vertical-align: middle; /* Alinea el ícono con el texto */
}

/* 5. Centrar los enlaces inferiores (Olvidó contraseña, Registro, etc.) */
form#login-form-121 .mod-login__options {
    text-align: center;
    margin-top: 30px;
    padding-left: 0;
}

/* 6. Separar un poco los enlaces entre sí para que no se vean amontonados */
form#login-form-121 .mod-login__options li {
    margin-bottom: 12px;
}

/* 7. Mejorar la alineación de la casilla "Remember Me" */
form#login-form-121 .form-check {
    display: flex;
    align-items: center;
}

form#login-form-121 .form-check-input {
    margin-top: 0;
    margin-right: 10px;
}

/* 1. Redondear las esquinas izquierdas de los campos de texto */
form#login-form-121 .input-group > .form-control {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

/* Redondear también los botones principales para que hagan juego */
form#login-form-121 button[name="Submit"],
form#login-form-121 .plg_system_webauthn_login_button {
    border-radius: 8px !important;
}
/* 2. Redondear las esquinas derechas de los íconos/botones pegados al input */
form#login-form-121 .input-group > .input-group-text,
form#login-form-121 .input-group > .btn.input-password-toggle {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}




/* ==========================================================================
   KUNENA CUSTOM OVERRIDES - FAMILIAS NUMEROSAS DE MADRID
   Colores corporativos: Rojo (#970001) / Ámbar (#d97706)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

/* --- 1. Tipografía Global y Contenedor --- */
#kunena.layout {
    margin-top: 40px !important;
}

#kunena.layout, 
#kunena.layout * {
    font-family: 'Roboto', sans-serif !important;
}

/* --- 2. Títulos Principales y Secundarios --- */
#kunena.layout h1 {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    position: relative !important;
    padding-bottom: 12px !important;
    margin-top: 35px !important;
    margin-bottom: 25px !important;
}

#kunena.layout h1::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 60px !important;
    height: 4px !important;
    background-color: #970001 !important;
    border-radius: 2px !important;
}

#kunena.layout h1 small {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 400 !important;
    color: #6c757d !important;
    font-size: 1rem !important;
}

#kunena.layout h2 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 30px !important;
    margin-bottom: 15px !important;
}

#kunena.layout #filter-time {
    margin-top: 35px !important;
}

/* --- 3. Menú de Navegación del Foro --- */
#kunena.layout .navbar {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-left: 5px solid #d97706 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    padding: 10px 15px !important;
}

#kunena.layout .navbar-nav .nav-link {
    color: #4b5563 !important;
    font-weight: 500 !important;
    transition: color 0.2s ease-in-out !important;
}

#kunena.layout .navbar-nav .nav-link:hover,
#kunena.layout .navbar-nav .nav-item.active .nav-link,
#kunena.layout .navbar-nav .nav-link.active {
    color: #970001 !important;
}

#kunena.layout .klogout,
#kunena.layout .navbar .float-end {
    display: none !important;
}

/* --- 4. Inputs y Formulario de Creación de Temas --- */
#kunena.layout .form-control,
#kunena.layout .form-select,
#kunena.layout select,
#kunena.layout input[type="text"] {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease-in-out !important;
}

#kunena.layout .form-control:focus,
#kunena.layout .form-select:focus,
#kunena.layout select:focus,
#kunena.layout input[type="text"]:focus {
    border-color: #970001 !important;
    box-shadow: 0 0 0 3px rgba(151, 0, 1, 0.15) !important;
    outline: 0 !important;
}

#kunena.layout .nav-tabs {
    border-bottom: 2px solid #e5e7eb !important;
    margin-bottom: 15px !important;
}

#kunena.layout .nav-tabs .nav-link {
    color: #4b5563 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    font-weight: 500 !important;
    background: transparent !important;
}

#kunena.layout .nav-tabs .nav-link.active {
    color: #970001 !important;
    border-bottom-color: #970001 !important;
    font-weight: 700 !important;
}

#kunena.layout .cke_chrome {
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden;
}

/* --- 5. Archivos Adjuntos --- */
#kunena.layout .badge.bg-info {
    background-color: #fef3c7 !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
}

#kunena.layout .dropzone {
    border: 2px dashed #d1d5db !important;
    background-color: #f9fafb !important;
    border-radius: 8px !important;
    padding: 25px !important;
    text-align: center !important;
}

#kunena.layout #klabel_info_drop_browse {
    color: #4b5563 !important;
    font-weight: 500 !important;
}

/* --- 6. Botones del Formulario --- */
#kunena.layout .btn-outline-success {
    background-color: #970001 !important;
    border-color: #970001 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

#kunena.layout .btn-outline-success:hover:not(:disabled) {
    background-color: #7a0001 !important;
    border-color: #7a0001 !important;
}

#kunena.layout .btn-outline-success:disabled {
    background-color: #f3f4f6 !important;
    border-color: #e5e7eb !important;
    color: #9ca3af !important;
}

#kunena.layout .btn-outline-primary {
    border-color: #d97706 !important;
    color: #d97706 !important;
    background-color: transparent !important;
    border-radius: 6px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

#kunena.layout .btn-outline-primary:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
}

#kunena.layout .fileinput-button {
    border-color: #970001 !important;
    color: #970001 !important;
}

#kunena.layout .fileinput-button:hover {
    background-color: #970001 !important;
    color: #ffffff !important;
}

/* --- 7. Tabla de Temas con Contenido --- */
#kunena.layout .kfrontend,
#kunena.layout .table {
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background-color: #ffffff !important;
}

#kunena.layout .table thead th {
    background-color: #f9fafb !important;
    color: #374151 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #e5e7eb !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.05em !important;
    padding: 14px 15px !important;
    vertical-align: middle !important;
}

/* Distribución, márgenes internos y centrado vertical de las filas */
#kunena.layout .table td,
#kunena.layout .table tbody th {
    padding: 18px 15px !important; /* Espaciado interno más generoso */
    vertical-align: middle !important; /* Centrado vertical absoluto */
}

#kunena.layout .table tbody tr:hover {
    background-color: #f9fafb !important;
}

#kunena.layout .table td {
    border-bottom: 1px solid #f3f4f6 !important;
}

#kunena.layout .topic-list tr td svg.bi-comment,
#kunena.layout .topic-list tr th svg.bi-comment {
    color: #970001 !important;
    width: 22px !important;
    height: 22px !important;
}

#kunena.layout .topic-list .topictitle {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    transition: color 0.15s ease-in-out !important;
}

#kunena.layout .topic-list .topictitle:hover {
    color: #970001 !important;
}

#kunena.layout .topic-list svg.bi-flag {
    color: #d97706 !important;
    margin-left: 8px !important;
}

#kunena.layout .topic-list .started {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
}

#kunena.layout .topic-list .started a {
    color: #4b5563 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

#kunena.layout .topic-list .started a:hover {
    color: #d97706 !important;
    text-decoration: underline !important;
}

#kunena.layout .topic-list .replies,
#kunena.layout .topic-list .views {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    margin-bottom: 4px !important;
}

#kunena.layout .topic-list .repliesnum,
#kunena.layout .topic-list .viewsnum {
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-left: 5px !important;
}

#kunena.layout .topic-list .lastpostlink a {
    color: #970001 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

#kunena.layout .topic-list .lastpostlink a:hover {
    text-decoration: underline !important;
}

#kunena.layout .topic-list .datepost {
    font-size: 0.8rem !important;
    color: #9ca3af !important;
}

#kunena.layout #klastpostphone {
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    margin-top: 6px !important;
    padding: 8px !important;
    background-color: #f9fafb !important;
    border-radius: 4px !important;
}

#kunena.layout #klastpostphone a {
    color: #970001 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* --- 8. Acciones de Moderación (Pie de tabla) --- */
#kunena.layout tfoot .input-group {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important; /* Separación limpia entre elementos del pie */
}

#kunena.layout tfoot select.form-select {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    background-color: #ffffff !important;
    display: inline-block !important;
    width: auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* FORZAR que el selector de destino se oculte si está deshabilitado */
#kunena.layout #kchecktarget:disabled {
    display: none !important;
}

#kunena.layout tfoot select.form-select:focus {
    border-color: #970001 !important;
    box-shadow: 0 0 0 3px rgba(151, 0, 1, 0.15) !important;
}

#kunena.layout tfoot button.btn-outline-primary {
    background-color: #970001 !important;
    border-color: #970001 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

#kunena.layout tfoot button.btn-outline-primary:hover {
    background-color: #7a0001 !important;
    border-color: #7a0001 !important;
    color: #ffffff !important;
}

#kunena.layout input[type="checkbox"] {
    cursor: pointer !important;
    accent-color: #970001 !important;
}

/* --- 9. Paginación (Solo abajo) --- */
#kunena.layout .pagination {
    display: none !important;
}

#kunena.layout .kfrontend ~ .float-start .pagination {
    display: flex !important;
}

#kunena.layout .pagination .page-item .page-link {
    color: #970001 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 4px !important;
    margin: 0 2px !important;
}

#kunena.layout .pagination .page-item.active .page-link {
    background-color: #970001 !important;
    border-color: #970001 !important;
    color: #ffffff !important;
}

#kunena.layout .pagination .page-item .page-link:hover {
    background-color: #f3f4f6 !important;
    color: #d97706 !important;
}

/* --- 10. Ocultar Migas de Pan --- */
#kunena.layout nav[aria-label="breadcrumbs"],
#kunena.layout .mod-kunena-breadcrumbs {
    display: none !important;
}

/* --- 11. Módulo de Últimos Mensajes (klatest) --- */
.klatest {
    font-family: 'Roboto', sans-serif !important;
    padding: 10px 0 !important;
}

.klatest-items {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.klatest-item {
    list-style: none !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-left: 4px solid #d97706 !important;
    border-radius: 8px !important;
    padding: 15px 18px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.klatest-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important;
}

.klatest-itemdetails {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    position: relative !important;
    padding-left: 35px !important;
}

.klatest-topicicon {
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    list-style: none !important;
}

.klatest-topicicon svg {
    color: #970001 !important;
    width: 20px !important;
    height: 20px !important;
    transition: transform 0.2s ease !important;
}

.klatest-item:hover .klatest-topicicon svg {
    transform: scale(1.15) !important;
}

.klatest-subject {
    list-style: none !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.klatest-subject a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.klatest-subject a:hover {
    color: #970001 !important;
}

.klatest-cat,
.klatest-author,
.klatest-posttime {
    list-style: none !important;
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    line-height: 1.4 !important;
}

.klatest-cat a,
.klatest-author a {
    color: #4b5563 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.15s ease !important;
}

.klatest-cat a:hover,
.klatest-author a:hover {
    color: #d97706 !important;
    text-decoration: underline !important;
}

.klatest-posttime {
    font-style: italic !important;
    color: #9ca3af !important;
}


/* ==========================================================================
   16. Diseño Integrado: Pestañas Planas de Base y Línea de Acento Vertical
   ========================================================================== */
/* Margen superior para todo el componente de perfil */
.cb_template,
.cb_template_default {
    margin-top: 30px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* --- Título del Nombre del Socio ("admin") --- */
.cb_template .cbProfileTitle h3 {
    font-family: 'Roboto', sans-serif !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    font-size: 1.35rem !important; /* Tamaño de subtítulo limpio */
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    display: inline-block !important;
}

/* --- Botón de "Editar" sutil redondeado --- */
.cb_template .cbMenuNavBar {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    float: right !important;
    margin-top: 5px !important;
    padding: 0 !important;
}

/* Limpieza de líneas residuales */
.cb_template .cbCanvasLayoutMenu *,
.cb_template .cbMenuNavBar *,
.cb_template .cbNavBarContainer,
.cb_template .cbNavBarMenu,
.cb_template .cbNavBarItem,
.cb_template .cbMenu {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.cb_template .cbMenuNavBar .nav-link {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important; /* Bordes redondeados finos */
    padding: 8px 16px !important;
    color: #4b5563 !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
}

.cb_template .cbMenuNavBar .nav-link:hover {
    background-color: #f9fafb !important;
    border-color: #9ca3af !important;
    color: #970001 !important;
}

/* --- Pestañas de Navegación del Perfil (Estilo Plano con Línea Gris de Base) --- */
.cb_template .cbTabsMenuNavBar {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #e5e7eb !important; /* Tu línea divisoria gris */
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 25px !important;
}

.cb_template .cbTabsNav .nav-link {
    color: #4b5563 !important;
    font-weight: 500 !important;
    border: none !important;
    border-bottom: 3px solid transparent !important; /* Línea activa invisible por defecto */
    border-radius: 0 !important;
    padding: 10px 16px !important;
    background: transparent !important;
    transition: all 0.2s ease-in-out !important;
}

/* Hover y pestaña activa con línea inferior en rojo principal (#970001) */
.cb_template .cbTabsNav .nav-link:hover,
.cb_template .cbTabsNav .nav-link.active {
    color: #970001 !important;
    border-bottom: 3px solid #970001 !important; /* Línea de pestaña activa */
    font-weight: 700 !important;
    background: transparent !important;
}

/* Alineación de la primera pestaña con el extremo izquierdo */
.cb_template .cbTabsNav .nav-item:first-child .nav-link {
    padding-left: 0 !important;
}

/* --- Bloque de Datos (Línea de Acento Vertical Ámbar de 3px) --- */
.cb_template .tab-content.cbTabsMenuContent {
    background: transparent !important;
    border: none !important;
    /* Línea vertical izquierda de acento que estructura de manera sutil */
    border-left: 3px solid #d97706 !important; 
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 0 0 24px !important; /* Espacio para separar el contenido del borde de acento */
}

/* --- Estilos de las cajas de texto ("campos" de lectura) --- */
.cb_template .form-control-plaintext {
    background-color: #f9fafb !important; /* Fondo gris claro suave */
    border: 1px solid #e5e7eb !important; /* Borde gris sutil */
    border-radius: 6px !important;
    padding: 12px 16px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    color: #1a1a1a !important;
    font-weight: 500 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Enlaces dentro de las cajas (por ejemplo, el correo electrónico) */
.cb_template .form-control-plaintext a {
    color: #970001 !important; /* Rojo corporativo */
    text-decoration: none !important;
    font-weight: 600 !important;
}

.cb_template .form-control-plaintext a:hover {
    color: #d97706 !important;
    text-decoration: underline !important;
}

/* --- Estilo de las Etiquetas (NIF, Nombre, etc.) --- */
.cb_template .col-form-label {
    font-weight: 700 !important;
    color: #4b5563 !important; /* Gris oscuro elegante */
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    padding-top: 10px !important;
}

/* Limpieza de líneas de división de herencia */
.cb_template .cb_form_line {
    margin-bottom: 16px !important;
    border-bottom: none !important;
}

/* Enlaces del submenú desplegable ("Editar perfil", etc.) */
.cb_template .cbSubMenu {
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05) !important;
    border-radius: 6px !important;
}

.cb_template .cbSubMenu a.dropdown-item {
    color: #4b5563 !important;
    font-weight: 500 !important;
}

.cb_template .cbSubMenu a.dropdown-item:hover {
    background-color: #f9fafb !important;
    color: #970001 !important;
}

/* ==========================================================================
   17. Maquetación Fina de Registro (Estilo "Hazte Socio" - Simetría y Errores)
   ========================================================================== */
/* Ocultar el título de registro nativo de CB */
.cb_template .cbRegistrationHeader {
    display: none !important;
}

/* Margen superior para todo el bloque de registro */
.cb_template.cbRegistration {
    margin-top: 0px !important;
}

/* Contenedor del formulario en 2 columnas */
.cb_template .cbRegistrationDiv {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 columnas de igual ancho */
    gap: 15px 50px !important; /* Separación vertical y horizontal */
    align-items: start !important;
}

/* --- Distribución de columnas --- */
.cb_template .cbRegistrationDiv #cbtf_11 {
    grid-column: 1 !important; /* Columna Izquierda */
}

.cb_template .cbRegistrationDiv #cbtf_25 {
    grid-column: 2 !important; /* Columna Derecha */
}

/* Bloques inferiores que ocupan el 100% de ancho */
.cb_template .cbRegistrationDiv #cbtf_28, /* Categoría y Unidad Familiar */
.cb_template .cbRegistrationDiv #cbtf_26, /* Dirección */
.cb_template .cbRegistrationDiv #cbtf_23, /* Banco */
.cb_template .cbRegistrationDiv #cbtf_29, /* Otra Info */
.cb_template .cbRegistrationDiv .cbRegistrationButtons {
    grid-column: span 2 !important;
}

/* --- COLUMNA IZQUIERDA: Representante Principal --- */
/* Título */
.cb_template .cbRegistrationDiv #cbtf_11::before {
    content: "Representante principal" !important;
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo 1 */
.cb_template .cbRegistrationDiv #cbtf_11 #cbfr_42::before {
    content: "Padre, Madre, Tutor, acogedor" !important;
    display: block !important;
    font-size: 1.15rem !important;
    color: #1a1a1a !important;
    margin-bottom: 4px !important;
    font-weight: normal !important;
}

/* Romper Flexbox de la etiqueta NIF izquierda */
.cb_template .cbRegistrationDiv #cbtf_11 #cbfr_42 label {
    display: block !important;
}

/* Subtítulo 2 (Itálica gris, arriba de la etiqueta NIF) */
.cb_template .cbRegistrationDiv #cbtf_11 #cbfr_42 label::before {
    content: "Será el usuario identificativo para el área privada" !important;
    display: block !important;
    font-size: 0.85rem !important;
    color: #6b7280 !important;
    font-style: italic !important;
    margin-bottom: 15px !important;
    font-weight: normal !important;
    text-transform: none !important;
}

/* --- COLUMNA DERECHA: Segundo Representante --- */
/* Título */
.cb_template .cbRegistrationDiv #cbtf_25::before {
    content: "Segundo Representante" !important;
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 5px !important;
}

/* Subtítulo 1 (Mismo margen que la izquierda para simetría absoluta) */
.cb_template .cbRegistrationDiv #cbtf_25 #cbfr_66::before {
    content: "Padre, Madre, Tutor, acogedor" !important;
    display: block !important;
    font-size: 1.15rem !important;
    color: #1a1a1a !important;
    margin-bottom: 4px !important;
}

/* Romper Flexbox de la etiqueta NIF derecha */
.cb_template .cbRegistrationDiv #cbtf_25 #cbfr_66 label {
    display: block !important;
}

/* Subtítulo 2 Invisible: Ocupa el mismo espacio físico pero es transparente */
.cb_template .cbRegistrationDiv #cbtf_25 #cbfr_66 label::before {
    content: "Será el usuario identificativo para el área privada" !important;
    display: block !important;
    font-size: 0.85rem !important;
    color: transparent !important; /* TEXTO COMPLETAMENTE INVISIBLE */
    font-style: italic !important;
    margin-bottom: 15px !important;
    font-weight: normal !important;
    text-transform: none !important;
}

/* --- Cabeceras de los Bloques Inferiores --- */
.cb_template .cbRegistrationDiv #cbtf_28::before {
    content: "Categoría y Unidad Familiar" !important;
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding-bottom: 8px !important;
}

.cb_template .cbRegistrationDiv #cbtf_26::before {
    content: "Dirección" !important;
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding-bottom: 8px !important;
}

.cb_template .cbRegistrationDiv #cbtf_23::before {
    content: "Datos Bancarios" !important;
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding-bottom: 8px !important;
}

.cb_template .cbRegistrationDiv #cbtf_29::before {
    content: "Otra información" !important;
    display: block !important;
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
    border-bottom: 2px solid #e5e7eb !important;
    padding-bottom: 8px !important;
}

/* --- Ocultar Iconos y Estilizar Campos obligatorios (*) --- */
.cb_template .cbFieldIcons {
    display: none !important;
}

/* Inyectar (*) en color de tu marca ámbar junto al label de obligatorios */
.cb_template .form-group:has(.required) label::after {
    content: " (*)" !important;
    color: #d97706 !important;
    font-weight: bold !important;
}

/* --- Estilo de Columnas e Inputs --- */
.cb_template .cbRegistrationDiv .form-group.row {
    flex-direction: column !important; /* Stack vertical */
    margin-bottom: 12px !important;
    position: static !important;
}

.cb_template .cbRegistrationDiv .col-form-label {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    padding-bottom: 8px !important;
    color: #1a1a1a !important;
    font-size: 0.95rem !important;
    font-weight: normal !important;
}

/* El contenedor del campo reservará de forma limpia el espacio para el error */
.cb_template .cbRegistrationDiv .cb_field {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding: 0 !important;
    position: relative !important;
    padding-bottom: 20px !important; /* ESPACIO RESERVADO DEBAJO DE LA CAJA DE TEXTO */
}

/* --- Estilo de inputs generales al 100% --- */
.cb_template .cbRegistrationDiv input.form-control,
.cb_template .cbRegistrationDiv select.form-control:not(.month):not(.day):not(.year),
.cb_template .cbRegistrationDiv .cb_field input:not(.cbDatePickerSelector),
.cb_template .cbRegistrationDiv .cb_field select:not(.month):not(.day):not(.year) {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    height: auto !important;
    font-size: 0.95rem !important;
    background-color: #ffffff !important;
}

/* Ocultar las cajas de texto auxiliares de fecha de nacimiento */
.cb_template .cbRegistrationDiv input.cbDatePickerSelector,
.cb_template .cbRegistrationDiv input[id*="Selector"],
.cb_template .cbRegistrationDiv input[type="hidden"] {
    display: none !important;
}

.cb_template .cbRegistrationDiv input.form-control:focus,
.cb_template .cbRegistrationDiv select.form-control:focus {
    border-color: #970001 !important;
    box-shadow: 0 0 0 3px rgba(151, 0, 1, 0.15) !important;
}

/* --- Forzar que el campo de Contraseña ocupe el 100% de la columna --- */
.cb_template .cbRegistrationDiv .cbPasswordUnmask {
    display: flex !important; /* Cambiamos de d-inline-flex a flex */
    width: 100% !important; /* Cambiamos de w-auto a 100% */
}

.cb_template .cbRegistrationDiv .cbPasswordUnmask input#password {
    flex: 1 !important; /* El input se estira para rellenar todo el espacio restante */
    width: auto !important;
}

/* --- Adaptación de los selectores de Fecha de Nacimiento (Estirados al 100%) --- */
.cb_template .cbRegistrationDiv #cbfv_62,
.cb_template .cbRegistrationDiv #cbfv_70 {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    gap: 10px !important;
}

.cb_template .cbRegistrationDiv .combodate {
    display: flex !important;
    flex: 1 !important;
    align-items: center !important;
    gap: 8px !important;
}

.cb_template .cbRegistrationDiv .combodate select {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 12px 10px !important;
    height: 48px !important; /* Misma altura vertical que los demás campos */
    background-color: #ffffff !important;
}

/* Icono del calendario */
.cb_template .cbRegistrationDiv .cbDatePickerCalendar {
    font-size: 1.35rem !important;
    color: #970001 !important;
    cursor: pointer !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* --- PREVENCIÓN DE DESPLAZAMIENTOS POR ERROR DE VALIDACIÓN --- */
/* Posicionamiento absoluto de los mensajes de error dentro de .cb_field */
.cb_template .cbRegistrationDiv label.error,
.cb_template .cbRegistrationDiv .invalid-feedback,
.cb_template .cbRegistrationDiv .cb_field label.error {
    position: absolute !important;
    bottom: 0px !important; /* Se coloca al fondo de los 20px reservados */
    left: 0 !important;
    font-size: 0.75rem !important;
    color: #970001 !important; /* Rojo corporativo para los errores */
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
}

/* Botón Registrarse */
.cb_template .cbRegistrationButtons {
    margin-top: 25px !important;
}

.cb_template .cbRegistrationButtons .cbRegistrationSubmit {
    background-color: #970001 !important;
    border-color: #970001 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 12px 30px !important;
    font-size: 1rem !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
}

.cb_template .cbRegistrationButtons .cbRegistrationSubmit:hover {
    background-color: #7a0001 !important;
    border-color: #7a0001 !important;
}

.offset-sm-3{
margin-left:0px!important;
}

/* ==========================================================================
   19. Corrección de Transparencia en los Tooltips (qTip de Community Builder)
   ========================================================================== */
/* Forzar fondo sólido y color de texto en el contenedor del tooltip */
.qtip,
.qtip-content {
    background-color: #f2f2f2 !important; /* Fondo gris oscuro sólido */
    color: #212529 !important; /* Texto blanco de alta visibilidad */
    border: 1px solid #d1d5db !important; /* Borde oscuro fino */
    border-radius: 6px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15) !important;
    opacity: 1 !important; /* Asegurar que no herede transparencias */
}

/* Cabecera del tooltip (si el globo tiene título) */
.qtip-titlebar {
    background-color: #de9116 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-bottom: 1px solid #d1d5db !important;
    padding: 6px 12px !important;
}

/* Flecha del tooltip (para que no se vea transparente) */
.qtip .qtip-tip {
    background-color: #f2f2f2 !important;
}

/* ==========================================================================
   18. Adaptación Móvil de Registro (Colapso a 1 Columna)
   ========================================================================== */
@media (max-width: 768px) {
    .cb_template .cbRegistrationDiv {
        grid-template-columns: 1fr !important; /* 1 columna en móviles */
        gap: 15px !important;
    }
    
    .cb_template .cbRegistrationDiv #cbtf_11,
    .cb_template .cbRegistrationDiv #cbtf_25,
    .cb_template .cbRegistrationDiv #cbtf_28,
    .cb_template .cbRegistrationDiv #cbtf_26,
    .cb_template .cbRegistrationDiv #cbtf_23,
    .cb_template .cbRegistrationDiv #cbtf_29,
    .cb_template .cbRegistrationDiv .cbRegistrationButtons {
        grid-column: span 1 !important;
    }

    /* Reseteo de compensaciones de alineación en móviles */
    .cb_template .cbRegistrationDiv #cbtf_25 #cbfr_66::before {
        margin-bottom: 4px !important;
    }
}



/* ==========================================================================
   20. Personalización de Vista Detallada de Mensajes (Ajustado y Desactivado)
   ========================================================================== */
/* --- 1. Alineación Horizontal Superior (Acción e inputs en la misma línea) --- */
/* Alinear botón "Acción" superior a la izquierda */
#kunena.layout #topic-actions-toolbar {
    float: left !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    padding: 0 !important;
}

/* Alinear buscador superior a la derecha en la misma horizontal */
#kunena.layout h2.float-end {
    float: right !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
}

/* Ocultar el buscador inferior */
#kunena.layout .topic-item-messages ~ div.float-end {
    display: none !important;
}

/* Ocultar la barra de acciones ("Acción") inferior */
#kunena.layout .topic-item-messages ~ div #topic-actions-toolbar,
#kunena.layout .topic-item-messages ~ #topic-actions-toolbar,
#kunena.layout .topic-item-messages ~ .btn-toolbar {
    display: none !important;
}

/* Ocultar el selector de salto de categorías del final */
#kunena.layout form#jumpto {
    display: none !important;
}

/* --- 2. Distribución y Ajuste de Ancho de las Columnas del Foro --- */
/* Reducimos la columna izquierda del autor al 12% y la mantenemos plana sin cajas */
#kunena.layout .row.message .col-md-2 {
    flex: 0 0 12% !important;
    max-width: 12% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 22px 0 0 0 !important; /* Alineación vertical con la tarjeta de la derecha */
}

/* Tarjeta blanca con sombra de la primera versión para el mensaje */
#kunena.layout .row.message .col-md-10.message-published {
    flex: 0 0 88% !important;
    max-width: 88% !important;
    background-color: #ffffff !important; /* Fondo blanco */
    border: 1px solid #e5e7eb !important; /* Borde sutil */
    border-left: 5px solid #d97706 !important; /* Línea de acento izquierda ámbar */
    border-radius: 8px !important;
    padding: 25px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* Sombra de tarjeta */
}

/* Quitar padding interno redundante */
#kunena.layout .message-published .shadow-none {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Separación entre mensajes con una línea fina en la base */
#kunena.layout .row.message {
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 30px !important;
    margin-bottom: 30px !important;
}

/* --- 3. Perfil del Autor Flotante (Con clics y elementos ocultos) --- */
/* Ocultar avatar, roles, rangos, medallas y estados del perfil lateral */
#kunena.layout .profilebox li:not(:first-child) {
    display: none !important;
}

#kunena.layout .profile-expand {
    display: none !important;
}

#kunena.layout .profilebox {
    margin: 0 !important;
    padding: 0 !important;
}

/* Nombre del autor a la izquierda del mensaje */
#kunena.layout .profilebox li:first-child {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-align: right !important; /* Pegado a su tarjeta de mensaje */
    padding-right: 15px !important;
}

/* Deshabilitar completamente los clics en el nombre del perfil lateral */
#kunena.layout .profilebox a {
    pointer-events: none !important; /* Desactiva clics, interacciones y enlaces */
    cursor: default !important;
    color: #970001 !important; /* Mantiene tu color rojo de marca */
    text-decoration: none !important;
}

/* --- 4. Ajustes del Contenido del Mensaje --- */
/* Cabecera del mensaje */
#kunena.layout .mykmsg-header {
    background: none !important;
    padding: 0 !important;
    margin: 0 0 15px 0 !important;
    font-size: 1.1rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding-bottom: 12px !important;
    color: #4b5563 !important;
}

#kunena.layout .mykmsg-header a {
    color: #1a1a1a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* DESHABILITAR clics en el nombre de la cabecera para que no parezca ni actúe como un enlace */
#kunena.layout .mykmsg-header a.kwho-admin,
#kunena.layout .mykmsg-header a.kwho-user,
#kunena.layout .mykmsg-header a[href*="view=user"] {
    pointer-events: none !important; /* Hace que el enlace no sea clickeable */
    cursor: default !important;
    color: #1a1a1a !important; /* Se funde con el color del texto normal */
    text-decoration: none !important;
    font-style: normal !important;
}

/* Texto del Mensaje */
#kunena.layout .kmsg {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #2d3748 !important; /* Gris oscuro de lectura cómoda */
}

/* --- 5. Estilo de los Botones Internos del Mensaje --- */
#kunena.layout .kmessagepadding {
    padding: 0 !important;
    margin-top: 20px !important;
    display: flex !important;
    gap: 10px !important;
}

#kunena.layout .kmessagepadding .btn {
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    background-color: #ffffff !important;
    color: #4b5563 !important;
    transition: all 0.2s ease !important;
}

#kunena.layout .kmessagepadding .btn:hover {
    background-color: #f9fafb !important;
    color: #970001 !important;
    border-color: #9ca3af !important;
}

/* Botón de reportar */
#kunena.layout .kbutton-report {
    border-color: #d1d5db !important;
    color: #9ca3af !important;
}

#kunena.layout .kbutton-report:hover {
    background-color: #f9fafb !important;
    color: #970001 !important;
}


/* ==========================================================================
   21. Adaptación del Historial de Mensajes (Reply History View)
   ========================================================================== */
/* --- 1. Estructura y Alineación de Columnas en el Historial --- */
/* Reducimos la columna izquierda del autor en el historial al 12% (plana y limpia) */
#history .row .col-md-2 {
    flex: 0 0 12% !important;
    max-width: 12% !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 22px 0 0 0 !important; /* Alineación vertical con la tarjeta de la derecha */
}

/* Expandimos la columna de los mensajes de historial al 88% */
#history .row .col-md-10 {
    flex: 0 0 88% !important;
    max-width: 88% !important;
    padding: 0 !important;
}

/* --- 2. Limpieza del Perfil del Autor en el Historial --- */
/* Ocultar el avatar en la sección de historial */
#history .profilebox li:not(:first-child) {
    display: none !important;
}

/* Deshabilitar clics en el nombre del autor */
#history .profilebox a {
    pointer-events: none !important;
    cursor: default !important;
    color: #970001 !important; /* Rojo corporativo */
    text-decoration: none !important;
    font-weight: 700 !important;
}

/* Alineación del nombre pegado a la tarjeta */
#history .profilebox li:first-child {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    text-align: right !important;
    padding-right: 15px !important;
}

/* --- 3. Tarjeta de Mensaje de Historial (khistory) --- */
#history .khistory {
    background-color: #ffffff !important; /* Fondo blanco */
    border: 1px solid #e5e7eb !important; /* Borde sutil */
    border-left: 5px solid #d97706 !important; /* Línea de acento izquierda ámbar */
    border-radius: 8px !important;
    padding: 20px 25px !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; /* Sombra de tarjeta */
    margin-top: 10px !important;
    position: relative !important;
}

/* Ocultar la etiqueta de título flotante nativa de Kunena sobre la tarjeta */
#history .khistory::after {
    display: none !important;
}

/* Texto del mensaje de historial */
#history .kmsg {
    font-size: 0.95rem !important; /* Un poco más compacto para historial */
    line-height: 1.6 !important;
    color: #2d3748 !important;
}

/* --- 4. Título de la Sección y Botón Minimizar (X) --- */
/* Título "Historial del Tema:" */
#kunena.layout h3 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-top: 35px !important;
    margin-bottom: 15px !important;
}

/* Botón "X" de colapsar historial */
.btn[data-bs-target="#history"] {
    border-color: #d1d5db !important;
    color: #4b5563 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.875rem !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.btn[data-bs-target="#history"]:hover {
    background-color: #f9fafb !important;
    color: #970001 !important;
    border-color: #9ca3af !important;
}