/*
 * Pestaña Recursos. Usa solo las variables de color de styles.css (--bg,
 * --surface, --text...), así que sigue sola al modo claro y al oscuro.
 * Todo va con prefijo rec- para no chocar con el resto de la plataforma.
 */

.rec-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* ---------- Gamas ---------- */
.rec-gamas {
  display: grid;
  gap: .2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .4rem;
  position: sticky;
  top: 112px;
}
.rec-gama {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  background: transparent; color: var(--text); border: none;
  padding: .55rem .7rem; border-radius: 7px; font-weight: 450; text-align: left;
}
.rec-gama:hover { background: var(--surface-2); filter: none; }
.rec-gama.active { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--text); font-weight: 600; }
.rec-cuenta {
  font-size: .76rem; color: var(--muted); font-variant-numeric: tabular-nums;
  background: var(--surface-2); border-radius: 999px; padding: .05rem .5rem; min-width: 1.6rem; text-align: center;
}
.rec-gama.active .rec-cuenta { background: var(--surface); }
.rec-vacio-nav { padding: .5rem; margin: 0; }

/* ---------- Cabecera de la gama ---------- */
.rec-cabecera { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .8rem; }
.rec-cabecera h3 { margin: 0 auto 0 0; font-size: 1.2rem; }
.rec-cabecera-acciones { display: flex; gap: .4rem; }

/* ---------- Añadir ----------
 * Discreto a propósito: va plegado tras «+ Añadir». Lo importante de la
 * pestaña es el material ya subido, no el formulario. */
.rec-cabecera-acciones .activo { border-color: var(--accent); color: var(--accent); }
.rec-anadir {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .7rem .8rem;
  margin-bottom: 1rem;
  display: grid; gap: .55rem;
}
.rec-anadir input { padding: .4rem .6rem; font-size: .9rem; background: var(--surface); }
.rec-fila { display: flex; gap: .5rem; }
.rec-fila input[name="url"] { flex: 2; min-width: 0; }
.rec-fila input[name="titulo"] { flex: 1; min-width: 0; }
.rec-fila button { white-space: nowrap; }
.rec-anadir-pie { display: flex; align-items: center; gap: .7rem; }
.rec-anadir-pie button { flex: 0 0 auto; }

/* Soltar archivos encima de la gama. */
.rec-main { border-radius: var(--radius); transition: outline-color .1s; outline: 2px dashed transparent; outline-offset: 6px; }
.rec-main.encima { outline-color: var(--accent); }

/* Copiar enlace: la acción principal de vídeos y enlaces. */
.rec-copiar { min-width: 7.5rem; }
.rec-copiar.copiado { background: var(--surface-2); color: var(--text); border-color: var(--border); }

.rec-subida {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  padding: .5rem .8rem; margin-bottom: .5rem; font-size: .88rem;
}
.rec-subida-nombre { font-weight: 550; overflow-wrap: anywhere; }
.rec-subida progress { flex: 1; min-width: 120px; accent-color: var(--accent); }

/* ---------- Grupos y filas ---------- */
.rec-grupo { margin-bottom: 1.2rem; }
.rec-grupo h4 { margin: 0 0 .5rem; font-size: .92rem; font-weight: 600; }
.rec-grupo h4 .muted { font-weight: 450; margin-left: .25rem; }
.rec-lista { display: grid; gap: .45rem; }
.rec-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .7rem .9rem;
}
.rec-item-fila { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.rec-item-texto { flex: 1; min-width: 180px; }
.rec-titulo { font-weight: 550; overflow-wrap: anywhere; }
.rec-acciones { display: flex; gap: .35rem; flex-wrap: wrap; }

/* Los enlaces "Ver", "Abrir" y "Descargar" con aspecto de botón. */
.rec-boton {
  display: inline-block; text-decoration: none;
  padding: .3rem .6rem; font-size: .82rem; font-weight: 550;
  border-radius: 8px; border: 1px solid transparent;
  background: var(--accent); color: var(--accent-text);
}
.rec-boton:hover { filter: brightness(1.08); }
.rec-boton.ghost { background: transparent; border-color: var(--border); color: var(--text); font-weight: 450; }
.rec-borrar:hover { border-color: var(--err); color: var(--err); }

.rec-video { margin-top: .7rem; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.rec-video iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Imágenes ---------- */
.rec-imagenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.rec-imagen {
  margin: 0; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column;
}
.rec-mini { display: block; aspect-ratio: 4 / 3; background: var(--surface-2); }
.rec-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rec-mini-vacia { display: grid; place-items: center; font-size: 2rem; }
.rec-imagen figcaption { padding: .6rem .7rem; display: grid; gap: .3rem; }

.rec-vacio { text-align: center; padding: 2rem 1rem; border: 1px dashed var(--border); border-radius: var(--radius); }
.rec-vacio p { margin: 0; }

/* ---------- Diálogo ---------- */
.rec-dialog {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  padding: 1.2rem; width: min(420px, calc(100vw - 2rem));
}
.rec-dialog::backdrop { background: rgb(0 0 0 / .45); }
.rec-dialog-form { display: grid; gap: .8rem; }
.rec-dialog-form label { display: grid; gap: .3rem; font-size: .85rem; color: var(--muted); }
.rec-dialog-botones { display: flex; justify-content: flex-end; gap: .5rem; }

/* ---------- Móvil ---------- */
@media (max-width: 760px) {
  .rec-layout { grid-template-columns: 1fr; }
  .rec-gamas {
    position: static; display: flex; overflow-x: auto; gap: .3rem;
    padding: .3rem; scrollbar-width: none;
  }
  .rec-gama { flex: 0 0 auto; white-space: nowrap; }
  .rec-fila { flex-wrap: wrap; }
  .rec-fila input[name="url"] { flex-basis: 100%; }
  .rec-anadir-pie { flex-direction: column; align-items: flex-start; }
}