/* Variables */
   /*Colors*/
   :root {
      /* Fonts */
      --body-font: 'Poppins', sans-serif;
      /*Colors*/

      --primary-color: #5C9BD4;
      --primary-color-hover: #153352;
      --background-grey: #f5f5f5;
      --success-color: #43D385;
      --error-color: #FF5353;
      --pseudo-black: #333;
      --black: #000;
      --white: #FFF;
      --grey:#ADADAD;

   }

   .page__content h1,.page__content h2,.page__content h3,.page__content h4,.page__content h5 {
      font-family: var(--body-font) !important;
   }
   .button--material {
      font-family: var(--body-font) !important;
   }

#contenido-app {
   width:100%;

}

#contenido-app .page .page__background {
   background-color:var(--white);
}

#contenido-app .page .page__content {
   font-family: var(--body-font) !important;
}

@media(min-width:768px) {
   .container {
      padding:25px 25px 25px 25px;
      max-width:1280px;
      margin:0 auto;
   }
   .container-last {
      padding:25px;
      max-width:1280px;
      margin:0 auto;
      display:flex;
      flex-direction:column;
      justify-content:center;
   }
}

/* Structure */

.container {
   padding:25px 25px 25px 25px;
}

.container-last {
   padding:25px;
}

.centerf {
   text-align:center;
}

@media(min-width:768px) {
   .boxed-desktop {
     /* width:650px; */
      margin:0 auto;
   }
}

@media(min-width:768px) {
   .center_flex_content {
      display:flex;
      flex-direction:column;
      justify-content:center;
   }
}


/* UTILS */

.text-light-grey {
   color:var(--grey);
   font-size:14px;
   font-weight:300;
}

.relative {
   position:relative;
}

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

:root{
   --toolbar-height:90px;
   --tabbar-height:60px;
   --tabbar-height: 60px;
   --tabbar-button-line-height: 60px;
   --toolbar-button-color: white;
   --material-toolbar-button-color:#5aa6d2;

   --bordecard: #5aa6d2;
   --amarillo: #F9D314;
   --rojo: #ff0000;
   --azuloscuro: #132d3e59;
   --azuloscuro2:#0c1e2a96;
   --azuloscuro3:#1E4057;

   --fondoagua:#5AA6D247;


   --body-font: "Montserrat", Sans-serif !important;


   --tabbar-active-color:white;
   --tabbar-active-background:var(--bordecard);
   --button-background-color :var(--bordecard);

   --tabbar-height:50px;
   --tabbar-button-line-height : 30px;


   --list-header-padding:13px;
   --list-header-background-color:var(--bordecard);
   --list-header-color:white;

   --list-item-chevron-color:var(--azuloscuro);
   --list-header-font-size:15px;

   --highlighted : #ffffff33;

}
body{
   font-family: "Montserrat", Sans-serif !important;
   -webkit-font-smoothing: antialiased;
   font-weight: 400;
}

.card {    font-family: var(--body-font);   display: flex;     align-items: center;     justify-content: space-around;     flex-wrap: wrap;}
.card--material {    font-family: var(--body-font);  }

.toolbar {align-items: center; background-image: url(../img/ondas-header1-scaled.jpg); background-size: initial; overflow: visible; box-shadow: 1px 1px 8px 4px #35445370;}
.toolbar-button { font-family: var(--body-font); }


.entorno {margin-top:var( --toolbar-height);}

.list-header { border-bottom: solid 2px var(--azuloscuro) ;}

.tabbar {height:auto;}
.tabbar__item { margin: 5px;}


.tabbar__item.active {background: var(--tabbar-active-background);   border-bottom: solid 2px var(--tabbar-active-color);  }
.tabbar__icon+.tabbar__label { white-space: normal; font-family: var(--body-font); }
@media (max-width: 500px) {
   .tabbar-saih .tabbar__label{ font-size: 10px !important; }
}

@media (max-height: 400px) {
   .tabbar__button{ padding:initial !important; }
   .search-input { height: 40px !important;}
   .tabbar-saih {top: 52px !important;}
   .tabbar__content { margin-top:-10px  !important;}
   :root{
      --toolbar-height:50px;
   }
   .recogido {padding-top: 0px;}
}
.tabbar__button { padding: 5px;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-items: center;
    flex-direction: row; }

.list {font-family: var(--body-font); width: 100%;}

.list-item--expandable.list-item--expanded {background: var(--fondoagua);}
#dialog-estacion .list-item--expanded {}
.list-item--expanded .list-item__top { border-bottom: solid 1px var(--azuloscuro);}
.nombre-acordeon-1 {font-weight: bold;}

.recogido { max-width: 1000px; margin: auto; padding-top: 10px; }

.dialog-2 {
   display: block;
   z-index: 10001;
   top: 0;
   margin: 5px auto;
   max-width: 1200px;
   border-radius: 12px;
   box-shadow: 3px 5px 9px 2px #00000033;
   background: white;
}

.page__background { background:white;}

.dialog {     
    top: 10px;
    left: 0%;
    max-height: calc(100vh - 220px);
    height: auto;
    width: 98%;
    transform: translate(0%,5%);
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 4px 5px 6px 2px #72727254;
    overflow: auto;  
}

#tabbar-datos-tiempo-real, #tabbar-caudales-minimos {
  /*position: relative; */
  /* width: 100%; */
  /*max-width: 1200px;*/
  margin: auto;
}


.table { display:   grid; }
.table-header { font-weight:  bold;   display: grid;   grid-template-columns: repeat(4, 1fr);  }
.table-row  {   display: grid;   grid-template-columns: repeat(4, 1fr); }
.table-row:nth-child(even) {   background-color: #dfdfdf1f;  }
.table-row:hover {   background-color: #b4eeff40;  }
.table-col  {
  display: flex;
  justify-content: center;
}

.hide {display: none;}

/* Aqui en movil */
@media (max-width: 1204px) {
   .oculto-movil { display: none; }
   .oculto-ordenador {  }
   .dialog-2 { margin: 5px; }
}

/* Aqui para ordenador */
@media (min-width: 1204px) {
   .oculto-movil {  }
   .oculto-ordenador { display: none; }
}


.list span, .list div { user-select:text !important; -webkit-user-select:text !important;}

/* SPINNER */
.lds-dual-ring {
   display: inline-block;
   position:absolute;
   background:#00000085;
   width: 100vw;
   z-index:10002;
   top:0px;
   bottom:0px;
 }
 .lds-dual-ring:after {
   position: absolute;
   left: 0;
   right: 0;
   top: 0;
   bottom: 0;
   margin: auto;
   content: " ";
   display: block;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   border: 6px solid #fff;
   border-color: #fff transparent #fff transparent;
   animation: lds-dual-ring 1.2s linear infinite;
 }
 @keyframes lds-dual-ring {
   0% {
     transform: rotate(0deg);
   }
   100% {
     transform: rotate(360deg);
   }
 }

.lds-dual-ring {
   width: 100%
 }
 .lds-dual-ring-pequeno:after{
    width: 40px;
    height: 40px;
 }
#spinner { display: none; }

.titulogrande {text-transform: uppercase; font-size: var(--list-header-font-size); color: var(--list-header-color);  background-color: var(--list-header-background-color); padding: 12px 20px !important; margin: 0px !important;     border-bottom: solid 2px #33333361;}
.titulogrande p { padding:0px; margin:0px;}

.enlaces-menu.active {    border-bottom: solid 2px; color:var(--amarillo);}
.right  {float:right;}


.ons-swiper-target.active:not(.swiping) > .page { display: block; }
.ons-swiper-target.active:not(.swiping) > .page:not([shown]) { display: none; }
.ons-swiper-target.active:not(.swiping) { transform: translate3d(0px, 0px, 0px) !important; }

.button a {text-decoration: none; color:white !important; background-color: rgb(90, 166, 210) !important;}


.leaflet-layerstree-header input {
    margin-left: 0px;
    margin-right: 5px;
}
.footer-login {
    width: 100%;
    background:#F5F5F5;
    position:fixed;
    bottom:0;
}

.footer-login .menu-footer {
   display:flex;
   gap:1rem;
   justify-content:center;
   list-style:none;
   padding:15px 0px;
   margin:0;
   color:var(--grey);
   font-weight:300;
}

.form-login {
   width:100%;
   margin-top:-25px;
}

.form-login .item-container {
   margin:20px 5px;
}

.form-login .item-container i {
   position:absolute;
   top:50%;
   right:10px;
  transform: translate(-50%,-50%);
  color:var(--grey);
}


.form-login .item-input {
   width:100%;
   position:relative;
}


.form-login .item-container .item-input input {
   border:2px solid var(--grey);
   height:45px;
   border-radius:5px;
   padding-left:25px;
   background-image:none;
   opacity:0.7;
   font-weight:400;
   color:var(--grey);
}

.form-login .item-container .item-input span {
color:var(--grey);
font-weight:300;
top:12px;
font-size:14px;
left:25px;

}

.form-login .item-container .item-input span.text-input--material__label--active {
   transform:translate(0,-93%) scale(.85);
   background:var(--white);
}

.form-login .login-button {
   background:var(--primary-color);
   padding:3px 0px;
   text-transform:initial;
   font-size:16px;
   font-weight:400;
   margin-top:25px;

}

.link_lost_password {
text-align:center;

}

.link_lost_password a {
   display:block;
   text-decoration:none;
   margin:1.5em 0;
   color:var(--primary-color);
   font-size:14px;
}

.divider_login {
   width:100%;
   height:1px;
   background:var(--grey);
   opacity:0.7;
   margin-bottom:1.5em;
   position:relative;
}

.divider_login:after {
   content:"O";
   color:var(--grey);
   opacity:1;
   background:var(--white);
   padding:0px 10px;
   position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button_registrarse_wrapper {
   padding-bottom:50px;
}

.button_registrarse_wrapper .register-button {
   background: var(--primary-color-hover);
   padding: 3px 0px;
   text-transform: initial;
   font-size: 16px;
   font-weight: 400;
   margin-bottom:1.5em;
}




.header-login {
   text-align:center;
}

@media(min-width:768px) {
   .header-login {
      max-width:1280px;
      margin:0 auto;
   }
}

.header-login .logo-img {
   width:80%;
   margin:0 auto;
}
.header-login .logo-img img {
width:100%;
}

@media(min-width:768px) {
   .header-login .logo-img img {
      width:40%;
      }
}

.header-login h1 {
   font-weight:400;
   color:var(--primary-color-hover);
   font-size:24px;
}


<?php
	//Este fichero genera CSS que puedan estar condicionados a valores de la BBDD.
	require_once(__DIR__ . "/../inc/core.php");
	header("Content-type: text/css");

?>

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 html {
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }

 /* Sections
    ========================================================================== */

 /**
  * Remove the margin in all browsers.
  */

 body {
   margin: 0;
 }

 /**
  * Render the `main` element consistently in IE.
  */

 main {
   display: block;
 }

 /**
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */

 h1 {
   font-size: 2em;
   margin: 0.67em 0;
 }

 /* Grouping content
    ========================================================================== */

 /**
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */

 hr {
   box-sizing: content-box; /* 1 */
   height: 0; /* 1 */
   overflow: visible; /* 2 */
 }

 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */

 pre {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }

 /* Text-level semantics
    ========================================================================== */

 /**
  * Remove the gray background on active links in IE 10.
  */

 a {
   background-color: transparent;
 }

 /**
  * 1. Remove the bottom border in Chrome 57-
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */

 abbr[title] {
   border-bottom: none; /* 1 */
   text-decoration: underline; /* 2 */
   text-decoration: underline dotted; /* 2 */
 }

 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */

 b,
 strong {
   font-weight: bolder;
 }

 /**
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */

 code,
 kbd,
 samp {
   font-family: monospace, monospace; /* 1 */
   font-size: 1em; /* 2 */
 }

 /**
  * Add the correct font size in all browsers.
  */

 small {
   font-size: 80%;
 }

 /**
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */

 sub,
 sup {
   font-size: 75%;
   line-height: 0;
   position: relative;
   vertical-align: baseline;
 }

 sub {
   bottom: -0.25em;
 }

 sup {
   top: -0.5em;
 }

 /* Embedded content
    ========================================================================== */

 /**
  * Remove the border on images inside links in IE 10.
  */

 img {
   border-style: none;
 }

 /* Forms
    ========================================================================== */

 /**
  * 1. Change the font styles in all browsers.
  * 2. Remove the margin in Firefox and Safari.
  */

 button,
 input,
 optgroup,
 select,
 textarea {
   font-family: inherit; /* 1 */
   font-size: 100%; /* 1 */
   line-height: 1.15; /* 1 */
   margin: 0; /* 2 */
 }

 /**
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */

 button,
 input { /* 1 */
   overflow: visible;
 }

 /**
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */

 button,
 select { /* 1 */
   text-transform: none;
 }

 /**
  * Correct the inability to style clickable types in iOS and Safari.
  */

 button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
   -webkit-appearance: button;
 }

 /**
  * Remove the inner border and padding in Firefox.
  */

 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
 [type="submit"]::-moz-focus-inner {
   border-style: none;
   padding: 0;
 }

 /**
  * Restore the focus styles unset by the previous rule.
  */

 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
   outline: 1px dotted ButtonText;
 }

 /**
  * Correct the padding in Firefox.
  */

 fieldset {
   padding: 0.35em 0.75em 0.625em;
 }

 /**
  * 1. Correct the text wrapping in Edge and IE.
  * 2. Correct the color inheritance from `fieldset` elements in IE.
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */

 legend {
   box-sizing: border-box; /* 1 */
   color: inherit; /* 2 */
   display: table; /* 1 */
   max-width: 100%; /* 1 */
   padding: 0; /* 3 */
   white-space: normal; /* 1 */
 }

 /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */

 progress {
   vertical-align: baseline;
 }

 /**
  * Remove the default vertical scrollbar in IE 10+.
  */

 textarea {
   overflow: auto;
 }

 /**
  * 1. Add the correct box sizing in IE 10.
  * 2. Remove the padding in IE 10.
  */

 [type="checkbox"],
 [type="radio"] {
   box-sizing: border-box; /* 1 */
   padding: 0; /* 2 */
 }

 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */

 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
   height: auto;
 }

 /**
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */

 [type="search"] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }

 /**
  * Remove the inner padding in Chrome and Safari on macOS.
  */

 [type="search"]::-webkit-search-decoration {
   -webkit-appearance: none;
 }

 /**
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */

 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }

 /* Interactive
    ========================================================================== */

 /*
  * Add the correct display in Edge, IE 10+, and Firefox.
  */

 details {
   display: block;
 }

 /*
  * Add the correct display in all browsers.
  */

 summary {
   display: list-item;
 }

 /* Misc
    ========================================================================== */

 /**
  * Add the correct display in IE 10+.
  */

 template {
   display: none;
 }

 /**
  * Add the correct display in IE 10.
  */

 [hidden] {
   display: none;
 }

.btn-install {line-height: 20px; height: auto;     margin-left: 2rem;}


.menu-oculto { 
    width:250px; position: absolute; top: 0; left: -250px; z-index: 10000;  top:var(--toolbar-height);
    height: calc(100vh - 20px); /* altura toolbar Onsen */
    overflow: hidden;      
}

.menu-oculto > ons-list {
  display: block;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.menu-oculto > ons-list::after {
  content: "";
  display: block;
  height: 80px;
}


.menu-oculto ons-list ons-list {
  overflow: visible;
  height: auto;
}



.toolbar__center { line-height: initial;  height:100%; text-align: right;  display: flex;   align-items: center;      justify-content: center; }
.toolbar__left { line-height: initial; height:100%;  display: flex;   align-items: center;   justify-content: left;  }
.toolbar__right { line-height: initial;  /*height:100%;*/ display: flex;   align-items: center;   justify-content: right; }
.toolbar-button--material { /*padding: 12px; */ }


.logo-cabecera { height: 40%; margin-left: 30px;}
.logo-cabecera img { height: 100%;}

#hamburguesa { height: min-content; }
.enlaces-menu:hover  { color:var(--amarillo); }
.enlaces-menu.active  { color:var(--amarillo); border-bottom: solid 2px;}



.menu-oculto .list {background: url(../img/ondas-header1-scaled.jpg);}
.menu-oculto .list a {color:var(--toolbar-button-color); text-decoration:none;}
.menu-oculto .list a:hover { color:var(--amarillo); }

.enlaces-menu { position: relative; }
.enlaces-menu .nombre {font-size: 12px;}
.enlaces-menu .logout {color:red; font-size:12px}
.enlaces-menu:hover .submenu {display: block !important; }
.enlaces-menu .submenu {
	text-align: left;
    position: absolute;
    top: 30px;
    left: 0px;
    background: #0c1e2aab;
    height: auto;
    box-shadow: 5px 5px 6px 0px #00000024;
    border-right: solid 1px #ffffff85;
    border-left: solid 1px #ffffff85;
    padding-right:21px;

}

ons-toolbar { overflow: visible; }

.enlaces-menu .submenu ons-toolbar-button{
	width: 100%;
    display: block;
}

.caja-busqueda-movil{
    color: white;
}


@media (max-width: 1204px) {
   .logo-cabecera { margin-left: 0px;}
   .toolbar__center {    justify-content: center;}
}

/* Aqui para ordenador */
@media (min-width: 1204px) {

}


/*
#login .dialog-container {
    top: 100px;
    left: 0%;
    height: 200px;
    width: 500px;
}
*/


#resultado-login {
	padding: 10px;
    text-align: center;
   
    top: 308px;
}

.mensaje-verde {
	background: #bff1bf;
}

.mensaje-rojo {
	background: #ffd9d9;
}

.cierre-login{
	position: absolute;
	right: 30px;
	top: 30px;
	cursor: pointer;
}

.cierre-login i{
	font-size: 1.5em;
}

.cierre-login i:hover{
	color: #c50d20 !important;
}

#login .dialog{
top: 45px;
    right: 0;
    width: 100%;
    height: auto;
    max-width: 400px;
}

#login .capa-login{
	display: flex;
	flex-direction:column;
}

#login .form-login{

}

#login .login-button{cursor: pointer;}

#login .dialog-container{height: auto;  background-color: #f4f4f4;}

.texto-login{display: inline-block;
    position: relative;

    text-align: center;
    margin-bottom: 15px;}

@media (max-width: 1203px) {
  .texto-login{width:100%; margin-top: 15px; margin-bottom: 25px;}
  #login .form-login{
	
  }

  #login .dialog{
	
	}

  #login .boxed-desktop{
  	
  }
}


#page-home #metricas ons-card {height: 90%; border: solid 1px var(--bordecard); box-shadow: none;}
#page-home #metricas { text-align: center;}


.grande { font-size: 30px; }
.moreinfo { color: var(--bordecard); font-size: 16px; }

.fondoagua { background-color:var(--fondoagua); border-style:solid; border-color:var(--fondoagua);  border-width: 1px 0px 0px 0px;  padding: 0px 0px 10px 0px; }

.cont-presentacion {display: flex;  align-items: center;  justify-content: space-between;  flex-wrap: wrap;  align-content: center; }
.presentacion { flex-grow: 1; padding: 0px 20px; }
.cajabuscador-home { background-color: var(--bordecard); padding: 5px 20px; color:white;}
.cajabuscador-home h2{ margin: 0px;}



#page-home #cabeceramapa {background-image: url(../img/ondas-header1-scaled.jpg); text-align: center; color:white;}
#page-home .recogido #metricas h2 p {margin-bottom:-15px;}
#page-home .recogido #metricas p {margin-top: 0px;}
.mantenimiento{text-align: center; margin-top: 200px;}
.mantenimiento h2{font-family: var(--body-font) !important;font-size: 24px;font-weight: var(--font-weight--large)}
.mantenimiento #cabeceramapa {background-image: url(../img/ondas-header1-scaled.jpg); padding: 40px 0px 20px 0px; text-align: center; color:white; position: absolute;bottom: 1px;}
.amarillo { color: var(--amarillo); }
.amarillo a { color: var(--amarillo); }
.rojo { color: var(--rojo);  }


.icono-volumen { position: relative; width:50px; height:60px; }
.icono-volumen .over { background-image: url(../img/cubeta_vacia.png); background-size:cover; background-position: bottom;  width:100%; height: 100%; position: absolute; z-index: 10; bottom:0px; }
.icono-volumen .back { background-image: url(../img/agua.png); background-size:cover; background-position: bottom;  width:100%; height: 0%; position: absolute; bottom:0px;}

#porcentaje { min-width:80px; text-align: right; display: inline-block; }
#valor { min-width:90px; text-align: right; display: inline-block; }

.nowrap {white-space: nowrap;}

.capa-aviso {     background: #f3f2f2;     padding: 10px;      display: flex; margin:5px; align-items: center; }
.capa-aviso .icono {  font-size: 35px;  flex-grow: 1; width: 50px; text-align: right; padding-right: 10px;     opacity: 0.5;}
/*
.capa-aviso .rojo {  color: #efa3a3; }
.capa-aviso .amarillo {  color: #efa3a3; }
*/
.capa-aviso .texto { flex-grow: 1;    flex-grow: 1;     width: 100%;}
.capa-aviso .cerrar {     flex-grow: 2;     text-align: right; color:var(--azuloscuro); }

.cont-presentacion .home-buscador{
    width: 100%;
}


.card-grafico-home {
  padding:0px;
  height: auto !important;
}
#grafico-home .c3-line {
  stroke-width: 2px;
}


.search-input--material {
    box-shadow: none;
    border:solid 1px #f3f3f3;
}

.tabbar__content { margin-top: 10px; }
.list {background:none;}
.list-item__right { padding: 12px;  }

#grafico-home .c3-tooltip-container{
  text-anchor: start !important;
  text-align: left !important;
}
.map {
	width:100%;
	height: 100vh;
}

.list-item--expandable { background:none; }
.list-item--expandable.list-item--expanded .list-item__expand-chevron {
    -webkit-transform: rotate(45deg) !important;
    transform: rotate(45deg) !important;
}

.list-item--expandable.list-item--expanded > .top .list-item__expand-chevron {
    -webkit-transform: rotate(225deg) !important ;
    transform: rotate(225deg) !important ;
}

#tabbar-estacion { height: calc(100%); }
#cerrar-dialog-estacion {     position: absolute;     bottom: 8px;     right: 8px; z-index: 100; }
#plegar-dialog-estacion {     position: absolute;     bottom: 8px;  left: 8px;    width: fit-content; z-index: 100; }


.metrica-acordeon { display: flex;    /*  border-bottom: solid 2px #0000001a; */ padding:10px;   }
.metrica-acordeon .titulo-metrica-estacion {  display: block;     margin: auto;     padding: 10px;     width: 100%;        background: linear-gradient(#fbf7f7,#ffffff); }
.metrica-acordeon .datos-metrica-estacion {  flex-grow: 1;    display: flex;     flex-wrap: wrap;     justify-content: center;     align-items: center;     align-content: center; }
.metrica-acordeon .dato-metrica-estacion {  font-weight: bold; color: var(--bordecard);     font-size: 1.2em; margin:auto; max-width:160px; flex-grow: 1; text-align: left; padding: 10px; width: 20%;}
.metrica-acordeon .dato-metrica-estacion.destacada {    background: #ededed;    color: #58a0c9;  }
.metrica-acordeon .dato-metrica-estacion .reloj {  color:red; }
.metrica-acordeon .dato-metrica-estacion .label {font-size:12px; color:var(--tabbar-button-color); font-weight: normal; display: block; text-align: left; width: 100%;}
.metrica-acordeon .fecha { font-size: 0.7em; color: var(--azuloscuro); }
.metrica-acordeon .grafico { margin:auto; max-width:180px; min-width: 180px; flex-grow: 1;    display: flex;     flex-wrap: nowrap;     justify-content: flex-end;     align-items: center; }
.metrica-acordeon .galeria-imagenes {flex-grow: 1; display: flex; justify-content: center;}
.metrica-acordeon .galeria-imagenes .image-link{display: flex; flex-direction: row; justify-content: center;}
.metrica-acordeon .galeria-imagenes .image{ box-shadow: #0000002e 5px 3px 6px 0px; border-radius: 8px; width: 30%;}
.metrica-acordeon .unidad { font-size: 10px; color:var(--azuloscuro); }
.metrica-acordeon .expandable-content { background: white; }

.metrica-acordeon .list-item__center {justify-content: space-evenly; padding: 0px 0px; }

.metrica-acordeon.list-item--expanded .list-item__top {  background: #ffffff; }
.metrica-acordeon .list-item__top {   transition: all 0.8s;}

.botones-derecha { float: right; margin: 10px; }
.botones-izquierda { float:left; margin: 10px; }

.fa-arrow-right-long.arriba { transform: rotate(-45deg); color:green;}
.fa-arrow-right-long.abajo {transform: rotate(45deg); color:red;}
.fa-arrow-right-long.derecha {transform: rotate(0deg); color:orange;}


.tabbar-saih .tabbar__icon { display: inline-block !important;  font-size: 16px;}
.tabbar-saih .tabbar__label { display: inline-block !important; margin-left: 7px;     vertical-align: middle;  font-size: 18px; }

#tabbar-estacion .tabbar__icon { display: inline-block !important;     font-size: 16px; }
#tabbar-estacion .tabbar__label { display: inline-block !important; margin-left: 7px;     vertical-align: middle;  font-size: 12px; }




.tabbar--top {    max-width: 1000px;     margin: auto; border-bottom: none;}

.pequeno {font-size: 10px;}

.ver-estacion:hover {
    background: var(--highlighted);
}


/* iconos agrupados */
.leaflet-marker-icon {background:none; border: none; text-align: right;}
.leaflet-marker-icon .agrupado { width: 40px; height: 40px;}
.leaflet-marker-icon .agrupado  .cantidad-agrupada{     background: #ffffffbf;     border-radius: 13px 13px;     padding: 3px 6px;     margin: 0px -6px;}

.c3-chart-bars .c3-shape:nth-child(even) {fill:#389ee5 !important;}

#dialog-estacion .tabbar--top__content{
    top: 90px;
}
#dialog-estacion .ons-ios-scroll-fix .page__content{
    overflow: auto;
}
/* .tabbar--top__content{ top: 110px;} */

.titulo-tarjeta-estacion{
	z-index: 99999999;
    position: absolute;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: left;
    top: 58px;
    color: #081a26;
    font-weight: 500;
    font-size: 18px;
    border-bottom: 2px solid #5aa6d2;
    padding-left: 20px;
}

@media (max-width: 900px) {
    .metrica-estacion .galeria-imagenes .image{
        width: 65%;
    }
}

@media (max-width: 558px) {
    .titulo-tarjeta-estacion{
        top: 65px;
        font-size: 18px;
    }
    #dialog-estacion .tabbar--top__content{
        top: 95px;
    }
    .metrica-estacion .galeria-imagenes .image{
        width: 85%;
    }
    #tabbar-estacion .tabbar__label { display: none !important; }

    .layer-tree-control{
        min-width: 110px;
    }

}

@media (max-width: 494px) {
    .titulo-tarjeta-estacion{
        top: 65px;
        padding-left: 7px;
        font-size: 18px;
    }
    #dialog-estacion .tabbar--top__content{
        top: 105px;
    }
}

@media (max-width: 477px) {
    .titulo-tarjeta-estacion{
        top: 65px;
        padding-left: 7px;
        font-size: 18px;
        margin: 5px 0px;
    }
    #dialog-estacion .tabbar--top__content{
        top: 105px;
    }
}

@media (max-width: 447px) {
    .titulo-tarjeta-estacion{
        top: 65px;
        padding-left: 7px;
        font-size: 18px;
    }
}

@media (max-width: 426px) {
    #dialog-estacion .tabbar--top__content{
        top: 112px;
    }
}
@media (max-width: 393px) {
    .titulo-tarjeta-estacion{
        top: 50px;
        padding-left: 7px;
        font-size: 18px;
    }
    #dialog-estacion .tabbar--top__content{
        top: 112px;
    }
}

@media (max-width: 1204px) {
    .top-movil{top:-60px !important;}    
    #map{margin-top: 55px;}
}

#tabbar-datos-tiempo-real{
    top:70px;
}

.toolbar__right{line-height: unset;}


.buscador-datos-tiempo-real{
    width: 100%;
    height: 50px;
    display: inline-block;
    position: relative;
/*    top: 42px; */
    z-index: 10;
    margin-top: 5px;
    margin-left: 1px;
    margin-right: 1px;
}

/* .tiemporeal-buscador .caida-cajabuscador{    top:50px;  } */
/* .aforosenrio-buscador .caida-cajabuscador { top: 48px } */

.caida-cajabuscador{ 
    top: 3px;
    z-index: 100;  
    width: 100%;     
    box-shadow: #000000a3 3px 9px 7px 0px; 
    background-color: white;
    color: white; 
    text-align: left; 
    flex-grow: 1; 
    position: relative;
}
.cajabuscador ons-search-input {width: 100%; }


.caida-cajabuscador ul {     padding: 0px;     margin: 0px; }
.caida-cajabuscador li{     list-style: none;}
.caida-cajabuscador li a{
    color: var(--bordecard);
    text-decoration: none;
    font-weight: 600;
    width: 97%;
    display: flex;
    border-bottom: 1px solid #e5e5e5;;
    cursor: pointer;
    height: 3vh;
    text-align: center;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    padding: 15px;
}
.caida-cajabuscador li a:hover{
    background: #f3f2f2;
}

.caida-cajabuscador .texto-capa-cargando{
    color: black;
    margin-left: -20px;
}

.datos-generales .label{
    font-size: 19px;
    color: #081a26;
    font-weight: 500;
    display: inline-block;
    width: auto;
}

.datos-generales .dato{
    font-weight: 600;
    color: var(--bordecard);
    font-size: 1.2em;
    max-width: 160px;
    flex-grow: 1;
    text-align: left;
    padding: 10px;
    width: 20%;
    text-transform: uppercase;
}

.datos-generales .izquierda{
    width: 45%;
    padding: 10px;
}

.datos-generales .derecha{
    padding: 10px;
    width: 44%;
}

.datos-generales .list-item__center{
    display: flex;
    justify-content: flex-start;
}

.datos-generales .subtitulo-datos-generales{
    font-weight: bold;
    color: var(--bordecard);
    font-size: 1.5em;
    margin-left: -55px;
}

.mapa-tooltip {
 	min-width: 100px;
    min-height: 100px;
}

.mapa-tooltip .cabecera{
	background: url(../img/ondas-header1-scaled.jpg);
	color: white;
	padding:10px;
	font-size: 14px;
}
.mapa-tooltip .cabecera .pequeno {
	color:var(--amarillo);
}

.mapa-tooltip ul {
 	list-style: none;
 	padding-left: 0px;
 	margin-left: 0px;
}
.mapa-tooltip ul li {
 	color:var(--bordecard);
 	padding:10px;
 	border-bottom: solid 1px var(--azuloscuro);
}
.mapa-tooltip ul li i {
 	color:var(--azuloscuro3);
}

.leaflet-tooltip {padding:0px; }

.titulo-metrica-estacion-documentos{
    margin-bottom: 10px;
    display: block;
    padding: 4px;
    width: 100%;
    background: #5aa6d21a;
}

.titulo-metrica-estacion-documentos:hover{
    /*background: var(--tabbar-active-background);*/
    background: #a1d4f1;
}

.documentos .image-link{
    width: 100%;
    text-decoration: none;
}

/*.documentos .image-link:hover{
    background: var(--tabbar-active-background);
}*/

.documentos .image-link i{
    padding: 5px;
}

.documentos .fecha { padding-left: 5px;}

.c3-axis .tick line { display: none; }

.tutulografica { font-weight: bold; color: #0c2869;   margin-left: 15px;     margin-bottom: 10px; }

.panel-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.panel-disabled input {
  pointer-events: none;
}


#map {
	width:100%;
	height: 100vh;
}

.icono-documentos:before { color:var(--azuloscuro2); }

.titulo-archivo-informes{
	text-decoration: none;
	padding-left: 5px;
}

.enlace-descarga-informes{
	text-decoration: none;
}

.enlace-descarga-informes .list-item__center:hover{
	background-color: #e5e5e5;
}

.bloque-boton-descargar-ficheros{
	width: 100%;
}

#descargar-informes-lote{
	float: right;
	margin-bottom: 10px;
	cursor: pointer;
}

.enlace-descarga-informes .checkbox{
	position: absolute;
    right: 14px;
}

.enlace-descarga-informes .checkbox__checkmark:before{
	border: 1px solid #535353;
}

@media (max-width: 500px) {
    #descargar-informes-lote{
        margin-right: 2%;
    }
    .enlace-descarga-informes .fa-2x{
    	font-size: 1.5em;
    }
    .titulo-archivo-informes{
    	padding-left: 0px;
    	max-width: 265px;
    }

    .enlace-descarga-informes .checkbox{
    	right: 14px;
    }
}

.btn-expand-informes .list-item__center {
    padding-left: 10px;
}

.fechas-grafica-filtro {  margin-left: 15px; }
#texto-avisos-caudalesminimos .dialog {    height: initial;      margin: auto;     left: unset;     transform: unset;     position: relative;}
#texto-avisos-caudalesminimos .dialog-container { padding: 10px; }

#tabbar-caudales-minimos .tabbar--top {    max-width: 1000px; margin: 10px auto 0px auto;}

@media (max-width: 1204px) {
	#texto-avisos-caudalesminimos .dialog { width: auto; }
}

/* Aqui para ordenador */
@media (min-width: 1204px) {
	#texto-avisos-caudalesminimos .dialog {   width: 1000px;  }
}

@media (max-width: 1204px) {
    #page-caudales-minimos .top-movil{top:-60px !important;}    
}

#tabbar-caudales-minimos{
    top:70px;
}
.legend-pluviometria {background: white, border: solid 1px black; height:auto; width:auto;  border: solid 2px #bfbfbf;
    border-radius: 6px;
    background: white; margin:10px 10px; } 
.legend-pluviometria td {padding: 2px 5px;} 

#mappluviometria {
	width:100%;
	height: calc(100vh - var(--toolbar-height));
}

#page-pluviometria .recogido {padding-top: 0px;}

.leaflet-control.legend-pluviometria-animado, .leaflet-control.legend-pluviometria-escala { background: white, border: solid 1px black; height:auto; width:auto;  border: solid 2px #0000007a;
    border-radius: 6px;
    background: white; margin:10px 10px; 
    margin-top:46px;
} 
.legend-pluviometria-animado {
    width: 200px
}
.legend-pluviometria-animado table {border-spacing:0px; margin-top: 5px; height: 22px; margin-right:6px;} 
.legend-pluviometria-animado td {padding: 1px; } 
.celda-leyenda-animados .puntero {display: none;}
.celda-leyenda-animados.activa .puntero {display: block;}

.leaflet-control.legend-pluviometria-escala {
    width: 60px;
    height: 212px;
    margin-top:0px;
}

.celda-leyenda-animados .puntero {
    position: absolute;
    bottom: 25px;
    width: 77px;
    text-align: center;
    margin-left: -36px;
}

.celda-leyenda-animados .puntero .label {
    border: solid 2px #0000007a;
    background: white;
    border-radius: 7px;
    margin-bottom: -7px;
}
.celda-leyenda-animados .puntero .fa {
    color:#0000007a;
    font-size: 17px;
}
.celda-leyenda-animados.activa {  background: #005f9f }
.celda-leyenda-animados { width: 5px; height: 5px; background-color: #c7c7c7; }



#mapmeteorologia {
	width:100%;
	height: calc(100vh - var(--toolbar-height));
}

#page-meteorologia .recogido {padding-top: 0px;}

.leaflet-control.legend-predicciones, .leaflet-control.legend-predicciones-escala { background: white, border: solid 1px black; height:auto; width:auto;  border: solid 2px #0000007a;
    border-radius: 6px;
    background: white; margin:10px 10px; 
    margin-top:46px;
} 
.legend-predicciones {
    width: 200px
}
.legend-predicciones table {border-spacing:0px; margin-top: 5px; height: 22px; margin-right:6px;} 
.legend-predicciones td {padding: 1px; } 
.celda-leyenda .puntero {display: none;}
.celda-leyenda.activa .puntero {display: block;}
.celda-leyenda.activa {  background: #005f9f }
.celda-leyenda { width: 5px; height: 5px; background-color: #c7c7c7; }

#playpause { float:left} 
#playpause .fa{
    border: solid 1px #9f9f9f;
    padding: 4px;
    border-radius: 2px;
    margin: 5px;
}


.celda-leyenda .puntero {
    position: absolute;
    bottom: 25px;
    width: 77px;
    text-align: center;
    margin-left: -36px;
}

.celda-leyenda .puntero .label {
    border: solid 2px #0000007a;
    background: white;
    border-radius: 7px;
    margin-bottom: -7px;
}
.celda-leyenda .puntero .fa {
    color:#0000007a;
    font-size: 17px;
}




.leaflet-control.legend-predicciones-escala {
    width:auto;
    margin-top:0px;
    padding: 10px;
}



/* CROMA */ 


.gradient {
    width: 20px;
    height: 185px;
    white-space: nowrap;
    position: relative;
    display: flex;
    top: 4px;
    right:3px;
    float:right;
    flex-direction: column;
    border:solid 1px #efefef;
}




.domain-min {
    position: relative;
    font-size: 11px;
    float:left;
    flex: 1;
    display: flex;
    align-items: center;
}

.domain-min:first-child {
    align-items: flex-start;
}
.domain-min:last-child {
    align-items: flex-end;
}

.domain-med {
    position: relative;
    left: 25%;
    text-align: center;
    font-size: 11px;
    bottom: 3px;
    right:25px;
    float:left;
}
.domain-max {
    position: relative;
    font-size: 11px;
    float:left;
}


.grad-step {
    display: block;
    flex:1;
    width: 20px;
}

.domain-labels {
    float: left;
    display: flex;
    height: 190px;
    flex-wrap: nowrap;
    flex-direction: column;
    margin-right: 10px;
}

#time-control {
    position: absolute;
    top: 10px;
    right: 50px;
    background: white;
    padding: 10px;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  #time-control button {
    background: #0078A8;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 5px 10px;
  }
  
#page-aforosenrio .tabbar__content{
    margin-top: 10px;
}

#tabbar-aforosenrio .tabbar--top {
    max-width: 1000px;
    margin: 10px auto 0px auto;
}

/*#tabbar-aforosenrio { top: 70px;}*/

.color-alerta-0 {}
.color-alerta-1 { color:#c7cb00 !important; }
.color-alerta-2 { color:#F09917 !important;}
.color-alerta-3 { color:#F30400 !important;}

#texto-avisos-aforosenrio .dialog { height: initial;      margin: auto;     left: unset;     transform: unset;     position: relative;}
#texto-avisos-aforosenrio .dialog-container { padding: 10px; }
#tabbar-caudales-minimos .tabbar--top {    max-width: 1000px;     margin: auto;}

@media (max-width: 1204px) {
	#texto-avisos-aforosenrio .dialog { width: auto; }
  #page-aforosenrio .tabbar__content{margin-top: 66px;}
  .top-movil{top:/*-60px*/ -115px !important;}
  .fix-top-map{margin-top: 10px !important;}
}

/* Aqui para ordenador */
@media (min-width: 1204px) {
	#texto-avisos-aforosenrio .dialog {   width: 1000px;  }
  #tabbar-aforosenrio{top:50px !important;}
}

.toolbar__right{line-height: unset;}
.contenedor-aforosenrio {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 10px;
}
.resumen-aforosenrio {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

.resumen-aforosenrio ons-card {
  flex: 1;
  min-width: 120px;
  text-align: center;
}

.umbral-3 {
  background-color: #f30400;
  color: white;
}

.umbral-2 {
  background-color: #f09917;
  color: white;
}

.umbral-1 {
  background-color: #e9d736;
  color: white;
}

.normalidad {
  background-color: #3092e2;
  color: white;
}

.estado-Normalidad{
  color: #4CAF50;
  font-weight: bold;
}

.estado-Umbral.naranja{
   color: #f09917;
   font-weight: bold;
}
.estado-Umbral.amarillo{
   color: #e9d736;
   font-weight: bold;
}

.estado-Umbral.rojo{
   color: #f30400;
   font-weight: bold;
}



.umbral-normalidad {
  background-color: #4CAF50;
  color: white;
}

.valor-umbral {
  font-size: 1.4em;
  font-weight: bold;
  margin-top: 5px;
}

.filtros-aforosenrio {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.filtros-aforosenrio .filtro {
  flex: 1;
  min-width: 200px;
}

.filtros-aforosenrio .filtro .select{
    width:95%;
    border: 1px solid grey;
    border-radius: 6px;
    padding: 0px 10px;
}

.item-aforosenrio {
  padding: 15px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 12px;
}

.item-aforosenrio-contenido {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
}

.item-aforosenrio-contenido .columna {
  display: flex;
  align-items: center;
}

.titulo-aforosenrio {
  font-weight: bold;
  color: #333;
  min-width: 33%;
  max-width: 33%;
}

.grupo-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.dato {
  font-size: 14px;
  color: #666;
}

.dato .label {
  color: #999;
  font-weight: 400;
  margin-right: 4px;
}

.valor {
  font-weight: bold;
}

.valor-medido {
  flex: 1;
  min-width: 33%;
  max-width: 33%;
  font-size: 14px;
  color: #333;
  justify-content: center;
}

.valor-medido .label{
  margin-right: 5px;
}

.estado-actual {
  flex: 1;
  min-width: 20%;
  max-width: 20%;
  justify-content: flex-end;
}

.estado-actual .estado {
  font-weight: bold;
  margin-left: 5px;
}

#tabbar-aforosenrio .metrica-acordeon { display: flex;    /*  border-bottom: solid 2px #0000001a; */ padding:10px;   }
#tabbar-aforosenrio .metrica-acordeon .titulo-metrica-estacion {  display: block;     margin: auto;     padding: 10px;     width: 100%;        background: linear-gradient(#fbf7f7,#ffffff); }
#tabbar-aforosenrio .metrica-acordeon .datos-metrica-estacion {  flex-grow: 1;    display: flex;     flex-wrap: wrap;     justify-content: center;     align-items: center;     align-content: center; flex-direction: column;}
#tabbar-aforosenrio .metrica-acordeon .dato-metrica-estacion { margin:auto; flex-grow: 1; text-align: left; padding: 0px; width: 100%; max-width: unset; color: var(--tabbar-button-color); font-weight: normal; font-size: 1em;}
#tabbar-aforosenrio .metrica-acordeon .dato-metrica-estacion.destacada { background: none; color: #58a0c9; font-size: 20px; }
#tabbar-aforosenrio .metrica-acordeon .dato-metrica-estacion.destacada .negrita { font-weight: bold; }
#tabbar-aforosenrio .metrica-acordeon .dato-metrica-estacion.destacada .label {  font-size: 20px;}
#tabbar-aforosenrio .metrica-acordeon .dato-metrica-estacion .bloque-leyenda{display: flex; justify-content: space-between; text-align: center; flex-wrap: wrap; max-width: 100%;}
#tabbar-aforosenrio .metrica-acordeon .dato-metrica-estacion .caja-leyenda{flex:1}
#tabbar-aforosenrio .metrica-acordeon .dato-metrica-estacion .reloj {  color:red; }
#tabbar-aforosenrio .metrica-acordeon .dato-metrica-estacion .label {font-size:16px; color:var(--tabbar-button-color); font-weight: normal; text-align: left; display: contents; width: 40%;}
#tabbar-aforosenrio .metrica-acordeon .fecha { font-size: 0.7em; color: var(--azuloscuro); }
#tabbar-aforosenrio .metrica-acordeon .grafico { margin:auto; max-width:180px; min-width: 180px; flex-grow: 1;    display: flex;     flex-wrap: nowrap;     justify-content: flex-end;     align-items: center; }
#tabbar-aforosenrio .metrica-acordeon .galeria-imagenes {flex-grow: 1; display: flex; justify-content: center;}
#tabbar-aforosenrio .metrica-acordeon .galeria-imagenes .image-link{display: flex; flex-direction: row; justify-content: center;}
#tabbar-aforosenrio .metrica-acordeon .galeria-imagenes .image{ box-shadow: #0000002e 5px 3px 6px 0px; border-radius: 8px; width: 30%;}
#tabbar-aforosenrio .metrica-acordeon .unidad { font-size: 10px; color:var(--azuloscuro); }
#tabbar-aforosenrio .metrica-acordeon .expandable-content { background: white; }
#tabbar-aforosenrio .metrica-acordeon .bloque-derecha {  max-width: 50%;}
#tabbar-aforosenrio .metrica-acordeon .bloque-derecha .dato-metrica-estacion {  padding: 5px 0px;}
#tabbar-aforosenrio .valor-dato-metrica-estacion{margin-left: 5px;}
#tabbar-aforosenrio .titulo-metrica-estacion .titulo{font-weight: 700; color: #58a0c9;}

#tabbar-aforosenrio .resumen-aforosenrio ons-card {
  flex: 1;
  min-width: 120px;
  text-align: center;
  cursor: pointer; /* que parezca clicable */
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#tabbar-aforosenrio .resumen-aforosenrio ons-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  filter: brightness(1.1); /* un pelín más brillante */
}

#tabbar-aforosenrio .resumen-aforosenrio ons-card.active {
  border: 3px solid black;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  filter: brightness(1.1); /* un pelín más brillante */
}

#page-embalses .tabbar__content{
    margin-top: 10px;
}

#tabbar-embalses .tabbar--top {
    max-width: 1000px;
    margin: 10px auto 0px auto;
}

/*#tabbar-embalses { top: 70px;}*/

.color-alerta-0 {}
.color-alerta-1 { color:#c7cb00 !important; }
.color-alerta-2 { color:#F09917 !important;}
.color-alerta-3 { color:#F30400 !important;}

#texto-avisos-embalses .dialog { height: initial;      margin: auto;     left: unset;     transform: unset;     position: relative;}
#texto-avisos-embalses .dialog-container { padding: 10px; }
#tabbar-caudales-minimos .tabbar--top {    max-width: 1000px;     margin: auto;}

@media (max-width: 1204px) {
	#texto-avisos-embalses .dialog { width: auto; }
  #page-embalses .tabbar__content{margin-top: 66px;}
  .top-movil{top:/*-60px*/ -115px !important;}
  .fix-top-map{margin-top: 10px !important;}
}

/* Aqui para ordenador */
@media (min-width: 1204px) {
	#texto-avisos-embalses .dialog {   width: 1000px;  }
  #tabbar-embalses{top:50px !important;}
}

.toolbar__right{line-height: unset;}
.contenedor-embalses {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 10px;
}

.resumen-embalses {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 20px;
}

.resumen-embalses ons-card {
  flex: 1;
  min-width: 120px;
  text-align: center;
}

.umbral-3 {
  background-color: #f30400;
  color: white;
}

.umbral-2 {
  background-color: #f09917;
  color: white;
}

.umbral-1 {
  background-color: #e9d736;
  color: white;
}

.normalidad {
  background-color: #3092e2;
  color: white;
}

.estado-Normalidad{
  color: #4CAF50;
  font-weight: bold;
}

.estado-Umbral.naranja{
   color: #f09917;
   font-weight: bold;
}
.estado-Umbral.amarillo{
   color: #e9d736;
   font-weight: bold;
}

.estado-Umbral.rojo{
   color: #f30400;
   font-weight: bold;
}



.umbral-normalidad {
  background-color: #4CAF50;
  color: white;
}

.valor-umbral {
  font-size: 1.4em;
  font-weight: bold;
  margin-top: 5px;
}

.filtros-embalses {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.filtros-embalses .filtro {
  flex: 1;
  min-width: 200px;
}

.filtros-embalses .filtro .select{
    width:95%;
    border: 1px solid grey;
    border-radius: 6px;
    padding: 0px 10px;
}

.filtros-embalses .filtro option{
    
}

.item-embalses {
  padding: 15px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  margin-bottom: 12px;
}

.item-embalses-contenido {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: space-between;
  gap: 10px;
}

.item-embalses-contenido .columna {
  display: flex;
  align-items: center;
}

.titulo-embalses {
  font-weight: bold;
  color: #333;
  min-width: 33%;
  max-width: 33%;
}

.grupo-datos {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.dato {
  font-size: 14px;
  color: #666;
}

.dato .label {
  color: #999;
  font-weight: 400;
  margin-right: 4px;
}

.valor {
  font-weight: bold;
}

.valor-medido {
  flex: 1;
  min-width: 33%;
  max-width: 33%;
  font-size: 14px;
  color: #333;
  justify-content: center;
}

.valor-medido .label{
  margin-right: 5px;
}

.estado-actual {
  flex: 1;
  min-width: 20%;
  max-width: 20%;
  justify-content: flex-end;
}

.estado-actual .estado {
  font-weight: bold;
  margin-left: 5px;
}

#tabbar-embalses .metrica-acordeon { display: flex;    /*  border-bottom: solid 2px #0000001a; */ padding:10px;   }
#tabbar-embalses .metrica-acordeon .titulo-metrica-estacion {  display: block;     margin: auto;     padding: 10px;     width: 100%;        background: linear-gradient(#fbf7f7,#ffffff); }
#tabbar-embalses .metrica-acordeon .datos-metrica-estacion {  flex-grow: 1;    display: flex;     flex-wrap: wrap;     justify-content: center;     align-items: center;     align-content: center; flex-direction: column;}
#tabbar-embalses .metrica-acordeon .dato-metrica-estacion { margin:auto; flex-grow: 1; text-align: left; padding: 0px; width: 100%; max-width: unset; color: var(--tabbar-button-color); font-weight: normal; font-size: 1em;}
#tabbar-embalses .metrica-acordeon .dato-metrica-estacion.destacada { background: none; color: #58a0c9; font-size: 20px; }
#tabbar-embalses .metrica-acordeon .dato-metrica-estacion.destacada .negrita { font-weight: bold; }
#tabbar-embalses .metrica-acordeon .dato-metrica-estacion.destacada .label {  font-size: 20px;}
#tabbar-embalses .metrica-acordeon .dato-metrica-estacion .bloque-leyenda{display: flex; justify-content: space-between; text-align: center; flex-wrap: wrap; max-width: 100%;}
#tabbar-embalses .metrica-acordeon .dato-metrica-estacion .caja-leyenda{flex:1}
#tabbar-embalses .metrica-acordeon .dato-metrica-estacion .reloj {  color:red; }
#tabbar-embalses .metrica-acordeon .dato-metrica-estacion .label {font-size:16px; color:var(--tabbar-button-color); font-weight: normal; text-align: left; display: contents; width: 40%;}
#tabbar-embalses .metrica-acordeon .fecha { font-size: 0.7em; color: var(--azuloscuro); }
#tabbar-embalses .metrica-acordeon .grafico { margin:auto; max-width:180px; min-width: 180px; flex-grow: 1;    display: flex;     flex-wrap: nowrap;     justify-content: flex-end;     align-items: center; }
#tabbar-embalses .metrica-acordeon .galeria-imagenes {flex-grow: 1; display: flex; justify-content: center;}
#tabbar-embalses .metrica-acordeon .galeria-imagenes .image-link{display: flex; flex-direction: row; justify-content: center;}
#tabbar-embalses .metrica-acordeon .galeria-imagenes .image{ box-shadow: #0000002e 5px 3px 6px 0px; border-radius: 8px; width: 30%;}
#tabbar-embalses .metrica-acordeon .unidad { font-size: 10px; color:var(--azuloscuro); }
#tabbar-embalses .metrica-acordeon .expandable-content { background: white; }
#tabbar-embalses .metrica-acordeon .bloque-derecha {  max-width: 50%;}
#tabbar-embalses .metrica-acordeon .bloque-derecha .dato-metrica-estacion {  padding: 5px 0px;}
#tabbar-embalses .valor-dato-metrica-estacion{margin-left: 5px;}
#tabbar-embalses .titulo-metrica-estacion .titulo{font-weight: 700; color: #58a0c9;}

#tabbar-embalses .resumen-embalses ons-card {
  flex: 1;
  min-width: 120px;
  text-align: center;
  cursor: pointer; /* que parezca clicable */
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#tabbar-embalses .resumen-embalses ons-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  filter: brightness(1.1); /* un pelín más brillante */
}

#tabbar-embalses .resumen-embalses ons-card.active {
  border: 1px solid black;
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  filter: brightness(1.1); /* un pelín más brillante */
}