.body {
	font-family: Futura PT;
	font-size: 14px;
	font-weight: 600;
	color: #00549F;
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;

}


.titulo {


	font-family: Futura PT;
	font-weight: 700;
	font-size: 20px;
	color: #00549F;
	line-height: 130%;


}

.menuOpen {

	border: 0;
	width: 45px;
	height: auto;
	margin-right: 10px;
	margin-top: 5px;


}



.notas {

	text-align: justify;
	font-family: Futura PT;
	font-weight: 600;
	font-size: 1em;
	color: grey;
	width: 90%;
	height: auto;

}

.habeas_data {
	text-align: justify;
	font-family: Futura PT;
	font-weight: 600;
	font-size: 11px;
	color: grey;
	width: 90%;
	height: auto;
}

.div_principal {
  border-radius: 25px;
  border: 2px solid #00549F;   /* azul corporativo */
  background-color: #fff;      /* fondo blanco */
  width: 100%;
  max-width: 900px;            /* ancho máximo en desktop */
  margin: 0 auto;              /* centrar horizontalmente */
  padding: 2rem;               /* espacio interno */
  box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* sombra ligera */
}
.service-icon {
  max-width: 80px;   /* tamaño máximo en desktop */
  height: auto;
}
@media (max-width: 576px) {
  .service-icon {
    max-width: 60px; /* tamaño reducido en móvil */
  }
}


.div_whitespace {
	width: 100%;
	height: 250px;
}

.boton {
	background-color: #7AB800;
	border-color: #7AB800;
	color: white;
}


.onTopMenuWeb {

	display: none;
	z-index: 99999;
	/*width: 90%;*/
	height: auto;
	background-color: white;
	position: absolute;
	left: 55%;
}


.onTopMenu {

	display: none;
	z-index: 99999;
	/*width: 90%;*/
	height: auto;
	background-color: white;
	position: absolute;
	left: 4%;
}


.onTop {

	top: 55%;
	left: 50%;
	vertical-align: middle;
	text-align: justify;
	display: none;
	position: absolute;
	z-index: 1;
	width: 40%;
	height: auto;
	margin: -15% 0 0 -25%;
	background-color: white;
	border-radius: 25px;
	border: 2px solid #00549F;
	text-align: justify;

}

.toolTip {
	overflow: hidden;
	width: 65%;
	height: auto;
	background-color: white;
	border: 1px solid #00549F;
	color: 00549F;
	font-family: Futura PT;
	font-weight: 600;
	font-size: 12px;
	position: absolute;
	z-index: 9999999;
	text-align: justify;


}

.panelWaitVisible {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	opacity: .9;
	background-color: white;
}

.panelWaitOculto {
	display: none;
	width: 0;
	height: 0;
}

.logoPanelWait {
	top: 45%;
	left: 45%;
	position: absolute;
}

.selectTipoDocumento {
	overflow: hidden;
	background-color: white;
	border: 1px solid #00549F;
	color: 00549F;
	font-family: Futura PT;
	font-weight: 600;
	font-size: 12px;
	position: absolute;
	z-index: 9999999;

}

.tabla {
	margin: 10px;
}

.inputSelect {

	font-family: Futura PT;
	font-size: 12px;
	color: grey;
	width: 65%;
	border-radius: 6px;
	border: 1px solid greay;
	font-weight: 600;
}

.inputText {

	font-family: Futura PT;
	font-size: 12px;
	color: grey;
	width: 90%;
	border-radius: 6px;
	border: 1px solid greay;
	font-weight: 600;
}

li {

	list-style-type: none;
}





.linkMenuSubmenu {

	font-family: Futura PT;
	color: #00549F;
	font-size: 14px;
	text-decoration: none;
	font-weight: bold;
	background-color: white;


}

.linkMenuSubmenuPlus {

	font-family: Futura PT;
	color: #00549F;
	font-size: 14px;
	text-decoration: none;
	font-weight: bold;
	background-color: white;

}



.liMenuSubmenu {

	font-family: Futura PT;
	color: #00549F;
	font-size: 14px;
	font-weight: bold;
	list-style-type: square;
	background-color: white;
	/*border-bottom: 1px solid #000000;*/

}

A:hover {
	color: #7ea1dd;
}

a {
	font-family: Futura PT;
	color: #00549F;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

.link {
	font-family: Futura PT;
	color: #00549F;
	font-size: 12px;
	text-decoration: none;
}



.captcha {

	background-color: #edf0f4;
	width: 100%;
}





.ESTILO_MENU_PUBLICO {

	font-family: Futura PT;
	color: #00549F;
	font-size: 14px;
	text-align: center;
	height: 20px;
}

.ESTILO_MENU_PUBLICO_ACTIVADO {

	font-family: Futura PT;
	color: #000000;
	font-size: 16px;
	text-align: center;
	height: 20px;



}

.ESTILO_SUBMENU_PUBLICO {

	font-family: Futura PT;
	color: #000000;
	font-size: 14px;
	text-align: left;


}


.TABLA_EXAMENES {

	width: 70%;
	border-spacing: 4px;
	border-collapse: separate;

}

.TITULO_TABLA {

	background-color: #00549F;
	font-size: 14px;
	font-weight: bold;
	color: white;
	text-align: center;

}

.CELDA_TABLA_PAR {

	background-color: #f2f2f2;
	color: grey;
	font-size: 12px;
}

.CELDA_TABLA_IMPAR {

	background-color: #f2f2f2;
	color: grey;
	font-size: 12px;
}


.sd-container {
	position: relative;
	float: left;
}

.sd {
	padding: 8px 10px;
	height: 30px;
	width: 200px;
}

.open-button {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 25px;
	height: 25px;
	background: #fff;
	pointer-events: none;
}

.open-button button {
	border: none;
	background: transparent;
}


.modalContainer {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: #00549F;
	background-color: #00549F;
}

.modalContainer .modal-content {
	background-color: #fefefe;
	margin: auto;
	padding: 20px;
	border: 1px solid lightgray;
	border-top: 10px solid #58abb7;
	width: 60%;
}

.modalContainer .close {
	color: #aaaaaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.modalContainer .close:hover,
.modalContainer .close:focus {
	color: #00549F;
	text-decoration: none;
	cursor: pointer;
}


.modal-contenido {
	background-color: white;
	width: 300px;

	padding: 10px 20px;
	margin: 20% auto;
	position: relative;
	border-radius: 10px;
	border-color: blue;
	border-top-color: blue;
	height: auto;

}



.modal2 {
	background-color: rgba(0, 0, 0, .8);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
}

#miModal:target {
	opacity: 1;
	pointer-events: auto;
}



.linka {
	font-family: Futura PT;
	color: #00549F;
	font-size: 20px;
	text-decoration: none;
	font-weight: bold;
	background-color: white;
	margin-right: 30px;

}

.modal-contenido1 {
	width: 300px;
	padding: 10px 20px;
	margin: 20% auto;
	position: relative;
	border-radius: 10px;
	border-color: blue;
	border-top-color: blue;
	height: auto;
	margin-top: 60px;

}



.modal3 {
	background-color: rgba(0, 0, 0, .8);
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	opacity: 0;
	pointer-events: none;
}

#miModal1:target {
	opacity: 1;
	pointer-events: auto;
}

.TABLA_EXAMENES_RADIOLOGIA {

	width: 30%;
	border-spacing: 4px;
	border-collapse: separate;
	min-height: .01%;
	overflow-x: auto;
}

.TITULO_TABLA1 {
	background-color: #00549F;
	font-size: 12px;
	font-weight: bold;
	color: white;
	text-align: center;

}



/* - - - ADxMenu: BASIC styles [ MANDATORY ] - - - */

/* remove all list stylings */
.menu,
.menu ul {
	margin: 0;
	padding: 0;
	border: 0;
	list-style-type: none;
	display: block;
	background-color: white;
}

.menu li {
	margin: 0;
	padding: 0;
	border: 0;
	display: block;
	float: left;
	/* move all main list items into one row, by floating them */
	position: relative;
	/* position each LI, thus creating potential IE.win overlap problem */
	z-index: 5;
	/* thus we need to apply explicit z-index here... */
}

.menu li:hover {
	z-index: 10000;
	/* ...and here. this makes sure active item is always above anything else in the menu */
	white-space: normal;
	/*  to resolve IE7 :hover bug (z-index above is ignored if this is not present)
							see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.menu li li {
	float: none;
	/* items of the nested menus are kept on separate lines */
}

.menu ul {
	visibility: hidden;
	/* initially hide all submenus. */
	position: absolute;
	z-index: 10;
	left: 0;
	/* while hidden, always keep them at the top left corner, */
	top: 0;
	/* 		to avoid scrollbars as much as possible */
}

.menu li:hover>ul {
	visibility: visible;
	/* display submenu them on hover */
	top: 100%;
	/* 1st level go below their parent item */
}

.menu li li:hover>ul {
	/* 2nd+ levels go on the right side of the parent item */
	top: 0;
	left: 100%;
}

/* -- float.clear --
	force containment of floated LIs inside of UL */
.menu:after,
.menu ul:after {
	content: ".";
	height: 0;
	display: block;
	visibility: hidden;
	overflow: hidden;
	clear: both;
}

.menu,
.menu ul {
	/* IE7 float clear: */
	min-height: 0;
}




/* - - - ADxMenu: DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */

.menu,
.menu ul li {
	font-family: Futura PT;
	color: #00549F;
	font-size: 12px;
}

.menu ul {
	width: 16em;
}

.menu a {
	text-decoration: none;
	font-family: Futura PT;
	color: #7AB800;
	font-size: 12px;
	padding: .4em 1em;
	display: block;
	position: relative;
}

.menu a:hover,
.menu li:hover>a {
	font-family: Futura PT;
	color: #00549F;
	font-size: 12px;
}


.menu ul>li+li {
	/* and remove the top border on all but first item in the list */
	border-top: 0;
}

.menu li li:hover>ul {
	/* inset 2nd+ submenus, to show off overlapping */
	top: 1px;
	left: 90%;
}

/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
	placed here to clarify the terminology I use when referencing submenus in posts */
.menu>li:first-child>a,
.menu li+li+li li:first-child>a {
	font-family: Futura PT;
	color: #00549F;
	font-size: 12px;
}

/* Fix for IE5/Mac \*/
/*/
.menu a {
	float: left;
}
/* End Fix */

/*]]>*/



.wizard a {
	padding: 10px 12px 10px;
	margin-right: 5px;
	background: #efefef;
	position: relative;
	display: inline-block;
}

.wizard a:before {
	width: 0;
	height: 0;
	border-top: 20px inset transparent;
	border-bottom: 20px inset transparent;
	border-left: 20px solid #fff;
	position: absolute;
	content: "";
	top: 0;
	left: 0;
}

.wizard a:after {
	width: 0;
	height: 0;
	border-top: 20px inset transparent;
	border-bottom: 20px inset transparent;
	border-left: 20px solid #efefef;
	position: absolute;
	content: "";
	top: 0;
	right: -20px;
	z-index: 2;
}

.wizard a:first-child:before,
.wizard a:last-child:after {
	border: none;
}

.wizard a:first-child {
	-webkit-border-radius: 4px 0 0 4px;
	-moz-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
}

.wizard a:last-child {
	-webkit-border-radius: 0 4px 4px 0;
	-moz-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0;
}

.wizard .badge {
	margin: 0 5px 0 18px;
	position: relative;
	top: -1px;
}

.wizard a:first-child .badge {
	margin-left: 0;
}

.wizard .current {
	background: #007ACC;
	color: #fff;
}

.wizard .current:after {
	border-left-color: #007ACC;
}


/* ff anti-aliasing bug - http://coderwall.com/p/tpmsta */
.mywizard li {
	position: relative;
	background: #f5f5f5;
	padding-right: 30px;
	padding-left: 5px;
}

.mywizard li a:after,
.mywizard li a:before {
	left: 100%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.mywizard li a:after {
	border-color: rgba(245, 245, 245, 0);
	border-left-color: #f5f5f5;
	border-width: 20px;
	top: 50%;
	margin-top: -20px;
	margin-left: -30px;
}

.mywizard li a:before {
	border-color: rgba(255, 255, 255, 0);
	border-left-color: #fff;
	border-width: 30px;
	top: 50%;
	margin-top: -30px;
	margin-left: -30px;
}

.mywizard li .badge {
	vertical-align: text-bottom;
	padding-top: 3px;
}

.overlay {
  position: fixed; /* siempre cubre toda la ventana, incluso con scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 128, 128, 0.5); /* gris semitransparente */
  z-index: 5000;

  display: flex; /* flexbox para centrar contenido */
  justify-content: center;
  align-items: center;
}




input,select option,select {
	font-weight: 600 !important;
}


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

.btn-priary:disabled,
.btn-success:disabled {
  color: #fff !important;
  /* si no quieres que se vea más “pálido”:
  opacity: 1; pointer-events: none;
  */
}
.btn-priary {
	background-color: #377AC6;
	border-color: #377AC6;
	font-weight: 600 !important;
	  color: #fff !important;

}

.btn-success {
	background-color: #8bc53f;
	border-color: #8bc53f;
	font-weight: 600 !important;
	  color: #fff !important;


}

/* table,td,tr {
	border-width: 1px;
} */

h5{
	font-weight: 600;
}

.lead{
	font-weight: 600;
}

/* Modal más compacto y responsivo */
.custom-modal {
  max-width: 400px;   /* tamaño máximo en desktop */
}

@media (max-width: 576px) {
  .custom-modal {
    max-width: 90%;   /* en móvil ocupa solo 90% del ancho */
    margin: auto;
  }

  .custom-modal .modal-body {
    font-size: 14px;
    padding: 1rem;
  }

  .custom-modal .modal-footer {
    padding: 0.5rem;
    justify-content: center; /* botones centrados */
  }
}
/* Contenedor principal */
.header-container {
  display: flex;                /* 👈 activa flexbox */
  justify-content: center;      /* centra el grupo logo+botón */
  align-items: center;          /* centra verticalmente */
  gap: 20px;                    /* 👈 separación entre logo y botón */
  margin-bottom: 20px;          /* opcional: espacio inferior */
}

/* Botón cerrar sesión */
.btn-logout {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-size: 1rem;
}

/* ✅ Ajustes para móviles */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;     /* Apilar elementos */
    align-items: center;        /* Centrar todo */
  }

  .btn-logout {
    order: -1;                  /* Mover botón arriba del logo */
    margin-bottom: 2.5rem;      /* Espacio entre botón y logo */
    width: auto;                /* Botón compacto */
  }

  .logo {
    max-width: 80%;             /* Logo más pequeño en móvil */
    height: auto;
  }
}
/* 🔹 Contenedor encabezado: logo + botón */
.header-container {
  display: flex;                /* usa flexbox */
  justify-content: center;      /* centra grupo logo+botón en desktop */
  align-items: center;          /* centra verticalmente */
  gap: 20px;                    /* espacio entre logo y botón */
  margin-bottom: 20px;
  flex-wrap: wrap;              /* permite que en pantallas chicas se acomode */
}

/* 🔹 Logo */
.header-container .logo {
  max-height: 80px;             /* tamaño en desktop */
  height: auto;
}

/* 🔹 Botón cerrar sesión */
.header-container .btn-logout {
  background-color: #6c757d;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-size: 1rem;
  white-space: nowrap;          /* evita que se parta en varias líneas */
}

/* ✅ Ajustes responsive (tablets y móviles) */
@media (max-width: 992px) {
  .header-container {
    justify-content: space-between; /* logo a la izquierda, botón a la derecha */
  }

  .header-container .logo {
    max-height: 65px;
  }

  .header-container .btn-logout {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
}

@media (max-width: 576px) {
  .header-container {
    flex-direction: column;   /* apila logo y botón */
    align-items: center;
  }

  .header-container .btn-logout {
    order: -1;                /* botón primero */
    margin-bottom: 1rem;
    width: auto;
    font-size: 0.85rem;
    padding: 0.4rem 0.8rem;
  }

  .header-container .logo {
    max-height: 50px;         /* logo más pequeño en móvil */
  }
}
/* 🔹 Estilos específicos para el logo y el botón cerrar sesión */

/* Tamaño normal en pantallas grandes */
.logo-hptu {
	max-height: 80px;
	height: auto;
  }
  
  .btn-cerrar {
	font-size: 1rem;
	padding: 0.5rem 1rem;
	white-space: nowrap;   /* evita que el texto se parta */
	border-radius: 8px;
  }
  
  /* ✅ Ajustes para tablets */
  @media (max-width: 992px) {
	.logo-hptu {
	  max-height: 65px;
	}
  
	.btn-cerrar {
	  font-size: 0.9rem;
	  padding: 0.4rem 0.8rem;
	}
  }
  

  /* ✅ Ajuste solo en móviles */
@media (max-width: 576px) {
	.btn-cerrar {
	  position: relative !important;  /* quita el absolute */
	  display: block;
	  margin: 0.5rem auto 1rem auto;  /* centrado con margen */
	}
  }
  
  /* ✅ Ajustes en pantallas pequeñas (móvil) */
  @media (max-width: 576px) {
	.logo-hptu {
	  max-height: 50px;    /* Logo más pequeño */
	}
  
	.btn-cerrar {
	  font-size: 0.8rem;
	  padding: 0.3rem 0.6rem;
	  margin-top: 0.5rem;  /* separarlo del logo */
	}
  
	/* 👇 En móvil forzamos el botón arriba y centrado */
	.btn-cerrar {
	  position: relative !important;
	  display: block;
	  margin: 0 auto 1rem auto; /* centrado con margen inferior */
	}
  }