/* =====================================================================
   Xic — Reservas: página de gestão da equipa.
   Pensado para dedos: botões grandes, uma coluna no telemóvel.
   Depende de reservas.css (variáveis de cor e campos).
   ===================================================================== */

.xic-gestao { max-width: 780px; }
.xic-gestao--painel { max-width: 820px; }

/* ---- Topo ---- */
.xic-g-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 2px solid var(--xic-tinta);
}
.xic-reservas .xic-g-topo h2 { margin: 2px 0 4px; font-size: clamp(1.3rem, 4vw, 1.8rem); line-height: 1.15; }
.xic-reservas .xic-g-topo p { margin: 0; }
.xic-g-sair { margin: 0; }

/* ---- Botões pequenos (dias, sair) ---- */
.xic-reservas .xic-g-mini {
  display: inline-block;
  padding: 9px 14px;
  font-family: inherit; font-size: 0.9rem; font-weight: 600;
  color: var(--xic-tinta); background: #fff; text-decoration: none;
  border: 2px solid var(--xic-tinta); border-radius: 4px;
  cursor: pointer; line-height: 1.2; white-space: nowrap;
}
.xic-reservas .xic-g-mini:hover { background: var(--xic-gema); }

.xic-g-dias { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 20px; }
.xic-g-escolher { display: flex; gap: 6px; margin: 0; }
.xic-reservas .xic-g-escolher input[type="date"] { width: auto; padding: 7px 10px; }

/* ---- Cartão de reserva ---- */
.xic-g-cartao {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 4px 14px;
  padding: 14px;
  margin-bottom: 10px;
  background: #fff;
  border: 2px solid var(--xic-tinta);
  border-radius: 4px;
}
.xic-g-cartao[data-estado="cancelada"] { opacity: 0.5; }
.xic-g-cartao[data-estado="compareceu"] { border-color: var(--xic-azulejo); background: #f2f8f9; }

.xic-g-hora {
  grid-row: span 2;
  font-size: 1.5rem; font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.xic-g-quem strong { font-size: 1.05rem; }
.xic-g-pax {
  display: inline-block; margin-left: 6px;
  font-size: 0.85rem; font-weight: 700; color: var(--xic-cinza);
}
.xic-g-etiqueta {
  display: inline-block; margin-left: 6px; padding: 2px 8px;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #fff; background: var(--xic-cinza); border-radius: 3px; vertical-align: middle;
}
.xic-g-etiqueta[data-e="compareceu"] { background: var(--xic-azulejo); }
.xic-g-etiqueta[data-e="cancelada"] { background: var(--xic-destaque); }
.xic-g-etiqueta[data-e="mao"] { background: #fff; color: var(--xic-cinza); border: 1px solid var(--xic-linha); }
.xic-reservas .xic-g-notas {
  margin: 7px 0 0; padding: 7px 10px;
  font-size: 0.9rem; background: #fdf6e3;
  border-left: 3px solid var(--xic-gema);
}

/* ---- Ações ---- */
.xic-g-accoes {
  grid-column: 2; margin: 10px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.xic-reservas .xic-g-accoes button {
  flex: 1 1 auto; min-width: 92px;
  padding: 11px 10px;
  font-family: inherit; font-size: 0.82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--xic-tinta); background: var(--xic-suave);
  border: 2px solid var(--xic-tinta); border-radius: 4px;
  cursor: pointer; box-shadow: none;
}
.xic-reservas .xic-g-accoes button:hover { background: var(--xic-gema); }
.xic-reservas .xic-g-accoes button[value="cancelada"]:hover { background: var(--xic-destaque); color: #fff; }

@media (max-width: 560px) {
  .xic-g-cartao { grid-template-columns: 60px 1fr; padding: 12px; }
  .xic-g-hora { font-size: 1.3rem; }
  .xic-g-accoes { grid-column: 1 / -1; }
  .xic-reservas .xic-g-accoes button { min-width: 0; flex: 1 1 40%; }
}

/* ---- Reserva à mão ---- */
.xic-g-nova {
  margin-top: 24px;
  border: 2px dashed var(--xic-linha);
  border-radius: 4px;
  padding: 0 16px;
  background: var(--xic-suave);
}
.xic-g-nova[open] { padding-bottom: 18px; }
.xic-reservas .xic-g-nova summary {
  padding: 15px 0; cursor: pointer;
  font-weight: 700; font-size: 0.95rem;
  list-style: revert;
}
.xic-reservas .xic-g-nova summary:hover { color: var(--xic-azulejo); }

/* ---- Barra de reserva nova (aparece sozinha) ---- */
.xic-g-novidade {
  margin: 0 0 14px; padding: 13px 16px;
  font-size: 0.95rem; font-weight: 700;
  color: #fff; background: var(--xic-azulejo);
  border: 2px solid var(--xic-tinta); border-radius: 4px;
  cursor: pointer;
}
.xic-g-permitir-linha { margin: 0 0 14px; }
@media (min-width: 700px) { .xic-g-permitir-linha { text-align: right; margin-top: -46px; } }

/* ---- Quando corre como aplicação instalada ---- */
.xic-instalada .xic-g-topo { padding-top: 6px; }

/* =====================================================================
   Abas, contadores e planta
   ===================================================================== */
.xic-g-contadores { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 0; font-size: 0.9rem; }
.xic-g-contadores strong { font-size: 1.05rem; }
.xic-g-alerta { color: var(--xic-destaque); font-weight: 600; }

.xic-g-abas { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 2px solid var(--xic-linha); }
.xic-reservas .xic-g-aba {
  padding: 10px 18px; text-decoration: none;
  font-weight: 700; font-size: 0.92rem; color: var(--xic-cinza);
  border: 2px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0;
  margin-bottom: -2px;
}
.xic-reservas .xic-g-aba[aria-selected="true"] {
  color: var(--xic-tinta); background: var(--xic-suave);
  border-color: var(--xic-linha); border-bottom: 2px solid var(--xic-suave);
}

.xic-g-relogio { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.xic-reservas .xic-g-relogio input[type="time"] { width: auto; padding: 7px 10px; }
.xic-reservas .xic-g-relogio label { margin: 0; }
.xic-g-distribuir { margin: 4px 0 0; }

.xic-g-mesa-form { margin: 9px 0 0; }
.xic-reservas .xic-g-mesa-form select { padding: 8px 10px; font-size: 0.9rem; }
.xic-g-etiqueta[data-e="mesa"] { background: var(--xic-azulejo); }
.xic-g-etiqueta[data-e="sem-mesa"] { background: #fff; color: var(--xic-destaque); border: 1px solid var(--xic-destaque); }

/* =====================================================================
   Aspeto escuro (a app da equipa)
   ===================================================================== */
.xic-gestao--escuro {
  --xic-tinta: #e9e6df;
  --xic-suave: #1c2226;
  --xic-linha: #333c42;
  --xic-cinza: #94a0a6;
  --xic-azulejo: #2c93ab;
  --xic-destaque: #e0553c;
  color: var(--xic-tinta);
}
.xic-gestao--escuro .xic-g-topo { border-bottom-color: #333c42; }
.xic-gestao--escuro .xic-g-cartao {
  background: #1c2226; border-color: #333c42;
}
.xic-gestao--escuro .xic-g-cartao[data-estado="compareceu"] {
  background: #16323a; border-color: var(--xic-azulejo);
}
.xic-gestao--escuro .xic-reservas .xic-g-mini,
.xic-gestao--escuro .xic-g-mini {
  background: #232b30; color: var(--xic-tinta); border-color: #3c464d;
}
.xic-gestao--escuro .xic-g-mini:hover { background: var(--xic-azulejo); color: #0d1114; border-color: var(--xic-azulejo); }
.xic-gestao--escuro .xic-g-accoes button {
  background: #232b30; color: var(--xic-tinta); border-color: #3c464d;
}
.xic-gestao--escuro .xic-g-accoes button:hover { background: var(--xic-azulejo); color: #0d1114; }
.xic-gestao--escuro .xic-g-accoes button[value="cancelada"]:hover { background: var(--xic-destaque); color: #fff; }
.xic-gestao--escuro input, .xic-gestao--escuro select, .xic-gestao--escuro textarea,
.xic-gestao--escuro.xic-reservas input[type="date"],
.xic-gestao--escuro.xic-reservas input[type="time"],
.xic-gestao--escuro.xic-reservas input[type="text"],
.xic-gestao--escuro.xic-reservas input[type="tel"],
.xic-gestao--escuro.xic-reservas input[type="email"],
.xic-gestao--escuro.xic-reservas input[type="number"],
.xic-gestao--escuro.xic-reservas select,
.xic-gestao--escuro.xic-reservas textarea {
  background: #141a1d; color: var(--xic-tinta); border-color: #3c464d;
  color-scheme: dark;
}
.xic-gestao--escuro .xic-g-notas { background: #2a2617; border-left-color: var(--xic-gema); color: #efe6cc; }
.xic-gestao--escuro .xic-aviso { background: #2a2617; color: #efe6cc; }
.xic-gestao--escuro .xic-erro { background: #2f1c19; color: #f4d7d2; }
.xic-gestao--escuro .xic-g-abas { border-bottom-color: #333c42; }
.xic-gestao--escuro .xic-g-aba[aria-selected="true"] {
  background: #1c2226; border-color: #333c42; border-bottom-color: #1c2226; color: var(--xic-tinta);
}
.xic-gestao--escuro .xic-g-nova { background: #1c2226; border-color: #333c42; }
.xic-gestao--escuro .xic-btn { border-color: #0d1114; box-shadow: 4px 4px 0 #0d1114; }
.xic-gestao--escuro .xic-g-etiqueta[data-e="mao"] { background: #232b30; color: var(--xic-cinza); border-color: #3c464d; }
.xic-gestao--escuro .xic-g-etiqueta[data-e="sem-mesa"] { background: transparent; }

/* planta em fundo escuro */
.xic-gestao--escuro .xic-sala {
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 5% 100%,
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 100% 7.14%,
    #141a1d;
  border-color: #333c42;
}
.xic-gestao--escuro .xic-mesa { background: #232b30; border-color: #3c464d; color: var(--xic-tinta); }
.xic-gestao--escuro .xic-mesa__lugares { color: #7f8b91; }
.xic-gestao--escuro .xic-mesa[data-estado="ocupada"] {
  background: var(--xic-azulejo); border-color: #7fd4e6; color: #08171c;
}
.xic-gestao--escuro .xic-mesa[data-estado="ocupada"] .xic-mesa__lugares { color: #08171c; }
.xic-gestao--escuro a { color: var(--xic-azulejo); }
.xic-gestao--escuro .xic-ajuda a { color: var(--xic-azulejo); text-decoration: underline; text-underline-offset: 2px; }