/* ============================================================
   PEIXE DA CHICALA — COMPONENTES v2
   ============================================================ */

/* ---------- BOTÕES ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 10px 16px;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    line-height: 1;
    letter-spacing: var(--track-snug);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--t-fast), border-color var(--t-fast),
                color var(--t-fast), box-shadow var(--t-fast),
                transform var(--t-fast);
    user-select: none;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn svg { width: 15px; height: 15px; stroke-width: 2; flex-shrink: 0; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:not(:disabled):active { transform: translateY(1px); }

.btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-deep));
    color: #fff;
    border-color: var(--brand-deep);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .15) inset,
        0 4px 14px var(--brand-glow);
}

.btn-primary:hover {
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .2) inset,
        0 6px 22px var(--brand-glow);
    filter: brightness(1.06);
}

.btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: var(--sh-xs);
}

.btn-secondary:hover {
    background: var(--surface-hover);
    border-color: var(--ink-faint);
}

.btn-ghost {
    background: transparent;
    color: var(--ink-soft);
    border-color: transparent;
}

.btn-ghost:hover { background: var(--surface-hover); color: var(--ink); }

.btn-danger {
    background: var(--err);
    color: #fff;
    border-color: var(--err);
}
.btn-danger:hover { filter: brightness(.94); }

.btn-gold {
    background: linear-gradient(135deg, var(--gold), #C99A40);
    color: #1A1208;
    border-color: #C99A40;
    box-shadow: 0 4px 14px var(--gold-soft);
}

.btn-sm { padding: 7px 12px; font-size: var(--fs-sm); }
.btn-sm svg { width: 13px; height: 13px; }

.btn-lg { padding: 13px 22px; font-size: var(--fs-md); }
.btn-lg svg { width: 16px; height: 16px; }

.btn-block { width: 100%; }

.btn-icon {
    width: 36px; height: 36px;
    padding: 0;
}

.btn-ghost-light {
    background: rgba(255, 255, 255, .08);
    color: #fff;
    border-color: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
}

.btn-ghost-light:hover {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .22);
}

/* ---------- CARDS ---------- */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-base);
}

.card:hover {
    border-color: var(--line-strong);
}

.card-header {
    padding: var(--s-5);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.card-header h2,
.card-header h3 {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    margin: 0;
    letter-spacing: var(--track-snug);
}

.card-header h2 svg,
.card-header h3 svg {
    width: 15px; height: 15px;
    color: var(--ink-mut);
    stroke-width: 2;
}

.card-body { padding: var(--s-5); }

.card-footer {
    padding: var(--s-3) var(--s-5);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    background: var(--surface-2);
}

/* ---------- KPI ---------- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4);
}

.kpi {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    position: relative;
    overflow: hidden;
    transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-base);
}

.kpi:hover {
    border-color: var(--line-strong);
    box-shadow: var(--sh-md);
    transform: translateY(-2px);
}

.kpi-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
}

.kpi-label {
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-mut);
    text-transform: uppercase;
    letter-spacing: var(--track-widest);
}

.kpi-icon {
    width: 30px; height: 30px;
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--t-base);
}

.kpi:hover .kpi-icon { transform: scale(1.08) rotate(-4deg); }

.kpi-icon svg { width: 15px; height: 15px; stroke-width: 2; }

.kpi-icon.is-red   { background: var(--brand-soft); color: var(--brand); }
.kpi-icon.is-green { background: var(--ok-bg);      color: var(--ok); }
.kpi-icon.is-gold  { background: var(--gold-soft);  color: var(--gold); }
.kpi-icon.is-blue  { background: var(--info-bg);    color: var(--info); }

.kpi-value {
    font-family: var(--font-sans);
    font-size: var(--fs-4xl);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-tight);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum", "cv11";
    color: var(--ink);
    line-height: 1;
}

.kpi-value.is-sm { font-size: var(--fs-2xl); }

.kpi-foot {
    font-size: var(--fs-xs);
    color: var(--ink-mut);
    display: flex;
    align-items: center;
    gap: var(--s-1);
    letter-spacing: var(--track-snug);
}

.kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-weight: var(--fw-semibold);
    padding: 2px 7px;
    border-radius: var(--r-full);
    font-size: var(--fs-2xs);
    letter-spacing: var(--track-wide);
}

.kpi-trend.up   { background: var(--ok-bg);   color: var(--ok); }
.kpi-trend.down { background: var(--err-bg);  color: var(--err); }

/* ---------- TILES ---------- */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-3);
}

.tile {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    text-decoration: none;
    color: var(--ink);
    transition: border-color var(--t-fast), background var(--t-fast),
                box-shadow var(--t-fast), transform var(--t-base);
    position: relative;
    overflow: hidden;
}

.tile::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 40%, var(--brand-soft) 100%);
    opacity: 0;
    transition: opacity var(--t-base);
    pointer-events: none;
}

.tile:hover {
    border-color: var(--brand-line);
    background: var(--surface-2);
    box-shadow: var(--sh-sm);
    transform: translateY(-2px);
}

.tile:hover::before { opacity: 1; }

.tile > * { position: relative; z-index: 1; }

.tile-icon {
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    background: var(--brand-soft);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--t-base), background var(--t-fast);
}

.tile:hover .tile-icon {
    transform: scale(1.06) rotate(-3deg);
    background: var(--brand);
    color: #fff;
}

.tile-icon svg { width: 18px; height: 18px; stroke-width: 2; }

.tile-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tile-text strong {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--track-snug);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tile-text span {
    font-size: var(--fs-xs);
    color: var(--ink-mut);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: var(--track-snug);
}

/* ---------- BADGES ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    line-height: 1.4;
    border-radius: var(--r-full);
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
}

.badge::before {
    content: "";
    width: 5px; height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.badge.no-dot::before { display: none; }

.badge-ok      { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.badge-warn    { background: var(--warn-bg); color: var(--warn); border-color: var(--warn-line); }
.badge-err     { background: var(--err-bg);  color: var(--err);  border-color: var(--err-line); }
.badge-info    { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.badge-neutral { background: var(--surface-sunken); color: var(--ink-soft); border-color: var(--line); }
.badge-gold    { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); }
.badge-brand   { background: var(--brand-soft); color: var(--brand); border-color: var(--brand-line); }

/* ---------- INPUTS ---------- */
.form-group { display: flex; flex-direction: column; gap: var(--s-2); }

.form-label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--ink);
    letter-spacing: var(--track-snug);
    display: flex;
    align-items: center;
    gap: var(--s-1);
}

.form-label .req { color: var(--brand); }

.form-hint { font-size: var(--fs-xs); color: var(--ink-mut); }
.form-error { font-size: var(--fs-xs); color: var(--err); font-weight: var(--fw-medium); }

.input, .select, .textarea {
    width: 100%;
    padding: 10px 13px;
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-md);
    transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    appearance: none;
    letter-spacing: var(--track-snug);
}

.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-faint); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }

.input:disabled, .select:disabled, .textarea:disabled {
    background: var(--surface-sunken);
    color: var(--ink-mut);
    cursor: not-allowed;
}

.textarea { min-height: 90px; resize: vertical; line-height: 1.5; }

.select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A8A85' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 38px;
}

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .input { padding-left: 38px; }
.input-wrap .input-icon {
    position: absolute; left: 12px;
    color: var(--ink-mut); pointer-events: none;
    display: flex; align-items: center;
}
.input-wrap .input-icon svg { width: 15px; height: 15px; stroke-width: 2; }

/* ---------- TABELAS ---------- */
.table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: var(--surface);
}

.table { width: 100%; font-size: var(--fs-base); }

.table thead {
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
}

.table th {
    text-align: left;
    padding: 12px var(--s-4);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    color: var(--ink-mut);
    text-transform: uppercase;
    letter-spacing: var(--track-widest);
    white-space: nowrap;
}

.table td {
    padding: 14px var(--s-4);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    letter-spacing: var(--track-snug);
}

.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-hover); }

.table td.is-right { text-align: right; font-variant-numeric: tabular-nums; }
.table th.is-right { text-align: right; }
.table td.is-center { text-align: center; }

.table .cell-strong { font-weight: var(--fw-semibold); }
.table .cell-num { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }

/* ---------- ALERTS ---------- */
.alert {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: var(--fs-base);
    line-height: 1.5;
    letter-spacing: var(--track-snug);
}

.alert svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; stroke-width: 2; }
.alert strong { font-weight: var(--fw-semibold); display: block; margin-bottom: 2px; }

.alert-ok   { background: var(--ok-bg);   border-color: var(--ok-line);   color: var(--ok); }
.alert-warn { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn); }
.alert-err  { background: var(--err-bg);  border-color: var(--err-line);  color: var(--err); }
.alert-info { background: var(--info-bg); border-color: var(--info-line); color: var(--info); }

/* ---------- SECTION ---------- */
.section { display: flex; flex-direction: column; gap: var(--s-4); }

.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--s-4);
    flex-wrap: wrap;
}

.section-title { display: flex; flex-direction: column; gap: 2px; }

.section-title h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: 400;
    letter-spacing: var(--track-tight);
    color: var(--ink);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.section-title h2 svg {
    width: 20px; height: 20px;
    color: var(--brand);
    stroke-width: 2;
}

.section-title p {
    font-size: var(--fs-sm);
    color: var(--ink-soft);
    margin: 0;
    letter-spacing: var(--track-snug);
}

/* ---------- GRID ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }

@media (max-width: 1023px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- TOPBAR BOTÕES ---------- */
.topbar-btn {
    position: relative;
    width: 38px; height: 38px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-soft);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

.topbar-btn:hover {
    background: var(--surface-hover);
    color: var(--ink);
    transform: translateY(-1px);
}

.topbar-btn svg { width: 17px; height: 17px; stroke-width: 2; }

.topbar-btn .dot {
    position: absolute;
    top: 8px; right: 8px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 0 0 2px var(--top-bg);
}

.day-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: 6px 12px;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: var(--track-wide);
    text-transform: uppercase;
}

.day-chip .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.day-chip.is-open {
    background: var(--ok-bg);
    color: var(--ok);
    border-color: var(--ok-line);
}
.day-chip.is-open .dot { background: var(--ok); box-shadow: 0 0 6px var(--ok); }

.day-chip.is-closed {
    background: var(--err-bg);
    color: var(--err);
    border-color: var(--err-line);
}
.day-chip.is-closed .dot { background: var(--err); box-shadow: 0 0 6px var(--err); }

.user-chip {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 4px 10px 4px 4px;
    border-radius: var(--r-full);
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}

.user-chip:hover {
    border-color: var(--brand-line);
    background: var(--surface-2);
    box-shadow: var(--sh-xs);
}

.user-chip-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
    min-width: 0;
}

.user-chip-text strong {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 120px;
    letter-spacing: var(--track-snug);
}

.user-chip-text span {
    font-size: var(--fs-2xs);
    color: var(--ink-mut);
    text-transform: uppercase;
    letter-spacing: var(--track-wider);
    font-weight: var(--fw-semibold);
}

.avatar {
    width: 32px; height: 32px;
    border-radius: var(--r-full);
    background: linear-gradient(135deg, var(--brand), var(--ember));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    flex-shrink: 0;
    letter-spacing: 0;
    box-shadow: 0 2px 8px var(--brand-glow);
}

/* ---------- DROPDOWN ---------- */
.dropdown { position: relative; }

.dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    padding: var(--s-2);
    z-index: var(--z-drop);
    display: none;
    animation: drop-in var(--t-fast);
}

.dropdown.is-open .dropdown-menu { display: block; }

@keyframes drop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 9px 11px;
    font-size: var(--fs-base);
    color: var(--ink);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background var(--t-fast);
    letter-spacing: var(--track-snug);
}

.dropdown-item:hover { background: var(--surface-hover); }
.dropdown-item svg { width: 15px; height: 15px; color: var(--ink-mut); stroke-width: 2; }

.dropdown-item.is-danger { color: var(--err); }
.dropdown-item.is-danger svg { color: var(--err); }

.dropdown-sep {
    height: 1px;
    background: var(--line);
    margin: var(--s-1) 2px;
}

/* ---------- EMPTY STATE ---------- */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--s-3);
    padding: var(--s-12) var(--s-5);
    text-align: center;
    color: var(--ink-mut);
}

.empty-icon {
    width: 52px; height: 52px;
    border-radius: var(--r-full);
    background: var(--surface-sunken);
    color: var(--ink-mut);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--s-1);
}

.empty-icon svg { width: 22px; height: 22px; stroke-width: 1.75; }
.empty h3 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--ink); letter-spacing: var(--track-snug); }
.empty p { font-size: var(--fs-sm); max-width: 380px; }

/* ---------- PAGINAÇÃO ---------- */
.pagination {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    justify-content: center;
}

.pagination a,
.pagination span {
    min-width: 32px;
    height: 32px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    border-radius: var(--r-sm);
    color: var(--ink-soft);
    border: 1px solid transparent;
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
    letter-spacing: var(--track-snug);
}

.pagination a:hover { background: var(--surface-hover); color: var(--ink); }

.pagination .is-current {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 2px 8px var(--brand-glow);
}

/* ---------- TABS ---------- */
.tabs {
    display: flex;
    gap: var(--s-1);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--s-5);
    overflow-x: auto;
}

.tab {
    padding: 11px 14px;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: var(--ink-soft);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--t-fast), border-color var(--t-fast);
    letter-spacing: var(--track-snug);
}

.tab:hover { color: var(--ink); }

.tab.is-active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    font-weight: var(--fw-semibold);
}

/* ---------- MODAL ---------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 10, 11, .5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: var(--s-4);
    animation: fade-in var(--t-base);
}

.modal-backdrop.is-open { display: flex; }

.modal {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    box-shadow: var(--sh-lg);
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow: auto;
    animation: modal-in var(--t-base);
}

.modal-header {
    padding: var(--s-5);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
}

.modal-header h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-2xl);
    font-weight: 400;
    letter-spacing: var(--track-tight);
}

.modal-body { padding: var(--s-5); }

.modal-footer {
    padding: var(--s-4) var(--s-5);
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s-2);
    background: var(--surface-2);
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- TOAST ---------- */
.toast-stack {
    position: fixed;
    top: var(--s-5);
    right: var(--s-5);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    z-index: var(--z-toast);
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink-mut);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lg);
    min-width: 300px;
    max-width: 420px;
    font-size: var(--fs-base);
    animation: toast-in var(--t-base);
    pointer-events: auto;
    letter-spacing: var(--track-snug);
}

.toast.is-ok   { border-left-color: var(--ok); }
.toast.is-err  { border-left-color: var(--err); }
.toast.is-warn { border-left-color: var(--warn); }
.toast.is-info { border-left-color: var(--info); }

.toast svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; stroke-width: 2; }
.toast.is-ok svg   { color: var(--ok); }
.toast.is-err svg  { color: var(--err); }
.toast.is-warn svg { color: var(--warn); }
.toast.is-info svg { color: var(--info); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
/* O atributo hidden vence sempre (um display:flex numa classe anulava-o) */
[hidden] { display: none !important; }

/* ---------- Pesquisa ao escrever (assets/js/pesquisa.js) ---------- */
.pesquisa-lista { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pesquisa-lista .input-wrap { flex: 1 1 260px; max-width: 420px; }
.pesquisa-contagem { font-size: var(--fs-sm); color: var(--ink-mut); white-space: nowrap; }
.pesquisa-dica { font-size: var(--fs-xs); color: var(--ink-faint); margin-left: auto; }
.pesquisa-dica kbd { font: inherit; font-weight: var(--fw-semibold); border: 1px solid var(--line-strong); border-radius: 4px; padding: 0 5px; }
@media (max-width: 640px) { .pesquisa-dica { display: none; } }
tr.pesquisa-vazia td { color: var(--ink-mut); text-align: center; padding: var(--s-5); }

/* ---------- "Já registados com nome parecido" (cadastros) ---------- */
.parecidos { margin-top: 6px; border: 1px solid var(--warn-line); background: var(--warn-bg); border-radius: var(--r-md); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.parecidos.is-igual { border-color: var(--err); background: var(--err-bg, #FDECEA); }
.parecidos-titulo { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--warn); }
.parecidos.is-igual .parecidos-titulo { color: var(--err); }
.parecidos-item { display: flex; justify-content: space-between; gap: var(--s-3); padding: 4px 6px; border-radius: 6px; text-decoration: none; color: var(--ink); font-size: var(--fs-sm); }
a.parecidos-item:hover { background: var(--surface); }
.parecidos-item span { color: var(--ink-mut); font-size: var(--fs-xs); white-space: nowrap; }

/* ---------- Selector de período: Dia | Semana | Mês | Ano (Financeiro, Funcionários, Auditoria, Entregas) ---------- */
.periodo { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.periodo-tipos { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.periodo-tipos a { padding: 8px 14px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink-soft); text-decoration: none; border-right: 1px solid var(--line); }
.periodo-tipos a:last-child { border-right: 0; }
.periodo-tipos a.is-activo { background: var(--brand); color: #fff; }
.periodo-nav { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.periodo-nav strong { font-size: var(--fs-md); color: var(--ink); min-width: 0; }
.periodo-nav .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.periodo-nav form { display: inline-flex; gap: 6px; }
.periodo-nav .input, .periodo-nav .select { height: 34px; padding: 0 10px; width: auto; font-size: var(--fs-sm); }

/* ---------- Sino de notificações (barra de topo) ---------- */
.sino { position: relative; }
.sino-contador { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; font-weight: var(--fw-bold); line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--top-bg, var(--surface)); pointer-events: none; }
.sino.tem-alertas:not(.tem-urgente) .sino-contador { background: var(--warn, #D97706); }
.sino.tem-alertas .sino-botao { color: var(--ink); }
.sino.abanar .sino-botao svg { animation: sino-abanar .9s ease-in-out; transform-origin: 50% 2px; }
@keyframes sino-abanar { 0%,100% { transform: rotate(0); } 15% { transform: rotate(16deg); } 30% { transform: rotate(-14deg); } 45% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .sino.abanar .sino-botao svg { animation: none; } }
.sino-painel { position: absolute; top: calc(100% + 8px); right: 0; width: 360px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); z-index: var(--z-drop); animation: drop-in var(--t-fast); overflow: hidden; }
.sino-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding: 12px 14px; border-bottom: 1px solid var(--line); }
.sino-cabecalho strong { font-size: var(--fs-base); color: var(--ink); }
.sino-cabecalho span { font-size: var(--fs-xs); color: var(--ink-mut); }
.sino-lista { display: flex; flex-direction: column; padding: 6px; max-height: min(420px, 70vh); overflow-y: auto; }
.sino-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: var(--r-md); color: var(--ink); text-decoration: none; transition: background var(--t-fast); }
.sino-item:hover, .sino-item:focus-visible { background: var(--surface-hover); }
.sino-item svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 1px; stroke-width: 2; }
.sino-item.is-err svg { color: var(--err); }
.sino-item.is-warn svg { color: var(--warn, #D97706); }
.sino-item.is-info svg { color: var(--info, #2563EB); }
.sino-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.sino-texto strong { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.sino-texto small { font-size: var(--fs-xs); color: var(--ink-mut); overflow-wrap: anywhere; }
.sino-n { flex: 0 0 auto; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--surface-sunken, var(--surface-hover)); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.sino-item.is-err .sino-n { background: var(--err-bg, #FDECEA); color: var(--err); }
.sino-vazio { margin: 0; padding: 18px 12px; text-align: center; font-size: var(--fs-sm); color: var(--ink-mut); }
@media (max-width: 640px) { .sino-painel { position: fixed; top: 60px; left: 12px; right: 12px; width: auto; max-width: none; } }
@media print { .sino { display: none !important; } }

/* ---------- Chip do utilizador: encolhe com o ecrã ---------- */
.user-chip { min-width: 0; max-width: 100%; }
.user-menu-quem { display: none; flex-direction: column; gap: 2px; padding: 8px 11px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.user-menu-quem strong { font-size: var(--fs-sm); color: var(--ink); overflow-wrap: anywhere; }
.user-menu-quem span { font-size: var(--fs-2xs); color: var(--ink-mut); text-transform: uppercase; letter-spacing: var(--track-wider); font-weight: var(--fw-semibold); }
@media (max-width: 900px) {
    .user-chip-text strong { max-width: 84px; }
}
/* Telemóvel: só a letra (o nome e o perfil aparecem dentro do menu) */
@media (max-width: 640px) {
    .user-chip { padding: 3px; gap: 0; }
    .user-chip-text { display: none; }
    .user-menu-quem { display: flex; }
    .topbar-right { gap: 4px; }
}
@media (max-width: 380px) {
    .user-chip .avatar { width: 30px; height: 30px; font-size: 13px; }
    .topbar-right .topbar-btn { width: 34px; height: 34px; }
}