/* =====================================================
   VARIÁVEIS (APENAS ARMÁRIO)
   ===================================================== */

:root{
  --frame: #7c6db2;
  --border:#a692e0;
  --divider:#c9b7ff;

  --door-default:#f5f6fb;

  --door-closed-bg:#e9f7ef;
  --door-closed-border:#43a047;

  --door-open-bg:#fff4cc;
  --door-open-border:#f0ad00;

  --door-error-bg:#fdecea;
  --door-error-border:#e53935;

  --door-disabled-bg:#f1f1f1;
  --door-disabled-border:#ccc;

  --unit: 10px;
  --radius: 6px;
}

/* =====================================================
   WRAPPER
   ===================================================== */

.locker-wrap{
  max-width: 520px;
  background:#fff;
  border:3px solid var(--frame);
  border-radius:10px;
  padding:6px;
  margin:auto;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

/* =====================================================
   GRID
   ===================================================== */

.locker{
  display:grid;
  grid-template-columns:1.25fr 6px 1fr;
  grid-auto-rows:var(--unit);
  gap:4px;
  position:relative;
}

.divider{
  grid-column:2/3;
  grid-row:1/-1;
  background:var(--divider);
  border-radius:3px;
}

/* =====================================================
   PORTA BASE
   ===================================================== */

.door{
  background:var(--door-default);
  border:2px solid var(--border);
  border-radius:var(--radius);
  position:relative;
  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  user-select:none;
  transition:
    transform .06s ease,
    box-shadow .12s ease,
    background .2s ease,
    border-color .2s ease;
}

.door:hover{
  box-shadow:0 0 0 3px rgba(124,109,178,.15) inset;
}

.door:active{
  transform: translateY(1px) scale(.998);
}

/* =====================================================
   TAG
   ===================================================== */

.door .tag{
  position:absolute;
  top:6px;
  right:8px;
  font-size:12px;
  font-weight:700;
  opacity:.7;
}

/* =====================================================
   JANELA
   ===================================================== */

.door.has-window::before{
  content:"";
  position:absolute;
  inset:18% 22%;
  border:2px solid #555;
  border-radius:4px;
  background:linear-gradient(#fff,#f1f1f1);
}

.door.has-window::after{
  content:"";
  position:absolute;
  inset:24% 30%;
  border:2px solid #666;
  border-radius:3px;
  background:#fff;
}

/* =====================================================
   COLUNAS
   ===================================================== */

.col-left{ grid-column:1/2; }
.col-right{ grid-column:3/4; }

/* =====================================================
   ESTADOS
   ===================================================== */

.door.is-closed{
  background:var(--door-closed-bg);
  border-color:var(--door-closed-border);
}
.door.is-closed::after{
  content:"🔒";
  font-size:36px;
}

.door.is-open{
  background:var(--door-open-bg);
  border-color:var(--door-open-border);
  animation: door-pulse 1.6s ease-in-out infinite;
}
.door.is-open::after{
  content:"🔓";
  font-size:42px;
}

.door.is-error{
  background:var(--door-error-bg);
  border-color:var(--door-error-border);
}
.door.is-error::after{
  content:"⚠️";
  font-size:36px;
}

.door.is-disabled{
  background:var(--door-disabled-bg);
  border-color:var(--door-disabled-border);
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}
.door.is-disabled::after{
  content:"🚫";
  font-size:32px;
}

/* =====================================================
   SELEÇÃO
   ===================================================== */

.door.is-selected{
  box-shadow:
    0 0 0 3px rgba(82,126,255,.45) inset,
    0 0 0 2px #527eff;
}

/* =====================================================
   ANIMAÇÃO
   ===================================================== */

@keyframes door-pulse{
  0%   { box-shadow:0 0 0 0 rgba(240,173,0,.45); }
  70%  { box-shadow:0 0 0 14px rgba(240,173,0,0); }
  100% { box-shadow:0 0 0 0 rgba(240,173,0,0); }
}

/* =====================================================
   DEBUG
   ===================================================== */

[data-locker-debug-value="true"] .door::before{
  content: attr(data-status);
  position:absolute;
  bottom:6px;
  left:6px;
  font-size:10px;
  font-weight:700;
  background:rgba(0,0,0,.65);
  color:#fff;
  padding:2px 6px;
  border-radius:4px;
}