@charset "utf-8";
/* CSS Document */

 * {
				margin:0px;
				padding:0px;
	 transition-duration: 0.5s;
			}
.cel-bar {
	display:none;
}

/* Por defecto (pantallas grandes) la barra de celular va oculta; el
   @media (max-width:820px) más abajo la vuelve a mostrar y oculta
   .pc-cabeza. Sin esta regla, .menu-cel no tenía ningún display:none base
   y se veía renderizada al mismo tiempo que la barra de escritorio. */
.menu-cel {
	display: none;
}

.barra-menu {
	position:fixed;
	top:0px;
	margin-left:-10px;
	margin-top:150px;
	width:100%;
	font-family:'Roboto', sans-serif;
	height:39px;
	padding-left: 15%;
	background-color:hsla(213,73%,19%,1.00);
    z-index:8888;
    /* Sin esto, el 15% de padding-left se sumaba al 100% de width y la
       barra se corría/desbordaba por el lado derecho de la pantalla. */
    box-sizing: border-box;
			}

.logo-cel {
	display:none;
			}
.head-cel {					
	display: none;	
}

.pc-cabeza {					
	display: block;	
}

.menu-top {
	position:fixed;
	display: flex;
	align-items: center;
	margin-right:0px;
	right:12px;
	top: 0px;
	margin-top:10px;
	/* Antes había una SEGUNDA regla .menu-top más abajo en este archivo
	   (right:40px; top:140px; sin z-index) que ganaba la cascada y dejaba
	   estos botones sin z-index, así que .adorno (z-index:5555) los tapaba
	   por completo en pantallas grandes. Se eliminó esa regla duplicada;
	   ahora sólo existe esta, con z-index explícito. */
	z-index: 6000;
}

/* Head-bar: franja única, sticky, que agrupa los controles (Hola:usuario,
   Buscar, Ajustes, IA, Pacientes, Cerrar) arriba y las pestañas
   (Home/Trastornos/...) abajo. Al ser un solo contenedor "position:sticky"
   con las dos filas ANIDADAS adentro, ambas se mueven juntas al hacer
   scroll (antes eran dos elementos fixed independientes con su propio
   margin-top, lo que causaba que se desplazaran a velocidades distintas).
   Todo lo que está arriba de head-bar (.header/.adorno) es de flujo normal
   ahora, así que desaparece al hacer scroll y head-bar queda pegada
   arriba. */
.head-bar {
	position: -webkit-sticky; /* Safari necesita el prefijo, si no ignora la regla entera y se comporta como static */
	position: sticky;
	top: 0px;
	z-index: 8500;
	width: 100%;
	height: 83px; /* -2px: evita que asome un filo de la franja azul degradada
	                 debajo de la pestaña/sección seleccionada. */
	background: #080824;
	background: linear-gradient(270deg, rgba(8, 8, 36, 1) 0%, rgba(47, 47, 99, 1) 58%, rgba(114, 132, 138, 1) 100%);
	display: flex;
	flex-direction: column;
}

/* Red de seguridad por si position:sticky no llega a aplicarse (caché de
   CSS vieja, navegador raro, etc). Un script en js/menu.php mide en tiempo
   real si head-bar realmente se quedó pegada arriba al desaparecer
   #header; si no, le agrega esta clase y la fija "a mano". El espaciador
   ocupa el hueco que head-bar deja de ocupar en el flujo normal al pasar a
   fixed, para que el contenido de abajo no salte/brinque. */
.head-bar.forzar-fija {
	position: fixed;
	top: 0px;
	left: 0px;
}

.head-bar-espaciador {
	display: none;
	height: 83px; /* debe coincidir con .head-bar */
}

.head-bar.forzar-fija ~ .head-bar-espaciador {
	display: block;
}

.controles-top {
	display: flex;
	align-items: center;
	/* flex-end (no center): todo el bloque de botones + "Hi: usuario" pegado
	   al lado derecho, en todos los anchos de pantalla. */
	justify-content: flex-end;
	padding-right: 8px;
	gap: 6px;
	height: 45px;
}

/* Logo graficos/par.png, del lado IZQUIERDO de head-bar. Sólo se muestra
   cuando la cabeza superior (#header, con el logo grande) ya no está
   visible en pantalla — lo controla la clase .sin-header que le agrega un
   IntersectionObserver (ver script junto a #panel-flotante en
   js/menu.php). */
.logo-par {
	display: none;
	position: absolute;
	left: 15px;
	top: 50%;
	transform: translateY(-50%);
	max-height: 60px;
}

.head-bar.sin-header .logo-par {
	display: block;
}

/* Logo grande dentro de #header (graficos/logo-txt.png). Antes iba con
   estilo inline en js/menu.php; se pasó a clase para poder reducirlo un
   poco y subirle el z-index en pantalla chica más abajo (@media max-width:
   820px), donde puede llegar a superponerse con .adorno. */
.logo-cab-cabeza {
	max-width: 60%;
	float: left;
	height: 80%;
	margin-left: 15px;
	z-index: 555;
}

/* .main-page trae margin-top:220px en css/CSS07.css, calculado para el
   #header FIJO (position:fixed) del diseño viejo, que se superponía al
   contenido y necesitaba ese margen para no taparlo. Con el diseño nuevo
   (#header en flujo normal + head-bar sticky) ese hueco ya lo deja el
   propio #header/.head-bar al ocupar su espacio en el documento, así que
   sumarle otros 220px encima dejaba un salto enorme en blanco antes del
   contenido y desacomodaba todo lo demás (el resto de .main-page es
   relativo a dónde termina ese margen). .main-page sigue con sus 220px
   normales para las demás páginas del sitio (siguen usando el header
   fijo viejo); esta clase extra, agregada sólo en plantilla.php y en las
   plantillas de padecimientos/ (que sí usan el header nuevo), la pone en
   0 sólo ahí. Dos clases (más específica) para ganarle a la regla de una
   sola clase sin importar el orden en el archivo. */
.main-page.main-page-cabeza {
	margin-top: 0px;
}

/* Barra de pestañas dentro de head-bar. Usa una clase propia (no
   ".barra-menu") a propósito: esa clase la usan otras páginas del sitio
   con su propio menú (position:fixed, fondo azul), y no queremos que un
   cambio aquí les afecte a ellas. Fondo transparente (se ve el degradado
   de head-bar detrás) y con scroll horizontal por si algún día no caben
   todas las pestañas en pantallas medianas. */
.pestanas-bar {
	width: 100%;
	height: 40px;
	font-family: 'Roboto', sans-serif;
	background-color: transparent;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.pestanas-bar::-webkit-scrollbar {
	display: none;
}

/* Margen izquierdo de las pestañas: en pantalla grande, 10% para que "Home"
   quede alineado con el borde izquierdo de .anchura (que también usa
   margin-left:10%, ver css/CSS07.css). Selector con .pestanas-bar delante
   a propósito: ul.acorh la comparten otras páginas del sitio con su propio
   menú, y así el margen sólo aplica al menú actual. */
.pestanas-bar ul.acorh {
	margin-left: 10%;
	/* La regla original (más abajo, compartida con .barra-menu) trae
	   ul.acorh > li { float:left; }. Un float no obliga al padre a
	   desbordarse: si no caben todas las pestañas, el navegador las
	   empuja a una segunda fila en vez de dejar que .pestanas-bar
	   (overflow-x:auto) las scrollee. white-space:nowrap aquí +
	   display:inline-block en los <li> (abajo) evitan ese salto de
	   línea, para que el scroll horizontal sí funcione en pantallas
	   angostas. Selector con .pestanas-bar delante, mismo motivo que
	   el margin-left de arriba: no afecta a .barra-menu en otras
	   páginas. */
	white-space: nowrap;
}

.pestanas-bar ul.acorh > li {
	float: none;
	display: inline-block;
	vertical-align: top;
}

/* Bajo ~1000px, "Listas"/"Protocolos"/"Tutorial" ya NO abren su desplegable
   con click (ver menuSeccionClick() en js/menu.php: en su lugar navegan a su
   página de menú a pantalla completa: listas/0-listas-cel.php,
   rastreos/0-rastreos-cel.php, tutorial/0-tutorial-cel.php). Pero la regla
   original "ul.acorh li:hover > ul { display:block; }" (más abajo en este
   archivo) sigue disparando el desplegable con SOLO pasar el mouse encima,
   sin necesidad de click — visible en pantallas angostas de computadora
   (sin touch). Se apaga aquí, con selector .pestanas-bar (mismo motivo que
   los de arriba: no afecta a .barra-menu en otras páginas), sólo en el
   mismo ancho en el que el click ya cambió de comportamiento. */
@media (max-width: 1000px) {
	.pestanas-bar ul.acorh li:hover > ul {
		display: none;
	}
}

/* En pantallas medianas ya no alcanza a verse .anchura como referencia, así
   que en vez de 10% sólo se deja el espacio justo para que no tape el logo
   graficos/par.png (ver .logo-par) cuando aparece. */
@media (max-width: 1100px) {
	.pestanas-bar ul.acorh {
		margin-left: 90px;
	}

	/* .header/.adorno reducidos a ~85% de altura (y en el caso de .adorno,
	   también de ancho, para conservar la proporción 2:1 de la imagen).
	   Medidas redondeadas, sin decimales. .header-cabeza y .adorno-cabeza
	   son compuestas (dos clases) a propósito: así ganan siempre sobre las
	   reglas de una sola clase .header (css/CSS07.css, 150px de alto) y
	   .adorno (base arriba en este archivo, 150x300; y la de
	   @media(max-width:820px) más abajo, 90x183 — pensada para el adorno
	   propio de .menu-cel, ya retirado), sin importar el orden en que
	   aparezcan en el archivo.

	   .head-bar (y sus dos filas internas, .controles-top/.pestanas-bar)
	   NO se reducen aquí a propósito, aunque el resto de la cabeza sí: los
	   menús desplegables de las pestañas (ul.acorh li ul) se posicionan
	   con la altura de pantalla grande como referencia, y si head-bar era
	   más baja aparecían con un salto/espacio antes de empezar. Se dejan
	   con su altura de pantalla grande (85/45/40px) en todos los anchos. */
	.header.header-cabeza {
		height: 128px; /* ~85% de 150px */
	}

	.adorno.adorno-cabeza {
		height: 128px;     /* ~85% de 150px */
		max-height: 128px; /* la regla .adorno de @media(max-width:820px), más
		                      abajo en este archivo, trae max-height:90px
		                      pensado para el adorno de .menu-cel (ya
		                      retirado); sin este override esa cota seguiría
		                      aplicando también aquí y taparía la altura de
		                      arriba. */
		width: 255px;      /* ~85% de 300px, conserva proporción 2:1 */
	}
}

/* Pantalla chica (celular): el ~85% de arriba (pensado para tablets, 821 a
   1100px) todavía se ve muy alto en un teléfono angosto. Un segundo
   recorte aquí, anclado a los 90px que ya traía css/metal.css para
   .adorno en @media(max-width:620px) (el tamaño "chico" original del
   sitio) — un 60% del tamaño grande. header-cabeza y adorno-cabeza quedan
   con la MISMA altura (90px) a propósito: si no coinciden, el flujo
   normal de la página sigue la altura de .header (no la de .adorno, que
   es position:absolute) y cualquier diferencia deja un espacio vacío
   entre el adorno y el head-bar, que es justo el bug reportado. Mismos
   selectores que el bloque de arriba (misma especificidad); al estar más
   abajo en el archivo, ganan en pantallas ≤820px.

   .head-bar tampoco se reduce aquí, por la misma razón que en el bloque
   de arriba (los menús desplegables usan su altura de pantalla grande
   como referencia). */
@media (max-width: 820px) {
	.header.header-cabeza {
		height: 90px;
	}

	.adorno.adorno-cabeza {
		height: 90px;
		max-height: 90px;
		width: 180px; /* conserva proporción 2:1 */
	}

	/* Logo grande (graficos/logo-txt.png) un poco más chico aquí, y con
	   z-index por encima de .adorno (5555) para que no quede tapado si se
	   encima con él en pantallas angostas. */
	.logo-cab-cabeza {
		max-width: 48%;
		z-index: 5600;
	}

	.controles-top {
		/* justify-content/padding-right ya vienen en la regla base (arriba,
		   aplican a todos los anchos). Acá sólo el ajuste propio de celular:
		   separación reducida entre lupa/engrane/a.i./pacientes/cerrar, para
		   que quepan apretados; en pantalla mediana/grande se dejan como
		   estaban (gap:6px, regla base). */
		gap: 2px;
	}

	.btn-menu-top {
		margin-right: 2px;
	}
}

/* Misma información que .controles-top pero para pantallas medianas/chicas:
   fija en la esquina superior derecha (no cabe una barra de ancho
   completo). Oculta por defecto; @media(max-width:820px) más abajo la
   muestra. No comparte clase con .menu-top a propósito: esa clase la usan
   otras páginas del sitio con su propio menú, y no queremos que un cambio
   aquí les afecte a ellas. */
.controles-fijo {
	display: none;
}

.iframe-celbar {
        display:none;
    }

.btn-menu-top {
	float: right;
	width: 30px;
	height: 30px;
	margin-top: 3px;
	margin-right:7px;
	padding-top:6px;
	padding-left:4px
}
.btn-menu-top:hover {
	background-color: rgba(256,256,256,0.35);
	opacity: 0.6;
	border-radius:20px;
}

.hola-usuario {
	position: relative; /* referencia para .hu-overlay (position:absolute) */
	float: right;
	margin-top: 3px;
	margin-right: 12px;
	padding: 6px 10px;
	border-radius: 20px;
	background-color: rgba(255,255,255,0.18);
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	white-space: nowrap;
}

/* Se listan también los pseudo-estados (:link/:visited/:hover/:active) a
   propósito: css/metal.css trae reglas globales "a:link{color:#467288}",
   etc., con la MISMA especificidad que un simple ".hola-usuario a" (una
   clase + un elemento, contra un pseudo-estado + un elemento) y, al
   cargarse metal.css después en el <head>, ganaban el empate y dejaban el
   texto "Hi: <usuario>" en azul en vez del color propio. Sumar el
   pseudo-estado aquí también sube la especificidad y soluciona el empate. */
.hola-usuario a,
.hola-usuario a:link,
.hola-usuario a:visited,
.hola-usuario a:hover,
.hola-usuario a:active {
	color: #22c55e;
	text-decoration: none;
}

/* Mensajes de ayuda de los 5 botones (búsqueda/colores/asistente/pacientes/
   cerrar): en vez de sustituir texto dentro del mismo link (se veían todos
   concatenados de golpe), cada uno es un div CLON de .hola-usuario
   (position:absolute, mismo padding/radio/fondo) que se superpone y CUBRE
   por completo a "Hi: <usuario>" mientras dura el hover del botón
   correspondiente. Sólo existen si hay sesión iniciada (ver condición en
   js/menu.php); para quien no tiene sesión se usa el recuadro flotante
   clásico de #top-a/#top-b/#top-c, más abajo. */
.hola-usuario .hu-overlay {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 20px;
	/* Opaco (no el rgba(255,255,255,0.18) translúcido de .hola-usuario): a
	   propósito, para CUBRIR por completo el texto "Hi: <usuario>" de abajo
	   en vez de dejarlo transparentar y empalmarse con el mensaje nuevo.
	   Tono ajustado a mano para verse igual al pill de abajo. */
	background-color: #37375E;
	color: #22c55e;
	font-family: 'Roboto', sans-serif;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	z-index: 1;
}

.bot-mastemas{
	display:none;
}

/* Combinador "~" (hermano general, no sólo el siguiente) porque
   .hola-usuario es el ÚLTIMO hijo de #controles-top. */
#opcion-a:hover ~ .hola-usuario .hu-overlay-a,
#opcion-b:hover ~ .hola-usuario .hu-overlay-b,
#opcion-c:hover ~ .hola-usuario .hu-overlay-c,
#opcion-d:hover ~ .hola-usuario .hu-overlay-pac,
#opcion-e:hover ~ .hola-usuario .hu-overlay-e {
	display: flex;
}

/* Recuadro flotante clásico: sólo queda en uso para quien NO tiene sesión
   iniciada (no existe .hola-usuario en esa vista para sustituirle el texto),
   es decir sólo para #top-a/#top-b/#top-c (búsqueda/colores/asistente); ver
   condición en js/menu.php. */
#opcion-a:hover + #top-a {
	display:block;
}

#opcion-b:hover + #top-b {
	display:block;
}

#opcion-c:hover + #top-c {
	display:block;
}

#top-a, #top-b, #top-c {
	display:none;
	text-align: center;
	max-width:50px;
	position:absolute;
	background-color:hsla(87,62%,90%,1.00);
	top:42px;
	padding:4px;
	font-family:"Lucida Sans", Verdana, "sans-serif";
	font-size:10px;
	font-weight:normal;
	z-index:9999999;
	-webkit-box-shadow: 2px 5px 7px #5E5D5D;
  -moz-box-shadow: 2px 5px 7px #5E5D5D;
}

.adorno {
	position:absolute;	
	background-color: #777;
	right: 0px; 
	top: 0px;
	height:150px;
	width: 300px;	
	z-index:5555;
	opacity: 1.0;
	transition: 0.6s;
}

.oculto {					
	display: none;
}

.m-active {
	background-color:#fff;
	border-top-left-radius: 5px;
border-top-right-radius: 5px;
}

.tablet-show, cel-show {	
	display:none;
}
.cel-show {	
	display:none;
}

.colores {
	position:fixed;
	display:none;
	padding:7px;
	background-color:#fff;	
	top:5px;
	right:20px;
	width:100px;	
	z-index: 999999;
	-webkit-box-shadow: 2px 5px 7px #5E5D5D;
  -moz-box-shadow: 2px 5px 7px #5E5D5D;
}

.botonc {	
	padding:2px;
	color: #fff;
	font-family:'Roboto', sans-serif;
	font-weight: 300;
	text-align: center;
	margin-top:2px;
}

.cerrar-btn {
	width:30px;
	height:30px;
    color:#666;
	font-family:'Roboto', sans-serif;
	text-decoration:none;	
	padding:7px 10px 7px 10px;
	margin-top:0px;	
	border-radius: 20px;
	background-color: #AA9797;
    z-index:9999;
    }

.cerrar-btn:hover {	
	background-color: #F44F4F;
	color:#fff;
    }	
.show-cel {					
	display: none;
}
.show-pc {					
	display: block;
}

ul.acorh {	
				
	font-family:'Roboto', sans-serif;			
}
			
			ul, ol {
				list-style:none;				
			}
			
			ul.acorh > li {
				float:left;	                
			}
			
			ul.acorh li a {				
				color:#ccc;
				text-decoration:none;
				padding:10px 12px;
				display:block;                
			}
			
			ul.acorh li a:hover {
				background-color:#4E8BCB;
			}
			
			ul.acorh li ul {
				display:none;				
				position:absolute;
				min-width:140px;
				border-bottom:2px #222536 solid;
				border-right:thin #5E6692 solid;
				-webkit-box-shadow: 2px 5px 7px #5E5D5D;
  -moz-box-shadow: 2px 5px 7px #5E5D5D;                
			}
			
			ul.acorh li:hover > ul {
				display:block;					
			}
			
			ul.acorh li ul li {
				position:relative;
				background:hsla(212,53%,26%,0.90);
			}
	
			
			
			ul.acorh li ul li ul {
				right:-140px;								
			}

/*  Transición */

@media (max-width: 1100px){	

    .bot-mastemas{
    display:block;
	position:fixed;
	right:-92px;
	top:240px;
	z-index:777;
    max-width:10px;
}
	
}
    
/* .pc-cabeza-siempre / .menu-cel-retirado: mismas clases que .pc-cabeza y
   .menu-cel pero EXCLUSIVAS de este menú (js/menu.php). El toggle de abajo
   (@media max-width:820px, .menu-cel{display:block} / .pc-cabeza{display:
   none}) sigue existiendo tal cual porque descargas/js/menu.php comparte
   las clases .pc-cabeza/.menu-cel con su propio diseño (sin head-bar) y
   todavía necesita alternar entre las dos en pantallas chicas. Estas dos
   reglas, de dos clases (más específicas que las del toggle, de una sola),
   ganan siempre sin importar el orden en el archivo: así esta página
   conserva el diseño head-bar en todos los anchos -sólo reducido un 85%
   en medianas/chicas, ver @media(max-width:1100px) más arriba, junto a
   .header-cabeza/.adorno-cabeza/.head-bar- mientras que descargas sigue
   alternando como antes. */
.pc-cabeza.pc-cabeza-siempre {
	display: block;
}

.menu-cel.menu-cel-retirado {
	display: none;
}

/* Menu tablet y celular (sólo aplica tal cual a descargas/js/menu.php; en
   esta página, .pc-cabeza-siempre / .menu-cel-retirado de arriba ganan) */
@media (max-width: 820px) {
	   .menu-cel {
    display:block;
}

    .pc-cabeza {
	display: none;
}

/* Botones de menu-top (Buscar, Colores, Asistente IA, Pacientes, Cerrar):
   en pantallas chicas se quedan en la misma posición horizontal, pero
   fijos pegados al borde superior, con fondo gris semitransparente para
   que se lean sobre cualquier contenido. */
.menu-top {
    top: 0px;
    background-color: rgba(153,153,153,0.5);
    z-index: 99999;
}

/* #controles-fijo (alternativa de estos mismos botones para cuando
   .pc-cabeza se ocultaba en pantallas medianas/chicas) ya NO se muestra:
   .controles-top, dentro de head-bar, cubre ahora todos los anchos. Se
   deja sin override aquí a propósito, así que sigue con su regla base
   (display:none) más arriba en este archivo. El propio div #controles-fijo
   se conserva en js/menu.php sin usarse, por si hiciera falta reactivarlo. */

.scroll {
    position:sticky;    
    top:0px;
    width:100vw;
    margin-top:80px;
    height:33px;
    background-color: hsla(213,73%,19%,1.00);
    font-family:'Roboto', sans-serif;
    font-size: 18px;
    padding-top:8px;
    z-index: 6666;    
  white-space: nowrap; /* [1] */
  overflow-x: auto; /* [2] */
  -webkit-overflow-scrolling: touch; /* [3] */
  -ms-overflow-style: -ms-autohiding-scrollbar; /* [4] */ }

/* [5] */
.scroll::-webkit-scrollbar {
  display: none; }

.scroll a {    
    width:200px;    
    height:36px;
    padding:11px;
    color:white;
}
    
    .adorno {
	position:absolute;	
	background-color: #777;
	right: 0px; 
	top: 0px;
	max-height:90px;
	width: 183px;	
	z-index:5555;
	opacity: 1.0;
	transition: 0.6s;
}

.scroll a:hover {
    background-color: hsla(206,40%,58%,1.00);
		}

.scroll a:visited {
    color:hsla(236,20%,70%,1.00);
}

.scroll a:link {
    color:hsla(0,1%,78%,1.00);
}

.scroll a:hover {
    color:white;
}

.scroll a:active {
    color:hsla(58,96%,78%,1.00);
}
    
.cel-head {
        width:100%;
        height:90px;
        position:absolute;
        margin-top:-132px;     
    }

.listado {    
    width:100%;
    left:0px;    
    right:0px;    
    padding:10px;
    display:block;
    padding:0px;
        }

.list-item {		
	width: 100vw;
    left:0px;    
    right:0px;
    height: 30px;
    padding-top:12px;
    background-color: white;
    color: #444;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 18px;
    text-align: center;
    border-bottom: thin solid #aaa;
}

.list-item:hover {
    background-color: hsla(206,40%,58%,1.00);
		}
    
.botonc {	
	padding:2px;
	color: #fff;
	font-family:'Roboto', sans-serif;
	font-weight: 300;
	text-align: center;
	margin-top:2px;
}
    
    .cel-bar {
	display:block;
	position:absolute;
	left:0px;
	right:0px;
	margin-top:-60px;
	width:100%;	
        padding-top:0px;
	height: 60px;	
	z-index:888;
	transition: 0.5s;
	overflow: hidden;
}
    
.logo-cel {
    display:block;
    }
    
    .bot-mastemas{
	position:fixed;
	right:-93px;
	top:140px;
	z-index:777;
    max-width:10px;
} 
    
	.menu-top2 {
	display: block;
	position:absolute;	
	display: flex;
	margin-right:15px;
	right:0px;
	top: 0px;
	margin-top:3px;
	z-index:9999;
}

.tablet-show {	
	display:block;
}
.cel-show {	
	display:none;
}
	
	.colores {
	position:fixed;
	display:none;
	padding:7px;
	background-color:#fff;	
	top:100px;
	right:20px;
	width:100px;	
	z-index: 99999;
	-webkit-box-shadow: 2px 5px 7px #5E5D5D;
  -moz-box-shadow: 2px 5px 7px #5E5D5D;
}
	
	ul.acel {	
	font-family:'Roboto', sans-serif;	
			
}

    .iframe-celbar {
        display:block;
        position:absolute;
        height:0px;
        margin-top:40px;
        margin-left:-205px;
        left:0px;
    }
			
			ul, ol {
				list-style:none;				
			}
			
			ul.acel > li {				
				position:relative;
				left: -12px;                
				top:9px;                
				width: 185px;
                opacity: 0.9;
			}
			
			ul.acel li a {
				background-color:#84A4B9;
				color:#fff;
				text-decoration:none;
				padding:8px 18px 8px 18px;
				display:block;
				margin-left: 2px;
				border-bottom: thin #758E9E solid;
				border-top: thin #B5D0E1 solid;
				
			}
			
			ul.acel li a:hover {
				background-color:#136CAC;
				
			}
			
			ul.acel li ul {
				display:none;
				position:absolute;				
				min-width:125px;				
			}
			
			ul.acel li:hover > ul {
				display:block;
				left:183px;
				top:-38px;				
			}
			
			ul.acel li ul li {
				position:relative;
				border-radius: 0px;
				
			}
			
			ul.acel li ul li ul {
				right:140px;
				top:0px;
				
			}

}

/* Menu celular*/
@media (max-width: 620px) {

/* Nuevas etiquetas */
    .logo-cel {
    display:block;
    }
    
    
    
/* Terminan nuevas*/

.tablet-show {	
	display:none;
}
.cel-show {	
	display:block;
}
    
.iframe-celbar {
        display:block;
        position:absolute;
        height:0px;
        margin-top:40px;
        margin-left:-205px;
        left:0px;
        width:100%;
    }

.cel-bar {
	display:block;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	margin-top:-60px;
	width:100%;	
	height: 60px;	
	z-index:888;
	transition: 0.5s;
	overflow: hidden;
}
    
.triangle-left {
      width: 0;
      height: 0;
    margin-top:-17px;
    margin-left:-15px;
      border-top: 7px solid transparent;
      border-right: 16px solid white;
      border-bottom: 7px solid transparent;
    }
    
.mastemas-img {
    content:url("../iconos/mas-temas.png");
    width:20px;
    height:20px;
    }

}

/* Menu celular chico*/
@media (max-width: 420px) {		

.tablet-show {	
	display:none;
}
.cel-show {	
	display:block;
}
    
.cel-bar {
	display:block;
	position:absolute;
	left:0px;
	right:0px;
	top:0px;
	margin-top:-60px;
	width:100%;
	height: 60px;
	z-index:888;
	transition: 0.5s;
	overflow: hidden;
}

}

/* ---------------------------------------------------------------------
   Panel flotante compartido (Buscar / Pacientes / Asistente IA)
   Reemplaza los antiguos #sideframe (chatbot) y #divbmobile (pacientes),
   que eran dos implementaciones distintas para lo mismo. Un solo panel,
   un solo lugar donde arreglar tamaño/posición. Ver función abrirPanel()
   en js/menu.php.
   --------------------------------------------------------------------- */
.panel-flotante {
	position: fixed;
	z-index: 999999;
	display: none;
	flex-direction: column;
	bottom: 10px;
	right: 10px;
	width: 590px; /* 440px + 150px: se veía angosto para pacientes/buscador */
	height: 70vh;
	min-width: 300px;
	min-height: 200px;
	background-color: #fff;
	border: medium solid hsla(0, 0%, 31%, 1.00);
	box-shadow: 2px 5px 12px rgba(0,0,0,0.4);
	/* Reescalable arrastrando la esquina inferior derecha, como una ventana
	   de escritorio. overflow:hidden necesario para que el asa nativa del
	   navegador (resize:both) no se salga del borde redondeado/la sombra.
	   Cuando .arrastrando (drag del header, ver js/menu.php) está activo se
	   apaga la transición para que no "patine" detrás del mouse. */
	resize: both;
	overflow: hidden;
}

.panel-flotante.arrastrando {
	transition: none;
	user-select: none;
}

.panel-flotante.visible {
	display: flex;
}

.panel-flotante-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: hsla(213,73%,19%,1.00);
	color: #fff;
	padding: 6px 12px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	flex-shrink: 0;
	/* Barra de título arrastrable, como el header de una ventana de
	   Windows (ver mousedown en js/menu.php). cursor:move para dar la pista
	   visual; excepto sobre la "X" de cerrar, que conserva su cursor normal
	   (ver .panel-flotante-cerrar más abajo). */
	cursor: move;
}

/* :link/:visited sumados por la misma razón que en .hola-usuario a más
   arriba: empataban en especificidad con "a:link"/"a:visited" de
   css/metal.css y ese ganaba por cargarse después, dejando la "X" en el
   azul de los links en vez de blanca. */
.panel-flotante-cerrar,
.panel-flotante-cerrar:link,
.panel-flotante-cerrar:visited {
	color: #fff;
	text-decoration: none;
	font-size: 22px;
	line-height: 1;
	padding: 0 4px;
	cursor: pointer; /* no heredar el cursor:move del header */
}

/* Mientras se arrastra el panel (.arrastrando, ver mousedown en
   js/menu.php) el iframe deja de recibir eventos de mouse: al ser otro
   documento, si el cursor pasa sobre él a media velocidad "roba" el
   mousemove y el arrastre se corta en seco. */
.panel-flotante.arrastrando iframe {
	pointer-events: none;
}

.panel-flotante-cerrar:hover {
	color: #F44F4F;
}

.panel-flotante iframe {
	flex: 1;
	width: 100%;
}

@media (max-width: 820px) {
	.panel-flotante {
		width: 94vw;
		height: 82vh;
		right: 3vw;
		bottom: 3vw;
	}
}

/* ---------------------------------------------------------------------
   Aviso de cookies: banner fijo al margen inferior del sitio, mismo
   criterio que holomag.net. Ver markup + script (localStorage) al final
   de js/menu.php.
   --------------------------------------------------------------------- */
.aviso-cookies {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999999999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 12px 20px;
	background-color: #0471C4;
	box-shadow: 0 -2px 8px rgba(0,0,0,0.35);
}

/* Dos clases (más específica) para ganarle siempre a ".oculto { display:
   none; }" de arriba en este archivo, sin importar el orden — mismo
   recurso que .main-page.main-page-cabeza. */
.aviso-cookies.oculto {
	display: none;
}

.aviso-cookies p {
	margin: 0;
	max-width: 700px;
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	text-align: center;
}

.aviso-cookies-btn {
	background-color: #22c55e;
	color: #fff;
	border: none;
	border-radius: 20px;
	padding: 8px 22px;
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
}

.aviso-cookies-btn:hover {
	background-color: #1ea34d;
}