.sop-panel {
  --sop-gold: var(--mui-gold, #f0d488);
  --sop-gold-dim: var(--mui-gold-dim, #c8b88a);
  --sop-text: var(--mui-text, #ecdcb6);
  --sop-dim: var(--mui-text-dim, #a89372);
  overflow: hidden;
  border: 1px solid rgba(216, 180, 94, .68);
  border-radius: 13px;
  background:
    linear-gradient(180deg, rgba(39, 29, 17, .985), rgba(13, 10, 7, .99)),
    url("/assets/ui/scene-command-surface.webp");
  background-size: auto, 390px 390px;
  color: var(--sop-text);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .68),
    inset 0 1px 0 rgba(255, 235, 177, .11);
  font-family: var(--mui-font-body, "Crimson Text", Georgia, serif);
  pointer-events: auto;
}

.sop-panel[hidden] {
  display: none;
}

.sop-floating {
  position: fixed;
  /* Por encima del HUD de mando (z:70): un portón seleccionado debe seguir
     siendo accionable aunque la capa global del HUD cubra toda la pantalla. */
  z-index: 84;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  width: min(390px, calc(100vw - 36px));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .18s ease, transform .18s ease;
}

.sop-floating.show {
  opacity: 1;
  transform: none;
}

.sop-inline {
  margin: 7px 9px 4px;
  border-color: rgba(216, 180, 94, .42);
  border-radius: 10px;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .32),
    inset 0 1px 0 rgba(255, 235, 177, .08);
}

.sop-head {
  min-height: 66px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border-bottom: 1px solid rgba(216, 180, 94, .26);
  background: linear-gradient(180deg, rgba(255, 222, 141, .08), rgba(0, 0, 0, .08));
}

.sop-art {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(232, 197, 104, .54);
  border-radius: 9px;
  background: #1a130b;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .38);
  object-fit: cover;
}

.sop-heading {
  min-width: 0;
}

.sop-heading small,
.sop-heading b,
.sop-heading span {
  display: block;
}

.sop-eyebrow {
  color: #9f8961;
  font: 7px/1.05 var(--mui-font-display, "MedievalSharp", Georgia, serif);
  letter-spacing: .13em;
}

.sop-title {
  margin-top: 3px;
  overflow: hidden;
  color: var(--sop-gold);
  font: 16px/1.1 var(--mui-font-display, "MedievalSharp", Georgia, serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sop-subtitle {
  margin-top: 2px;
  overflow: hidden;
  color: var(--sop-dim);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sop-close {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(216, 180, 94, .32);
  border-radius: 10px;
  background: rgba(13, 9, 5, .48);
  color: #d9c390;
  cursor: pointer;
  font: 23px/1 Georgia, serif;
}

.sop-close[hidden] {
  visibility: hidden;
}

.sop-status {
  min-height: 31px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(132, 104, 57, .25);
  background: rgba(3, 3, 2, .24);
}

.sop-state-dot,
.sop-row-state {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 1px solid rgba(255, 228, 160, .32);
  border-radius: 50%;
  background: #a55345;
  box-shadow: 0 0 8px rgba(165, 83, 69, .42);
}

.sop-state-label {
  color: #d8c7a2;
  font-size: 10px;
}

.sop-authority {
  margin-left: auto;
  color: #8f826b;
  font-size: 8px;
}

.sop-panel[data-state="open"] .sop-state-dot,
.sop-row[data-open="true"] .sop-row-state {
  background: #6ea564;
  box-shadow: 0 0 8px rgba(110, 165, 100, .46);
}

.sop-panel[data-state="partial"] .sop-state-dot {
  background: #d2a44f;
  box-shadow: 0 0 8px rgba(210, 164, 79, .46);
}

.sop-panel[data-state="broken"] .sop-state-dot {
  background: #a33b31;
}

.sop-rows {
  display: grid;
  gap: 5px;
  padding: 7px;
}

.sop-row {
  min-height: 58px;
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) minmax(105px, auto);
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 9px;
  border: 1px solid rgba(139, 111, 62, .38);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(55, 41, 24, .74), rgba(20, 15, 10, .8));
}

.sop-row-copy {
  min-width: 0;
}

.sop-row-copy b,
.sop-row-copy small {
  display: block;
}

.sop-row-copy b {
  color: #e8d9b9;
  font: 11px/1.05 var(--mui-font-display, "MedievalSharp", Georgia, serif);
}

.sop-row-copy small {
  margin-top: 3px;
  color: #968a74;
  font-size: 8px;
  line-height: 1.1;
}

.sop-row button {
  min-height: 44px;
  padding: 6px 9px;
  border: 1px solid #9f803f;
  border-radius: 8px;
  background: linear-gradient(180deg, #6f5728, #3f2e13);
  color: #ffe6aa;
  box-shadow: inset 0 1px 0 rgba(255, 229, 158, .16), 0 2px 6px rgba(0, 0, 0, .38);
  cursor: pointer;
  font: 10px/1.05 var(--mui-font-display, "MedievalSharp", Georgia, serif);
}

.sop-row[data-open="true"] button {
  border-color: rgba(171, 98, 78, .72);
  background: linear-gradient(180deg, #654036, #38211d);
  color: #f1cfc4;
}

.sop-row button:disabled {
  cursor: default;
  filter: grayscale(.35);
  opacity: .5;
}

.sop-row[data-busy="true"] button {
  border-color: #d8b65c;
  animation: sop-busy 1s ease-in-out infinite alternate;
}

.sop-note {
  margin: 0;
  padding: 1px 10px 9px;
  color: #8d816c;
  font-size: 8px;
  line-height: 1.25;
}

@keyframes sop-busy {
  from { box-shadow: 0 0 0 rgba(240, 212, 136, 0); }
  to { box-shadow: 0 0 13px rgba(240, 212, 136, .32); }
}

@media (max-width: 720px) {
  .sop-floating {
    right: max(6px, env(safe-area-inset-right, 0px));
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    left: max(6px, env(safe-area-inset-left, 0px));
    width: auto;
    max-height: min(58vh, 500px);
    overflow-y: auto;
  }

  .sop-inline {
    margin: 6px 8px 3px;
  }

  .sop-head {
    grid-template-columns: 48px minmax(0, 1fr) 44px;
    min-height: 58px;
    padding: 6px;
  }

  .sop-art {
    width: 48px;
    height: 48px;
  }

  .sop-title {
    font-size: 14px;
  }

  .sop-row {
    grid-template-columns: 9px minmax(0, 1fr) minmax(102px, auto);
    min-height: 56px;
  }
}

@media (max-width: 380px) {
  .sop-row {
    grid-template-columns: 9px minmax(0, 1fr);
  }

  .sop-row button {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sop-floating,
  .sop-row[data-busy="true"] button {
    transition: none;
    animation: none;
  }
}