/*
This file should only be used by hesk clients to apply any custom overwrites to core files,
and ensure these changes are included in the bundled css.
*/

/* =========================================
   PARCHE PARA MÓVILES (RESPONSIVE FIX)
   ========================================= */
@media only screen and (max-width: 768px) {

    /* 1. Desactivar el efecto "fixed" del fondo en móviles
       (Esto evita que la imagen se vea gigante o rompa el scroll) */
    body,
    body::before {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center top !important;
    }

    /* 2. Forzar que el contenido se adapte al ancho del teléfono */
    .main__content {
        width: 100% !important;
        max-width: 100vw !important;
        /* No más ancho que la pantalla */
        min-height: auto !important;
        /* Quitar la altura forzada */
        padding: 15px !important;
        /* Dar aire a los costados */
        overflow-x: hidden !important;
        /* Cortar lo que sobresalga */
    }

    /* 3. Ajustar los botones grandes para que no se salgan */
    .navlink {
        width: 100% !important;
        box-sizing: border-box !important;
        margin-bottom: 10px !important;
    }

    /* 4. Evitar scroll horizontal en toda la página */
    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
    }
}

/* =========================================
   1. TIPOGRAFÍA (FUENTES)
   ========================================= */

/* Fuente Normal */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Fuente Negrita */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Aplicación Global */
:root {
    --font-family: 'Roboto', sans-serif !important;
    --font-family-headings: 'Roboto', sans-serif !important;
}

body,
.wrapper,
.input,
.btn,
h1,
h2,
h3,
h4,
h5,
h6,
* {
    font-family: 'Roboto', sans-serif !important;
}

/* =========================================
   2. FONDOS GLOBALES (BODY)
   ========================================= */

body {
    background-image: url('../img/tickets-bg.jpg');
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('../img/tickets-bg.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

/* =========================================
   3. CONTENEDOR PRINCIPAL (.main__content)
   ========================================= */

.main__content {
    /* --- Configuración de Fondo del Contenedor --- */
    /* Imagen con gradiente oscuro semi-transparente */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../img/tickets-bg.jpg');
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;

    /* --- Alineación y Flexbox --- */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
}

/* Ajuste específico para cuando hay notificaciones (evita espacios vacíos enormes) */
.main__content.notice-flash {
    min-height: 10vh !important;
}

/* =========================================
   4. TEXTOS Y COLORES (MODO OSCURO)
   ========================================= */

/* Títulos y textos generales en Blanco */
.search__title,
.select__title,
.request-text,
.article-heading-tip {
    color: #ffffff !important;
}

/* Sombra suave para los títulos principales */
.search__title,
.select__title {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Mantener el asterisco de "requerido" en rojo */
.article-heading-tip .required {
    color: #ff0000 !important;
}

/* =========================================
   CORRECCIÓN ESPECÍFICA FOOTER
   ========================================= */

/* Usamos el mismo selector que encontramos (.article__footer .link) 
   para empatar la fuerza, y !important para ganar */

.article__footer .link,
.article__footer .link:visited,
.article__footer .link:hover,
.article__footer .link:active {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* =========================================
   5. ELEMENTOS UI (BOTONES Y NOTIFICACIONES)
   ========================================= */

/* Botones de navegación */
.navlink {
    border-radius: 5px !important;
}

/* Caja de Notificaciones (Éxito/Error) */
.notice-flash .notification {
    width: auto !important;
    max-width: 600px !important;
    text-align: center;
    margin: 0 auto !important;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    padding: 15px 30px !important;
}