/* Identidad Propulsar — portada de las plantillas Creatomate que renderizan
   cada post publicado. Fondo #070A18, píldoras de radio 50%, acento cian de
   trabajo. El shell es cromo: tiene que desaparecer detrás del proyecto. */
:root {
  color-scheme: dark;
  --noche: #070A18;
  --panel: #0E122B;
  --orbita: #1E0C42;
  --cian: #00E5FF;
  --magenta: #C026D3;
  --linea: rgba(255, 255, 255, 0.10);
  --texto: rgba(255, 255, 255, 0.92);
  --tenue: rgba(255, 255, 255, 0.55);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--noche);
  color: var(--texto);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}

body { display: flex; flex-direction: column; }

/* ── Topbar ───────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--linea);
  background: var(--noche);
}

.brand { font-weight: 700; letter-spacing: -0.01em; }
.brand .dot { color: var(--magenta); }
.brand .sub { font-weight: 400; color: var(--tenue); }

.tabs { display: flex; gap: 6px; overflow-x: auto; }

.tab {
  appearance: none;
  border: 0;
  border-radius: 999px;           /* la geometría literal de las plantillas */
  padding: 7px 14px;
  font: inherit;
  color: var(--tenue);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.tab:hover { background: rgba(255, 255, 255, 0.05); color: var(--texto); }
.tab[aria-selected="true"] { background: var(--orbita); color: var(--cian); }
.tab:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }

/* ── Escenario ────────────────────────────────────────────────────────── */
.stage { position: relative; flex: 1; min-height: 0; }

.panel { position: absolute; inset: 0; }
.panel[hidden] { display: none; }

.panel iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--noche);
}

/* El iframe arranca oculto y se revela en `load`, para no mostrar un marco a
   medio pintar. Va por clase y no por style inline: el CSP del shell es
   `default-src 'self'` sin `unsafe-inline`, así que un style inline se bloquea
   (verificado en el navegador — el estilo no se aplicaba y el error solo
   aparecía en consola). */
.panel iframe.oculto { visibility: hidden; }

/* ── Estados ──────────────────────────────────────────────────────────── */
.estado {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
  background: var(--noche);
}

.spinner {
  width: 26px; height: 26px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-top-color: var(--cian);
  border-radius: 50%;
  animation: giro .8s linear infinite;
}
@keyframes giro { to { transform: rotate(360deg); } }

.estado h2 { margin: 0; font-size: 15px; font-weight: 600; }
.estado p { margin: 0; color: var(--tenue); max-width: 42ch; }

.acciones { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.boton {
  appearance: none;
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: 9px 16px;
  min-height: 40px;
  font: inherit;
  color: var(--texto);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.boton:hover { background: rgba(255, 255, 255, 0.06); }
.boton:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.boton.primario { background: var(--cian); color: var(--noche); border-color: var(--cian); font-weight: 500; }
.boton.primario:hover { opacity: .9; background: var(--cian); }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 6s; }
  * { transition-duration: .01ms !important; }
}