@charset "utf-8";
/*
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
*/
*, *::before, *::after {padding: 0; margin: 0; box-sizing: border-box}
:root {
    --color-body: #e2e2e2;
    --color-red: #EF4444;  
    --color-green: #059669;
    --color-blue: #049aad;
    --color-grey: #f5f5f5;
    --color-violet: #8e70c1;
    --color-orange: #f58646;
    --color-rose: #f35c86;
    --color-border: #ccc;
    --color-grey-light: #f5f5f5;
    --color-white: #fff;
    --color-black: #222;

    --color-red-light: #FDDBD1;  
    --color-green-light: #CCFDED;
    --color-blue-light: #CFFAFA;
    --color-grey-light: #f5f5f5;
    --color-violet-light: #fff0ff;
    --color-orange-light: #FEF1D5;

    --color-menu-hover:  #666;
    --color-menu-active:  #888;
    --color-menu-background:  #333;

}




body {font-family: "lato", sans-serif; overflow-x: hidden; background-color: var(--color-body); min-height: 100vh; display: flex; position: relative}
a {text-decoration: none; color:var(--main-color-dark)}
a:hover {color:var(--text-color-hover)}
ul {list-style: none}
/* solo para LOGIN */
.caja-nubes {position: relative; width: 100%; height: auto; display: inline-block; text-align: center}
.caja-nubes img {width: 100%; height: auto}
.caja-nubes-logo {position: absolute; top: 10%; left: 50%; transform: translate(-50%, -50%)}
.logo-nubes {height:80px; width:auto}
.cajaLogin {position: absolute; width: 270px; border: 1px solid var(--color-white); border-radius: 6px; text-align: center; left: 50%; transform: translate(-50%, -50%); top: 40%; background-color: rgba(255, 255, 255,.5)}
.inputUser {padding: 10px; font-size: 18px; text-align: center; background-color: var(--color-white); border: 1px solid var(--color-border); margin:10px}
.login-boton {padding: 30px 40px 30px 40px; font-weight: bold; background-color: var(--color-white); color: var(--color-red); border: 1px solid var(--color-red); margin: 10px; border-radius: 6px}
.login-boton:hover {padding: 30px 40px 30px 40px; font-weight: bold; background-color: var(--color-red); color:var(--color-white); border: 1px solid var(--color-red); margin: 10px; border-radius: 6px}
/* end login */

.columnas2 {text-align: left !important; column-count: 2; column-gap: 40px; border: 0px ; column-rule: 1px #ccc; padding:20px}
.columnas3 {text-align: left !important; column-count: 3; column-gap: 40px; border: 0px ; column-rule: 1px #ccc; padding:20px}

/* NEW MENÚ */
header {position:fixed; top:0; width:100%; height:60px; background:var(--color-black); z-index:12; box-shadow: 0px 0px 5px 3px rgba(0,0,0,.3); display: flex; justify-content: flex-end}
.logoempresa {position:absolute; right: 20px; border:0px; height: 55px; width: auto; float:left; top: 2px}
.logo {height:100%; width:auto}
nav {float:right; margin-top: 0px}
nav ul {margin-right: 5px; margin-top:50px}
#menuButton {position: absolute; top: 15px; left: 20px; z-index: 10; width: 25px; height: auto; background-color: transparent}
.side-menu {position: fixed; top: 60px; left: 0; width: 180px; height: 100%; background-color: var(--color-menu-background); overflow-y: auto; transition: left 0.3s; color: var(--color-white)}
.side-menu ul {list-style-type: none; margin: 0; padding: 0}
.side-menu ul li:hover {background-color:  var(--color-menu-hover)}
.side-menu ul li {padding: 15px; border-bottom: 1px solid  var(--color-menu-active); color: var(--color-white); font-size: 14px}
.side-menu ul li a {color: var(--color-white); text-decoration: none}
.side-icono-menu {width: 15px; height: auto; margin-right: 10px}
main {position: absolute; flex: 1; padding: 1rem; color:  var(--color-black); display: flex; flex-direction: column; margin-top:4rem; left: 180px; transition: 0.3s; right:0}
main h1 {margin-bottom: 1rem; font-size: 1.5rem; font-weight: 400; color: var(--main-color-dark)}
main h2 {margin-bottom: 1rem; font-size: 1rem; font-weight: 400}
main {font-size: .8rem}
main .copyright {margin-top: auto; font-size: 0.7rem}
main .copyright span {color: var(--main-color); font-weight: 500; cursor: pointer}
/* END NEW MENÚ */



.contenedor {width: 100%; display: flex; flex-flow: row wrap; justify-content: flex-start; align-items: stretch}
#cajabusqueda {background-color:var(--color-white); padding:1rem; width:100%; border-radius: 6px; margin-bottom: 20px; border-left: 4px solid var(--color-lateral)}
.caja {width:48%; background-color:var(--color-white); padding:1rem; border-radius: 6px; margin: 0 10px 20px 0; border-left: 4px solid var(--color-lateral)}
.cajagrande {width:100%; background-color:var(--color-white); padding:1rem; border-radius: 6px; margin-bottom: 20px; border-left: 4px solid var(--color-lateral)}
.cajita {width:31%; background-color:var(--color-white); padding:1rem; border-radius: 6px; margin: 0 10px 20px 0}
.cajainterna {background-color:var(--color-white); padding:1rem; border-radius: 6px; margin: 20px 0; border:1px solid  var(--color-border)}

table {border: 1px solid  var(--color-border); border-collapse: collapse; padding: 1rem; width: 100%}
.tablapetita {width: 50%}
th {border-bottom: 2px solid var(--main-color-dark); padding: .4rem .4rem; vertical-align: top; font-weight: bold; background-color: var(--color-th); text-align: left}
td {border-top: 1px solid  var(--color-border); border-bottom: 1px solid  var(--color-border); padding: .4rem .4rem; vertical-align: top}
.filaColor {background-color: var(--color-grey-light)}
tr:hover, .filaColor:hover {background-color: var(--color-blue-light) !important}
/* tr:hover, .filaColor:hover {background-color: #e1edfc !important} */

.tablasinbordes {border: 0px solid  var(--color-border); width: 98%}
.tablasinbordes td {border: 0px solid  var(--color-border); border-bottom: 0px solid  var(--color-border); padding: .2rem}
.tablapetita {width: 50%}
td {border-top: 1px solid  var(--color-border); border-bottom: 1px solid  var(--color-border); padding: .2rem .4rem; vertical-align: top}
.titulo {font-weight: bold}
.tercio {width: 33%}
.medio {width: 50%}
.float {float: left}

.fotolistado {max-width:40px; max-height:40px; width:auto; height:auto}
.fotomarcas {max-width:120px; max-height:120px; width:auto; height:auto}
.button {width: fit-content; min-width: 100px; height: 35px; padding: 4px; border-radius: 5px; border: 1.5px solid var(--color-blue); cursor: pointer; background-color: var(--color-blue); transition: all 0.2s ease-in-out 0ms; user-select: none; text-decoration: none; color: var(--color-white); margin-right: 5px}
.button:hover {background-color: var(--color-white)fff; color: var(--color-blue)}
.button:active {transform: scale(0.95)} 
.buttongrey {width: fit-content; min-width: 100px; height: 35px; padding: 4px; border-radius: 5px; border: 1px solid var(--color-blue); cursor: pointer; background-color:  var(--color-grey-light); transition: all 0.2s ease-in-out 0ms; user-select: none; text-decoration: none; color: var(--color-blue); margin-right: 5px; line-height: 2rem}
.buttongrey:hover {background-color: var(--color-blue); color: var(--color-white)}
.buttongrey:active {transform: scale(0.95)} 
.buttonred {width: fit-content; min-width: 100px; height: 35px; padding: 4px; border-radius: 5px; border: 1.5px solid var(--color-red); cursor: pointer; background-color: var(--color-red); transition: all 0.2s ease-in-out 0ms; user-select: none; text-decoration: none; color: var(--color-white); margin-right: 5px}
.buttonred:hover {background-color: var(--color-white); color: black}
.buttonred:active {transform: scale(0.95)} 
.grande {padding: 7px !important; height: 35px}
.rojo {background-color: var(--color-red); color: var(--color-white); border: 1px solid var(--color-red)}
.numero {text-align: right; min-width: 80px}
.centrado {text-align: center}
.casillaform {border: 1px solid var(--color-border); background-color: #fafafa; padding:4px; width:60%; border-radius: 3px; height: 25px; margin-left: 2%;}
.casillaformpetita {border: 1px solid var(--color-border); background-color: var(--color-grey-light); padding:4px; width:80px; border-radius: 3px; height: 25px; text-align: right; font-size: 0.7rem}
.casillaformmediana {border: 1px solid var(--color-border); background-color: var(--color-grey-light); padding:4px; width:50%; border-radius: 3px; height: 25px; font-size: 0.7rem}
.checkbox {height: 25px !important}
select {border: 1px solid var(--color-border); background-color: var(--color-white); padding:4px; border-radius: 3px; height: 25px; font-size: 0.7rem}
.textmetas{height: 200px !important; width: 100%}
.textcontenido{height: 600px !important; width: 100% !important}
textarea {font-size: 0.7rem; visibility: visible !important; background-color: #fafafa;}
.fotoProducto {max-width: 300px; height: auto; width: 100%}
.cajaSubirFoto {border: 1px solid  var(--color-border); width: 100%; padding: 10px; margin-bottom: 30px; border-radius: 6px; width: 22%; float: left; margin-left: 1%; background-color: var(--color-white)}

/* COLORES */
.color-red-light {background-color: var(--color-red-light) !important}  
.color-green-light {background-color: var(--color-green-light) !important}
.color-blue-light {background-color: var(--color-blue-light) !important}
.color-grey-light {background-color: var(--color-grey-light) !important}
.color-violet-light {background-color: var(--color-violet-light) !important}
.color-orange-light {background-color: var(--color-orange-light) !important}

.color-green {color: var(--color-green) !important}
.color-red {color: var(--color-red) !important}
.color-blue {color: var(--color-blue) !important}
.color-grey {color: var(--color-grey) !important}
.color-violet {color: var(--color-violet) !important}
.color-orange {color: var(--color-orange) !important}
.color-rose {color: var(--color-rose) !important}

.cajaSuperInfo {width: 10%; height: auto; min-height: 130px; border: 1px solid var(--color-border); float:left; margin-left: 1%; display:inline-grid; vertical-align: middle; text-align: center; background-color:  var(--color-grey-light); padding: 5px; color: var(--color-black)}
.cajaSuperInfo p {font-size:30px}
.limpiar {clear:both}
.ofifacil {background-color: var(--color-green)!important; border-color: var(--color-green)}
.ofifacil:hover {background-color: var(--color-white) !important}

.icono {width: 16px; height: auto; filter: grayscale(100%); margin-right: 2px}
.icono:hover {filter: grayscale(0%)}
.iconito {width: 12px; height: auto; margin-right: 10px}
.iconopetit {width: 12px; height: auto}
.iconogrande {width: 20px; height: auto; filter: grayscale(100%); margin-right: 10px}
.iconogrande:hover {filter: grayscale(0%)}
.iconoenorme {width: 40px; height: auto; margin-right: 10px; vertical-align: middle}
.iconoViviendas {width: 20px; height: auto; filter: grayscale(100%); margin-right: 10px}

/* calendario */
.noespacios {padding:0 !important; margin:0 !important}
.tablecal {width:100%; border:0px solid  var(--color-border); border-collapse:collapse; max-width:1200px}
.tdcaldias {border-collapse:collapse; border:1px solid  var(--color-border); text-align:center; color: var(--color-menu-background)}
.tdcal {border-collapse:collapse; border:1px solid  var(--color-border); text-align:center; color: var(--color-menu-background); height:50px; vertical-align:top}
.cal {border-style:solid; border-width:thin; border-color:var(--color-border); float:left; padding:3px; width:100%; max-width:1024px}
.days {background-color: #F1F3F5} 
.hasday {background-color: #E8EEFD} 
.hasday:hover {background-color: var(--color-white)}  
.noday {background-color: #f3f3f3} 
.thcal {font-family: Arial, sans-serif; border-collapse:collapse; border:1px solid  var(--color-border); background-color: #E9ECEF}
.marcarhoy {background-color: #FBDFE0 !important}
.marcarhoy:hover {background-color: var(--color-white) !important}
.fechapasada {background-color: #dadada !important}