/* Estilos Generales para Todopeques */

/* Cuerpo y Tipografía Base */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* bg-gray-100 */
    color: #374151; /* text-gray-700 por defecto */
    line-height: 1.6;
}

/* Encabezado */
.header-bg {
    background-color: #2c3e50; /* Color oscuro para el encabezado */
}
.site-logo {
    height: 50px; /* Altura del logo, ajustable */
    width: auto;
}
.menu-item {
    padding: 0.5rem 1rem;
    color: #e0e0e0; /* Color de texto del menú */
    text-decoration: none;
    border-radius: 0.375rem; /* rounded-md */
    transition: color 0.3s ease, background-color 0.3s ease;
}
.menu-item:hover {
    color: #ffffff; /* Color de texto del menú al pasar el ratón */
    background-color: #34495e; /* Color de fondo del menú al pasar el ratón */
}

/* Menú Móvil */
.mobile-menu {
    display: none; /* Oculto por defecto */
    background-color: #374151; /* bg-gray-800 */
}
.mobile-menu.open {
    display: block; /* Se muestra cuando la clase 'open' está presente */
}

/* Barra de Búsqueda del Encabezado */
.search-icon-btn {
    background-color: transparent;
    border: none;
    color: white;
    padding: 0.5rem;
}
input[type="search"].header-search-input {
    background-color: #4b5563; /* bg-gray-700 */
    color: white;
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border-radius: 0.375rem; /* rounded-md */
    font-size: 0.875rem; /* text-sm */
}
input[type="search"].header-search-input::placeholder {
    color: #9ca3af; /* placeholder-gray-400 */
}
input[type="search"].header-search-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px #60a5fa; /* ring-2 focus:ring-blue-400 */
}

/* Migas de Pan (Breadcrumbs) */
.breadcrumb a {
    color: #3b82f6; /* text-blue-500 */
    text-decoration: none;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb span {
    color: #6b7280; /* text-gray-500 */
}

/* Contenido Principal y Secciones */
.content-section h1 {
    font-size: 2.25rem; /* text-3xl o text-4xl */
    font-weight: 700; /* font-bold */
    color: #1f2937; /* text-gray-800 */
    margin-bottom: 1.5rem; /* mb-6 */
}
.content-section h2 {
    font-size: 1.75rem; /* Ajustable, ej: text-2xl */
    font-weight: 600; /* font-semibold */
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    color: #1f2937; /* text-gray-800 */
}
.content-section h3 {
    font-size: 1.25rem; /* text-xl */
    font-weight: 600; /* font-semibold */
    margin-top: 1rem;
    margin-bottom: 0.75rem;
    color: #374151; /* text-gray-700 */
}
.content-section p {
    margin-bottom: 1rem;
    line-height: 1.7; /* Consistente con Tailwind prose */
    color: #4b5563; /* text-gray-600 o text-gray-700 */
}
.content-section ul,
.content-section ol {
    margin-left: 1.5rem;
    margin-bottom: 1rem;
    list-style-position: outside;
}
.content-section ul li {
    list-style-type: disc;
    margin-bottom: 0.5rem;
}
.content-section ol li {
    list-style-type: decimal;
    margin-bottom: 0.5rem;
}
.content-section blockquote {
    border-left: 4px solid #3b82f6; /* text-blue-500 */
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6b7280; /* text-gray-500 */
}

/* Estilos Específicos para Artículos */
.article-meta span {
    margin-right: 1rem;
    color: #6b7280; /* text-gray-500 */
    font-size: 0.875rem; /* text-sm */
}
.article-meta i {
    margin-right: 0.25rem;
}

/* Etiquetas (Tags) - Estilo base, los colores pueden variar */
.tag, .tag-article {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px; /* rounded-full */
    font-size: 0.75rem; /* text-xs o text-sm */
    font-weight: 500; /* font-medium */
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

/* Ejemplo de tag específico (puedes añadir más o usar Tailwind directamente en HTML) */
.tag-juegos {
    background-color: #E1F5FE; /* Color primario para etiquetas de juegos */
    color: #0277BD;
}
.tag-consejos {
    background-color: #DBEAFE; /* Ejemplo para consejos */
    color: #1E40AF;
}
.tag-alimentacion {
    background-color: #FFF3E0; /* Ejemplo para alimentación */
    color: #BF360C;
}
.tag-salud {
    background-color: #E0F2F1; /* Turquesa muy claro */
    color: #00796B; /* Turquesa oscuro */
}
.tag-educacion {
    background-color: #E3F2FD; /* Azul cielo muy claro */
    color: #1565C0; /* Azul oscuro */
}
.tag-sueno {
    background-color: #E8EAF6; /* Azul lavanda muy claro */
    color: #303F9F; /* Azul índigo oscuro */
}
.tag-analisis {
    background-color: #FCE4EC; /* Rosa muy claro */
    color: #AD1457; /* Rosa oscuro */
}
.tag-compras {
    background-color: #FFF9C4; /* Amarillo muy pálido */
    color: #F57F17; /* Amarillo oscuro/naranja */
}
.tag-embarazo {
    background-color: #FCE4EC; /* Rosa muy pálido, similar a Análisis pero podemos variar */
    color: #C2185B; /* Rosa oscuro */
}
.tag-desarrollo {
    background-color: #DCEDC8; /* Verde muy claro */
    color: #558B2F; /* Verde oscuro */
}
.tag-consejos {
    background-color: #F3E5F5; /* Un color lavanda suave, de apoyo */
    color: #6A1B9A; /* Un púrpura oscuro para el título */
}

/* Tarjetas de Artículo (Homepage y Relacionados) */
.article-card {
    background-color: white;
    border-radius: 0.5rem; /* rounded-lg */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
}
.article-card img, .related-article-card img {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}
.related-article-card:hover img {
    transform: scale(1.05);
}

/* Pie de Página */
.footer-bg {
    background-color: #1f2937; /* Color oscuro para el pie de página */
    color: #d1d5db; /* text-gray-300 */
}
.footer-bg h3, .footer-bg h4 {
    color: white;
    margin-bottom: 0.75rem; /* mb-3 */
}
.footer-bg a {
    color: #9ca3af; /* text-gray-400 */
    text-decoration: none;
}
.footer-bg a:hover {
    color: #3b82f6; /* text-blue-400 o text-blue-500 */
}
.footer-bg .social-icons a {
    color: #9ca3af; /* text-gray-400 */
}
.footer-bg .social-icons a:hover {
    color: white;
}

/* Formularios (ej. Contacto, Comentarios) */
.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151; /* text-gray-700 */
}
.form-input,
textarea.form-input {
    border: 1px solid #D1D5DB; /* gray-300 */
    padding: 0.75rem 1rem;
    border-radius: 0.375rem; /* rounded-md */
    width: 100%;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-size: 0.875rem; /* sm:text-sm */
}
.form-input:focus,
textarea.form-input:focus {
    outline: none;
    border-color: #3B82F6; /* blue-500 */
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.4); /* focus:ring-blue-500 */
}
.submit-button {
    background-color: #3B82F6; /* blue-500 o blue-600 */
    color: white;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem; /* rounded-md */
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.submit-button:hover {
    background-color: #2563EB; /* blue-600 o blue-700 */
}

/* Estilos para FAQ (Acordeón) */
.faq-item {
    border-bottom: 1px solid #e5e7eb; /* gray-200 */
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 1rem 0;
    font-weight: 600;
    color: #374151; /* gray-700 */
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease-out;
    padding: 0 0; /* No padding when closed */
    color: #555;
    line-height: 1.6;
}
.faq-answer.open {
    max-height: 500px; /* Adjust as needed for content */
    padding: 1rem 0; /* Padding when open */
}
.faq-question .icon {
    transition: transform 0.3s ease;
    font-size: 0.8em; /* Make icon slightly smaller */
}
.faq-question .icon.open {
    transform: rotate(45deg);
}

/* Insignia "NUEVO" */
.nuevo-badge {
    background-color: #f39c12; /* Un color naranja o amarillo para destacar */
    color: white;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: bold;
    border-radius: 0.25rem;
    margin-left: 0.5rem;
}

/* Utilidad para lectores de pantalla (accesibilidad) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Sitemap */
.sitemap-section h2 { font-size: 1.5rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #333; border-bottom: 1px solid #eee; padding-bottom: 0.5rem;}
.sitemap-section ul { margin-left: 1rem; list-style: none; }
.sitemap-section ul li { margin-bottom: 0.5rem; }
.sitemap-section ul li a { color: #4A90E2; text-decoration: none; }
.sitemap-section ul li a:hover { text-decoration: underline; }
.sitemap-section ul ul { margin-left: 1.5rem; margin-top: 0.5rem;}

/* Estilos adicionales para el menú lateral y la superposición de búsqueda */
.main-menu-drawer {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%); /* Escondido por defecto a la izquierda */
}
.main-menu-drawer.open {
    transform: translateX(0);
}
.search-overlay {
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}
.search-overlay.open {
    opacity: 1;
    visibility: visible;
}
.site-logo-header { /* Clase específica para el logo en la cabecera principal */
     height: 40px; /* Ajusta según necesites */
}
@media (min-width: 768px) { /* md breakpoint */
    .site-logo-header {
         height: 50px;
    }
}

/* Estilos para imagenes */
.img-news {
    text-align: center;
    display: block;
    width: auto;
    height: 512px;
    margin: 0 auto; /* Esto lo centra */
}

 /* Estilos para la sección de libros recomendados */
 .recommended-books-section {
     margin-top: 3rem; /* Ajusta según sea necesario */
     padding-top: 2rem;
     border-top: 1px solid #e5e7eb; /* gray-200 */
 }
 .book-card {
     display: flex;
     flex-direction: column; /* Apilado en móvil */
     gap: 1rem;
     background-color: #fff;
     border-radius: 0.5rem; /* rounded-lg */
     padding: 1.5rem;
     box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); /* shadow-md */
     margin-bottom: 1.5rem;
 }
 @media (min-width: 768px) { /* md breakpoint */
     .book-card {
         flex-direction: row; /* Lado a lado en pantallas más grandes */
         align-items: flex-start;
     }
 }
 .book-cover img {
     width: 120px; /* Ancho fijo para la portada */
     height: auto;
     border-radius: 0.25rem; /* rounded-sm */
     object-fit: cover;
     margin: 0 auto 1rem auto; /* Centrado en móvil */
 }
 @media (min-width: 768px) {
     .book-cover img {
         margin: 0; /* Alineado a la izquierda en pantallas más grandes */
     }
 }
 .book-details {
     flex: 1;
 }
 .book-title {
     font-size: 1.25rem; /* text-xl */
     font-weight: 600; /* font-semibold */
     color: #1f2937; /* text-gray-800 */
     margin-bottom: 0.25rem;
 }
 .book-author {
     font-size: 0.875rem; /* text-sm */
     color: #6b7280; /* text-gray-500 */
     margin-bottom: 0.75rem;
 }
 .book-description {
     font-size: 0.875rem; /* text-sm */
     color: #4b5563; /* text-gray-600 */
     line-height: 1.6;
     margin-bottom: 1rem;
 }
 .amazon-button {
     display: inline-block;
     background-color: #FFC107; /* Amarillo Amazon */
     color: #111;
     padding: 0.6rem 1.2rem;
     border-radius: 0.375rem; /* rounded-md */
     text-decoration: none;
     font-weight: 600; /* font-semibold */
     font-size: 0.875rem; /* text-sm */
     transition: background-color 0.2s ease;
     border: 1px solid #FDB813;
 }
 .amazon-button:hover {
     background-color: #FFB300; /* Amarillo más oscuro al pasar el ratón */
 }
 .amazon-button i {
     margin-right: 0.5rem;
 }

/* Estilos específicos para la página de categoría si son necesarios */
.category-header-juguetes {
    background-color: #E1F5FE; /* Un color azul claro, lúdico */
    border-bottom: 3px solid #4FC3F7; /* Un acento azul más brillante */
}
.category-title-juguetes {
    color: #0277BD; /* Un azul oscuro para el título */
}
.category-header-alimentacion {
    background-color: #FFF3E0; /* Un color suave relacionado con la alimentación, ej. melocotón claro */
    border-bottom: 3px solid #FFB74D; /* Un acento más fuerte */
}
.category-title-alimentacion {
    color: #BF360C; /* Un color oscuro y cálido para el título */
}
.category-header-salud {
    background-color: #E0F2F1; /* Turquesa muy claro */
    border-bottom: 3px solid #4DB6AC; /* Turquesa medio */
}
.category-title-salud {
    color: #00796B; /* Turquesa oscuro */
}
.category-header-educacion {
    background-color: #E3F2FD; /* Azul cielo muy claro */
    border-bottom: 3px solid #64B5F6; /* Azul cielo medio */
}
.category-title-educacion {
    color: #1565C0; /* Azul oscuro */
}
.category-header-sueno {
    background-color: #E8EAF6; /* Azul lavanda muy claro */
    border-bottom: 3px solid #7986CB; /* Azul lavanda medio */
}
.category-title-sueno {
    color: #303F9F; /* Azul índigo oscuro */
}
.category-header-analisis {
    background-color: #FCE4EC; /* Rosa muy claro */
    border-bottom: 3px solid #F06292; /* Rosa medio */
}
.category-title-analisis {
    color: #AD1457; /* Rosa oscuro */
}
.category-header-guias {
    background-color: #FFF9C4; /* Amarillo muy pálido */
    border-bottom: 3px solid #FFEE58; /* Amarillo medio */
}
.category-title-guias {
    color: #F57F17; /* Amarillo oscuro/naranja */
}
.category-header-embarazo {
    background-color: #FCE4EC; /* Rosa muy pálido, similar a Análisis pero podemos variar */
    border-bottom: 3px solid #F48FB1; /* Rosa medio */
}
.category-title-embarazo {
    color: #C2185B; /* Rosa oscuro */
}
.category-header-desarrollo {
    background-color: #DCEDC8; /* Verde muy claro */
    border-bottom: 3px solid #AED581; /* Verde medio */
}
.category-title-desarrollo {
    color: #558B2F; /* Verde oscuro */
}
.category-header-novedades {
    background-color: #E8F5E9; /* Verde muy, muy claro */
    border-bottom: 3px solid #81C784; /* Verde claro/medio */
}
.category-title-novedades {
    color: #2E7D32; /* Verde oscuro */
}
.category-header-consejos {
    background-color: #F3E5F5; /* Un color lavanda suave, de apoyo */
    border-bottom: 3px solid #AB47BC; /* Un acento púrpura más vibrante */
}
.category-title-consejos {
    color: #6A1B9A; /* Un púrpura oscuro para el título */
}

/* Estilo para la fecha en las tarjetas de noticias */
.news-item-date {
    font-size: 0.8rem;
    color: #757575; /* Gris */
}

/* Estilo para la búsqueda de noticias */
.search-results-header {
    background-color: #F1F8E9; /* Verde muy, muy pálido */
    border-bottom: 3px solid #AED581; /* Verde claro */
}
.search-results-title {
    color: #33691E; /* Verde oscuro */
}
.news-item-date { /* Reutilizado de style.css o definido aquí si es necesario */
    font-size: 0.8rem;
    color: #757575;
}
.highlight { /* Para resaltar el término de búsqueda */
    background-color: yellow;
    font-weight: bold;
}

/* Estilos para la paginación */
.pagination-link {
    padding: 0.5rem 0.75rem;
    margin-left: -1px; /* Para solapar bordes */
    line-height: 1.25;
    color: #3B82F6; /* blue-500 */
    background-color: white;
    border: 1px solid #D1D5DB; /* gray-300 */
    transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination-link:hover {
    background-color: #EFF6FF; /* blue-50 */
    color: #2563EB; /* blue-600 */
}
.pagination-link.active {
    z-index: 10;
    color: white;
    background-color: #3B82F6; /* blue-500 */
    border-color: #3B82F6; /* blue-500 */
}
.pagination-link.disabled {
    color: #9CA3AF; /* gray-400 */
    pointer-events: none;
    background-color: #F9FAFB; /* gray-50 */
}