@media screen and (max-width: 40em)
{
.ui-fileupload-buttonbar .ui-button .ui-button-text {
display:block !important;
	}
}
.backColumnRed
{
	background-color: #ff8080!important;
	
}
.backColumnYellow
{
	background-color: yellow !important;
	
}
.disabledMenuItem a
{
	cursor:inherit;
	color: lightgray !important;
}

.ui-selectcheckboxmenu-header .ui-chkbox {
    display: none !important;
}

.WpA50
{
	width: 50% !important;
	float:left !important;
}
.WpR50M25
{
	width: 50% !important;
	float:left !important;
}
.WpA40
{
	width: 40% !important;
	float:left !important;
}

.WpA10
{
	width: 10% !important;
	float:left !important;
}
.WpA15
{
	width: 15% !important;
	float:left !important;
}
.WpA25
{
	width: 25% !important;
	float:left !important;
}
@media (max-width: 480px) and (min-width: 320px)
{
.WpR50M25
{
	width: 25% !important;
	float:left !important;
}	
}
.labelOEBG
{
	    font-weight: 1000 !important;
	    color: #71CC8D !important;
}
.ui-outputlabel, table tbody tr td {
    color: #60676B;
}
.ui-inputfield {
	  color: #60676B;

	}
.ui-selectonemenu-panel .ui-selectonemenu-list-item, .ui-selectcheckboxmenu-panel .ui-selectcheckboxmenu-list-item {
	 color: #60676B;
	
}

.backGreenCell
{
	background:rgb(0,200,0);
}
.greenCell
{
	color:rgb(0,200,0);
	/*background:rgb(0,200,0);*/
	/*background:rgba(0,200,0,0.6);*/ 
}


.letterOdon
{
	    /* margin-top: 20%; */
    top: 5%;
    
    cursor:pointer;
    font-weight: bolder !important;
    position: relative;
    font-size: 2em;
}
.divAlertContent
{
	
    
    left:8%;
    width: 92%;
    height: 100%;
    position: absolute;
    top: 0px;
     background-color: #F6FAFC/*#F1F6F9*/;
}
.divAlert
{
	width: 280px;
    height: 200px;
    top: 40%;
    position: fixed;
    z-index:9999999;
   right: -260px;
   font-family: 'ralewayregular'
}

.divAlertBorderContent
{
	color: white;
	cursor:pointer;
	border-top-left-radius:25px;
	border-bottom-left-radius:25px;
		height: 100%;
	
	background-color: red;
	width: 8%;
    word-break:break-all;
    text-align: center;
}

.labelCheckReduced .ui-chkbox-label
   {
   font-weight: normal;
   }
   .labelCheckReduced
   { 
   font-weight: normal;
    font-size: 13px !important;
   }
.labelDCG .ui-inputfield
{
	font-size: 13px;
	padding:8px !important;
}
.labelDCE .ui-inputfield
{
	font-size: 13px;
	padding:8px !important;
}
.labelDCGEndo .ui-selectonemenu-label { 
    font-size: 10px;
}
.labelDCGEndo.ui-inputfield
{
	font-size: 11px;
	padding:8px !important;
} 
.selectDCG
{
	width: 80%;
	font-size: 13px;
}
.selectDCG.ui-selectonemenu .ui-selectonemenu-trigger
{
	display:none;
}
.selectDCG .ui-inputfield {
	font-size: 12px;
   
    padding: 8px !important;
}
.select10DCGPanel
{
	width:45px;
}
.select10DCG .ui-inputfield {
		font-size: 13px;
    padding: 8px !important;
}
.select10DCG
{
	width: 100%;
}

.select90
{
	width: 90%;
}
.select85
{
	width: 85%;
}

.select80
{
	width: 80%;
}

.select10DCGAnos .ui-inputfield {
		font-size: 13px;
    padding: 8px !important;
}
.select10DCGAnos
{
	width: 80%;
}

.select10DCGAnos.ui-selectonemenu .ui-selectonemenu-trigger
{
	display:none;
}
.select10DCG.ui-selectonemenu .ui-selectonemenu-trigger
{
	display:none;
}
.labelDCG.ui-chkbox .ui-chkbox-label
{
	font-size: 13px;
	width: 65%;
	display: table-caption;
}
.labelDCE.ui-chkbox .ui-chkbox-label
{
	font-size: 13px;
	width: 85%;
	display: table-caption;
}
.labelDCGEndo.ui-chkbox .ui-chkbox-label
{
	font-size: 12px;
	display: table-caption;
}
.labelDCGBig.ui-chkbox .ui-chkbox-label
{
	font-size: 13px;
	width: 65%;
	
}
.labelDCG.ui-selectoneradio label
{
	font-size: 13px;
	    width: 55%;
}
.labelTitleDCG
{
	font-size: 20px;
	    color: #778D9B;
	    
	    
}
.labelTitleDCG .ui-chkbox-label
{
	width:85%;
}
.labelSubTitleDCG
{
	font-size: 16px;
	    color: #778D9B;
}
.labelNotaDCG
{	font-size: 11px;}
.labelDCG
{
	font-size: 13px;
	display: inline-flex;
}
.labelDCE
{
	font-size: 13px;
	display: inline-flex;
}
.labelDCGEndo
{
	font-size: 12px;
	display: inline-flex;
}
.labelCheckBoxDCGMotivosConsulta
{
	width: 75%; 
    float: right;
     
}
    
.ui-menu .ui-menuitem-text
{
width: 85%;	
}

/* estilo scroll para panelgrid*/
.scroll-grid {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  width: 100% !important;
}

.scroll-grid table {
  border-collapse: collapse;
  table-layout: auto;       
  min-width: 900px;        
  width: max-content;     
}
.scroll-grid p\:panelGrid {
  min-width: max-content !important; 
  border-collapse: collapse;
}

.scroll-grid td, 
.scroll-grid th {
  white-space: nowrap;    
  padding: 4px 8px;    
}

.scroll-grid-wrapper {
  overflow-x: auto;              
  width: 100%;                    
  -webkit-overflow-scrolling: touch; 
}

/* Estilo para los dropdown de mes y año dentro del datePicker */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    color: #2F4F4F; /* verde oscuro suave */
    font-family: 'Raleway', sans-serif;
    font-size: 0.875rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.375rem; /* borde redondeado */
    border: 1px solid #A8E6CF; /* verde claro */
    background-color: #E0F7E9; /* verde muy suave */
}

/* Estilo para los botones del panel de calendario */
.ui-datepicker .ui-datepicker-buttonpane button {
    font-family: 'Raleway', sans-serif;
    font-size: 0.875rem;
    border: none;
    border-radius: 0.375rem;
    color: #ffffff;
    background-color: #4CAF50; /* verde medio */
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background-color: #45A049; /* verde un poco más oscuro al hover */
}

/* Ícono del calendario para inputs con labelDCG y labelDCE */
.labelDCG .ui-datepicker-trigger,
.labelDCE .ui-datepicker-trigger {
    width: 1.5rem !important; /* 24px */
    height: auto;
    vertical-align: middle;
    cursor: pointer;
    filter: brightness(1.2); /* ligeramente más brillante */
}

/* Estilo general del panel del datePicker */
.ui-datepicker {
    width: 240px !important;
    font-size: 0.875rem;
    border-radius: 0.75rem; /* borde más redondeado */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    background-color: #F0FFF4; /* verde muy claro de fondo */
    padding: 0.5rem;
}

/* Estilo del header de calendario */
.ui-datepicker-header {
    background-color: #B2F2BB; /* verde pastel */
    border-radius: 0.75rem 0.75rem 0 0;
    color: #2F4F4F;
    font-weight: 600;
    text-align: center;
    padding: 0.4rem 0;
}

/* Estilo para los dropdown de mes y año dentro del datePicker */
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    color: #2F4F4F; /* verde oscuro suave */
    font-family: 'Raleway', sans-serif;
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem; /* borde más redondeado */
    border: 1px solid #A8E6CF; /* verde claro */
    background-color: #E0F7E9; /* verde muy suave */
    appearance: none; /* quitar estilo nativo del navegador */
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

/* Estilo para el input de año dentro del datePicker */
.ui-datepicker input.ui-datepicker-year {
    color: #2F4F4F; /* verde oscuro suave */
    font-family: 'Raleway', sans-serif;
    font-size: 0.875rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem; /* borde redondeado consistente */
    border: 1px solid #A8E6CF; /* verde claro */
    background-color: #E0F7E9; /* verde muy suave */
    width: 70px; /* ajustar ancho para que se vea bien */
    box-sizing: border-box;
    text-align: center;
    transition: all 0.2s ease-in-out;
}

.ui-datepicker input.ui-datepicker-year:focus {
    border-color: #4CAF50; /* verde más vivo al focus */
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.4);
    outline: none;
}


.ui-datepicker select.ui-datepicker-month:hover,
.ui-datepicker select.ui-datepicker-year:hover,
.ui-datepicker select.ui-datepicker-month:focus,
.ui-datepicker select.ui-datepicker-year:focus {
    border-color: #4CAF50; /* verde más vivo al hover/focus */
    box-shadow: 0 0 4px rgba(76, 175, 80, 0.4);
    outline: none;
}

/* Input del datePicker */
.ui-inputfield.ui-calendar {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #CBD5E1;
    border-radius: 0.5rem;
    font-family: 'ralewayregular', sans-serif;
    color: #1F2937;
    background-color: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ui-inputfield.ui-calendar:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(51, 175, 222, 0.3); /* efecto de focus similar a Diamond */
    outline: none;
}


.lateralMenuSeleccionado
{
	
	color: #71CC8D !important;
    border: #71CC8D solid 2px !important;
    /*#e5ebf0*/
}
.panelNoBorder
{
	border:none !important;
	    margin-top: 5px;
}
.panelNoBorder.ui-panelgrid tbody tr td
{
    border-style: none !important
}
.lenguetaCodigo
{
	position: absolute;
    right: -10px;
    padding: 0px 0px !important;
    width:20px;
    height:20px;
    min-width: 0px !important;
    background-color:  #5fcf80;
}
.lenguetaCodigoVisible
{
	visibility: hidden;
}
.lenguetaCodigo:hover {
  cursor: pointer;
}

.CodigoOdonFull
{	width:50px;
	height: 50px;
	float:left;
background-color: #F6FAFC;
}
.CodigoTTMMovLatFull{
	width:32px;
	height: 32px;
	float:left;
	}
.CodigoOdonFullInAll
{	width: 80%;
cursor:pointer;
    margin: auto;
    margin-top: 10%;
    height: 80%;
	
}
.CodigoTTMMovLatDerFullInAll
{	width: 80%;
	cursor:pointer;
    margin: auto;
    margin-top: 5%;
    height: 80%;
	
}
.CodigoOdonFullInAllCruz
{	width: 70%;
    border: 4px dotted white;
    margin-top: 10%;
    height: 70%;
	
}

.CodigoOdonFullIn1
{	background-color:red;}
.CodigoOdonFullIn2
{	background-color:rgb(250,0,0);}
.CodigoOdonFullIn3
{	background-color:blue;}
.CodigoOdonFullIn4
{	background-color:rgb(0,0,250);}
.CodigoOdonFullIn5
{	background-color:black;}
.CodigoOdonFullIn6
{	background-color:green;}
.implanteBorderPlaca
{
	    border: solid 4px green !important;
    margin: 1px 1px 1px 1px !important;
}
.implanteBorderSarro
{
	    border: solid 4px green !important;
    margin: 1px 1px 1px 1px !important;
}
.implanteBorderGin
{
	    border: solid 4px green !important;
    margin: 1px 1px 1px 1px !important;
}
.separatorV
{
	height:2px;
	width:100%;
	border:solid 1px black;
	background:black;
}
.separatorV2
{
	border:1px solid grey; 
	width:25%;
	height:1px;
	background:grey;
}
.contenedorDiente
{
	border: solid 1px black;
	cursor: pointer;
	stroke:black;
	stroke-width:1px;
	fill:white;
	
}
.contenedorDienteEndo
{
	border: solid 1px black;
	cursor: pointer;
	stroke:black;
	stroke-width:1px;
	fill:white;
	
}
.contenedorDienteTTMDesdentadas
{
	border: solid 1px black;
	cursor: pointer;
	stroke:black;
	stroke-width:1px;
	fill:white;
	
}
.contenedorDienteGin
{
	border: solid 1px black;
	cursor: pointer;
	stroke:black;
	stroke-width:1px;
	fill:white;
	width:100%;
		    margin: 4px 4px 4px 4px;
}

.dienteCruz
{
	
}	
.dienteCen
{
	
}	
.dienteSup
{
	
}

.dienteIzq
{
	
}
.dienteNoClic
{
	cursor: default;
	fill: lightgrey; 
}
.dienteNoClicTTMDesdentadas
{
	
	fill: lightgrey; 
}
.dienteNoClicT
{
	cursor: default;
	fill:black; 
}

.dienteInf
{
	
}
.dienteInfInf
{
	
}
.dienteDer
{
	
}

.ui-widget-overlay
{
	z-index: 1000000 !important;
}

.ui-dialog
{
	z-index: 1000001 !important;
	
}
.titulo
{
	
	font-weight: bolder;
	color: #778D9B !important;
}
.valor
{
	font-weight: normal;
	color: #778D9B !important;
	
}
.headerTable
{
	font-weight: bolder;
	
}
.dataOnTable
{
	font-weight: normal;
	
}
.mensBorrado
{
		    background-color: #ff00002e !important;
}
.mensLeidos
{
	
		font-weight: normal;
		font-size: 12px;
		color: grey;    font-variant: small-caps;
}
.mensNoleidos
{
		font-weight: bolder;
		font-style: italic;
		color: black;
}
.Wp5{
     width: 5%;
}
.Wp10{
     width: 10%;
}
.Wp15{
     width: 15%;
}
.Wp19{
     width: 19%;
}

.Wp20{
     width: 20%;
}

.Wp25{
     width: 25%;
}
.Wp27{
     width: 27%;
}
.Wp30{
     width: 30%;
}
.Wp33{
     width: 33%;
}
.Wp35{
     width: 35%;
}
.Wp40{
	     width: 40%;
}
.Wp45{
	     width: 45%;
}
.Wp50{
	     width: 50%;
}
.Wp55{
	     width: 55%;
}

.Wp60 {
     width: 60%;
}

.Wp66 {
     width: 66%;
}

.Wp65 {
     width: 65%;
}
.Wp70 {
     width: 70%;
}
.Wp75 {
     width: 75%;
}

.Wp80 {
     width: 80%;
}
.Wp85 {
     width: 85%;
}

/* Width */
.Wid100{ width:100%;}
.Wid90{ width:90%;}
.Wid80{ width:80%;}
.Wid74{ width:74%;}
.Wid70{ width:70%;}
.Wid60{ width:60%;}
.Wid50{ width:50%;}
.Wid45{ width:45%;}
.Wid40{ width:40%;}
.Wid37{ width:37%;}
.Wid35{ width:35%;}
.Wid30{ width:30%;}

/* Width Special Values */
.Wid33{ width:33.3%;}
.Wid25{ width:25%;}
.Wid20{ width:20%;}
.Wid10{ width:10%;}


#layout-topbar{min-height:112px; width:100%; border-top:solid 6px #71CC8D; background-color:#F6FAFC/*#F1F6F9*/; display:table;}
#layout-topbar-menu{float:right; padding:0px; margin-top:35px; max-width:580px; height:auto;}
			#layout-topbar-menu>li{float:right;  padding-bottom:10px;}
		/* big topic */
		
		
		

#layout-topbar-menu2{float:right; padding:0px; margin-top:35px; max-width:580px; height:auto;}
			#layout-topbar-menu2>li{float:right;  padding-bottom:10px;}
.valor{font-size:18px !important;}

.ui-paginator
{
	padding: 0px !important;
}
.ui-paginator .ui-paginator-current, .ui-paginator .ui-paginator-rpp-options
{
	margin-left: 0px !important;
	margin-right: 0px !important;
}
.seleccionTopBar .ui-inputfield
{
	font-size: 12px;
	margin-right: 10px;
	    padding: 5px !important;
}
.selectedPageMenu
{
	background-color: #F6FAFC;
    color: #71CC8D;
    border-style: inset;
    border-top: 8px solid;
    padding-left: 5px;
    padding-right: 5px;
    
    border-color: #F6FAFC;
    border-left: 8px solid;
    border-right: 8px solid;
    border-bottom: 8px solid;
}
.ui-state-active
{
	-webkit-print-color-adjust:exact;
}

.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
-webkit-print-color-adjust: exact;
}

.verde {
	background: #71CC8D !important;
	color:#F1F6F9;
}
.rojo {
	background: #D0525D !important;
	color:#F1F6F9;
}
.amarillo {
	color:#F1F6F9;
	background: #E9EC44 !important;
}

.ui-notificationbar {
 
    background-color: #289DCA !important;
}
.ui-selectmanycheckbox.ui-widget td, .ui-selectoneradio.ui-widget td {
    border: 0 none !important;
  }
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    opacity: 1 !important;
    filter: Alpha(Opacity=100)!important;
}
.msjTextoClass a
{
	color:black;
}

.greenCellBack
{
	background:rgb(0,200,0) !important;
	background:rgba(0,200,0,0.6)  !important; 

}
.redCellBack
{

	background:rgb(230,0,0)  !important;
	background:rgba(230,0,0,0.6)  !important;
}
.preguntaHab
{
	font-weight: bolder !important;
}
.subpreguntaHab
{
	font-size: 14px;
}
.conformidades .ui-button-text
{
	color:#5fcf80;
	background-color: white;
	border-color: #5fcf80;
}
.conformidades .ui-state-hover .ui-button-text
{
	color:white;
}
.conformidades .ui-state-active .ui-button-text
{
	color:white;
}
.smallInput
{
	font-size: 14px;
	padding: 2px !important;
}
.smallOutput
{
	font-size: 14px;
	padding: 2px !important;
}
.geoReferenciaBox .layout-portlets-box
{
	margin: none !important;
}
.panelSinBordes  td
{
	border:none !important;	
}

.ui-panelgrid .ui-panelgrid-cell {
padding: 4px 6px;
}
.panelActEspecieProd .ui-selectmanycheckbox label
{
	font-size:11px !important;
	text-align: center;
}
.panelActEspecieCl .ui-outputlabel
{
	font-size:11px !important;
	text-align: center;
}
.TituloColTabla
{
	font-weight: bolder;
}
.BorderDiv
{
	background-color: #FBFCFD;
    
    border-radius: 3px;
    border: solid 1px #C6D6DF
}
.ui-messages-error-summary
{
	font-size: 0.8em;
}
.ui-growl-item {
    display: block;
    padding: 5px 15px !important;
    	
}

 .visibleSoloMobil{display:none}
 .visibleSoloRest{display:block}
 /* MEDIA QUERIES **************************************************************************************************************** */


/* Large desktop */
@media (min-width: 1201px){
	.valorSmall{font-size:14px !important;}
		#layout-topbar{min-height:100px;}
		.contenedorDiente{width:10%;}
		.contenedorDienteEndo{width:10%;}
		.contenedorDienteTTMDesdentadas{width:10%;}
		#logo{height:130px; margin-top:0px;}
		
		#botonEditar{right:83px}
    
}


@media (max-width: 1048px){
	#divNomMenuPrin
	{
	height: 120px !important;
    margin-top: -100px;
    width: 60% !important;
    padding-left: 160px !important;
	}
	hr
	{
	}
	h1 
	{
	
	width: 150px;
   
	
    
    }
    .ui-selectonemenu
    {
    }
}
@media (min-width: 961px){
	#layout-topbar
	{
	min-height:100px;
	}
	#layout-topbar-menu{margin-top: 0px !important;}
	
	.pnlPlacaInd
{
	width:12%;		
}

	}

@media (max-width: 960px){
	#usuDa{height: auto !important;max-width: none !important;  }
#notif{width: 100% !important}

	}
@media (min-width: 960px) and (max-width:1000px){

	.pnlPlacaInd
{
	width:6%;		
}
	#layout-menu a { font-size: 11px;}
	.valorSmall{font-size:14px !important;}
	/* menu seperator margin decreasing */
	#layout-topbar{min-height:100px;}
		.contenedorDiente{width:10%;}
		.contenedorDienteEndo{width:10%;}
		.contenedorDienteTTMDesdentadas{width:10%;}
		#logo{height:120px; margin-top:0px;}
		/*#divNomMenuPrin{   margin-top: 30px !important;}*/
		#botonEditar{right:73px}
	#divNomMenuPrin{font-size: 11px;
	float: right  !important;
    min-width: 160px;
        width: 160px;
    margin-left: 0px !important;}
	.contenedorDiente{width:10%;}
	.contenedorDienteEndo{width:10%;}
	.contenedorDienteTTMDesdentadas{width:10%;}
			#logo{    height: 100px;
    margin-top: 2px;
    margin-left: -5%;}
    .ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row, .ui-panelgrid .ui-selectmanycheckbox.ui-grid-responsive .ui-grid-row
    {display: block}
     .ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row .ui-grid-col-4,.ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row .ui-grid-col-6
    {	width: 100%;
    } 
} 

@media (min-width: 1301px) {

		#divNomMenuPrin{    margin-left: 2%;
    padding-top: 20px;
    padding-left: 250px;
    width: 550px;
    height: 160px;
	float:none !important;
}
}

@media (min-width: 1210px) and (max-width:1300px){

		#divNomMenuPrin{    font-size: 11px;
    min-width: 160px;
    width: 100px;
    padding-top: 10px;
    height: 160px;}
    #layout-menu {
    width: 95%;
    }
}
@media (min-width: 1000px) and (max-width:1200px){
	.valorSmall{font-size:14px !important;}
	/* menu seperator margin decreasing */
	#layout-topbar{min-height:100px;}
		.contenedorDiente{width:10%;}
		.contenedorDienteEndo{width:10%;}
		.contenedorDienteTTMDesdentadas{width:10%;}
		.pnlPlacaInd
{
	width:6%;		
}
	#layout-menu a { font-size: 12px;}
	#botonEditar{right:63px}
	
		#divNomMenuPrin{font-size: 11px;
	float: right  !important;
	min-width: 160px;
                width: 600px;
    height: 100px;}
    .contenedorDiente{width:10%;}
    .contenedorDienteEndo{width:10%;}
    .contenedorDienteTTMDesdentadas{width:10%;}
			#logo{    height: 120px;
    margin-top: 2px;
    margin-left: -3%;}
	.contenedorDiente{width:10%;}
	.contenedorDienteEndo{width:10%;}
	.contenedorDienteTTMDesdentadas{width:10%;}
	.ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row, .ui-panelgrid .ui-selectmanycheckbox.ui-grid-responsive .ui-grid-row
    {display: block}
      .ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row .ui-grid-col-4,.ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row .ui-grid-col-6
    {	width: 100%;
    } 
    .panelNoBorder .ui-grid-responsive .ui-grid-row
	{border:none !important;}
} 

/* Portrait tablet to landscape and desktop */
@media (min-width: 828px) and (max-width: 960px) {
	/* big topic */
	.valor{font-size:16px !important;}
	.valorSmall{font-size:14px !important;}
	.contenedorDiente{width:20%;}
	.contenedorDienteEndo{width:20%;}
	.contenedorDienteTTMDesdentadas{width:20%;}
	
	#mainTOdontograma{position:fixed;position: fixed;
    width: 10%;
    top: 10%;
    left:0px;}
    .pnlPlacaInd
{
	width:20%;		
}
    #botonEditar{right:60px}
    .CodigoOdonFull{width: 42px;height: 42px}
    .CodigoTTMMovLatFull{width: 32px;height: 32px;}
    .lenguetaCodigoVisible{	visibility: visible;}
    #divNomMenuPrin{	float: right  !important;
    margin-left: 0px !important;}
    #logo{  margin-top: -10px ;  height: 100px;}
    .ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row, .ui-panelgrid .ui-selectmanycheckbox.ui-grid-responsive .ui-grid-row
    {display: block}
      .ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row .ui-grid-col-4,.ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row .ui-grid-col-6
    {	width: 100%;
    } 
    .panelNoBorder .ui-grid-responsive .ui-grid-row
	{border:none !important;}
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 640px) and (max-width: 827px) {
	/* big topic */
	#botonEditar{right:50px}
	.valor{font-size:16px !important;}
	.valorSmall{font-size:14px !important;}
	.contenedorDiente{width:20%;}
	.contenedorDienteEndo{width:20%;}
	.contenedorDienteTTMDesdentadas{width:20%;}
	#mainTOdontograma{position:fixed;position: fixed;
    width: 10%;
    top: 10%;
    left:0px;}
    .pnlPlacaInd{	width:20%;}
    .CodigoOdonFull{width: 42px;height: 42px}
    .CodigoTTMMovLatFull{width: 32px;height: 32px;}
    .lenguetaCodigoVisible{	visibility: visible;}
    #divNomMenuPrin{	float: right  !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
    margin-right: -10px;}
    #logo{    height: 100px;}
    .ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row, .ui-panelgrid .ui-selectmanycheckbox.ui-grid-responsive .ui-grid-row
    {display: block}
    .ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row .ui-grid-col-4,.ui-panelgrid .ui-selectoneradio.ui-grid-responsive .ui-grid-row .ui-grid-col-6
    {	width: 100%;
    } 
    .ui-panelgrid .ui-grid-responsive .ui-grid-row
	{border:none !important;}
}
 
 
/* Landscape phone to portrait tablet */
@media (min-width:480px) and (max-width: 640px) {
	.visibleSoloMobil{display:block}
	.visibleSoloRest{display:none}
	/* big topic */
	
	#mobile-menu-button, #mobile-menu-button-gray {
	font-size: 12px;
    margin-top: 14px;
    
    width: 100px;}
    
    .Wp20{width:100%;}
    .letterOdon
{font-size: 1.5em}
    .pnlPlacaInd
{
	width:30%;		
}
	#botonEditar{right:50px}
	.valor{font-size:15px !important;}
	.valorSmall{font-size:13px !important;}
	.contenedorDiente{width:30%;}
	.contenedorDienteEndo{width:30%;}
	.contenedorDienteTTMDesdentadas{width:30%;}
	#mainTOdontograma{position:fixed;position: fixed;
    width: 10%;
    top: 10%;
    left:0px;}
    .CodigoOdonFull{width: 32px;height: 32px}
    .CodigoTTMMovLatFull{width: 32px;height: 32px;}
    .lenguetaCodigoVisible{	visibility: visible;}
    #divNomMenuPrin{	float: right  !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
        margin-right: -10px;
    }
    #logo{    height: 80px;}
    .ui-panelgrid .ui-grid-responsive .ui-grid-row
	{border:none !important;}
}
 
/* Portrait phones and down */
@media (min-width:320px) and (max-width: 480px) {
	/* big topic */
	.visibleSoloMobil{display:block}
	.visibleSoloRest{display:none}
	        .letterOdon
{font-size: 1em;
top:10%;}
    #mobile-menu-button, #mobile-menu-button-gray{margin-top: 2px;
    /* color: black; */
    width: 100px;}
	#mobile-menu-button-gray{margin-right:0px}
	.panelNoBorder .ui-grid-responsive .ui-grid-row
	{border:none !important;} 
	#botonEditar{right:20px}
	.valor{font-size:14px !important;}
	.valorSmall{font-size:12px !important;}
	.contenedorDiente{width:40%;}
	.contenedorDienteEndo{width:40%;}
	.contenedorDienteTTMDesdentadas{width:40%;}
	#mainTOdontograma{position:fixed;position: fixed;
    width: 10%;
    top: 10%;
    left:0px;}
    .CodigoOdonFull{width: 28px;height: 28px}
    .CodigoTTMMovLatFull{width: 32px;height: 32px;}
    .lenguetaCodigoVisible{	visibility: visible;}
     #divNomMenuPrin{	float: right  !important;
    margin-left: 0px !important;
    margin-top: 0px !important;
        margin-right: -10px;
    }
    #logo{    height: 60px;}
.BigTopic{font-size:22px; color:#3B3D3F; font-family: 'ralewaymedium'; display:block; width:100%; border-bottom:solid 1px #C3CCD5; padding:10px 0px; margin-bottom:10px !important; overflow: hidden; font-weight:bold;}

}

.BigTopic {
    font-size: 24px !important;
    color: #3B3D3F;
    font-family: 'ralewaymedium';
    display: block;
    width: 100%;
    border-bottom: solid 1px #C3CCD5;
    padding: 10px 0px;
    margin-bottom: 10px !important;
    overflow: hidden;
    font-weight: bold;
}
.ui-chkbox .ui-chkbox-box
{
	    margin-right: 0px;
}

.labelDODEsp 
{
	font-size: 11.2px !important;
}


.selectOERadio
{
    border-collapse: unset !important;
}
.selectOERadio td  label
{
	font-size: 11.2px !important;
}
.labelDCGPerio
{
	font-size: 12px;
	color: #778D9B;
	
}

.labelDCGPerio2
{
	font-size: 12px;
	color: #778D9B;
	
}

.selectWidthPerio.ui-selectonemenu .ui-selectonemenu-trigger
{
	display:none;

}
.selectWidthPerio2.ui-selectonemenu .ui-selectonemenu-trigger
{
	display:none;

}
.selectWidthCheckPerio.ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger
{
	display:none;

}
.backRedSelect
{
	background-color: red;
}
.backRedSelect label
{
    background-color: red;
    color: white;
}
.backRedSelect.ui-state-focus label
{
	color:gray !important;
	
}
.backRedSelect.ui-state-hover label
{
	color:gray !important;
	
}


 
.selectWidthOE
{
	width:15px;

	}
	
.selectWidthOEPnl
{
	width:40px;
}
.selectWidthOE.ui-selectonemenu
{
	padding:0px 0px 0px 0px !important;	
}

.selectWidthOE .ui-inputfield
{
	padding:0px !important;
	background-color: none; 
}
.selectWidthPerioPnl
{
	width:40px;
}
.selectWidthPerioPnl2
{
	/*width:40px;*/
}

/* combos */ 

/* ===== Contenedor de CheckboxMenu ===== */
.selectWidthCheckPerio,
.selectWidthCheckPerio.ui-selectcheckboxmenu {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;

    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;

    flex-shrink: 0 !important;
    flex-grow: 0 !important;

    overflow: hidden;
}

.selectWidthCheckPerio2,
.selectWidthCheckPerio2.ui-selectcheckboxmenu{
	width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;

    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;

    padding: 0 !important;
    box-sizing: border-box;

    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    overflow: hidden;
}

/* ===== Ocultar flecha de despliegue (opcional) ===== */
.selectWidthCheckPerio .ui-selectcheckboxmenu-trigger,
.selectWidthCheckPerio2 .ui-selectcheckboxmenu-trigger {
    display: none !important;
    width: 0 !important;
}

/* ===== Input interno del checkbox ===== */
.selectWidthCheckPerio .ui-inputfield,
.selectWidthCheckPerio2 .ui-inputfield {
    padding: 0 !important;
    background-color: transparent !important;
    height: 100% !important;
}

/* ===== Etiqueta contenedora (asegura tamaño del label interno) ===== */
.selectWidthCheckPerio .ui-selectcheckboxmenu-label-container,
.selectWidthCheckPerio2 .ui-selectcheckboxmenu-label-container {
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== Label visible dentro del selectCheckboxMenu ===== */
.selectWidthCheckPerio .ui-selectcheckboxmenu-label,
.selectWidthCheckPerio2 .ui-selectcheckboxmenu-label,
.ui-selectcheckboxmenu-label.ui-corner-all {
    width: 100% !important;
    height: 100% !important;
    padding: 0 4px !important;
    margin: 0 !important;

    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
}



/* ===== Para los selectOneMenu compactos ===== */
.selectWidthPerio,
.selectWidthPerio.ui-selectonemenu {
    width: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;

    height: 24px !important;
    line-height: 24px;
    padding: 0 !important;
    box-sizing: border-box;
}

.selectWidthPerio .ui-inputfield,
.selectWidthPerio2 .ui-inputfield {
    padding: 2px !important;
    background-color: transparent !important;
}


/* Estilo común para selects fijos */
.select-fixed {
    width: 24px !important;
    height: 24px !important;
}


/* estilos gral */
.ui-autocomplete {
    display: flex;
    width: 100% !important;
    position: relative;
    border: 1px solid #dcdcdc; 
    border-radius: 4px;
    background: #fff;
}

.ui-autocomplete .ui-inputfield {
    flex: 1;
    border: none !important;   
    box-shadow: none !important;
    width: 100% !important;
}

.ui-autocomplete .ui-autocomplete-dropdown {
    border: none !important;
    box-shadow: none !important;
    width: 32px; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}



.pnlDieOdonEsp
{
		float: left;
	    width: 60px;
	    text-align: center;
}
.pnlDieOdonEsp.ui-panelgrid .ui-panelgrid-cell
{
	min-width: 20px;
	width: 20px !important;
	padding:0px;
}

.pnlDiePerio
{
	    
    border-bottom: solid 10px #C6D6DF;
	float: left;
	    width: 50px;
	    text-align: center;
}
.pnlDiePerio.ui-panelgrid .ui-panelgrid-cell
{
	min-width: 20px;
	padding:0px;
	    height: 18px !important;
}
.contPerioDiente
{
	
	stroke:black;
	stroke-width:1px;
	fill:white;
}


.circleMid {
  width: 1em; height: 1em;
  border-radius: 50%;
  background:white;
  border:solid 1px darkgray;
    position: relative; overflow: hidden;
}

.circleMid:after {
content: '';
background: darkgray;
height: 0.5em;
display: block;
bottom: 0px;
position: absolute;
border-radius: 50%;
width: 1em;

}
.circleNone {
  width: 1em; height: 1em;
  border-radius: 50%;
  background:transparent;
  border: solid 1px transparent;
    position: relative; overflow: hidden;
}

.circleEmpty {
  width: 1em; height: 1em;
  border-radius: 50%;
  background:white;
  border:solid 1px darkgray;
    position: relative; overflow: hidden;
}

.circleEmpty:after {
content: '';
background: darkgray;
height: 0px;
display: block;
bottom: 0px;
position: absolute;

width: 1em;

    

}
.circleFull {
  width: 1em; height: 1em;
  border-radius: 50%;
  background:white;
  border:solid 1px darkgray;
    position: relative; overflow: hidden;
}
.circleFull:after {
content: '';
background: darkgray;
height: 1em;
display: block;
bottom: 0px;
position: absolute;

    border-radius: 50%;
width: 1em;

}

.pnlDieOENom
{
	display:none;
	border: none !important;
	position: relative;
	width: 90px;
    
}
.pnlDiePerioNom
{
	display:none;
	width: 87px;
    margin-top: -1px;
        border-bottom: solid 7px #C6D6DF;
        max-height: 536px;
}

.pnlDiePerioNom2
{
	display:none;
	width: 132px;
    
        border-bottom: solid 9px #C6D6DF;
 
}
.pnlDiePerioNom3
{
	
	width: 132px;
        border-bottom: solid 9px #C6D6DF;
 
}

.pnlDiePerioNom33
{
	
	width: 132px;
        border-bottom: solid 9px #C6D6DF;
 
}
.pnlDiePerioNom43
{
	
	width: 132px;
        border-bottom: solid 9px #C6D6DF;
 
}


.pnlDiePerioNom32
{
	
	display:none;
	width: 132px;
        border-bottom: solid 9px #C6D6DF;
 
}
.pnlDiePerioNom42
{
	display:none;
	
	width: 132px;
        border-bottom: solid 9px #C6D6DF;
 
}
@media (min-width: 320px)
{
.pnlPlacaInd
{
	width:23%;
	text-align: center;
}
.fontVPLV{font-size: .8em}
.visible4{display:block;}
.visible8{display:block;}
}
.Container45{ width:45%;  float:left;}
.Container55{ width:55%;  float:left;}
.Container65{ width:65%;  float:left;}
@media (max-width: 479px) {
fieldset{padding: 0em 0em !important;
    -webkit-padding-before: 0em !important;
    -webkit-padding-start: 0em !important;
    -webkit-padding-end: 0em !important;
    -webkit-padding-after: 0em !important;}
}

@media (min-width: 320px) and (max-width: 959px){
	
	.Container49{ width:49%;  float:left;}

	}
@media (min-width: 479px)
{
	.visible4{display:none;}
	.visible8{display:block;}
		.pnlPlacaInd
		{
			width:12%;
			text-align: center;
		}	
}

@media (min-width: 960px){
	.visible4{display:none;}
	.visible8{display:none;}
	.Container10{ width:10%;  float:left;}
.Container15{ width:15%;  float:left;}
.Container20{ width:20%;  float:left;}
.Container25{ width:25%;  float:left;}
.Container35{ width:35%;  float:left;}

.Container40{ width:40%;  float:left;}
.Container45{ width:45%;  float:left;}
.Container49{ width:49%;  float:left;}
.Container50{ width:50%;  float:left;}
.Container65{ width:65%;  float:left;}
.pnlPlacaInd
{
	width:6% !important;
	text-align: center;
}
}

.odontograma-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.CodigoOdonFull {
  flex: 1 1 120px; /* mínimo 120px, crece según espacio */
  max-width: 150px;
}

.odontograma-svg {
  width: 100%;
  height: auto;
}

.letterOdon2 {
  fill: #778D9B;
  stroke: #778D9B;
  font-weight: bolder;
  font-size: 2.5em;
  cursor: pointer;
}

.letterPerio
{
	    /* margin-top: 20%; */
    
    fill: lightgray;
    stroke: lightgray;	
    cursor:pointer;
    font-weight: bolder !important;
    
    font-size: 2em;
}
.SangradoSupuracionButton
{
	width:15px;
}
.SangradoButton .ui-button-text
{
	background-color: red;
	    width: 10px;
    padding-left: 0px !important;
    padding-right: 0px !important;
	    
}
.SupuracionButton .ui-button-text
{
	    
	    background: linear-gradient(180deg, red 50%, yellow 50%);
	
	    width: 10px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.NoSangradoSupuracionButton .ui-button-text{
	background-color: white;
	    width: 10px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.dienteImplanteClass {
    border: 0.5px solid #2ecc71 !important; 
    border-radius: 1px;
    padding: 0.1rem !important;
    background-color: rgba(46, 204, 113, 0.1) !important; 
}

.dientePerdidoClass {
    border: 0.5px solid #7f8c8d !important; 
    border-radius: 1px;
    padding: 0.1rem !important; 
    background-color: rgba(127, 140, 141, 0.1) !important; 
}


.dienteCruzPerdido
{fill: grey !important;
cursor: default;}

#layout-topbar-menu a {
    
    color: #778D9B !important;
    text-decoration: initial;
}

table thead tr th .ui-inputfield
{
	height: 0px !important;
}
.ui-datatable thead th {
    background-color: #f1f3f5;
    color: #2f3e4e;
    font-weight: 600;
    font-size: 0.85rem;
    padding: 0.5rem 0.5rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

/* --- HEADER DE TABLAS --- */
.ui-datatable thead th {
    background-color: #e9ecef;         /* fondo más contrastante */
    color: #212529;                     /* texto más oscuro */
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.75rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
    white-space: nowrap;
}

/* Íconos de ordenamiento */
.ui-sortable-column-icon {
    margin-left: 0.4rem;
    font-size: 0.8rem;
    color: #6c757d;
}

/* Filtros en el header */
.ui-column-filter {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    width: 100%;
    box-sizing: border-box;
}

/* --- CUERPO DE LA TABLA --- */
.ui-datatable tbody td {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    vertical-align: top;
    border-bottom: 1px solid #eee;
    color: #343a40;
}

/* --- Paginador --- */
.ui-datatable .ui-paginator {
    font-size: 0.8rem;
    padding: 0.3rem 0.5rem;
}

/* Estado seleccionado */
.ui-datatable tbody .ui-state-highlight > td {
    background-color: #d1ecf1 !important;
}

.ui-widget-content.ui-datatable-even.ui-datatable-selectable {
    border-bottom: 3px solid #9ca3af !important; 
}
.ui-widget-content.ui-datatable-odd.ui-datatable-selectable {
    border-bottom: 3px solid #9ca3af !important; 
}

.ui-datatable thead th {
    border-bottom: 4px solid !important;
    font-weight: 600 !important;
}

 

.ui-column-filter {
    width: 100%;
    box-sizing: border-box;
    padding: 4px;
    font-size: 0.85rem;
}

.reducedDT.ui-inputfield
{
	font-size: 11px;
}
.reducedDT  table tbody tr td {
    font-size: 11px; 
    padding: 0px !important;
}
.backGreen
{
	background-color: #71CC8D;
}
.backSky
{
	background-color: #27AAE1;
}

   #logoPrint
	    {display:none; }
    
    .ui-timepicker-div .ui-widget-header
    {
    display:none;}
    
    
/* Filtros de columna más grandes y proporcionados al label */
.ui-column-filter.ui-inputfield {
    height: 2.2rem;            /* más alto que el default */
    font-size: 1rem;            /* tamaño de texto similar al label */
    padding: 0.3rem 0.5rem;     /* padding interno */
    border-radius: 0.5rem;      /* esquinas redondeadas */
    border: 1px solid #d1d5db; /* gris claro */
    box-sizing: border-box;
    width: 100%;                /* que ocupe todo el ancho de la celda */
    height: 45% !important;
}

/* Focus más visible */
.ui-column-filter.ui-inputfield:focus {
    border-color: #3b82f6;      /* azul primario */
    box-shadow: 0 0 0 1px #3b82f6;
    outline: none;
}

.ui-datatable th {
    height: 3rem;  /* altura del header */
}


@media print
{
	#divIrr{width:33%;page-break-inside:avoid;}
	#divCoa{width:33%;page-break-inside:avoid;}
	#divMedTop{width:33%;page-break-inside:avoid;}
	#divDiagPul{width:45%;page-break-inside:avoid;}
	#divSep1{width:10%;page-break-inside:avoid;}
	#divDiagPer{width:45%;page-break-inside:avoid;}
	#divCamPal{width:15%;page-break-inside:avoid;}
	#divNomCon{width:70%;page-break-inside:avoid;}
	#divTejPerr{width:15%;page-break-inside:avoid;}
	.nosplit{page-break-inside:avoid;}
	#divHabitos{width:75%}
	#divRegSocial{width:25%}
	#divAntOdon{width:25%;}
	#divApGral{width:100%}
	#divHabitosA{width:33%}
	#divHabitosB{width:33%}
	#divHabitosC{width:33%}
		#divMedicacion{width:100%}
	fieldset{
	page-break-inside:avoid;
	}
	#paradencial{page-break-inside:auto !important}
	#fEndo{page-break-inside:auto !important}
	#pnlAntFam{display:none;}
	#pnlDCEClinicasPrint{display:none;}
	#pnlPartePrint1{display:none;}
	#pnlPartePrint2{display:none;}
	#pnlAntMedGralPrint{display:none;}
	#datosIHOSPrint{display:none;}
	#medicacionPrint{display:none;}
	#pnlTratProtPrint{display:none;}
	#pnlMuscMas{display:none;}
	#fechaMMas{display:none;}
	#pnlMuscMas2{display:none;}
	#pnlAtm{display:none;}
	#fechaATM{display:none;} 
	#layout-topbar{display:none;}
	   #logoPrint
	    {display:block;
	    	    float: left;
	    width:200px;
    }
    #historico{display:none}
    
    button{display:none !important}
	#layout-menu{display:none !important;}
	#divAlert{display:none !important}
	#divNomMenuPrin{display:none}
	.ui-fieldset-content{display:block !important;}
	
	
	@page{
	margin-left:0px;
	margin-right:0px;}
	#microBianaPNL{page-break-after:always; break-after:always;}
	#layout-portlets-cover {width: 100% !important; margin: 2px auto;}
	
	
}


@media ( max-width : 768px) {
	#mainOdontograma {
		overflow-x: auto !important;
		overflow-y: auto !important; 
		white-space: nowrap !important; 
		border: 1px solid #ccc; 
		background: #fff;
		width: 100% !important;
		height: 100% !important;
		justify-content: space-between; 
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		column-gap:100%;
		box-sizing: border-box !important;
	}
	#mainLOdontograma, #mainROdontograma {
		min-width: 150px;
		width: 100% !important; 
		box-sizing: border-box;
		margin-right: 40%;
		align-items: center;
		align-content: center;
	}
	#mainCOdontograma {
		position: absolute;
		left: 50%;
		top: 0;
		bottom: 0;
		width: 10px; 
		background: black; 
		transform: translateX(-50%); 
		display:none !important;
	}
	#mainOdontograma>* {
		vertical-align: top;
		display: inline-block;
	}
	.ui-fieldset-content  {
		display: grid;
	}
}