:root {
  --unolet-white: #ffffff;
  --unolet-black: #454545;
  --unolet-gray: #757575;
  --unolet-red: #ff0000;
  --light2: rgb(238, 239, 240);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bs-light);
}

#loader {
  display: none;
  position: fixed;
  z-index: 9999;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.05);
  /*backdrop-filter: blur(5px);*/
}

fieldset {
  border: 1px groove #aaa;
  background: #eee;
  padding: 5px;
}

.semi-circulo-2 {
  -moz-border-radius: 0 100px 100px 0;
  -webkit-border-radius: 0 100px 100px 0;
  border-radius: 0 100px 100px 0;
}

.pre-scrollable {
  max-height: 400px;
  overflow-y: scroll;
}

/*
  Oculta el elemento pasado 7 segundos.
  Utiliza https://animate.style/
*/
.hide_in_7sec {
  opacity: 1;
  animation: bounceOut 1s forwards;
  animation-delay: 7s;
}


/*
Botones con imágenes.
*/

.btn img {
  width: auto;
  height: 20px;
  padding-left: 3px;
  padding-right: 3px;
}

.btn-lg img {
  width: auto;
  height: 24px;
}

.btn-white {
  background-color: #fff;
  color: var(--bs-dark);
}

.btn-white:hover {
  background-color: var(--bs-light);
  color: var(--bs-dark);
}

.btn-white.active {
  background-color: var(--bs-light);
  border-color: var(--bs-light);
  color: var(--bs-dark);
}

.btn-semitransparent {
  opacity: 0.5 !important;
}

.btn-semitransparent:hover {
  opacity: 1 !important;
}

.btn-light:hover {
  background-color: #ccc;
}


.messages .alert {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
}


/*
Tablas.
*/

.table {
  background-color: #fff;
}

.table td img {
  height: 1rem;
  width: 1rem;
}

.table td:only-child(img) {
  text-align: center;
}

.table thead th .btn-link {
  color: #454545;
}


/*
  Tamaños
*/

.w-10 {
  width: 10% !important;
}

.w-20 {
  width: 20% !important;
}



.w-1px {
  width: 1px !important;
}

.w-2px {
  width: 2px !important;
}

.w-4px {
  width: 4px !important;
}

.w-8px {
  width: 8px !important;
}

.w-16px {
  width: 16px !important;
}

.w-24px {
  width: 24px !important;
}

.w-32px {
  width: 32px !important;
}

.w-48px {
  width: 48px !important;
}

.w-64px {
  width: 64px !important;
}

.w-128px {
  width: 128px !important;
}

.w-256px {
  width: 256px !important;
}

.w-320px {
  width: 320px !important;
}

.w-384px {
  width: 384px !important;
}

.w-448px {
  width: 448px !important;
}

.w-512px {
  width: 512px !important;
}

.w-640px {
  width: 640px !important;
}

.w-768px {
  width: 768px !important;
}

.w-1024px {
  width: 124px !important;
}


.h-10 {
  height: 10% !important;
}

.h-20 {
  height: 20% !important;
}

.h-1px {
  height: 1px !important;
}

.h-2px {
  height: 2px !important;
}

.h-4px {
  height: 4px !important;
}

.h-8px {
  height: 8px !important;
}

.h-16px {
  height: 16px !important;
}

.h-24px {
  height: 24px !important;
}

.h-32px {
  height: 32px !important;
}

.h-48px {
  height: 48px !important;
}

.h-64px {
  height: 64px !important;
}

.h-80px {
  height: 80px !important;
}

.h-96px {
  height: 96px !important;
}

.h-112px {
  height: 112px !important;
}

.h-128px {
  height: 128px !important;
}

.h-192px {
  height: 192px !important;
}

.h-256px {
  height: 256px !important;
}

.h-320px {
  height: 320px !important;
}

.h-384px {
  height: 384px !important;
}

.h-448px {
  height: 448px !important;
}

.h-512px {
  height: 512px !important;
}

.h-640px {
  height: 640px !important;
}

.h-768px {
  height: 768px !important;
}

.h-1024px {
  height: 1024px !important;
}


@media (min-width: 576px) {
  .w-md-10 {
    width: 10% !important;
  }

  .w-md-20 {
    width: 20% !important;
  }


  .w-md-1px {
    width: 1px !important;
  }

  .w-md-2px {
    width: 2px !important;
  }

  .w-md-4px {
    width: 4px !important;
  }

  .w-md-8px {
    width: 8px !important;
  }

  .w-md-16px {
    width: 16px !important;
  }

  .w-md-24px {
    width: 24px !important;
  }

  .w-md-32px {
    width: 32px !important;
  }

  .w-md-48px {
    width: 48px !important;
  }

  .w-md-64px {
    width: 64px !important;
  }

  .w-md-128px {
    width: 128px !important;
  }

  .w-md-256px {
    width: 256px !important;
  }

  .w-md-320px {
    width: 320px !important;
  }

  .w-md-384px {
    width: 384px !important;
  }

  .w-md-448px {
    width: 448px !important;
  }

  .w-md-512px {
    width: 512px !important;
  }

  .w-md-640px {
    width: 640px !important;
  }

  .w-md-768px {
    width: 768px !important;
  }

  .w-md-1024px {
    width: 124px !important;
  }


  .h-md-10 {
    height: 10% !important;
  }

  .h-md-20 {
    height: 20% !important;
  }

  .h-md-1px {
    height: 1px !important;
  }

  .h-md-2px {
    height: 2px !important;
  }

  .h-md-4px {
    height: 4px !important;
  }

  .h-md-8px {
    height: 8px !important;
  }

  .h-md-16px {
    height: 16px !important;
  }

  .h-md-24px {
    height: 24px !important;
  }

  .h-md-32px {
    height: 32px !important;
  }

  .h-md-48px {
    height: 48px !important;
  }

  .h-md-64px {
    height: 64px !important;
  }

  .h-md-80px {
    height: 80px !important;
  }

  .h-md-96px {
    height: 96px !important;
  }

  .h-md-112px {
    height: 112px !important;
  }

  .h-md-128px {
    height: 128px !important;
  }

  .h-md-192px {
    height: 192px !important;
  }

  .h-md-256px {
    height: 256px !important;
  }

  .h-md-320px {
    height: 320px !important;
  }

  .h-md-384px {
    height: 384px !important;
  }

  .h-md-448px {
    height: 448px !important;
  }

  .h-md-512px {
    height: 512px !important;
  }

  .h-md-640px {
    height: 640px !important;
  }

  .h-md-768px {
    height: 768px !important;
  }

  .h-md-1024px {
    height: 1024px !important;
  }
}

/*
Colores, Opacidad...
*/

/* Colores de la línea gráfica de Unolet. */
.unolet-bg-white {
  background-color: var(--unolet-white);
}

.unolet-bg-gray {
  background-color: var(--unolet-black);
}

.unolet-bg-gray-light {
  background-color: var(--unolet-gray);
}

.unolet-bg-red {
  background-color: var(--unolet-red);
}

.unolt-text-white {
  color: var(--unolet-white);
}

.unolet-text-gray {
  color: var(--unolet-black);
}

.unolet-text-gray-light {
  color: var(--unolet-gray);
}

.unolet-text-red {
  color: var(--unolet-red);
}

.bg-light2 {
  background-color: var(--light2);
}

.bg-orange {
  background-color: var(--bs-orange);
}
.text-bg-orange {
  background-color: var(--bs-orange);
  color: var(--bs-light);
}
.bg-indigo {
  background-color: var(--bs-indigo);
}
.text-bg-indigo {
  background-color: var(--bs-indigo);
  color: var(--bs-light);
}
.bg-purple {
  background-color: var(--bs-purple);
}
.text-bg-purple {
  background-color: var(--bs-purple);
  color: var(--bs-light);
}
.bg-pink {
  background-color: var(--bs-pink);
}
.text-bg-pink {
  background-color: var(--bs-pink);
  color: var(--bs-light);
}


.opacity-1 {
  opacity: 0.1;
}

.opacity-2 {
  opacity: 0.2;
}

.opacity-3 {
  opacity: 0.3;
}

.opacity-4 {
  opacity: 0.4;
}

.opacity-5 {
  opacity: 0.5;
}

.opacity-6 {
  opacity: 0.6;
}

.opacity-7 {
  opacity: 0.7;
}

.opacity-8 {
  opacity: 0.8;
}

.opacity-9 {
  opacity: 0.9;
}

.opacity-10 {
  opacity: 1;
}

.opacity-1-hover:hover {
  opacity: 0.1;
}

.opacity-2-hover:hover {
  opacity: 0.2;
}

.opacity-3-hover:hover {
  opacity: 0.3;
}

.opacity-4-hover:hover {
  opacity: 0.4;
}

.opacity-5-hover:hover {
  opacity: 0.5;
}

.opacity-6-hover:hover {
  opacity: 0.6;
}

.opacity-7-hover:hover {
  opacity: 0.7;
}

.opacity-8-hover:hover {
  opacity: 0.8;
}

.opacity-9-hover:hover {
  opacity: 0.9;
}

.opacity-10-hover:hover {
  opacity: 1;
}



/* -----------------------------------------------------------------------------
 Positions.
------------------------------------------------------------------------------*/

.z-index-1000 {
  z-index: 1000;
}

.z-index-2000 {
  z-index: 2000;
}

.z-index-3000 {
  z-index: 3000;
}

.z-index-4000 {
  z-index: 4000;
}

.z-index-5000 {
  z-index: 5000;
}

.top {
  top: 0;
}

.bottom {
  bottom: 0;
}

.left {
  left: 0;
}

.right {
  right: 0;
}


/* -----------------------------------------------------------------------------
 Misceláneos.
------------------------------------------------------------------------------*/

.cursor-pointer {
  cursor: pointer;
}

.totales {
  font-weight: bold;
}

tr.totales td,
tr.totales th {
  background-color: rgba(150, 150, 150, 0.3);
  color: black;
  text-align: right;
}

tfoot.totales td,
tfoot.totales th {
  background-color: rgba(150, 150, 150, 0.3);
  color: black;
  text-align: right;
}


.enfasis {
  background-color: rgba(255, 187, 0, 0.5) !important;
  font-weight: bold !important;
}

tr.enfasis td {
  background-color: rgba(255, 187, 0, 0.5) !important;
  font-weight: bold !important;
}

tr.enfasis th {
  background-color: rgba(255, 187, 0) !important;
  font-weight: bold !important;
}

.CharField {
  text-align: left;
}

.TextField {
  text-align: left;
}

.DecimalField {
  text-align: right !important;
}

.IntegerField {
  text-align: right !important;
}

.FloatField {
  text-align: right !important;
}

.BooleanField {
  /**/
}



/***********************************************************
SOBRESCRITOS DE LIBRERÍAS EXTERNAS.
***********************************************************/

/*
    Bootstrap
*/


body,
.btn,
.form-control,
.form-select,
.form-control-plaintext,
.dropdown-menu,
.input-group-text,
.custom-select,
.popover-header,
.table {
  /* el tamaño por defecto en Bootstrap es 1rem */
  font-size: 0.9rem;
}

/* En Bootstrap 5, el texto de ayuda en los checkbox dejó de ponerse en la línea de abajo, y aquí lo corregimos. */
.form-check small.form-text {
  display: block;
}


.nav-item .nav-link {
  color: #454545;
}


h1,
.h1 {
  font-size: 1.4rem;
}

h2,
.h2 {
  font-size: 1.3rem;
}

h3,
.h3 {
  font-size: 1.2rem;
}

h4,
.h4 {
  font-size: 1.1rem;
}

h5,
.h5 {
  font-size: 1rem;
}

h6,
.h6 {
  font-size: 0.9rem;
}



.fs-xsmall {
  font-size: 0.5rem;
}

.fs-small {
  font-size: 0.7rem;
}

small {
  font-size: 0.7rem !important;
}

.fs-normal {
  font-size: 0.9rem;
}

.fs-large {
  font-size: 1.1rem;
}

.fs-xlarge {
  font-size: 1.3rem;
}


.table thead th {
  text-align: center;
}


/*
    Códigos de la aplicación: django-autocomplete-light
*/

.select2-selection {
  border-color: var(--bs-border-color) !important;
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

.select2-selection__arrow {
  display: none;
}

.select2-search input {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

.select2-container {
  /* min-width: 20em; *** Original. */
  min-width: auto !important;
  width: 100% !important;
}

.select2-selection__rendered {
  color: var(--bs-body-color) !important;
}

.select2-selection__clear {
  padding-left: 4px !important;
  padding-right: 4px !important;
  border-radius: var(--bs-border-radius);
}

.select2-selection__clear:hover {
  background-color: var(--bs-danger) !important;
  color: var(--bs-light) !important;
}

.select2-dropdown {
  background-color: var(--bs-body-bg) !important;
  color: var(--bs-body-color) !important;
}

.select2-results__option[aria-selected="true"] {
  color: var(--bs-dark) !important;
}

.select2-container .select2-selection--single {
  /*
    Original:
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none;
    */
  height: 35px !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  /*
    Orignal:
    height: 28px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    */
  height: 100% !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 20px !important;
}

.select2-container .select2-selection--single .select2-selection__rendered {
  /*
    Original:
    display: block;
    padding-left: 8px;
    padding-right: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    */
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.select2-container--open {
  /*z-index: 1056 !important; /* Resuelve un problema cuando se muestra en bootstrap modal. Bootstrap modal es 1055*/
}


/*
    Para impresiones.
*/

@media print {
  @page {
    size: letter;
  }

  html {
    font-size: 10pt;
  }

  body,
  .btn,
  .form-control,
  .form-control-plaintext,
  .dropdown-menu,
  .input-group-text,
  .custom-select,
  .popover-header,
  table {
    /* el tamaño por defecto en Bootstrap es 1rem */
    font-size: 1rem;
  }

  .no-break {
    page-break-inside: avoid;
  }

  .page-break-before {
    page-break-before: always;
  }

  body,
  header,
  main,
  section,
  footer,
  .btn,
  .form-control,
  .form-control-plaintext,
  .dropdown-menu,
  .input-group-text,
  .custom-select,
  .popover-header,
  table,
  .table {
    font-size: 0.9rem !important;  /* el tamaño por defecto en Bootstrap es 1rem */
    font-family: unset !important;
    background-color: white !important;
    color: black;
  }

  h1,
  .h1 {
    font-size: 1.6rem !important;
  }

  h2,
  .h2 {
    font-size: 1.5rem;
  }

  h3,
  .h3 {
    font-size: 1.4rem;
  }

  h4,
  .h4 {
    font-size: 1.3rem;
  }

  h5,
  .h5 {
    font-size: 1.2rem;
  }

  h6,
  .h6 {
    font-size: 1.1rem;
  }
}


/* dark mode */
[data-bs-theme=dark] {
  body {
    background: linear-gradient(
        135deg,
        var(--bs-body-bg) 0%,
        color-mix(in srgb, var(--bs-body-bg) 30%, black) 100%
    );
    color: var(--bs-body-color);
  }

  .navbar {
    background-color: var(--bs-tertiary-bg) !important;
  }

  .nav-link {
    color: var(--bs-body-color);
  }

  .btn-white {
    background-color: var(--bs-tertiary-bg);
    color: var(--bs-light);
  }

  .btn-white:hover {
    background-color: var(--bs-dark);
  }

  .btn-white.active {
    background-color: var(--bs-dark);
    border-color: var(--bs-dark);
  }

  .bg-white {
    background-color: var(--bs-tertiary-bg) !important;
  }

  .text-dark {
    color: var(--bs-secondary) !important;
  }

}