/* ═══════════════════════════════════════════════════════════════
   planning-poker.css
   Estilos exclusivos do Planning Poker — Zazen Consultoria
   Depende de: style.css (variáveis, navbar, footer, back-to-top)
   Paleta: teal --z-primary / ouro --z-accent / backgrounds --z-*
   ═══════════════════════════════════════════════════════════════ */

/* ── Layout principal ─────────────────────────────────────────── */
.pp-wrap {
  padding-top:    6rem;
  padding-bottom: 4rem;
  min-height:     calc(100vh - 80px);
}

/* ── Tela de entrada ──────────────────────────────────────────── */
.pp-entry-card {
  background:    var(--z-card);
  border:        1px solid var(--z-border);
  border-radius: var(--radius);
  padding:       2.5rem 2rem;
  max-width:     440px;
  width:         100%;
  margin:        0 auto;
  box-shadow:    0 8px 40px rgba(0, 0, 0, .45);
}

.pp-logo-ring {
  width:          72px;
  height:         72px;
  border-radius:  50%;
  border:         2px solid var(--z-primary);
  display:        flex;
  align-items:    center;
  justify-content: center;
  margin:         0 auto 1.25rem;
  background:     var(--z-primary-glow);
}
.pp-logo-ring img { border-radius: 50%; }

/* ── Abas Nova / Entrar ───────────────────────────────────────── */
.pp-tab-btn {
  flex:        1;
  background:  transparent;
  border:      1px solid var(--z-border);
  color:       var(--z-text-2);
  font-family: var(--font-head);
  font-weight: 500;
  font-size:   .9rem;
  padding:     .65rem 1rem;
  cursor:      pointer;
  transition:  border-color var(--t), background var(--t), color var(--t);
}
.pp-tab-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); border-right: none; }
.pp-tab-btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.pp-tab-btn.active {
  background:   var(--z-primary);
  border-color: var(--z-primary);
  color:        #050D12;
}
.pp-tab-btn:hover:not(.active) {
  border-color: var(--z-border-hover);
  color:        var(--z-primary-light);
}

/* ── Inputs ───────────────────────────────────────────────────── */
.pp-input {
  width:       100%;
  background:  rgba(43, 184, 184, 0.04);
  border:      1px solid var(--z-border);
  border-radius: var(--radius-sm);
  color:       var(--z-text);
  font-family: var(--font-body);
  font-size:   1rem;
  padding:     .65rem 1rem;
  transition:  border-color var(--t), box-shadow var(--t);
}
.pp-input:focus {
  outline:     none;
  border-color: var(--z-primary);
  box-shadow:  0 0 0 3px var(--z-primary-glow);
}
.pp-input::placeholder { color: var(--z-text-muted); }

.pp-story-input {
  background:  rgba(43, 184, 184, 0.04);
  border:      1px solid var(--z-border);
  border-radius: var(--radius-sm);
  color:       var(--z-text);
  font-family: var(--font-body);
  font-size:   .95rem;
  padding:     .6rem .9rem;
  flex:        1;
  min-width:   200px;
  transition:  border-color var(--t), box-shadow var(--t);
}
.pp-story-input:focus {
  outline:     none;
  border-color: var(--z-primary);
  box-shadow:  0 0 0 3px var(--z-primary-glow);
}
.pp-story-input::placeholder { color: var(--z-text-muted); }
.pp-story-input[readonly]    { opacity: .65; cursor: default; }

/* ── Spectator toggle ─────────────────────────────────────────── */
.pp-spectator-toggle {
  display:     flex;
  align-items: center;
  gap:         .5rem;
  font-size:   .85rem;
  color:       var(--z-text-2);
  cursor:      pointer;
  user-select: none;
}
.pp-spectator-toggle input { accent-color: var(--z-primary); }

/* ── Botões da aplicação ──────────────────────────────────────── */
.btn-pp {
  background:   var(--z-primary);
  color:        #050D12;
  border:       none;
  font-family:  var(--font-head);
  font-weight:  700;
  font-size:    .9rem;
  padding:      .55rem 1.4rem;
  border-radius: 50px;
  cursor:       pointer;
  transition:   background var(--t), transform var(--t), box-shadow var(--t);
}
.btn-pp:hover:not(:disabled) {
  background:  var(--z-primary-light);
  transform:   translateY(-2px);
  box-shadow:  0 6px 20px var(--z-primary-glow-strong);
}
.btn-pp:disabled {
  opacity:    .4;
  cursor:     not-allowed;
  transform:  none;
  box-shadow: none;
}

.btn-pp-outline {
  background:   transparent;
  color:        var(--z-primary);
  border:       1.5px solid var(--z-primary);
  font-family:  var(--font-head);
  font-weight:  600;
  font-size:    .9rem;
  padding:      .5rem 1.2rem;
  border-radius: 50px;
  cursor:       pointer;
  transition:   background var(--t), border-color var(--t), color var(--t);
}
.btn-pp-outline:hover {
  background:  var(--z-primary-glow);
  color:       var(--z-primary-light);
}

.btn-pp-sm { font-size: .8rem; padding: .35rem .8rem; }

/* ── Sala — estrutura ─────────────────────────────────────────── */
.pp-room               { display: flex; flex-direction: column; gap: 1.5rem; }

.pp-room-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:   wrap;
  gap:         .75rem;
}

.pp-room-id {
  font-size:   .8rem;
  color:       var(--z-text-2);
  background:  rgba(43, 184, 184, 0.06);
  border:      1px solid var(--z-border);
  border-radius: var(--radius-sm);
  padding:     .25rem .75rem;
  cursor:      pointer;
  transition:  border-color var(--t);
  user-select: none;
}
.pp-room-id:hover        { border-color: var(--z-border-hover); }
.pp-room-id .pp-id-val   { color: var(--z-primary); font-weight: 700; }

/* ── Mesa ─────────────────────────────────────────────────────── */
.pp-table-area {
  display:         flex;
  align-items:     center;
  justify-content: center;
  min-height:      240px;
  padding:         1rem;
}

.pp-table {
  background:    linear-gradient(135deg, #0C1D29, #081520);
  border:        2px solid rgba(43, 184, 184, 0.2);
  border-radius: 60px;
  width:         min(560px, 100%);
  height:        200px;
  display:       flex;
  align-items:   center;
  justify-content: center;
  flex-direction: column;
  gap:           .5rem;
  box-shadow:    0 0 60px rgba(43, 184, 184, 0.12);
}

.pp-table-label {
  font-size:      .78rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:          var(--z-primary);
  opacity:        .75;
}

.pp-table-story {
  font-size:   1rem;
  font-weight: 600;
  color:       var(--z-text);
  text-align:  center;
  padding:     0 2rem;
  max-width:   360px;
  line-height: 1.4;
}

.pp-table-result {
  font-size:   2.4rem;
  font-weight: 700;
  color:       var(--z-primary-light);
  font-family: var(--font-head);
}

.pp-table-avg { font-size: .8rem; color: var(--z-text-2); }

/* ── Jogadores ────────────────────────────────────────────────── */
.pp-players-grid {
  display:         flex;
  flex-wrap:       wrap;
  gap:             1rem;
  justify-content: center;
}

.pp-player {
  display:     flex;
  flex-direction: column;
  align-items: center;
  gap:         .4rem;
  min-width:   80px;
}

.pp-player-avatar {
  width:         48px;
  height:        48px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-weight:   700;
  font-size:     1.1rem;
  font-family:   var(--font-head);
  border:        2px solid var(--z-border);
  transition:    border-color var(--t);
  position:      relative;
}
.pp-player-avatar.voted     { border-color: var(--z-primary); }
.pp-player-avatar.is-me     { border-color: var(--z-accent); }
.pp-player-avatar.spectator { opacity: .5; }

.pp-player-badge {
  position:        absolute;
  bottom:          -4px;
  right:           -4px;
  width:           18px;
  height:          18px;
  border-radius:   50%;
  background:      var(--z-primary);
  color:           #050D12;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       .6rem;
  border:          2px solid var(--z-bg);
}

.pp-player-vote-chip {
  width:           38px;
  height:          54px;
  border-radius:   7px;
  background:      var(--z-card);
  border:          2px solid var(--z-border);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-weight:     700;
  font-size:       1.1rem;
  font-family:     var(--font-head);
  transition:      all var(--t);
}
.pp-player-vote-chip.pending {
  background: repeating-linear-gradient(
    -45deg,
    rgba(43, 184, 184, .06),
    rgba(43, 184, 184, .06) 5px,
    rgba(43, 184, 184, .02) 5px,
    rgba(43, 184, 184, .02) 10px
  );
  border-color: rgba(43, 184, 184, .3);
}
.pp-player-vote-chip.revealed {
  background:  rgba(43, 184, 184, .15);
  border-color: var(--z-primary);
  color:        var(--z-primary-light);
  box-shadow:   0 0 14px var(--z-primary-glow);
  animation:    flipIn .4s ease forwards;
}

.pp-player-name {
  font-size:     .78rem;
  color:         var(--z-text-muted);
  text-align:    center;
  max-width:     80px;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.pp-player-name.is-me { color: var(--z-primary); }

/* ── Cards de votar ───────────────────────────────────────────── */
.pp-cards-section {
  background:    var(--z-card);
  border:        1px solid var(--z-border);
  border-radius: var(--radius);
  padding:       1.5rem;
}

.pp-cards-label {
  font-size:      .82rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color:          var(--z-text-2);
  margin-bottom:  1rem;
  font-family:    var(--font-head);
}

.pp-cards-row {
  display:         flex;
  flex-wrap:       wrap;
  gap:             .6rem;
  justify-content: center;
}

.pp-vote-card {
  width:         72px;
  height:        108px;
  border-radius: 10px;
  border:        2px solid var(--z-border);
  background:    var(--z-bg-alt);
  color:         var(--z-text);
  font-family:   var(--font-head);
  font-size:     1.4rem;
  font-weight:   700;
  cursor:        pointer;
  transition:    border-color var(--t), background var(--t), transform .25s, box-shadow .25s;
  display:       flex;
  align-items:   center;
  justify-content: center;
  user-select:   none;
}
.pp-vote-card:hover:not(:disabled):not(.disabled) {
  border-color: var(--z-border-hover);
  background:   var(--z-primary-glow);
  color:        var(--z-primary-light);
  transform:    translateY(-6px);
  box-shadow:   0 8px 24px var(--z-primary-glow-strong);
}
.pp-vote-card.selected {
  border-color: var(--z-primary);
  background:   rgba(43, 184, 184, .15);
  color:        var(--z-primary-light);
  transform:    translateY(-8px);
  box-shadow:   0 8px 28px var(--z-primary-glow-strong);
}
.pp-vote-card:disabled,
.pp-vote-card.disabled {
  opacity:    .35;
  cursor:     not-allowed;
  transform:  none;
  box-shadow: none;
}

/* ── Controles admin ──────────────────────────────────────────── */
.pp-controls { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ── Timer ────────────────────────────────────────────────────── */
.pp-timer {
  font-size:   1.4rem;
  font-weight: 700;
  font-family: var(--font-head);
  color:       var(--z-text-muted);
  min-width:   52px;
  text-align:  center;
}
.pp-timer.urgent { color: var(--z-accent); }

/* ── Histórico ────────────────────────────────────────────────── */
.pp-history {
  background:    var(--z-card);
  border:        1px solid var(--z-border);
  border-radius: var(--radius);
  overflow:      hidden;
}

.pp-history-header {
  padding:       .85rem 1.25rem;
  border-bottom: 1px solid var(--z-border);
  font-weight:   600;
  font-size:     .9rem;
  display:       flex;
  align-items:   center;
  gap:           .5rem;
  font-family:   var(--font-head);
}

.pp-history-empty {
  padding:    1.5rem;
  text-align: center;
  color:      var(--z-text-muted);
  font-size:  .9rem;
}

.pp-history-item {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  padding:       .65rem 1.25rem;
  border-bottom: 1px solid var(--z-border);
  gap:           1rem;
  font-size:     .88rem;
}
.pp-history-item:last-child { border-bottom: none; }

.pp-history-story {
  color:         var(--z-text);
  flex:          1;
  min-width:     0;
  overflow:      hidden;
  text-overflow: ellipsis;
  white-space:   nowrap;
}
.pp-history-votes { color: var(--z-text-muted); font-size: .8rem; white-space: nowrap; }

.pp-history-chip {
  background:  rgba(43, 184, 184, .15);
  color:       var(--z-primary-light);
  border:      1px solid rgba(43, 184, 184, .3);
  font-weight: 700;
  font-family: var(--font-head);
  padding:     .2rem .65rem;
  border-radius: var(--radius-sm);
  font-size:   .85rem;
  white-space: nowrap;
}
.pp-history-chip.chip-rec {
  background:  var(--z-accent-glow);
  color:       var(--z-accent);
  border-color: rgba(232, 168, 77, .3);
}

/* ── Badges inline ────────────────────────────────────────────── */
.pp-badge {
  font-size:   .72rem;
  padding:     .2rem .55rem;
  border-radius: 20px;
  font-family: var(--font-body);
  font-weight: 600;
}

/* ── Toast ────────────────────────────────────────────────────── */
.pp-toast {
  position:     fixed;
  bottom:       1.5rem;
  right:        1.5rem;
  background:   var(--z-surface);
  border:       1px solid var(--z-primary);
  border-radius: var(--radius-sm);
  padding:      .75rem 1.25rem;
  font-size:    .88rem;
  color:        var(--z-text);
  box-shadow:   0 8px 28px rgba(0, 0, 0, .5);
  z-index:      9000;
  display:      flex;
  align-items:  center;
  gap:          .5rem;
  animation:    ppSlideUp .3s ease;
}

/* ── Animações ────────────────────────────────────────────────── */
@keyframes ppSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes flipIn {
  0%   { transform: rotateY(90deg); opacity: 0; }
  100% { transform: rotateY(0deg);  opacity: 1; }
}

/* ── Responsivo ───────────────────────────────────────────────── */
@media (max-width: 576px) {
  .pp-vote-card    { width: 58px; height: 88px; font-size: 1.1rem; }
  .pp-table        { height: 160px; }
  .pp-entry-card   { padding: 1.75rem 1.25rem; }
}