/* RC88 · Registro delle opere
   Stessa identità del catalogo d'arte dell'app: carta avorio, inchiostro
   bruno, oro per i numeri di scheda, verde bosco per le azioni. Tutto
   racchiuso nei token --op-*, così nulla esce da queste schermate. */

.opere-page,
.opere-in-place,
.opera-sheet {
  --op-paper: #faf4e6;
  --op-surface: #fffdf7;
  --op-ink: #2f2a22;
  --op-ink-soft: #6a5f4d;
  --op-gold: #9c7a34;
  --op-gold-soft: #c9a961;
  --op-green: #1f5647;
  --op-green-soft: #e7efe9;
  --op-rule: rgba(156, 122, 52, .34);
  --op-radius: 14px;
  --op-radius-lg: 22px;
  --op-shadow: 0 14px 34px rgba(48, 34, 16, .14);
  --op-serif: var(--arte-serif, Georgia, 'Times New Roman', serif);
  color: var(--op-ink);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ------------------------------------------------------- pagina del registro */

.opere-page {
  min-height: 100vh;
  padding: clamp(16px, 4vw, 40px) clamp(12px, 4vw, 40px) 72px;
  background: linear-gradient(180deg, #fdf8ee 0%, var(--op-paper) 42%, #f3e9d6 100%);
}

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

.opere-shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  gap: clamp(16px, 3vw, 26px);
}

.opere-home {
  align-self: start;
  min-height: 44px;
  padding: 0 15px;
  border: 1px solid var(--op-rule);
  border-radius: 999px;
  background: var(--op-surface);
  color: var(--op-ink-soft);
  font: 800 12.5px/1 system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
}

.opere-home:hover { background: #fff; color: var(--op-ink); }
.opere-home:focus-visible { outline: 3px solid rgba(156, 122, 52, .38); outline-offset: 3px; }

.opere-head { display: grid; gap: 9px; }

.opere-eyebrow {
  margin: 0;
  color: var(--op-gold);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.opere-head h1 {
  margin: 0;
  font: 900 clamp(1.8rem, 5.6vw, 2.9rem)/1.02 var(--op-serif);
  letter-spacing: -.01em;
}

.opere-lead {
  margin: 0;
  max-width: 62ch;
  color: var(--op-ink-soft);
  font-size: .98rem;
  line-height: 1.55;
}

.opere-stats {
  margin: 0;
  padding-top: 6px;
  border-top: 1px solid var(--op-rule);
  color: var(--op-green);
  font-size: .84rem;
  font-weight: 800;
  letter-spacing: .01em;
}

.opere-tools {
  display: grid;
  gap: 12px;
  padding: clamp(14px, 2.6vw, 20px);
  border: 1px solid var(--op-rule);
  border-radius: var(--op-radius-lg);
  background: var(--op-surface);
  box-shadow: var(--op-shadow);
}

.opere-search { display: grid; gap: 7px; }

.opere-search span,
.opere-filters span {
  color: var(--op-ink-soft);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.opere-search input,
.opere-filters select {
  min-height: 46px;
  padding: 0 13px;
  border: 1px solid rgba(106, 95, 77, .28);
  border-radius: 12px;
  background: #fff;
  color: var(--op-ink);
  font: 600 .95rem/1 system-ui, sans-serif;
}

.opere-search input:focus-visible,
.opere-filters select:focus-visible {
  outline: 3px solid rgba(156, 122, 52, .3);
  border-color: var(--op-gold);
}

.opere-filters {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.opere-filters label { display: grid; gap: 6px; }

.opere-tools-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.opere-reset,
.opere-quaderno {
  min-height: 44px;
  padding: 0 15px;
  border-radius: 12px;
  font: 800 .84rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.opere-reset {
  border: 1px solid rgba(106, 95, 77, .26);
  background: transparent;
  color: var(--op-ink-soft);
}

.opere-quaderno {
  border: 1px solid var(--op-green);
  background: var(--op-green);
  color: #fdf6e3;
}

.opere-reset:hover { background: #fff; color: var(--op-ink); }
.opere-quaderno:hover { filter: brightness(1.08); }
.opere-reset:focus-visible,
.opere-quaderno:focus-visible { outline: 3px solid rgba(156, 122, 52, .35); outline-offset: 2px; }

.opere-status {
  min-height: 20px;
  margin: 0;
  color: var(--op-ink-soft);
  font-size: .84rem;
  font-weight: 800;
}

.opere-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}

.opera-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 16px;
  border: 1px solid var(--op-rule);
  border-radius: var(--op-radius);
  background: var(--op-surface);
  box-shadow: 0 8px 20px rgba(48, 34, 16, .08);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.opera-card:hover {
  transform: translateY(-2px);
  border-color: var(--op-gold);
  box-shadow: 0 16px 30px rgba(48, 34, 16, .14);
}

.opera-card:focus-visible { outline: 3px solid rgba(156, 122, 52, .38); outline-offset: 3px; }

.opera-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.opera-card-number {
  color: var(--op-gold);
  font: 900 .72rem/1 system-ui, sans-serif;
  letter-spacing: .12em;
}

.opera-card-arte {
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--op-green-soft);
  color: var(--op-green);
  font: 800 .66rem/1 system-ui, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.opera-card h3 {
  margin: 0;
  font: 900 1.12rem/1.2 var(--op-serif);
}

.opera-card-artist {
  margin: 0;
  color: var(--op-ink);
  font-size: .86rem;
  font-weight: 800;
}

.opera-card-place {
  margin: 0;
  color: var(--op-ink-soft);
  font-size: .82rem;
  line-height: 1.45;
}

.opera-card-badge,
.opera-sheet-badge {
  justify-self: start;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--op-rule);
  background: #fff;
  color: var(--op-ink-soft);
  font: 800 .66rem/1 system-ui, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.opera-card-badge.is-documentata,
.opera-sheet-badge.is-documentata {
  border-color: rgba(31, 86, 71, .35);
  background: var(--op-green-soft);
  color: var(--op-green);
}

.opera-card-badge.is-tradizionale,
.opera-sheet-badge.is-tradizionale {
  border-color: rgba(156, 122, 52, .45);
  background: #fdf3dc;
  color: #8a6520;
}

.opera-empty {
  padding: clamp(20px, 4vw, 34px);
  border: 1px dashed var(--op-rule);
  border-radius: var(--op-radius-lg);
  background: var(--op-surface);
  text-align: center;
}

.opera-empty[hidden] { display: none !important; }
.opera-empty h3 { margin: 0 0 6px; font: 900 1.2rem/1.2 var(--op-serif); }
.opera-empty p { margin: 0; color: var(--op-ink-soft); font-size: .9rem; }

/* ------------------------------- opere dentro la scheda del luogo (fascia) */

.opere-in-place {
  display: grid;
  gap: 12px;
  margin: 4px 0 18px;
  padding: clamp(14px, 3vw, 20px);
  border: 1px solid var(--op-rule);
  border-radius: var(--op-radius-lg);
  background: linear-gradient(180deg, #fffdf7, var(--op-paper));
  box-shadow: 0 10px 26px rgba(48, 34, 16, .1);
}

.opere-in-place[hidden] { display: none !important; }

.opere-in-place-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
}

.opere-in-place-kicker {
  flex: 1 1 100%;
  margin: 0;
  color: var(--op-gold);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.opere-in-place-head h3 {
  margin: 0;
  font: 900 clamp(1.1rem, 3.4vw, 1.4rem)/1.15 var(--op-serif);
}

.opere-in-place-count {
  color: var(--op-ink-soft);
  font-size: .76rem;
  font-weight: 800;
}

.opere-in-place-list {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
}

.opera-chip {
  display: grid;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--op-rule);
  border-radius: var(--op-radius);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease;
}

.opera-chip:hover { transform: translateY(-2px); border-color: var(--op-gold); }
.opera-chip:focus-visible { outline: 3px solid rgba(156, 122, 52, .38); outline-offset: 2px; }

.opera-chip-number {
  color: var(--op-gold);
  font: 900 .66rem/1 system-ui, sans-serif;
  letter-spacing: .12em;
}

.opera-chip strong { font: 900 1rem/1.2 var(--op-serif); color: var(--op-ink); }
.opera-chip small { color: var(--op-ink-soft); font-size: .78rem; font-weight: 700; }

.opere-in-place-empty {
  margin: 0;
  color: var(--op-ink-soft);
  font-size: .86rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------- scheda opera */

.opera-sheet {
  width: min(660px, calc(100vw - 26px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 0;
  border-radius: var(--op-radius-lg);
  background: var(--op-paper);
  box-shadow: 0 30px 80px rgba(38, 26, 12, .38);
  overflow: auto;
}

.opera-sheet::backdrop {
  background: rgba(31, 22, 15, .5);
  backdrop-filter: blur(3px);
}

.opera-sheet-card {
  position: relative;
  display: grid;
  gap: 16px;
  padding: clamp(20px, 4vw, 30px);
}

.opera-sheet-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--op-rule);
  border-radius: 50%;
  background: var(--op-surface);
  color: var(--op-ink);
  font: 700 1.4rem/1 system-ui, sans-serif;
  cursor: pointer;
}

.opera-sheet-close:hover { background: #fff; }
.opera-sheet-close:focus-visible { outline: 3px solid rgba(156, 122, 52, .4); outline-offset: 2px; }

.opera-sheet-head {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--op-rule);
}

.opera-sheet-kicker {
  margin: 0;
  color: var(--op-gold);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.opera-sheet-head h2 {
  margin: 0;
  padding-right: 44px;
  font: 900 clamp(1.4rem, 5vw, 2rem)/1.1 var(--op-serif);
}

.opera-sheet-artist {
  margin: 0;
  color: var(--op-ink);
  font-size: .95rem;
  font-weight: 800;
}

.opera-sheet-meta {
  display: grid;
  gap: 10px;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.opera-sheet-meta div { display: grid; gap: 3px; }

.opera-sheet-meta dt {
  color: var(--op-gold);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.opera-sheet-meta dd {
  margin: 0;
  color: var(--op-ink);
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.4;
}

.opera-sheet-note {
  margin: 0;
  color: var(--op-ink);
  font: 400 1rem/1.6 var(--op-serif);
}

.opera-sheet-warning,
.opera-sheet-origin {
  margin: 0;
  padding: 10px 13px;
  border-radius: 12px;
  font-size: .82rem;
  line-height: 1.5;
}

.opera-sheet-warning {
  border: 1px solid rgba(156, 122, 52, .4);
  background: #fdf3dc;
  color: #7d5c1c;
  font-weight: 700;
}

.opera-sheet-origin {
  border: 1px dashed var(--op-rule);
  background: var(--op-surface);
  color: var(--op-ink-soft);
  font-weight: 700;
}

.opera-sheet-status {
  min-height: 18px;
  margin: -4px 0 0;
  color: var(--op-ink-soft);
  font-size: .84rem;
  font-weight: 800;
}

.opera-sheet-status[data-tone="ok"] { color: var(--op-green); }
.opera-sheet-status[data-tone="error"] { color: #a53f2c; }

.opera-sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.opera-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 15px;
  border: 1px solid rgba(106, 95, 77, .28);
  border-radius: 12px;
  background: var(--op-surface);
  color: var(--op-ink);
  font: 800 .84rem/1 system-ui, sans-serif;
  text-decoration: none;
  cursor: pointer;
}

.opera-action:hover { background: #fff; border-color: var(--op-gold); }
.opera-action:focus-visible { outline: 3px solid rgba(156, 122, 52, .35); outline-offset: 2px; }
.opera-action:disabled { cursor: wait; opacity: .6; }

.opera-action.is-primary {
  border-color: var(--op-green);
  background: var(--op-green);
  color: #fdf6e3;
}

.opera-action.is-primary:hover { filter: brightness(1.08); }

.opera-action.is-on {
  border-color: var(--op-green);
  background: var(--op-green-soft);
  color: var(--op-green);
}

.opera-sheet-qr {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 14px;
  border: 1px dashed var(--op-rule);
  border-radius: var(--op-radius);
  background: #fff;
}

.opera-sheet-qr[hidden] { display: none !important; }
.opera-sheet-qr img { width: 180px; height: 180px; image-rendering: pixelated; }
.opera-sheet-qr p { margin: 0; color: var(--op-ink-soft); font-size: .8rem; text-align: center; }

@media (max-width: 620px) {
  .opere-page { padding: 14px 12px 58px; }
  .opera-card h3 { font-size: 1.04rem; }
  .opera-sheet-actions .opera-action { flex: 1 1 46%; }
  .opere-in-place-list { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- fotografie delle opere
   Le immagini arrivano da Wikimedia Commons e dichiarano il loro stato in
   data-stato: lo spazio sa stare in attesa, mostrare la fotografia o dire che
   non ne esiste una libera. Così non resta mai un riquadro vuoto che sembri un
   guasto. */

@keyframes op-shimmer {
  from { background-position: 0 0; }
  to { background-position: -220% 0; }
}

.opera-photo-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--op-rule);
  border-radius: var(--op-radius);
  background: linear-gradient(120deg, #f2e7d2, #e6d7b9, #f2e7d2);
  background-size: 220% 100%;
  animation: op-shimmer 2.6s linear infinite;
}

.opera-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opera-sheet-photo {
  display: grid;
  gap: 7px;
  margin: 0;
}

.opera-sheet-photo .opera-photo-frame {
  aspect-ratio: 4 / 3;
  max-height: 330px;
}

.opera-sheet-photo[data-stato="ready"] .opera-photo-frame {
  animation: none;
  background: #eee2ca;
}

.opera-sheet-photo[data-stato="empty"] .opera-photo-frame { display: none; }

.opera-photo-credit {
  margin: 0;
  color: var(--op-ink-soft);
  font-size: .76rem;
  line-height: 1.45;
}

.opera-photo-credit a {
  color: var(--op-green);
  font-weight: 850;
  text-underline-offset: 3px;
}

.opera-sheet-photo[data-stato="empty"] .opera-photo-credit {
  padding: 12px 14px;
  border: 1px dashed var(--op-rule);
  border-radius: var(--op-radius);
  background: #fff;
}

.opera-card-photo {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: calc(var(--op-radius) - 4px);
  background: #f1e6d1;
}

.opera-chip-photo {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #f1e6d1;
}

.opera-card-photo[data-stato="loading"],
.opera-chip-photo[data-stato="loading"] {
  background: linear-gradient(120deg, #f2e7d2, #e6d7b9, #f2e7d2);
  background-size: 220% 100%;
  animation: op-shimmer 2.6s linear infinite;
}

.opera-card-photo[data-stato="ready"],
.opera-chip-photo[data-stato="ready"] {
  animation: none;
  background: #eee2ca;
}

.opera-card-photo[data-stato="empty"],
.opera-chip-photo[data-stato="empty"] { display: none; }

.opera-card-photo img,
.opera-chip-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 620px) {
  .opera-sheet-photo .opera-photo-frame { aspect-ratio: 3 / 2; max-height: 240px; }
  .opera-card-photo { aspect-ratio: 16 / 10; }
}

@media (prefers-reduced-motion: reduce) {
  .opera-photo-frame,
  .opera-card-photo[data-stato="loading"],
  .opera-chip-photo[data-stato="loading"] { animation: none; }
}