/* ============================================================
   MENÚ AVAMET
   Responsive: ordinador + mòbil
   Manté l'estructura HTML actual basada en checkbox
   ============================================================ */


/* ============================================================
   CONFIGURACIÓ GENERAL
   ============================================================ */

#menu {
    --menu-bg: #111111;
    --menu-bg-hover: #242424;
    --menu-text: #ffffff;

    --submenu-bg: #35a2a2;
    --submenu-hover: #2d9292;

    --submenu2-bg: #55bbbb;
    --submenu2-hover: #48a9a9;

    --private-bg: #598152;
    --private-hover: #4e7448;

    --border: rgba(255, 255, 255, 0.14);

    --shadow: 0 8px 22px rgba(0, 0, 0, 0.22);

    position: relative;
    z-index: 99999;

    width: 100%;

    background-color: var(--menu-bg);

    font-size: 1.05em;

    box-sizing: border-box;
}

#menu *,
#menu *::before,
#menu *::after {
    box-sizing: border-box;
}


/* ============================================================
   RESET DELS ELEMENTS DEL MENÚ
   ============================================================ */

#menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu li {
    margin: 0;
    padding: 0;
}

#menu a {
    text-decoration: none;
}


/* ============================================================
   MENÚ PRINCIPAL
   ============================================================ */

#menu .main-menu {
    display: none;
}

#tm {
    display: none;
}

#tm:checked + .main-menu {
    display: block;
}


/* ============================================================
   ELEMENTS PRINCIPALS
   ============================================================ */

#menu li,
#toggle-menu,
#menu .sub-menu {
    border-style: solid;
    border-color: var(--border);
}

#menu li,
#toggle-menu {
    border-width: 0 0 1px;
}

#menu li,
#toggle-menu,
#menu a {
    position: relative;
    display: block;
    color: var(--menu-text);
}

#menu a {
    padding: 0.95em 1.1em;

    line-height: 1.25;

    transition:
        background-color 0.18s ease,
        color 0.18s ease;
}


/* ============================================================
   HOVER DELS ENLLAÇOS
   ============================================================ */

#menu a:hover {
    background-color: var(--menu-bg-hover);
    color: #ffffff;
}


/* ============================================================
   BOTÓ "MENÚ" EN MÒBIL
   ============================================================ */

#toggle-menu {
    padding: 0.95em 1.1em;

    cursor: pointer;

    background-color: var(--menu-bg);

    font-weight: 600;

    user-select: none;
}

#toggle-menu:hover {
    background-color: var(--menu-bg-hover);
}


/* Icona del botó Menú */

#toggle-menu .drop-icon {
    position: absolute;
    right: 1.1em;
    top: 50%;

    transform: translateY(-50%);
}


/* ============================================================
   ICONES DE DESPLEGABLE
   ============================================================ */

#menu input[type="checkbox"] {
    display: none;
}

#menu ul span.drop-icon {
    display: none;
}

#menu label.drop-icon {
    position: absolute;

    right: 1em;
    top: 50%;

    transform: translateY(-50%);

    width: 1.6em;
    height: 1.6em;

    border-radius: 50%;

    background-color: rgba(0, 0, 0, 0.18);

    color: rgba(255, 255, 255, 0.9);

    text-align: center;

    line-height: 1.6em;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        transform 0.18s ease;
}

#menu label.drop-icon:hover {
    background-color: rgba(0, 0, 0, 0.3);
}


/* ============================================================
   SUBMENÚS
   ============================================================ */

#menu .sub-menu {
    display: none;

    margin: 0;

    background-color: var(--submenu-bg);

    border-width: 1px 1px 0;
}

#menu input[type="checkbox"]:checked + .sub-menu {
    display: block;
}


/* Enllaços dels submenús */

#menu .sub-menu a {
    padding: 0.75em 1em;

    font-size: 0.92em;

    color: #ffffff;
}

#menu .sub-menu a:hover {
    background-color: var(--submenu-hover);
    color: #ffffff;
}


/* ============================================================
   SEGON NIVELL
   ============================================================ */

#menu .s2nivell {
    background-color: var(--submenu2-bg);
}

#menu .s2nivell a {
    color: #111111 !important;
}

#menu .s2nivell a:hover {
    background-color: var(--submenu2-hover);
    color: #111111 !important;
}


/* ============================================================
   ZONA PRIVADA
   ============================================================ */

#menu .zprivada {
    background-color: var(--private-bg) !important;
}

#menu .zprivada a:hover {
    background-color: var(--private-hover);
}


/* ============================================================
   ÚLTIM ELEMENT DE CADA SUBMENÚ
   ============================================================ */

#menu .sub-menu li:last-child {
    border-width: 0;
}


/* ============================================================
   MÒBIL
   ============================================================ */

@media only screen and (max-width: 51.99em) {

    #menu {
        width: 100%;
    }

    #menu .main-menu {
        width: 100%;
    }

    /*
       Els elements principals ocupen tota l'amplada.
    */

    #menu .main-menu > li {
        width: 100%;
    }

    /*
       Separació visual entre els nivells.
    */

    #menu .sub-menu {
        width: auto;

        margin: 0 0.6em 0.6em;

        border-width: 1px;

        border-radius: 0 0 5px 5px;

        overflow: hidden;

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }

    /*
       Segon nivell.
    */

    #menu .sub-menu .sub-menu {
        margin: 0.25em 0.5em 0.5em;

        border-radius: 4px;

        box-shadow: none;
    }

    /*
       Una mica d'indentació per als nivells interiors.
    */

    #menu .sub-menu a {
        padding-left: 1.25em;
    }

    #menu .s2nivell a {
        padding-left: 1.35em;
    }

    /*
       Quan un element té un submenú, deixem espai
       per a la fletxa.
    */

    #menu li > a {
        padding-right: 3.5em;
    }

    /*
       La fletxa queda centrada verticalment.
    */

    #menu li label.drop-icon {
        z-index: 5;
    }

    /*
       Quan el checkbox està obert, girem visualment
       la fletxa.
    */

    #menu input[type="checkbox"]:checked + .sub-menu {
        animation: menu-obrir 0.16s ease-out;
    }

    /*
       Evitem animacions molestes si l'usuari prefereix
       menys moviment.
    */

    @media (prefers-reduced-motion: reduce) {
        #menu *,
        #menu *::before,
        #menu *::after {
            transition: none !important;
            animation: none !important;
        }
    }
}


/* Animació d'obertura */

@keyframes menu-obrir {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ============================================================
   ORDINADOR
   ============================================================ */

@media only screen and (min-width: 52em) {

    /* El menú principal sempre visible */
    #menu .main-menu {
        display: block;
        width: 100%;
        white-space: nowrap;
    }

    /* El botó "Menú" desapareix */
    #toggle-menu {
        display: none;
    }

    /* Fletxes dels elements amb desplegable */
    #menu ul span.drop-icon {
        display: inline-block;

        margin-left: 0.35em;

        width: 1.35em;
        height: 1.35em;

        border-radius: 50%;

        background-color: rgba(255, 255, 255, 0.08);

        color: rgba(255, 255, 255, 0.8);

        text-align: center;
        line-height: 1.35em;
        vertical-align: middle;
    }

    /* Elements principals en horitzontal */
    #menu .main-menu > li {
        float: left;
        border-width: 0 1px 0 0;
    }

    /* Enllaços principals */
    #menu .main-menu > li > a {
        padding: 0.9em 1em;
    }

    /* --------------------------------------------------------
       SUBMENÚ DE PRIMER NIVELL
       -------------------------------------------------------- */

    #menu .sub-menu {
        position: absolute;

        top: 100%;
        left: 0;

        width: 20em;

        margin: 0;

        border: 0;
        border-radius: 0 0 5px 5px;

        overflow: visible;

        box-shadow: var(--shadow);

        z-index: 3000;

        display: none;
    }

    /*
       IMPORTANT:
       El submenú principal s'obri quan passem pel
       seu <li>.
    */

    #menu .main-menu > li:hover > .sub-menu {
        display: block;
        animation: menu-obrir 0.14s ease-out;
    }

    /* Elements del submenú */
    #menu .sub-menu li {
        float: none;
        width: 100%;

        border-width: 0 0 1px;
    }

    #menu .sub-menu a {
        padding: 0.72em 1em;
        white-space: normal;
    }


    /* --------------------------------------------------------
       TERCER NIVELL
       -------------------------------------------------------- */

    #menu .sub-menu .sub-menu {
        position: absolute;

        top: 0;
        left: 100%;

        width: 20em;

        margin: 0;

        border-radius: 5px;

        box-shadow: var(--shadow);

        display: none;
    }

    /*
       IMPORTANT:
       Quan estem damunt de l'element que conté el
       tercer nivell, aquest s'obri.
    */

    #menu .sub-menu > li:hover > .sub-menu {
        display: block;
        animation: menu-obrir 0.14s ease-out;
    }


    /* --------------------------------------------------------
       COLORS DELS SUBMENÚS
       -------------------------------------------------------- */

    #menu .sub-menu li:hover > a {
        background-color: var(--submenu-hover);
    }

    #menu .s2nivell li:hover > a {
        background-color: var(--submenu2-hover);
    }

    #menu .zprivada li:hover > a {
        background-color: var(--private-hover);
    }


    /* --------------------------------------------------------
       FLETXA DELS ELEMENTS QUE TENEN UN TERCER NIVELL
       -------------------------------------------------------- */

    #menu .sub-menu li > a > span.drop-icon {
        float: right;

        margin-top: 0.05em;
    }


    /* El label de la fletxa només funciona en mòbil */
    #menu label.drop-icon {
        display: none;
    }
}
/* ============================================================
   TABLETS / PANTALLES MITJANES
   ============================================================ */

@media only screen and (min-width: 52em) and (max-width: 64em) {

    #menu {
        font-size: 0.98em;
    }

    #menu .main-menu > li > a {
        padding-left: 0.7em;
        padding-right: 0.7em;
    }

    #menu .sub-menu {
        width: 19em;
    }
}


/* ============================================================
   NETEJA DEL FLOAT
   ============================================================ */

#menu .main-menu::after {
    content: "";
    display: table;
    clear: both;
}


/* ============================================================
   PANTALLES MOLT XICOTETES
   ============================================================ */

@media only screen and (max-width: 30em) {

    #menu {
        font-size: 1em;
    }

    #menu a,
    #toggle-menu {
        padding-top: 0.9em;
        padding-bottom: 0.9em;
    }

    #menu .sub-menu {
        margin-left: 0.35em;
        margin-right: 0.35em;
    }
}



.boleta {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:18px;
	height:18px;
	padding:0 5px;
	box-sizing:border-box;
	margin-left:4px;
	border-radius:9px;
	background:#d6453d;
	color:#fff;
	font-size:11px;
	font-weight:bold;
	line-height:1;
}