/* assets/css/liblive.css
 * Estilos comunes (Galería ↔ Captura)
 * - Toolbar y botones reutilizables
 * - Accesibilidad (focus-visible)
 * - Ajustes responsivos
 */

/* ───── Toolbar ─────────────────────────────────────────────────────────── */
.liblive-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: .5rem 0 1rem;
}

.liblive-toolbar h3{
  margin: 0px 0px 30px 0px;
  font-size: 1.1rem;
  line-height: 1.2;
  color: #111827;
  text-align: center;     /* centra el texto */
  flex: 1 1 auto;         /* ocupa el centro del toolbar */
}

/* ───── Botones ─────────────────────────────────────────────────────────── */
.liblive-btn {
  display: inline-block;
  padding: .5rem .75rem;
  border-radius: .5rem;
  background: #111827; /* gris-900 */
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  transition: opacity .15s ease, transform .02s ease;
}

.liblive-btn:hover {
  opacity: .9;
}

.liblive-btn:active {
  transform: translateY(1px);
}

/* Enlaces ligeros dentro de logs (p. ej., “¡Listo! Ver galería”) */
.liblive-link-to-gallery {
  margin-left: .35rem;
  font-weight: 600;
  color: #0ea5e9; /* sky-500 */
  text-decoration: none;
}

.liblive-link-to-gallery:hover {
  text-decoration: underline;
}

/* ───── Accesibilidad ───────────────────────────────────────────────────── */
.liblive-btn:focus-visible,
.liblive-link-to-gallery:focus-visible {
  outline: 2px solid #2563eb;  /* blue-600 */
  outline-offset: 2px;
  border-radius: .6rem;
}

/* ───── Responsivo ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .liblive-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }

  .liblive-toolbar h3 {
    font-size: 1rem;
  }

  .liblive-btn {
    text-align: center;
    width: 100%;
  }
}

/* ───── Modo oscuro (si el tema lo usa) ─────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .liblive-toolbar h3 {
    color: #e5e7eb; /* gray-200 */
  }

  .liblive-btn {
    background: #e5e7eb; /* gray-200 */
    color: #111827;      /* gray-900 */
  }

  .liblive-link-to-gallery {
    color: #38bdf8; /* sky-400 */
  }
}

/* ───── Offset superior para no quedar bajo el menú del tema ───────────── */
:root { --liblive-top-offset: 80px; }            /* valor por defecto */
body.admin-bar { --liblive-top-offset: 80px; }  /* wp-admin bar (~32px extra) */

.liblive-gallery,
.liblive-upload {
  padding-top: var(--liblive-top-offset);
}

/* Asegurar que el lightbox quede por encima del header del tema */
.liblive-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
}