/*
    Estilos para el contenido del artículo.
    Aplica estilos base para que el HTML del RichEditor se vea bien.
*/

/* Contenedor principal para el contenido */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f3f4f6;
}

.font-krona {
    font-family: 'Krona One', sans-serif;
}

.protected-content {
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: default;
}



/* Estilo base para los enlaces de Categorías */
.category-link {
    position: relative;
    color: #4b5563;
    transition: color 0.2s ease-in-out;
}

/* Pseudo-elemento para la barra diagonal */
.category-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--category-color);
    transform: scaleX(0) skewX(-20deg);
    transform-origin: bottom left;
    transition: transform 0.2s ease-in-out;
}

/* Estilo para la categoría seleccionada */
.category-link.active-category {
    font-weight: 700;
    color: #1f2937;
}

/* Efecto al pasar el cursor */
.category-link:hover:not(.active-category) {
    color: #111827;
}

.category-link:hover::after {
    transform: scaleX(1) skewX(-20deg);
}

/* Efecto de barra para la categoría activa */
.category-link.active-category::after {
    transform: scaleX(1) skewX(-20deg);
}

/* Estilos específicos para el dropdown de perfil */
.profile-dropdown-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5);
    /* blue focus ring */
}





.prose {
    font-family: 'Poppins';
   line-height: 1.75;
    color: #4b5563;
    /* Color de texto gris oscuro */
    max-width: none;
}

/* Estilos para párrafos */
.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

/* Estilos para encabezados */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
     font-weight: 600;
    margin-top: 2em;
    margin-bottom: 1em;
    line-height: 1.25;
    color: #1f2937;
    /* Color de texto más oscuro para títulos */
}

/* Estilos para listas ordenadas */
.prose ol {
    list-style-type: decimal;
    padding-left: 1.5rem;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Estilos para listas no ordenadas */
.prose ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin-top: 1em;
    margin-bottom: 1em;
}

/* Estilos para citas en bloque (blockquote) */
.prose blockquote {
    font-style: italic;
    font-weight: 500;
    padding-left: 1.5rem;
    border-left: 4px solid #d1d5db;
    /* Borde gris */
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

/* Estilos para código en línea */
.prose :where(code):not(:where([class~="not-prose"] *)) {
    background-color: #f3f4f6;
    color: #1f2937;
    padding: 0.25em 0.5em;
    border-radius: 0.25rem;
}

/* Estilos para enlaces */
.prose a {
    color: #2563eb;
    /* Azul para enlaces */
    text-decoration: underline;
}

.prose a:hover {
    color: #1d4ed8;
    /* Azul más oscuro al pasar el cursor */
}

/* Estilos para tablas */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose thead {
    background-color: #f9fafb;
}

.prose th,
.prose td {
    padding: 0.75em;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.prose tr:nth-child(even) {
    background-color: #f9fafb;
}


.full-width-line-container {
    /* El div contenedor se extiende a todo lo ancho de la pantalla */
    width: 100vw;
    position: relative;
    /* Los márgenes negativos sacan el div del contenedor principal (main) */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.line-and-title-wrapper {
    /* Mantiene el contenido del título y la línea centrados */
    max-width: 84rem;
    /* 1344px, lo mismo que max-w-7xl */
    margin-left: auto;
    margin-right: auto;
    padding-left: 0.5rem;
    /* px-2 */
    padding-right: 0.5rem;
    /* px-2 */
}

.line-and-title-wrapper::after {
    content: '';
    display: block;
    height: 3px;
    background-color: currentColor;
    border-radius: 5px;
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 75%;
    /* Achica la línea al 75% del ancho de la pantalla */
}


.protected-content {
    /* Deshabilita la selección de texto para la mayoría de navegadores */
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    cursor: default;
    /* Opcional: para que el cursor no parezca que puede seleccionar */
}



 .download-button-fancy {
            /* Gradiente de fondo */
            background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
            color: #ffffff;
            font-weight: 700;
            letter-spacing: 0.5px;
            
            /* Sombra suave y prominente */
            box-shadow: 0 10px 20px rgba(79, 70, 229, 0.4), 0 3px 6px rgba(0, 0, 0, 0.1);
            
            /* Efecto hover */
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        .download-button-fancy:hover {
            /* Oscurecer ligeramente el gradiente al pasar el ratón */
            background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
            box-shadow: 0 14px 28px rgba(79, 70, 229, 0.55), 0 10px 10px rgba(0, 0, 0, 0.1);
        }

        .download-button-fancy:active {
            /* Efecto de "presionado" */
            transform: scale(0.98);
            box-shadow: 0 5px 10px rgba(79, 70, 229, 0.3);
        }


        .modal-active .modal-container {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

        .modal-container {
            /* 1. Limita la altura máxima y fuerza scroll si el contenido es largo */
            max-height: 90vh;
            transform: translateY(-50px) scale(0.95);
            opacity: 0;
            display: flex;
            /* Añadido para ayudar a la estructura interna */
            flex-direction: column;
        }

        /* 2. Cuerpo del modal con scroll interno */
        .modal-content-body {
            overflow-y: auto;
            /* La altura del cuerpo se ajusta al espacio restante para no desbordar el modal-container */
            flex-grow: 1;
        }

        /* Clase para unificar el estilo de los enlaces de descarga individual (Mantengo el estilo aunque solo quedan los ZIP) */
        .download-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0.75rem;
            margin-bottom: 0.5rem;
            background-color: #ffffff;
            border: 1px solid #e5e7eb;
            border-radius: 0.5rem;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            transition: all 150ms ease-in-out;
        }

        .download-link:hover {
            background-color: #f5f3ff;
            /* indigo-50 */
            border-color: #a5b4fc;
            /* indigo-300 */
        }

        .tag-download {
            padding: 0.25rem 0.75rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: white;
            background-color: #4f46e5;
            /* indigo-600 */
            border-radius: 9999px;
            transition: background-color 150ms;
        }





            /* Estilo para simular el avatar */
    .avatar-lg {
        width: 120px;
        height: 120px;
        font-size: 3rem;
        background-color: #3b82f6;
        /* Blue 500 */
        color: white;
        border-radius: 9999px;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }