/* assets/css/main.css */ /* Estilo general del cuerpo de la página */ body { background-color: #DEE3E6; /* Color de fondo gris como en el mockup */ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* Contenedor para la cabecera y el contenido */ .page-container { max-width: 1200px; margin: 0 auto; /* Centra el contenedor principal */ } /* Área de contenido principal blanca */ .main-content { background-color: #FFFFFF; padding: 2.5rem; border-radius: 4px; min-height: 70vh; /* Asegura una altura mínima */ } /* Estilos para la cabecera */ .main-header { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; /* Un poco menos de padding vertical */ width: 100%; } .header-left { flex: 0 0 auto; } .header-center { text-align: center; margin-bottom: 2rem; /* Espacio antes del contenido principal */ } .header-right { flex: 0 0 auto; /* Igual para la derecha */ display: flex; justify-content: flex-end; align-items: center; gap: 10px; font-weight: 500; } .header-right img { width: 40px; height: 40px; } .title-forum { font-size: 2.8rem; font-weight: 200; /* Letra más fina */ letter-spacing: 4px; color: #4a4a4a; text-transform: uppercase; border-bottom: 3px solid #576282; display: inline-block; padding-bottom: 5px; margin-bottom: 5px; } .subtitle-forum { font-size: 0.9rem; color: #7f8c8d; font-weight: 400; } /* Estilo para los iconos de tipo de tema en las tarjetas */ .topic-type-icon { width: 28px; height: 28px; object-fit: contain; /* Asegura que el icono no se deforme */ } /* Estilo para los iconos de reacción en los comentarios */ .reaction-icon { width: 20px; height: 20px; vertical-align: middle; /* Alinea el icono con el texto del contador */ } /* Estilo para el enlace de "Responder" en los comentarios */ .reply-link { text-decoration: none; font-weight: 500; font-size: 0.875em; } .reply-link:hover { text-decoration: underline; } /* Estilo para el enlace externo en la vista de un tema */ .external-topic-link { text-decoration: none; font-weight: 500; color: #0dcaf0; /* Este es el color "info" de Bootstrap */ display: inline-block; /* Para que respete el margen superior */ } .external-topic-link:hover { text-decoration: underline; } /* Estilo para la caja que contiene el texto de un comentario */ .comment-text-box { background-color: #f8f9fa; /* Un fondo gris muy claro */ border: 1px solid #dee2e6; /* Un borde sutil */ border-radius: 0.25rem; padding: 0.75rem 1rem; } /* --- Estilos para la tarjeta de tema en el dashboard --- */ .topic-card { border: 1px solid #e9ecef; transition: box-shadow 0.2s ease-in-out; } .topic-card:hover { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1); } .topic-card-image { height: 180px; object-fit: cover; /* Asegura que la imagen cubra el espacio sin deformarse */ } /* Icono del tipo de tema dentro de la tarjeta */ .topic-type-icon-card { width: 20px; height: 20px; margin-top: 2px; /* Alineación vertical fina con el título */ } /* Título del tema y su enlace */ .topic-title-link a { text-decoration: none; color: inherit; /* Hereda el color del texto normal */ } .topic-title-link a:hover { text-decoration: underline; color: #0d6efd; /* Color azul de Bootstrap al pasar el ratón */ } /* Información del autor y fecha (con indentación) */ .topic-meta-info { /* Mágia para la indentación: 20px del icono + 8px del gap */ margin-left: 28px; margin-top: 4px; } /* Estilo para el "botón" de suscripción */ .subscribe-link { background: none; border: none; padding: 0; font: inherit; color: #6c757d; /* color de texto muted de Bootstrap */ cursor: pointer; text-decoration: none; font-weight: 500; } .subscribe-link:hover { text-decoration: underline; color: #0d6efd; /* color azul de enlace de Bootstrap */ } /* --- ESTILOS PARA ICONOS SOCIALES --- */ .social-icons { text-align: center; /* Centra los iconos en su contenedor */ padding: 0rem 0; border-top: 1px solid #e9ecef; /* Una línea sutil de separación */ margin-top: 2rem; } .social-icons a { display: inline-block; margin: 0 10px; /* Espacio entre los iconos */ transition: transform 0.2s ease-in-out; } .social-icons a:hover { transform: translateY(-3px); /* Pequeño efecto al pasar el ratón */ } .social-icon { width: 22px; /* Tamaño de los iconos */ height: 22px; fill: #6c757d; /* Color gris por defecto */ } .social-icon:hover { fill: #0d6efd; /* Color azul al pasar el ratón */ } .star-rating { color: #ffc107; /* Un color dorado, típico de las valoraciones */ font-size: 1em; } /* Solo aplicar el cursor de puntero cuando el contenedor es clicable (tiene el atributo data-bs-toggle) */ [data-bs-toggle="modal"] .star-rating { cursor: pointer; user-select: none; /* Evita que el cursor de texto aparezca sobre las estrellas */ } /* --- Estilos para el nuevo Footer --- */ .main-footer { background-color: #295ba4; color: white; padding: 2.5rem 0; } .main-footer h5 { font-weight: bold; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; } .main-footer ul { padding-left: 0; } .main-footer ul li { margin-bottom: 0.25rem; /* ¡CAMBIO! Reducimos el margen para juntar las líneas */ } .main-footer ul li a { color: white; text-decoration: none; font-size: 0.9rem; transition: text-decoration 0.2s ease-in-out; } .main-footer ul li a:hover { text-decoration: underline; } /* --- Estilos para el nuevo menú de navegación --- */ .header-menu { flex-grow: 1; /* Mantenemos esto para que ocupe el espacio central */ padding-right: 2rem; } .header-menu .navbar-collapse { justify-content: flex-end; /* Esto alinea los elementos del menú (el