﻿:root {
    --Color-Menu: #3c8a26;
    --Color-Estado: #333360;
    --Color-Titulos: #750808;
    --Color-Fondo: #e2e2e2;   
    --Ancho-Contenido: 80%;
    --Color-Resaltado: #b0c5ca;     
    --Color-SubMenu01: #7EA573;
    --Color-SubMenu02: #A8DC9A;
    --Color-Informacion: #000000;
    --Color-Input:#333360; 
}

.cajas_texto {
    display: block;
    position: absolute;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    border: 0;
    top: 1.2em;
    background: none;
    z-index: 1;
    padding: 1px;
    font-size: 1em;
    letter-spacing: 0.012em;
}

.cajas_etiqueta {
    display: block;
    position: absolute;
    margin-top: 2px;
    padding: 1px;
    letter-spacing: 0.012em;
    color: #ACACAC;
    font-size: 1em;
    -webkit-animation-name: labelIn;
    animation-name: labelIn;
    -webkit-animation-duration: 0.35s;
    animation-duration: 0.35s;
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
    animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
}

.entrada-texto {
    font-family:                sans-serif;
    font-size:                  14px;
    width:                      100%;
    height:                     36px;
    border:                     1px solid #aaaaaa;
    border-radius:              2px;
    margin:                     5px 1px 1px 1px;
    outline:                    none;
    padding:                    0px 10px 0 10px;
    box-sizing:                 border-box;
    background:                 #ffffff;        
    appearance:none;    
    font-family: sans-serif;
}

.entrada-area {
    font-family:                sans-serif;
    font-size:                  14px;
    width:                      100%;
 /*   height:                     83px;*/
    border:                     1px solid #aaaaaa;
    border-radius:              2px;
    margin:                     5px 1px -5px 1px;
    outline:                    none;
    padding:                    8px 10px 0 10px;
    box-sizing:                 border-box;
    background:                 #ffffff;    
    resize: none;    
    appearance:none;    
    font-family: sans-serif;
}

.entrada-texto-number {
    font-family:                sans-serif;
    font-size:                  14px;
    width:                      100%;
    height:                     36px;
    border:                     1px solid #aaaaaa;
    border-radius:              2px;
    margin:                     5px 1px 1px 1px;
    outline:                    none;
    padding:                    0px 3px 0 10px;
    box-sizing:                 border-box;
    background:                 #ffffff;        
    appearance:none;    
    font-family: sans-serif;
    text-align: center;
}

.entrada-busqueda {
    font-size:                  14px;
    width:                      100%;
    height:                     35px;
    outline:                    none;
    padding:                    0px 10px 0px 10px;
    box-sizing:                 border-box;
    background:                 #ffffff;        
    font-family: sans-serif;
}

.entrada-busqueda-doble {
    font-size:                  14px;
    width:                      100%;
    height:                     35px;
    outline:                    none;
    padding:                    0px 10px 0px 35px;
    box-sizing:                 border-box;
    background:                 #ffffff;        
    font-family: sans-serif;
}

.etiqueta-texto {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    pointer-events: none;
    padding: 0px 2px 0px 0px;
    color: #aaaaaa;
    margin: -44px 0px 0px 5px;
    position: absolute;
    background: white;
    display: none;
}

.etiqueta-area {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    pointer-events: none;
    padding: 0px 2px 0px 0px;
    color: #aaaaaa;
    margin: -92px 0px 0px 5px;
    position: absolute;
    background: white;
    display: none;
}

.etiqueta-vista {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: bold;
    pointer-events: none;
    padding: 0px 2px 0px 0px;
    color: #aaaaaa;
    margin: -4px 0px 0px 0px;
    position: absolute;
    background: white;
    display: block;
}

.entrada-texto:focus ~ .etiqueta-texto {
    color: var(--Color-Input);
}

.entrada-area:focus ~ .etiqueta-area {
    color: var(--Color-Input);
}

.entrada-texto-number:focus ~ .etiqueta-texto {
    color: var(--Color-Input);
}

.entrada-area:not(:placeholder-shown) ~ .etiqueta-area {
    display:block;
}

.entrada-texto:not(:placeholder-shown) ~ .etiqueta-texto {
    display:block;
}

.entrada-texto-number:not(:placeholder-shown) ~ .etiqueta-texto {
    display:block;
}

.entrada-combo {
    text-align-last: center;
    text-align: center;
}

.combo-paginador {
    width:50px; 
    color:#fff; 
    background: var(--Color-Estado); 
    text-align-last:center; 
    -moz-appearance: none;
    outline: none;
}

.entrada-texto:hover, .entrada-texto:focus { 
    border-color: var(--Color-Input);
}

.entrada-area:hover, .entrada-area:focus { 
    border-color: var(--Color-Input);
}

.entrada-texto-number:hover, .entrada-texto-number:focus { 
    border-color: var(--Color-Input);
}

.entrada-texto:hover ~ .entrada-boton,
.entrada-texto:focus ~ .entrada-boton {
    background: var(--Color-Input);
}

.entrada-area:hover ~ .entrada-boton,
.entrada-area:focus ~ .entrada-boton {
    background: var(--Color-Input);
}

.entrada-texto-number:hover ~ .entrada-boton,
.entrada-texto-number:focus ~ .entrada-boton {
    background: var(--Color-Input);
}

.c-celeste:hover, c-celeste:focus { 
    border-color: var(--Color-Input);
}

.c-rojo:hover, .c-rojo:focus { 
    border-color: coral;
}

.c-rojo:hover .etiqueta-texto {
    color: coral;
}

.c-rojo:hover ~ .entrada-boton {
    background: coral;
}

.c-rojo:focus ~ .entrada-boton {
    background: coral;
}

.texto-boton {
    position:                   relative;
    width:                      100%;
    margin:                     0;    
}

.texto-boton .entrada-texto {
    padding: 0 30px 0 10px;
}

.entrada-boton {
    position:                   absolute;
    top:                        0;
    right:                      0;
    height:                     36px; 
    width:                      36px; 
    font-size:                  12px;
    color:                      #333;
    text-align:                 center;
    line-height:                42px;
    border-width:               0;
    margin-top: 5px;
    margin-right:               -1px;
    padding: 5px;
    cursor:                     pointer;
    border-radius:              0 2px 2px 0;

background: #aaaaaa;

}

.entrada-boton-especial {
    position:                   absolute;
    top:                        0;
    right:                      0;
    height:                     24px;
    width:                      24px;
    font-size:                  12px;
    color:                      #333;
    text-align:                 center;
    line-height:                42px;
    border-width:               0;
    margin-top:                 6px;
    margin-right:               4px;
    cursor:                     pointer;
}

.entrada-boton-inicial {
    position:                   absolute;
    top:                        0;
    left:                       3px;
    height:                     24px;
    width:                      24px;
    font-size:                  12px;
    color:                      #333;
    text-align:                 center;
    line-height:                42px;
    border-width:               0;
    margin-top:                 6px;
    margin-right:               4px;
    cursor:                     pointer;
}

.etiqueta-contenido {
    font-family: sans-serif;
    float: left;
    font-size: 14px;
    pointer-events: none;
    padding-left: 2px;
    color: #636363; 
    height: 30px;
    padding: 7px 0px 0px 0px;
}

.entrada-etiqueta {
  color:#999; 
  font-size:12px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:10px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

.entrada-texto:focus ~ .entrada-etiqueta, .entrada-texto:invalid  ~ .entrada-etiqueta {
    top: -15px;    
}

.botones {    
    color:                      #aaa;
    line-height:                1.2;
    text-transform:             uppercase;
    display:                    -webkit-box;
    display:                    -moz-box;
    display:                    -ms-flexbox;
    display:                    flex;
    justify-content:            center;
    align-items:                center;
    padding:                    0 20px;
    width:                      100%;
    height:                     38px;
    background:                 rgba(255,255,255,0.4);    
    border-radius:              5px;
    border:                     2px solid #aaa;
    transition:                 all 0.4s;
    -webkit-transition:         all 0.4s;
         -o-transition:         all 0.4s;
       -moz-transition:         all 0.4s;    
}

.botones:hover {
    border-color:               dodgerblue;
    box-shadow:                 0 0 8px 0 dodgerblue;
    background-color:           dodgerblue;
    color:                      #ffffff;    
}

.boton-acceso {
    cursor:pointer; 
    padding: 2px; 
    margin: 1px; 
    border-radius:4px;
}

.boton-accion {
    cursor:pointer; 
    padding: 0px; 
    margin: 0px; 
    border-radius: 4px;
}

.visual-estado {
    border-radius: 10px; 
    color:white; 
    padding: 0px 10px;    
}

.visual-dias {
    border-radius: 50%;
    color: white;
    padding: 0px 5px;
}

.boton_contenedor {
    position: fixed;
}