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

.container {
	padding-left: 0px;
	padding-right: 0px;
	max-width: 1600px !important;
}


main.container {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}



/*//////////////////////*/

.bg-nav-OD {
	background-image: linear-gradient(90deg,#4179b1,#052841);
}

.bg-light-grad{
	background-image: linear-gradient(180deg,#f8f9fa,#d1e4f1);
	background-repeat: no-repeat;
	min-height: 100vh; 

}


.pieza{
	width:80%;
	height:auto;
	}
	
.areaPieza{
	width:5.9%;
	}
	
.numeroPieza {
	font-family:Roboto;
font-weight:400;
color:#000;	
font-size:20px;
/*line-height:1.5em;*/
margin-bottom:8px;
	}
	
	
	
.marco_boton_menu3_expedientes {  /* Los botones pequeños, con signo de suma  */ 
	width: auto;
	height: 38px;
	min-height: 38px;

    display: inline-block ;
    border-radius: 4px;
	background-color: #eef1f7;
}

.marco_boton_menu3_expedientes > img {
  max-height: 30px;
  max-width: 30px;
  object-fit:contain;
}

.marco_boton_menu3_expedientes:hover {
	background-color: #e7dcc3;
}

.marco_boton_menu3_facturas {  /* Los botones pequeños,  */ 
	height: 38px;
	min-height: 38px;
   border-radius: 4px;
	vertical-align: bottom;
	background-color: #eef1f7;
}

.marco_boton_menu3_facturas > img {
  max-height: 35px;
  max-width: 35px;
  object-fit:contain;

}

.marco_boton_menu3_facturas:hover {
	background-color: #e4ebd4;
}


.marco_boton_menu3_edit {  /* Los botones pequeños, */ 
	height: 38px;
	min-height: 38px;
   border-radius: 4px;
	vertical-align: bottom;
	background-color: #eef1f7;
}

.marco_boton_menu3_edit > img {
  max-height: 20px;
  max-width: 20px;
  object-fit:contain;

}

.marco_boton_menu3_edit:hover {
	background-color: #dddddd;
}



/* //////////////////////////////////boton añadir tratamiento, recetas, etc. ////////////////////////*/


.marco_boton_menu4 {  /* botones pequeños, con signo de suma  */ 
	width: 31px;
	min-width:30px;
	height: 30px;
	min-height: 30px;
    border: 1px solid #bbc0c8;
    display: inline-block ;
    border-radius: 4px;
	vertical-align: center;

}

.marco_boton_menu4 > img {
  max-height: 18px;
  max-width: 18px;
  margin: 3px 3px 3px 3px;
  object-fit:contain;
}

.marco_boton_menu4:hover {
	background-color: #d3effa;
}



.thum_rx{
	width: 200px;
	height: auto;
	margin-bottom: 10px;
	border-radius: 5px;
}


.thum_doc{
	height: 30px;
	max-width: 35px;
	margin-bottom: 10px;
	float: left;
}

/* //////////////////////////////////checkbox////////////////////////*/


/* Base for label styling */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
  position: relative;
  padding-left: 1.95em;
  cursor: pointer;
}

/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 2em; height: 2em;
  border: 2px solid #ccc;
  background: #fff;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
  content: '✔';
  position: absolute;
  top: .1em; left: .12em;
  font-size: 2em;
  line-height: 0.8;
  color: #64BDE0;
  transition: all .2s;
  font-family: Helvetica, Arial, sans-serif;
}
/* checked mark aspect changes */
[type="checkbox"]:not(:checked) + label:after {
  opacity: 0;
  transform: scale(0);
}
[type="checkbox"]:checked + label:after {
  opacity: 1;
  transform: scale(1);
}
/* disabled checkbox */
[type="checkbox"]:disabled:not(:checked) + label:before,
[type="checkbox"]:disabled:checked + label:before {
  box-shadow: none;
  border-color: #A8D0E4;
  background-color: #ddd;
}
[type="checkbox"]:disabled:checked + label:after {
  color: #bbb;
}
[type="checkbox"]:disabled + label {
  color: #aaa;
}
/* accessibility */
[type="checkbox"]:checked:focus + label:before,
[type="checkbox"]:not(:checked):focus + label:before {
  border: 2px;
}

/* hover style just for information */
label:hover:before {
  border: 2px solid #4778d9!important;
}




/*///////////////Canvas de Odontograma///////////*/
.canvas {
	min-width:720px;
	background-color: #988E8E;
	height: auto;
}

.odontograficaFDI{
	
	background-image: url("../imagery/odontologico/odontogramaFDI.svg");
	background-repeat: no-repeat;
	/*background-position: center;*/
	background-size:auto;
	
}

.odontograficaFDIv2{
	
	background-image: url("../imagery/odontologico/odontogramaFDIv2.png");
	background-repeat: no-repeat;
	/*background-position: center;*/
	background-size:auto;
	
}


.odontograficaFDIv3{
	
	background-image: url("../imagery/odontologico/odontogramaFDIv3.png");
	background-repeat: no-repeat;
	/*background-position: center;*/
	background-size:auto;
	
}




.odontograficaUNI{
	
	background-image: url("../imagery/odontologico/odontogramaUNI.svg");
	background-repeat: no-repeat;
/*	background-position: center;*/
	background-size:auto;
	
}

.odontograficaUNIv2{
	
	background-image: url("../imagery/odontologico/odontogramaUNIv2.png");
	background-repeat: no-repeat;
	/*background-position: center;*/
	background-size:auto;
	
}

.odontograficaUNIv3{
	
	background-image: url("../imagery/odontologico/odontogramaUNIv3.png");
	background-repeat: no-repeat;
	/*background-position: center;*/
	background-size:auto;
	
}

.odontograficaUNIv3-manch{
	
	background-image: url("../imagery/odontologico/odontogramaUNIv3_mancha.png");
	background-repeat: no-repeat;
	/*background-position: center;*/
	background-size:auto;
	
}

.odontograficaUNIv4{
	
	background-image: url("../imagery/odontologico/odontogramaUNIv4-720px.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;  /* o '100% 100%' si sabes que el canvas y la imagen son exactamente del mismo tamaño */
  	width: 720px;
  	height: 760px; /* O usa un valor fijo según la imagen */
  	max-width: 100%; /* Para que escale bien en pantallas más pequeñas */
  	display: block;
	
}

canvas.odontograficaUNIv4 {
  max-width: 100%;
  height: auto;
}


.odontograma-wrapper {
  display: flex;
  justify-content: center;
  align-items: center; /* solo si quieres centrar verticalmente también */
  width: 100%;
  overflow-x: auto; /* opcional, si el canvas es más grande que la pantalla */
	
}




.odontograficaPAL{
	
	background-image: url("../imagery/odontologico/odontogramaPAL.svg");
	background-repeat: no-repeat;
/*	background-position: center;*/
	background-size:auto;
	
}

.odontograficaPALv2{
	
	background-image: url("../imagery/odontologico/odontogramaPALv2.png");
	background-repeat: no-repeat;
	/*background-position: center;*/
	background-size:auto;
	
}

.odontograficaPALv3{
	
	background-image: url("../imagery/odontologico/odontogramaPALv3.png");
	background-repeat: no-repeat;
	/*background-position: center;*/
	background-size:auto;
	
}


.bck-clr-odonto{
	background-color: #e2e5e6;
}


.toolbox-ODO {
	padding: 15px;
}


.btn_tool_ODO
{
margin: 0px;
padding: 5px;
border-width: inherit;
background-color: transparent;
	
}

.btn_tool_ODO:hover
{
background-color: #ced2d4;
border-radius: 5px;
}


.color-picker-round {
	margin-top: 0px;
	padding: 0px;
    width: 30px;
     height: 30px;
     border-radius: 50%; /* Hace el botón redondo */
     overflow: hidden;
     cursor: pointer;
	 background-color: transparent;
	 border: none;          /* Elimina el borde */

    }


.color-picker-round:focus {
outline: none; 

    }


/*///////////////Fin de canvas de Odontograma///////////*/


@media screen and (max-width:1500px){
	 main.container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}


@media screen and (max-width: 768px){
	.container{
	max-width: 762px;
}
	
.odontograficaUNIv4 {
    width: 100%;
	height: auto;
    background-size: contain;
  }	
	
	 main.container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
	
}

@media screen and (max-width: 678px) {
    main.container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .container-fluid {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}



@media screen and (max-width: 576px){
.movilSinTop{
	padding-top:0px;
	margin-top:0px;
	}
	
.areaPieza{
	width:11.7%;
	}
	
}
.container{
	max-width: 560px;
}



@media screen and (max-width: 400px){

.areaPieza{
	width:11.5%;
	}
}


@media print {
    @page {
        margin: 1cm;
    }
    nav.navbar {
        display: none !important;
    }
    footer {
        display: none !important;
    }
    .btn, .alert {
        display: none !important;
    }
    body {
        margin: 0 !important;
        padding: 0 !important;
    }
    main {
        margin: 0 !important;
        padding: 0 !important;
    }
    .mb-5, .mt-5, .my-5 {
        margin: 0 !important;
    }
    .mb-4, .mt-4, .my-4 {
        margin: 0 !important;
    }
	
	.no-print {
    display: none !important;
}
	
html, body {
        height: auto !important;
        overflow: visible !important;
    }
    * {
        overflow: visible !important;
    }	
	
	/*Temporal*/
	 body * {
        background: transparent !important;
    }
    body {
        background: yellow !important;
    }
    main {
        background: lightblue !important;
    }
    footer {
        background: red !important;
    }
    nav {
        background: green !important;
    }
		/*Temporal*/
}