/* Pieza 4 — Artes: biblioteca de fotos y logos, artes vigentes con Descargar, "Artes pendientes" y las miniaturas de la
   ficha del evento. Teléfono primero; tokens de base.css (navy y lima solo como acentos). */

/* ---------- Pestañas (Artes · Fotos · Logos) ---------- */
.pestanas { display: flex; gap: 4px; padding: 4px; background: #e9edf1; border-radius: 12px; width: fit-content; max-width: 100%; overflow-x: auto; }
.pestanas a { padding: 8px 16px; border-radius: 9px; font-weight: 700; font-size: 15px; color: var(--texto-2); text-decoration: none; white-space: nowrap; }
.pestanas a.activa { background: var(--superficie); color: var(--navy); box-shadow: var(--sombra); }

/* ---------- Miniaturas de artes ---------- */
/* Artes de distinto tamaño (historia, publicación, PBP): alineadas abajo, así los nombres y botones quedan parejos. */
.artes-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; align-items: end; }
.artes-rejilla.ancha { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .artes-rejilla { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .artes-rejilla.ancha { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
.arte-tarjeta { margin: 0; display: grid; gap: 8px; align-content: start; min-width: 0; }
.arte-mini {
  position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #e9edf1;
  border: 1px solid var(--borde); display: grid; place-items: center;
}
.arte-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arte-falta { font-size: 13px; font-weight: 700; color: var(--texto-3); }
.arte-tarjeta figcaption { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; min-width: 0; }
.arte-tarjeta figcaption > span { display: grid; min-width: 0; }
.arte-tarjeta figcaption b { font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arte-tarjeta figcaption small { font-size: 12.5px; color: var(--texto-3); }
.arte-tarjeta .btn.chico { min-height: 36px; padding: 6px 10px; font-size: 13.5px; }
.artes-trabajando { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }

/* ---------- Artes pendientes ---------- */
.estado-artes { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 750; color: var(--navy); margin: 0; }
.estado-artes .ic { width: 22px; height: 22px; flex: none; }
.estado-artes.listo { color: var(--verde); }
.estado-artes.error { color: var(--rojo); }
.avance { height: 8px; border-radius: 99px; background: #e9edf1; overflow: hidden; margin: 14px 0 6px; }
.avance span { display: block; height: 100%; background: var(--lima); border-radius: inherit; transition: width .4s var(--curva); }
.artes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .artes-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.arte-fila {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 14px; min-width: 0;
}
.arte-fila .arte-mini { width: 46px; flex: none; border-radius: 6px; }
.arte-fila-texto { display: grid; gap: 2px; flex: 1; min-width: 0; }
.arte-fila-texto b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arte-fila-texto small { font-size: 13px; color: var(--texto-3); }
.arte-fila-texto .arte-error { color: var(--rojo); }

/* ---------- Biblioteca de fotos y logos ---------- */
.subir-fila { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.subir-fila .campo { flex: 1 1 200px; margin: 0; }
.subir-boton { position: relative; cursor: pointer; flex: 1 1 200px; }
.subir-boton.ocupado { opacity: .8; cursor: progress; }
.biblioteca { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 640px) { .biblioteca { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
.biblioteca-item { margin: 0; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; display: grid; grid-template-rows: auto 1fr; box-shadow: var(--sombra); min-width: 0; }
.biblioteca-imagen { aspect-ratio: 4 / 3; background: #e9edf1; }
.biblioteca-imagen img { width: 100%; height: 100%; object-fit: cover; display: block; }
.biblioteca.logos .biblioteca-imagen { aspect-ratio: 16 / 9; background: repeating-conic-gradient(#f1f3f5 0 25%, #fff 0 50%) 0 0 / 16px 16px; padding: 12px; }
.biblioteca.logos .biblioteca-imagen img { object-fit: contain; }
.biblioteca-item figcaption { display: grid; gap: 6px; padding: 8px 8px 8px 10px; min-width: 0; }
.biblioteca-etiquetas { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.biblioteca-acciones { display: flex; justify-content: flex-end; gap: 4px; margin-top: -2px; }
.biblioteca-item .btn.chico { min-height: 36px; padding: 6px 8px; }
.biblioteca-item .etiqueta { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ---------- Eventos con sus artes (lista compacta: una miniatura y un botón por formato) ---------- */
.artes-eventos { display: grid; gap: 4px; }
.arte-evento { display: flex; gap: 12px; padding: 10px 0; align-items: flex-start; min-width: 0; }
.arte-evento + .arte-evento { border-top: 1px solid var(--borde); }
.arte-evento-mini { flex: none; width: 58px; aspect-ratio: 1080 / 1920; border-radius: 8px; overflow: hidden; background: #e9edf1; border: 1px solid var(--borde); }
.arte-evento-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arte-evento-texto { display: grid; gap: 3px; min-width: 0; flex: 1; }
.arte-evento-texto > a { color: inherit; text-decoration: none; }
.arte-evento-texto b { font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.arte-evento-texto small { font-size: 13px; color: var(--texto-3); }
.arte-evento-botones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.arte-evento-botones .btn.chico { min-height: 34px; padding: 5px 10px; font-size: 13.5px; }
.ver-mas { margin-top: 10px; }
@media (min-width: 900px) {
  .artes-eventos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .arte-evento:nth-child(2) { border-top: 0; }
}