@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "daisyui";

@source "../**/*.blade.php";
@source "../**/*.js";
@source "../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php";
@source "../../storage/framework/views/*.php";

@theme {
    --font-sans: 'Mulish', sans-serif;
    /*COLORES*/
    --kälm-text: #2A4043;
    --kälm-dark: #306067;
    --kälm-light: #37A0AF;
    --kälm-lighter: #CCE2E5;
    --kälm-crema: #E9E5E3;
    --kälm-red: #430000;
}

@layer utilities {
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .no-scrollbar {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    }

.drawer-content {
    overflow: hidden;
}


/*FONTS*/
@font-face {
    font-family: 'Tropiline Normal';
    src: url('fonts/tropiline/Tropiline-Regular.otf') format('opentype');
    font-style: normal;
}

@font-face {
    font-family: 'Tropiline Bold';
    src: url('fonts/tropiline/Tropiline-Bold.otf') format('opentype');
    font-style: normal;
}

@font-face {
    font-family: 'Tropiline SemiBold';
    src: url('fonts/tropiline/Tropiline-SemiBold.otf') format('opentype');
    font-style: normal;
}

@font-face {
    font-family: 'Tropiline LogoOnly';
    src: url('fonts/tropiline/Tropiline-BoldItalic.otf') format('opentype');
    font-style: italic;
}

.logo-text {
    font-family: 'Tropiline LogoOnly';
    color: #306067;
}

.glass-effect {
    /* Reemplaza el fondo blanco sólido con un fondo semi-transparente y desenfocado */
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) saturate(1.8);
    /* Aumentamos la saturación para el efecto */
    -webkit-backdrop-filter: blur(8px) saturate(1.8);

    /* Sombras del efecto cristal */
    box-shadow:
        /* Borde interno claro */
        inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 10%), transparent),
        /* Reflejo superior/izquierdo claro */
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        /* Sombras internas oscuras */
        inset -0.3px -1px 4px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 12%), transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        /* Sombra externa */
        0px 1px 5px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent),
        0px 6px 16px 0px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 8%), transparent);

    transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1), box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
    border-top: 1px solid var(--kälm-lighter);
    backdrop-filter: blur(10px);
}


.header-bg {
    background-image: url('/images/bg-desktop.jpg'); /* Imagen por defecto */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 400px;
}

/* Tablets (≤1024px) */
@media (max-width: 1024px) {
    .header-bg {
        background-image: url('/images/fondo.jpg'); /* Imagen para tablet */
    }
}

/* Móviles (≤640px) */
@media (max-width: 640px) {
    .header-bg {
        background-image: url('/images/fondo.png'); /* Imagen para móvil */
    }
}

@media (prefers-color-scheme: dark) {
    .header-bg {
        background-image: url('/images/bg-desktop-dark.png');
    }
}

@media (max-width:1024px) {
    .header-bg {
        background-image: url('/images/fondo.jpg');
    }
}

@media (prefers-color-scheme: dark) and (max-width: 1024px) {
    .header-bg {
        background-image: url('/images/fondo-dark.png');
    }
}

@media (max-width:640px) {
    .header-bg {
        background-image: url('/images/fondo.png');
    }
}

@media (prefers-color-scheme: dark) and (max-width: 640px) {
    .header-bg {
        background-image: url('/images/bg-desktop-dark.png');
    }
}

h1 {
    font-family: 'Tropiline Bold';
}

h2, h3 {
    font-family: 'Tropiline SemiBold';
}

h4,
h5,
h6 {
    font-family: 'Tropiline Normal';
}

main p {
    color: #2A4043;
    font-weight: bold;
    font-family: 'Mulish', sans-serif;
}

@media (prefers-color-scheme: dark){
    main p {
    color: #E9E5E3;
    font-weight: bold;
    font-family: 'Mulish', sans-serif;
}
}

body {
    width: 100%;
    font-family: 'Mulish', sans-serif;
    font-weight: bold;
    /*NAVBAR VARIABLES*/
    --c-glass: #bbbbbc;
    --c-light: #fff;
    --c-dark: #000;
    --c-bg: #e8e8e9;
    --glass-reflex-dark: 1;
    --glass-reflex-light: 1;
    background-color: #ffffff;
    /* Prevent accidental horizontal scroll from 100vw / off-by-one elements */
    overflow-x: hidden;
}

/*LOGIN Y REGISTER*/
.decorated {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.decorated::before,
.decorated::after {
    content: "";
    color: var(--kälm-dark);
    flex: 1 1 0;
    height: 1px;
    background: currentColor;
}

.glass {
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) url(.navbar-style) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow: inset 0 0 0 1px color-mix(in srgb,
            var(--c-light) calc(var(--glass-reflex-light) * 10%),
            transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
            transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
            transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
            transparent),
        0px 1px 5px 0px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
            transparent),
        0px 6px 16px 0px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
            transparent);
    transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
        box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

.navbar-style {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 1em 1.5em;
    margin: 0 auto;
    border: none;
    border-radius: 99em;
    font-size: var(--fz);
    background-color: color-mix(in srgb, var(--c-glass) 12%, transparent);
    backdrop-filter: blur(8px) url(.navbar-style) saturate(var(--saturation));
    -webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
    box-shadow: inset 0 0 0 1px color-mix(in srgb,
            var(--c-light) calc(var(--glass-reflex-light) * 10%),
            transparent),
        inset 1.8px 3px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 90%), transparent),
        inset -2px -2px 0px -2px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
        inset -3px -8px 1px -6px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 60%), transparent),
        inset -0.3px -1px 4px 0px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 12%),
            transparent),
        inset -1.5px 2.5px 0px -2px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 20%),
            transparent),
        inset 0px 3px 4px -2px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 20%), transparent),
        inset 2px -6.5px 1px -4px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
            transparent),
        0px 1px 5px 0px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 10%),
            transparent),
        0px 6px 16px 0px color-mix(in srgb,
            var(--c-dark) calc(var(--glass-reflex-dark) * 8%),
            transparent);
    transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1),
        box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

h1 {
    font-family: 'Tropiline Bold';
}

h2 {
    font-family: 'Tropiline SemiBold';
}

h3,
h4,
h5,
h6 {
    font-family: 'Tropiline Normal';
}

button {
    font-family: 'Tropiline SemiBold';
}