/* Full background image */
.bg {
   background-image: url(../img/background.jpg)!important;
}

/* html {font-size:17px!important} */
body {font-family: 'roboto', sans-serif}
.sp-2 {letter-spacing: 2px}
.shadow-img {filter: drop-shadow(2px 2px 2px #263238)}
.shadow-img-2 {filter: drop-shadow(4px 4px 4px lightgrey)}
.bg-login {
    background-image: linear-gradient(to top, #e6e9f0 0%, #eef1f5 100%)!important;
    }
.bg-drawer {
    background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1)), url("../img/sidebar.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-container {background:#F6F6F6!important}
.bg-container-dark {background:#222222!important}
.bg-card {
    background:url('bg2.jpg');
    background-size: cover;
}

/*////// Welcome Banner //////*/

/* Loaded body */
body.loaded {
    opacity: 1;
    transition: 1s opacity;
  }
  
  /* Default banner */
  .banner {
    position: relative;
    width: 100%;
    height: 40rem;
    padding: 0 5%;
    overflow: hidden;
    backface-visibility: hidden;
  }
  
  /* Default image container */
  .banner .background {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    transform: translate3d(0,0,0) scale(1.25);
    background: black url(https://images.unsplash.com/photo-1531971085967-431db1ec65a2?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=212d5ac2d6b763d2f2168d4f0a85b36c&auto=format&fit=crop&w=2250&q=80) no-repeat center center; 
    background-size: cover;
  }
  
  /* Loaded image container */
  .loaded .banner .background {
    transform: scale(1);
    transition: 6.5s transform;
  }
  
  /* Other stuff */
  .banner h1 {
    color: #EEE;
    margin: 0;
    line-height: 40rem;
    text-transform: uppercase;
    text-shadow: 0 0 .3rem black;
  }
  
  /*////// Welcome Banner END //////*/

  .sidebar-light {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }
  
  .sidebar-dark {
    background-color: #1E1E1E !important;
    box-shadow: 7px 0 12px -4px #111111;
  }

  .active_list .v-list-item-group .v-list-item--active{
    background-color: #c62828;
    border-radius: 7px;
    color: white;
  }
  /* Barra de progreso global (requests axios en curso) — ver helper.js */
  #global-loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    background: #c62828;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: width 8s cubic-bezier(0.05, 0.6, 0.1, 1), opacity 0.3s ease;
  }

  #global-loading-bar.is-loading {
    width: 90%;
    opacity: 1;
  }

  /* ------------------------------------------------------------------
     Captura de requisiciones — ver components/requi_lines_table.js

     La pantalla separa lo que es del DOCUMENTO (proveedor, fecha,
     justificacion) de lo que es de cada LINEA, y lista todas las lineas
     en una sola tabla. Estas clases dan esa separacion visual sin salirse
     del lenguaje de Vuetify que usa el resto del sistema.
     ------------------------------------------------------------------ */

  .requi-section {
    border: 1px solid rgba(0, 0, 0, 0.09);
    border-radius: 12px;
    padding: 16px 16px 4px 16px;
  }

  .theme--dark .requi-section {
    border-color: rgba(255, 255, 255, 0.12);
  }

  /* La seccion de captura se distingue de la del documento por el fondo */
  .requi-section--capture {
    background-color: #fafafa;
  }

  .theme--dark .requi-section--capture {
    background-color: rgba(255, 255, 255, 0.04);
  }

  .requi-section-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #78909c;
  }

  /* Cifras alineadas columna con columna: sin esto los importes bailan */
  .requi-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    white-space: nowrap;
  }

  .requi-lines-total td {
    border-top: 2px solid rgba(0, 0, 0, 0.12) !important;
    background-color: #f5f5f5;
  }

  .theme--dark .requi-lines-total td {
    border-top-color: rgba(255, 255, 255, 0.2) !important;
    background-color: rgba(255, 255, 255, 0.06);
  }

  .requi-lines-empty {
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    background-color: #fafafa;
  }

  .theme--dark .requi-lines-empty {
    border-color: rgba(255, 255, 255, 0.18);
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* El selector de clase de linea es el control que manda en la captura */
  .requi-type-toggle .v-btn {
    letter-spacing: 0.02em;
    text-transform: none;
  }