/*
 * Audion — notas.css
 * Panel deslizable del reproductor y vista global "Mis notas".
 */

/* --- Colores de nota / etiqueta ---------------------------------------------- */

:root {
  --nota-gris: #8A7F76;
  --nota-naranja: #FF6B4A;
  --nota-amarillo: #FBBF24;
  --nota-verde: #4ADE80;
  --nota-azul: #60A5FA;
  --nota-violeta: #A78BFA;
  --nota-rojo: #F87171;
}

/* --- Botón flotante para abrir el panel ---------------------------------------- */

.boton-notas-flotante {
  position: fixed;
  right: var(--espacio-4);
  bottom: calc(var(--altura-mini-reproductor) + var(--espacio-4) + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-2);
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-5);
  border: none;
  border-radius: 999px;
  background: var(--color-acento);
  color: var(--color-acento-texto);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--sombra-elevada);
}

.contador-notas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
}

/* --- Panel deslizable --------------------------------------------------------- */

.panel-notas {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 45;
  max-height: 75vh;
  overflow-y: auto;
  padding: 0 var(--espacio-4) var(--espacio-5);
  padding-bottom: calc(var(--altura-mini-reproductor) + var(--espacio-5) + env(safe-area-inset-bottom, 0px));
  background: var(--color-fondo-elevado);
  border-top: 1px solid var(--color-borde);
  border-radius: var(--radio-lg) var(--radio-lg) 0 0;
  box-shadow: var(--sombra-elevada);
  animation: deslizar-desde-abajo 0.2s ease;
}

.panel-notas[hidden] {
  display: none;
}

@keyframes deslizar-desde-abajo {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .panel-notas { animation: none; }
}

.panel-notas-cabecera {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-3);
  padding: var(--espacio-3) 0;
  background: var(--color-fondo-elevado);
}

.panel-notas-cabecera h2 {
  margin: 0;
  font-size: 1.1rem;
  flex: 1;
}

.panel-notas-tirador {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-borde);
}

.panel-notas-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-bottom: var(--espacio-4);
}

/* --- Editor --------------------------------------------------------------------- */

.panel-notas-editor {
  padding: var(--espacio-4);
  margin-bottom: var(--espacio-4);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-md);
}

.panel-notas-editor[hidden] {
  display: none;
}

.editor-timestamp {
  margin-bottom: var(--espacio-3);
}

.editor-timestamp strong {
  color: var(--color-acento);
  font-variant-numeric: tabular-nums;
}

.panel-notas-editor textarea {
  width: 100%;
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--color-fondo-elevado);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
  resize: vertical;
}

.panel-notas-editor input[type="range"] {
  width: 100%;
  accent-color: var(--color-acento);
}

.editor-grabando {
  color: var(--color-error);
  font-weight: 600;
}

.editor-etiquetas,
.editor-colores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-2);
  margin-top: var(--espacio-3);
}

.editor-acciones {
  display: flex;
  gap: var(--espacio-2);
  margin-top: var(--espacio-4);
}

/* --- Chips de etiqueta ------------------------------------------------------------ */

.chip-etiqueta {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: var(--espacio-1) var(--espacio-3);
  border: 1px solid var(--color-borde);
  border-radius: 999px;
  background: transparent;
  color: var(--color-texto-tenue);
  font-size: 0.85rem;
  cursor: pointer;
}

.chip-etiqueta.chip-activo {
  color: var(--color-texto);
  border-width: 2px;
}

.chip-color-gris.chip-activo { border-color: var(--nota-gris); }
.chip-color-naranja.chip-activo { border-color: var(--nota-naranja); }
.chip-color-amarillo.chip-activo { border-color: var(--nota-amarillo); }
.chip-color-verde.chip-activo { border-color: var(--nota-verde); }
.chip-color-azul.chip-activo { border-color: var(--nota-azul); }
.chip-color-violeta.chip-activo { border-color: var(--nota-violeta); }
.chip-color-rojo.chip-activo { border-color: var(--nota-rojo); }

/* --- Puntos de color -------------------------------------------------------------- */

.punto-color {
  width: 32px;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}

.punto-color[aria-pressed="true"] {
  border-color: var(--color-texto);
}

.punto-color-gris { background: var(--nota-gris); }
.punto-color-naranja { background: var(--nota-naranja); }
.punto-color-amarillo { background: var(--nota-amarillo); }
.punto-color-verde { background: var(--nota-verde); }
.punto-color-azul { background: var(--nota-azul); }
.punto-color-violeta { background: var(--nota-violeta); }
.punto-color-rojo { background: var(--nota-rojo); }

/* --- Lista de notas ---------------------------------------------------------------- */

.panel-notas-orden {
  display: flex;
  align-items: center;
  gap: var(--espacio-3);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-3);
  font-size: 0.9rem;
}

.panel-notas-orden select {
  min-height: 40px;
  padding: var(--espacio-1) var(--espacio-2);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
}

.lista-notas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--espacio-3);
}

.nota-fila {
  padding: var(--espacio-3);
  background: var(--color-fondo);
  border: 1px solid var(--color-borde);
  border-left: 4px solid var(--nota-gris);
  border-radius: var(--radio-sm);
}

.nota-color-naranja { border-left-color: var(--nota-naranja); }
.nota-color-amarillo { border-left-color: var(--nota-amarillo); }
.nota-color-verde { border-left-color: var(--nota-verde); }
.nota-color-azul { border-left-color: var(--nota-azul); }
.nota-color-violeta { border-left-color: var(--nota-violeta); }
.nota-color-rojo { border-left-color: var(--nota-rojo); }

/* Las notas ajenas se distinguen a simple vista de las propias. */
.nota-de-comunidad {
  background: transparent;
  border-style: dashed;
}

.nota-cabecera {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  flex-wrap: wrap;
}

.nota-timestamp {
  padding: var(--espacio-1) var(--espacio-2);
  border: none;
  border-radius: var(--radio-sm);
  background: transparent;
  color: var(--color-acento);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  min-height: 32px;
}

.nota-timestamp:hover {
  background: var(--color-fondo-hover);
}

.nota-tipo,
.nota-autor {
  font-size: 0.8rem;
  color: var(--color-texto-difuso);
}

.nota-contenido {
  margin: var(--espacio-2) 0 0;
  white-space: pre-wrap;
}

.nota-audio {
  width: 100%;
  margin-top: var(--espacio-2);
}

.nota-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-1);
  margin-top: var(--espacio-2);
}

.nota-etiquetas .chip-etiqueta {
  cursor: default;
  min-height: 24px;
  font-size: 0.75rem;
}

.nota-acciones {
  margin-top: var(--espacio-2);
}

/* --- Vista global "Mis notas" -------------------------------------------------------- */

.notas-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
  align-items: flex-end;
  margin-bottom: var(--espacio-5);
}

.notas-filtros .campo {
  margin-bottom: 0;
  min-width: 150px;
}

.notas-filtros select,
.notas-filtros input {
  width: 100%;
  min-height: 44px;
  padding: var(--espacio-2) var(--espacio-3);
  background: var(--color-fondo-elevado);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-sm);
  color: var(--color-texto);
}

.notas-exportar {
  display: flex;
  gap: var(--espacio-2);
  flex-wrap: wrap;
  margin-bottom: var(--espacio-5);
}

.nota-audiolibro {
  font-size: 0.85rem;
  color: var(--color-texto-tenue);
}