/* ===== CORRECCIÓN DE ESPACIADO EXCESIVO EN CONTENIDO ===== */

/* Variables CSS mejoradas */
:root {
    --color-primario: #1e40af;
    --color-secundario: #3b82f6;
    --color-acento: #dc2626;
    --color-exito: #059669;
    --color-advertencia: #d97706;
    --color-blanco: #ffffff;
    --color-gris-50: #f9fafb;
    --color-gris-100: #f3f4f6;
    --color-gris-200: #e5e7eb;
    --color-gris-300: #d1d5db;
    --color-gris-600: #4b5563;
    --color-gris-700: #374151;
    --color-gris-800: #1f2937;
    --color-gris-900: #111827;
    
    --fuente-primaria: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --fuente-secundaria: 'Inter', 'Segoe UI', system-ui, sans-serif;
    
    --radio-borde: 12px;
    --radio-borde-lg: 16px;
    --sombra-suave: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sombra-media: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sombra-fuerte: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --transicion: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Variables específicas para espaciado */
    --espaciado-parrafo: 0rem;
    --espaciado-titulo: 0.1rem;
    --espaciado-lista: 0rem;
    --espaciado-elemento-lista: 0.2rem;
}

/* Reset y base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--fuente-secundaria);
    line-height: 1.6;
    color: var(--color-gris-800);
    background-color: var(--color-gris-50);
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Header */
.encabezado {
    background: var(--color-blanco);
    box-shadow: var(--sombra-suave);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--color-gris-200);
}

.contenedor-encabezado {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contenedor-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: var(--transicion);
}

.contenedor-logo:hover {
    transform: translateY(-1px);
}

.imagen-logo {
    height: 48px;
    width: auto;
}

.navegacion-encabezado {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.enlace-navegacion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-gris-700);
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radio-borde);
    transition: var(--transicion);
    border: 2px solid transparent;
}

.enlace-navegacion:hover {
    color: var(--color-secundario);
    background-color: rgba(59, 130, 246, 0.05);
    border-color: rgba(59, 130, 246, 0.1);
}

.boton-volver {
    background: linear-gradient(135deg, var(--color-secundario), var(--color-primario));
    color: var(--color-blanco);
    padding: 0.875rem 1.75rem;
    border-radius: var(--radio-borde-lg);
    font-weight: 600;
    transition: var(--transicion);
    box-shadow: var(--sombra-suave);
    border: none;
}

.boton-volver:hover {
    background: linear-gradient(135deg, var(--color-primario), #1e3a8a);
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

/* Contenedor principal */
.contenedor-principal {
    max-width: 920px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
}

/* Header del artículo */
.encabezado-articulo {
    background: var(--color-blanco);
    border-radius: var(--radio-borde-lg);
    overflow: hidden;
    box-shadow: var(--sombra-media);
    margin-bottom: 2.5rem;
    border: 1px solid var(--color-gris-200);
}

.imagen-articulo {
    position: relative;
    height: 420px;
    overflow: hidden;
}

.imagen-articulo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transicion);
}

.imagen-articulo:hover img {
    transform: scale(1.02);
}

.imagen-fallback {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.superposicion-articulo {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(
        to top, 
        rgba(0, 0, 0, 0.85) 0%, 
        rgba(0, 0, 0, 0.4) 50%,
        transparent 100%
    );
    padding: 2.5rem;
    color: var(--color-blanco);
}

.metadatos-articulo {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.insignia-meta {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.625rem 1.25rem;
    border-radius: 25px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transicion);
}

.insignia-meta:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.insignia-meta.categoria {
    background: rgba(59, 130, 246, 0.8);
    border-color: rgba(59, 130, 246, 0.6);
}

.insignia-meta.fecha {
    background: rgba(5, 150, 105, 0.8);
    border-color: rgba(5, 150, 105, 0.6);
}

.insignia-meta.vistas {
    background: rgba(217, 119, 6, 0.8);
    border-color: rgba(217, 119, 6, 0.6);
}

.titulo-articulo {
    font-family: var(--fuente-primaria);
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.025em;
}

/* Información del artículo */
.informacion-articulo {
    background: var(--color-blanco);
    padding: 2rem 2.5rem;
    border-bottom: 1px solid var(--color-gris-200);
}

.informacion-autor {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.avatar-autor {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--color-secundario), var(--color-primario));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco);
    font-weight: bold;
    font-size: 1.375rem;
    box-shadow: var(--sombra-suave);
}

.detalles-autor h4 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-gris-900);
}

.meta-autor {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-gris-600);
}

.tiempo-lectura {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

/* ===== CORRECCIÓN DE ESPACIADO DEL CONTENIDO ===== */

/* Contenido del artículo con espaciado corregido */
.contenido-articulo {
    background: var(--color-blanco);
    padding: 3.5rem 2.5rem;
    border-radius: 0 0 var(--radio-borde-lg) var(--radio-borde-lg);
    line-height: 1.6;
    font-size: 1.125rem;
    color: var(--color-gris-700);
}

/* Normalización de espaciado para elementos del editor */
.contenido-articulo > *:first-child {
    margin-top: 0 !important;
}

.contenido-articulo > *:last-child {
    margin-bottom: 0 !important;
}

/* Párrafos con espaciado controlado */
.contenido-articulo p {
    margin: 0 0 var(--espaciado-parrafo) 0 !important;
    text-align: justify;
    hyphens: auto;
}

/* Eliminar párrafos vacíos */
.contenido-articulo p:empty {
    display: none !important;
}

/* Párrafos que solo contienen espacios en blanco */
.contenido-articulo p:not(:empty):not([class]):not([id]) {
    margin-bottom: var(--espaciado-parrafo) !important;
}

/* Títulos con espaciado normalizado */
.contenido-articulo h1,
.contenido-articulo h2,
.contenido-articulo h3,
.contenido-articulo h4,
.contenido-articulo h5,
.contenido-articulo h6 {
    font-family: var(--fuente-primaria);
    color: var(--color-gris-900);
    margin: var(--espaciado-titulo) !important;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.contenido-articulo h1 {
    font-size: 2.25rem;
    border-bottom: 3px solid var(--color-secundario);
    padding-bottom: 0.75rem;
    margin-bottom: 1.5rem !important;
}

.contenido-articulo h2 {
    font-size: 1.500rem;
    color: var(--color-primario);
}

.contenido-articulo h3 {
    font-size: 1.5rem;
    color: var(--color-secundario);
}

.contenido-articulo h4 {
    font-size: 1.25rem;
    color: var(--color-gris-800);
}

.contenido-articulo h5 {
    font-size: 1.125rem;
    color: var(--color-gris-800);
}

.contenido-articulo h6 {
    font-size: 1rem;
    color: var(--color-gris-800);
}

/* Listas con espaciado controlado */
.contenido-articulo ul,
.contenido-articulo ol {
    margin: var(--espaciado-lista) !important;
    padding-left: 2.25rem;
}

.contenido-articulo li {
    margin-bottom: var(--espaciado-elemento-lista) !important;
    line-height: 1.6;
}

/* Eliminar espaciado excesivo entre elementos de lista */
.contenido-articulo li p {
    margin-bottom: 0.5rem !important;
}

.contenido-articulo li:last-child {
    margin-bottom: 0 !important;
}

/* Blockquotes con espaciado normalizado */
.contenido-articulo blockquote {
    border-left: 5px solid var(--color-secundario);
    background: linear-gradient(135deg, var(--color-gris-50), var(--color-gris-100));
    padding: 2rem 2.5rem;
    margin: 2rem 0 !important;
    font-style: italic;
    border-radius: 0 var(--radio-borde) var(--radio-borde) 0;
    position: relative;
    box-shadow: var(--sombra-suave);
}

.contenido-articulo blockquote::before {
    content: '"';
    font-size: 5rem;
    color: var(--color-secundario);
    position: absolute;
    top: -0.5rem;
    left: 1.5rem;
    opacity: 0.2;
    font-family: Georgia, serif;
}

.contenido-articulo blockquote p {
    margin-bottom: 0.75rem !important;
}

.contenido-articulo blockquote p:last-child {
    margin-bottom: 0 !important;
}

/* Elementos inline con espaciado corregido */
.contenido-articulo strong {
    color: var(--color-gris-900);
    font-weight: 700;
}

.contenido-articulo em {
    color: var(--color-secundario);
    font-style: italic;
}

.contenido-articulo a {
    color: var(--color-secundario);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: var(--transicion);
    font-weight: 500;
}

.contenido-articulo a:hover {
    border-bottom-color: var(--color-secundario);
    color: var(--color-primario);
}

/* Corrección específica para múltiples <br> consecutivos */
.contenido-articulo br + br {
    display: none !important;
}

/* Limitar máximo 2 <br> consecutivos */
.contenido-articulo br + br + br {
    display: none !important;
}

/* Divs vacíos o con solo espacios */
.contenido-articulo div:empty {
    display: none !important;
}

/* Spans vacíos */
.contenido-articulo span:empty {
    display: none !important;
}

/* Corrección para elementos con solo espacios en blanco */
.contenido-articulo *:not(img):not(br):not(hr) {
    white-space: normal;
}

/* Normalización de márgenes para elementos anidados */
.contenido-articulo * + h1,
.contenido-articulo * + h2,
.contenido-articulo * + h3,
.contenido-articulo * + h4,
.contenido-articulo * + h5,
.contenido-articulo * + h6 {
    margin-top: 2.5rem !important;
}

/* Espaciado específico para emojis y elementos especiales */
.contenido-articulo .emoji {
    margin: 0 0.25rem;
    display: inline-block;
}

/* Corrección para imágenes en el contenido */
.contenido-articulo img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radio-borde);
    margin: 1.5rem 0;
    box-shadow: var(--sombra-suave);
}

/* Tablas con espaciado normalizado */
.contenido-articulo table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0 !important;
    box-shadow: var(--sombra-suave);
    border-radius: var(--radio-borde);
    overflow: hidden;
}

.contenido-articulo th,
.contenido-articulo td {
    padding: 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gris-200);
}

.contenido-articulo th {
    background: var(--color-gris-100);
    font-weight: 600;
    color: var(--color-gris-900);
}

/* Código con espaciado normalizado */
.contenido-articulo code {
    background: var(--color-gris-100);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    color: var(--color-acento);
}

.contenido-articulo pre {
    background: var(--color-gris-900);
    color: var(--color-gris-100);
    padding: 1.5rem;
    border-radius: var(--radio-borde);
    overflow-x: auto;
    margin: 2rem 0 !important;
}

.contenido-articulo pre code {
    background: none;
    color: inherit;
    padding: 0;
}

/* Botones de acción */
.acciones-articulo {
    background: var(--color-blanco);
    padding: 2.5rem;
    border-radius: var(--radio-borde-lg);
    box-shadow: var(--sombra-media);
    margin: 2.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    border: 1px solid var(--color-gris-200);
}

.botones-accion {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.boton {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: var(--radio-borde-lg);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transicion);
    font-size: 0.9rem;
    box-shadow: var(--sombra-suave);
}

.boton-compartir {
    background: linear-gradient(135deg, var(--color-exito), #047857);
    color: var(--color-blanco);
}

.boton-compartir:hover {
    background: linear-gradient(135deg, #047857, #065f46);
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

.boton-imprimir {
    background: linear-gradient(135deg, var(--color-advertencia), #b45309);
    color: var(--color-blanco);
}

.boton-imprimir:hover {
    background: linear-gradient(135deg, #b45309, #92400e);
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

.boton-modal {
    background: linear-gradient(135deg, var(--color-secundario), var(--color-primario));
    color: var(--color-blanco);
}

.boton-modal:hover {
    background: linear-gradient(135deg, var(--color-primario), #1e3a8a);
    transform: translateY(-2px);
    box-shadow: var(--sombra-media);
}

.compartir-social {
    display: flex;
    gap: 0.75rem;
}

.boton-social {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco);
    text-decoration: none;
    transition: var(--transicion);
    font-size: 1.125rem;
    box-shadow: var(--sombra-suave);
}

.boton-social.facebook {
    background: linear-gradient(135deg, #1877f2, #166fe5);
}

.boton-social.twitter {
    background: linear-gradient(135deg, #1da1f2, #0d8bd9);
}

.boton-social.whatsapp {
    background: linear-gradient(135deg, #25d366, #20ba5a);
}

.boton-social.linkedin {
    background: linear-gradient(135deg, #0077b5, #005885);
}

.boton-social:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--sombra-media);
}

/* Footer del artículo */
.pie-articulo {
    background: var(--color-blanco);
    padding: 2.5rem;
    border-radius: var(--radio-borde-lg);
    box-shadow: var(--sombra-media);
    text-align: center;
    margin-bottom: 2.5rem;
    border: 1px solid var(--color-gris-200);
}

.logo-pie {
    height: 64px;
    margin-bottom: 1.25rem;
}

.texto-pie {
    color: var(--color-gris-600);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

.contacto-pie {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-gris-200);
}

.informacion-contacto {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.elemento-contacto {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--color-gris-600);
    font-size: 0.9rem;
    font-weight: 500;
}

.elemento-contacto i {
    color: var(--color-secundario);
    font-size: 1rem;
}

/* ===== MODAL GRANDE ===== */

/* Overlay del modal grande */
.modal-overlay-grande {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-overlay-grande.activo {
    opacity: 1;
    visibility: visible;
}

/* Contenedor principal del modal grande */
.modal-container-grande {
    background: var(--color-blanco);
    border-radius: 20px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    max-width: 95vw;
    width: 1400px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.8) translateY(40px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.modal-overlay-grande.activo .modal-container-grande {
    transform: scale(1) translateY(0);
}

/* Header del modal grande */
.modal-header-grande {
    background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
    color: var(--color-blanco);
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    min-height: 80px;
}

.modal-titulo-grande {
    font-family: var(--fuente-primaria);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    padding-right: 3rem;
    line-height: 1.3;
}

.modal-cerrar-grande {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transicion);
    color: var(--color-blanco);
    font-size: 1.25rem;
}

.modal-cerrar-grande:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.1);
}

/* Contenido del modal grande */
.modal-contenido-grande {
    flex: 1;
    display: flex;
    overflow: hidden;
    min-height: 0;
}

/* Imagen del modal grande */
.modal-imagen-grande {
    flex: 0 0 40%;
    position: relative;
    background: var(--color-gris-100);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-imagen-grande img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-imagen-fallback {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--color-primario), var(--color-secundario));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco);
    font-size: 4rem;
    opacity: 0.7;
}

/* Información del modal grande */
.modal-info-grande {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Metadatos del modal grande */
.modal-metadatos-grande {
    padding: 2rem 2.5rem 1rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--color-gris-200);
}

.modal-insignia {
    background: var(--color-gris-100);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-gris-700);
}

.modal-insignia.categoria {
    background: rgba(59, 130, 246, 0.1);
    color: var(--color-secundario);
}

.modal-insignia.fecha {
    background: rgba(5, 150, 105, 0.1);
    color: var(--color-exito);
}

.modal-insignia.vistas {
    background: rgba(217, 119, 6, 0.1);
    color: var(--color-advertencia);
}

/* Autor del modal grande */
.modal-autor-grande {
    padding: 1.5rem 2.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--color-gris-200);
}

.modal-avatar-autor {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-secundario), var(--color-primario));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blanco);
    font-size: 1.125rem;
}

.modal-detalles-autor h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gris-900);
}

.modal-meta-autor {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.25rem;
    font-size: 0.8rem;
    color: var(--color-gris-600);
}

.modal-meta-autor span {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

/* Texto del modal grande con espaciado corregido */
.modal-texto-grande {
    flex: 1;
    padding: 2rem 2.5rem;
    overflow-y: auto;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-gris-700);
}

/* Aplicar las mismas correcciones de espaciado al modal */
.modal-texto-grande > *:first-child {
    margin-top: 0 !important;
}

.modal-texto-grande > *:last-child {
    margin-bottom: 0 !important;
}

.modal-texto-grande p {
    margin: 0 0 1rem 0 !important;
    text-align: justify;
}

.modal-texto-grande p:empty {
    display: none !important;
}

.modal-texto-grande h1,
.modal-texto-grande h2,
.modal-texto-grande h3,
.modal-texto-grande h4,
.modal-texto-grande h5,
.modal-texto-grande h6 {
    font-family: var(--fuente-primaria);
    color: var(--color-gris-900);
    margin: 1.5rem 0 1rem 0 !important;
    font-weight: 600;
    line-height: 1.2;
}

.modal-texto-grande h1 {
    font-size: 1.75rem;
    border-bottom: 2px solid var(--color-secundario);
    padding-bottom: 0.5rem;
}

.modal-texto-grande h2 {
    font-size: 1.5rem;
    color: var(--color-primario);
}

.modal-texto-grande h3 {
    font-size: 1.25rem;
    color: var(--color-secundario);
}

.modal-texto-grande h4 {
    font-size: 1.125rem;
}

.modal-texto-grande ul,
.modal-texto-grande ol {
    margin: 1rem 0 !important;
    padding-left: 2rem;
}

.modal-texto-grande li {
    margin-bottom: 0.5rem !important;
}

.modal-texto-grande li:last-child {
    margin-bottom: 0 !important;
}

.modal-texto-grande blockquote {
    border-left: 4px solid var(--color-secundario);
    background: var(--color-gris-50);
    padding: 1.25rem 1.5rem;
    margin: 1.5rem 0 !important;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

.modal-texto-grande blockquote p {
    margin-bottom: 0.5rem !important;
}

.modal-texto-grande blockquote p:last-child {
    margin-bottom: 0 !important;
}

.modal-texto-grande strong {
    color: var(--color-gris-900);
    font-weight: 600;
}

.modal-texto-grande em {
    color: var(--color-secundario);
}

.modal-texto-grande a {
    color: var(--color-secundario);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: var(--transicion);
}

.modal-texto-grande a:hover {
    border-bottom-color: var(--color-secundario);
}

/* Corrección de <br> múltiples en el modal */
.modal-texto-grande br + br {
    display: none !important;
}

.modal-texto-grande br + br + br {
    display: none !important;
}

.modal-texto-grande div:empty {
    display: none !important;
}

.modal-texto-grande span:empty {
    display: none !important;
}

/* Scrollbar personalizada para el modal */
.modal-texto-grande::-webkit-scrollbar {
    width: 8px;
}

.modal-texto-grande::-webkit-scrollbar-track {
    background: var(--color-gris-100);
    border-radius: 4px;
}

.modal-texto-grande::-webkit-scrollbar-thumb {
    background: var(--color-gris-300);
    border-radius: 4px;
}

.modal-texto-grande::-webkit-scrollbar-thumb:hover {
    background: var(--color-gris-400);
}

/* Acciones del modal grande */
.modal-acciones-grande {
    padding: 1.5rem 2.5rem;
    background: var(--color-gris-50);
    border-top: 1px solid var(--color-gris-200);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.modal-boton {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radio-borde);
    font-weight: 600;
    cursor: pointer;
    transition: var(--transicion);
    font-size: 0.875rem;
    text-decoration: none;
}

.modal-boton.compartir {
    background: linear-gradient(135deg, var(--color-exito), #047857);
    color: var(--color-blanco);
}

.modal-boton.compartir:hover {
    background: linear-gradient(135deg, #047857, #065f46);
    transform: translateY(-1px);
}

.modal-boton.imprimir {
    background: linear-gradient(135deg, var(--color-advertencia), #b45309);
    color: var(--color-blanco);
}

.modal-boton.imprimir:hover {
    background: linear-gradient(135deg, #b45309, #92400e);
    transform: translateY(-1px);
}

.modal-boton.cerrar {
    background: var(--color-gris-200);
    color: var(--color-gris-700);
}

.modal-boton.cerrar:hover {
    background: var(--color-gris-300);
    transform: translateY(-1px);
}

/* Diseño responsivo */
@media (max-width: 1200px) {
    .modal-container-grande {
        width: 90vw;
        max-width: 1200px;
    }
    
    .modal-imagen-grande {
        flex: 0 0 35%;
    }
}

@media (max-width: 768px) {
    .contenedor-principal {
        padding: 1.5rem 1rem;
    }

    .contenedor-encabezado {
        padding: 0 1rem;
    }

    .navegacion-encabezado {
        gap: 1rem;
    }

    .imagen-articulo {
        height: 280px;
    }

    .superposicion-articulo {
        padding: 2rem;
    }

    .titulo-articulo {
        font-size: 2rem;
    }

    .metadatos-articulo {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.875rem;
    }

    .informacion-articulo {
        padding: 1.5rem 2rem;
    }

    .contenido-articulo {
        padding: 2.5rem 2rem;
        font-size: 1rem;
    }

    .contenido-articulo h1 {
        font-size: 1.875rem;
    }

    .contenido-articulo h2 {
        font-size: 1.5rem;
    }

    .contenido-articulo h3 {
        font-size: 1.25rem;
    }

    .acciones-articulo {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
        padding: 2rem;
    }

    .botones-accion {
        justify-content: center;
    }

    .compartir-social {
        justify-content: center;
    }

    .informacion-contacto {
        flex-direction: column;
        gap: 1.25rem;
    }

    /* Modal responsivo */
    .modal-container-grande {
        width: 95vw;
        max-height: 90vh;
        flex-direction: column;
    }
    
    .modal-contenido-grande {
        flex-direction: column;
    }
    
    .modal-imagen-grande {
        flex: 0 0 200px;
    }
    
    .modal-titulo-grande {
        font-size: 1.375rem;
        padding-right: 4rem;
    }
    
    .modal-metadatos-grande {
        padding: 1.5rem 2rem 1rem;
    }
    
    .modal-autor-grande {
        padding: 1rem 2rem;
    }
    
    .modal-texto-grande {
        padding: 1.5rem 2rem;
    }
    
    .modal-acciones-grande {
        padding: 1.25rem 2rem;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .modal-boton {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .contenedor-principal {
        padding: 1rem 0.75rem;
    }

    .titulo-articulo {
        font-size: 1.75rem;
    }

    .contenido-articulo {
        padding: 2rem 1.5rem;
    }

    .boton {
        width: 100%;
        justify-content: center;
        padding: 1rem 1.5rem;
    }

    .botones-accion {
        flex-direction: column;
        width: 100%;
    }

    .informacion-autor {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .meta-autor {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Modal muy pequeño */
    .modal-container-grande {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    
    .modal-header-grande {
        padding: 1.5rem 1rem;
    }
    
    .modal-titulo-grande {
        font-size: 1.25rem;
        padding-right: 3rem;
    }
    
    .modal-cerrar-grande {
        width: 40px;
        height: 40px;
        top: 1rem;
        right: 1rem;
    }
    
    .modal-metadatos-grande,
    .modal-autor-grande,
    .modal-texto-grande,
    .modal-acciones-grande {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Estilos para impresión */
@media print {
    .encabezado,
    .acciones-articulo,
    .boton-volver,
    .modal-overlay-grande {
        display: none !important;
    }

    body {
        background: white !important;
        font-size: 12pt;
        line-height: 1.6;
    }

    .contenedor-principal {
        max-width: none;
        padding: 0;
    }

    .encabezado-articulo,
    .contenido-articulo,
    .pie-articulo {
        box-shadow: none !important;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }

    .imagen-articulo {
        height: 250px;
    }

    .superposicion-articulo {
        background: rgba(0, 0, 0, 0.7) !important;
    }

    .titulo-articulo {
        font-size: 24pt;
        color: black !important;
    }

    .contenido-articulo {
        font-size: 11pt;
    }
}

/* Animaciones */
@keyframes aparecerDesdeAbajo {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.encabezado-articulo,
.acciones-articulo,
.pie-articulo {
    animation: aparecerDesdeAbajo 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.encabezado-articulo {
    animation-delay: 0.1s;
}

.acciones-articulo {
    animation-delay: 0.2s;
}

.pie-articulo {
    animation-delay: 0.3s;
}

/* Estados de focus para accesibilidad */
.boton:focus,
.enlace-navegacion:focus,
.boton-social:focus,
.modal-boton:focus,
.modal-cerrar-grande:focus {
    outline: 3px solid var(--color-secundario);
    outline-offset: 2px;
}

/* Mejoras de contraste */
.contenido-articulo {
    color: var(--color-gris-800);
}

.contenido-articulo p {
    color: var(--color-gris-700);
}

/* Indicadores visuales */
.insignia-meta i,
.boton i {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}