:root {
    --primary-color: #8a4baf;
    --secondary-color: #f4f4f4;
    --text-color: #333;
    --background-color: #fff;
    --book-cover-color: #5c2d7c;
    --font-serif: 'Lora', serif;
    --font-sans: 'Roboto', sans-serif;
    --tag-color: #e9d8f5;
    --tag-selected-color: var(--primary-color);
    --header-bg: #fff;
    --logo-blue: #4A90E2;
}

/* 1. Bloqueo de recarga en la raíz del documento */
html {
    overscroll-behavior-y: none !important;
    height: 100%;
    overflow-y: auto;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Mejora el scroll en móviles */
    -webkit-overflow-scrolling: touch;
}

body {
    font-family: var(--font-sans);
    background-color: var(--background-color);
    color: var(--text-color);
    
    /* 2. LIBERACIÓN DEL SCROLL: Importante para que baje en Ranking y Capítulos */
    min-height: 100vh; 
    height: auto !important; /* Permite que el cuerpo crezca */
    overflow-y: auto !important; 
    overflow-x: hidden !important; /* Evita movimiento lateral */
    position: relative;
}

/* Asegura que los contenedores principales no corten el scroll */
main, #app, .app-container {
    height: auto !important;
    min-height: 100vh;
    overflow-y: visible !important;
}

.hidden {
    display: none !important;
}

/* --- Splash Screen --- */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1500px;
    z-index: 3000;
}

#book {
    width: 85vw;
    max-width: 350px; 
    aspect-ratio: 3 / 4; 
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    cursor: pointer;
}

#book-cover {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--book-cover-color);
    border-radius: 5px 15px 15px 5px;
    transform-origin: left center;
    transition: transform 1.5s ease-in-out;
    backface-visibility: hidden;
    z-index: 10;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#book-cover img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

#book-cover h1, #book-cover p {
    position: absolute;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    z-index: 11;
}

#splash-screen.open #book-cover {
    transform: rotateY(-160deg);
}

@media (max-width: 360px) {
    #book {
        width: 90vw;
    }
}
/* --- Main App (Estilos Móviles Base) --- */

#main-app {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Cambiado de 'height' a 'min-height' */
    width: 100%;
    margin: 0 auto;
    background: #f9f9f9;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}


/* --- Header Base --- */
#main-header {
    position: relative;
    width: 100%;
    background-color: var(--primary-color);
    color: white;
    padding: 1rem;
    text-align: center;
    flex-shrink: 0;
    z-index: 10;
}

/* --- REGLA MAESTRA PARA OCULTAR (Melissa) --- */
@media (max-width: 768px) {
    /* Oculta el contenedor principal */
    #main-header.header-oculto, 
    .header-oculto {
        display: none !important;
    }

    /* Oculta específicamente el logo y el buscador si están fuera del header */
    .header-oculto .web-header,
    .header-oculto .search-container,
    .header-oculto .logo-container {
        display: none !important;
    }
}
/* Page Container (Estilos Móviles Base) */

#page-container {
	flex-grow: 1;
	overflow-y: auto;
	padding: 1.5rem;
	padding-bottom: 70px;
}

.page {
	display: none;
}

.page.active {
	display: block;
	animation: fadeIn 0.5s;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}


/* Bottom Nav (Estilos Móviles) */

#bottom-nav {
	position: fixed;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 600px;
	display: flex;
	justify-content: space-around;
	background-color: #fff;
	border-top: 1px solid #ddd;
	padding: 0.5rem 0;
	z-index: 20;
	box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
}

.nav-btn {
	background: none;
	border: none;
	color: #888;
	cursor: pointer;
	font-size: 1rem;
	padding: 0.5rem;
	transition: color 0.3s;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.nav-btn.active {
	color: var(--primary-color);
	font-weight: bold;
}

.nav-icon {
	width: 24px;
	height: 24px;
	margin-bottom: 2px;
}

.nav-btn span {
	font-size: 0.75rem;
}


/* --- Profile Page --- */

.profile-header {
	display: flex;
	align-items: center;
	margin-bottom: 2rem;
}

.avatar {
    width: 80px;         /* Ancho fijo */
    height: 80px;        /* Alto fijo */
    min-width: 80px;     /* Garantiza que no se encoja */
    min-height: 80px;    /* Garantiza que no se encoja */
    border-radius: 50%;
    margin-right: 1rem;
    border: 3px solid var(--primary-color);
    
    /* ESTAS DOS LÍNEAS SON LA CLAVE */
    object-fit: cover;   /* Recorta la imagen para que encaje perfecto en el círculo */
    display: block;      /* Elimina espacios fantasma debajo de la imagen */
}

/* --- Avatar en el Header (junto al buscador) --- */
#header-profile-avatar {
    width: 35px !important;   /* Lo hacemos pequeño y elegante */
    height: 35px !important;
    min-width: 35px;
    min-height: 35px;
    border-radius: 50%;
    object-fit: cover;        /* Evita que la foto se estire */
    border: 2px solid var(--primary-color);
    margin-left: 10px;
    display: inline-block;
    vertical-align: middle;   /* Lo alinea con el buscador */
    cursor: pointer;
}

.user-info h3 {
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}

#user-id {
	font-weight: normal;
	color: #666;
	font-size: 1rem;
}

#auth-container {
	margin-top: 0.5rem;
}

.profile-menu {
	list-style: none;
}

.profile-menu li {
	border-bottom: 1px solid #eee;
}

.profile-menu a {
	display: block;
	padding: 1rem 0;
	text-decoration: none;
	color: var(--text-color);
	font-size: 1.1rem;
	transition: color 0.3s;
}

.profile-menu a:hover {
	color: var(--primary-color);
}


/* --- Author Center Page --- */

.author-center-content {
	text-align: center;
	padding: 2rem 0;
}

.author-center-content h2 {
	font-family: var(--font-serif);
	font-size: 2rem;
	margin-bottom: 1rem;
}

.author-center-content p {
	font-size: 1.2rem;
	color: #555;
	margin-bottom: 2rem;
}


/* --- Create Story Page --- */

#create-story-form .form-group {
	margin-bottom: 1.5rem;
}

#create-story-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: bold;
}

#create-story-form input[type="text"] {
	width: 100%;
	padding: 0.8rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1rem;
}

#create-story-form input[readonly],
#create-story-details-form input[readonly] {
	background-color: #eee;
}

#create-story-form select,
#create-story-details-form select,
#author-income-page select {
	width: 100%;
	padding: 0.8rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1rem;
	background-color: white;
}

.inline-display {
	display: flex;
	align-items: center;
}

.inline-display input {
	flex-grow: 1;
}

.inline-display span {
	margin-left: 1rem;
	font-weight: bold;
	color: var(--text-color);
}

.cover-upload {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

#cover-preview {
	width: 120px;
	height: 160px;
	border: 1px solid #ccc;
	object-fit: cover;
	margin-right: 1rem;
	background-color: #f0f0f0;
}

.radio-group label {
	font-weight: normal;
	margin-right: 1.5rem;
	display: inline-flex;
	align-items: center;
}

.radio-group input {
	margin-right: 0.5rem;
}

#create-story-form .description,
#create-story-details-form .description {
	font-size: 0.9rem;
	color: #666;
	margin-bottom: 0.75rem;
}

#tags-container {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.tag-category h3 {
	font-family: var(--font-serif);
	margin-bottom: 0.5rem;
	border-bottom: 1px solid #eee;
	padding-bottom: 0.25rem;
}

.tag-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tag-btn {
	/* <-- ¡ESTOS SON LOS ESTILOS BASE CORREGIDOS! */
	background-color: var(--tag-color);
	color: var(--text-color);
	padding: 0.3rem 0.8rem;
	border-radius: 15px;
	font-size: 0.9rem;
	cursor: pointer;
	transition: all 0.2s;
}

.tag-btn.selected {
	/* <-- ¡ESTOS SON LOS ESTILOS DE SELECCIÓN CORREGIDOS! */
	background-color: var(--tag-selected-color);
	color: white;
	font-weight: bold;
}

#novel-synopsis {
	width: 100%;
	min-height: 200px;
	padding: 0.8rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1rem;
	font-family: var(--font-sans);
	resize: vertical;
}


/* -------------------------------------------------------- */


/* --- INICIO: ESTILOS PARA LISTA DE NOVELAS DEL AUTOR --- */


/* -------------------------------------------------------- */


/* La miniatura de la portada en la lista de novelas del autor */

.author-novel-cover-thumb {
	/* Mismas dimensiones 3:4 que en la vista de lista de la Biblioteca */
	width: 90px;
	height: 120px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-radius: 5px;
	flex-shrink: 0;
	margin-right: 15px;
}


/* Estilo del contenedor de la tarjeta de novela en "Mi Obra" */

.author-novel-card {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	padding: 10px;
	margin-bottom: 15px;
	border: 1px solid #eee;
	border-radius: 8px;
	background-color: white;
}


/* -------------------------------------------------------- */


/* --- FIN: ESTILOS PARA LISTA DE NOVELAS DEL AUTOR --- */


/* -------------------------------------------------------- */


/* --- Preview Page --- */

.preview-container {
	border: 1px solid #eee;
	border-radius: 8px;
	padding: 1rem;
	background: white;
	margin-bottom: 1.5rem;
}

#preview-cover {
	width: 150px;
	height: 200px;
	object-fit: cover;
	border-radius: 5px;
	margin: 0 auto 1rem;
	display: block;
}

#preview-title {
	text-align: center;
	font-family: var(--font-serif);
	font-size: 1.8rem;
	margin-bottom: 1rem;
}

.preview-container p {
	margin-bottom: 0.5rem;
}

.preview-tags {
	margin: 1rem 0;
}

#preview-tags-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.tag-preview {
	background-color: var(--tag-color);
	color: var(--text-color);
	padding: 0.3rem 0.8rem;
	border-radius: 15px;
	font-size: 0.9rem;
}

.preview-synopsis {
	margin-top: 1rem;
	border-top: 1px solid #eee;
	padding-top: 1rem;
}

.preview-synopsis p {
	color: #555;
	line-height: 1.5;
}


/* --- Published Novel & Author Dashboard --- */

.published-novel-header {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin-bottom: 1.5rem;
}

#published-cover {
	width: 100px;
	height: 133px;
	object-fit: cover;
	border-radius: 5px;
	flex-shrink: 0;
}

#published-title {
	font-family: var(--font-serif);
	font-size: 1.8rem;
}

.novel-stats {
	display: flex;
	justify-content: space-around;
	text-align: center;
	background: #f9f9f9;
	padding: 1rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.novel-stats span {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--primary-color);
}

.novel-stats p {
	color: #666;
	font-size: 0.9rem;
}

.author-actions {
	text-align: center;
	background: #e9d8f5;
	padding: 1.5rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
}

.author-actions p {
	margin-bottom: 1rem;
}

.author-actions button:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

.novel-chapters h3,
.income-summary h3,
.payment-info h3,
.calendar-view p {
	font-family: var(--font-serif);
	margin-bottom: 1rem;
}

#chapters-list-container {
	margin-bottom: 1.5rem;
}

#chapters-list {
	border: 1px solid #eee;
	border-radius: 8px;
	overflow: hidden;
}

.chapter-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.8rem 1rem;
	background: white;
	border-bottom: 1px solid #eee;
}

.chapter-item:last-child {
	border-bottom: none;
}

.chapter-item .chapter-title {
	flex-grow: 1;
	margin: 0 1rem;
	font-weight: 500;
}

.chapter-item .chapter-word-count {
	color: #666;
	font-size: 0.9rem;
	white-space: nowrap;
}

.no-chapters-yet,
.chapter-notes {
	text-align: center;
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}

.chapter-notes {
	font-size: 0.85rem;
	background-color: #f9f9f9;
	padding: 0.75rem;
	border-radius: 8px;
}

.chapter-notes p {
	margin: 0.25rem 0;
}

#add-chapter-btn {
	width: 100%;
	margin-bottom: 1rem;
}


/* --- Contract Application Page --- */

#contract-application-page h2 {
	font-family: var(--font-serif);
	margin-bottom: 1.5rem;
}

#contract-application-page h3 {
	font-family: var(--font-serif);
	margin-top: 2rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--primary-color);
	padding-bottom: 0.5rem;
}

.contract-notice {
	background-color: #f9f9f9;
	border-left: 4px solid var(--primary-color);
	padding: 1rem;
	margin-bottom: 2rem;
	font-size: 0.9rem;
	color: #333;
}

.contract-notice p {
	margin-bottom: 0.75rem;
}

.contract-notice p:last-child {
	margin-bottom: 0;
}

#contract-application-form .form-group {
	margin-bottom: 1.5rem;
}

#contract-application-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: bold;
}

#contract-application-form input[type="text"],
#contract-application-form input[type="email"],
#contract-application-form input[type="tel"],
#contract-application-form select,
#app-doc-number,
#app-doc-front,
#app-doc-back,
#app-country,
#app-address,
#app-city,
#app-postal,
#app-phone {
	width: 100%;
	padding: 0.8rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1rem;
}

#contract-application-form input[readonly] {
	background-color: #eee;
}

#contract-application-form input[type="file"] {
	display: block;
	width: 100%;
}

.form-message {
	margin-top: 1rem;
	text-align: center;
	font-weight: bold;
}


/* --- Write Chapter Page --- */

#write-chapter-page h2 {
	font-family: var(--font-serif);
	margin-bottom: 1.5rem;
}

#write-chapter-form textarea {
	width: 100%;
	padding: 0.8rem;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 1rem;
	font-family: var(--font-sans);
	resize: vertical;
}

#write-chapter-form .word-count-display {
	text-align: right;
	color: #666;
	font-size: 0.9rem;
	margin-bottom: 1rem;
}


/* --- Estilos para la Navegación Continua entre Capítulos (Reading Page) --- */


/* Contenedor que agrupa el botón o el mensaje de fin */

.chapter-navigation {
	margin-top: 60px;
	padding: 20px;
	text-align: center;
	border-top: 1px solid #ddd;
	background-color: #f9f9f9;
	border-radius: 8px;
}


/* Estilo específico para el botón de "Siguiente Capítulo" */

.chapter-navigation button.btn-primary {
	width: 90%;
	max-width: 400px;
	padding: 1rem;
	font-size: 1.2rem;
	font-weight: bold;
	display: block;
	margin: 0 auto;
}


/* --- Income Summary & Payment Info --- */

.income-summary {
	text-align: center;
	padding: 1rem;
	background: #f9f9f9;
	border-radius: 8px;
	margin-bottom: 2rem;
}

.income-amount {
	font-size: 2rem;
	font-weight: bold;
	color: var(--primary-color);
}

.payment-info .form-group {
	margin-bottom: 1rem;
}

.payment-notes {
	margin-top: 2rem;
	font-size: 0.85rem;
	color: #666;
	background: #f9f9f9;
	padding: 1rem;
	border-radius: 8px;
}

.payment-notes p {
	margin-bottom: 0.75rem;
}

.payment-notes p:last-child {
	margin-bottom: 0;
}

#monthly-updates .update-item {
	background: #f9f9f9;
	padding: 1rem;
	border-radius: 8px;
}


/* --- Calendar --- */

#calendar-container {
	background: white;
	padding: 1rem;
	border-radius: 8px;
	border: 1px solid #eee;
}

#calendar-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

#calendar-header h3 {
	font-family: var(--font-serif);
	margin: 0;
}

#calendar-weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	text-align: center;
	margin-bottom: 0.5rem;
	font-weight: bold;
	color: #666;
	font-size: 0.9rem;
}

#calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 5px;
}

.calendar-day {
	position: relative;
	border: 1px solid #f0f0f0;
	height: 80px;
	padding: 5px;
	font-size: 0.8rem;
	background-color: #fafafa;
}

.calendar-day.other-month {
	background-color: #fff;
	color: #ccc;
}

.calendar-day .day-number {
	font-weight: bold;
}

.calendar-day .update-info {
	font-size: 0.75rem;
	color: var(--primary-color);
	margin-top: 5px;
	font-weight: 500;
}


/* --- Buttons --- */

.btn-primary {
	background-color: var(--primary-color);
	color: white;
	border: none;
	padding: 0.8rem 1.5rem;
	font-size: 1.1rem;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	font-weight: bold;
}

.btn-primary:hover {
	background-color: #6a3a8a;
}

.btn-secondary {
	background-color: var(--secondary-color);
	color: var(--text-color);
	border: 1px solid #ccc;
	padding: 0.5rem 1rem;
	font-size: 0.9rem;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.btn-secondary:hover {
	background-color: #e0e0e0;
}


/* ======================================= */


/* --- ADAPTACIONES Y ESTILOS PARA WEB --- */


/* ======================================= */


/* 1. Estilos del Contenedor Principal y Header */

#main-app {
	max-width: none;
	/* Desactivamos el límite de 600px en modo web */
}


/* Base del Header */

#main-header {
	position: static;
	padding: 0;
	background-color: var(--header-bg);
	color: var(--text-color);
}

#main-header.web-header {
	height: 80px;
	padding: 0 10px;
	/* AJUSTE: Reducido a 10px para pegar el botón a la derecha */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	position: sticky;
	top: 0;
	z-index: 100;
}

.header-content {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}


/* Estructura para agrupar Logo y Nav a la izquierda */

.header-left {
	display: flex;
	align-items: center;
}


/* Estructura para agrupar Búsqueda y Acción a la derecha */

.header-right {
	display: flex;
	align-items: center;
	gap: 15px;
	/* AJUSTE: Reducido a 15px para acercar elementos */
}


/* AJUSTE: Estilos específicos para el botón de Inicio de Sesión (pequeño y compacto) */

#login-google-btn.btn-primary {
	padding: 0.6rem 1.2rem;
	/* Más pequeño que el botón primario base */
	font-size: 1rem;
	font-weight: 500;
	white-space: nowrap;
}


/* --- Título/Logo Bicolor --- */

#logo-link {
	text-decoration: none;
	font-family: var(--font-serif);
	font-size: 2.2rem;
	font-weight: bold;
	flex-shrink: 0;
	margin-right: 30px;
}

.logo-ros {
	color: var(--logo-blue);
}

.logo-novel {
	color: var(--primary-color);
}


/* 2. Estilo de Navegación (botones migrados) */

.main-nav {
	display: flex;
	gap: 30px;
	height: 100%;
}

.main-nav .nav-btn {
	background: none;
	border: none;
	cursor: pointer;
	color: var(--text-color);
	font-size: 1.1rem;
	padding: 0 0;
	transition: color 0.3s, border-bottom 0.3s;
	display: flex;
	align-items: center;
	height: 100%;
	text-align: center;
}


/* 3. Ocultar los iconos <span> (emojis) */

.nav-btn span:first-child {
	display: none !important;
	/* Asegura que el botón Perfil y Beneficios no muestren ícono en web */
}


/* 4. Estilo de enlace activo y hover */

.main-nav .nav-btn:hover {
	color: var(--primary-color);
}

.main-nav .nav-btn.active {
	color: var(--primary-color);
	font-weight: bold;
	border-bottom: 3px solid var(--primary-color);
}


/* 5. Estilos de la Barra de Búsqueda y Resultados */

.search-container {
    display: flex;
    align-items: center;
    background-color: var(--secondary-color);
    border-radius: 20px;
    padding: 5px 15px;
    border: 1px solid #ddd;
    width: 250px;
    position: relative; /* CRUCIAL: Esto convierte al contenedor en el ancla del popup */
}

.search-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    opacity: 0.6;
}

.search-input {
    border: none;
    background: transparent;
    padding: 5px 0;
    font-size: 1rem;
    color: var(--text-color);
    width: 100%;
}

.search-input:focus {
    outline: none;
}

/* --- NUEVO: Estilos del Popup de Resultados --- */
.results-popup {
    position: absolute;
    top: calc(100% + 10px); /* Se despega un poco del input */
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ddd;
    border-radius: 15px;
    z-index: 9999;
    max-height: 300px;
    overflow-y: auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    display: none; /* Se activará mediante JS al escribir */
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s;
}

.search-result-item:hover {
    background-color: #f0f0f0;
}


/* 6. Ocultar la barra inferior */

#bottom-nav {
	display: none !important;
}


/* 7. Ajustar el padding y centrado del main content (Versión FINAL) */

#page-container {
	padding-bottom: 1.5rem;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	min-height: calc(100vh - 80px);
}


/* 8. FORZAR ESTIRAMIENTO DEL CONTENIDO INTERNO */


/* ==========================================================================
   ESTILOS DE HOME PAGE - ESTRUCTURA DE RANKING Y TENDENCIAS
   ========================================================================== */

/* Asegura que los bloques hijos llenen el ancho disponible */
#page-container > * {
    width: 100%;
    box-sizing: border-box;
}



/* 1. Contenedor de la Novela (Enlace) */
#home-page .novel-item {
    text-align: center;
    text-decoration: none;
    color: var(--text-color);
    overflow: hidden;
    display: block;
    height: auto !important;
    min-height: auto !important;
    position: relative;
    width: 100% !important;
    padding-top: 0 !important;
}

/* ⭐ 2. PROPORCIÓN 3:4 (Contenedor de Portada) */
.novel-cover-wrap {
    position: relative;
    width: 100%;
    /* Mantiene la altura proporcional a la anchura (Proporción 3:4) */
    padding-top: 133.33%; 
    height: 0; 
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #eee; /* Color de carga */
}

/* 3. Ajuste de la Imagen dentro del Wrap */
#home-page .novel-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 5px; 
    box-shadow: none; 
    aspect-ratio: auto !important;
}

/* 4. Efecto Hover en Portada */
.novel-item:hover .novel-cover-wrap {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* 5. Estilos de Texto */
#home-page .novel-item h4 {
    font-size: 1.1rem;
    margin-top: 0.8rem;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}

#home-page .novel-item p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
}



/* Estilos para el Banner */

.banner-section {
	margin-bottom: 2rem;
	background-color: #f0f0f0;
	height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	overflow: hidden;
}


/* --- ADAPTACIONES PARA LIBRARY PAGE (BIBLIOTECA) --- */

#library-page h2 {
    margin-bottom: 1.5rem;
    font-family: var(--font-serif);
    font-size: 1.8rem;
}

/* 1. MÓVIL: Forzamos la cuadrícula de 3 columnas y ajuste de ancho total */
@media (max-width: 899px) {
    /* Ajustamos el contenedor padre para que no permita desborde lateral */
    .library-content-web {
        display: block !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    .novel-list-web {
        display: grid !important;
        /* El 1fr reparte el espacio real de la pantalla entre 3 */
        grid-template-columns: repeat(3, 1fr) !important; 
        gap: 8px !important; /* Reducimos un poco el espacio para que respire mejor */
        padding: 8px !important; 
        width: 100% !important;
        box-sizing: border-box !important; /* Fuerza a incluir padding en el ancho del 100% */
        margin: 0 !important;
    }
    
    /* Aseguramos que las tarjetas no tengan anchos fijos heredados */
    .novel-list-web .novel-card { 
        width: 100% !important;
        min-width: 0 !important; /* Clave para que el contenido no empuje la columna hacia afuera */
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Uniformidad para las imágenes en móvil */
    .novel-list-web .novel-card img {
        width: 100% !important;
        height: 110px !important; /* Altura ajustada para mantener la proporción en 3 columnas */
        object-fit: cover !important;
        border-radius: 8px !important;
    }
}

/* 2. WEB: Diseño original intacto */
@media (min-width: 900px) {
    .library-content-web {
        display: flex;
        gap: 30px;
        align-items: flex-start;
    }
    .library-filters {
        width: 250px;
        flex-shrink: 0;
        padding-right: 20px;
        border-right: 1px solid #eee;
    }
    .library-filters .filter-group {
        margin-bottom: 2rem;
    }
    .novel-list-web {
        flex-grow: 1;
        width: calc(100% - 280px);
        display: block; /* Mantenemos el comportamiento original de escritorio */
    }
}
/* Estilos para los títulos de filtros */

.library-filters h3 {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	margin-bottom: 1rem;
	border-bottom: 2px solid var(--primary-color);
	/* Usamos primary_color aquí */
	padding-bottom: 5px;
}

.library-filters .filter-options {
	display: flex;
	/* Mantener flex para móvil */
	flex-wrap: wrap;
	gap: 10px;
}

@media (min-width: 900px) {
	.library-filters .filter-options {
		flex-direction: column;
		/* Cambiar a lista vertical en web */
		flex-wrap: nowrap;
	}
	.library-filters .filter-btn {
		text-align: left;
		padding: 8px 15px;
		border-radius: 5px;
		width: 100%;
		margin: 0;
		transition: background-color 0.2s, color 0.2s;
	}
	.library-filters .filter-btn:not(.active):hover {
		background-color: var(--tag-color);
		/* Usamos un color claro para hover */
	}
	.library-filters .filter-btn.active {
		background-color: var(--primary-color);
		color: white;
		font-weight: bold;
	}
}


/* Estilo de Lista de Novelas (Formato Web) */

.novel-list-web {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.novel-list-web .novel-item {
	display: flex;
	text-align: left;
	gap: 15px;
	padding: 15px;
	border: 1px solid #eee;
	border-radius: 8px;
	background-color: var(--background-color);
	transition: box-shadow 0.2s;
	text-decoration: none;
	/* Asegura que el enlace no tenga subrayado */
	color: var(--text-color);
	/* Asegura que el color de texto sea correcto */
}

.novel-list-web .novel-item:hover {
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#library-page .novel-list-web .novel-item img {
	/* Mantenemos tamaño fijo en la Biblioteca, añadimos aspect-ratio para navegadores modernos */
	width: 90px;
	height: 120px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center;
	display: block;
	/* evita gaps en layouts inline/flex */
	border-radius: 5px;
	flex-shrink: 0;
	box-shadow: none;
	transition: none;
}

.novel-list-web .novel-info {
	flex-grow: 1;
}

.novel-list-web .novel-info h4 {
	font-family: var(--font-serif);
	font-size: 1.3rem;
	margin-top: 0;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
}

.novel-list-web .novel-info p {
	font-size: 1rem;
	color: #666;
	margin-top: 5px;
}

.novel-list-web .novel-author,
.novel-list-web .novel-status {
	font-size: 0.9rem;
	color: #999;
	margin-top: 5px;
}

.novel-list-web .novel-synopsis {
	margin-top: 10px;
	font-size: 0.95rem;
	color: var(--text-color);
	max-height: 4.5em;
	/* Limitar a 3 líneas */
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
    -webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}


/* -------------------------------------------------------- */


/* --- CORRECCIONES PARA PÁGINA DEL LECTOR (reader-page) --- */


/* -------------------------------------------------------- */


/* 1. Estilos para los botones de navegación unificados (Reutilizando btn-primary) */


/* El botón ya debería usar .btn-primary en el HTML para aplicar la mayoría de los estilos. */

.btn-navigation:disabled,

/* Se aplica a los elementos que tienen el rol de navegación pero no son botones (si se usa un <div> o <a>) */

.chapter-navigation-controls .btn-primary:disabled {
	background-color: #cccccc !important;
	/* Usamos !important para asegurar que sobreescribe :hover de btn-primary si está deshabilitado */
	cursor: not-allowed !important;
}


/* Contenedor de los botones (para separar Anterior y Siguiente) */

.chapter-navigation-controls {
	display: flex;
	justify-content: space-between;
	margin: 30px 0;
	padding: 20px 0;
	border-top: 1px solid #eee;
}


/* 2. DISPOSICIÓN PRINCIPAL DEL LECTOR (Dos Columnas en Escritorio) */

.reader-main-layout {
	display: flex;
	/* Habilita el layout flexible */
	gap: 30px;
	/* Espacio entre el contenido principal y la barra lateral */
	align-items: flex-start;
	/* Alinea los elementos al inicio (arriba) */
	width: 100%;
	max-width: 1200px;
	/* Limita el ancho del lector para comodidad */
	margin: 0 auto;
}


/* El contenido del capítulo y los botones ocupan la mayor parte del espacio */

.reader-content-wrap {
	flex-grow: 1;
	min-width: 0;
}


/* La barra lateral de Tabla de Contenido (TOC) */

.toc-sidebar {
	width: 300px;
	/* Ancho fijo para la tabla de contenido */
	flex-shrink: 0;
	/* Evita que la TOC se encoja */
	background-color: #f8f8f8;
	padding: 15px;
	border-radius: 8px;
}


/* 3. RESPONSIVE: En pantallas pequeñas (móviles), la TOC debe ir debajo */

@media (max-width: 900px) {
	.reader-main-layout {
		flex-direction: column;
		/* Apila los elementos verticalmente */
		/* Eliminamos el padding lateral aquí si ya lo maneja #page-container, 
        pero lo añadimos si la estructura principal es max-width: 1200px */
		padding: 0 1.5rem;
	}
	.toc-sidebar {
		width: 100%;
		/* Ocupa todo el ancho en móvil */
		order: 3;
		/* Asegura que la TOC se vaya al final, después del contenido */
		margin-top: 20px;
	}
}
/* --- ESTILOS PARA LA BIBLIOTECA (Modo Limpio/Claro) --- */

#library-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    gap: 20px;
    padding: 20px;
    justify-content: start;
    background: #ffffff; /* Fondo de la sección blanco */
}

#library-container .novel-card {
    width: 100%; /* Ahora se ajusta al ancho de la columna del grid */
    max-width: 155px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #ffffff; /* Fondo blanco */
    border-radius: 10px;
    padding-bottom: 12px;
    overflow: hidden;
    border: 1px solid #e0e0e0; /* Borde sutil gris claro */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombra elegante */
}

#library-container .novel-card:hover {
    transform: translateY(-5px);
    border-color: #7b2cbf; /* Morado marca al hacer hover */
    box-shadow: 0 8px 12px rgba(0,0,0,0.1);
}

#library-container .novel-card img {
    width: 100%;
    height: 200px; 
    object-fit: cover;
    display: block;
}

#library-container .novel-info {
    padding: 10px 8px;
    text-align: left;
}

/* TÍTULO: Color oscuro para máxima lectura */
.novel-title-lib {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #2c3e50 !important; /* Gris muy oscuro */
    margin-bottom: 4px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* AUTOR: Morado coherente con tu app */
.novel-author-lib {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #7b2cbf !important; /* Morado vibrante */
    margin: 2px 0 !important;
}

/* VISTAS: Gris suave */
.novel-views-lib {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: #7f8c8d !important; /* Gris medio */
    opacity: 1 !important;
}
/* 1. Liberamos la sección que envuelve al carrusel */
.banner-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0; 
    overflow: visible; 
}

/* 2. El contenedor: Ahora se estirará según el tamaño real de la imagen */
.carousel-container {
    position: relative;
    width: 100%; 
    max-width: 1400px;
    margin: 20px auto; 
    overflow: hidden;
    border-radius: 15px;
    background-color: #1a1a1a;
    /* Quitamos cualquier altura fija para que la imagen mande */
    height: auto !important; 
}

/* 3. La pista: Debe seguir el flujo de altura automática */
.carousel-track {
    display: flex;
    width: 100%;
    height: auto; 
    transition: transform 0.5s ease-in-out;
}

/* 4. El item individual */
.carousel-item {
    min-width: 100%;
    height: auto; 
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 5. LA IMAGEN: La que dicta el tamaño final */
.carousel-item img {
    width: 100% !important;
    height: auto !important; /* Altura automática basada en sus 400px reales */
    display: block;
    /* 'fill' para que use todo el ancho de 1400px sin dejar bordes */
    object-fit: fill; 
    opacity: 0;
    animation: fadeIn 0.8s ease-in forwards;
}

/* Animación de entrada */
@keyframes fadeIn {
    to { opacity: 1; }
}

/* Botones de navegación */
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 15px;
    cursor: pointer;
    border-radius: 50%;
    font-size: 18px;
    z-index: 10;
    transition: all 0.3s ease;
}

.carousel-btn:hover { 
    background: #ffcc00; 
    color: black;
    transform: translateY(-50%) scale(1.1); /* Un pequeño efecto de aumento al pasar el mouse */
}

.prev { left: 15px; }
.next { right: 15px; }
/* =====================================================================
    📖 LECTOR DE CAPÍTULOS: SEGURIDAD + ESTÉTICA PREMIUM
   ===================================================================== */
.contenido-capitulo {
    /* --- 🛡️ SEGURIDAD (Tu código original) --- */
    -webkit-user-select: none;  /* Safari/Chrome */
    -moz-user-select: none;     /* Firefox */
    -ms-user-select: none;      /* IE/Edge */
    user-select: none;          /* Estándar */
    -webkit-user-drag: none;    /* Evita arrastrar fragmentos */
    cursor: default;            /* Cursor normal, no de texto */
    touch-action: pan-y;        /* Permite scroll suave en móviles */

    /* --- 🎨 ESTÉTICA (Look de la foto) --- */
    font-family: 'Merriweather', serif; /* Fuente de libro elegante */
    font-size: 18px;                   /* Tamaño de letra ideal para móvil */
    line-height: 1.8;                  /* Espaciado amplio entre líneas */
    color: #2c2c2c;                    /* Gris oscuro suave (menos cansado que el negro) */
    text-align: justify;               /* Bordes rectos y ordenados */
    padding: 25px 20px;                /* Aire a los lados y arriba */
    max-width: 800px;                  /* Evita que se estire demasiado en pantallas grandes */
    margin: 0 auto;                    /* Centra el texto en la pantalla */
    letter-spacing: 0.2px;             /* Un toque de elegancia entre letras */
}

/* Espaciado entre párrafos para que no se vea amontonado */
.contenido-capitulo p {
    margin-bottom: 1.5em;              /* Espacio generoso entre párrafos */
    text-indent: 1em;                  /* Sangría en la primera línea (estilo libro) */
}

/* Bloqueo de imágenes para evitar descargas (Tu código original) */
.contenido-capitulo img {
    pointer-events: none;
    -webkit-touch-callout: none;
}

/* --- CONFIGURACIÓN MAESTRA UNIFICADA --- */

/* --- AJUSTE DE ESCALA TOTAL: QUE TODO QUEPA EN MÓVIL --- */


/* --- 1. ESTRUCTURA MAESTRA DE GRIDS --- */
#novels-container,
.novel-grid,
#grid-generos,
.generos-grid-container,
#library-container,
.novel-list-web {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* --- 2. HEADER Y LOGO --- */
.header-content, #main-header, header {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 5px 8px !important;
    box-sizing: border-box !important;
}

input[type="search"], #buscar-input {
    max-width: 100px !important;
    height: 32px !important;
    font-size: 0.8rem !important;
    flex-grow: 1 !important;
}

.header-right, .user-logo, #user-profile, .user-profile-icon {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    width: 35px !important;
    height: 35px !important;
    margin-left: 5px !important;
}

/* --- 3. ESCRITORIO (WEB) --- */
@media (min-width: 769px) {
    #novels-container, .novel-grid, #grid-generos, .generos-grid-container, #library-container, .novel-list-web {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 20px !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
    input[type="search"], #buscar-input {
        max-width: 300px !important;
    }
}

/* --- 4. GÉNEROS Y ESTILOS DE TARJETA --- */
.btn-genero-item {
    display: flex !important; align-items: center !important; justify-content: center !important;
    width: 100% !important; height: 35px !important; border-radius: 20px !important;
    font-size: 0.7rem !important; font-weight: bold !important; text-transform: capitalize !important;
    border: 1px solid rgba(0,0,0,0.1) !important; white-space: nowrap !important; padding: 0 5px !important;
}

.generos-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
    padding: 15px !important;
}

/* --- 5. MÓVIL (BUSCADOR GRANDE Y SIN BARRA BLANCA) --- */
@media (max-width: 768px) {
    .header-content { 
        display: flex !important; 
        flex-direction: row !important; 
        align-items: center !important; 
        justify-content: space-between !important; 
        width: 100% !important; 
        max-width: 100% !important; 
        padding: 5px 12px !important; 
        gap: 10px !important; 
        height: 60px !important;
        box-sizing: border-box !important;
    }
    
    .header-left { 
        flex: 0 0 auto !important; 
        display: flex !important; 
        align-items: center !important; 
    }
    
    #logo-link { display: flex !important; white-space: nowrap !important; }
    .logo-ros, .logo-novel { font-size: 0.9rem !important; font-weight: bold !important; }

    .header-right {
        flex: 1 !important; 
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }

    .search-container { 
        display: flex !important; 
        flex: 1 !important; 
        width: 100% !important; 
        min-width: 0 !important; 
        background: #f1f1f1 !important; 
        border-radius: 20px !important; 
        padding: 0 12px !important; 
        height: 38px !important; 
        align-items: center !important;
    }

    #searchInput { 
        flex: 1 !important; 
        width: 100% !important; 
        border: none !important; 
        background: transparent !important; 
        outline: none !important;
        font-size: 14px !important;
        padding: 0 !important;
    }

    #main-header.secundario { display: none !important; }

    /* Unimos el ID y la Clase para que no haya escape */
#btn-back-mobile, .btn-back-style {
    display: none !important; /* <--- Agregamos !important para que nada lo muestre antes de tiempo */
    position: relative !important; 
    width: 100% !important;
    background: #ffffff !important;
    border: none !important;
    border-bottom: 1px solid #f1f1f1 !important; 
    padding: 15px 20px !important;
    align-items: center !important;
    gap: 10px !important;
    font-weight: 700 !important; 
    color: #333 !important;
    z-index: 1000 !important;
}

    .main-nav, .login-header-container, #header-profile-avatar { display: none !important; }
    footer, .footer, .footer-content, .contact-section, .footer-bottom { display: none !important; }
    
    main, #page-container, #main-app { 
        padding-top: 0 !important; 
        margin-top: 0 !important; 
    }

    .novel-card img, #library-container img { 
        width: 100% !important; 
        height: 110px !important; 
        object-fit: cover !important; 
        border-radius: 8px !important; 
    }

    .mobile-nav { 
        display: flex !important; 
        position: fixed !important; 
        bottom: 0 !important; 
        left: 0 !important; 
        width: 100% !important; 
        background: #fff !important; 
        padding: 10px 0 !important; 
        border-top: 1px solid #eee !important; 
        z-index: 9999 !important; 
        box-shadow: 0 -2px 10px rgba(0,0,0,0.03) !important;
    }
    
    .nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; }
    .nav-item i { color: #6A0DAD !important; font-size: 1.2rem !important; }
    .nav-item span { font-size: 0.65rem !important; color: #555 !important; }
}

/* --- 6. CORRECCIÓN ESCRITORIO --- */
@media (min-width: 769px) {
    #main-header .header-content { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 10px 40px !important; width: 100% !important; box-sizing: border-box !important; }
    #main-header .main-nav { display: flex !important; flex-direction: row !important; gap: 25px !important; margin-left: 20px !important; }
    #main-header .header-right { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 20px !important; flex-shrink: 0 !important; }
    #main-header .search-container { width: 280px !important; display: flex !important; align-items: center !important; background: #f1f1f1 !important; border-radius: 20px !important; padding: 5px 15px !important; flex-shrink: 0 !important; }
    #header-profile-avatar { display: block !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; object-fit: cover !important; visibility: visible !important; }
    .nav-btn span { color: #D8BFD8 !important; }
    .btn-back-style { display: none !important; }
}

/* Asegura que el contenedor no tenga desbordamientos */
.novel-landing-container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 15px;
    box-sizing: border-box;
}

/* Fuerza el ancho completo para los comentarios */
#seccion-ranking-novela {
    width: 100%;
    box-sizing: border-box;
    margin-top: 40px;
    padding: 20px;
}

/* Ajuste móvil para expansión total */
@media (max-width: 600px) {
    .landing-header { flex-direction: column; align-items: center; }
    .landing-info { width: 100%; text-align: center; }
    
    #seccion-ranking-novela {
        margin-left: -15px !important;
        margin-right: -15px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: calc(100% + 30px) !important;
        background-color: #ffffff;
    }

    #box-calificar { 
        width: 100% !important; 
        padding: 15px !important; 
    }
    
    #input-resena {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* --- CORRECCIÓN PARA LA LANDING PAGE EN MÓVIL --- */
@media (max-width: 600px) {
    .landing-container, .novel-detail-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .landing-cover {
        width: 100% !important;
        max-width: 200px !important;
        margin: 0 auto 1rem auto !important;
        display: block;
    }

    .novel-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: center !important;
    }
}

/* ============================================================
    BLOQUE DE REPARACIÓN FINAL (MÓVIL Y ESCRITORIO)
   ============================================================ */

@media (max-width: 899px) {
    /* 1. ESPACIO LATERAL: Ganamos espacio eliminando paddings excesivos */
    #page-container {
        padding: 0.8rem !important; 
        padding-bottom: 80px !important;
        width: 100% !important;
    }

    #main-app {
        box-shadow: none !important;
        width: 100% !important;
    }

    /* 2. GRID UNIVERSAL (Tendencias, Biblioteca, Géneros) */
    #novels-container, .novel-grid, #grid-generos, 
    .generos-grid-container, #library-container, .novel-list-web {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 5px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* 3. AJUSTE DE PORTADAS */
    .novel-card img, .novel-item img, #library-container img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* 4. TEXTOS: Evita desborde horizontal */
    .novel-title-lib, .novel-item h4, .novel-card h4 {
        font-size: 0.75rem !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        display: block !important;
        width: 100% !important;
    }

    /* 5. LANDING PAGE Y BOTONES (CORREGIDO: Despegado de la derecha) */
    .landing-container, .novel-detail-wrapper, .author-novel-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-left: 15px !important;  /* Separa del borde izquierdo */
        padding-right: 15px !important; /* Separa del borde derecho */
        box-sizing: border-box !important;
    }

    .novel-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        padding: 0 10px !important; /* Margen interno extra para los botones */
        box-sizing: border-box !important;
    }

    /* Asegura que los botones no toquen los bordes */
    .novel-actions button, .novel-actions .btn-primary, .novel-actions .btn-secondary {
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/* 6. PROTECCIÓN EXTRA PARA FORMULARIOS */
input[type="text"], input[type="search"], select, textarea {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Estilos para la flecha de capítulos */
.flecha-icono {
    transition: transform 0.3s ease;
    display: inline-block;
    cursor: pointer;
    color: #ccc; /* El gris suave de la imagen 2 */
}
/* Opcional: Color especial cuando la novela esté terminada */
.status-completado {
    color: #28a745 !important; /* Color verde */
    font-weight: bold;
}

.badge-author {
    background-color: #fff4e6; /* Naranja muy clarito */
    color: #fd7e14; /* Naranja fuerte */
    font-size: 0.75rem;
    padding: 2px 10px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 800;
    text-transform: uppercase;
    border: 1px solid #ffe8cc;
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.comment-actions {
    display: flex;
    gap: 15px;
    margin-top: 10px;
    color: #999;
    font-size: 0.8rem;
}

.action-item {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: 0.2s;
}

.action-item:hover {
    color: #ff4d6d;
}

.liked {
    color: #ff4d6d !important;
    transform: scale(1.2);
    display: inline-block;
}

/* Estilo para cuando la etiqueta está seleccionada */
.tag-btn.selected {
    background-color: #7b2cbf !important; /* El morado de Rosnovel */
    color: white !important;
    border-color: #7b2cbf !important;
    transform: scale(1.05); /* Un poquito más grande para resaltar */
}

.btn-edit {
    background-color: #f0f0f0;
    border: 1px solid #7b2cbf;
    color: #7b2cbf;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.btn-edit:hover {
    background-color: #7b2cbf;
    color: white;
}

/* =====================================================================
    🎁 NUEVO BANNER PREMIUM DE BENEFICIOS (ESTILO APP) - Versión 20
   ===================================================================== */

.author-benefits-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff1f4; /* Rosado pastel muy suave */
    border-radius: 12px;
    padding: 15px 20px;
    margin: 15px 20px 25px 20px; 
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(255, 77, 109, 0.08); 
    transition: all 0.3s ease;
    box-sizing: border-box;
    border: 1px solid #ffe0e6; 
}

/* Efecto al tocar/clicar */
.author-benefits-card:active {
    transform: scale(0.97);
    background-color: #ffe4e9;
}

.benefits-card-content {
    display: flex;
    align-items: center;
    gap: 15px;
}

.gift-icon-container {
    font-size: 26px;
}

.benefits-card-text {
    display: flex;
    flex-direction: column;
}

.benefits-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #ff4d6d; 
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.benefits-subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: #666;
    margin-top: 2px;
}

.arrow-icon {
    color: #ffb3c1;
    font-size: 16px;
}

/* --- 🎢 MODAL CORREGIDO CON SCROLL (Para 3 o más imágenes) --- */
.benefits-modal {
    display: none;
    position: fixed;
    z-index: 100000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95);
    /* Permitir scroll vertical si las fotos son largas */
    overflow-y: auto; 
    -webkit-overflow-scrolling: touch;
}

.modal-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 60px 0; /* Espacio para que la primera y última foto no peguen al borde */
    box-sizing: border-box;
}

/* Contenedor para que las imágenes no se desparramen en PC */
.modal-content-wrapper .img-group {
    width: 90%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Pequeño espacio entre imágenes */
}

.modal-content-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: block;
    object-fit: contain;
}

.close-modal {
    position: fixed; /* Fija arriba para que no se pierda al bajar */
    top: 20px;
    right: 20px;
    color: white;
    font-size: 45px;
    cursor: pointer;
    z-index: 100001;
    background: rgba(0,0,0,0.4);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* AJUSTE EXTRA: Dar aire al título inferior */
#author-center-page h2 {
    margin-top: 20px !important;
}

/* =====================================================================
    👤 PERFIL PROFESIONAL (CÓDIGO 21 - CORREGIDO)
   ===================================================================== */

/* Fondo degradado superior */
.profile-header-gradient {
    background: linear-gradient(180deg, #fff1f4 0%, #ffffff 100%);
    padding: 20px 20px 30px 20px;
    border-radius: 0 0 25px 25px;
    position: relative; /* Contexto para elementos hijos */
}

.header-action-icons {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 5px;
    /* CORRECCIÓN: Elevamos los iconos para que reciban el clic */
    position: relative;
    z-index: 10;
}

.settings-icon { 
    font-size: 20px; 
    color: #8e8e93; 
    cursor: pointer;
    /* MEJORA: Aumentamos el área de clic sin mover el icono */
    padding: 10px;
    margin: -10px;
}

/* Información de Usuario */
.user-main-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    position: relative;
    z-index: 5;
}

.avatar-container img {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.user-text-info { display: flex; flex-direction: column; flex: 1; }

#profile-name-display {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #333;
}

/* El ID Copiable */
.id-container {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f0f0f0;
    padding: 3px 12px;
    border-radius: 20px;
    width: fit-content;
    margin-top: 5px;
    cursor: pointer;
    position: relative;
    z-index: 6;
}

.id-label, #user-id-number { font-size: 11px; color: #888; font-weight: 600; }

.copy-icon { font-size: 11px; color: #bbb; }

.edit-profile-arrow { 
    color: #ccc; 
    font-size: 14px; 
    cursor: pointer;
    padding: 10px;
}

/* Contadores de Seguidores */
.user-stats-container {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid rgba(0,0,0,0.03);
    padding-top: 15px;
}

.stat-item { display: flex; flex-direction: column; align-items: center; flex: 1; }

.stat-number { font-weight: 700; font-size: 18px; color: #333; }

.stat-label { font-size: 11px; color: #999; }

.stat-divider { width: 1px; height: 20px; background: #eee; }

/* Ajuste del menú original */
.profile-menu {
    list-style: none;
    padding: 10px 20px;
    margin: 0;
}

.profile-menu li a {
    display: block;
    padding: 15px 0;
    text-decoration: none;
    color: #333;
    font-size: 15px;
    border-bottom: 1px solid #f9f9f9;
}

/* Botón de cerrar sesión elegante */
.btn-logout-perfil {
    background: none;
    border: 1px solid #ddd;
    color: #888;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    margin-top: 8px;
    cursor: pointer;
    width: fit-content;
}

/* Tarjeta de Google */
.google-login-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: white;
    border: 1px solid #eee;
    padding: 12px;
    border-radius: 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.google-login-card img { width: 20px; }
.google-login-card span { font-size: 14px; font-weight: 600; color: #555; }

/* Color para botones de etiquetas seleccionados */
.tag-btn.active, 
.estilo-btn.active, 
.personaje-btn.active {
    background-color: #834abd !important; /* Morado */
    color: #ffffff !important;           /* Texto blanco */
    border-color: #834abd !important;    /* Borde morado */
    transform: scale(1.05);              /* Un pequeño efecto de resaltado */
    transition: all 0.3s ease;
}

/* Estilo para la fila de capítulos en la Landing */
.capitulo-fila {
    transition: background 0.2s;
    border-radius: 8px;
    margin-bottom: 5px;
}

.capitulo-fila:hover {
    background-color: #f8f9fa;
}

/* Estilo cuando el capítulo está bloqueado */
.fila-bloqueada {
    background-color: #f1f1f1 !important;
    cursor: not-allowed;
    opacity: 0.7;
}

.fila-bloqueada span {
    color: #888;
}