/*
 * design-system-santa-brisa.css
 *
 * Design system próprio da Santa Brisa Top — tokens e componentes
 * reutilizáveis. Arquivo NOVO e ADITIVO: não substitui nem remove
 * assets/css/jardim-premium-base.css (herdado de outro projeto e ainda
 * usado por várias telas existentes) — este arquivo é carregado JUNTO,
 * depois dele, e só acrescenta variáveis e classes novas com o prefixo
 * "sb-" para não colidir com nada que já exista.
 *
 * Para adotar em uma tela: incluir este arquivo (ver helpers/ui.php) e
 * usar as classes .sb-* nos elementos novos. Nenhuma tela precisa ser
 * reescrita de uma vez só — dá para adotar card por card.
 */

:root {
    /* ==== Paleta institucional ==== */
    --sb-bg: #F5F1E8;
    --sb-surface: #FFFFFF;
    --sb-surface-dark: #111111;
    --sb-text: #171717;
    --sb-text-muted: #6B6B6B;
    --sb-border: #E7E0D4;
    --sb-yellow: #F4C430;
    --sb-yellow-hover: #DFAF16;
    --sb-danger: #B42318;
    --sb-danger-bg: #FBEAE6;
    --sb-success: #18794E;
    --sb-success-bg: #E8F1EB;
    --sb-warning: #8A5A22;
    --sb-warning-bg: #FBF1E1;

    --sb-radius: 18px;
    --sb-radius-sm: 12px;
    --sb-radius-lg: 26px;
    --sb-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
    --sb-shadow-strong: 0 18px 46px rgba(0, 0, 0, 0.10);
    --sb-transition: all .18s ease-in-out;
    --sb-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ==== Base ==== */
.sb-scope { color: var(--sb-text); }

/* ==== Cards ==== */
.sb-card {
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    box-shadow: var(--sb-shadow);
    padding: 18px;
}

.sb-card--dark {
    background: var(--sb-surface-dark);
    color: #fff;
    border-color: var(--sb-surface-dark);
}

.sb-card--indicador {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-card--indicador .sb-indicador-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sb-text-muted);
}

.sb-card--indicador .sb-indicador-valor {
    font-size: 26px;
    font-weight: 800;
    color: var(--sb-text);
}

.sb-card--acao {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    text-decoration: none;
    color: var(--sb-text);
    transition: var(--sb-transition);
}

.sb-card--acao:hover {
    transform: translateY(-2px);
    box-shadow: var(--sb-shadow-strong);
}

/* ==== Botões ==== */
.sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border-radius: var(--sb-radius-sm);
    font-weight: 700;
    font-size: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: var(--sb-transition);
}

.sb-btn--primary {
    background: var(--sb-surface-dark);
    color: var(--sb-yellow);
    border-color: var(--sb-surface-dark);
}

.sb-btn--primary:hover { background: #000; }

.sb-btn--secondary {
    background: var(--sb-surface);
    color: var(--sb-text);
    border-color: var(--sb-border);
}

.sb-btn--secondary:hover { background: var(--sb-bg); }

.sb-btn--danger {
    background: var(--sb-danger-bg);
    color: var(--sb-danger);
    border-color: transparent;
}

.sb-btn:disabled { opacity: .6; cursor: default; }

/* ==== Inputs ==== */
.sb-input,
.sb-select,
.sb-textarea {
    width: 100%;
    min-height: 46px;
    border-radius: var(--sb-radius-sm);
    border: 1px solid var(--sb-border);
    background: var(--sb-surface);
    color: var(--sb-text);
    padding: 0 14px;
    font-size: 14px;
}

.sb-textarea { padding: 10px 14px; min-height: 90px; }

.sb-input:focus,
.sb-select:focus,
.sb-textarea:focus {
    outline: none;
    border-color: var(--sb-yellow-hover);
    box-shadow: 0 0 0 3px rgba(244, 196, 48, .25);
}

/* ==== Badge / Alerta ==== */
.sb-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--sb-bg);
    color: var(--sb-text);
}

.sb-badge--success { background: var(--sb-success-bg); color: var(--sb-success); }
.sb-badge--danger { background: var(--sb-danger-bg); color: var(--sb-danger); }
.sb-badge--warning { background: var(--sb-warning-bg); color: var(--sb-warning); }

.sb-alert {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: var(--sb-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
}

.sb-alert--success { background: var(--sb-success-bg); color: var(--sb-success); }
.sb-alert--danger { background: var(--sb-danger-bg); color: var(--sb-danger); }
.sb-alert--warning { background: var(--sb-warning-bg); color: var(--sb-warning); }

/* ==== Skeleton loading ==== */
.sb-skeleton {
    background: linear-gradient(90deg, var(--sb-bg) 25%, #efe9db 37%, var(--sb-bg) 63%);
    background-size: 400% 100%;
    animation: sb-skeleton-shine 1.4s ease infinite;
    border-radius: var(--sb-radius-sm);
}

@keyframes sb-skeleton-shine {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

/* ==== Estado vazio ==== */
.sb-empty {
    text-align: center;
    padding: 32px 16px;
    color: var(--sb-text-muted);
}

/* ==== Tabela responsiva -> cards no mobile ====
 * Uso: marcar a tabela existente com class="sb-table-responsive" e cada
 * <td> com data-label="Nome da coluna" — não exige reescrever a tabela,
 * só adicionar esses atributos.
 */
.sb-table-responsive { width: 100%; border-collapse: collapse; }

@media (max-width: 720px) {
    .sb-table-responsive thead { display: none; }
    .sb-table-responsive, .sb-table-responsive tbody, .sb-table-responsive tr, .sb-table-responsive td {
        display: block;
        width: 100%;
    }
    .sb-table-responsive tr {
        margin-bottom: 12px;
        border: 1px solid var(--sb-border);
        border-radius: var(--sb-radius-sm);
        padding: 10px 12px;
        background: var(--sb-surface);
    }
    .sb-table-responsive td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border: 0;
        text-align: right;
    }
    .sb-table-responsive td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--sb-text-muted);
        text-align: left;
    }
}

/* ==== Drawer lateral (menu mobile / carrinho mobile) ==== */
.sb-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, .45);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: var(--sb-transition);
}

.sb-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: min(380px, 92vw);
    background: var(--sb-surface);
    z-index: 1041;
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease-in-out;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
    display: flex;
    flex-direction: column;
    padding: 18px;
    padding-bottom: calc(18px + var(--sb-safe-bottom));
}

.sb-drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; }
.sb-drawer-overlay.is-open { opacity: 1; pointer-events: auto; }

/* ==== Cabeçalho padrão do painel ==== */
.sb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 0;
}

/* ==== Responsividade geral (Etapa 3) ==== */
.sb-scope, .sb-scope * { box-sizing: border-box; }

.sb-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 480px) {
    .sb-grid { grid-template-columns: 1fr; }
    .sb-card { padding: 14px; border-radius: var(--sb-radius-sm); }
    .sb-btn { width: 100%; }
}

/* Evita scroll horizontal indevido em qualquer tela que adote .sb-scope */
.sb-scope { max-width: 100%; overflow-x: hidden; }

/* ==== Botão flutuante do assistente / microfone ==== */
.sb-assistente-fab {
    position: fixed;
    right: 20px;
    bottom: calc(20px + var(--sb-safe-bottom));
    z-index: 1050;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: var(--sb-surface-dark);
    color: var(--sb-yellow);
    border: none;
    box-shadow: var(--sb-shadow-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
}

.sb-assistente-fab:hover { background: #000; }

.sb-mic-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--sb-border);
    background: var(--sb-surface);
    color: var(--sb-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 auto;
}

.sb-mic-btn[data-estado="ouvindo"] {
    background: var(--sb-danger-bg);
    color: var(--sb-danger);
    animation: sb-mic-pulse 1.1s ease-in-out infinite;
}

.sb-mic-btn[data-estado="processando"] { background: var(--sb-warning-bg); color: var(--sb-warning); }
.sb-mic-btn[data-estado="indisponivel"] { opacity: .45; cursor: not-allowed; }

@keyframes sb-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(180, 35, 24, .28); }
    50% { box-shadow: 0 0 0 8px rgba(180, 35, 24, 0); }
}

.sb-ops-summary{margin:18px 0;padding:24px;border:1px solid #e7dfd2;border-radius:22px;background:linear-gradient(135deg,#fff 0%,#fffaf0 100%);box-shadow:0 12px 36px rgba(28,24,18,.08);color:#171512}
.sb-ops-summary__head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.sb-ops-summary__head h2{margin:3px 0 0;font-size:clamp(22px,3vw,34px);letter-spacing:-.04em}.sb-ops-summary__eyebrow{font-size:11px;font-weight:900;letter-spacing:.2em;color:#8a6410}.sb-ops-summary__actions{display:flex;align-items:center;gap:12px;color:#726b62;font-size:12px}.sb-ops-summary__message{font-size:clamp(16px,2vw,20px);line-height:1.55;max-width:1000px;margin:18px 0}.sb-ops-summary__metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.sb-ops-summary__metrics a{display:flex;flex-direction:column;gap:6px;padding:13px 14px;border-radius:14px;background:#fff;border:1px solid #eee5d7;color:#171512;text-decoration:none}.sb-ops-summary__metrics span{font-size:11px;color:#746e66;text-transform:uppercase;letter-spacing:.06em}.sb-ops-summary__metrics strong{font-size:17px}.sb-ops-summary__status{min-height:18px;margin-top:10px;font-size:12px;color:#665f57}
@media(max-width:900px){.sb-ops-summary__metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.sb-ops-summary__head{flex-direction:column}.sb-ops-summary__actions{width:100%;justify-content:space-between}}
@media(max-width:480px){.sb-ops-summary{padding:18px;margin:12px 0;border-radius:17px}.sb-ops-summary__metrics{grid-template-columns:1fr 1fr}.sb-ops-summary__actions{align-items:stretch;flex-direction:column}.sb-ops-summary__actions .sb-btn{width:100%}}