/*
    DEFINICIÓN DE ESTILOS PARA LA CABECERA DE EXTRANET
    Sonia Solange Paleo - 10-03-2023
*/
@font-face {
    font-family: myFont;
    src: url(/issys-media/cabecera/fuente/NotoSans-Regular.ttf) format("truetype");
}
@font-face {
    font-family: myFont;
    src: url(/issys-media/cabecera/fuente/NotoSans-Italic.ttf) format("truetype");
    font-style: italic;
}
@font-face {
    font-family: myFont;
    src: url(/issys-media/cabecera/fuente/NotoSans-Light.ttf) format("truetype");
    font-weight: 200;
}
@font-face {
    font-family: myFont;
    src: url(/issys-media/cabecera/fuente/NotoSans-LightItalic.ttf) format("truetype");
    font-weight: 200;
    font-style: italic;
}
@font-face {
    font-family: myFont;
    src: url(/issys-media/cabecera/fuente/NotoSans-Medium.ttf) format("truetype");
    font-weight: 500;
}
@font-face {
    font-family: myFont;
    src: url(/issys-media/cabecera/fuente/NotoSans-MediumItalic.ttf) format("truetype");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: myFont;
    src: url(/issys-media/cabecera/fuente/NotoSans-SemiBold.ttf) format("truetype");
    font-weight: 600;
}
@font-face {
    font-family: myFont;
    src: url(/issys-media/cabecera/fuente/NotoSans-SemiBoldItalic.ttf) format("truetype");
    font-weight: 600;
    font-style: italic;
}

:root {
  --ce-gris-claro: #AAA;
  --ce-primary: #5c8f66;
  --ce-secondary: #8e9280;
  --ce-success: #688d36;
  --ce-info: #5b8b97;
  --ce-warning: #fb9223;
  --ce-danger: #b94343;
  --ce-light: #f5f7f7;
  --ce-dark: #3d3d3d;
  --ce-azul: #5b8b97;
  --ce-verde-issys: #688d36;
  --ce-azul-issys: #6784b2;
  --ce-verde-oscuro: #4a6241;
  --ce-verde-claro: #e8f2da;
  --ce-tea: #d2e5c3;
  --ce-azul-oscuro: #495e62;
  --ce-gris-claro: #eaeaea;
  --ce-ocre: #fdffbf;
  --ce-celeste: #ccf1fa;
  --ce-naranja: #fad9a3ff;
}

issys-header{  font-size: 16px; color: #3d3d3d; font-family: 'myFont';}
body{ margin: 0px}

/* ------------------------------------------------------------- */
/*              Estilos principales de la cabecera
/* ------------------------------------------------------------- */
issys-header .cabecera-header {
    position: relative;
    background-color: white;
    min-height: 60px;
    border-bottom: solid 3px var(--ce-gris-claro);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px;
    background-image:  linear-gradient(
        to right,
        rgb(255, 255, 255),
        rgb(255, 255, 255),
        rgba(255, 255, 255, 0.219)
      ), url("https://extranet-preproduccion.issys.gov.ar/acceso/assets/extranet/img/fondo-header.png");
    background-size: cover;
    background-position: right;
}
issys-header .cabecera-identificador *{
    padding-left: 5px;
    color: var(--ce-verde-oscuro);
    font-weight: 600;
    margin: 0px;
}
issys-header .cabecera-identificador .text-header{
    border-left: solid 3px var(--ce-primary);
    padding-left: 10px;
}
issys-header .cabecera-identificador .cabecera-subtitulo{
    color:var(--ce-secondary);
    font-weight: 500;
}
issys-header .cabecera-identificador{
    display: flex;
    position: relative;
    align-items: center;
}

issys-header .cabecera-logo {
    height: 35px;
    margin: 0px;
    padding: 0px 20px 0px 5px;
}

/* ------------------------------------------------------------- */
/*                  BADGE ENTIDAD-USUARIO
/* ------------------------------------------------------------- */
issys-header .cabecera-user-icon{
    display: flex;
    gap: -20px;
    background-color: var(--ce-verde-claro);
    border-radius: 50px;
    border: solid 1px var(--ce-tea);
    padding: 0px !important;
    cursor: pointer;
    align-items: center;
}
issys-header .cabecera-user-icon * {
   color: var(--ce-verde-oscuro);
   display: flex;
}

issys-header .cabecera-user-icon button{
    border: none;
}

/*---------------------------------usuario */
issys-header .menu-usuario{
    padding: 2px 14px;
    background-color: var(--ce-tea);
    z-index: 10;
    align-items: center;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1.2em;
    padding: .3em 1em .4em !important;
}
issys-header .count-notif{
    display: flex;
    width: 2.6rem;
    height: 2.6rem;
    font-size: 1.5rem;
    align-items: center;
    justify-content: center;
    background-color: var(--ce-warning);
    border-radius: 50%;
    color: var(--ce-verde-claro) !important;
}
issys-header .menu-usuario i{
    font-size: 2.7em;
    margin-right: 5px;
    border-radius: 50%;
    color: var(--ce-verde-oscuro);
    color: var(--ce-verde-claro);
    background-color: var(--ce-verde-oscuro);
}
issys-header .menu-usuario p{
    margin: 0px 5px;
}

/*---------------------------------entidad  */
issys-header .entidad-representada{
    font-size: 0.9em;
    line-height: 1.3em;
    padding: 5px 10px 5px 20px;
    display: flex;
    flex-direction: column;
    background-color: unset;
    min-width: 50px;
    max-width: 300px;
    text-align: right;
    align-items: end !important; 
    justify-content: center;
}
issys-header .entidad-representada .tipo-entidad{
    color: gray;
}
issys-header .entidad-representada .descri{
    max-height: 3em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ------------------------------------------------------------- */
/*                       BANER de ENTORNO
/* ------------------------------------------------------------- */
issys-header .cabecera-entorno{
    color: #666;
    font-weight: 500;
    font-size: .9rem;
    margin: 0px;
    padding: 14px 20px;
}
issys-header .cabecera-entorno p{
    margin: 0px;
}
issys-header .cabecera-entorno.desarrollo{
    background-color: #f9eacc;
}
issys-header .cabecera-entorno.preproduccion{
    background-color: var(--ce-tea);
}
issys-header .cabecera-entorno.desarrollo p i{
    color: var(--ce-warning);
}
issys-header .cabecera-entorno.preproduccion p i{
    color: var(--ce-verde-oscuro);
}
#cab-ico-person-circle{
    background-color: var(--ce-verde-oscuro);
    border-radius: 50%;
}
#cab-ico-person-circle *{
    color: var(--ce-verde-claro);
}

/* ------------------------------------------------------------- */
/*                   NOTIFICACIÓN INVASIVA
/* ------------------------------------------------------------- */
issys-header .notificacion-invasiva-box{
    width: 100vw;
    height: 100vh;
    background-color: #1c1c1c80;
    z-index: 99999;
    position: absolute;
}

issys-header .notificacion-invasiva{
    z-index: 100000;
    position: relative;
    top: 5vh;
    width: 60vw;
    min-width: 200px;
    max-width: 1200px;
    max-height: 80vh;
    overflow-y: scroll;
    margin: auto;
    padding: 15px;
    background-color: whitesmoke;
    border-radius: 7px;
    box-shadow: 0px 1px 7px var(--ce-verde-oscuro);
}
issys-header .notificacion-invasiva .cabecera{
    display: flex;
    width: 100%;
    border-bottom: 1px solid #AAA;
    margin-bottom: 10px;
    align-content: space-around;
    align-items: flex-start;
}
issys-header .notificacion-invasiva h3{
    width: calc(100% - 40px);
    font-size: 1.5em;
    margin-top: 0px;
    color: var(--ce-verde-oscuro);
    font-weight: 500;
}
issys-header .notificacion-invasiva .btn-cerrar{
    background-color: inherit;
    border: none;
    color: var(--ce-primary);
    font-size: 1.5em;
    width: 35px;
}
issys-header .notificacion-invasiva .btn-cerrar:hover{
    color: var(--ce-warning);
}
issys-header .notificacion-invasiva .fecha {
    width: 100%;
    color: #888;
    font-size: .9em;
    font-style: italic;
}

issys-header .notificacion-invasiva-foot .enlaces a{
    color: var(--ce-azul);
    cursor: pointer;
    display: block;
    margin-bottom: 5px;
}
issys-header .notificacion-invasiva-foot .enlaces a:hover{
    color: var(--ce-verde-oscuro);
}
issys-header .notificacion-invasiva-foot{
    border-top: solid 1px #AAA;
    padding-top: 10px;
    bottom: 0px;
    margin: 0px;
    display: flex;
    justify-content: space-between;
    gap:10px
}
issys-header .notificacion-invasiva-foot button{
    width: auto;
    border: none;
    color: white;
    background-color: var(--ce-primary);
    padding: 7px 10px;
    border-radius: 5px;
}
issys-header .notificacion-invasiva-foot button:hover{
    background-color: var(--ce-verde-oscuro);
}

/* ------------------------------------------------------------- */
/*                          RESPONSIVIDAD
/* ------------------------------------------------------------- */
/*      tablet  */
@media (min-width: 570px) and ( max-width: 992px){
    issys-header .cabecera-titulo{font-size: 1.6rem;}
    issys-header .cabecera-header{
        padding-bottom: 5px 0px;
    }
    issys-header .entidad-representada{ min-width: unset;}
    issys-header .cabecera-user-icon { max-width: 40vw; }
}
/*      Celular */
@media (max-width: 570px){
    issys-header .cabecera-titulo{font-size: 1.4rem;}
    issys-header .cabecera-logo {
        height: 25px;
        padding: 0px 15px;
    }
    issys-header .cabecera-header{
        font-size: .9em;
        display: block;
        padding: 0px;
        background-position: unset;
        background-image:  linear-gradient(
            to right,
            rgb(255, 255, 255),
            rgb(255, 255, 255),
            rgba(255, 255, 255, 0.575)
        ), url("https://extranet-preproduccion.issys.gov.ar/acceso/assets/extranet/img/fondo-header.png");
    }
    issys-header .cabecera-identificador{
        width: 100%; padding: 5px 0px;
    }
    issys-header .cabecera-user-icon{
        justify-content: space-between;
        width: 100%;
        margin: 0;
        margin-top: 0px;
        margin-top: 5px;
        border-radius: 0px;
        border: 0px;
        border-top: solid 2px var(--ce-tea);
        border-bottom: solid 1px var(--ce-tea);
        position:sticky;
        top:0px;
    }

    issys-header .menu-usuario{
        border-radius: 50px 0px 0px 50px;
    }
    issys-header .entidad-representada{
        text-align: left;
        align-items: initial !important;
    }
    issys-header .notificacion-invasiva{
        width: 90%;
        min-width: 200px;
    }

}


/* ------------------------------------------------------------- */
/*                       DROPDOWN MENU
/* ------------------------------------------------------------- */
issys-header .menu-contenedor{
    display: none;
    top: calc(100% - 5px);
    padding: 0px 20px;
    position: absolute;
    border-radius: 7px;
    right: 10px;
    z-index: 999;
    min-width: 500px;
    max-width: 800px;
    background-color: white;
    box-shadow: 0px 1px 7px gray;
    transition: 400ms;
}

issys-header .cabecera-mostrar{     display: block;   }

issys-header .menu-contenedor section{
    padding: 15px 0px 7px 0px;
}
issys-header .menu-contenedor .detalle{
    border-bottom: solid 1px #AAA;
    font-size: .9em;
    line-height: 1em;
}
issys-header .menu-contenedor .informacion{
    padding: 0px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 30px;
}
issys-header .menu-contenedor.not-not .informacion{
    display: block;
}

issys-header .menu-contenedor ul{
    list-style: none;
    padding: 0px;
    margin-top:0;
    margin-bottom: 1rem;
}

/*------------------------- LISTADO DE NOTIFICACIONES   */
issys-header #notificacion-box .nota{
    font-size: 0.9em;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis "...";
    margin: 0px;
    padding: 0px;
    padding-top: 5px;
    cursor: pointer;
}
issys-header #notificacion-box li *{
    margin: 0px;
}
#notificacion-box li p.cabecera-leida{
    color: gray;
}
issys-header #notificacion-box li p.cabecera-importante{
    font-weight: 500;
    color: var(--ce-warning);
}
issys-header #notificacion-box .nota:hover{
    background-color: var(--ce-light);
}
issys-header .nota .notificacion-item{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 5px;
}
issys-header .nota .cabecera-detalle{
    font-size: .8em; color: gray;
}

/*--------------------------------------opciones de menu    */
.acction-bar-cabecera-extranet{
    background-color: var(--ce-light);
    padding: 0px 10px !important;
}
issys-header .opt-menu{
    font-size: 0.9em;
    padding: 3px ;
    padding-left: 0px;
}
issys-header .opt-menu a{
    color: #3d3d3d;
    text-decoration: none;
}
issys-header .opt-menu.rojo a{
    color: var(--ce-danger);
    text-decoration: none;
}
issys-header .opt-menu:hover{
    cursor: pointer;
    background-color: #EEE;
}

issys-header #nav-celular {display: none; margin: 0px}

@media (max-width: 570px){
    issys-header  #nav-celular{
        z-index: 9999;
        display: flex;
        font-weight: 600;
        position: fixed;
        bottom: 0px;
        width: 100%;
        background-color: var(--ce-verde-claro);
        padding: 7px;
        font-size: 2em;
        justify-content: space-around;
        border-top: solid 2px var(--ce-tea);
    }
    issys-header  #nav-celular li{
        cursor: pointer;
        list-style: none;
        display: block;
        color: var(--ce-verde-oscuro);
    }
    issys-header  #nav-celular li a{color: var(--ce-verde-oscuro);}
    issys-header  #nav-celular li.gris a{ color: gray }
    issys-header  #nav-celular li.naranja a{ color: var(--ce-warning) }
    issys-header  #nav-celular li a:hover{
        
    }
    
    issys-header  .menu-contenedor{
        min-width: unset;
        margin: 0px 10px;
        right: 0px;
    }
    issys-header  .menu-contenedor .informacion{
        grid-template-columns: 1fr;
        max-height: 60vh;
        overflow: scroll;
    }
   /* issys-header  .menu-contenedor .acction-bar-cabecera-extranet{display: none;}    */
}


/*----------------------------------------------------------------*/

.cabecera-hide{
    display:none !important;
}