/* Put all custom styles (e.g. colors, sizes, fonts definition) into this file.
   This file is loaded after the factory CSS styles, and will override them */
:root {
    /* organization colors */
    --org-color-1: #BBD8F2;
    --org-color-2: #7A6943;
    /*  page colors */
    --page-bg-color: #fff;
    --page-font-color: #444;
    --primary-font-color: var(--org-color-2, black);
    --border-color: #d2cccc;
    --input-bg-color: #e4e7eb;
    /* primary bg colors */
    --primary-bg-color: var(--org-color-1, blue);
    --primary-bg-font-color: black;
    /*--primary-bg-color-hover: #3f2986;*/
    --primary-bg-color-hover: #131c2e;
    --primary-bg-font-color-hover: #fff;
    /* secondary bg colors */
    --secondary-bg-color: #606060;
    --secondary-bg-font-color: #606060;
    --secondary-bg-color-hover: #b8b8b8;
    --secondary-bg-font-color-hover: #000;
    /* tertiary bg colors */
    --tertiary-bg-color: transparent;
    --tertiary-bg-font-color: #444;
    --tertiary-bg-color-hover: #b8b8b8;
    --tertiary-bg-font-color-hover: #000;
    /* links */
    --link-font-color: #444;
    --link-font-color-hover: #000;
    --primary-link-font-color: var(--org-color-2, black);
    --primary-link-font-color-hover: var(--org-color-2, black);
    /*  Bootstrap colors (they have '--bs-*' format) */
    /*--bs-secondary-color: #606060;*/
    /*--bs-secondary-color-hover: #606060;*/
}

body,
body.login {
    /*background-color: #ffd800;*/
}

.logo-container {
	/* Must set specific w/h when using 'svg' format */
	width: 100px;
    /*height: 60px;*/
	/* Can use 'fit-content' when using bitmap to automatically adjust container to the bitmap size */
    /*width: fit-content;*/
    height: fit-content;
}

.login .logo-container {
    /* Must set specific w/h when using 'svg' format */
	/*width: 160px;
    height: 60px;*/
	/* Can use 'fit-content' when using bitmap to automatically adjust container to the bitmap size */
    width: fit-content;
    height: 250px;
}

.product .logo-container {
    /* Must set specific w/h when using 'svg' format */
    width: 100px;
      /*height: 60px;*/
  	/* Can use 'fit-content' when using bitmap to automatically adjust container to the bitmap size */
      /*width: fit-content;*/
      height: fit-content;
}

.product-header {
    padding-top: 1rem;
    /* height: 8rem; */
    background-color: #fff;
}

#dndUpload {
    color: var(--org-color-1, #999);
    border: 2px var(--org-color-1, #999) dashed;
    filter: invert(19%) saturate(0%) brightness(94%); /* Grey color filter calculated based on the original black color of the svg image */
    position: relative;
    text-align: center;
    background: url(images/svg/fileinfo.svg) no-repeat center 2rem;
    background-size: 48px 48px; /* Scale the background image to double its size */
    width: 100%; /*original values: width: 298px; height: 120px;*/
    /*height: 120px;*/ /* do not set fixed height, it produces errors: text is flowing out on small screens! Better control the top padding or margin */
    padding-top: 86px; /* padding is set to displace the 'drag a document here' text to the 2/3 of height */
}


#dndUpload.over {
    color: var(--org-color-2, black);
    border: 2px var(--org-color-2, black) dashed;
    filter: none;
    /*filter: invert(40%) sepia(77%) saturate(4936%) hue-rotate(189deg) brightness(94%) contrast(105%);*/ /* Blue color filter calculated based on the original black color of the svg image */
}

#dndUpload::before {
    content: ""; /* Obligatorio para que exista el elemento */
    position: absolute;
    /* Replicamos la posición original (center 2rem) */
    top: 2rem; 
    left: 50%;
    transform: translateX(-50%); /* Truco estándar para centrar elementos absolutos */
    /* Replicamos el tamaño original */
    width: 48px;
    height: 48px;
    background-color: var(--page-font-color, grey); /* Color en estado normal */
    -webkit-mask-image: url(images/svg/fileinfo.svg);
    mask-image: url(images/svg/fileinfo.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center; 
    /* Opcional: Transición suave de color */
    transition: background-color 0.3s ease;
}

#dndUpload:hover::before {
    background-color: var(--org-color-2, black); /* Color al hacer hover */
    /* Forzamos a que no haya efectos visuales de relieve o brillo */
    filter: none !important;
    box-shadow: none !important;
    outline: none !important;
}

#dndUpload.disabled {
}