@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css');
@import url('/client/css/custom-theme.css');

:root{
    --primary: #171a23;
	--primary-soft: #481392;
    --primary-dark: #26272b;
	
    --secondary:#481392;
	--secondary-soft: #595b63;
    --secondary-dark: #26272b;
    
	--success: #2C9F79;
	--success-soft:#2C9F79;
    --success-dark:#1a7959;
	
    --info: #0F81C7;
	--info-soft: #0F81C7;    
    --info-dark: #03324e;    
    
	--warning: #F8A25B;
	--warning-soft: #F8A25B;
    --warning-dark: #ad6224;
    
	--danger: #f20000;
	--danger-soft: #DA3C27;
    --danger-dark: #92281a;
	
    --light: #e8e8e8;
	--light-soft: #FFF;
    --light-dark: #e8e8e8;
	
    --dark: #424649;
	--dark-soft: #888;
    --dark-dark: #000;
	
    --clear: rgba(242, 241, 238, .8);
    --clear-soft: #FFF;    
    --clear-dark: #FFF; 
}

/*****************************************************************************************************************************************/
/** BOTONES Y FONDOS */
.bg-primary, 
.btn-primary { background-color: var(--primary) !important; color: var(--clear) !important; border-color: var(--primary) !important;}
.bg-primary:hover, 
.btn-primary:hover { background-color: var(--primary-soft) !important; color: var(--clear) !important; }

.bg-secondary, 
.btn-secondary { background-color: var(--secondary) !important; color: var(--clear) !important; }
.bg-secondary:hover, 
.btn-secondary:hover { background-color: var(--secondary-soft) !important; color: var(--clear) !important; }

.bg-success, 
.btn-success { background-color: var(--success) !important; color: var(--clear) !important; }
.bg-success:hover, 
.btn-success:hover { background-color: var(--success-dark) !important; color: var(--clear) !important; }

.bg-info, 
.btn-info { background-color: var(--info) !important; color: var(--clear) !important;  }
.bg-info:hover, 
.btn-info:hover { background-color: var(--info-dark) !important; color: var(--clear) !important; border-color: var(--info-dark) !important; }

.bg-warning, 
.btn-warning { background-color: var(--warning) !important; color: var(--clear) !important; }
.bg-warning:hover, 
.btn-warning:hover { background-color: var(--warning-dark) !important; color: var(--clear) !important; }

.bg-danger, 
.btn-danger { background-color: var(--danger) !important; color: var(--clear) !important; }
.bg-danger:hover, 
.btn-danger:hover { background-color: var(--danger-dark) !important; color: var(--clear) !important; }

.bg-dark, 
.btn-dark { background-color: var(--dark) !important; color: var(--clear) !important; }
.bg-dark:hover, 
.btn-dark:hover { background-color: var(--dark-dark) !important; color: var(--clear) !important; }

.bg-light, 
.btn-light { background-color: #FFF !important; color: var(--dark) !important; }
.bg-light:hover, 
.btn-light:hover { background-color: #FFF !important; color: var(--primary) !important; }

.bg-clear, 
.btn-clear { background-color: var(--clear) !important; color: var(--dark) !important; }
.bg-clear:hover, 
.btn-clear:hover { background-color: var(--secondary) !important; color: var(--light) !important; }

/*****************************************************************************************************************************************/
/** FONDO BODY */
*{
    font-family: "Open Sans", sans-serif;
    font-size: 13px;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:"wdth" 100;
}
html, body { height: 100%;  margin: 0 !important; padding: 0 !important;}
body::after {    
	background-image: url('/assets/images/wallpapers/wallpaper6.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	content: "";
	opacity: 1;
	-filter: grayscale();
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: -1;   
}

/* body{     
    background-image: url("/images/wallpapers/wallpaper4.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--primary);
    background-position-x: right;
    background-position-y: bottom;    
    padding: 10px;
    overflow: hidden;    
}
.wallpaper{
	position: absolute;
  	height: 100vh;
  	width: 100%;  	
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
  	background-image: url("/images/wallpapers/wallpaper.jpg");
  	background-size: cover; 
  	opacity: .2;	
} */
/** PIE PANTALL */
footer { position: absolute; bottom: 1px; left:0px; width:100%;	height:20px; z-index:1; text-align:center; font-size:.7em; color:var(--clear)}
footer a, footer a:hover { color:var(--clear);  }

/*****************************************************************************************************************************************/
/** Overlay */
#overlayer { position: absolute !important;top: 0px; left: 0px; width: 100%; min-height: 100%; background: rgba(0,0,0,0.5); z-index: 10000; }
.overlayer_text {position: absolute;top: 50%;left: 50%;font-size: 2em;color: white;text-align: center;transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%); }
/*****************************************************************************************************************************************/
/** botones */


footer button.active { background-color: var(--clear) !important; color: var(--blue-soft2) !important;}
.options button {font-size: 1.8em; margin-top: 0px;}
button:disabled {border: 0px !important;}
button,.card{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
.noshadow { box-shadow: none !important; border: none !important;}
.nobackground{ background-color: transparent !important;}
span.btn { font-size: 150% !important; border: 0px !important;}
button:disabled{ background-color: rgba(255, 255, 255, .5) !important; color:rgba(0, 0, 0, 0.5) !important}

/*****************************************************************************************************************************************/
/** Tabs */
uib-tab-heading{
	color: var(--blue-soft);
}
.tab {
    border: none !important;
	padding: 10px 5px;
	background-color: white;
}
.tab a {
	color: var(--blue-dark);
}
/*****************************************************************************************************************************************/
/** botones redondos */
.btn{
    color: var(--clear);
    border: none;
    font-size: 1.2em;
}
.btn-normal i {
    font-size: 20px !important;
    margin-top: -10px;
}
.btn-empty {
    color: var(--clear) !important;
    border: 1px solid var(--clear);
}
.btn-empty:hover{
    color: var(--clear);
    border: 1px solid var(--clear);
    background-color: var(--clear);
}
.btn-circle {
    width: 35px !important;
    height: 35px;
    border-radius: 50% !important;
    font-size: 1em !important;
}
.btn-circle-xs {
    width: 25px !important;
    height: 25px;
    border-radius: 50% !important;
    font-size: 1.2em !important;
	font-style: bold !important;
	padding: 0px !important;
	padding-left: 0px !important; 
	padding-top: -5px !important; 
	color: var(--primary);
	border:1px solid var(--primary) !important;
}
.btn-xl {
    width: 60px !important;
    height: 40px;
    padding: auto !important;    
}
.btn-xl i {
    font-size: 30px !important;
    margin-top: -10px;
}
.btn-circle-xl {
    width: 60px !important;
    height: 60px;
    padding: 10px auto !important;
    border-radius: 50% !important;
    font-size: 30px !important;
}
.btn i {
    font-size: 1.2em;
    padding: 0px;
    margin: 0px;
}
/*****************************************************************************************************************************************/
/** Efectos, motivo, varios */
.cursor, .pointer { cursor: pointer !important;}
.nocursor { cursor: not-allowed !important;}

/** Esto hace los campos select2 mas altos (50px) */
.ui-select2-remove { position: absolute; top:20px; right:7px !important; cursor: pointer; color: var(--red) !important; font-size: 120%;}
.select2-container--default .select2-selection--single { height: 50px !important;}
.select2-container .select2-selection--single .select2-selection__rendered { margin-top: 20px !important };


label { color: var(--dark) !important;}
label::after { background-color: transparent !important;}
hr { border-color: var(--blue-dark); margin:5px !important; }
h3{ font-size: 150%;}
.text-red { color:var(--red) !important}
.infoErrors { font-size: 90% !important; color:var(--red) !important;}

/* bootstrap boton redondo */
.btn-circle.btn-xxs {
    width: 18px !important;
    height: 18px !important;
    padding: 2px 0px !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 10px  !important;
    line-height: 1.42857 !important;
}
.btn-circle.btn-xs {
    width: 32px !important;
    height: 32px !important;
    padding: 6px 0px !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 10px  !important;
    line-height: 1.42857 !important;
}
.btn-circle.btn-sm {
    width: 40px !important;
    height: 40px !important;
    padding: 6px 0px !important;
    border-radius: 50% !important;
    text-align: center !important;
    font-size: 12px  !important;
    line-height: 1.42857 !important;
}
.btn-circle.btn-xl {
    width: 70px;
    height: 70px;
    padding: 10px 16px;
    border-radius: 35px;
    font-size: 24px;
    line-height: 1.33;
}


/********************************************************************************/
/* Bootstrap fix */
/* Al usar BS 5.3, los labels de los inputs, se van un poco hacia la izq.*/
.form-floating>.form-control-plaintext~label, .form-floating>.form-control:focus~label, .form-floating>.form-control:not(:placeholder-shown)~label, .form-floating>.form-select~label {
    color: rgba(var(--bs-body-color-rgb), .65);
    transform: scale(.85) translateY(-.5rem) translateX(1.15rem) !important;
}
/* Los campos en readonly se ponen en gris, no queremos eso */
.form-control:disabled, .form-control[readonly] { background-color:transparent !important; cursor: not-allowed;}

/** los combos selectpicker, tiene una sombra que no queremos, además de un color de fondo y otros detalles */
.selectpicker + button { box-shadow: none !important; border:1px solid #eee; top:2px; background-color: transparent;}
.selectpicker + button:hover { background-color: transparent;}

/* Genericos */
section.gesbox { height: 100%; }

/********************************************************************************/
/** Formularios y sus campos */
/* formularios, los labels salen descolocados */
.form-floating > label { 
	top:-3px; padding-left: 0px !important;
}
.form-floating > i{ 
	font-size: 100%;
	position: absolute; 
	top: 15%; 
	right: 15px; 	
	z-index: 2;
    height: 100%;
    overflow: hidden;
    text-align: start;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    border: var(--clear) solid transparent;
	color: var(--primary);
	opacity: .2;
}
/** Campos file, ocultos */
input[type=file] { display: none !important}
.custom-file-input ~ .custom-file-label::after { content: "Seleccionar fichero"; }
/** Quitar las flechitas a los campos numéricos */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none;margin: 0;}
input[type=number] { -moz-appearance:textfield; }
/** componente smart-select */
label.smart-select { position:absolute; top: -10px; font-size:12px; }
label.smart-select > i { position: absolute; right: 35px; font-size:12px; }

/********************************************************************************/
/** Small devices */
@media (max-width: 768px) { 
	body,html{ font-size: .9em; }
	/* Ventanas modales. Para que no llenen todo el ancho */
	.modal-fit { margin:auto auto; max-width: 80% !important; }
	/* Oculta las columnas indicadas */
	.hide-small-device { display: none !important; }
}

/** Ventanas modales */
.modal-header { background-color: var(--clear) !important; color: var(--primary) !important; }
.modal-header img { position: absolute; top:20px; left:10px; max-width: 25px; }
.modal-title { font-size: 2em; padding-left: 30px; padding-top: 1px}
.modal-body { font-size: 1.2em;  }

.card-header { background-color: var(--primary) !important; color: var(--clear) !important;  }
.card-header { background-image: url("/assets/images/tornillo2.png"); background-repeat: no-repeat; background-size:16px; background-position: right .5% top 10%; }