/*
// ===================================
// Autor: Gabriel Daniel Manea
// Fecha: 05 de marzo de 2025
// Autor de la última modificación: Gabriel Daniel Manea
// Última fecha de modificación: 26 de Abril de 2025
// Descripción: Estilos para la página del producto
// ===================================
*/

.notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}

.note {
  background-color: white;
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  min-height: 200px;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
  cursor: grab;
  position: relative;
}

.note:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

.note:active {
  cursor: grabbing;
}

.note::after {
  content: "Arrastra para mover";
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 0.7rem;
  color: var(--color-darker-gray);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.note:hover::after {
  opacity: 1;
}

/* Contenido de nota */
.note-content {
  flex-grow: 1;
  outline: none;
  margin-bottom: 1rem;
  min-height: 120px;
  padding: 0.5rem;
  border-radius: 4px;
  transition: background-color 0.2s;
  cursor: text;
}

.note-content:empty:before {
  content: attr(placeholder);
  color: var(--color-darker-gray);
}

.note-content:focus {
  background-color: rgba(0, 0, 0, 0.03);
}

/* Acciones de nota */
.note-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding-top: 0.75rem;
}

.note-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #5f6368;
  font-size: 0.9rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: all 0.2s;
}

.note-btn:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-darkest);
}

.note-btn.delete:hover {
  color: #dc3545;
  background-color: rgba(220, 53, 69, 0.1);
}

.note-btn.color:hover {
  color: var(--color-primary);
  background-color: rgba(13, 110, 253, 0.1);
}

.note-btn.pin:hover {
  color: #ffc107;
  background-color: rgba(255, 193, 7, 0.1);
}

/* Notas fijadas */
.pinned {
  border-left: 4px solid #ffc107;
  cursor: default !important;
}

.pinned:hover {
  transform: none !important;
}

/* Estilos para SortableJS (completos) */
.sortable-ghost {
  opacity: 0.6;
  background: #e0f7fa;
  border: 2px dashed #00bcd4 !important;
  transform: scale(0.98) !important;
}

.sortable-drag {
  opacity: 0.95 !important;
  transform: scale(1.03) rotateZ(1deg) !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2) !important;
  cursor: grabbing !important;
}

.active-drag {
  z-index: 1001 !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
}

/* Modal (completo) */
.modal-content {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.modal-header {
  background-color: var(--color-light-gray);
  border-bottom: 1px solid var(--color-gray);
}

.modal-title {
  font-weight: 600;
  color: var(--color-darkest);
}

#confirmDeleteBtn {
  background-color: #dc3545;
  border-color: #dc3545;
  transition: all 0.2s ease;
}

#confirmDeleteBtn:hover {
  background-color: #bb2d3b;
  transform: translateY(-1px);
}

/* Toast (completo) */
#deleteToast {
  background-color: var(--color-light);
  border-left: 4px solid #dc3545;
  transform: translateY(100px);
  opacity: 0;
}

#deleteToast.show {
  display: block;
  opacity: 1;
  transform: none;
}

#deleteToast .toast-header {
  background-color: rgba(220, 53, 69, 0.1);
  color: var(--color-darkest);
}

/* Animaciones específicas */
@keyframes fadeOut {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

/* Responsive (completo) */
@media (max-width: 768px) {
  .notes-grid {
    grid-template-columns: 1fr;
  }

  .note {
    min-height: 150px;
  }

  .note::after {
    font-size: 0.6rem;
  }
}

@media (hover: none) {
  .note {
    cursor: pointer;
  }

  .sortable-drag {
    transform: scale(1.02) !important;
  }
}