/*
 * Archivo de Estilos Globales para SaluVita Blog
 * ---------------------------------------------
 * Autor: Tu Nombre / SaluVita
 * Descripción: Este archivo contiene estilos base y personalizaciones 
 * para el contenido del blog que complementan a Tailwind CSS.
 */

/* 1. Importación de Fuentes y Estilos Base
-------------------------------------------------- */

/* Importamos la fuente principal desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f9fafb; /* Tailwind gray-50, un fondo muy sutil */
    color: #374151; /* Tailwind gray-700, para el texto principal */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* 2. Estilos para el Contenido del Post (Tailwind Prose Overrides)
------------------------------------------------------------------- */
/*
 * Estos estilos se aplican al contenedor <article class="prose">.
 * Permiten que cualquier contenido HTML que cargues desde tus archivos
 * de post se vea hermoso y coherente con la marca SaluVita,
 * sin tener que añadir clases de Tailwind a cada párrafo o título.
 */

.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: #14532D; /* Verde oscuro SaluVita para todos los encabezados */
    font-weight: 700;
}

.prose a {
    color: #16a34a; /* Verde principal SaluVita para enlaces (Tailwind green-600) */
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease-in-out;
}

.prose a:hover {
    color: #14532D; /* Verde oscuro al pasar el cursor */
    text-decoration: underline;
}

.prose strong,
.prose b {
    color: #1f2937; /* Tailwind gray-800, para un énfasis más fuerte */
    font-weight: 600;
}

.prose blockquote {
    border-left-color: #A7F3D0; /* Borde verde claro de la paleta SaluVita */
    color: #4b5563; /* Tailwind gray-600 */
    font-style: italic;
}

/* Estilo para los marcadores de las listas (viñetas y números) */
.prose ul>li::marker {
    color: #16a34a; /* Verde principal */
}

.prose ol>li::marker {
    color: #16a34a; /* Verde principal */
}

.prose code {
    background-color: #f3f4f6; /* Tailwind gray-100 */
    color: #1e40af; /* Tailwind blue-800 */
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
}

/*
  Nota sobre Estilos Interactivos:
  -------------------------------
  Los estilos para componentes muy específicos de un post (como las 'flip-cards'
  o la calculadora de la 'Guía de Fibra') es mejor mantenerlos dentro del
  archivo HTML de ese post (ya sea en una etiqueta <style> o cargados por su
  propio script). Esto mantiene cada post autocontenido y modular.
  Este archivo CSS es para los estilos que se aplican a TODO el blog.
*/