@charset "utf-8";

/* ====== CONFIGURACIÓN GLOBAL ====== */

:root{
--color-blanco:#ffffff;
--color-gris:#666;
--color-gris-claro:#f5f5f5;
--color-borde:#bebebe;
--color-focus:#707070;
--font-base:Arial, Helvetica, sans-serif;
}

/* ====== LINKS ====== */

a{
text-decoration:none;
color:#fff;
}

a:hover{
color:#d8d8d8;
}

/* ====== TABLAS ====== */

.tabla{
background:rgba(197,197,214,.2);
border:1px solid #c5c5d6;
border-radius:4px;
box-shadow:0 2px 6px rgba(0,0,0,.15);
margin:auto;
}

.tabla2{
background:rgba(57,60,64,.2);
border-radius:4px;
box-shadow:0 2px 6px rgba(0,0,0,.15);
padding:10px;
margin:auto;
}

.tabla3{
background:#FEFADE;
padding:10px;
font-family:Verdana;
font-size:12px;
box-shadow:0 2px 5px rgba(0,0,0,.15);
margin:auto;
}

.tabla4{
background:url("../img/fondo4.jpg") repeat;
border:1px solid #a4a4a4;
border-radius:4px;
box-shadow:0 3px 8px rgba(0,0,0,.2);
margin:auto;
}

.tabla5{
margin:auto;
}

table.tabla td{padding:10px;}
table.tabla2 td,
table.tabla3 td,
table.tabla4 td{padding:5px;}

table.tabla4 td{
box-shadow: inset 0 2px 6px rgba(0,0,0,.2);
}

/* ====== LABELS ====== */

.label1{font-size:13px;font-weight:bold;color:#6a6a6a;font-family:var(--font-base);}
.label2{font-size:12px;color:#666;font-family:var(--font-base);}
.label3{font-size:15px;font-weight:bold;color:#575f7d;font-family:var(--font-base);text-shadow:1px 1px #c4c4c4;}
.label4{font-size:12px;color:#000;font-family:var(--font-base);}
.label5{font-size:12px;color:#fff;text-shadow:1px 1px #4b4b4b;font-family:var(--font-base);}
.label6{font-size:13px;color:#000;font-family:var(--font-base);font-weight:bold;}

/* ====== INPUTS ====== */

.input,
.combo,
.textarea,
.textarea2,
.textarea3{
font-family:var(--font-base);
font-size:14px;
border:1px solid var(--color-borde);
border-radius:4px;
background:var(--color-gris-claro);
padding:6px;
transition:.25s;
}

.input{width:87%;height:32px;}
.combo{width:90%;height:32px;}
.combo2{
width:30px;
height:30px;
font-size:11px;
border:1px solid #A2AFD2;
border-radius:5px;
cursor:pointer;
background:#EAEAEA url("../img/arrow.png") center no-repeat;
appearance:none;
box-shadow:1px 1px #BEBEBE;
}

.textarea{width:87%;height:90px;}
.textarea2{width:87%;height:50px;}
.textarea3{width:87%;height:70px;}

.input:focus,
.textarea:focus,
.textarea2:focus,
.textarea3:focus{
border-color:var(--color-focus);
box-shadow:0 0 6px rgba(0,0,0,.25);
outline:none;
}

/* ====== ESTRUCTURA ====== */

#barrausuario{
height:33px;
width:100%;
box-shadow:0 0 10px rgba(0,0,0,.3);
background:#959595;
}

#principal{
width:70%;
margin:auto;
box-shadow:0 10px 30px rgba(0,0,0,.25);
background:transparent;
}

#encabezado,
#barramenu,
#contenedor{
width:100%;
margin:auto;
}

#barramenu{
border-radius:5px;
position:relative;
z-index:1;
}

#contenedor{
margin:0 auto;
position:relative;
}

#piepagina{
height:100px;
width:100%;
background:url("../img/fondo6.jpg") repeat-x;
background-size:contain;
}

#contenedorPopup{
background:#F2F2F0;
width:97%;
margin:auto;
padding:10px;
}

#seccion1{
position:absolute;
width:25%;
top:0;
bottom:0;
border-right:1px solid #c4c4c4;
}

#seccion2{
width:75%;
float:right;
}

/* ====== IMÁGENES ====== */

img{
box-shadow:0 2px 5px rgba(0,0,0,.3);
border-radius:3px;
max-width:100%;
}

/* ====== JQUERY UI ====== */

.ui-accordion{
margin:auto;
width:90%;
font-size:14px;
color:#fff;
box-shadow:0 3px 8px rgba(0,0,0,.2);
border-radius:4px;
}

.ui-autocomplete{
overflow-x:hidden;
font-size:14px;
}

.ui-tooltip{
font-size:13px;
}

/* ====== BOTONES ====== */

.botonazul,
.botonrojo,
.botonverde,
.botonamarillo,
.botonnaranja,
.botongris{
display:inline-block;
cursor:pointer;
border-radius:6px;
padding:10px 14px;
font-family:var(--font-base);
font-size:13px;
text-decoration:none;
transition:.25s;
}

.botonazul{background:linear-gradient(#007dc1,#0061a7);color:#fff;border:1px solid #124d77;}
.botonazul:hover{background:linear-gradient(#0061a7,#007dc1);}

.botonrojo{background:linear-gradient(#d0451b,#bc3315);color:#fff;border:1px solid #942911;}
.botonrojo:hover{background:linear-gradient(#bc3315,#d0451b);}

.botonverde{background:linear-gradient(#0da10d,#217026);color:#fff;border:1px solid #455924;}
.botonverde:hover{background:linear-gradient(#217026,#0da10d);}

.botonamarillo{background:linear-gradient(#ffff00,#ffd324);color:#333;border:1px solid #c47f18;}
.botonamarillo:hover{background:linear-gradient(#ffd324,#ffff00);}

.botonnaranja{background:linear-gradient(#f0c911,#f2ab1e);color:#571407;border:1px solid #e65f44;}
.botonnaranja:hover{background:linear-gradient(#f2ab1e,#f0c911);}

.botongris{
background:linear-gradient(#f0f0f0,#bdbdbd);
color:#666;
border:1px solid #ada8ad;
width:90%;
}

.botongris:hover{
background:linear-gradient(#bdbdbd,#f0f0f0);
}

/* ====== BOTONES REDONDOS ====== */

.redondorojo,
.redondoverde,
.redondogris{
border-radius:50px;
padding:6px 8px;
cursor:pointer;
}

.redondorojo{background:#f24537;color:#fff;border:1px solid #d02718;}
.redondoverde{background:#77d42a;color:#fff;border:1px solid #268a16;}
.redondogris{background:#bdbdbd;color:#333;border:1px solid #888;}

/* ====== MINI BOTONES ====== */

.miniverde,
.minirojo,
.minigris{
padding:3px 5px;
border-radius:3px;
cursor:pointer;
font-size:12px;
}

.miniverde{background:#77d42a;color:#fff;border:1px solid #268a16;}
.minirojo{background:#f24537;color:#fff;border:1px solid #d02718;}
.minigris{background:#bdbdbd;color:#333;border:1px solid #888;}

/* ====== OTROS ====== */

.no-seleccionable{
user-select:none;
cursor:pointer;
}

.navegacion{
padding:5px;
height:30px;
width:30px;
font-size:13px;
font-family:var(--font-base);
font-weight:bold;
background:url("../img/fondo2.jpg") repeat-x;
background-size:contain;
box-shadow:0 2px 5px rgba(0,0,0,.3);
text-decoration:underline;
color:#c4c4c4;
border-radius:5px;
cursor:pointer;
}

.navegacion:hover{
text-shadow:1px 1px #404040;
background:url("../img/fondo3.jpg") repeat-x;
background-size:contain;
}