@charset "UTF-8";

/* Colocar aquí SOLO estilos que puedan ser reutilizados en diferentes pantallas. 
   Si son estilos que solo se usarán en un xhtml en particular es mejor colocarlos en el propio xhtml o un un .css particular */

/** Estilos para paneles */

body .ui-panelgrid .ui-panelgrid-cell {
	background: none;
	padding: 5px 15px 5px 10px;
}

.ui-columns-topbottom1px-padding.ui-panelgrid .ui-panelgrid-cell {
	padding: 1px 0 !important;
}

.ui-columns-sin-padding.ui-panelgrid .ui-panelgrid-cell {
	padding: 0 !important;
}

.ui-panel-sin-pading .ui-panelgrid-cell {
	padding: 5px 0 !important;
}

.ui-columns-padding-img.ui-panelgrid .ui-panelgrid-cell {
	background: none;
	padding: 0px 15px 0px 10px;
}

.ui-columns-padding-banner-in.ui-panelgrid .ui-panelgrid-cell {
	background: none;
	padding: 0 !important;
}

/* Estilo para los renglones y columnas del p:panelGrid */
.ui-grid-row .ui-grid-col-4 {
	padding: 0.5em 0;
}

.ui-panelgrid-sin-fondo {
	background: none !important;
}

.ui-panel-sin-pading .ui-panelgrid-cell {
	padding: 5px 0 !important;
}

/* Se sobreescribe este estilo de la datatable solo agregándole !important.
* Lo anterior debido a que si el panelGrid usa ui-panelgrid-blank o ui-noborder quitará los bordes del panel pero también cualquier
* borde de las datatable anidadas. Esto afecta sobretodo a la separación entre renglones de una datatable cuando está en modo reflow en responsive
*/
.ui-datatable-reflow .ui-datatable-data tr {
	border-bottom: 1px solid rgba(0, 0, 0, .08) !important;
}

/*Se sobrescribe estilo para quitar lineas de panel en modo responsivo */
.ui-panelgrid .ui-grid-responsive .ui-grid-row {
	border: 0 none !important;
}

/* Se sobreescribe este estilo del div del picklist que muestra los listados de seleccionado y no seleccionado
* Se incrementa el alto de dichos divs para que se vean todos los elementos ya que el default solo muestra 5 renglones aprox.
* 
* También se sobreescribe el border solo agregándole el !important. 
* Lo anterior debido a que si el panelGrid usa ui-panelgrid-blank o ui-noborder quitará los bordes del panel pero también cualquier borde de picklist anidado
*/
.ui-picklist .ui-picklist-list {
	height: 100%;
	border: 1px solid #dee2e6 !important;
	font-size: x-small;
}

/** Se sobreescribe el estlo del titulo de cada listado del picklist para que muestre sus margenes a pesar de que el panelGrid tenga noborder */
.ui-picklist .ui-picklist-caption {
	border: 1px solid #dee2e6 !important;
}

/* Estilo para poner el asterisco en rojo */
.ui-outputlabel-rfi {
	color: #AE1C22;
}

/* Estilos para botones */

.btn-primario {
	border-radius: 8px !important;
	background-color: #002F2A !important;
	border: 1px solid #002F2A !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 600;
	line-height: 22px;
	font-family: "Noto Sans", sans-serif !important;
	color: #fff !important;
	width: 100%;
    justify-content: center;
}

.btn-secundario {
	border-radius: 8px !important;
	background: #FFF !important;
	border: 1px solid #002F2A !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 600;
	line-height: 22px;
	font-family: "Noto Sans", sans-serif !important;
	color: #002F2A !important;
}

/* Estilo para agregar el icono atrás */
.btn-secundario.btn-atras:before {
	content: "";
	background-image: url('/fem/resources/img/Arrow-left.svg');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 25px;
	height: 25px;
}

.btn-secundario.btn-atras {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Estilos para etiquetas de barra de progreso */
.etiquetas-barra {
	color: #161A1D;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 14px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 19px;
}

/* Estilo para etiqueta campos obligatorios */
.etiqueta-obligatorios {
	color: #434343;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 14px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 19px;
}

/* Estilo para las etiquetas de los campos del formulario */
.etiquetas-formulario {
	color: #161A1D;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 600;
	line-height: normal;
}

.etiquetas-formulario-titulo {
	color: #434343 !important;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.etiquetas-formulario-titulo-ajustada {
	font-size: 15.5px !important;
}

.etiquetas-formulario-texto {
	font-family: "Noto Sans", sans-serif !important;
	font-size: 14px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 19px;
}

.etiquetas-rojo {
	color: #611232 !important;
	text-overflow: ellipsis;
}

/* Estilos para los p:inputText */
.estilo-input-text {
	border-radius: 8px !important;
	border: 1px solid #DDD;
	height: 40px;
	overflow: hidden;
	color: #161A1D !important;
	text-overflow: ellipsis !important;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: 22px;
	padding: .8rem .8rem !important;
}

.estilo-input-text::placeholder {
	overflow: hidden;
	color: #AAA !important;
	text-overflow: ellipsis !important;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: 22px;
}


/* Se sobreescriben estilos para el selectOneMenu */
.estilos-select-one {
	border-radius: 8px !important;
	border: 1px solid #DDD;
	height: 40px;
}

.ui-selectonemenu-label:not([aria-label*="Selecciona"]) {
	color: #161A1D;
}

.ui-selectonemenu-label[aria-label*="Selecciona"] {
	color: #AAA;
}

.estilos-select-one .ui-selectonemenu-label {
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
	padding: .8rem .8rem !important;
}

.estilos-select-one .ui-selectonemenu-trigger {    
    right: 8px !important;
}

body .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
	color: #161A1D;
	font-size: 14px;
}

.ui-selectonemenu-panel .ui-selectonemenu-list {
	color: #AAA !important;
	text-overflow: ellipsis;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: normal;
}

body .ui-selectonemenu-panel .ui-selectonemenu-items .ui-selectonemenu-item {
	word-break: break-word;
	white-space: normal;
}


@media (max-width : 426px) {
	body .ui-selectonemenu-panel {
		width: 100% !important;
	}
}


/* Estilos para radios button */
.ui-selectoneradio label {
	color: #161A1D;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 22px;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active {
	border-color: #002F2A !important;
	background: #fff;
	border: 2px solid;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active .ui-icon-bullet {
	background: #002F2A;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-active.ui-state-hover {
	background: #fff;
}

/* Estilo para panel de botones del formulario */
.panel-botones {
	border-radius: 16px 16px 0 0;
	background: #FFF;
	box-shadow: 0 -4px 4px 0 rgba(180, 180, 180, 0.25);
	margin-top: 25px;
}

/* Estilo para el calendario */
.calendario {
	background-image: url(/fem/resources/img/Calendar.svg) !important;
	/*background-size: contain !important;*/
	background-repeat: no-repeat !important;
	background-position: center right !important;
	background-position-x: 98% !important;
	height: 40px;
	border-radius: 8px !important;
	border: 1px solid #DDD;
	color: #161A1D !important;
	text-overflow: ellipsis;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400 !important;
	line-height: normal;
}

.calendario::placeholder {
	overflow: hidden;
	color: #AAA;
	text-overflow: ellipsis;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.calendario.ui-inputfield {
    padding: .8rem .8rem !important;
}

.ui-datepicker-calendar {
	overflow: hidden;
	color: #AAA;
	text-overflow: ellipsis;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.ui-datepicker .ui-datepicker-calendar th {
	overflow: hidden;
	color: #AAA !important;
	text-overflow: ellipsis;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: bold !important;
	line-height: normal;
}

.ui-datepicker.ui-widget-content {
	z-index: 100000 !important;
}

body .ui-datepicker .ui-datepicker-header {
	overflow: hidden;
	color: #AAA;
	text-overflow: ellipsis;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

.ui-datepicker-year {
	font-family: "Noto Sans", sans-serif !important;
	font-size: 16px !important;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today>a.ui-state-active,
body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-today>span.ui-state-active,
body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day>a.ui-state-active,
body .ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day>span.ui-state-active {
	background: #002F2A !important;
}

body .ui-datepicker .ui-datepicker-today .ui-state-default {
    border: 1px solid #002F2A !important;
}

/* Estilos para mensajes de validación */
body .ui-message.ui-message-error {
	border-width: 0 !important;
	background: #fff !important;
	border: none !important;
	overflow: hidden;
	color: #AE1C22;
	text-overflow: ellipsis;
	font-family: "Noto Sans", sans-serif !important;
	font-size: 14px !important;
	font-style: normal;
	font-weight: 400;
	line-height: 19px;
}

/* Estilos para mensajes de exito */
.ui-messages-info {
	border-radius: 8px !important;
	border: 1px solid #2A872A !important;
	background: #F0FAF5 !important;
	box-shadow: 0 4px 4px 0 rgba(219, 219, 219, 0.25) !important;
}

.ui-messages-info-summary {
	color: #2A872A !important;
}

.ui-messages-info-icon {
	background: url("/fem/resources/img/successCheck.svg") !important;
}

.ui-messages-info-icon::before {
	content: none !important;
}

.ui-messages-close {
	background: none !important;
	color: #2A872A !important;
}

body .ui-inputfield.ui-state-error {
	border-color: #AE1C22 !important;
}

body .ui-message {
	padding: 0 !important;
}

.ui-message-success,
.ui-message-info,
.ui-message-error,
.ui-message-warn,
.ui-message-fatal {
	margin: 0 !important;
}

body .ui-radiobutton .ui-radiobutton-box.ui-state-error {
	border-color: #AE1C22 !important;
}

/* Se quitan bordes */
#menuUsuario_content {
	border: none;
}

/* Contenedor para centrar elementos de pantallas */
.contenedor-centrado {
	display: block;
	padding: 2% 0;
}

/* Estilos para opciones mobile y desktop */
.opciones-mobile {
	display:flex !important;
}

.opciones-desktop {
		display:none !important;
}

/* Media para ocultar opciones mobile y mostrar las desktop */
@media screen and (min-width: 501px) {	
	.opciones-mobile {
		display:none !important;
	}
		
	.opciones-desktop {
		display:flex !important;
	}
}

/* Consevar contener principal en 600*/
@media (min-width : 600px) {
	.contenedor-centrado {
		display: flex;
		/* Activa Flexbox */
		justify-content: center;
		/* Centra horizontalmente */
		align-items: center;
		/* Centra verticalmente */
		/* height: 100vh;Ocupa el 100% de la altura de la ventana */
		width: 100%;
		/* Ocupa todo el ancho de la ventana */
		/* Puedes añadir un borde para visualizar el contenedor */
		/*border: 1px solid #ccc;*/
		padding: 2% 0;
	}

	.panel-contenedor {
		width: 600px !important;
	}
}

/* Media para ajustar calendario en resolución pequeña */
@media screen and (max-width: 321px) {
	.ui-datepicker-calendar {
		table-layout: fixed !important;
	}

	body .ui-datepicker td a.ui-state-default.ui-state-highlight.ui-state-hover {
		margin: 0 !important;
	}
}

/* Media para ajustar título de datos de confirmación */
@media screen and (max-width: 401px) {
	.etiquetas-formulario-titulo-ajustada {
		font-size: 14px !important;
		white-space: nowrap;
	}	
}

/* Media para ajustar título de datos de confirmación */
@media screen and (max-width: 350px) {
	.etiquetas-formulario-titulo-ajustada {
		font-size: 13px !important;
		white-space: nowrap;
	}
}