/*
 * The CSS in this style tag is based off of Bear Blog's default CSS.
 * https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
 * License MIT: https://github.com/HermanMartinus/bearblog/blob/master/LICENSE.md
 */

/* public/global.css */

:root {
    /* Tus colores principales */
    --color-turquesa-principal: #3fb4eb; /* Un buen tono de azul turquesa */
    --color-blanco: rgb(255, 255, 255); /* Blanco con 55% de opacidad (para fondos de secciones) */
    --color-rojo-acento: #FF0000; /* Rojo puro para acentos y la 'C' del logo */

    /* Colores de texto (ajusta según el fondo) */
    /* --color-texto-claro: var(--color-blanco); */ /* Esta variable ya no se usará directamente para el texto principal */
    --color-texto-oscuro: #333333; /* Un gris oscuro para texto general si el fondo es claro (en secciones blancas) */

    /* --- ¡NUEVA VARIABLE DE COLOR PARA TEXTO PRINCIPAL! --- */
    --color-azul-rey-resaltado: #ffffff; /* Azul Rey vibrante para texto sobre fondo turquesa */
    /* --- FIN NUEVA VARIABLE --- */

    /* Otros colores de la plantilla que quizás quieras ajustar para que coincidan */
    --astro-gray-400: #fff2f2;
    --astro-gray-600: #666666;
    --astro-gray-700: #333333;
    --astro-gray-900: #111111;
    --astro-code-bg: #f5f5f5; /* Color de fondo para bloques de código */
}

/* Estilos generales del cuerpo */
html { /* Aplicamos al html para que ocupe toda la ventana */
    background-color: var(--color-turquesa-principal); /* Fondo principal turquesa */
    overflow-x: hidden; /* Evita el scroll horizontal por las curvas */
}

body {
    font-family: system-ui, sans-serif;
    color: var(--color-azul-rey-resaltado); /* <-- ¡CAMBIO CLAVE AQUÍ! Texto principal en Azul Rey */
    margin: 0;
    line-height: 1.6;
    min-height: 100vh; /* Asegura que el body ocupe toda la altura */
    display: flex;
    flex-direction: column; /* Para que el footer se quede abajo */
    position: relative; /* Necesario para las curvas y la marca de agua */
}

/* --- ¡CORRECCIÓN DE SINTAXIS! ESTA REGLA VA FUERA DEL BODY --- */
.watermark-logo {
    position: fixed; /* Lo fija en la ventana, no hace scroll */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra el logo */
    width: 80vw; /* Ajusta el tamaño de la marca de agua */
    height: 80vw;
    max-width: 800px; /* Tamaño máximo para pantallas grandes */
    max-height: 800px;
    background-image: url('/logo-scj.png'); /* Asegúrate de la EXTENSIÓN correcta (.png o .svg) */
    background-repeat: no-repeat;
    background-position: center center; /* Centra el logo */
    background-size: contain; /* Ajusta el tamaño para que quepa completamente */
    opacity: 0.15; /* La opacidad sutil que quieres */
    pointer-events: none; /* Crucial: permite hacer clic a través del logo */
    z-index: -2; /* Envía el logo aún más al fondo que las curvas */
}
/* --- FIN CORRECCIÓN DE SINTAXIS --- */

/* Puedes empezar a aplicar estos colores a otros elementos */
a {
    color: var(--color-blanco); /* Enlaces en blanco por defecto */
    text-decoration: none; /* Quita el subrayado de los enlaces */
}

a:hover {
    color: var(--color-rojo-acento); /* Un efecto hover rojo para los enlaces */
}

/* Estilos para las líneas curvas rojas */
body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200px; /* Altura de la curva superior */
    background: linear-gradient(to right, var(--color-rojo-acento), transparent);
    clip-path: ellipse(70% 30% at 50% 0%); /* Una curva elíptica en la parte superior */
    z-index: -1; /* Envía la curva detrás del contenido */
}

body::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 150px; /* Altura de la curva inferior */
    background: linear-gradient(to left, var(--color-rojo-acento), transparent);
    clip-path: ellipse(70% 30% at 50% 100%); /* Una curva elíptica en la parte inferior */
    z-index: -1;
}

/* Asegúrate de que el contenido principal tenga suficiente padding para no ser cubierto por las curvas */
main {
    flex-grow: 1; /* Hace que el main ocupe el espacio disponible y empuje el footer hacia abajo */
    padding-top: 50px; /* Espacio para la curva superior */
    padding-bottom: 50px; /* Espacio para la curva inferior */
    position: relative;
    z-index: 0;
    max-width: 1200px; /* Ancho máximo para centrar el contenido */
    margin: 0 auto; /* Centra el contenido principal */
    padding-left: 1rem; /* Pequeño padding lateral para móviles */
    padding-right: 1rem;
}

/* Eliminar estilos de la plantilla que no necesitamos para nuestro diseño */
.link-button {
    /* Si ves algo así en tu Header, lo quitarás o lo sobrescribirás */
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: inherit;
    color: inherit;
    cursor: pointer;
}

/* Estilos para secciones de contenido (fondo blanco transparente) */
section {
    background-color: var(--color-blanco); /* Fondo blanco transparente */
    color: var(--color-texto-oscuro); /* Texto oscuro en secciones claras (para contraste) */
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Ajustes para texto en secciones blancas si es necesario */
section h1, section h2, section h3 {
    color: var(--color-rojo-acento); /* Títulos en rojo en secciones blancas */
}

section a {
    color: var(--color-turquesa-principal);
    font-weight: bold;
    text-decoration: underline;
}

section a:hover {
    color: var(--color-rojo-acento);
}

/* Estilos para los encabezados generales (fuera de las secciones blancas) */
h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    line-height: 1.2;
    /* Por defecto, estos tomarán el color del body (Azul Rey resaltado) */
}

h1 {
    font-size: 2.8em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

/* Media queries para responsividad */
@media (max-width: 768px) {
    main {
        padding: 1rem;
    }

    h1 {
        font-size: 2.2em;
    }

    h2 {
        font-size: 1.7em;
    }

    h3 {
        font-size: 1.3em;
    }
}