/* public/assets/css/public.css - VERSIÓN FINAL COMPLETA */
/* ========================================
VARIABLES - COLORES INSTITUCIONALES
======================================== */
:root {
/* Colores San Juan Bautista */
--rojo-institucional: #C41E3A;
--rojo-oscuro: #9B1629;
--dorado: #DAA520;
--beige: #F5F5DC;
--azul: #1e40af;
/* Colores por tipo de documento */
--color-acta: #C41E3A;
--color-informe: #059669;
--color-plan: #8b5cf6;
--color-consulta: #f59e0b;
--color-normativo: #1e40af;
--color-estadistica: #06b6d4;
/* Sistema */
--text-dark: #1e293b;
--text-muted: #64748b;
--bg-light: #f8fafc;
--bg-white: #ffffff;
--border: #e2e8f0;
/* Tipografía */
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Open Sans', sans-serif;
/* Sombras */
--shadow-sm: 0 2px 8px rgba(196, 30, 58, 0.08);
--shadow-md: 0 4px 16px rgba(196, 30, 58, 0.12);
--shadow-lg: 0 10px 30px rgba(196, 30, 58, 0.15);
--transition: all 0.3s ease;
}
/* ========================================
RESET
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: var(--font-body);
color: var(--text-dark);
line-height: 1.6;
background: #fff;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
font-weight: 700;
}
/* ========================================
HEADER TOP
======================================== */
.header-top {
background: var(--rojo-oscuro);
color: white;
padding: 0.75rem 0;
font-size: 0.875rem;
}
.header-top a {
color: white;
opacity: 0.9;
}
.header-top a:hover {
opacity: 1;
}
/* ========================================
NAVBAR
======================================== */
.navbar {
background: white;
padding: 1rem 0;
box-shadow: var(--shadow-sm);
}
.navbar-brand h5 {
color: var(--rojo-institucional);
font-weight: 700;
margin: 0;
}
.navbar-nav .nav-link {
font-weight: 600;
padding: 0.5rem 1.2rem;
color: var(--text-dark);
position: relative;
}
.navbar-nav .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 80%;
height: 3px;
background: var(--rojo-institucional);
transition: var(--transition);
}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
transform: translateX(-50%) scaleX(1);
}
/* ========================================
HERO INSTITUCIONAL
======================================== */
.hero-institucional {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 60px 0;
}
.escudo-hero {
max-width: 120px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}
.hero-tag {
display: inline-block;
background: rgba(255,255,255,0.2);
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.hero-main-title {
font-size: 3.5rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 1rem;
}
.text-dorado {
color: var(--dorado) !important;
}
.hero-desc {
font-size: 1.125rem;
opacity: 0.95;
max-width: 600px;
}
.year-box {
background: rgba(255,255,255,0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255,255,255,0.3);
border-radius: 20px;
padding: 2rem;
text-align: center;
}
.year-box i {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.year-box h2 {
font-size: 3rem;
font-weight: 900;
margin: 0;
}
.year-box p {
margin: 0;
opacity: 0.9;
}
/* ========================================
QUICK STATS
======================================== */
.quick-stats {
background: white;
padding: 3rem 0;
margin-top: -40px;
position: relative;
z-index: 10;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: var(--shadow-lg);
}
.stat-box {
text-align: center;
padding: 1.5rem;
border-radius: 15px;
background: var(--bg-light);
transition: var(--transition);
}
.stat-box:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.stat-box i {
font-size: 2.5rem;
color: var(--rojo-institucional);
margin-bottom: 1rem;
}
.stat-box h3 {
font-size: 2.5rem;
font-weight: 900;
color: var(--rojo-institucional);
margin: 0.5rem 0;
}
.stat-box p {
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 600;
margin: 0;
text-transform: uppercase;
}
/* ========================================
PRESIDENTE DESTACADO
======================================== */
.presidente-destacado {
background: var(--beige);
padding: 4rem 0;
}
.presidente-card {
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: var(--shadow-lg);
border-left: 5px solid var(--rojo-institucional);
}
.presidente-avatar {
position: relative;
display: inline-block;
}
.presidente-avatar img {
width: 180px;
height: 180px;
border-radius: 50%;
object-fit: cover;
border: 5px solid var(--rojo-institucional);
box-shadow: var(--shadow-md);
}
.presidente-insignia {
position: absolute;
bottom: 10px;
right: 10px;
width: 50px;
height: 50px;
background: var(--dorado);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
border: 3px solid white;
box-shadow: var(--shadow-sm);
}
.presidente-titulo {
display: inline-block;
background: var(--rojo-institucional);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 1rem;
}
.presidente-name {
font-size: 2rem;
font-weight: 900;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.presidente-cargo {
font-size: 1.125rem;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 1.5rem;
}
.presidente-quote {
background: var(--bg-light);
padding: 1.5rem;
border-left: 4px solid var(--dorado);
border-radius: 10px;
position: relative;
}
.presidente-quote .fa-quote-left {
position: absolute;
top: -10px;
left: 15px;
font-size: 2rem;
color: var(--dorado);
opacity: 0.3;
}
.presidente-quote p {
margin: 0;
font-style: italic;
color: var(--text-dark);
line-height: 1.7;
}
/* ========================================
PUBLICACIONES SECTION
======================================== */
.publicaciones-section {
padding: 5rem 0;
background: linear-gradient(to bottom, white 0%, var(--bg-light) 100%);
}
.section-head {
margin-bottom: 3rem;
}
.section-tag {
display: inline-block;
background: var(--rojo-institucional);
color: white;
padding: 0.5rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.section-title {
font-size: 2.5rem;
font-weight: 900;
margin: 1rem 0;
}
.section-subtitle {
font-size: 1.125rem;
color: var(--text-muted);
}
.btn-ver-todo {
display: inline-block;
padding: 0.75rem 2rem;
background: var(--rojo-institucional);
color: white;
border-radius: 50px;
font-weight: 600;
text-decoration: none;
transition: var(--transition);
}
.btn-ver-todo:hover {
background: var(--rojo-oscuro);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: white;
}
/* ========================================
FILTROS PUBLICACIONES
======================================== */
.filtros-publicaciones {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
margin-bottom: 3rem;
padding: 1.5rem;
background: white;
border-radius: 15px;
box-shadow: var(--shadow-sm);
}
.filtro-item {
display: flex;
align-items: center;
gap: 0.5rem;
flex: 1;
min-width: 250px;
}
.filtro-item i {
color: var(--rojo-institucional);
font-size: 1.125rem;
}
.filtro-item .form-select {
border: 2px solid var(--border);
border-radius: 10px;
padding: 0.75rem 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.filtro-item .form-select:focus {
border-color: var(--rojo-institucional);
box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}
/* ========================================
TIMELINE DE PUBLICACIONES
======================================== */
.publicaciones-timeline {
position: relative;
}
.publicacion-item {
display: grid;
grid-template-columns: 100px 4px 1fr;
gap: 2rem;
margin-bottom: 3rem;
position: relative;
}
.publicacion-fecha {
text-align: center;
padding: 1rem;
background: white;
border-radius: 15px;
box-shadow: var(--shadow-sm);
}
.publicacion-fecha .dia {
display: block;
font-size: 2.5rem;
font-weight: 900;
color: var(--rojo-institucional);
line-height: 1;
}
.publicacion-fecha .mes {
display: block;
font-size: 0.875rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 0.25rem;
}
.publicacion-fecha .anio {
display: block;
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.publicacion-linea {
width: 4px;
background: var(--rojo-institucional);
border-radius: 10px;
position: relative;
}
.publicacion-linea::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
background: white;
border: 4px solid var(--rojo-institucional);
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(196, 30, 58, 0.1);
}
.publicacion-card {
background: white;
border-radius: 20px;
box-shadow: var(--shadow-md);
overflow: hidden;
transition: var(--transition);
}
.publicacion-card:hover {
transform: translateX(10px);
box-shadow: var(--shadow-lg);
}
.publicacion-header {
background: var(--bg-light);
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
border-bottom: 3px solid var(--rojo-institucional);
}
.tipo-badge {
padding: 0.5rem 1.5rem;
border-radius: 50px;
color: white;
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.trimestre-badge {
padding: 0.5rem 1rem;
background: white;
border: 2px solid var(--border);
border-radius: 50px;
font-weight: 600;
font-size: 0.875rem;
color: var(--text-dark);
}
.publicacion-body {
padding: 2rem;
}
.publicacion-titulo {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
}
.publicacion-meta {
font-size: 0.95rem;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 0.75rem;
}
.publicacion-desc {
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.publicacion-stats {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
padding: 1rem;
background: var(--bg-light);
border-radius: 10px;
}
.stat-item {
font-size: 0.875rem;
color: var(--text-dark);
font-weight: 600;
}
.stat-item i {
color: var(--rojo-institucional);
margin-right: 0.5rem;
}
.publicacion-footer {
padding: 1.5rem 2rem;
background: var(--bg-light);
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-action {
flex: 1;
padding: 0.875rem 1.5rem;
border-radius: 10px;
font-weight: 600;
text-align: center;
text-decoration: none;
transition: var(--transition);
}
.btn-ver {
background: var(--rojo-institucional);
color: white;
}
.btn-ver:hover {
background: var(--rojo-oscuro);
transform: translateY(-2px);
color: white;
}
.btn-descargar {
background: white;
color: var(--rojo-institucional);
border: 2px solid var(--rojo-institucional);
}
.btn-descargar:hover {
background: var(--rojo-institucional);
color: white;
}
/* ========================================
ACTIVIDADES SECTION
======================================== */
.actividades-section {
padding: 5rem 0;
background: var(--bg-light);
}
.actividades-card {
background: white;
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-md);
height: 100%;
}
.card-header-custom {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 1.5rem 2rem;
}
.card-header-custom.bg-success {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.card-header-custom h3 {
margin: 0;
font-size: 1.25rem;
color: white;
}
.actividades-list {
padding: 2rem;
}
.actividad-item {
display: flex;
gap: 1.5rem;
padding: 1.5rem 0;
border-bottom: 2px solid var(--bg-light);
}
.actividad-item:last-child {
border-bottom: none;
}
.actividad-fecha {
flex-shrink: 0;
width: 70px;
text-align: center;
padding: 0.75rem;
background: var(--bg-light);
border-radius: 10px;
border: 2px solid var(--rojo-institucional);
}
.actividad-fecha .dia {
display: block;
font-size: 2rem;
font-weight: 900;
color: var(--rojo-institucional);
line-height: 1;
}
.actividad-fecha .mes {
display: block;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
margin-top: 0.25rem;
}
.actividad-dot {
width: 12px;
height: 12px;
background: #059669;
border-radius: 50%;
margin-top: 0.5rem;
flex-shrink: 0;
box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.2);
}
.actividad-info h5 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.actividad-info p {
font-size: 0.875rem;
color: var(--text-muted);
margin: 0;
}
.btn-link-custom {
color: var(--rojo-institucional);
font-weight: 600;
text-decoration: none;
}
.btn-link-custom:hover {
text-decoration: underline;
}
/* ========================================
MIEMBROS SECTION - HOME
======================================== */
.miembros-section {
padding: 5rem 0;
background: white;
}
.miembros-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.miembro-box {
background: white;
border-radius: 20px;
padding: 2rem;
text-align: center;
box-shadow: var(--shadow-sm);
transition: var(--transition);
border: 2px solid var(--border);
}
.miembro-box:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
border-color: var(--rojo-institucional);
}
.miembro-foto {
margin-bottom: 1.5rem;
display: flex;
justify-content: center;
}
.miembro-foto img {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--rojo-institucional);
}
/* Placeholder para miembros sin foto en HOME */
.miembro-foto-placeholder {
width: 120px;
height: 120px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
display: flex;
align-items: center;
justify-content: center;
border: 4px solid var(--rojo-institucional);
}
.miembro-foto-placeholder i {
font-size: 4rem;
color: white;
opacity: 0.9;
}
.miembro-datos h5 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-dark);
}
.miembro-datos .cargo {
font-size: 0.875rem;
color: var(--rojo-institucional);
font-weight: 600;
margin-bottom: 0.5rem;
}
.miembro-datos .entidad {
font-size: 0.8rem;
color: var(--text-muted);
display: block;
}
/* Responsive Miembros */
@media (max-width: 768px) {
.miembros-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.miembro-foto-placeholder {
width: 100px;
height: 100px;
}
.miembro-foto-placeholder i {
font-size: 3rem;
}
.miembro-foto img {
width: 100px;
height: 100px;
}
}
@media (max-width: 576px) {
.miembros-grid {
grid-template-columns: 1fr;
}
}
/* ========================================
CTA FINAL
======================================== */
.cta-final {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.cta-final::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
}
.cta-icon {
font-size: 4rem;
margin-bottom: 1.5rem;
opacity: 0.9;
}
.cta-final h2 {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 1rem;
color: white;
}
.cta-final p {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.9;
}
.btn-cta {
display: inline-block;
padding: 1rem 3rem;
background: white;
color: var(--rojo-institucional);
border-radius: 50px;
font-weight: 700;
font-size: 1.125rem;
text-decoration: none;
transition: var(--transition);
box-shadow: var(--shadow-lg);
}
.btn-cta:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.3);
color: var(--rojo-institucional);
}
.btn-primary-lg {
display: inline-block;
padding: 1rem 2.5rem;
background: var(--rojo-institucional);
color: white;
border-radius: 50px;
font-weight: 700;
text-decoration: none;
transition: var(--transition);
box-shadow: var(--shadow-md);
}
.btn-primary-lg:hover {
background: var(--rojo-oscuro);
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
color: white;
}
/* ========================================
FOOTER
======================================== */
.footer {
background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
color: white;
padding: 3rem 0 1rem;
}
.footer h5 {
color: white;
font-weight: 700;
margin-bottom: 1.5rem;
}
.footer a {
color: rgba(255,255,255,0.8);
transition: var(--transition);
}
.footer a:hover {
color: white;
padding-left: 5px;
}
.social-links a {
display: inline-flex;
width: 40px;
height: 40px;
background: rgba(255,255,255,0.1);
border-radius: 50%;
align-items: center;
justify-content: center;
margin-right: 0.5rem;
}
.social-links a:hover {
background: var(--rojo-institucional);
transform: translateY(-3px);
padding-left: 0;
}
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 2rem;
padding-top: 1.5rem;
text-align: center;
color: rgba(255,255,255,0.7);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 992px) {
.hero-main-title {
font-size: 2.5rem;
}
.section-title {
font-size: 2rem;
}
.publicacion-item {
grid-template-columns: 80px 3px 1fr;
gap: 1rem;
}
.publicacion-fecha .dia {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.filtros-publicaciones {
flex-direction: column;
}
.filtro-item {
min-width: 100%;
}
.publicacion-item {
grid-template-columns: 1fr;
gap: 1rem;
}
.publicacion-linea {
display: none;
}
.miembros-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
}
/* ========================================
ELEMENTOS ADICIONALES PARA JS
======================================== */
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--rojo-institucional);
color: white;
border: none;
border-radius: 50%;
font-size: 1.25rem;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: var(--transition);
box-shadow: var(--shadow-lg);
z-index: 999;
}
.back-to-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.back-to-top:hover {
background: var(--rojo-oscuro);
transform: translateY(-5px);
box-shadow: var(--shadow-xl);
}
/* No Results Message */
.no-results-message {
display: none;
padding: 3rem;
background: white;
border-radius: 20px;
box-shadow: var(--shadow-sm);
margin: 2rem 0;
}
.no-results-message i {
opacity: 0.5;
}
/* Loading State */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.loading-spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Transiciones para filtros */
.publicacion-item {
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Smooth scroll behavior */
html {
scroll-behavior: smooth;
}
/* Image lazy loading */
img[data-src] {
opacity: 0;
transition: opacity 0.3s ease;
}
img.loaded {
opacity: 1;
}
/* ========================================
NAVBAR CODISEC - PROFESIONAL
======================================== */
.navbar-codisec {
background: white;
padding: 0.75rem 0;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
z-index: 1000;
}
.navbar-codisec.scrolled {
padding: 0.5rem 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}
/* ========================================
LOGO Y MARCA
======================================== */
.navbar-brand {
display: flex;
align-items: center;
gap: 1rem;
padding: 0;
transition: all 0.3s ease;
}
.navbar-brand:hover {
opacity: 0.9;
}
.navbar-logo {
height: 60px;
width: auto;
transition: all 0.3s ease;
}
.navbar-codisec.scrolled .navbar-logo {
height: 50px;
}
.brand-text {
display: flex;
flex-direction: column;
line-height: 1.2;
}
.brand-title {
font-family: var(--font-heading);
font-size: 1.5rem;
font-weight: 900;
color: var(--rojo-institucional);
letter-spacing: -0.5px;
}
.brand-subtitle {
font-size: 0.75rem;
font-weight: 600;
color: var(--azul);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* ========================================
NAVBAR TOGGLE (MOBILE)
======================================== */
.navbar-toggler {
border: 2px solid var(--rojo-institucional);
padding: 0.5rem 0.75rem;
border-radius: 8px;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.15);
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23C41E3A' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
width: 24px;
height: 24px;
}
/* ========================================
MENÚ ITEMS
======================================== */
.navbar-nav {
gap: 0.5rem;
}
.nav-item {
position: relative;
}
.nav-link {
display: flex;
align-items: center;
padding: 0.75rem 1.25rem !important;
font-weight: 600;
font-size: 0.95rem;
color: var(--text-dark);
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
}
.nav-link i {
font-size: 1rem;
transition: all 0.3s ease;
}
.nav-link:hover {
color: var(--rojo-institucional);
background: rgba(196, 30, 58, 0.05);
}
.nav-link.active {
color: white;
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
}
.nav-link.active i {
color: white;
}
/* Efecto de subrayado para hover */
.nav-link::after {
content: '';
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 70%;
height: 2px;
background: var(--rojo-institucional);
transition: transform 0.3s ease;
}
.nav-link:not(.active):hover::after {
transform: translateX(-50%) scaleX(1);
}
/* ========================================
DROPDOWN MODERNO
======================================== */
.dropdown-menu-modern {
border: none;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
padding: 0.5rem;
margin-top: 0.5rem;
min-width: 250px;
}
.dropdown-menu-modern::before {
content: '';
position: absolute;
top: -8px;
left: 20px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid white;
}
.dropdown-item {
padding: 0.75rem 1rem;
border-radius: 8px;
font-weight: 600;
color: var(--text-dark);
transition: all 0.2s ease;
display: flex;
align-items: center;
}
.dropdown-item i {
color: var(--rojo-institucional);
font-size: 1rem;
width: 25px;
}
.dropdown-item:hover {
background: rgba(196, 30, 58, 0.08);
color: var(--rojo-institucional);
transform: translateX(5px);
}
.dropdown-item:active {
background: rgba(196, 30, 58, 0.15);
}
.dropdown-divider {
margin: 0.5rem 0;
border-color: rgba(0, 0, 0, 0.08);
}
/* ========================================
BOTÓN DE BÚSQUEDA
======================================== */
.navbar-search {
display: flex;
align-items: center;
}
.btn-search {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--bg-light);
border: 2px solid var(--border);
color: var(--text-dark);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.btn-search:hover {
background: var(--rojo-institucional);
color: white;
border-color: var(--rojo-institucional);
transform: scale(1.1);
}
.btn-search i {
font-size: 1rem;
}
/* ========================================
MODAL DE BÚSQUEDA
======================================== */
.search-modal {
border-radius: 20px;
border: none;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.search-modal .modal-body {
padding: 2rem;
}
.search-modal .btn-close {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 10;
}
.search-form .form-control {
border: 2px solid var(--border);
border-radius: 12px 0 0 12px;
padding: 1rem 1.5rem;
font-size: 1.125rem;
}
.search-form .form-control:focus {
border-color: var(--rojo-institucional);
box-shadow: none;
}
.search-form .btn {
border-radius: 0 12px 12px 0;
padding: 1rem 2rem;
background: var(--rojo-institucional);
border: none;
}
.search-form .btn:hover {
background: var(--rojo-oscuro);
}
.search-suggestions .badge {
padding: 0.5rem 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.search-suggestions .badge:hover {
background: var(--rojo-institucional) !important;
color: white !important;
transform: translateY(-2px);
}
/* ========================================
RESPONSIVE
======================================== */
/* Tablet */
@media (max-width: 991.98px) {
.navbar-nav {
padding: 1rem 0;
gap: 0;
}
.nav-link {
padding: 1rem 0 !important;
border-radius: 0;
border-bottom: 1px solid var(--border);
}
.nav-link::after {
display: none;
}
.dropdown-menu-modern {
border-radius: 0;
box-shadow: none;
background: var(--bg-light);
margin: 0;
padding: 0;
}
.dropdown-menu-modern::before {
display: none;
}
.dropdown-item {
padding: 0.75rem 1.5rem;
border-radius: 0;
}
.brand-text {
display: none;
}
.navbar-logo {
height: 50px;
}
}
/* Mobile */
@media (max-width: 575.98px) {
.navbar-codisec {
padding: 0.5rem 0;
}
.navbar-logo {
height: 45px;
}
.navbar-brand {
gap: 0.5rem;
}
}
/* ========================================
ANIMACIONES
======================================== */
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.dropdown-menu-modern.show {
animation: slideDown 0.3s ease;
}
/* Efecto de hover en icono de búsqueda */
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.btn-search:hover i {
animation: pulse 0.5s ease;
}
/* ========================================
HEADER TOP
======================================== */
.header-top {
background: var(--rojo-oscuro);
color: white;
padding: 0.75rem 0;
font-size: 0.875rem;
border-bottom: 3px solid var(--dorado);
}
.header-info {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.info-item {
display: inline-flex;
align-items: center;
color: white;
opacity: 0.95;
transition: all 0.3s ease;
}
.info-item:hover {
opacity: 1;
transform: translateX(3px);
}
.info-item i {
color: var(--dorado);
}
.header-social {
display: flex;
gap: 0.5rem;
justify-content: flex-end;
}
.header-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 0.1);
color: white;
border-radius: 50%;
transition: all 0.3s ease;
}
.header-social a:hover {
background: var(--dorado);
color: var(--rojo-oscuro);
transform: translateY(-3px);
}
/* Responsive Header Top */
@media (max-width: 767.98px) {
.header-top {
font-size: 0.8rem;
padding: 0.5rem 0;
}
.header-info {
gap: 0.75rem;
}
.info-item {
font-size: 0.75rem;
}
.header-social {
margin-top: 0.5rem;
justify-content: flex-start;
}
}
/* Al final de public.css - AGREGAR ESTAS REGLAS */
/* Filtros - Mejoras */
.publicacion-item {
transition: opacity 0.3s ease, transform 0.3s ease;
opacity: 1;
transform: translateX(0);
}
/* Mensaje de no hay resultados - Mejorado */
.no-results-message {
display: none;
opacity: 0;
transition: opacity 0.3s ease;
padding: 0;
margin: 2rem 0;
}
.no-results-content {
background: white;
padding: 4rem 2rem;
border-radius: 20px;
box-shadow: var(--shadow-md);
text-align: center;
}
.no-results-content i {
color: var(--text-muted);
opacity: 0.4;
}
.no-results-content h4 {
color: var(--text-dark);
font-weight: 700;
margin: 1rem 0 0.5rem;
}
/* Asegurar que las secciones posteriores no se vean afectadas */
.actividades-section,
.miembros-section,
.cta-final {
position: relative;
z-index: 1;
clear: both;
}
/* Timeline debe mantener su estructura */
.publicaciones-timeline {
position: relative;
display: block;
}
/* ========================================
PÁGINA DE DOCUMENTOS
======================================== */
/* Hero Section Documentos */
.page-hero-documentos {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 4rem 0 3rem;
position: relative;
overflow: hidden;
}
.page-hero-documentos::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
/* Breadcrumb */
.breadcrumb-custom {
margin-bottom: 1.5rem;
}
.breadcrumb-custom .breadcrumb {
background: rgba(255, 255, 255, 0.1);
padding: 0.75rem 1.25rem;
border-radius: 50px;
margin: 0;
}
.breadcrumb-custom .breadcrumb-item {
color: white;
}
.breadcrumb-custom .breadcrumb-item + .breadcrumb-item::before {
color: rgba(255, 255, 255, 0.7);
}
.breadcrumb-custom .breadcrumb-item a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.breadcrumb-custom .breadcrumb-item a:hover {
opacity: 0.8;
}
.breadcrumb-custom .breadcrumb-item.active {
color: var(--dorado);
}
.page-title {
font-size: 3rem;
font-weight: 900;
margin-bottom: 1rem;
color: white;
}
.page-subtitle {
font-size: 1.25rem;
opacity: 0.95;
max-width: 600px;
}
.stats-box {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 20px;
padding: 2rem;
}
.stats-box i {
font-size: 3rem;
margin-bottom: 1rem;
color: var(--dorado);
}
.stats-box h2 {
font-size: 3rem;
font-weight: 900;
margin: 0;
color: white;
}
.stats-box p {
margin: 0;
opacity: 0.9;
}
/* Estadísticas Cards */
.docs-stats {
padding: 3rem 0;
margin-top: -60px;
position: relative;
z-index: 10;
}
.stats-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: var(--shadow-lg);
}
.stat-card {
text-align: center;
padding: 1.5rem;
}
.stat-icon {
width: 70px;
height: 70px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.stat-icon i {
font-size: 2rem;
}
.stat-card h3 {
font-size: 2rem;
font-weight: 900;
margin: 0.5rem 0;
color: var(--text-dark);
}
.stat-card p {
font-size: 0.875rem;
color: var(--text-muted);
font-weight: 600;
margin: 0;
text-transform: uppercase;
}
/* Filtros Section */
.docs-filters-section {
padding: 3rem 0 2rem;
background: var(--bg-light);
}
.filters-container {
background: white;
padding: 2rem;
border-radius: 20px;
box-shadow: var(--shadow-md);
}
.filters-form {
display: flex;
flex-direction: column;
gap: 2rem;
}
.search-group {
width: 100%;
}
.search-input-wrapper {
position: relative;
max-width: 100%;
}
.search-input-wrapper i {
position: absolute;
left: 1.5rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-muted);
font-size: 1.25rem;
}
.search-input {
width: 100%;
padding: 1rem 1.5rem 1rem 4rem;
border: 2px solid var(--border);
border-radius: 15px;
font-size: 1.125rem;
transition: var(--transition);
}
.search-input:focus {
border-color: var(--rojo-institucional);
box-shadow: 0 0 0 4px rgba(196, 30, 58, 0.1);
}
.filters-group {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.filter-col label {
display: block;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.filter-col .form-select {
border: 2px solid var(--border);
border-radius: 10px;
padding: 0.75rem 1rem;
font-weight: 600;
transition: var(--transition);
}
.filter-col .form-select:focus {
border-color: var(--rojo-institucional);
box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}
.filter-buttons {
display: flex;
gap: 0.75rem;
}
.filter-buttons .btn {
padding: 0.75rem 1.5rem;
border-radius: 10px;
font-weight: 600;
}
/* Resultados */
.docs-results-section {
padding: 2rem 0 5rem;
background: var(--bg-light);
}
.results-info {
margin-bottom: 2rem;
}
.results-count {
font-size: 1rem;
color: var(--text-muted);
margin: 0;
}
.results-count strong {
color: var(--text-dark);
}
/* Grid de Documentos */
.documents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
}
.doc-card-grid {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
height: 100%;
display: flex;
flex-direction: column;
}
.doc-card-grid:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-8px);
}
.doc-card-header {
padding: 1.5rem;
background: var(--bg-light);
border-bottom: 3px solid var(--rojo-institucional);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 0.75rem;
}
.doc-type-badge {
padding: 0.5rem 1rem;
border-radius: 50px;
color: white;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.doc-date-badge {
padding: 0.35rem 0.875rem;
background: white;
border: 2px solid var(--border);
border-radius: 50px;
font-weight: 600;
font-size: 0.75rem;
color: var(--text-dark);
}
.doc-card-body {
padding: 1.5rem;
flex: 1;
}
.doc-card-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.75rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.doc-session {
font-size: 0.9rem;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 0.75rem;
}
.doc-description {
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.doc-meta-info {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 1rem;
background: var(--bg-light);
border-radius: 10px;
}
.meta-item {
font-size: 0.8rem;
color: var(--text-dark);
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
}
.meta-item i {
color: var(--rojo-institucional);
}
.doc-card-footer {
padding: 1rem 1.5rem;
background: var(--bg-light);
border-top: 1px solid var(--border);
display: flex;
gap: 0.75rem;
}
.doc-card-footer .btn {
flex: 1;
font-weight: 600;
}
/* No Results */
.no-results {
text-align: center;
padding: 5rem 2rem;
background: white;
border-radius: 20px;
box-shadow: var(--shadow-sm);
}
.no-results i {
color: var(--text-muted);
opacity: 0.3;
}
.no-results h3 {
font-weight: 700;
margin: 1rem 0;
}
.no-results p {
color: var(--text-muted);
}
/* Paginación */
.pagination-container {
margin-top: 3rem;
}
.pagination {
gap: 0.5rem;
}
.pagination .page-item .page-link {
border: 2px solid var(--border);
border-radius: 10px;
color: var(--text-dark);
font-weight: 600;
padding: 0.75rem 1.25rem;
transition: var(--transition);
}
.pagination .page-item.active .page-link {
background: var(--rojo-institucional);
border-color: var(--rojo-institucional);
color: white;
}
.pagination .page-item .page-link:hover {
background: var(--rojo-institucional);
border-color: var(--rojo-institucional);
color: white;
transform: translateY(-2px);
}
/* Responsive */
@media (max-width: 768px) {
.page-title {
font-size: 2rem;
}
.filters-group {
grid-template-columns: 1fr;
}
.filter-buttons {
flex-direction: column;
}
.documents-grid {
grid-template-columns: 1fr;
}
.stats-cards {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
/* ========================================
PÁGINA DETALLE DE DOCUMENTO
======================================== */
/* Hero Detalle */
.doc-detail-hero {
padding: 2rem 0 1rem;
background: var(--bg-light);
}
.doc-detail-hero .breadcrumb {
background: white;
padding: 0.75rem 1.25rem;
border-radius: 10px;
box-shadow: var(--shadow-sm);
margin: 0;
}
.doc-detail-hero .breadcrumb-item a {
color: var(--rojo-institucional);
text-decoration: none;
font-weight: 600;
}
.doc-detail-hero .breadcrumb-item.active {
color: var(--text-muted);
}
/* Contenido Principal */
.doc-detail-content {
padding: 2rem 0 5rem;
background: var(--bg-light);
}
.doc-main-card {
background: white;
border-radius: 20px;
padding: 3rem;
box-shadow: var(--shadow-md);
margin-bottom: 2rem;
}
/* Header del Documento */
.doc-detail-header {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 2px solid var(--bg-light);
}
.doc-type-large {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
border-radius: 50px;
color: white;
font-weight: 700;
font-size: 1rem;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.doc-type-large i {
font-size: 1.25rem;
}
.doc-detail-title {
font-size: 2.5rem;
font-weight: 900;
color: var(--text-dark);
line-height: 1.2;
margin-bottom: 1rem;
}
.doc-session-number {
font-size: 1.125rem;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 1.5rem;
}
.doc-badges-group {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.badge-detail {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.25rem;
background: var(--bg-light);
border: 2px solid var(--border);
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
color: var(--text-dark);
}
/* Descripción */
.doc-description-box {
background: var(--bg-light);
padding: 2rem;
border-radius: 15px;
margin-bottom: 2rem;
border-left: 4px solid var(--rojo-institucional);
}
.doc-description-box h5 {
color: var(--text-dark);
font-weight: 700;
margin-bottom: 1rem;
}
.doc-description-box p {
color: var(--text-muted);
line-height: 1.8;
margin: 0;
}
/* Grid de Información */
.doc-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.info-item-detail {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
background: var(--bg-light);
border-radius: 12px;
transition: var(--transition);
}
.info-item-detail:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.info-item-detail i {
font-size: 2rem;
color: var(--rojo-institucional);
}
.info-item-detail .info-label {
display: block;
font-size: 0.8rem;
color: var(--text-muted);
font-weight: 600;
text-transform: uppercase;
}
.info-item-detail .info-value {
display: block;
font-size: 1.25rem;
font-weight: 900;
color: var(--text-dark);
}
/* Tags */
.doc-tags {
margin-bottom: 2rem;
padding: 1.5rem;
background: var(--bg-light);
border-radius: 12px;
}
.doc-tags h5 {
font-weight: 700;
margin-bottom: 1rem;
}
.tags-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.tag-item {
padding: 0.5rem 1rem;
background: white;
border: 2px solid var(--border);
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-dark);
transition: var(--transition);
}
.tag-item:hover {
border-color: var(--rojo-institucional);
color: var(--rojo-institucional);
}
/* Acciones Principales */
.doc-actions-main {
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding: 2rem;
background: var(--bg-light);
border-radius: 15px;
}
.doc-actions-main .btn {
flex: 1;
min-width: 200px;
padding: 1rem 2rem;
font-weight: 700;
border-radius: 12px;
}
/* Documentos Relacionados */
.related-docs {
background: white;
border-radius: 20px;
padding: 2rem;
box-shadow: var(--shadow-md);
}
.section-title-small {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--text-dark);
}
.related-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.related-card {
border: 2px solid var(--border);
border-radius: 12px;
overflow: hidden;
transition: var(--transition);
}
.related-card:hover {
border-color: var(--rojo-institucional);
box-shadow: var(--shadow-md);
transform: translateY(-5px);
}
.related-header {
padding: 1rem;
color: white;
font-weight: 700;
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.related-body {
padding: 1.5rem;
}
.related-body h6 {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: 0.75rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.related-meta {
font-size: 0.8rem;
color: var(--text-muted);
margin: 0;
}
.related-footer {
padding: 0 1.5rem 1.5rem;
}
/* Sidebar */
.sidebar-card {
background: white;
border-radius: 15px;
padding: 2rem;
box-shadow: var(--shadow-sm);
margin-bottom: 2rem;
}
.sidebar-title {
font-weight: 700;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--bg-light);
color: var(--text-dark);
}
.sidebar-info-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.sidebar-info-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem;
background: var(--bg-light);
border-radius: 8px;
}
.sidebar-info-item .label {
font-weight: 600;
color: var(--text-muted);
font-size: 0.875rem;
}
.sidebar-info-item .value {
font-weight: 700;
color: var(--text-dark);
font-size: 0.9rem;
}
/* Quick Links */
.quick-links {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.quick-link-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: var(--bg-light);
border-radius: 10px;
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.quick-link-item i {
color: var(--rojo-institucional);
font-size: 1.25rem;
}
.quick-link-item:hover {
background: var(--rojo-institucional);
color: white;
transform: translateX(5px);
}
.quick-link-item:hover i {
color: white;
}
/* Sidebar CTA */
.sidebar-cta {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 2rem;
border-radius: 15px;
text-align: center;
}
.sidebar-cta i {
opacity: 0.9;
}
.sidebar-cta h5 {
font-weight: 700;
margin-bottom: 1rem;
}
.sidebar-cta p {
opacity: 0.95;
margin-bottom: 1.5rem;
}
.sidebar-cta .btn {
background: white;
color: var(--rojo-institucional);
font-weight: 700;
}
.sidebar-cta .btn:hover {
background: var(--dorado);
color: white;
}
/* Responsive Detalle */
@media (max-width: 992px) {
.doc-main-card {
padding: 2rem;
}
.doc-detail-title {
font-size: 2rem;
}
.doc-actions-main .btn {
min-width: 100%;
}
.related-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 768px) {
.doc-detail-title {
font-size: 1.5rem;
}
.doc-type-large {
font-size: 0.875rem;
padding: 0.5rem 1rem;
}
.doc-info-grid {
grid-template-columns: 1fr;
}
.doc-actions-main {
flex-direction: column;
}
}
/* ========================================
PÁGINAS NOSOTROS - ESTILOS GENERALES
======================================== */
.page-hero-nosotros {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 4rem 0 3rem;
position: relative;
overflow: hidden;
}
.page-hero-nosotros::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
.hero-icon-box {
width: 150px;
height: 150px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
border: 3px solid rgba(255, 255, 255, 0.3);
}
.hero-icon-box i {
font-size: 4rem;
color: var(--dorado);
}
/* Content Section */
.content-section {
padding: 4rem 0;
background: var(--bg-light);
}
.intro-box {
background: white;
padding: 2.5rem;
border-radius: 20px;
box-shadow: var(--shadow-md);
margin-bottom: 3rem;
border-left: 5px solid var(--rojo-institucional);
}
.intro-box h3 {
color: var(--text-dark);
font-weight: 700;
margin-bottom: 1rem;
}
.intro-box .lead {
font-size: 1.125rem;
line-height: 1.7;
}
/* Content Cards */
.content-card {
background: white;
padding: 2.5rem;
border-radius: 20px;
box-shadow: var(--shadow-sm);
margin-bottom: 2rem;
}
.content-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 3px solid var(--bg-light);
}
.content-title i {
color: var(--rojo-institucional);
}
/* Objectives List */
.objectives-list {
list-style: none;
padding: 0;
margin: 0;
}
.objectives-list li {
display: flex;
gap: 1.5rem;
padding: 1.5rem;
background: var(--bg-light);
border-radius: 12px;
margin-bottom: 1rem;
transition: var(--transition);
}
.objectives-list li:hover {
transform: translateX(10px);
box-shadow: var(--shadow-sm);
}
.objectives-list li > i {
font-size: 2rem;
color: var(--rojo-institucional);
flex-shrink: 0;
}
.objectives-list li strong {
display: block;
color: var(--text-dark);
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
.objectives-list li p {
margin: 0;
color: var(--text-muted);
}
/* Estructura Grid */
.estructura-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.estructura-item {
text-align: center;
padding: 1.5rem;
background: var(--bg-light);
border-radius: 15px;
transition: var(--transition);
}
.estructura-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-md);
}
.estructura-icon {
width: 80px;
height: 80px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
}
.estructura-icon i {
font-size: 2.5rem;
}
.estructura-item h5 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-dark);
}
.estructura-item p {
font-size: 0.875rem;
color: var(--text-muted);
margin: 0;
}
/* Sidebar */
.sidebar-box {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow-sm);
margin-bottom: 2rem;
}
.sidebar-box.highlight {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
}
.sidebar-title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid var(--bg-light);
}
.sidebar-box.highlight .sidebar-title {
border-bottom-color: rgba(255, 255, 255, 0.3);
color: white;
}
.quick-links-sidebar {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.sidebar-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
background: var(--bg-light);
border-radius: 10px;
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.sidebar-link:hover {
background: var(--rojo-institucional);
color: white;
transform: translateX(5px);
}
.sidebar-link i:first-child {
color: var(--rojo-institucional);
}
.sidebar-link:hover i {
color: white;
}
.sidebar-link span {
flex: 1;
margin: 0 1rem;
}
/* Data List */
.data-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.data-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 10px;
}
.data-item i {
font-size: 1.5rem;
color: var(--dorado);
}
.data-label {
display: block;
font-size: 0.875rem;
opacity: 0.9;
}
.data-value {
display: block;
font-weight: 700;
font-size: 1rem;
}
.sidebar-cta {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 2.5rem 2rem;
border-radius: 15px;
text-align: center;
}
.sidebar-cta i {
opacity: 0.9;
}
.sidebar-cta h5 {
font-weight: 700;
margin-bottom: 1rem;
}
.sidebar-cta p {
opacity: 0.95;
margin-bottom: 1.5rem;
}
/* ========================================
PÁGINA DE FUNCIONES
======================================== */
.funciones-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin: 3rem 0;
}
.funcion-card {
background: white;
padding: 2.5rem;
border-radius: 20px;
box-shadow: var(--shadow-sm);
position: relative;
transition: var(--transition);
border-top: 4px solid var(--rojo-institucional);
}
.funcion-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.funcion-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
}
.funcion-icon i {
font-size: 2.5rem;
color: white;
}
.funcion-content h4 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
}
.funcion-content p {
color: var(--text-muted);
line-height: 1.7;
margin: 0;
}
.funcion-number {
position: absolute;
top: 2rem;
right: 2rem;
font-size: 3rem;
font-weight: 900;
color: var(--bg-light);
}
/* Custom List */
.custom-list {
list-style: none;
padding: 0;
margin: 0;
}
.custom-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--bg-light);
}
.custom-list li:last-child {
border-bottom: none;
}
.custom-list li i {
font-size: 1.25rem;
color: var(--rojo-institucional);
flex-shrink: 0;
margin-top: 0.25rem;
}
/* Process Timeline */
.process-section {
margin-top: 4rem;
padding: 3rem;
background: white;
border-radius: 20px;
box-shadow: var(--shadow-sm);
}
.section-heading {
font-size: 2rem;
font-weight: 900;
color: var(--text-dark);
}
.process-timeline {
display: flex;
flex-wrap: wrap;
gap: 2rem;
justify-content: space-between;
margin-top: 2rem;
}
.process-step {
flex: 1;
min-width: 180px;
text-align: center;
position: relative;
}
.process-step::after {
content: '';
position: absolute;
top: 35px;
right: -1rem;
width: 2rem;
height: 2px;
background: var(--rojo-institucional);
}
.process-step:last-child::after {
display: none;
}
.process-number {
width: 70px;
height: 70px;
background: var(--rojo-institucional);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: 900;
margin: 0 auto 1rem;
box-shadow: var(--shadow-md);
}
.process-content h5 {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--text-dark);
}
.process-content p {
font-size: 0.9rem;
color: var(--text-muted);
margin: 0;
}
/* CTA Box */
.cta-box {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 3rem;
border-radius: 20px;
margin-top: 3rem;
}
.cta-box h4 {
font-weight: 700;
margin-bottom: 0.5rem;
}
.cta-box p {
opacity: 0.95;
}
/* ========================================
PÁGINA MARCO LEGAL
======================================== */
.normas-section {
margin: 3rem 0;
}
.norma-card {
background: white;
border-radius: 20px;
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-bottom: 2rem;
transition: var(--transition);
}
.norma-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-5px);
}
.norma-header {
background: var(--bg-light);
padding: 1.5rem 2rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
border-bottom: 3px solid var(--rojo-institucional);
}
.norma-type-badge {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.5rem;
border-radius: 50px;
color: white;
font-weight: 700;
font-size: 0.875rem;
text-transform: uppercase;
}
.norma-number {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-dark);
}
.norma-body {
padding: 2rem;
}
.norma-body h4 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
}
.norma-meta {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 1rem;
}
.norma-description {
color: var(--text-muted);
line-height: 1.7;
}
.norma-footer {
padding: 1.5rem 2rem;
background: var(--bg-light);
border-top: 1px solid var(--border);
}
/* Jerarquía */
.jerarquia-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.jerarquia-item {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem;
background: var(--bg-light);
border-radius: 12px;
transition: var(--transition);
}
.jerarquia-item:hover {
background: white;
box-shadow: var(--shadow-sm);
}
.jerarquia-nivel {
width: 50px;
height: 50px;
background: var(--rojo-institucional);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 900;
flex-shrink: 0;
}
.jerarquia-content h5 {
font-size: 1rem;
font-weight: 700;
margin-bottom: 0.25rem;
color: var(--text-dark);
}
.jerarquia-content p {
font-size: 0.875rem;
color: var(--text-muted);
margin: 0;
}
/* System Structure */
.system-structure {
margin-top: 2rem;
}
.system-level {
padding: 1.5rem;
background: var(--bg-light);
border-radius: 12px;
text-align: center;
margin-bottom: 1rem;
}
.system-level.highlight {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
}
.system-badge {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 50px;
font-weight: 700;
font-size: 0.75rem;
margin-bottom: 0.75rem;
}
.system-badge.national {
background: #dc2626;
color: white;
}
.system-badge.regional {
background: #059669;
color: white;
}
.system-badge.provincial {
background: #1e40af;
color: white;
}
.system-badge.district {
background: var(--dorado);
color: var(--rojo-oscuro);
}
.system-level h5 {
font-size: 1.125rem;
font-weight: 900;
margin-bottom: 0.5rem;
}
.system-level p {
font-size: 0.875rem;
margin: 0;
}
.system-level.highlight h5,
.system-level.highlight p {
color: white;
}
.system-arrow {
text-align: center;
color: var(--text-muted);
font-size: 1.5rem;
}
/* Accordion Artículos */
.articulos-section {
margin-top: 3rem;
}
.accordion-item {
border: none;
margin-bottom: 1rem;
border-radius: 12px;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.accordion-button {
background: white;
color: var(--text-dark);
font-weight: 700;
padding: 1.5rem;
border: none;
}
.accordion-button:not(.collapsed) {
background: var(--rojo-institucional);
color: white;
box-shadow: none;
}
.accordion-button:not(.collapsed) i {
color: white;
}
.accordion-button:focus {
box-shadow: none;
}
.accordion-button i {
color: var(--rojo-institucional);
}
.accordion-body {
padding: 2rem;
background: white;
}
/* Enlaces Box */
.enlaces-box {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: var(--shadow-sm);
margin-top: 3rem;
}
.enlace-card {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1.5rem;
background: var(--bg-light);
border-radius: 12px;
color: var(--text-dark);
text-decoration: none;
font-weight: 700;
transition: var(--transition);
}
.enlace-card:hover {
background: var(--rojo-institucional);
color: white;
transform: translateY(-3px);
box-shadow: var(--shadow-md);
}
.enlace-card i {
font-size: 1.25rem;
}
/* ========================================
PÁGINA DIRECTORIO
======================================== */
.year-filter-box {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow-sm);
margin-bottom: 3rem;
}
.year-selector {
display: flex;
align-items: center;
gap: 1rem;
justify-content: flex-end;
}
.year-selector label {
font-weight: 600;
margin: 0;
}
.year-selector .form-select {
max-width: 200px;
border: 2px solid var(--border);
border-radius: 10px;
font-weight: 600;
}
/* Presidente Destacado */
.presidente-destacado-dir {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: var(--shadow-lg);
margin-bottom: 4rem;
position: relative;
border-top: 5px solid var(--dorado);
}
.presidente-badge {
position: absolute;
top: -15px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--dorado) 0%, #b8860b 100%);
color: var(--rojo-oscuro);
padding: 0.75rem 2rem;
border-radius: 50px;
font-weight: 900;
font-size: 0.875rem;
letter-spacing: 1px;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: var(--shadow-md);
}
.presidente-photo-wrapper {
position: relative;
display: inline-block;
}
.presidente-photo {
width: 250px;
height: 250px;
border-radius: 50%;
object-fit: cover;
border: 6px solid var(--rojo-institucional);
box-shadow: var(--shadow-lg);
}
.presidente-seal {
position: absolute;
bottom: 20px;
right: 20px;
width: 70px;
height: 70px;
background: var(--dorado);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--rojo-oscuro);
font-size: 2rem;
border: 4px solid white;
box-shadow: var(--shadow-md);
}
.presidente-info {
padding-left: 2rem;
}
.presidente-nombre {
font-size: 2.5rem;
font-weight: 900;
color: var(--text-dark);
margin-bottom: 0.5rem;
line-height: 1.2;
}
.presidente-cargo-main {
font-size: 1.25rem;
color: var(--rojo-institucional);
font-weight: 700;
margin-bottom: 0.5rem;
}
.presidente-entidad {
font-size: 1.125rem;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 1.5rem;
}
.presidente-bio {
background: var(--bg-light);
padding: 1.5rem;
border-radius: 12px;
border-left: 4px solid var(--dorado);
margin-bottom: 1.5rem;
}
.presidente-bio p {
margin: 0;
color: var(--text-muted);
line-height: 1.7;
}
.presidente-contacto {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.contacto-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
background: var(--bg-light);
border-radius: 50px;
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.contacto-item:hover {
background: var(--rojo-institucional);
color: white;
}
.contacto-item i {
color: var(--rojo-institucional);
}
.contacto-item:hover i {
color: white;
}
/* Miembros Grid */
.miembros-directorio-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.miembro-directorio-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
}
.miembro-directorio-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
.miembro-header {
background: var(--bg-light);
padding: 2rem 2rem 0;
text-align: center;
}
.miembro-photo {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--rojo-institucional);
box-shadow: var(--shadow-md);
margin-bottom: -50px;
}
.miembro-body {
padding: 4rem 2rem 2rem;
text-align: center;
}
.miembro-nombre {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.miembro-cargo {
color: var(--rojo-institucional);
font-weight: 600;
font-size: 0.95rem;
margin-bottom: 1rem;
}
.miembro-entidad-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--bg-light);
border-radius: 50px;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-dark);
margin-bottom: 1rem;
}
.miembro-bio-short {
font-size: 0.875rem;
color: var(--text-muted);
line-height: 1.6;
margin: 0;
}
.miembro-footer {
padding: 1rem 2rem;
background: var(--bg-light);
border-top: 1px solid var(--border);
}
.miembro-contacto-icons {
display: flex;
justify-content: center;
gap: 1rem;
}
.contacto-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: white;
color: var(--rojo-institucional);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: var(--transition);
border: 2px solid var(--border);
}
.contacto-icon:hover {
background: var(--rojo-institucional);
color: white;
border-color: var(--rojo-institucional);
transform: translateY(-3px);
}
/* Info Boxes */
.info-box {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow-sm);
text-align: center;
height: 100%;
}
.info-box .info-icon {
width: 80px;
height: 80px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.info-box .info-icon i {
font-size: 2.5rem;
}
.info-box h5 {
font-size: 1.125rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
}
.info-box p {
color: var(--text-muted);
margin: 0;
}
/* CTA Directorio */
.cta-directorio {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 4rem 2rem;
border-radius: 20px;
text-align: center;
margin-top: 4rem;
}
.cta-directorio i {
opacity: 0.9;
}
.cta-directorio h4 {
font-size: 2rem;
font-weight: 900;
margin-bottom: 1rem;
}
.cta-directorio p {
font-size: 1.125rem;
opacity: 0.95;
margin-bottom: 2rem;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 992px) {
.presidente-photo {
width: 200px;
height: 200px;
}
.presidente-nombre {
font-size: 2rem;
}
.process-step::after {
display: none;
}
}
@media (max-width: 768px) {
.page-title {
font-size: 2rem;
}
.funciones-grid {
grid-template-columns: 1fr;
}
.estructura-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.presidente-info {
padding-left: 0;
margin-top: 2rem;
}
.miembros-directorio-grid {
grid-template-columns: 1fr;
}
.year-selector {
flex-direction: column;
align-items: flex-start;
}
.year-selector .form-select {
max-width: 100%;
width: 100%;
}
}
@media (max-width: 576px) {
.estructura-grid {
grid-template-columns: 1fr;
}
.presidente-photo {
width: 150px;
height: 150px;
}
}
/* ========================================
FOTOS PLACEHOLDER (SIN IMAGEN)
======================================== */
/* Placeholder para Presidente */
.presidente-photo-placeholder {
width: 250px;
height: 250px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
display: flex;
align-items: center;
justify-content: center;
border: 6px solid var(--rojo-institucional);
box-shadow: var(--shadow-lg);
}
.presidente-photo-placeholder i {
font-size: 8rem;
color: white;
opacity: 0.9;
}
/* Placeholder para Miembros */
.miembro-photo-placeholder {
width: 150px;
height: 150px;
border-radius: 50%;
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
display: flex;
align-items: center;
justify-content: center;
border: 4px solid var(--rojo-institucional);
box-shadow: var(--shadow-md);
margin-bottom: -50px;
}
.miembro-photo-placeholder i {
font-size: 5rem;
color: white;
opacity: 0.9;
}
/* ========================================
CONTACTO COMPLETO EN CARDS
======================================== */
.miembro-contacto-full {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.contacto-row {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.875rem;
color: var(--text-dark);
}
.contacto-row i {
color: var(--rojo-institucional);
font-size: 1rem;
flex-shrink: 0;
margin-top: 0.125rem;
}
.contacto-row a {
color: var(--text-dark);
text-decoration: none;
transition: var(--transition);
word-break: break-all;
}
.contacto-row a:hover {
color: var(--rojo-institucional);
}
.contacto-row span {
line-height: 1.5;
}
/* Actualizar contacto-item para soportar div */
.contacto-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
background: var(--bg-light);
border-radius: 50px;
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
a.contacto-item:hover {
background: var(--rojo-institucional);
color: white;
}
a.contacto-item:hover i {
color: white;
}
div.contacto-item {
cursor: default;
}
div.contacto-item i {
color: var(--rojo-institucional);
}
/* ========================================
NO HAY MIEMBROS
======================================== */
.no-miembros {
text-align: center;
padding: 5rem 2rem;
background: white;
border-radius: 20px;
box-shadow: var(--shadow-sm);
}
.no-miembros i {
color: var(--text-muted);
opacity: 0.3;
}
.no-miembros h3 {
font-weight: 700;
margin: 1rem 0;
color: var(--text-dark);
}
.no-miembros p {
color: var(--text-muted);
}
/* ========================================
RESPONSIVE ADICIONAL
======================================== */
@media (max-width: 992px) {
.presidente-photo-placeholder {
width: 200px;
height: 200px;
}
.presidente-photo-placeholder i {
font-size: 6rem;
}
}
@media (max-width: 768px) {
.presidente-photo-placeholder {
width: 150px;
height: 150px;
}
.presidente-photo-placeholder i {
font-size: 4.5rem;
}
.contacto-row {
font-size: 0.8rem;
}
}
@media (max-width: 576px) {
.miembro-photo-placeholder i {
font-size: 4rem;
}
}
/* Loading state para contenedor de documentos */
#documentos-container {
transition: opacity 0.3s ease;
}
#documentos-container.loading {
opacity: 0.5;
pointer-events: none;
}
/* Animación suave para resultados */
.documents-grid {
animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Estilo para mensaje de error */
.alert {
border-radius: 12px;
padding: 1.5rem;
margin: 2rem 0;
}
.alert-danger {
background: #fee2e2;
border: 2px solid #ef4444;
color: #991b1b;
}
/* ========================================
PÁGINAS DE NOTICIAS - ESTILOS COMPLETOS
======================================== */
/* Hero Section Noticias */
.page-hero-noticias {
background: linear-gradient(135deg, #059669 0%, #047857 100%);
color: white;
padding: 4rem 0 3rem;
position: relative;
overflow: hidden;
}
.page-hero-noticias::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
.page-hero-simple {
background: var(--bg-light);
padding: 2rem 0 1rem;
}
/* Filtros de Noticias */
.noticias-filters-section {
padding: 2rem 0;
background: white;
}
/* Grid de Noticias */
.noticias-results-section {
padding: 3rem 0;
background: var(--bg-light);
}
.noticias-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
/* Card de Noticia */
.noticia-card {
background: white;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: var(--transition);
display: flex;
flex-direction: column;
}
.noticia-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-lg);
}
/* Imagen de Noticia */
.noticia-imagen {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: var(--bg-light);
}
.noticia-imagen img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.noticia-card:hover .noticia-imagen img {
transform: scale(1.1);
}
.noticia-imagen-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #059669 0%, #047857 100%);
}
.noticia-imagen-placeholder i {
font-size: 4rem;
color: white;
opacity: 0.5;
}
/* Categoría Badge */
.noticia-categoria-badge {
position: absolute;
top: 15px;
left: 15px;
background: var(--rojo-institucional);
color: white;
padding: 0.5rem 1rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 0.5rem;
box-shadow: var(--shadow-md);
}
/* Contenido de Noticia */
.noticia-contenido {
padding: 1.5rem;
display: flex;
flex-direction: column;
flex: 1;
}
.noticia-meta {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1rem;
font-size: 0.875rem;
color: var(--text-muted);
}
.noticia-fecha,
.noticia-vistas {
display: flex;
align-items: center;
gap: 0.5rem;
}
.noticia-titulo {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 1rem;
line-height: 1.4;
}
.noticia-titulo a {
color: var(--text-dark);
text-decoration: none;
transition: var(--transition);
}
.noticia-titulo a:hover {
color: var(--rojo-institucional);
}
.noticia-bajada {
color: var(--text-muted);
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 1.5rem;
flex: 1;
}
/* Botón Leer Más */
.btn-leer-mas {
display: inline-flex;
align-items: center;
color: var(--rojo-institucional);
font-weight: 600;
text-decoration: none;
transition: var(--transition);
}
.btn-leer-mas:hover {
color: var(--rojo-oscuro);
transform: translateX(5px);
}
.btn-leer-mas i {
transition: transform 0.3s ease;
}
.btn-leer-mas:hover i {
transform: translateX(5px);
}
/* ========================================
DETALLE DE NOTICIA
======================================== */
.noticia-detalle-section {
padding: 3rem 0;
background: var(--bg-light);
}
.noticia-detalle-card {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: var(--shadow-sm);
}
/* Header de Detalle */
.noticia-header {
margin-bottom: 2rem;
}
.categoria-badge-large {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--rojo-institucional);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 1.5rem;
}
.noticia-detalle-titulo {
font-size: 2.5rem;
font-weight: 900;
color: var(--text-dark);
line-height: 1.2;
margin-bottom: 1.5rem;
}
.noticia-meta-detalle {
display: flex;
align-items: center;
gap: 2rem;
padding: 1rem 0;
border-top: 2px solid var(--bg-light);
border-bottom: 2px solid var(--bg-light);
}
.meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-muted);
font-weight: 600;
}
.meta-item i {
color: var(--rojo-institucional);
}
/* Imagen Principal */
.noticia-imagen-principal {
margin: 2rem 0;
border-radius: 15px;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.noticia-imagen-principal img {
width: 100%;
height: auto;
display: block;
}
/* Bajada */
.noticia-bajada-box {
background: var(--bg-light);
padding: 2rem;
border-radius: 12px;
border-left: 5px solid var(--rojo-institucional);
margin: 2rem 0;
}
.noticia-bajada-box .lead {
font-size: 1.25rem;
line-height: 1.7;
margin: 0;
color: var(--text-dark);
}
/* Contenido Completo */
.noticia-contenido-completo {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-dark);
}
.noticia-contenido-completo p {
margin-bottom: 1.5rem;
}
.noticia-contenido-completo h2,
.noticia-contenido-completo h3 {
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: 700;
color: var(--text-dark);
}
.noticia-contenido-completo ul,
.noticia-contenido-completo ol {
margin-bottom: 1.5rem;
padding-left: 2rem;
}
.noticia-contenido-completo li {
margin-bottom: 0.5rem;
}
/* Acciones y Compartir */
.noticia-acciones {
margin-top: 3rem;
padding: 2rem;
background: var(--bg-light);
border-radius: 15px;
}
.noticia-acciones h5 {
font-weight: 700;
margin-bottom: 1rem;
}
.social-share {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn-social {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 50px;
color: white;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.btn-social:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-md);
color: white;
}
.btn-social.facebook {
background: #1877f2;
}
.btn-social.twitter {
background: #1da1f2;
}
.btn-social.whatsapp {
background: #25d366;
}
/* Noticias Relacionadas */
.noticias-relacionadas {
margin-top: 3rem;
padding-top: 3rem;
border-top: 3px solid var(--bg-light);
}
.noticias-relacionadas h4 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 2rem;
}
.noticia-mini-card {
background: var(--bg-light);
border-radius: 12px;
overflow: hidden;
transition: var(--transition);
}
.noticia-mini-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-sm);
}
.noticia-mini-img {
width: 100%;
height: 150px;
object-fit: cover;
}
.noticia-mini-card h6 {
padding: 1rem;
margin: 0;
font-size: 0.95rem;
line-height: 1.4;
}
.noticia-mini-card h6 a {
color: var(--text-dark);
text-decoration: none;
transition: var(--transition);
}
.noticia-mini-card h6 a:hover {
color: var(--rojo-institucional);
}
.noticia-mini-card small {
display: block;
padding: 0 1rem 1rem;
}
/* Sidebar Noticias */
.noticias-recientes-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.noticia-reciente-item {
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--bg-light);
}
.noticia-reciente-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.noticia-reciente-item h6 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.noticia-reciente-item h6 a {
color: var(--text-dark);
text-decoration: none;
transition: var(--transition);
}
.noticia-reciente-item h6 a:hover {
color: var(--rojo-institucional);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 992px) {
.noticias-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.noticia-detalle-card {
padding: 2rem;
}
.noticia-detalle-titulo {
font-size: 2rem;
}
}
@media (max-width: 768px) {
.noticias-grid {
grid-template-columns: 1fr;
}
.noticia-detalle-titulo {
font-size: 1.5rem;
}
.noticia-meta-detalle {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.social-share {
flex-direction: column;
}
.btn-social {
width: 100%;
justify-content: center;
}
}
@media (max-width: 576px) {
.noticia-imagen {
height: 180px;
}
.noticia-contenido {
padding: 1rem;
}
.noticia-detalle-card {
padding: 1.5rem;
}
}
/* ========================================
PÁGINA DE CONTACTO - ESTILOS COMPLETOS
======================================== */
/* Hero Section Contacto */
.page-hero-contacto {
background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
color: white;
padding: 4rem 0 3rem;
position: relative;
overflow: hidden;
}
.page-hero-contacto::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
.contact-hero-icon {
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
border: 3px solid rgba(255, 255, 255, 0.3);
}
.contact-hero-icon i {
font-size: 6rem;
color: var(--dorado);
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* Información de Contacto Rápida */
.quick-contact-info {
padding: 3rem 0;
margin-top: -60px;
position: relative;
z-index: 10;
}
.contact-info-card {
background: white;
padding: 2.5rem;
border-radius: 20px;
box-shadow: var(--shadow-lg);
text-align: center;
height: 100%;
transition: var(--transition);
border-top: 4px solid var(--azul);
}
.contact-info-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 40px rgba(30, 64, 175, 0.2);
}
.contact-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--azul) 0%, #1e3a8a 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
}
.contact-icon i {
font-size: 2.5rem;
color: white;
}
.contact-info-card h4 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1rem;
}
.contact-info-card p {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.contact-info-card p a {
color: var(--azul);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.contact-info-card p a:hover {
color: var(--rojo-institucional);
}
/* Sección Principal de Contacto */
.contact-main-section {
padding: 5rem 0;
background: var(--bg-light);
}
/* Formulario de Contacto */
.contact-form-card {
background: white;
padding: 3rem;
border-radius: 20px;
box-shadow: var(--shadow-md);
}
.form-header {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 3px solid var(--bg-light);
}
.form-header h2 {
font-size: 2rem;
font-weight: 900;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.form-header p {
color: var(--text-muted);
margin: 0;
}
/* Mensaje de Respuesta */
#contactMessage {
margin-bottom: 2rem;
padding: 1.5rem;
border-radius: 12px;
animation: slideDown 0.3s ease;
}
#contactMessage.alert-success {
background: #d1fae5;
border: 2px solid #10b981;
color: #065f46;
}
#contactMessage.alert-danger {
background: #fee2e2;
border: 2px solid #ef4444;
color: #991b1b;
}
#contactMessage i {
margin-right: 0.5rem;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Formulario */
.contact-form .form-label {
font-weight: 600;
color: var(--text-dark);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
}
.contact-form .form-label i {
color: var(--azul);
}
.contact-form .form-control,
.contact-form .form-select {
border: 2px solid var(--border);
border-radius: 10px;
padding: 0.875rem 1.25rem;
font-size: 1rem;
transition: var(--transition);
}
.contact-form .form-control:focus,
.contact-form .form-select:focus {
border-color: var(--azul);
box-shadow: 0 0 0 4px rgba(30, 64, 175, 0.1);
}
.contact-form textarea.form-control {
resize: vertical;
min-height: 150px;
}
.btn-primary-contact {
padding: 1rem 2rem;
background: linear-gradient(135deg, var(--azul) 0%, #1e3a8a 100%);
border: none;
border-radius: 12px;
color: white;
font-weight: 700;
font-size: 1.125rem;
transition: var(--transition);
}
.btn-primary-contact:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(30, 64, 175, 0.3);
background: linear-gradient(135deg, #1e3a8a 0%, var(--azul) 100%);
}
.btn-primary-contact:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.form-note {
font-size: 0.875rem;
color: var(--text-muted);
text-align: center;
margin: 0;
}
/* Tarjetas de Información */
.info-card {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow-sm);
}
.info-card h4 {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-dark);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
}
.info-card h4 i {
color: var(--azul);
}
.info-card.highlight {
background: linear-gradient(135deg, var(--azul) 0%, #1e3a8a 100%);
color: white;
}
.info-card.highlight h4 {
color: white;
}
.info-card.highlight h4 i {
color: var(--dorado);
}
/* Horarios de Atención */
.horarios-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.horario-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--bg-light);
border-radius: 10px;
border-left: 4px solid var(--azul);
}
.horario-item.disabled {
opacity: 0.6;
border-left-color: var(--text-muted);
}
.horario-dia {
font-weight: 700;
color: var(--text-dark);
}
.horario-hora {
text-align: right;
color: var(--text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
/* Redes Sociales */
.social-links-contact {
display: flex;
flex-direction: column;
gap: 1rem;
}
.social-btn {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
border-radius: 12px;
color: white;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.social-btn:hover {
transform: translateX(10px);
box-shadow: var(--shadow-md);
color: white;
}
.social-btn i {
font-size: 1.5rem;
width: 40px;
text-align: center;
}
.social-btn.facebook {
background: linear-gradient(135deg, #1877f2 0%, #0e5fcc 100%);
}
.social-btn.twitter {
background: linear-gradient(135deg, #1da1f2 0%, #0d8bd9 100%);
}
.social-btn.youtube {
background: linear-gradient(135deg, #ff0000 0%, #cc0000 100%);
}
/* Lista de Información */
.info-list {
list-style: none;
padding: 0;
margin: 0;
}
.info-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
color: white;
}
.info-list li:last-child {
border-bottom: none;
}
.info-list li i {
font-size: 1.25rem;
color: var(--dorado);
flex-shrink: 0;
margin-top: 0.25rem;
}
/* Enlaces Rápidos */
.quick-links-contact {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.quick-link-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
background: var(--bg-light);
border-radius: 10px;
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
}
.quick-link-item:hover {
background: var(--azul);
color: white;
transform: translateX(5px);
}
.quick-link-item i:first-child {
color: var(--azul);
}
.quick-link-item:hover i {
color: white;
}
.quick-link-item span {
flex: 1;
margin: 0 1rem;
}
/* Sección del Mapa */
.map-section {
padding: 4rem 0;
background: white;
}
.map-header {
margin-bottom: 2rem;
}
.map-header h3 {
font-size: 2rem;
font-weight: 900;
color: var(--text-dark);
margin-bottom: 0.5rem;
}
.map-header p {
color: var(--text-muted);
font-size: 1.125rem;
margin: 0;
}
.map-container {
border-radius: 20px;
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.map-container iframe {
display: block;
width: 100%;
}
/* CTA Contacto */
.cta-contacto {
background: linear-gradient(135deg, var(--rojo-institucional) 0%, var(--rojo-oscuro) 100%);
color: white;
padding: 5rem 0;
position: relative;
overflow: hidden;
}
.cta-contacto::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
}
.cta-contacto i {
opacity: 0.9;
}
.cta-contacto h2 {
font-size: 2.5rem;
font-weight: 900;
margin-bottom: 1rem;
}
.cta-contacto p {
font-size: 1.25rem;
opacity: 0.95;
margin-bottom: 3rem;
}
.emergency-buttons {
display: flex;
justify-content: center;
gap: 2rem;
flex-wrap: wrap;
}
.btn-emergency {
display: flex;
align-items: center;
gap: 1.5rem;
padding: 1.5rem 2rem;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 15px;
color: white;
text-decoration: none;
transition: var(--transition);
}
.btn-emergency:hover {
background: white;
color: var(--rojo-institucional);
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.btn-emergency i {
font-size: 3rem;
}
.btn-emergency:hover i {
color: var(--rojo-institucional);
}
.btn-emergency div {
text-align: left;
}
.btn-emergency strong {
display: block;
font-size: 1.125rem;
margin-bottom: 0.25rem;
}
.btn-emergency span {
display: block;
font-size: 1.5rem;
font-weight: 900;
}
/* Validación de Formulario */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
border-color: #ef4444;
}
.was-validated .form-control:valid,
.was-validated .form-select:valid {
border-color: #10b981;
}
.invalid-feedback {
display: none;
color: #dc2626;
font-size: 0.875rem;
margin-top: 0.5rem;
}
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback {
display: block;
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 992px) {
.contact-hero-icon {
width: 150px;
height: 150px;
}
.contact-hero-icon i {
font-size: 4rem;
}
.contact-form-card {
padding: 2rem;
}
}
@media (max-width: 768px) {
.page-title {
font-size: 2rem;
}
.quick-contact-info {
margin-top: 0;
}
.cta-contacto h2 {
font-size: 2rem;
}
.emergency-buttons {
flex-direction: column;
}
.btn-emergency {
width: 100%;
justify-content: center;
}
}
@media (max-width: 576px) {
.contact-form-card {
padding: 1.5rem;
}
.form-header h2 {
font-size: 1.5rem;
}
.btn-emergency {
flex-direction: column;
text-align: center;
}
.btn-emergency div {
text-align: center;
}
}
/* ========================================
PÁGINA DE BÚSQUEDA - ESTILOS COMPLETOS
======================================== */
/* Hero Section Búsqueda */
.page-hero-busqueda {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
color: white;
padding: 4rem 0 3rem;
position: relative;
overflow: hidden;
}
.page-hero-busqueda::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
/* Formulario de búsqueda en página */
.search-form-page {
max-width: 700px;
margin: 0 auto;
}
.search-form-page .input-group {
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
border-radius: 15px;
overflow: hidden;
}
.search-form-page .input-group-text {
background: white;
border: none;
padding: 1rem 1.5rem;
}
.search-form-page .input-group-text i {
color: #6366f1;
font-size: 1.25rem;
}
.search-form-page .form-control {
border: none;
padding: 1.25rem 1.5rem;
font-size: 1.125rem;
}
.search-form-page .form-control:focus {
box-shadow: none;
}
.search-form-page .btn-primary {
padding: 1.25rem 2.5rem;
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
border: none;
font-weight: 700;
font-size: 1.125rem;
}
.search-form-page .btn-primary:hover {
background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}
/* Filtros de Tipo */
.search-filters-section {
padding: 2rem 0;
background: white;
border-bottom: 2px solid var(--bg-light);
}
.filters-tabs {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.filter-tab {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 2rem;
background: var(--bg-light);
border-radius: 12px;
color: var(--text-dark);
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: 2px solid transparent;
}
.filter-tab:hover {
background: white;
border-color: #6366f1;
color: #6366f1;
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
.filter-tab.active {
background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
color: white;
border-color: #6366f1;
box-shadow: var(--shadow-md);
}
.filter-tab i {
font-size: 1.25rem;
}
.filter-tab .badge {
background: rgba(255, 255, 255, 0.2);
color: inherit;
padding: 0.25rem 0.75rem;
border-radius: 50px;
font-size: 0.875rem;
font-weight: 700;
}
.filter-tab.active .badge {
background: rgba(255, 255, 255, 0.3);
}
/* Resultados */
.search-results-section {
padding: 3rem 0 5rem;
background: var(--bg-light);
}
.results-section {
margin-bottom: 3rem;
}
.results-header {
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 3px solid white;
}
.results-header h3 {
font-size: 1.75rem;
font-weight: 900;
color: var(--text-dark);
display: flex;
align-items: center;
gap: 0.75rem;
}
.results-header h3 i {
color: #6366f1;
}
.results-header .badge {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
/* Lista de Resultados */
.results-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.result-item {
background: white;
padding: 2rem;
border-radius: 15px;
box-shadow: var(--shadow-sm);
display: flex;
gap: 1.5rem;
transition: var(--transition);
}
.result-item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.result-icon {
width: 70px;
height: 70px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.result-icon i {
font-size: 2rem;
}
.result-content {
flex: 1;
}
.result-meta {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
flex-wrap: wrap;
}
.result-type {
padding: 0.35rem 1rem;
border-radius: 50px;
color: white;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.result-date,
.result-views {
font-size: 0.875rem;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 0.5rem;
}
.result-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
line-height: 1.4;
}
.result-title a {
color: var(--text-dark);
text-decoration: none;
transition: var(--transition);
}
.result-title a:hover {
color: #6366f1;
}
.result-session {
font-size: 0.9rem;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 0.75rem;
}
.result-description {
color: var(--text-muted);
line-height: 1.7;
margin-bottom: 1rem;
}
/* Resaltado de búsqueda */
.result-title mark,
.result-description mark {
background: #fef3c7;
color: #92400e;
padding: 0.125rem 0.25rem;
border-radius: 3px;
font-weight: 700;
}
.result-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.btn-result-action {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: var(--bg-light);
color: var(--text-dark);
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 0.875rem;
transition: var(--transition);
}
.btn-result-action:hover {
background: #6366f1;
color: white;
transform: translateX(5px);
}
/* Sin Resultados */
.no-results {
text-align: center;
padding: 5rem 2rem;
background: white;
border-radius: 20px;
box-shadow: var(--shadow-sm);
}
.no-results i {
color: var(--text-muted);
opacity: 0.3;
}
.no-results h3 {
font-weight: 700;
margin: 1rem 0;
color: var(--text-dark);
}
.no-results .suggestions {
max-width: 500px;
margin: 2rem auto;
text-align: left;
background: var(--bg-light);
padding: 2rem;
border-radius: 12px;
}
.no-results .suggestions h5 {
font-weight: 700;
margin-bottom: 1rem;
}
.no-results .suggestions ul li {
margin-bottom: 0.75rem;
color: var(--text-muted);
}
.quick-search-links {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.quick-search-links .badge {
padding: 0.75rem 1.5rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.quick-search-links .badge:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-sm);
}
/* Búsqueda Inicial */
.initial-search-section {
padding: 5rem 0;
background: var(--bg-light);
}
.popular-searches {
margin-top: 3rem;
}
.popular-searches .badge {
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 600;
margin: 0.5rem;
cursor: pointer;
transition: var(--transition);
border: 2px solid var(--border);
}
.popular-searches .badge:hover {
background: #6366f1 !important;
color: white !important;
border-color: #6366f1;
transform: translateY(-3px);
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 992px) {
.result-item {
flex-direction: column;
align-items: center;
text-align: center;
}
.result-content {
width: 100%;
}
.result-meta {
justify-content: center;
}
.result-actions {
justify-content: center;
}
}
@media (max-width: 768px) {
.page-title {
font-size: 1.75rem;
}
.filters-tabs {
flex-direction: column;
}
.filter-tab {
justify-content: center;
}
.result-title {
font-size: 1.25rem;
}
.search-form-page .btn-primary {
padding: 1rem 2rem;
}
}
@media (max-width: 576px) {
.result-item {
padding: 1.5rem;
}
.result-icon {
width: 60px;
height: 60px;
}
.result-icon i {
font-size: 1.5rem;
}
.search-form-page .input-group-text,
.search-form-page .form-control,
.search-form-page .btn-primary {
font-size: 1rem;
padding: 1rem 1.25rem;
}
}