/* ══════════════════════════════════════════════════════════════
   Comum — CSS compartilhado entre Admin e Site
   Componentes reutilizaveis que aparecem em ambos os contextos.
   ══════════════════════════════════════════════════════════════ */

/* ── Stepper (.stp-*) ──────────────────────────────────────── */
.stp { display: flex; align-items: flex-start; justify-content: center; position: relative; padding: 24px 0 8px; }
.stp::before { content: ''; position: absolute; top: calc(24px + var(--stp-sz, 42px)/2 - 2px); left: 10%; right: 10%; height: 4px; background: #dee2e6; border-radius: 2px; z-index: 0; }
.stp-bar { position: absolute; top: calc(24px + var(--stp-sz, 42px)/2 - 2px); left: 10%; height: 4px; border-radius: 2px; z-index: 1; transition: width .4s ease; }
.stp-node { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; z-index: 2; }
.stp-circle { width: var(--stp-sz, 42px); height: var(--stp-sz, 42px); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; border: 3px solid transparent; transition: all .3s ease; }
.stp-circle.done { background: #0d6efd; color: #fff; border-color: #0d6efd; }
.stp-circle.active { background: #198754; color: #fff; border-color: #198754; animation: stpPulse 2s infinite; }
.stp-circle.pending { background: #fff; color: #adb5bd; border-color: #dee2e6; }
.stp-circle.cancelled { background: #dc3545; color: #fff; border-color: #dc3545; }
.stp-lbl { font-size: .72rem; font-weight: 600; margin-top: 6px; white-space: nowrap; color: #6c757d; }
.stp-lbl.done { color: #0d6efd; }
.stp-lbl.active { color: #198754; }
.stp-lbl.cancelled { color: #dc3545; }
.stp-date { font-size: .6rem; color: #9ca3af; white-space: nowrap; margin-top: 1px; }
@keyframes stpPulse {
    0%   { box-shadow: 0 0 0 0 rgba(25,135,84,.45); }
    70%  { box-shadow: 0 0 0 8px rgba(25,135,84,0); }
    100% { box-shadow: 0 0 0 0 rgba(25,135,84,0); }
}
@media (max-width: 575px) {
    :root { --stp-sz: 34px; }
    .stp-lbl { font-size: .62rem; }
    .stp-date { font-size: .52rem; }
}

/* ── Modal contato (.uni-*) ────────────────────────────────── */
.uni-opcao-contato {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
    border: 2px solid #e9ecef;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 110px;
}
.uni-opcao-contato img,
.uni-opcao-contato i {
    width: 48px; height: 48px; object-fit: contain;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px; flex-shrink: 0;
}
.uni-opcao-contato i { font-size: 2.5rem; }
.uni-opcao-contato:hover { background-color: #f8f9fa; border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.uni-opcao-contato:active { transform: scale(0.97); }
.uni-opcao-contato:focus-visible { outline: 2px solid #0d6efd; outline-offset: 2px; }
.uni-tipo-bloqueado { background-color: #f8f9fa; border: 1px dashed #ced4da; border-radius: 8px; padding: 15px; display: flex; align-items: center; }