/* =========================================================
   VARIÁVEIS GERAIS (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;
}

/* =========================================================
   ARMÁRIO – 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);
}

/* =========================================================
   ARMÁRIO – 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;
}

/* =========================================================
   ARMÁRIO – PORTA BASE
   ========================================================= */
.door{
  background:var(--door-default);
  border:2px solid var(--border);
  border-radius:var(--radius);
  position:relative;
  cursor:pointer;
  outline:none;

  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);
}

/* =========================================================
   ARMÁRIO – TAG
   ========================================================= */
.door .tag{
  position:absolute;
  top:6px;
  right:8px;
  font-size:12px;
  font-weight:700;
  color:#333;
  opacity:.7;
}

/* =========================================================
   ARMÁRIO – 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;
}

/* =========================================================
   ARMÁRIO – COLUNAS
   ========================================================= */
.col-left{ grid-column:1/2; }
.col-right{ grid-column:3/4; }

/* =========================================================
   ARMÁRIO – 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;
}

/* =========================================================
   ARMÁRIO – SELEÇÃO
   ========================================================= */
.door.is-selected{
  box-shadow:
    0 0 0 3px rgba(82,126,255,.45) inset,
    0 0 0 2px #527eff;
}

/* =========================================================
   ARMÁRIO – 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); }
}

/* =========================================================
   ARMÁRIO – 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;
  pointer-events:none;
}

/* =========================================================
   UX TAMANHO – CONTAINER
   ========================================================= */
.locker-size-container{
  min-height:50vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* =========================================================
   UX TAMANHO – CARD
   ========================================================= */
.locker-size-container .size-card{
  border-radius:1rem;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  user-select:none;
}

.locker-size-container a.size-card:hover{
  transform:translateY(-6px);
  box-shadow:0 1rem 2rem rgba(0,0,0,.15);
  text-decoration:none;
}

/* =========================================================
   UX TAMANHO – DESABILITADO
   ========================================================= */
.locker-size-container .size-card.disabled,
.locker-size-container .size-card[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.55;
}

.locker-size-container .size-card.disabled:hover{
  transform:none;
  box-shadow:none;
}

/* =========================================================
   UX TAMANHO – TEXTO
   ========================================================= */
.locker-size-container .size-card .display-1{
  line-height:1;
}

.locker-size-container .size-card .fs-5{
  margin-top:.25rem;
}

/* =========================================================
   UX TAMANHO – BADGE
   ========================================================= */
.locker-size-container .size-card .badge{
  font-size:.85rem;
  padding:.45em .7em;
}

.locker-size-container .size-card .badge.bg-primary{
  animation:size-pulse 1.8s infinite;
}

/* =========================================================
   UX TAMANHO – ANIMAÇÃO
   ========================================================= */
@keyframes size-pulse{
  0%{ box-shadow:0 0 0 0 rgba(13,110,253,.5); }
  70%{ box-shadow:0 0 0 12px rgba(13,110,253,0); }
  100%{ box-shadow:0 0 0 0 rgba(13,110,253,0); }
}

/* =========================================================
   UX TAMANHO – MOBILE
   ========================================================= */
@media (max-width:768px){
  .locker-size-container .size-card{
    margin-bottom:1rem;
  }

  .locker-size-container .size-card .display-1{
    font-size:4rem;
  }
}

/* =========================================================
   UX TAMANHO – CANCELAR
   ========================================================= */
.locker-size-container .btn-link,
.locker-size-container .cancel-button{
  color:#6c757d;
  text-decoration:none;
}

.locker-size-container .btn-link:hover,
.locker-size-container .cancel-button:hover{
  text-decoration:underline;
}

/* =====================================================
   TIMEOUT WARNING (DISCRETO)
   ===================================================== */

.timeout-warning {
  font-size: 0.9rem;
  color: #6c757d; /* cinza Bootstrap */
  margin-bottom: 0.5rem;
  opacity: 0.85;
}