@charset "utf-8";

@media (prefers-color-scheme: dark) {

  :root {

      color-scheme: light dark;

      /* ------- */
      /* COLORES */
      /* ------- */
      --rojoConterail: #eb0748;

      --fondoMain: #101012;
      --fondoCabecera: var(--rojoConterail);
      --link-color: #0d6efd;

      --rojo: rgb(251, 102, 102);
      --verde: green;
      --verdeOliva: olive;
      --azul: blue;
      --naranja: orange;

      --primarioBackground: #00378b;
      --primarioBackgroundHover: #0752c2;
      --primarioBackgroundDisabled: #032f71;
      --primarioColor: #FFF;
      --primarioColorDisabled: #888;
    
      --secundarioBackground: #535353;
      --secundarioBackgroundHover: #5c636a;
      --secundarioBackgroundDisabled: #3f3f3f;
      --secundarioColor: #FFF;
      --secundarioColorDisabled: #555;
    
      --exitoBackground: #198754;
      --exitoBackgroundHover: #157347;
      --exitoBackgroundDisabled: #6ab190;
      --exitoColor: #FFF;
      --exitoColorDisabled: #FFF;
    
      --peligroBackground: #fc2e2e;
      --peligroBackgroundHover: #ff4545;
      --peligroBackgroundDisabled: #dc3545;
      --peligroColor: #FFF;
      --peligroColorDisabled: #888;
    
      --oscuroBackground: #212529;
      --oscuroBackgroundHover: #1c1f23;
      --oscuroBackgroundDisabled: #212529;
      --oscuroColor: #FFF;
      --oscuroColorDisabled: #555;

  }

  body{
    color: var(--blanco);
  }

  /* **** */
  /* velo */
  /* **** */
  .velo{
    background-color: rgba(0,0,0,0.5);
  }

  .velo .cajaLoading{
    background-color: var(--gris02);
  }


  /* ********************************************************
  FORMULARIOS
  ******************************************************** */
  /*
  input[type="text"]:read-only {
    background-color: red ;
  }
  */

  form input,
  form .input-group-text,
  form select,
  form textarea{
    background-color: var(--gris03) !important;
    color: var(--blanco) !important;
    border-color: var(--blanco) !important;
  } 

  .invalid-feedback{
    color: var(--rojo);
  }

  /*
  form.needs-validation input:focus,
  form.needs-validation select:focus,
  form.needs-validation textarea:focus{
    background-color: var(--avisoBackground);
  }
  */

  /*
  form input[type="radio"],
  form input[type="checkbox"]
  {
  }
  */

  form input:not([type="radio"]),
  form textarea,
  form select
  {
    border-color: var(--gris04) !important;
  }

  form input:not([type="checkbox"]){
    border-color: var(--gris04) !important;
  }

  form input:disabled,
  form textarea:disabled,
  form select:disabled
  {
    color: var(--gris05) !important;
    background-color: var(--gris02) !important;
    border-color: var(--gris03) !important;
  }

  form .input-group span{
    border-color: var(--gris03) !important;
    background-color: var(--gris02) !important;
  }

  /*
  form button{
    font-size: 0.9rem;
  }
  */

  /*
  form .invalid-feedback{
    position: relative;
    background-color: var(--peligroBackgroundDisabled);
    color: var(--blanco);
    padding: 0.2rem;
  }


  form .invalid-feedback:before{
    position: absolute;
    content: "";
    top: -12px;
    left: 5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 12px 12px 12px;
    border-color: transparent transparent var(--peligroBackgroundDisabled) transparent;
  }
  */



  /* ******************************* */
  /* Personalización modal bootstrap */
  /* ******************************* */

  .modal .modal-content{
    background-color: var(--gris03);
  }


  /* ******************************* */
  /* Personalización tabla bootstrap */
  /* ******************************* */

  .contenedorTabla{
    background-color: var(--gris02);
  }

  table.table thead th{
    background-color: var(--gris02);
    color: var(--blanco);
    border-bottom: 1px solid var(--gris05);
    /*border: 1px solid var(--gris08);*/
  }

  table.table tbody{
    background-color: var(--gris03);
    border-bottom: 1px solid var(--gris03);
   }

  table.table tbody tr.odd td{
    background-color: var(--gris01);
    color: var(--blanco);
  }

  table.table tbody tr.even td{
    background-color: var(--gris02);
    color: var(--blanco);
  }

  table tr.dtrg-group th{
    color: var(--blanco);
  }

  .dataTables_scrollBody::-webkit-scrollbar-track {
    background: var(--negro); /* Color de fondo de la barra de desplazamiento */
  }

  .dataTables_scrollBody::-webkit-scrollbar-thumb {
    background: var(--gris03); /* Color de la barra de desplazamiento */
  }

  .dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
    background: var(--gris04); /* Color de la barra de desplazamiento al pasar el mouse */
  }


  /* ************************************ */
  /* Personalización bootstrap datepicker */
  /* ************************************ */

  .datepicker-dropdown{
    background-color: var(--gris10);
  }

  /* -------- */
  /* GENERAL  */
  /* -------- */

  /* Caja */
  /* ---- */

  .caja{
    background-color: var(--gris02);

    -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
  }

  .caja .cabecera{
  }

  .caja .cuerpo{
  }

  .caja .cuerpo label{
    color: var(--blanco);
  }

  /* ------------------ */
  /* PANTALLA DE LOGIN  */
  /* ------------------ */

  .loginContainer .loginBox h2{
    color: var(--blanco);
  }

  .loginContainer .loginBox form.loginForm input,
  .loginContainer .loginBox form.loginForm.was-validated input
  {
    background-color: transparent !important;
    border-bottom: 1px solid var(--gris07) !important;
    color: var(--gris07) !important;
  }


  .loginContainer .loginBox .form-control.is-invalid,
  .loginContainer .loginBox .was-validated .form-control:invalid {
    border-bottom: 3px solid var(--rojo) !important;
  }


}