@font-face {
  font-family: estandar;
  src: url('/fuentes/firasans_regular.ttf');
}

@font-face {
  font-family: negrita;
  src: url('/fuentes/firasans_medium.ttf');
}

@font-face {
  font-family: ligera;
  src: url('/fuentes/firasans_light.ttf');
}
@font-face {
  font-family: 'unidades';
  src: url('/fuentes/rob_regular.ttf');
}
/**:not(.leaflet-tile) {
    border-radius: 0.5rem;	
}*/

html {
  width: 100%;

  font-size: calc(0.6rem + 0.3vw);
  margin: 0 auto;
  color: rgb(50, 60, 70);
  font-family: 'estandar', 'Arial', Helvetica, sans-serif;
  scroll-behavior: smooth;
}

body{
  display: grid;
  grid-template-columns: 17rem auto;
  grid-template-rows: auto auto;
  grid-template-areas: "header contenido" "header footer";
  transition: grid-template-columns 0.05s ease-out;
}
.lateral_escondido main {
  padding-top: 8.2rem;
}

#volver_arriba{
  /*background-image: url(/img/iconos_meteo/flecha-hacia-arriba.svg);*/
  background-image: url(/img/iconos_meteo/chevron-flecha-hacia-arriba.svg);
  background-position: center;

  background-repeat: no-repeat;
  position: fixed;
  border-radius: 2rem;
  background-color: #b04590;
  color: white;   
  text-decoration: none;
  filter: invert(100%);
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;

  width: 0;
  height: 0;
  bottom: 2.5rem;
  right: 2.5rem;
  background-size: 0;
  font-size: 0;
  opacity: 0;

  transition: 
    width 0.4s ease-in,
    height 0.4s ease-in, 
    bottom 0.4s ease-in,
    right 0.4s ease-in,
    background-size 0.4s ease-in,
    font-size 0.4s ease-in, 
    opacity 0.4s ease-in ;
}
.desplazado #volver_arriba{
  width: 3rem;
  height: 3rem;
  bottom: 1rem;
  right: 1rem;
  font-size: 1.4rem;
  background-size: 1.2rem;
  opacity: 1;
}
.esconder{
  grid-template-columns: 100%;
  grid-template-areas: 'contenido';
  transition: all 0.3s ease;
}
/* Texto seleccionado */
/*::selection {
        background-color: rgba(150, 150, 150, 0.1);
        color: #BFB404;
}*/

/* Rótulos */
h1, h2, h3, h4, h5, h6 {
  font-family: 'negrita', 'Impact', Charcoal, sans-serif;
  font-weight: normal;
}

main > h1 {
  font-size: 1.8rem;
  /*        background-image: url("/img/separadorCondensado.png");
          background-repeat: no-repeat;
          margin: -1.5rem 0 2rem;
          border-bottom: 0.2rem solid #c6c6c6;
          color: #c6c6c6;
          padding-left: calc(34px + 1rem);
          background-position: left center;
          padding-bottom: 0.1rem;
          padding-top: 0.5rem; */
  /*color: white;*/
  /*	background-image: url(/img/sipcam_separador.jpg);
          background-repeat: no-repeat;
          background-size: cover;*/
  /*padding: 0.5rem 1rem;*/
  /*border-radius: 0.5rem;*/
  background-image: url("/img/separadorCondensado.png");
  background-repeat: no-repeat;
  background-size: unset;
  margin: 0 0 2rem;
  border-bottom: 0.2rem solid #c6c6c6;
  border-radius: 0px !important;
  color: #c6c6c6;
  padding-left: calc(34px + 1rem);
  background-position: left center;
  padding-bottom: 0.1rem;
  padding-top: 0.5rem;
}

h2 {
  font-size: 1.4rem; 
  margin: 2rem 0 1rem;
  color: #a1a1a1;
  /*color: white;*/
  /*	background-image: url(/img/sipcam_separador.jpg);
          background-repeat: no-repeat;
          background-size: cover;*/
  padding: 0.5rem 0;
  /*    border-radius: 0.5rem;*/
}


/* Características generales */
strong {
  font-family: 'negrita', 'Impact', Charcoal, sans-serif;
  font-weight: normal;
}

a {
  color: #356f92;
  outline: none;
}


ul {
  list-style-type: none;
}

li {
  list-style-type: none;
}

/* La página y sus partes */

/*header > *,
main > *,
footer > * {
        width: 100%;
        max-width: 900px;
}*/

header {
  grid-area: header;
  background-color: white;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 1rem;
  padding-right: 1rem;
  z-index: 1;
  /*! height: 100%; */

  /*! box-shadow: 0 0 0.5rem #BFB404; */
  /*! position: fixed; */
  /*! height: calc(100vh - 11rem); */
  /*! top: 0; */
  padding-bottom: 10rem;

}

main {
  grid-area: contenido;
  min-height: calc(100vh - 3.5rem);
  /*box-shadow: 0 0 0.5rem #BFB404;*/
  box-shadow: 1.2rem 0 0.5rem -1rem #cbcbcb inset;
  background-color: #F1F1F1;
  /*background-color: #606060;*/
  transition: padding-top 0.05s ease-out;
}

footer {
  /*	height: 10rem;
          background-color: #356f92;
          background-image: url('/img/fondo_pie.gif');
          background-repeat: repeat;*/

  /*    background-image: 
          url(/img/powered_by_fluture.png),
          url(/img/sipcam_montanas.svg);		
      background-repeat: no-repeat, no-repeat;
      background-position-x: right, -3px;
      background-position-y: calc(100% - 1rem), bottom;
      background-size: auto 20%, 110% auto;*/

  grid-area: footer;
}

/* Menú */

#menu .n1 > ul {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 14rem;
  right: 0;
  left: 1rem;
  /* width: calc(100%); */
  overflow-y: auto;
  height: calc(100% - 25rem);
  padding-right: 0.5rem;
  text-align: left;
}

#menu .elemento_menu.n2 {
  display: grid;
  grid-template-rows: 2.5rem auto;
  width: 100%;
  cursor: default;
}

#menu .elemento_menu.n2 > span {
  /*! border-bottom: 2px solid #8bb540; */
  /*! width: calc(100% - 0.5rem); */
  padding: 0.3rem 0 0.3rem 2rem;
  align-self: end;
  /*! text-align: center; */
  position: relative;
  /*! background-image: url("/img/iconos/menu/rosa-de-los-vientos.svg"); */
  background-repeat: no-repeat;
  background-size: 40px 40px;
  cursor: pointer;
  border-bottom: 1px solid lightgray;
  /*! border-radius: 0; */
}
/*#menu .elemento_menu.n2 > span:hover{
  color: #3f7292;
}*/


#menu .elemento_menu.n2 > ul {
  visibility: visible;
  opacity: 1;
  display: none;
  padding-top: 0.5rem;
  padding-bottom: 0.2rem;
}

#menu .elemento_menu.n2:hover > ul,
#menu .elemento_menu.n2:focus-within ul {
  visibility: visible;
  opacity: 1;
  transition:
    all .1s ease-out;
  overflow: visible;
}

#menu .elemento_menu.n2 .activo > a {
  /* color: #BFB404; */
  background-color: #e8f1f5;
}

#menu .elemento_menu > a {
  position: relative;
  display: block;
  width: 100%;
  padding-top: 0.3rem;
  padding-bottom: 0.3rem;
  padding-right: 0.3rem;
  margin-top: 1px;
  text-decoration: none;
  transition:
    background-color 0.1s ease-in;
}

#menu .elemento_menu.n3 > a,
#menu .elemento_menu.n3 > span {
  padding-left: 2rem;
}

#menu .elemento_menu.n4 > a,
#menu .elemento_menu.n4 > span {
  padding-left: 3rem;
}

#menu .elemento_menu.n5 > a,
#menu .elemento_menu.n5 > span {
  padding-left: 4rem;
}

#menu .elemento_menu.n6 > a,
#menu .elemento_menu.n6 > span {
  padding-left: 5rem;
}

#menu .elemento_menu > a:hover {
  /*text-decoration: underline;*/
  background-color: #e8f1f5;
}
#menu .elemento_menu.n1 > :focus {
  outline: auto;
}

#menu .elemento_menu.n1 > :focus:hover {
  outline: none;
  animation: none;
  border-bottom: none;

}

@keyframes logofocus {
  0%   {margin-top: 0;}
  50%  {margin-top: 0.4rem;}
  100% {margin-top: 0;}
}	

#menu .elemento_menu.n2 :hover,
#menu .elemento_menu.n2 :focus {
  color: rgb(50, 60, 70);
  outline: none;
}

#menu .elemento_menu.n2 :focus::before {
  /*	content: "\25B8";
    position: absolute;*/
  /*left: -0.2rem;*/
  opacity: 0.7;
}

#menu .elemento_menu.n2 :focus:hover::before {
  content: "";
}


/*

#menu #elemento__ > ul .elemento_menu ul {
        margin-top: 0.4rem;
}

*/
/*
#menu li {
    list-style: none;
    padding: 0.2rem;
}
*/
/*

#menu a,
#menu span {
    font-family: 'estandar', 'Trebuchet MS', Helvetica, sans-serif;
    text-decoration: none;
}
*/
#elemento__ {
  text-align: center;
}

#menu #elemento__ a#enlace__ {
  position: relative;
  top: 0rem;
  left: 0;
  color: transparent;
  background-image: url("/img/sipcamdata.png");
  background-size: contain;
  background-repeat: no-repeat;
  width: 13rem;
  height: 5rem;
  visibility: visible; 
  display: inline-block;
  transition: left 0.05s ease-out;
}
/*Comportamiento mostrar/esconder menu*/
.n2 > ul{
  /*display: block;*/
}
#menu .elemento_menu.n2.mostrar > ul{
  /*background-color: red;*/
  display: block;
}
#menu .elemento_menu.n2.esconder > ul{
  display: none;
}

/* Opción de salir */
#opciones_usuario_conocido {
  position: relative;
  border-radius: 1.5rem;

  padding: 0.2rem 0.7rem;
  /*! z-index: 1; */
  background-color: #b8b8b8;
  /*! opacity: 0.3; */
  top: 10rem;
  width: 100%;
  height: 2rem;
  display: flex;
  align-items: center;
}
#opciones_usuario_conocido form {
  min-width: inherit;
}
#opciones_usuario_conocido > * {
  flex: 1 0 0;
}


form#salir {
  display: inline;
}

#opciones_usuario_conocido a,
form#salir [type="submit"] {
  font-family: 'negrita', 'Trebuchet MS', Helvetica, sans-serif;
  font-size: 0.9rem;
  color: white;
  padding-top: 0.1rem;
  padding-left: 1.2rem;
  background-size: 1rem;
  background-repeat: no-repeat;
  background-position-x: left;
  background-position-y: center;
}

#opciones_usuario_conocido a {
  text-decoration: none;
  margin-right: 1rem;
  background-image: url('/img/iconos/md-person-w.svg');
  /*background-position-y: bottom;*/
  /*filter: brightness(0.2) sepia(1) hue-rotate(180deg) saturate(5);*/
}

#opciones_usuario_conocido a:hover {
  text-decoration: underline;
}

form#salir [type="submit"] {
  display: inherit;
  border: none;
  /*color: rgb(53, 111, 146);*/
  /*font-family: estandar;*/
  margin: 0;
  padding-right: 0;
  padding-bottom: 0;
  background-color: transparent;
  background-image: url('/img/iconos/md-exit-w.svg');
  font-weight: normal;
}

form#salir [type="submit"]:hover {
  text-decoration: underline;
  cursor: pointer;
}

/* Atenúa y desatenúa los elementos de la cabecera (menú y opción de salir) */
#menu #elemento__ > ul .elemento_menu ul {
  /*opacity: 0;*/
  transition:
    opacity .3s ease-out !important;
  /*! width: calc(100% - 0.5rem); */
}

header #menu #elemento__ > ul .elemento_menu span:hover ~ ul,
header #menu #elemento__ > ul .elemento_menu ul:hover {
  /*	opacity: 1;
          transition:
                  opacity .3s ease-out;*/
}


/*#menu #elemento__ > ul .elemento_menu ul,
#opciones_usuario_conocido input[type="submit"],
#opciones_usuario_conocido a {
        opacity: 0;
        transition:
                opacity .3s ease-out;
}

header:hover #menu #elemento__ > ul .elemento_menu ul,
header:hover #opciones_usuario_conocido input[type="submit"],
header:hover #opciones_usuario_conocido a {
        opacity: 1;
        transition:
                opacity .08s ease-out;
}*/

/* Listas en general */
main article {
  margin: 0.5rem 0;
}

/* Formularios en general */



.campo,
fieldset {
  position: relative;
  margin-top: 1.1rem;
  margin-bottom: 1.1rem;
  width: 100%;
}

label {
  /* A retirar en futuras revisiones */
  display: block;
}

/*label,*/
.rotulo_campo.de_campo,
legend {
  font-family: negrita;
  color: #747f8a;
}
.rotulo_campo.de_campo{
  /*color: #127594;*/
  margin-top: 0.7rem;
}

legend {
  position: absolute;
  top: 1rem;
  font-size: 1.4rem;
  /*color: rgba(9, 65, 82, 0.2);*/
}

.rotulo_campo.bloque {
  display: block;
}

.rotulo_campo.linea {
  display: inline-block;
}

.item_lista_campo {
  margin: 0.4rem;
  position: relative;
}

.item_lista_campo input {
  margin-right: 0.2rem;
}

option {
  font-family: negrita;
}



input,
select,
textarea {
  margin: 0.2rem 0;
}

input[type="file"] {
  margin: 0;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea
{
  padding: 0.3rem 0.5rem;
  border: none;
  border: 1px solid #97b2c3;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
select
{
  height: 2.5rem;
}

select[multiple] {
  padding: 0;
  height: auto;
}
option {
  padding: 0.3rem 0.5rem;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus, 
select:focus,
textarea:focus {
  box-shadow: 0 0 0.5rem #c9af79 inset;
}

input[type="password"] {
  font-size: 2rem;
}

input[type="submit"],
button {
  padding: 0.3rem 0.6rem;
  /*margin: 0.6rem 0;*/
  border-radius: 0.4rem;
  display: block;
  border: 1px solid #DBDBDB;
  background-color: #DCDCDC;
}

/* Casillas personalizadas */
input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}
input[type="checkbox"] + label {
  padding-left: 1.4rem;
}
input[type="checkbox"] + label::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1rem;
  height: 1rem;
  border: 1px solid #1D7D4C;
  background-color: white;
}
input[type="checkbox"] + label::after {
  content: " ";
  position: absolute;
  left: 0;
  top: -0.5rem;
  width: 1.7rem;
  height: 1.7rem;
  background-image: url('/img/iconos/md-checkmark-azul.svg');
  background-repeat: no-repeat;
  background-position: bottom;
  opacity: 0;
  transition: 
    opacity 0.06s ease-in 0s;

}
input[type="checkbox"]:checked + label::after {
  opacity: 1;
}
input[type="checkbox"]:disabled + label::before {
  border: 1px solid #9abac9;
  background-color: rgb(250, 250, 250);
}
input[type="checkbox"]:disabled:checked + label::after {
  background-image: url('/img/iconos/md-checkmark-desactivado-azul.svg');
}


input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
  width: 90%;
}

input[type="date"],
input[type="time"] {
  width: auto;
}

/* Círculos */
input[type="radio"] {
  opacity: 0;
  position: absolute;
}
input[type="radio"] + label {
  padding-left: 1.4rem;
}
input[type="radio"]:not(:checked) + label::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.3rem;
  height: 1.3rem;
  background-image: url('/img/iconos/ios-radio-button-off-azul.svg');
  background-repeat: no-repeat;
  /*background-size: 1rem;*/
  background-position-y: -0.1rem;
  background-position-x: -0.1rem;
}
input[type="radio"]:checked + label::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.3rem;
  height: 1.3rem;
  background-image: url('/img/iconos/ios-radio-button-on-azul.svg');
  background-repeat: no-repeat;
  /*background-size: 1rem;*/
  background-position-y: -0.1rem;
  background-position-x: -0.1rem;
}
input[type="radio"]:disabled:not(:checked) + label::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.3rem;
  height: 1.3rem;
  background-image: 
    url('/img/iconos/ios-radio-button-off-desactivado-azul.svg');
  background-repeat: no-repeat;
  /*background-size: 1rem;*/
  background-position-y: -0.1rem;
  background-position-x: -0.1rem;
}
input[type="radio"]:disabled:checked + label::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.3rem;
  height: 1.3rem;
  background-image: 
    url('/img/iconos/ios-radio-button-on-desactivado-azul.svg');
  background-repeat: no-repeat;
  /*background-size: 1rem;*/
  background-position-y: bottom;
  background-position-x: -0.1rem;
}

/* Selector de ficheros */
.selector_ficheros_boton {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 0.3rem;
  width: 10rem;
  height: 2.5rem;
  background-color: #127594;
  color: white;
  cursor: pointer;
  font-family: negrita;
  font-size: 0.9rem;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

.selector_ficheros_boton:hover,
.selector_ficheros_contenedor:focus-within .selector_ficheros_boton {
  border: 0.2rem solid #9abac9;
}

.selector_ficheros_contenedor {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.selector_ficheros_contenedor input[type=file] {
  position: relative;
  height: 0;
  width: 0;
  opacity: 0;
}

/* Resalta casillas y círculos cuando hover o puntero */
input[type="checkbox"]:hover:not(:disabled) + label,
input[type="radio"]:hover:not(:disabled) + label {
  color: #127594;
}
input[type="checkbox"]:focus:not(:disabled) + label,
input[type="radio"]:focus:not(:disabled) + label {
  color: #127594;

}

/*input[type="checkbox"]:focus:not(:disabled) + label:before,
input[type="radio"]:focus:not(:disabled) + label:before {
        content: "\25B8";
        position: absolute;
        right: -2.2rem;
}*/


/* Indicadores de campo requerido */
.campo .indicador_campo_requerido,
.indicador_item_requerido {
  color: rgb(158, 31, 71);
  padding-left: 0.1rem;
}
.indicador_item_requerido {
  font-family: negrita;
}


/* Textos de ayuda a los campos de formularios */
.campo .texto_ayuda {
  font-size: 0.9rem;
  margin-top: 0.1rem;
  opacity: 0.7;
  color: #2b3820;
  /*font-style: italic;*/
}


/* Fieldsets */
fieldset {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 1rem;
  border: none;
  border-radius: 0.3rem;
  box-shadow: 0 0 0.2rem #97b2c3;
}

fieldset.tiene_rotulo {
  padding-top: 3rem;
}



/*#sipcam_interno {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 100vh;
        width:50%;
        justify-content: flex-start;
        align-items: flex-start;
}*/

/*#sipcam_interno .campo {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: 10px;
}*/

form {
  /*width: 90%;*/
  min-width: 300px;
  /*max-width: 700px;*/
}

/*#sipcam_interno {
        display: grid;

        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;

                        grid-auto-columns: 1fr;
                        grid-auto-rows: auto;

                grid-template-areas:
                        'a b c d'
                        'e f g h'
                        'i j k l'
                        'm n o p'
                        'q r s t';

        gap: 1rem 1rem;

        grid-auto-flow: column dense;
}

.campo.nota,
.campo.enviar {
        grid-column: 1 / 3;
}

fieldset.tiene_items_1 {grid-row-end: span 1;}
fieldset.tiene_items_2 {grid-row-end: span 2;}
fieldset.tiene_items_3 {grid-row-end: span 3;}
fieldset.tiene_items_4 {grid-row-end: span 4;}
fieldset.tiene_items_5 {grid-row-end: span 5;}
fieldset.tiene_items_6 {grid-row-end: span 6;}
fieldset.tiene_items_7 {grid-row-end: span 7;}
fieldset.tiene_items_8 {grid-row-end: span 8;}
fieldset.tiene_items_9 {grid-row-end: span 9;}
fieldset.tiene_items_10 {grid-row-end: span 10;}*/


/*#sipcam_interno > * {
        float: left;
        width: 48%;
}

#sipcam_interno > *:nth-child(2N +1) {
        margin-right: 4%;
}*/

/* Notificaciones */

#notificaciones {
  position: relative;
  /*! width: 50%; */
  margin: 0 auto 2rem;
  padding: 1rem;
  /*	border-top: 1px solid rgba(255, 255, 255, 0.7);
          border-bottom: 1px solid rgba(255, 255, 255, 0.7);
          border-radius: 0.5rem/1px;
          box-shadow: 0 0 3px rgb(255, 255, 255);*/
  /*overflow: hidden;*/
  /*	background: linear-gradient(
                  rgba(255, 255, 255, .5),
                  rgba(255, 255, 255, .4),
                  rgba(255, 255, 255, .1),
                  rgba(255, 255, 255, .3));*/
}

#notificaciones::before {
  content: '';
  position: absolute;
  top: 2px; right: 1px; bottom: 2px; left: 1px;
  /*border-radius: 13px;*/
  /*! z-index: -1; */
  /*! background: linear-gradient(135deg,
    rgba(255, 255, 255, .6) 1%,
    rgba(255, 255, 255, .3) 24%,
    rgba(255, 255, 255, .2) 49%,
    rgba(255, 255, 255, .1) 51%,
    rgba(255, 255, 255, .1) 75%,
    rgba(255, 255, 255, .3) 95%); */
  border: 2px solid white;
  border-radius: 0.4rem;
  background-color: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0.2rem 0.2rem rgba(0, 0, 0, .3);
}

#notificaciones::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  /*! border-top: 1px solid rgba(255, 255, 255, 0.7); */
  /*! border-bottom: 1px solid rgba(255, 255, 255, 0.7); */
  /*! border-radius: 0.5rem/1px; */
  /*! box-shadow: 0 0 3px white; */

}

#notificaciones p {
  position: relative;
  padding-left: 2rem;
  margin-top: 0.4rem;
  margin-bottom: 0.4rem;
  text-shadow: 
    0 0 1px white,
    1px 0 1px white,
    0 1px 1px white;
}

#notificaciones.modificable_js {
  /*height: 0;*/
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -2rem;
}

#notificaciones.modificable_js p {
  margin-top: -5rem;
}

#notificaciones.modificable_js.visible p {
  margin-top: 0.4rem;
  transition: 
    margin-top .3s ease-out;
}

#notificaciones.modificable_js.visible {
  /*height: 100%;*/
  padding-top: 1rem;
  padding-bottom: 1rem;
  margin-top: -1rem;
  transition: 
    padding-top .3s ease-out,
    padding-bottom .3s ease-out,
    margin-top .3s ease-out .3s;
  z-index: 1;
}


#notificaciones .confirmacion {
  color: rgb(30, 158, 121);
}
#notificaciones .neutro {
  color: rgb(31, 128, 158);
}
#notificaciones .alerta {
  color: rgb(158, 134, 31);
}
#notificaciones .error {
  color: rgb(158, 31, 71);
}

#notificaciones .confirmacion::before,
#notificaciones .neutro::before,
#notificaciones .alerta::before,
#notificaciones .error::before {
  content: '';
  background-repeat: no-repeat;
  background-position: center top;

  position: absolute;
  left: 0.3rem;
  width: 1.3rem;
  height: 1.3rem;
}

#notificaciones .confirmacion::before {
  background-image: url('/img/iconos/md-checkmark-col.svg');
}

#notificaciones .neutro::before {
  background-image: url('/img/iconos/md-information-circle-col.svg');
}

#notificaciones .alerta::before {
  background-image: url('/img/iconos/md-warning-col.svg');
}

#notificaciones .error::before {
  background-image: url('/img/iconos/md-close-col.svg');
}

/*
#notificaciones .confirmacion::before {
        content: '┏';
        font-size: 1.5rem;
        transform: rotate(224deg);
        display: block;
        width: 1rem;
        height: 1rem;
        transform-origin: center center;
         float: left; 
        position: absolute;
        left: 0;
        top: 0.5rem;
}

#notificaciones .neutro::before {
        content: 'ℹ';
        font-size: 0.9rem;
        font-family: negrita;
        position: absolute;
        left: 0.3rem;
        line-height: 1.1rem;
        background-color: rgb(31, 128, 158);
        color: white;
        width: 1.1rem;
        height: 1.1rem;
        text-align: center;
        border-radius: 0.55rem;
        text-shadow: none;
}

#notificaciones .alerta::before {
        content: '▲';
        font-size: 1.3rem;
        position: absolute;
        left: 0.16rem;
        line-height: 1.2rem;
}

#notificaciones .error::before {
        content: '✖';
        font-size: 1.3rem;
        position: absolute;
        left: 0.3rem;
        line-height: 1.2rem;
}*/

/* Formulario de roles */
.usuario_rol_asigna_retira {
  display: grid;
  grid-template-columns: 7rem 7rem;
  grid-template-rows: 1.5rem 1.5rem;
  grid-template-areas: 
    "rol accion" 
    "estado accion";
  grid-gap: 0.2rem;
  justify-content: start;
  margin-bottom: 0.5rem;
}

.usuario_rol_asigna_retira .nombre_rol,
.usuario_rol_asigna_retira .estado_usuario_rol,
.usuario_rol_asigna_retira input[type="submit"] {

  align-self: center;

}

.usuario_rol_asigna_retira .nombre_rol {
  grid-area: rol;
  align-self: end;
  font-family: negrita;
}

.usuario_rol_asigna_retira .nombre_rol::first-letter {
  text-transform: uppercase;
}

.usuario_rol_asigna_retira.retira_rol .estado_usuario_rol{
  font-family: estandar;
}

.usuario_rol_asigna_retira.asigna_rol .estado_usuario_rol{
  grid-area: estado;
  align-self: start;
  opacity: 0.4;
}

.usuario_rol_asigna_retira input[type="submit"] {
  grid-area: accion;

}

.usuario_rol_asigna_retira.asigna_rol input[type="submit"] {
  color: rgb(30, 158, 121);
}

.usuario_rol_asigna_retira.retira_rol input[type="submit"] {
  color: rgb(158, 31, 71);
  font-family: estandar;
}

/* Módulos */
.modulo {

}


/* Roles y permisos */
#roles_y_permisos {
  width: 100%;
  max-width: unset;
}

.grupo_rotulo {
  color: #127594;
  margin-bottom: 0;
  border-bottom: 0.5rem solid #c3d6df;
}

.permiso {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  /*margin: 0.5rem 0;*/
  padding: 0.5rem 0;
  border-bottom: 1px solid #9abac9;
}
.permiso:first-of-type {
  border-top: 0.1rem solid #9abac9;
  margin-top: 0;
}
.permiso:last-of-type {
  margin-bottom: 3rem;
}
.permiso:first-of-type:last-of-type {
}
.permiso:hover {
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 1rem 0.5rem -1rem rgba(18, 117, 148, 0.1) inset,
    0 -1rem 0.5rem -1rem rgba(18, 117, 148, 0.1) inset;
}
.permiso_descripcion {
  padding: 0.5rem 0;
  flex: 1 1 50%;
  opacity: 0.9;
}
.permiso:hover .permiso_descripcion  {
  opacity: 1; 
}

.permiso_descripcion h3 {
  margin: 0 0 0.2rem 0;
  font-size: 1.05rem;
}
.asignacion_roles {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex: 1 0 50%;
  padding: 0 0.5rem;
}
.rol_asignado_a_permiso {
  position: relative;
  flex: 1 0 0;
}
.rol_asignado_a_permiso:hover {
  opacity: 1;
  color: black;
}
.rol_asignado_a_permiso input[type="checkbox"] + label {
  padding-top: 1.2rem;
  padding-left: 0;
  padding: calc(1.2rem + 0.5rem) 0.5rem 0.5rem 0.5rem;
  margin: 0 0.5rem;
}
.rol_asignado_a_permiso input[type="checkbox"] + label:before {
  top: 0.5rem;
  left: 1rem;
}
.rol_asignado_a_permiso input[type="checkbox"] + label:after {
  top: 0rem;
  left: 1rem;
}
.rol_asignado_a_permiso input[type="checkbox"] + label:hover {
  /*border: 2px solid rgba(18, 117, 148, 0.1);*/
  box-shadow: 0 0 0 2px rgba(18, 117, 148, 0.1);
  cursor: pointer;
}


.rol_asignado_a_permiso label:hover {
  /*	opacity: 1;*/
}
.rol_asignado_a_permiso label input {
  opacity: 0.8;
  position: relative;
}
.rol_asignado_a_permiso label:hover input {
  opacity: 1;
}

/* Buscador de candidatos */
#busqueda_candidatos label {
  display: inline;
  padding-left: 0.5rem;
}

#busqueda_candidatos [name="busqueda"] {
  width: 60%;
  /*display: block;*/
}

#busqueda_candidatos #criterios {
  display: block;
  height: 9rem;
  position: relative;
}

#busqueda_candidatos #criterios > div {
  float: left;
  /*width: 9rem;*/
}

#busqueda_candidatos .criterio {
  display: inline-block;
  /*position: absolute;*/
  margin: 0.5rem 0;
  padding: 0.5rem 1rem;
  /*border: 1px solid green;*/
}

#busqueda_candidatos .criterio .rotulo {

}

#busqueda_candidatos small {
  font-size: 0.8rem;
}

#busqueda_candidatos .separador {
  /*position: absolute;*/
  color: transparent;
  width: 1px;
  height: 100%;
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  border-left: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0.5rem/1px;
  box-shadow: 0 0 3px rgb(255, 255, 255);

}

#busqueda_candidatos [type="submit"] {
  display: inline;
}



/* Marcados como desactivados */
#elemento_a,
#elemento_b,
#elemento_c {
  opacity: 0.6;
}

#menu .elemento_menu.n2.hilo_activo > ul{
  display: block;
}

#menu .elemento_menu.n2.hilo_activo > span,
#menu .elemento_menu.n2.desplegado > span {
  box-shadow: 0 0.5rem 0.5rem -0.4rem #ecebe4;
  transition: box-shadow 0.2s ease-in;
}

#menu .elemento_menu.n2 span {
  position: relative;
  display: block;
  padding-top: 0.6rem;
  padding-bottom: 0.3rem;
}

#menu .elemento_menu.n2 a > span,
#menu .elemento_menu.n2 > span {
  position: relative;
  display: inline;
  padding-top: 0.5rem;
  padding-top: 0.2rem;
}

/*#menu .elemento_menu.n2 > li {
  padding-top: 0;
}*/

#menu .elemento_menu.n2 > span:hover{
  color: #3f7292;
}

#menu .elemento_menu > span::before{
  content: '·';
  position: absolute;
  top: 0.2rem; 
  bottom: 0; left: 0; width: 1.5rem;
  background-image: url("/img/iconos/sennala-punto.svg");
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position: center right;
  opacity: 0.4;
}

#menu .elemento_menu.n2 > span::before{
  content: '';
  /*position: absolute;*/
  top: 0; 
  /*bottom: 0; left: 0; width: 1.5rem;*/
  background-image: url("/img/iconos/sennala.svg");
  /*  background-repeat: no-repeat;
    background-size: 1.5rem;
    background-position: center right;
    opacity: 0.4;*/
}


#menu .elemento_menu.n2 > span:hover:before{
  opacity: 0.6;
}


/*
#elemento_meteo{
  background-image: url("/img/iconos/menu/sol(1).svg");
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
#elemento_meteo:hover{
  background-image: url("/img/iconos/menu/sol(1)Hover.svg");
}
#elemento_carta_navegacion_por_pagina{
  background-image: url("/img/iconos/menu/pantalla-con-grafico-lineal.svg");
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
#elemento_carta_navegacion_por_pagina:hover{
  background-image: url("/img/iconos/menu/pantalla-con-grafico-linealHover.svg");
}
#elemento_carta_navegacion_recursos_con_seguimiento{
  background-image: url("/img/iconos/menu/ordenador-conectado-a-la-red.svg");
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
#elemento_carta_navegacion_recursos_con_seguimiento:hover{
  background-image: url("/img/iconos/menu/ordenador-conectado-a-la-redHover.svg");
}
#elemento_carta_navegacion_seguimiento_spread{
  background-image: url("/img/iconos/menu/participacion.svg");
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
#elemento_carta_navegacion_seguimiento_spread:hover{
  background-image: url("/img/iconos/menu/participacionHover.svg");
}
#elemento_carta_navegacion_grafico_nodos{
  background-image: url("/img/iconos/menu/enlace-molecular.svg");
  background-repeat: no-repeat;
  background-size: 30px 30px;
}
#elemento_carta_navegacion_grafico_nodos:hover{
  background-image: url("/img/iconos/menu/enlace-molecularHover.svg");
}
*/

/*#menu .elemento_menu > a {
  position: relative;
  display: block;
  width: 100%;
  padding: 0.5rem 0.7rem;
  margin-top: 1px;

}
nav .elemento_menu a {
  margin-left: 33px;
  bottom: 0.3rem;

}
#menu #elemento__ a#enlace__ {

  top: 1.1rem;
  width: calc(13rem + 2vw);
  height: 101px;
  margin-left: 0px;
  background-image: url("/img/sipcamdata.png");
  background-size: contain;

}*/



/* Pie de página */

footer {
  background-color: #D1D1D1;
  box-shadow: 
    0 1rem 0.5rem -1rem rgba(0, 0, 0, 0) inset, 
    1.2rem 0 0.5rem -1rem rgba(0, 0, 0, 0.1) inset;
  position: relative;
  /*! width: calc(100% + 17rem); */
  /*! left: -17rem; */
  /*! border: 1px solid red; */
  z-index: 1;
  /*! opacity: 0.5; */
  min-height: 10rem;
}

footer::before {
  content: "";
  position: absolute;
  left: -17rem;
  top: 0;
  width: 17rem;
  /* border: 1px solid red; */
  height: 100%;
  background-color: #EAEAEA;
  /* box-shadow: 0 1rem 0.5rem -1rem rgba(0, 0, 0, 0.5) inset; */
}

footer .powered_by_fluture {
  /*! margin-top: 5rem; */
  opacity: 0.5;
  left: -15rem;
  position: absolute;
  bottom: 1.6rem;
}

footer .powered_by_fluture .cursor {
  animation: parpadea 2s infinite;
}
@keyframes parpadea{
  0% {color: #000;}
  49% {color: #000;}
  50% {color: transparent;}
  100% {color: transparent;}
}

/* Delightful subrayado */
.subray {
  text-shadow: 1px 0px 0 white, -1px 0px 0 white;
}

.subray::before {
  content: " ";
  position: absolute;
  top: 0100%;

  background-color: #356f92;
  text-shadow: 1px 0px 0 white, -1px 0px 0 white;
  width: 100%;
  height: 1px;

}
.subray:hover::before {
  animation: subrayado 0.8s;
}
@keyframes subrayado{
  0% {
    top: 100%;
    height: 1px;
  }
  25% {
    top: 0%;
    height: 100%;		
    opacity: 0.5;
  }
  50% {
    top: 0%;
    height: 1px
  }
  75% {
    top: 0%;
    height: 100%;		
    opacity: 0.5;
  }
  100% {
    top: 100%;
    height: 1px;
  }
}

/*#al_fondo {
  position: absolute;
  bottom: 0;
  border: 1px solid red;
  height: 1rem;
  width: 1rem;
}

#escondedor {
  position: sticky;
  bottom: 2rem;
  left: 0rem;
  margin-left: -17rem;
  z-index: 1;
}*/

#escondedor { 
  position: fixed;
  bottom: 0; 
  left: 17rem; 
  z-index: 1000;
  height: 4rem; 
  width: 4rem; 
  overflow: 
    hidden; 
  transition: 
    left 0.05s ease-out; 
} 

#escondedor:hover::before{ 
  width: 2rem; 
  color: rgba(0,0,0,0.7); 
} 

body.lateral_escondido #escondedor{ 
  left: 0;
} 

body.lateral_escondido {
  grid-template-columns: 0 auto; 
} 

body.lateral_escondido header { 
  /*display: none;*/ /*! z-index: -1; */ 
  visibility: hidden;
  position: static; } 

body #escondedor::before { 
  content: '\0003C'; 
  color: rgba(0,0,0,0.3);
  position: absolute;
  top: 0.5rem; right: 0; bottom: 0; left: 0; 
  font-family: unidades;
  font-size: 2.5rem;
  line-height: 2.5rem;
  display: flex; 
  justify-content: right; 
  align-items: flex-start; 
  padding-right: 0.4rem; 
  background-color: white; 
  box-shadow: 0 0 0.5rem rgba(0,0,0,0.5); 
  border-radius: 0 1.5rem 1.5rem 0; 
  height: 2.5rem; 
  width: 1.7rem; 
  transition: 
    width 0.05s ease-in, 
    color 0.05s ease-in; } 

body.lateral_escondido #escondedor::before {
  content: '\0003E'; 
} 

/*esconder lista*/ 
.lateral_escondido #menu .elemento_menu.n2 > ul{ 
  visibility: hidden; 
} 

.lateral_escondido #menu #elemento__ a#enlace__{ 
  left: calc(50vw - 8.1rem);  

} /*pruebaloader*/ 
@media (max-width: 450px){ 
  .loader{ padding: 0; }
}


/*PRUEBA CRUD*/

#contenido > .lista_items {


  display: grid;
  /* grid-template-columns: repeat(3, 1fr); */
  grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
  /* grid-auto-rows: 1fr; */
  grid-gap: 2rem;

}

.item_entidad {
  position: relative;
  min-height: 5rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: white;
  border-radius: 0.4rem;
  /*overflow: hidden;*/
  box-shadow: 
    0 -0.2rem 0.2rem -0.2rem #000000a6, 
    0 0.2rem 0.2rem -0.2rem #000000a6, 
    -0.4rem 0 0.5rem -0.5rem #321e0033, 
    0.4rem 0 0.5rem -0.5rem #321e0033;
}

.item_entidad *.crud {
  display: inline;
  position: absolute;
  /*  border-radius: 0.4rem 0 0.4rem 0;
    right: 0;
  */  bottom: 0;/*
    overflow: hidden;
    height: 1.2rem;*/

}

.item_entidad a.crud {
  /*position: relative;*/
  width: 1.5rem;
  color: transparent;
  right: 1.4rem !important;
}

.item_entidad a.crud::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;

  background-repeat: no-repeat;
  background-position-y: center;
  background-position-x: center;
  background-size: 1rem;
}


.item_entidad a.ver {
  /*background-color: blue;*/
  width: 1.5rem;
  color: transparent;
  right: 3rem !important;
}

.item_entidad a.modificar {
  /*width: 2rem;*/
  /*background-color: green;*/
}

.item_entidad  a.borrar {
  /*background-color: red;*/
  width: 1.5rem;
  color: transparent;
  right: 0rem !important;
}


.item_entidad a.ver::before {
  background-image: url(/img/iconos/eye-outline.svg);
  filter: invert(58%) sepia(31%) saturate(6207%) hue-rotate(159deg) brightness(91%) contrast(101%);
}

.item_entidad a.modificar::before {
  background-image: url(/img/iconos/create-outline.svg);
  background-position-x: calc(50% + 0.1rem);
  filter: invert(41%) sepia(11%) saturate(2259%) hue-rotate(87deg) brightness(101%) contrast(101%);
}

.item_entidad a.borrar::before {
  background-image: url(/img/iconos/close-outline.svg);
  filter: invert(16%) sepia(65%) saturate(3246%) hue-rotate(346deg) brightness(81%) contrast(110%);
}



















/*lista eventos provisionalemnte en estandar*/

#contenido > .crud.crear{
  display: inline-block;
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-radius: 0.3rem;
  background-color: #fff;
  font-family: negrita;
  text-decoration: none;
  cursor: pointer;
  color: #4176a9;
  box-shadow: 0 0.1rem 0.2rem -0.1rem #666;
  transition: color 0.05s ease-in, background-color 0.05s ease-in, box-shadow 0.05s ease-in;
  background-image: url("/img/iconos/mas.png");
  background-size: 1.3rem;
  background-repeat: no-repeat;
  padding-left: 2.3rem;
  background-position-y: center;
  background-position-x: 0.3rem;
}
#contenido > .crud.crear:hover{
  background-color: #fff;
  color: #1d81e1;
  box-shadow: 0 0.15rem 0.2rem -0.05rem #222;
}

/*ul.lista_items li.item_entidad {
  display: inline flow-root list-item;
  width: 27rem;
  flex-wrap: wrap;
  position: relative;
  margin: 0 0 0.7rem 0;
  height: 4rem;
  border-radius: 0.5rem;
  padding: 0.5rem;
  background-color: #fff;
  border-radius: 0.5rem;
  box-shadow: 0 -0.2rem 0.2rem -0.2rem #000000a6, 0 0.2rem 0.2rem -0.2rem #000000a6, -0.4rem 0 0.5rem -0.5rem #321e0033, 0.4rem 0 0.5rem -0.5rem #321e0033;
  margin-right: 7rem;
  font-weight: bold;
}*/

/*:not(.enlaces_crud) > .crud.modificar, 
:not(.enlaces_crud) > .crud.borrar,
:not(.enlaces_crud) > .crud.ver {
  position: absolute;	
  top: 2rem;
  background-size: 1.4rem;
  background-repeat: no-repeat;
  padding-left: 1.5rem;
  background-position-y: center;
  text-decoration: none;
  color: #4176a9;
  font-weight: initial;
  height: 2rem;
  display: flex;
  align-items: center;
  transition: 0.2s ease-in-out;
}*/
/*:not(.enlaces_crud) > .crud.modificar:hover, 
:not(.enlaces_crud) > .crud.borrar:hover,
:not(.enlaces_crud) > .crud.ver:hover{
  color: #1d81e1;
  transform: scale(1.1);
}*/
:not(.enlaces_crud) > .crud.modificar{
  background-image: url("/img/iconos/documento.png");	
  right: 6rem;
}
:not(.enlaces_crud) > .crud.borrar{
  background-image: url("/img/iconos/borrar.png");
  right: 1rem;
}
:not(.enlaces_crud) > .crud.ver{
  background-image: url("/img/iconos/ver.png");
  right: 11rem;
  padding-left: 1.7rem;
}
.separador_accesible {
  /* visibility: hidden; */
  display: none;
}