/* Incorpora los estilos del encabezado reutilizable de Agenda. */
@import url('../elementos/encabezado-agenda/encabezado-agenda.css');

/* Incorpora los estilos de la firma global. */
@import url('../elementos/firma/firma.css');


/* Carga Montserrat Regular para los textos generales de la interfaz. */
@font-face {
    font-family: 'Montserrat';
    src: url('../recursos/fuentes/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* Carga Montserrat Medium para textos con énfasis intermedio. */
@font-face {
    font-family: 'Montserrat';
    src: url('../recursos/fuentes/Montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}


/* Carga Montserrat SemiBold para elementos destacados de interfaz. */
@font-face {
    font-family: 'Montserrat';
    src: url('../recursos/fuentes/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* Carga Montserrat Bold para textos de mayor jerarquía visual. */
@font-face {
    font-family: 'Montserrat';
    src: url('../recursos/fuentes/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* Carga Cormorant Garamond Regular para títulos y elementos de marca. */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../recursos/fuentes/Cormorant_Garamond/CormorantGaramond-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}


/* Carga Cormorant Garamond SemiBold para títulos con mayor presencia visual. */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('../recursos/fuentes/Cormorant_Garamond/CormorantGaramond-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* Centraliza las variables visuales compartidas por todas las páginas de Agenda. */
:root {
    --fuente-interfaz: 'Montserrat', Arial, sans-serif;
    --fuente-marca: 'Cormorant Garamond', Georgia, serif;

    /* Identidad visual configurable del local. */
    --color-principal: #b85638;
    --color-principal-hover: #9f472e;
    --color-principal-suave: #f3ddd4;

    /* Base visual propia de Agenda. */
    --color-fondo: #eeeae5;
    --color-fondo-profundo: #e3ddd6;

    --color-superficie: #ffffff;
    --color-superficie-suave: #f8f5f1;
    --color-superficie-alternativa: #d8d0c8;
    --color-superficie-alternativa-hover: #ccc2b9;

    --color-texto: #20252b;
    --color-texto-secundario: #555d66;
    --color-texto-suave: #777e86;
    --color-texto-inverso: #ffffff;

    --color-borde: #d2cbc4;
    --color-borde-fuerte: #bdb3aa;

    --sombra-suave:
            0 6px 16px rgba(43, 36, 30, 0.08),
            0 2px 6px rgba(43, 36, 30, 0.05);

    --sombra-media:
            0 14px 30px rgba(43, 36, 30, 0.13),
            0 5px 12px rgba(43, 36, 30, 0.07);

    --sombra-elevada:
            0 22px 46px rgba(43, 36, 30, 0.17),
            0 8px 18px rgba(43, 36, 30, 0.09);

    --color-exito: #4f8c67;
    --color-advertencia: #c17b34;
    --color-error: #b94e4e;
    --color-informacion: #497fae;

    /* Paleta visual utilizada para diferenciar servicios. */
    --color-servicio-1: #4d86b8;
    --color-servicio-1-suave: #e4f0f8;

    --color-servicio-2: #4f8c67;
    --color-servicio-2-suave: #e5f1e9;

    --color-servicio-3: #8a65a8;
    --color-servicio-3-suave: #eee6f4;

    --color-servicio-4: #c9853e;
    --color-servicio-4-suave: #f6e9da;

    --color-servicio-5: #bb5f72;
    --color-servicio-5-suave: #f5e4e8;

    --color-servicio-6: #4f8f8a;
    --color-servicio-6-suave: #e2f0ee;
}


/* Hace que padding y bordes formen parte del tamaño declarado de todos los elementos. */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/*
    Define el documento como una superficie completa,
    sin márgenes ni restricciones laterales propias del navegador.
*/
html {
    margin: 0;
    padding: 0;

    width: 100%;
    min-width: 320px;

    min-height: 100%;
}


/*
    Controla la estructura general de todas las páginas de Agenda.

    El cuerpo ocupa todo el ancho y como mínimo toda la altura visible.
    Encabezado, contenido y firma se distribuyen verticalmente desde acá.
*/
body {
    display: flex;
    flex-direction: column;

    margin: 0;
    padding: 0;

    width: 100%;
    min-width: 320px;

    min-height: 100vh;
    min-height: 100dvh;

    font-family: var(--fuente-interfaz);

    background: var(--color-fondo);
    color: var(--color-texto);
}


/*
    Mantiene el encabezado en la parte superior
    y le entrega todo el ancho disponible de la página.
*/
#encabezado-agenda {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/*
    Controla el área completa disponible para el contenido de cada página.

    Agenda entrega todo el ancho y todo el espacio vertical restante.
    No agrega márgenes ni limita el ancho:
    los contenedores internos deciden cómo ocupar este espacio.
*/
body > main {
    flex: 1 0 auto;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/*
    Mantiene la firma después del contenido principal.

    Cuando una página tiene poco contenido, el crecimiento del main
    conserva la firma en la parte inferior de la pantalla.
*/
#firma-global {
    flex: 0 0 auto;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 0;
}


/*
    Evita que imágenes o SVG excedan el ancho
    que les proporciona su propio contenedor.
*/
img,
svg {
    display: block;

    max-width: 100%;
}