/* Obra Viva — ficha en el celular */

.ficha {
  max-width: 520px; margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  display: grid; gap: 12px;
}
.obra-marco { display: flex; justify-content: center; margin: 6px 0; }
#obra-img { width: 100%; max-height: 46vh; object-fit: contain; border-radius: 4px; background: var(--superficie); }
#obra-lienzo, #obra-video { display: block; border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5); }
#obra-video { width: 100%; max-height: 46vh; object-fit: contain; }
[hidden] { display: none !important; }
h1 { font-family: var(--serif); font-weight: 300; font-size: 2.2rem; line-height: 1.05; }
.autor { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--tinta-2); margin-top: -6px; }
.texto { color: var(--tinta-2); line-height: 1.55; font-size: 0.95rem; margin-top: 6px; }

.estado {
  display: flex; align-items: center; gap: 14px;
  margin-top: 8px; padding: 16px 18px;
  border-radius: 16px; border: 1px solid var(--borde); background: var(--superficie);
}
.estado-titulo { font-weight: 600; font-size: 1.05rem; }
.estado-detalle { color: var(--tinta-2); font-size: 0.9rem; margin-top: 2px; }
.icono { width: 34px; height: 34px; flex: none; border-radius: 50%; position: relative; }

/* En pantalla: una flecha que invita a levantar la vista */
.estado[data-estado="reproduciendo"] { border-color: rgba(233, 161, 95, 0.5); background: rgba(233, 161, 95, 0.1); }
.estado[data-estado="reproduciendo"] .icono { background: var(--calido); animation: latir 1.4s ease-in-out infinite; }
.estado[data-estado="reproduciendo"] .icono::after {
  content: "→"; position: absolute; inset: 0; display: grid; place-items: center; color: #111; font-weight: 700; font-size: 1.2rem;
}
/* En la fila y enviando: un spinner */
.estado[data-estado="en_fila"] .icono,
.estado[data-estado="enviando"] .icono {
  border: 2px solid rgba(243, 239, 232, 0.15); border-top-color: var(--tinta); animation: girar 0.9s linear infinite;
}
.estado[data-estado="terminado"] .icono { background: rgba(243, 239, 232, 0.12); }
.estado[data-estado="terminado"] .icono::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--tinta); }
.estado[data-estado="error"] .icono,
.estado[data-estado="sin_pantalla"] .icono,
.estado[data-estado="llena"] .icono { background: rgba(230, 103, 103, 0.25); }

@keyframes girar { to { transform: rotate(360deg); } }
@keyframes latir { 50% { transform: scale(0.88); opacity: 0.7; } }

.boton {
  min-height: 50px; border-radius: 999px; border: 1px solid var(--borde);
  background: var(--tinta); color: #111; font: 600 1rem var(--sans); cursor: pointer;
}
.boton:active { transform: scale(0.98); }