/* RC88 Spiega dentro l'app: solo la cornice della pagina.
   Il pannello vero (schede, filtri, produzione) è disegnato da
   mao/panel-spiega.css, che resta identico alla versione da ufficio. */

.spiega-page {
  display: block;
  min-height: 70vh;
  padding: clamp(16px, 3.4vw, 38px) clamp(12px, 3.4vw, 34px) 72px;
  background:
    radial-gradient(circle at 88% 0%, #f0c98833, transparent 34%),
    linear-gradient(180deg, #fbf5ea, #f5ebda);
  color: #30271f;
}

.spiega-page[hidden] { display: none !important; }

.spiega-page .spiega-page-shell {
  width: min(1180px, 100%);
  margin: 0 auto;
}

/* La scheda del pannello porta già il proprio bordo: qui si toglie solo il
   margine superiore pensato per la pagina da ufficio. */
.spiega-page .spiega-panel {
  margin-top: 0;
}

.spiega-page .mao-eyebrow {
  margin: 0;
  color: #a35e18;
  font: 900 .72rem/1 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.spiega-page .spiega-page-title {
  margin: 8px 0 0;
  color: #30271f;
  font: 900 clamp(1.7rem, 4.4vw, 2.7rem)/1.02 Georgia, serif;
  letter-spacing: -.035em;
}

.spiega-page .spiega-panel-head > div {
  min-width: 0;
}

.spiega-page .spiega-panel-head .button {
  min-height: 46px;
  white-space: nowrap;
}

.spiega-page .spiega-page-status {
  min-height: 22px;
  margin: 0 0 14px;
  color: #75675a;
  font-size: .86rem;
  font-weight: 800;
}

.spiega-page .spiega-page-status:empty {
  min-height: 0;
  margin: 0;
}

.spiega-page .spiega-page-status[data-state="error"] { color: #a53f2c; }

/* Riga di attesa: si vede subito che i dossier stanno arrivando. */
.spiega-page .spiega-page-loading {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  padding: 9px 13px;
  border: 1px solid #ddbd70;
  border-radius: 999px;
  background: #fff3c8;
  color: #7b551d;
  font: 850 .8rem/1 system-ui, sans-serif;
}

.spiega-page .spiega-list > .spiega-page-loading { margin: 0; }

.spiega-page .spiega-page-loading::before {
  content: "";
  width: 13px;
  height: 13px;
  border: 2px solid #c27824;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spiega-page-spin .8s linear infinite;
}

@keyframes spiega-page-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spiega-page .spiega-page-loading::before { animation-duration: 2.4s; }
}

@media (max-width: 640px) {
  .spiega-page { padding: 14px 10px 60px; }
  .spiega-page .spiega-panel { padding: 16px 14px; border-radius: 18px; }
  .spiega-page .spiega-panel-head { display: grid; gap: 14px; }
  .spiega-page .spiega-panel-head .button { width: 100%; }
}