styles.css

/* *Estilos generales */
:root{
  --Gray-1: #333;
  --Gray-2: #4F4F4F;
  --Gray-4: #BDBDBD;
  --Gray-5: #E0E0E0;
  --Gray-6: #F2F2F2;
  --new-white: #FFFCFC;
  --error: #E96262;
  --error-hover: #B24B4B;
  --blue: #62B0E9;
  --blue-hover: #4F8FBD;
  --green: #5D8456;
  --green-hover: #486643;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style-type: none;
  font-family: Roboto;
  font-optical-sizing: auto;
}

*, *::before, *::after{box-sizing: border-box;}


body {
  min-height: 100dvh;
  background: var(--Gray-6);
}

header{
  width: 100%;
  color: var(--Gray-1);
  text-align: center;
  padding: 32px 0 16px;
}

.sticky {
  position: fixed;
  /* top: 0; */
  left: 0;
  width: 100%;
  /* background-color: #ffffff; /* Color de fondo del header */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); Sombra opcional */
  z-index: 1000; /* Número alto para estar por encima de otros elementos */
}

h1{
  font-size: 32px;
  font-weight: 700;
  line-height: 120%; /* 38.4px */
}

main{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 32px;
  max-height: 812px;
}

.container-principal{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0px 16px;
  gap: 16px;
  width: 100%;
  max-width: 375px;
  /* padding-top: 80px; */
}

form{
  width: 100%;
  max-width: calc(375px - 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}

#form{
  /* position: fixed; */
  top: 80px;
  z-index: 999;
}

form label{
  align-self: flex-start;
  font-size: 18px;
  font-weight: 400;
}

form textarea{
  display: flex;
  height: 120px;
  max-width: 100%;
  padding: 16px;
  align-items: flex-start;
  align-self: stretch;
  gap: 4px;
  border-radius: 16px;
  border: 2px solid var(--Gray-2);
  background: var(--new-white);

  font-size: 24px;
  font-weight: 400;
  line-height: 120%; /* 28.8px */ 
}

textarea::placeholder {
  color: var(--Gray-4);
}

form button {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  border-radius: 16px;
  background: var(--Gray-2);
  color: var(--new-white);
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  line-height: 120%; /* 28.8px */
  cursor: pointer;
}

#btn-create-note:hover {
  background-color: var(--Gray-1);
}

#btn-create-note:disabled {
  background-color: var(--Gray-5);
  color: var(--new-white);
  border: 2px solid var(--Gray-5);
  cursor: not-allowed;
}

.list-notes{
  width: 100%;
  /* position: sticky; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  /* padding-top: calc(48px + 208px); */
  /* Estilos scrollbar */
  /* scrollbar-color: var(--Gray-4, #BDBDBD) transparent;
  scrollbar-width: thin; */
}

/* Estilos para navegadores WebKit (Chrome, Safari, etc.) */
.list-notes::after {
  content: '';
  top: 0;
  right: 0;
  width: 6px; /* Ancho del scrollbar */
  height: 100%;
  background: transparent;
}

.list-notes::-webkit-scrollbar {
  width: 6px;
}

.list-notes::-webkit-scrollbar-thumb {
  background-color: var(--Gray-4);
  border-radius: 4px;
}

.list-notes::-webkit-scrollbar-track {
  background-color: transparent;
}

.note{
  display: flex;
  padding: 16px;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  border-radius: 16px;
  border: 2px solid var(--Gray-2);
  width: 100%;
  box-sizing: border-box
}

.scrollbar .note {
  width: calc(100% + 6px);
  margin-right: -6px;
}

.note p,
.note input{
  align-self: stretch;
  color: var(--Gray-1);
  font-size: 24px;
  font-weight: 400;
  line-height: 120%; /* 28.8px */
}

.note p{
  border: 1px solid transparent; /* Borde delgado inicialmente transparente */
}

#editable{
  border: solid 1px var(--Gray-4);
}

.buttons{
  display: flex;
  gap: 8px;
  align-items: center;
}

.option{
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid var(--Gray-2);
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: none;
}

.pink{
  background: #FFD9E1;
}

.green{
  background: #B5EAD7
}

.blue{
  background: #BFD7EA
}


.note .delete,
.note .edit,
.note .save,
.note .cancel{
  display: flex;
  padding: 4px 16px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 16px;
  border: none;
  color: var(--new-white);
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
}

.note .delete,
.note .cancel{
  background-color: var(--error);
}

.delete svg path{
  fill: var(--new-white);
}

.delete:hover,
.cancel:hover{
  background: var(--error-hover);
  color: var(--new-white);
}

.note .edit{
  background-color: var(--blue);
}

.note .edit:hover{
  background-color: var(--blue-hover);
}

.note .save{
  background-color: var(--green);
}

.note .save:hover{
  background-color: var(--green-hover);
}


.edit-mode .option,
.edit-mode .delete,
.edit-mode .edit {
  display: none;
}

.note .hide{
  display: none;
}