/* Desenvolvido por: DriveWeb | Rodrigo Soares | © DriveWeb - Todos os direitos reservados */
/* ============================================================
   DW DESIGN SYSTEM — fonte única de verdade visual
   Usado por: modais, popovers, wizards, drawers, toasts.
   Padrão: Stripe/Linear/Vercel — limpo, premium, mobile-first.
   ============================================================ */

:root{
    /* Paleta DriveWeb */
    --dwds-pri:        #5b3fb8;
    --dwds-pri-2:      #7c5cf0;
    --dwds-pri-3:      #9b7af5;
    --dwds-pri-dark:   #4a32a0;
    --dwds-pri-soft:   #f5f3ff;
    --dwds-accent:     #4f8ef7;
    --dwds-success:    #00d68f;
    --dwds-success-d:  #08754f;
    --dwds-warn:       #ffc107;
    --dwds-warn-d:     #b88500;
    --dwds-danger:     #ff5470;
    --dwds-danger-d:   #b51c3a;
    --dwds-wa:         #25D366;
    --dwds-wa-d:       #1ebe5a;

    --dwds-fg-0:       #111827;
    --dwds-fg-1:       #374151;
    --dwds-fg-2:       #6b7280;
    --dwds-fg-3:       #9ca3af;
    --dwds-bg-0:       #ffffff;
    --dwds-bg-1:       #fafafd;
    --dwds-bg-2:       #f5f5fa;
    --dwds-border:     #e5e7eb;
    --dwds-border-2:   #f1f1f5;
    --dwds-overlay:    rgba(15,15,26,.55);

    /* Gradient master (header dos modais, hero, etc) */
    --dwds-grad-pri:   linear-gradient(135deg, #5b3fb8 0%, #7c5cf0 50%, #9b7af5 100%);
    --dwds-grad-success: linear-gradient(135deg, #00d68f 0%, #4f8ef7 100%);

    /* Spacing scale */
    --dwds-sp-1:  4px;
    --dwds-sp-2:  8px;
    --dwds-sp-3:  12px;
    --dwds-sp-4:  16px;
    --dwds-sp-5:  20px;
    --dwds-sp-6:  24px;
    --dwds-sp-8:  32px;

    /* Radius scale */
    --dwds-r-sm:  6px;
    --dwds-r-md:  10px;
    --dwds-r-lg:  14px;
    --dwds-r-xl:  18px;
    --dwds-r-2xl: 24px;
    --dwds-r-pill: 999px;

    /* Shadows */
    --dwds-sh-1: 0 1px 2px rgba(15,15,26,.05);
    --dwds-sh-2: 0 4px 12px rgba(15,15,26,.08);
    --dwds-sh-3: 0 10px 28px rgba(15,15,26,.14);
    --dwds-sh-4: 0 20px 60px rgba(15,15,26,.32);
    --dwds-sh-pri: 0 8px 24px rgba(91,63,184,.30);

    /* Easing & duration */
    --dwds-ease:        cubic-bezier(.4,0,.2,1);
    --dwds-ease-spring: cubic-bezier(.34,1.56,.64,1);
    --dwds-dur-fast:    .15s;
    --dwds-dur-base:    .25s;

    /* Tipografia escala */
    --dwds-fs-xs:  10px;
    --dwds-fs-sm:  12px;
    --dwds-fs-md:  14px;
    --dwds-fs-lg:  16px;
    --dwds-fs-xl:  18px;
    --dwds-fs-2xl: 22px;

    /* Z-index scale */
    --dwds-z-popover: 9000;
    --dwds-z-modal:   9999;
    --dwds-z-toast:   10500;
}

@media (prefers-color-scheme: dark){
    :root{
        --dwds-fg-0:#e7e5f4; --dwds-fg-1:#cbc8e0; --dwds-fg-2:#9ca3af; --dwds-fg-3:#6b7280;
        --dwds-bg-0:#1a1a2e; --dwds-bg-1:#15152a; --dwds-bg-2:#22223a;
        --dwds-border:#2c2c44; --dwds-border-2:#22223a;
    }
}

/* ============================================================
   ANIMAÇÕES BASE (reutilizadas)
   ============================================================ */
@keyframes dwds-fade-in {from{opacity:0}to{opacity:1}}
@keyframes dwds-slide-up {from{transform:translateY(20px) scale(.98);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
@keyframes dwds-slide-down {from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes dwds-spin {to{transform:rotate(360deg)}}
@keyframes dwds-shake {0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-12deg)}40%,80%{transform:rotate(12deg)}}

@media (prefers-reduced-motion: reduce){
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ============================================================
   MODAL — padrão único (overlay + caixa + header gradient + body + actions)
   Aplica-se via: <div class="dwds-modal-bg show"><div class="dwds-modal">…</div></div>
   ============================================================ */
.dwds-modal-bg{
    position:fixed;inset:0;background:var(--dwds-overlay);
    display:none;align-items:center;justify-content:center;
    z-index:var(--dwds-z-modal);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    padding:var(--dwds-sp-4);
    animation:dwds-fade-in var(--dwds-dur-fast) var(--dwds-ease);
}
.dwds-modal-bg.show{display:flex}

.dwds-modal{
    background:var(--dwds-bg-0);
    border-radius:var(--dwds-r-xl);
    width:100%;max-width:520px;
    max-height:92vh;
    display:flex;flex-direction:column;
    overflow:hidden;
    box-shadow:var(--dwds-sh-4);
    animation:dwds-slide-up var(--dwds-dur-base) var(--dwds-ease);
}
.dwds-modal--sm{max-width:380px}
.dwds-modal--md{max-width:520px}
.dwds-modal--lg{max-width:720px}
.dwds-modal--xl{max-width:920px}

.dwds-modal-head{
    background:var(--dwds-grad-pri);color:#fff;
    padding:var(--dwds-sp-5) var(--dwds-sp-6);
    display:flex;align-items:center;gap:var(--dwds-sp-3);
    position:relative;
}
.dwds-modal-head h3, .dwds-modal-head .h3{
    margin:0;font-size:var(--dwds-fs-xl);font-weight:700;line-height:1.2;
}
.dwds-modal-head .sub{
    opacity:.92;font-size:var(--dwds-fs-sm);margin-top:2px;
    display:flex;gap:var(--dwds-sp-2);align-items:center;flex-wrap:wrap;
}
.dwds-modal-head .badge{
    background:rgba(255,255,255,.22);padding:2px 8px;
    border-radius:var(--dwds-r-md);font-size:var(--dwds-fs-xs);
    font-weight:700;letter-spacing:.5px;text-transform:uppercase;
}

.dwds-modal-close{
    position:absolute;top:14px;right:14px;
    background:rgba(255,255,255,.18);border:0;color:#fff;
    width:32px;height:32px;border-radius:50%;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;
    transition:background var(--dwds-dur-fast);
}
.dwds-modal-close:hover{background:rgba(255,255,255,.34)}
.dwds-modal-close:focus-visible{outline:2px solid #fff;outline-offset:2px}

.dwds-modal-body{
    padding:var(--dwds-sp-5) var(--dwds-sp-6);
    overflow-y:auto;flex:1;
}
.dwds-modal-actions{
    display:grid;grid-template-columns:1fr 1fr;gap:var(--dwds-sp-2);
    padding:var(--dwds-sp-4) var(--dwds-sp-6);
    background:var(--dwds-bg-1);
    border-top:1px solid var(--dwds-border-2);
}
.dwds-modal-actions--single{grid-template-columns:1fr}
.dwds-modal-actions--three{grid-template-columns:repeat(3,1fr)}

/* Avatar circular do header */
.dwds-modal-avatar{
    width:54px;height:54px;border-radius:50%;flex-shrink:0;
    background:rgba(255,255,255,.22);color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:var(--dwds-fs-2xl);
    border:2px solid rgba(255,255,255,.3);
}

/* ============================================================
   POPOVER — padrão único (sino, dropdowns, menus contextuais)
   ============================================================ */
.dwds-popover{
    position:absolute;
    background:var(--dwds-bg-0);
    border:1px solid var(--dwds-border);
    border-radius:var(--dwds-r-lg);
    box-shadow:var(--dwds-sh-3);
    z-index:var(--dwds-z-popover);
    overflow:hidden;
    display:flex;flex-direction:column;
    animation:dwds-slide-down var(--dwds-dur-fast) var(--dwds-ease);
}
.dwds-popover-head{
    background:var(--dwds-grad-pri);color:#fff;
    padding:var(--dwds-sp-3) var(--dwds-sp-4);
    display:flex;align-items:center;justify-content:space-between;
    font-size:var(--dwds-fs-md);font-weight:700;
}

/* ============================================================
   BOTÕES — padrão único, mesmo radius/altura/transição
   ============================================================ */
.dwds-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:var(--dwds-sp-2);
    padding:11px 16px;
    border-radius:var(--dwds-r-md);
    border:0;cursor:pointer;
    font-size:var(--dwds-fs-md);font-weight:600;
    font-family:inherit;line-height:1;
    text-decoration:none;
    transition:transform var(--dwds-dur-fast), box-shadow var(--dwds-dur-fast),
               background var(--dwds-dur-fast), opacity var(--dwds-dur-fast);
    white-space:nowrap;
}
.dwds-btn:active{transform:scale(.97)}
.dwds-btn:disabled, .dwds-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.dwds-btn:focus-visible{outline:2px solid var(--dwds-pri);outline-offset:2px}

.dwds-btn--pri{background:var(--dwds-pri);color:#fff}
.dwds-btn--pri:hover{background:var(--dwds-pri-dark);box-shadow:var(--dwds-sh-pri)}

.dwds-btn--wa{background:var(--dwds-wa);color:#fff}
.dwds-btn--wa:hover{background:var(--dwds-wa-d);box-shadow:0 4px 12px rgba(37,211,102,.4)}

.dwds-btn--success{background:var(--dwds-success);color:#fff}
.dwds-btn--success:hover{filter:brightness(1.08)}

.dwds-btn--ghost{background:transparent;color:var(--dwds-fg-1);border:1px solid var(--dwds-border)}
.dwds-btn--ghost:hover{background:var(--dwds-bg-2);border-color:var(--dwds-pri);color:var(--dwds-pri)}

.dwds-btn--danger{background:transparent;color:var(--dwds-danger-d);border:1px solid var(--dwds-border)}
.dwds-btn--danger:hover{background:rgba(255,84,112,.08);border-color:var(--dwds-danger)}

.dwds-btn--sm{padding:7px 12px;font-size:var(--dwds-fs-sm)}
.dwds-btn--lg{padding:14px 22px;font-size:var(--dwds-fs-lg)}

/* ============================================================
   INPUTS — padrão único, focus ring consistente
   ============================================================ */
.dwds-input, .dwds-select, .dwds-textarea{
    width:100%;
    padding:11px 14px;
    background:var(--dwds-bg-0);
    border:1px solid var(--dwds-border);
    border-radius:var(--dwds-r-md);
    font-size:var(--dwds-fs-md);
    color:var(--dwds-fg-0);
    font-family:inherit;
    transition:border-color var(--dwds-dur-fast), box-shadow var(--dwds-dur-fast);
}
.dwds-input:hover, .dwds-select:hover, .dwds-textarea:hover{border-color:var(--dwds-fg-3)}
.dwds-input:focus, .dwds-select:focus, .dwds-textarea:focus{
    outline:0;border-color:var(--dwds-pri);
    box-shadow:0 0 0 3px rgba(91,63,184,.12);
}
.dwds-input::placeholder{color:var(--dwds-fg-3)}
.dwds-input[readonly]{background:var(--dwds-bg-2);color:var(--dwds-fg-1)}

.dwds-label{
    display:block;font-size:var(--dwds-fs-sm);font-weight:600;
    color:var(--dwds-fg-1);margin-bottom:var(--dwds-sp-2);
}
.dwds-help{font-size:var(--dwds-fs-xs);color:var(--dwds-fg-3);margin-top:4px}
.dwds-field{margin-bottom:var(--dwds-sp-4)}

/* ============================================================
   ESTADO BADGES — pill com ícone opcional
   ============================================================ */
.dwds-badge{
    display:inline-flex;align-items:center;gap:4px;
    padding:3px 9px;border-radius:var(--dwds-r-md);
    font-size:var(--dwds-fs-xs);font-weight:700;
    text-transform:uppercase;letter-spacing:.4px;
}
.dwds-badge--success{background:rgba(0,214,143,.15);color:var(--dwds-success-d)}
.dwds-badge--info{background:rgba(79,142,247,.15);color:#2a5dbf}
.dwds-badge--warn{background:rgba(255,193,7,.20);color:var(--dwds-warn-d)}
.dwds-badge--danger{background:rgba(255,84,112,.15);color:var(--dwds-danger-d)}
.dwds-badge--neutral{background:var(--dwds-bg-2);color:var(--dwds-fg-1)}

/* ============================================================
   ROW · LINHA DE INFO (reutilizado em modal cliente, marcação, etc)
   ============================================================ */
.dwds-row{
    display:flex;align-items:center;gap:var(--dwds-sp-3);
    padding:11px 0;border-bottom:1px solid var(--dwds-border-2);
}
.dwds-row:last-child{border-bottom:0}
.dwds-row .dwds-row-ico{
    width:32px;height:32px;border-radius:9px;
    background:var(--dwds-pri-soft);color:var(--dwds-pri);
    display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
    font-size:15px;
}
.dwds-row .dwds-row-lbl{
    font-size:var(--dwds-fs-xs);color:var(--dwds-fg-3);
    text-transform:uppercase;letter-spacing:.4px;font-weight:600;
}
.dwds-row .dwds-row-val{
    font-size:var(--dwds-fs-md);color:var(--dwds-fg-0);
    font-weight:600;margin-top:1px;word-break:break-word;
}
.dwds-row .dwds-row-val a{color:var(--dwds-pri);text-decoration:none}
.dwds-row .dwds-row-val a:hover{text-decoration:underline}

/* ============================================================
   STATS GRID (4 colunas, headers de modal)
   ============================================================ */
.dwds-stats{
    display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:var(--dwds-border);border-bottom:1px solid var(--dwds-border);
}
.dwds-stat{background:var(--dwds-bg-0);padding:10px 4px;text-align:center}
.dwds-stat .n{font-size:var(--dwds-fs-xl);font-weight:700;color:var(--dwds-pri);line-height:1}
.dwds-stat .l{font-size:9px;color:var(--dwds-fg-2);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}

/* ============================================================
   WIZARD — passos consistentes
   ============================================================ */
.dwds-wiz-steps{
    display:flex;align-items:center;justify-content:center;gap:var(--dwds-sp-2);
    padding:var(--dwds-sp-4);background:var(--dwds-bg-1);
    border-bottom:1px solid var(--dwds-border-2);
}
.dwds-wiz-step{
    display:flex;align-items:center;gap:var(--dwds-sp-2);
    color:var(--dwds-fg-3);font-size:var(--dwds-fs-sm);font-weight:600;
}
.dwds-wiz-step .dot{
    width:24px;height:24px;border-radius:50%;
    background:var(--dwds-bg-2);color:var(--dwds-fg-3);
    display:inline-flex;align-items:center;justify-content:center;
    font-size:11px;font-weight:700;
    transition:all var(--dwds-dur-fast);
}
.dwds-wiz-step.active{color:var(--dwds-pri)}
.dwds-wiz-step.active .dot{background:var(--dwds-pri);color:#fff;box-shadow:0 0 0 4px rgba(91,63,184,.18)}
.dwds-wiz-step.done .dot{background:var(--dwds-success);color:#fff}
.dwds-wiz-step .sep{width:24px;height:2px;background:var(--dwds-border)}

/* ============================================================
   LOADING SPINNER consistente
   ============================================================ */
.dwds-loading{padding:60px 20px;text-align:center;color:var(--dwds-fg-3);font-size:var(--dwds-fs-md)}
.dwds-loading::before{
    content:'';display:block;width:24px;height:24px;
    border:3px solid var(--dwds-border);border-top-color:var(--dwds-pri);
    border-radius:50%;
    animation:dwds-spin .8s linear infinite;
    margin:0 auto 12px;
}

/* ============================================================
   RESPONSIVE — mobile-first
   ============================================================ */
@media (max-width: 600px){
    .dwds-modal{max-width:96%;max-height:96vh;border-radius:var(--dwds-r-lg)}
    .dwds-modal-head{padding:var(--dwds-sp-4)}
    .dwds-modal-body{padding:var(--dwds-sp-4)}
    .dwds-modal-actions{padding:var(--dwds-sp-3) var(--dwds-sp-4);grid-template-columns:1fr}
    .dwds-modal-actions--three{grid-template-columns:1fr 1fr}
    .dwds-popover{max-width:calc(100vw - 12px) !important;border-radius:var(--dwds-r-md)}
    .dwds-stats{grid-template-columns:repeat(4,1fr)}
    .dwds-stat .n{font-size:var(--dwds-fs-lg)}
}

/* ============================================================
   COMPATIBILIDADE — alias para classes antigas (não quebrar JS existente)
   ============================================================ */
.dwag-cm-bg{position:fixed;inset:0;background:var(--dwds-overlay);display:none;align-items:center;justify-content:center;z-index:var(--dwds-z-modal);backdrop-filter:blur(6px);padding:var(--dwds-sp-4);animation:dwds-fade-in var(--dwds-dur-fast) var(--dwds-ease)}
.dwag-cm-bg.show{display:flex}
.dwag-cm{background:var(--dwds-bg-0);border-radius:var(--dwds-r-xl);width:100%;max-width:520px;max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--dwds-sh-4);animation:dwds-slide-up var(--dwds-dur-base) var(--dwds-ease)}
.dwag-cm-head{background:var(--dwds-grad-pri)}
.dwag-cm-actions{background:var(--dwds-bg-1);border-top:1px solid var(--dwds-border-2)}
.dwag-cm-btn{font-family:inherit}
.dwag-cm-btn.wa{background:var(--dwds-wa)}
.dwag-cm-btn.wa:hover{background:var(--dwds-wa-d)}
.dwag-cm-btn.tel{background:var(--dwds-pri)}
.dwag-cm-btn.tel:hover{background:var(--dwds-pri-dark)}

.dwag-notif-popover{background:var(--dwds-bg-0);border:1px solid var(--dwds-border);border-radius:var(--dwds-r-lg);box-shadow:var(--dwds-sh-3);z-index:var(--dwds-z-popover);overflow:hidden;animation:dwds-slide-down var(--dwds-dur-fast) var(--dwds-ease)}
.dwag-notif-head{background:var(--dwds-grad-pri)}