@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

/* Variables */
:root{
  --principal:rgb(4, 4, 43);
  --secundario: rgb(50, 63, 90);
  --terciario: rgb(255, 253, 203);
  --texto: rgb(183, 211, 255);
}

/* General */
*{
  margin: 0;
  padding: 0;
  font-family: "Oswald", sans-serif;
  font-size: 20px;
  transition: all 0.2s;
}

body{
  background-color: var(--texto);
}

input{
  height: 50px;
  padding: 0 20px;
  border-radius: 25px;
  border: solid 1px var(--secundario);
  background-color: transparent;
  &:focus{
    background-color: var(--texto);
    border: solid 1px var(--terciario);
    box-shadow: 3px 3px 10px var(--principal);
    color: var(--secundario);
    outline: none;
  }
  &::placeholder{
    color: var(--secundario);
  }
}

button{
  padding: 10px 20px;
  cursor: pointer;
  border: none;
}

h1{
  padding: 10px 0px;
  color: var(--texto);
  text-transform: uppercase;
  font-size: 1.3rem;
  background-color: var(--principal);
  display: flex;
  justify-content: center;
  align-items: center;
}
div#contadores{
  background-color: var(--secundario);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 25px 0px;
  gap: 50px;
  @media screen and (width < 992px){
    flex-direction: column;
    gap: 25px;
  }

  div.importantes, div.totales{
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--texto);
    padding: 10px;
    border: solid 1px;
    box-shadow: 3px 3px 10px var(--principal);
    
    @media screen and (width < 992px){
        flex-direction: row;
        gap: 50px;
    }

    &:hover{
      background-color: var(--texto);
      color: var(--secundario);
    }
    h2{
      display: flex;
      justify-content: center;
      text-transform: uppercase;
    }
    p{
      display: flex;
      justify-content: center;
    }
  }
}

div#anadir{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--terciario);
  padding: 25px 25px;
  gap: 50px;
  @media screen and (width < 992px){
    flex-direction: column;
    gap: 25px;
  }
  input{
    width: calc(100% - 50px);
  }
  div.checkImportante{
    background-color: var(--secundario);
    display: flex;
    width: 150px;
    padding: 0 10px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    box-shadow: 3px 3px 10px var(--principal);
    label{
      color: var(--texto);
      cursor: pointer;
    }
    input{
      width: 30px;
      cursor: pointer;
      &:focus{
        background-color: var(--secundario);
        border: solid 1px var(--terciario);
        box-shadow: none;
        color: var(--terciario);
        outline: none;
      }
    }
  }
  button#botonAnadir{
    background-color: transparent;
    color: var(--secundario);
    border: solid 1px;
    &:hover{
      background-color: var(--secundario);
      color: var(--terciario);
    }
  }
}

div#buscar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--terciario);
  padding: 25px 25px;
  input{
    width: 100%;
  }
}

ol {
    padding: 50px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--secundario);

    li {
      padding: 10px;

      div {
        padding: 10px;
        background-color: var(--terciario);
        display: flex;
        flex-direction: column;
        p{
        display: flex;
        padding: 10px;
        overflow-x: scroll;
        border: solid 1px var(--secundario);
        border-radius: 10px;
        &::-webkit-scrollbar{
            background-color: transparent;
        }

        &::-webkit-scrollbar-thumb{
          border-radius: 10px;
          background: var(--texto);
        }

        }
        div{
          padding: 10px;
          display: flex;
          flex-direction: row;
          justify-content: center;
          gap: 50px;
          @media screen and (width < 992px){
            flex-direction: column;
            gap: 10px;
          }
          button{
            background-color: var(--secundario);
            color: var(--texto);
            &:hover{
              background-color: var(--texto);
              color: var(--secundario); 
            }
          }
        }
      }
      div.divModificar{
        background-color: var(--principal);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 50px;
        flex-direction: row;
        @media screen and (width < 992px){
          flex-direction: column;
          gap: 10px;
        }
        input{
          width: 100%;
          border: solid 2px;
          color: var(--terciario);
          &:focus{
            background-color: transparent;
          }
  
          @media screen and (width < 992px){
            width: calc(100% - 40px);
          }
        }
        button{
          background-color: var(--secundario);
          color: var(--texto);
          &:hover{
            background-color: var(--texto);
            color: var(--secundario);
          }
          @media screen and (width < 992px){
            width: 100%;
          }
        }
      }
    }
  }

  .hidden{
    display: none;
  }