/* ============================================================
   A MESA DE COMANDO — Aureum "Tech Noir"
   ------------------------------------------------------------
   CLASSES/ESTRUTURAS ESSENCIAIS (não renomear na integração):

   .mesa                  raiz do componente (ambiente da sala: luz + vinheta + ruído)
   .mesa-grid             grid 3 colunas (desktop) / empilhado (<= 820px)
   .mesa-dono             card do dono na cabeceira (div, não-link)
     .dono-avatar .dono-eyebrow .dono-nome .dono-empresa
   .mesa-table            o tampo da mesa (material + reflexo + gravação)
     .table-brand         gravação "Mesa de Comando" no tampo
   .mesa-telao            telão executivo no centro da mesa
     .telao-titulo .telao-valor .telao-meta .telao-farol
   .mesa-side             coluna de assentos  (--l = 3 primeiras, --r = 3 últimas)
   .mesa-seat             assento/cadeira — SEMPRE um <a href> com aria-label
     .seat-mono           monograma (iniciais ou cadeado)
     .seat-info .seat-nome .seat-status
   .mesa-farol            a luz de status (dot). O ESTADO fica no ancestral:
   .is-verde .is-amarelo .is-vermelho .is-locked .is-neutro
                          (aplicados no <a class="mesa-seat"> e no .telao-farol;
                           cada um define a var --farol usada por dot/conector)

   CONTRATO JS: renderMesa(el, MESA) — renderiza dentro de `el`.
   MESA = { dono:{nome,empresa},
            central:{titulo,valor,meta,farol},
            gerencias:[{key,nome,href,estado} x6] }  (3 primeiras à esquerda)
   ============================================================ */

.mesa{
  --bg:        #0A0A0A;
  --panel:     #131310;
  --panel-2:   #17150f;
  --gold:      #f7bd48;
  --gold-deep: #c8912b;
  --green:     #00E676;
  --red:       #ff5a5a;
  --ink:       #F2EFE6;
  --muted:     #b8b4a6;
  --line:      rgba(247,189,72,.14);
  --font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
  --font-body:    'Geist', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

.mesa,.mesa *{box-sizing:border-box;}





/* ================================================================
   1. A SALA — luz ambiente dourada, vinheta, grão
   ================================================================ */
.mesa{
  position:relative;
  padding:clamp(18px,4vw,44px) clamp(12px,3vw,36px) clamp(28px,4vw,52px);
  isolation:isolate;
  overflow:hidden;
  border-radius:22px;
}
.mesa::before{            /* luminária sobre a mesa + vinheta da sala */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% -6%,  rgba(247,189,72,.13), transparent 62%),
    radial-gradient(46% 34% at 50% 34%,  rgba(247,189,72,.055), transparent 72%),
    radial-gradient(130% 105% at 50% 48%, transparent 55%, rgba(0,0,0,.55) 100%);
}
.mesa::after{             /* grão de filme */
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ================================================================
   2. O GRID DA SALA
   ================================================================ */
.mesa-grid{
  position:relative; z-index:1;
  display:grid;
  grid-template-columns:1fr clamp(272px,34vw,400px) 1fr;
  grid-template-areas:
    ". dono ."
    "left table right";
  column-gap:clamp(18px,3vw,34px);
  align-items:center;
  justify-items:center;
}

/* ================================================================
   3. O DONO — cabeceira
   ================================================================ */
.mesa-dono{
  grid-area:dono; position:relative; z-index:3;
  margin-bottom:-30px;                 /* senta na cabeceira, sobre o tampo */
  display:flex; align-items:center; gap:14px;
  padding:14px 22px 15px 15px;
  background:linear-gradient(165deg, #1b1810 0%, var(--panel) 55%, #0e0d09 100%);
  border:1px solid rgba(247,189,72,.28);
  border-radius:16px;
  box-shadow:
    0 24px 50px -18px rgba(0,0,0,.85),
    0 0 44px -14px rgba(247,189,72,.22),
    inset 0 1px 0 rgba(247,189,72,.12);
}
.mesa-dono::before{        /* filete de ouro na cabeceira */
  content:''; position:absolute; top:-1px; left:18%; right:18%; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
}
.dono-avatar{
  flex:none; width:48px; height:48px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:22px; color:#231a07;
  background:
    radial-gradient(circle at 32% 26%, #ffe9b0 0%, var(--gold) 42%, var(--gold-deep) 100%);
  box-shadow:0 0 0 1px rgba(247,189,72,.5), 0 6px 16px -6px rgba(247,189,72,.55);
}
.dono-info{ display:flex; flex-direction:column; min-width:0; }
.dono-eyebrow{
  font-family:var(--font-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold);
  margin-bottom:2px;
}
.dono-nome{
  font-family:var(--font-display); font-weight:600; font-size:27px;
  line-height:1.02; letter-spacing:.01em; color:var(--ink);
}
.dono-empresa{
  font-size:12px; color:var(--muted); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ================================================================
   4. A MESA — tampo laqueado
   ================================================================ */
.mesa-table{
  grid-area:table; position:relative; z-index:1;
  width:100%; min-height:540px;
  border-radius:96px;
  display:grid; place-items:center;
  padding:76px 26px 60px;
  background:
    radial-gradient(120% 60% at 50% -8%, rgba(247,189,72,.13), transparent 58%),
    repeating-linear-gradient(94deg, rgba(255,255,255,.014) 0 2px, transparent 2px 7px),
    linear-gradient(172deg, #1e1a11 0%, var(--panel) 38%, #0d0c08 100%);
  box-shadow:
    inset 0 0 0 1px rgba(247,189,72,.22),
    inset 0 0 0 5px rgba(0,0,0,.5),
    inset 0 0 0 6px rgba(247,189,72,.07),
    inset 0 26px 60px rgba(0,0,0,.5),
    0 46px 90px -28px rgba(0,0,0,.9),
    0 0 130px -30px rgba(247,189,72,.14);
  transform:perspective(1300px) rotateX(2.6deg);
  transform-origin:50% 0;
}
.mesa-table::after{        /* reflexo de verniz atravessando o tampo */
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(112deg,
    transparent 34%, rgba(255,255,255,.045) 44%,
    rgba(255,255,255,.015) 50%, transparent 58%);
}
.table-brand{
  position:absolute; left:0; right:0; bottom:30px; text-align:center;
  font-family:var(--font-mono); font-size:9px; font-weight:500;
  letter-spacing:.46em; text-transform:uppercase;
  color:rgba(247,189,72,.30); pointer-events:none;
  text-shadow:0 1px 0 rgba(0,0,0,.8);
}

/* ================================================================
   5. O TELÃO — número-herói
   ================================================================ */
.mesa-telao{
  position:relative; width:min(100%,300px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:22px 22px 18px;
  border-radius:14px;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.016) 0 1px, transparent 1px 3px),
    radial-gradient(110% 90% at 50% 0%, #101008 0%, #070705 68%);
  border:1px solid rgba(247,189,72,.2);
  box-shadow:
    0 0 0 5px #0b0a07,
    0 0 0 6px rgba(247,189,72,.1),
    0 18px 44px -14px rgba(0,0,0,.9),
    0 0 46px -10px rgba(247,189,72,.14),
    inset 0 0 30px rgba(0,0,0,.65);
}
.telao-titulo{
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--muted);
}
.telao-valor{
  margin-top:10px;
  font-family:var(--font-mono); font-weight:700;
  font-size:clamp(28px,3.4vw,38px); line-height:1;
  letter-spacing:-.01em; color:var(--gold);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 26px rgba(247,189,72,.4);
}
.telao-meta{
  margin-top:11px; padding-top:10px; width:100%;
  border-top:1px dashed rgba(247,189,72,.16);
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.telao-farol{
  margin-top:13px;
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 13px 5px 10px; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--farol,#777161) 34%, transparent);
  background:color-mix(in srgb, var(--farol,#777161) 8%, transparent);
  font-family:var(--font-mono); font-size:10px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--farol,#777161);
}

/* ================================================================
   6. OS ASSENTOS — 6 gerências
   ================================================================ */
.mesa-side{
  display:flex; flex-direction:column; gap:20px;
  width:100%; max-width:262px;
}
.mesa-side--l{ grid-area:left;  justify-self:end;   }
.mesa-side--r{ grid-area:right; justify-self:start; }

.mesa-seat{
  position:relative;
  display:flex; align-items:center; gap:12px;
  padding:13px 15px;
  min-width:0;
  background:linear-gradient(165deg, var(--panel-2) 0%, #100f0a 70%);
  border:1px solid var(--line);
  border-radius:14px;
  text-decoration:none; color:inherit;
  box-shadow:0 12px 26px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.03);
  transition:transform .32s cubic-bezier(.22,.9,.28,1),
             border-color .32s ease, box-shadow .32s ease, background .32s ease;
}
.mesa-seat:hover,
.mesa-seat:focus-visible{
  transform:translateY(-3px);
  border-color:rgba(247,189,72,.5);
  background:linear-gradient(165deg, #1d1a11 0%, #12100a 70%);
  box-shadow:
    0 20px 40px -16px rgba(0,0,0,.9),
    0 0 30px -8px color-mix(in srgb, var(--farol,#f7bd48) 30%, transparent),
    inset 0 1px 0 rgba(247,189,72,.14);
}
.mesa-seat:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.mesa-seat:active{ transform:translateY(-1px); }

/* braço da cadeira — conecta o assento ao tampo (só desktop) */
.mesa-seat::after{
  content:''; position:absolute; top:50%; width:clamp(16px,2.6vw,30px); height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--farol,#777161) 55%, transparent),
    color-mix(in srgb, var(--farol,#777161) 6%, transparent));
  opacity:.75; pointer-events:none;
}
.mesa-side--l .mesa-seat::after{ left:100%; }
.mesa-side--r .mesa-seat::after{
  right:100%;
  background:linear-gradient(270deg,
    color-mix(in srgb, var(--farol,#777161) 55%, transparent),
    color-mix(in srgb, var(--farol,#777161) 6%, transparent));
}

.seat-mono{
  flex:none; width:40px; height:40px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-display); font-weight:600; font-size:17px;
  letter-spacing:.02em; color:var(--gold);
  background:radial-gradient(circle at 34% 28%, #221d10, #0e0d08 74%);
  border:1px solid rgba(247,189,72,.26);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7), 0 2px 8px -3px rgba(0,0,0,.8);
  transition:border-color .32s ease, color .32s ease;
}
.mesa-seat:hover .seat-mono{ border-color:rgba(247,189,72,.6); }
.seat-mono svg{ display:block; }

.seat-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.seat-nome{
  font-size:14px; font-weight:600; letter-spacing:.01em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.seat-status{
  font-family:var(--font-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:color-mix(in srgb, var(--farol,#777161) 78%, #b8b4a6);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ================================================================
   7. O FAROL — a luz de status
   ================================================================ */
.mesa-farol{
  position:relative; flex:none; width:10px; height:10px; border-radius:50%;
  background:var(--farol,#777161);
  box-shadow:
    0 0 12px 1px color-mix(in srgb, var(--farol,#777161) 55%, transparent),
    inset 0 0 3px rgba(255,255,255,.4);
}
.mesa-farol::after{        /* anel de pulso */
  content:''; position:absolute; inset:-5px; border-radius:50%;
  border:1px solid var(--farol,#777161); opacity:0;
}

/* estados — definem a cor + o ritmo da respiração */
.is-verde    { --farol:var(--green); }
.is-amarelo  { --farol:var(--gold);  }
.is-vermelho { --farol:var(--red);   }
.is-neutro   { --farol:#77716180;    }
.is-locked   { --farol:#8a8060;      }

.is-verde    .mesa-farol::after{ animation:farol-ping 3.4s ease-out infinite; }
.is-amarelo  .mesa-farol::after{ animation:farol-ping 2.1s ease-out infinite; }
.is-vermelho .mesa-farol::after{ animation:farol-ping 1.1s ease-out infinite; }
.is-vermelho .mesa-farol      { animation:farol-urgencia 1.1s ease-in-out infinite alternate; }

.is-neutro .mesa-farol{ background:#4d483c; box-shadow:none; }
.is-locked .mesa-farol{
  background:transparent; box-shadow:none;
  border:1px solid rgba(247,189,72,.4);
}
.is-locked .seat-mono{ color:#8a8060; }
.is-locked .seat-nome{ color:var(--muted); }
.is-locked .seat-status{ color:var(--gold); opacity:.9; }
.is-locked:hover .seat-status{ opacity:1; }

@keyframes farol-ping{
  0%       { transform:scale(.55); opacity:.85; }
  72%,100% { transform:scale(1.9); opacity:0;   }
}
@keyframes farol-urgencia{
  from{ opacity:1;   } to{ opacity:.5; }
}

/* ================================================================
   8. ENTRADA CINEMÁTICA (respeita reduced-motion)
   ================================================================ */
@media (prefers-reduced-motion: no-preference){
  .mesa-table{ animation:mesa-in-tampo .8s cubic-bezier(.2,.75,.25,1) both; }
  .mesa-dono { animation:mesa-in .7s  cubic-bezier(.2,.75,.25,1) .12s both; }
  .mesa-telao{ animation:mesa-in .7s  cubic-bezier(.2,.75,.25,1) .2s  both; }
  .mesa-seat { animation:mesa-in .6s  cubic-bezier(.2,.75,.25,1) both;
               animation-delay:calc(.26s + var(--i,0)*.07s); }
}
@keyframes mesa-in{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0);    }
}
@keyframes mesa-in-tampo{
  from{ opacity:0; transform:perspective(1300px) rotateX(2.6deg) scale(.965) translateY(10px); }
  to  { opacity:1; transform:perspective(1300px) rotateX(2.6deg) scale(1)    translateY(0);    }
}
@media (prefers-reduced-motion: reduce){
  .mesa-farol, .mesa-farol::after{ animation:none !important; }
}

/* ================================================================
   9. MOBILE — dono no topo, telão como faixa, assentos empilhados
   ================================================================ */
@media (max-width: 820px){
  .mesa{ padding:20px 14px 30px; border-radius:18px; }
  .mesa-grid{
    grid-template-columns:1fr;
    grid-template-areas:"dono" "table" "left" "right";
    column-gap:0;
    justify-items:stretch;
  }
  .mesa-dono{
    justify-self:center; margin-bottom:-26px;
    max-width:min(100%,360px); width:100%;
  }
  .mesa-table{
    min-height:0; border-radius:30px;
    padding:58px 16px 44px;
    transform:none;
    box-shadow:
      inset 0 0 0 1px rgba(247,189,72,.22),
      inset 0 0 0 4px rgba(0,0,0,.5),
      inset 0 0 0 5px rgba(247,189,72,.07),
      0 30px 60px -24px rgba(0,0,0,.9),
      0 0 90px -30px rgba(247,189,72,.13);
  }
  .table-brand{ bottom:17px; letter-spacing:.34em; }
  .mesa-telao{ width:min(100%,320px); }
  .mesa-side{
    max-width:460px; width:100%;
    justify-self:center; gap:12px;
  }
  .mesa-side--l{ margin-top:22px; }
  .mesa-side--r{ margin-top:12px; }
  .mesa-seat::after{ display:none; }
  .mesa-table{ animation-name:mesa-in; } /* sem perspective no mobile */
}
@media (max-width: 380px){
  .dono-nome{ font-size:23px; }
  .telao-valor{ font-size:26px; }
  .mesa-seat{ padding:12px 13px; }
}