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


/*********************************************************
          GENERICOS
**********************************************************/
  
  .rojo { color:#F00; }
  .verde { color:#9C3; }
  .azul { color:#00F; }
  .azulClaro { color:#9CF; }
  .negro { color:#000; }
  .blanco { color: #FFF; }

  .txt16 { font-size: 16px;} 
  .txt20 { font-size: 20px;}  
  .txt24 { font-size: 24px;}
  .txt2em { font-size: 2em;}
  .txt1em { font-size: 1em;}

  .dobleLinea { height: 180px !important; font-size: 4em !important; }
  
  
  .pad20L { padding-left:20px; }
  .margin400left { margin: 10px 0 0 400px !important; }
  .margin30topBottom { margin:30px 0px 30px 0px; }
  
  
  .centro { position:relative; margin:0 auto; }
  .textoCentro { text-align:center; }
  
  
  
  .fondo_rojo { background:red !important; }
  .fondo_verde { background:#9C9 !important; }
  .fondo_verde_oscuro { background:#007200 !important; }
  .fondo_naranja { background:orangered !important; }
  .fondo_naranja_claro { background:orange !important; }
  .fondo_azul { background:#D5F0F9 !important; }
  
  
  
  
  a { text-decoration:none; color:#FFF;  }
  a:hover{ color: #90F; text-decoration:none; }


  .hihglight_name { font-size: 2em; background-color:#006599; color: #fff; width: 100%; }

  .ocultar { display: none !important; }

  .celdaIzq { width: calc(50% - 10px); float: left; }
  .celdaDcha { width: calc(50% - 10px); float: right; }



  .numberCell { text-align: center; font-size: 2em; width: 40%; padding: 30px; color:#000; border: 1px solid #000; }




/******************************* upload files button ********************************/
.inputfile {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}

.inputfile + label {
  font-size: 1.23em;
  font-weight: 700;
  color: #fff;
  background-color: #000;
  display: inline-block;
}

.inputfile:focus + label,
.inputfile + label:hover {
  background-color: red;
}

.inputfile + label { cursor: pointer; }

.inputfile:focus + label {
  outline: 1px dotted #000;
  outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
  pointer-events: none;
}

#btnUpload { display: inline-block; padding: 32px 125px; background-color: #9CF; border: 0px; font-size: 2em; margin: 0 90px;}
#details, #progress { font-size: 2em;}



/******************************* input foto albaranes ******************/
  .inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
  }

  .inputfile + label {
    font-size: 2.25em;
    font-weight: 700;
    color: white;
    background-color: red;
    display: inline-block;
    padding: 30px;
  }

  .inputfile:focus + label,
  .inputfile + label:hover {
      background-color: red;
  }

  .inputfile + label {
    cursor: pointer; /* "hand" cursor */
  }

  .inputfile:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
  }

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



  #resultado { font-size: 3em; background-color: #9C9; padding: 20px; display: none; margin: 200px 0 0 50px; width: 70%; text-align: center; }
  #marcar:hover { cursor: pointer; }


#contenedor {
  margin:0 auto;
  width:100%;
}


#recordatoriosTecnicos {
  position: relative;
  top: 150px;
  text-align: center;
  background: green;
  padding: 20px 0px;
  color: #fff;
  font-size: 2.5em;
}


#contenedorLogin {
  width:100%;
  background:url(https://grupotecmas.net/img/logo_tecnicos.jpg) center 0px no-repeat;
  background-size: contain;
}

  #contenido { top: 180px; position: relative; }

  .logo_intro {
    position:relative;
    top:30px;
    width:600px;
    height:300px;
    margin:0 auto;
  }
  
  
  #form_login {
    padding:10px 20px;
    margin:0 auto;
    width:75%;
    position:relative;
    top:500px;
  }
  
    .btnLogin {
      width:200px;
      height:200px;
      border-radius:100px;
      background:#9C0;
      font-size:4em;
      border:0px;
      color:
    }
  
  #menu_sup {
    width:100%;
    height:150px;
    background:#fff;
    position: fixed;
    top: 0px;
    z-index: 10;
    -webkit-box-shadow: 0px 4px 31px -6px rgba(0,0,0,0.49);
    -moz-box-shadow: 0px 4px 31px -6px rgba(0,0,0,0.49);
    box-shadow: 0px 4px 31px -6px rgba(0,0,0,0.49);
  }
  
    #conexion {
      position: relative;
      right: 45px; 
      top:10px; 
    }
    
    #homeIcon {
      float: left;
      position: relative;
      left: 10px;
      top: 10px; 
    }
    
    /*
    #panic {
      width: 50%;
      margin: 0 auto;
      background: #F00;
      color: #FFF;
      font-size: 7em;
      text-align: center;
      line-height: 150px;
    }
*/
    .datosTecnico {
      width: 30%;
      color: #006599;
      font-size: 3em;
      margin: 10px 0 0 50px;
      display: inline;
    }
    .datosTecnicoMini { font-size: 1.5em;}

    .resRound {
      border-radius: 50px;
      background: #9cf;
      padding: 10px;
      margin: 0 20px 0 0;
    }
  
    .txtTit { font-size:3em; color:#006; width:100%; text-align:center; margin:10px 0px; }

    .tblHorario th {
      background:#006;
      font-weight:normal;
      border:1px solid #9CF;
      color:#FFF;
    }


    #form_datos_usuario { margin:40px; font-size: 1.7em; }

      .cliente_nombre { display:block; color:#fff; }
      .cliente_datos { display:block; margin: 0 0 12px 20px; }
      .infoCliente { display:block; margin:0 0 12px 20px; }


    .datos_titulo { font-size:28px; }
    
    
    #opciones {
      width:100%;
      margin: 200px 0 0 50px;
    } 
    
    .tbl_trab_tec {
      padding:10px;
      background:orangered;
      min-width: calc(50% - 40px);
      float: left;
      margin: 10px;
      font-size: 3em;
    }
    
    
    
    #trabajos_pendientes, #trabajos_sin_realizar {
      margin:40px 0px 0px 0px;
    }
    
    #trabajos_sin_realizar { border:3px #90C solid; }
    
    #actuaciones_sin_aceptar { height:83px; margin:40px 0px 0px 0px; }
    
    
    .miniBoxAceptar {
      width: calc(25% - 80px);
      margin: 10px;
      padding: 30px 100px;
      font-size: 3em;
      text-align: center;
      display: inline; 
      float: left;
    }
    .miniBoxInc { width:calc(100% - 40px); margin:10px; padding:10px; font-size:1.2em; position:relative; text-align:left; float:left; }
    .miniBoxPend { width:calc(100% - 40px); margin:5px; padding:10px; font-size:1.2em; position:relative; text-align:left; float:left; }
    
    
    .cliente { margin: 5px; text-align: center; padding: 30px; font-size:3em; }
                  
        .ok { background-color: #6C3; }
        .error { background-color:#F00; }
        
        
    #tblProv { width:100%; }
    
    #newProv { width:100%; height:165px; }
    
    .listaProv { margin:30px 0px; border:1px solid #06F; padding:10px; }
      .tblLink { color:#000; }
      .nombreProv { font-size:3em; background:#9CF; display: block; padding: 15px; }
      .datosProv { font-size:2em; display: block;  }
      
    .datosReasignar { width: 69%; font-size: 1.5em; padding: 0 0 0 10px; }
    .iconoReasignar { background-color: #666; text-align: center; width: 30%; font-size: 2em; }
    .iconoReasignar img { height:85px; }
    .bigID { font-size: 2.5em; color: #fff; }
    
    .avisoPiezas { width:calc(100%-10px); background:#F00; color:#FFF; padding:10px; margin:10px auto; font-size:1.2em; }
    
    
    #formReasignacion {
      position:relative;
      top:30px;
      font-size:1.2em;
    }



    
  
  
      /*********************************** FORMULARIOS ***************************/
            .frmTxt {
              padding:10px 0px;
              border-radius:30px;
              line-height:27px;
              border:5px solid #9C0;
              width:100%;
              font-size:22px;
              text-align:center;
            }

            .frmTxtLogin {
              padding:10px 0px;
              border-radius:30px;
              width: 100%;
              border:5px solid #9C0;
              font-size:4em;
              text-align:center; 
              margin: 10px 0px; 
            }
            
            
            .inputProv {
              padding:10px 20px;
              border-radius:30px;
              line-height:27px;
              border:5px solid #9C0;
              display:block;
              font-size:30px;
              margin:10px 0px;
              width: calc(100% - 60px);
            }
            
            
            .frmTxt_rechazo {
              padding:5px 10px;
              border-radius:30px;
              line-height:20px;
              border:5px solid #9C0;
              width:400px;
              font-size:22px;
            }


            .inputPriceBig {
              width: 70%;
              height: 40px;
              /*font-size: 2em;*/
            }

            .inputSelect {
              height: 70px !important;
            }
      
      
      
        
            .boton {
              border:0px;
              background-color:#9C0;
              font-size:16px;
              font-weight:bold;
              color: #FFF;
              padding: 5px;
              width:200px;
              display:block;
              margin:4px 0 0 5px;
              text-align:center;
            }


            .inline { display: inline; }

            .gordo { padding: 60px;    font-size: 1.3em;  width: auto !important; }            
            
            .botonBig {
              width:300px;
              padding:40px;
              background-color:#9C0;
              font-size:26px;
              text-align:center;
              float:left;
              margin:20px;
            }



            .botonGMaps { width: 30%; padding: 20px 40px; background-color: #9C0; color: #fff; margin: 30px; display: block; text-align: center; }


            .botonAceptarGuardia {
              display: inline;
              margin: 0 100px;
              background: gray;
              padding: 50px
            }
            
            
            .squaredButton, .squaredButtonRed {
              padding:40px;
              background-color:#9C0;
              font-size:3em;
              text-align:center;
              float:left;
              margin:10px;
              border:0px;
            }
            
                .squaredButtonRed { background-color:#F00; }
                
            
            .obligatorio { border:5px solid #F60; }
                
                
            .txtArea700X200 { width:700px; height:200px; font-size:30px; }
            .txtAreaAnchoX100 { width:calc(100% - 40px); height:250px; font-size:30px; }
            .txtAreaAnchoX70 { width:100%; height:70px; font-size:30px; }
            .readOnly { background-color:#DFDFDF; border:0px; }   
            
            
            legend { font-size:26px; padding:20px; }
            
            
            .tblChat th { text-align:left;  background:#9CF;  font-size:24px; padding-left:3px; }
            .tblChat td { font-size:24px; padding-left:3px; }
            
            
            .selTecnico { 
              padding:20px 20px;
              border-radius:30px;
              line-height:27px;
              border:5px solid #9C0;
              font-size:26px;
              float:left;
            }
            
            .txtMensaje {
              padding:30px 30px;
              border-radius:30px;
              font-size:26px;
              border:5px solid #9C0;
              float:left;
              width:75%;
            }
            
            .noLeido { background: #FC6; }
  }






#contenedorBotones { margin: 0 auto; }
.row { margin: 0 auto; }
.fullRow { width: calc(100% - 20px) !important; }
.bigButton{ 
  margin: 10px;
  width: calc(50% - 20px); 
  line-height: 200px; 
  font-size: 3em; 
  text-align: center; 
  background: #dee; 
  box-shadow:inset 0 0 0 3px #000; 
  float: left;
}

.liquidaciones {
  width: calc(100% - 10px);
  line-height: 60px;
}

.rowDia {
  width: calc (100% - 10px);
  font-size: 2em;
  padding: 10px;
  margin: 20px 0px;
  background-color: #39C;
  text-align: center;
  color: #fff;
}
.bigLink {
  font-size: 2em;
  color: #39C;
}
.averiaCalendario, .yavoy {
  border: 1px solid #000;
  margin: 10px 30px;
  padding: 10px 30px;
  background: #f3f4ff;
  font-size: 2em;
}


.yavoy {
  color: white;
  text-align: center;
}

.horariosDisponiblesCalendario {
  display: block;
  margin: 40px 20px;
  border: 1px solid;
  padding: 20px;
  font-size: 2em;
  width: calc(100% - 120px);
  text-align: left;
}

.serieAnulada {
  border: 1px solid #39C;
  padding: 10px;
  width: calc (100% - 40px);
}
  .ladoIzquierdo, .ladoDerecho { width: 50%; display: table-cell; padding: 10px;}
  .datosAnulado { font-size: 2.5em; display: block; }
  .nserieAnulado { font-size: 3em; display: block; }





.calendarDay {
  padding: 20px;
  margin: 10px;
  background-color: lightblue;
  color: blue;
  text-align: center;
  font-size: 1.5em;
  display: table-cell;
  border:none;
}


#almacen { font-size: 2em; }
#almacen th { line-height: 2.5em; background: #9CF; text-align: left; padding:0px; }
#almacen tr { margin: 10px 0; }
#almacen td { margin: 0 5px; }
.btnSolicitarTelf { background: #9CA3DA; border-radius: 10px; line-height: 2em; font-size: 1.5em; text-align: center; color: #fff; z-index: 10; position: relative;}
  .btnSolicitarTelf:hover { cursor: pointer; }
.infoSolicitud {background: #9CA3DA; border-radius: 10px; line-height: 1em; font-size: 1em; text-align: center; color: #fff; z-index: 5; position: relative; top: -50px;}


        /*************************** CHAT *************************/

  

                .bloqueMensaje { width: 70%; }
                .bloqueVacio { width: 30%; }

                .msgOrigen { background-color: #dcf8c7; padding: 15px; border-radius: 15px; font-size: 1.5em}
                .msgDestino { background-color: #8fa9ff; padding: 15px; border-radius: 15px; font-size: 1.5em }

                .msgHora { display: block; }
                #col_right_chat {
                  margin: 140px 0 0 320px;
                  width: calc(100% - 340px);
                  overflow: auto;
                }
                #col_left_chat {
                  margin: 10px 20px 20px 40px;
                  border-right: 2px solid #006599;
                  width: 250px;
                  float: left;
                }
                .tablaChat { margin: 20px; width: calc(100% - 90px); }

                #cajaMensaje { 
                  margin: 20px 20px 0 20px; 
                  bottom: -10px; 
                  position: fixed;
                  left: 320px;
                  width: calc(100% - 400px); 
                }
                #txtBox { width: calc(100% - 75px);}
                #resInsert { bottom: 10px; position: fixed; left: 320px; }


                .aviso_anulado_list{
                  margin: 15px 15px 15px 0;
                  padding: 15px 10px;
                  border:1px solid #000;
                  font-size: 2em;
                }

                  .aviso_anulado_list:hover {
                    cursor: pointer;
                  }

                .aviso_anulado_list span { 
                  display: block;
                  font-size: 0.7em; }



@media (max-width: 1180px), (max-device-width: 1024px) and (orientation: portrait) {
  #panic{ font-size:4em; }
}










  /* Pantallas de gran resolución ----------- */
@media all and (max-width : 1824px) {
 
}
 
/* PCs de escritorio y portátiles ----------- */
@media all and (max-width : 1370px) {
 
}
 
/* Tabletas (Vertical y Horizontal) ----------- */
@media all
and (min-width : 768px) 
and (max-width : 1024px) {
 
}
 
/* Tabletas (Horizontal) ----------- */
@media all and (max-width : 800px) {
 
}
 
/* Pequeñas Tabletas (Vertical y Horizontal) ----------- */
@media all
and (min-width : 600px) 
and (max-width : 800px) {
 
}
 
/* Pequeñas Tabletas (Apaisado o Horizontal) y Tabletas (Vertical) ----------- */
@media all and (max-width : 750px) {
 
}
 
/* Smartphones (Apaisado o Horizontal) ----------- */
@media all and (max-width : 640px) {
 
}
 
/* Pequeñas Tabletas (Vertical) ----------- */
@media all and (max-width : 600px) {
 
}
 
/* Smartphones (Vertical y Horizontal) ----------- */
@media all 
and (min-width : 320px) 
and (max-width : 480px) {
 
}
 
/* Smartphones (Vertical) ----------- */
@media all and (max-width : 480px) {
 
}
 
/* Pequeños Smartphones (Apaisado o Horizontal) ----------- */
@media all and (max-width : 430px) {
 
}
 
/* Smartphones (Vertical) ----------- */
@media all and (max-width : 375px) {
 
}
 
/* Pequeños Smartphones (Vertical) ----------- */
@media all and (max-width : 320px) {
 
}