/*
 * WCOVALI TMS — SISTEMA DE DESIGN ÚNICO (WC-DS v1)
 * ------------------------------------------------------------------
 * Camada única de estilo. Substitui, tela a tela, as camadas antigas
 * (wc-visual-v1, wcovali-visual-v2, wcovali-tms-premium-v1/v2-1,
 * wcovali-layout-mestre-v1, dashboard-v3.css e tms-ui-foundation.css).
 *
 * REGRAS DESTE ARQUIVO — não quebrar ao evoluir:
 *  1. Nenhum "!important". Se precisou, a especificidade está errada.
 *  2. Tudo vive dentro do escopo .wc-ds. Nada vaza para telas antigas.
 *  3. Nenhuma medida solta: só variáveis desta folha.
 *  4. Campo, botão, linha de tabela e modal têm altura/largura fixas.
 *
 * Migração: basta acrescentar class="wc-ds" no container da tela e
 * remover as regras antigas daquela tela. Nada de empilhar camada nova.
 */

/* ==================================================================
   1. FICHAS DE DESIGN (design tokens)
   ================================================================== */
.wc-ds{
  /* --- Marca --- */
  --ds-navy-900:#0b1f3f;
  --ds-navy-800:#102a50;
  --ds-navy-700:#173a68;
  --ds-brand-600:#1259b8;
  --ds-brand-500:#1677ed;
  --ds-brand-400:#4593f2;
  --ds-brand-100:#e3effd;
  --ds-brand-50:#f2f7fe;

  /* --- Superfícies --- */
  --ds-canvas:#f4f7fb;
  --ds-surface:#ffffff;
  --ds-surface-2:#f8fafd;
  --ds-surface-3:#eef3f9;

  /* --- Texto --- */
  --ds-text:#16243d;
  --ds-text-2:#4a5a72;
  --ds-text-3:#7a879b;
  --ds-text-inverse:#ffffff;

  /* --- Linhas --- */
  --ds-line:#dce4ee;
  --ds-line-strong:#c3cfdf;

  /* --- Situação --- */
  --ds-ok-600:#0f7a4d;   --ds-ok-100:#e2f5eb;
  --ds-warn-600:#9a6100; --ds-warn-100:#fdf1dc;
  --ds-danger-600:#b42318; --ds-danger-100:#fdeceb;
  --ds-info-600:#1259b8; --ds-info-100:#e3effd;
  --ds-neutral-600:#4a5a72; --ds-neutral-100:#eef2f7;

  /* --- Espaçamento (escala de 4) --- */
  --ds-1:4px; --ds-2:8px;  --ds-3:12px; --ds-4:16px;
  --ds-5:20px; --ds-6:24px; --ds-8:32px; --ds-10:40px; --ds-12:48px;

  /* --- Cantos --- */
  --ds-r-sm:8px; --ds-r-md:12px; --ds-r-lg:16px; --ds-r-full:999px;

  /* --- Sombras --- */
  --ds-shadow-1:0 1px 2px rgba(16,42,80,.06);
  --ds-shadow-2:0 4px 14px rgba(16,42,80,.08);
  --ds-shadow-3:0 18px 48px rgba(11,31,63,.20);

  /* --- Tipografia --- */
  --ds-font:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --ds-fs-xs:11px; --ds-fs-sm:12px; --ds-fs-md:13px;
  --ds-fs-lg:15px; --ds-fs-xl:18px; --ds-fs-2xl:22px; --ds-fs-3xl:28px;

  /* --- Medidas fixas de componente (o coração do padrão) --- */
  --ds-control-h:40px;        /* campo e botão padrão   */
  --ds-control-h-sm:32px;     /* campo e botão pequeno  */
  --ds-control-h-lg:48px;     /* botão de destaque      */
  --ds-row-h:44px;            /* linha de tabela        */
  --ds-modal-sm:480px;
  --ds-modal-md:720px;
  --ds-modal-lg:1040px;
  --ds-modal-xl:1280px;

  --ds-focus:0 0 0 3px rgba(22,119,237,.28);
  --ds-transition:140ms ease;

  font-family:var(--ds-font);
  font-size:var(--ds-fs-md);
  color:var(--ds-text);
  line-height:1.45;
}

.wc-ds *,
.wc-ds *::before,
.wc-ds *::after{box-sizing:border-box}

/* ==================================================================
   2. TIPOGRAFIA
   ================================================================== */
.wc-ds .ds-h1{margin:0;font-size:var(--ds-fs-3xl);font-weight:700;letter-spacing:-.02em;color:var(--ds-navy-900)}
.wc-ds .ds-h2{margin:0;font-size:var(--ds-fs-2xl);font-weight:700;letter-spacing:-.01em;color:var(--ds-navy-900)}
.wc-ds .ds-h3{margin:0;font-size:var(--ds-fs-xl);font-weight:650;color:var(--ds-navy-800)}
.wc-ds .ds-h4{margin:0;font-size:var(--ds-fs-lg);font-weight:650;color:var(--ds-navy-800)}
.wc-ds .ds-text{margin:0;font-size:var(--ds-fs-md);color:var(--ds-text)}
.wc-ds .ds-muted{margin:0;font-size:var(--ds-fs-sm);color:var(--ds-text-3)}
.wc-ds .ds-label-cap{
  display:block;margin:0 0 var(--ds-1);
  font-size:var(--ds-fs-xs);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ds-text-3);
}
.wc-ds .ds-num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ==================================================================
   3. ESTRUTURA DE TELA
   ================================================================== */
/* Sem 'display' de proposito: quem controla a visibilidade e a tela
   hospedeira (.page / .page.active do index.html). */
.wc-ds.ds-screen{padding:var(--ds-6);background:var(--ds-canvas);min-height:100%}
.wc-ds .ds-stack{display:flex;flex-direction:column;gap:var(--ds-4)}
.wc-ds .ds-stack-sm{display:flex;flex-direction:column;gap:var(--ds-2)}
.wc-ds .ds-row{display:flex;align-items:center;gap:var(--ds-3);flex-wrap:wrap}
.wc-ds .ds-row-end{margin-left:auto}

.wc-ds .ds-pageheader{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--ds-4);flex-wrap:wrap;margin-bottom:var(--ds-5);
}

.wc-ds .ds-grid{display:grid;gap:var(--ds-4)}
.wc-ds .ds-grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wc-ds .ds-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.wc-ds .ds-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){
  .wc-ds .ds-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-ds .ds-grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .wc-ds.ds-screen{padding:var(--ds-4)}
  .wc-ds .ds-grid-2,.wc-ds .ds-grid-3,.wc-ds .ds-grid-4{grid-template-columns:minmax(0,1fr)}
}

/* ==================================================================
   4. CARTÃO
   ================================================================== */
.wc-ds .ds-card{
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg);
  box-shadow:var(--ds-shadow-1);
  overflow:hidden;
}
.wc-ds .ds-card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--ds-4);flex-wrap:wrap;
  padding:var(--ds-4) var(--ds-5);
  border-bottom:1px solid var(--ds-line);
  background:var(--ds-surface);
}
.wc-ds .ds-card-body{padding:var(--ds-5)}
.wc-ds .ds-card-body.ds-flush{padding:0}
.wc-ds .ds-card-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--ds-2);
  padding:var(--ds-3) var(--ds-5);
  border-top:1px solid var(--ds-line);
  background:var(--ds-surface-2);
}

/* Indicador numérico */
.wc-ds .ds-stat{
  display:flex;flex-direction:column;gap:var(--ds-2);
  padding:var(--ds-4) var(--ds-5);
  background:var(--ds-surface);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg);
  box-shadow:var(--ds-shadow-1);
}
.wc-ds .ds-stat-value{
  font-size:var(--ds-fs-3xl);font-weight:700;line-height:1.1;
  letter-spacing:-.02em;color:var(--ds-navy-900);
  font-variant-numeric:tabular-nums;
}
.wc-ds .ds-stat-hint{font-size:var(--ds-fs-sm);color:var(--ds-text-3)}

/* ==================================================================
   5. BOTÃO — altura fixa, três tamanhos, cinco intenções
   ================================================================== */
.wc-ds .ds-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-2);
  height:var(--ds-control-h);
  min-width:var(--ds-control-h);
  padding:0 var(--ds-4);
  border:1px solid var(--ds-line-strong);
  border-radius:var(--ds-r-md);
  background:var(--ds-surface);
  color:var(--ds-text);
  font-family:inherit;
  font-size:var(--ds-fs-md);
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:background var(--ds-transition),border-color var(--ds-transition),
             box-shadow var(--ds-transition),color var(--ds-transition);
}
.wc-ds .ds-btn:hover{background:var(--ds-surface-3);border-color:var(--ds-line-strong)}
.wc-ds .ds-btn:focus-visible{outline:none;box-shadow:var(--ds-focus)}
.wc-ds .ds-btn:disabled,
.wc-ds .ds-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}

.wc-ds .ds-btn-sm{height:var(--ds-control-h-sm);padding:0 var(--ds-3);font-size:var(--ds-fs-sm);border-radius:var(--ds-r-sm)}
.wc-ds .ds-btn-lg{height:var(--ds-control-h-lg);padding:0 var(--ds-6);font-size:var(--ds-fs-lg)}
.wc-ds .ds-btn-block{width:100%}

.wc-ds .ds-btn-primary{background:var(--ds-brand-500);border-color:var(--ds-brand-500);color:var(--ds-text-inverse)}
.wc-ds .ds-btn-primary:hover{background:var(--ds-brand-600);border-color:var(--ds-brand-600)}

.wc-ds .ds-btn-secondary{background:var(--ds-brand-50);border-color:var(--ds-brand-100);color:var(--ds-brand-600)}
.wc-ds .ds-btn-secondary:hover{background:var(--ds-brand-100)}

.wc-ds .ds-btn-ghost{background:transparent;border-color:transparent;color:var(--ds-text-2)}
.wc-ds .ds-btn-ghost:hover{background:var(--ds-surface-3);color:var(--ds-text)}

.wc-ds .ds-btn-danger{background:var(--ds-danger-600);border-color:var(--ds-danger-600);color:var(--ds-text-inverse)}
.wc-ds .ds-btn-danger:hover{filter:brightness(.93)}

.wc-ds .ds-btn-icon{width:var(--ds-control-h);padding:0}
.wc-ds .ds-btn-icon.ds-btn-sm{width:var(--ds-control-h-sm)}

/* ==================================================================
   6. CAMPO DE FORMULÁRIO — altura fixa, rótulo, ajuda e erro
   ================================================================== */
.wc-ds .ds-form{display:grid;gap:var(--ds-4)}
.wc-ds .ds-form-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.wc-ds .ds-form-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:700px){
  .wc-ds .ds-form-2,.wc-ds .ds-form-3{grid-template-columns:minmax(0,1fr)}
}
.wc-ds .ds-field-wide{grid-column:1/-1}

.wc-ds .ds-field{display:flex;flex-direction:column;gap:var(--ds-1);min-width:0}
.wc-ds .ds-field>label{
  font-size:var(--ds-fs-sm);font-weight:600;color:var(--ds-text-2);
}
.wc-ds .ds-field>label .ds-req{color:var(--ds-danger-600);margin-left:2px}

.wc-ds .ds-input,
.wc-ds .ds-select,
.wc-ds .ds-textarea{
  width:100%;
  height:var(--ds-control-h);
  padding:0 var(--ds-3);
  border:1px solid var(--ds-line-strong);
  border-radius:var(--ds-r-md);
  background:var(--ds-surface);
  color:var(--ds-text);
  font-family:inherit;
  font-size:var(--ds-fs-md);
  margin:0;
  transition:border-color var(--ds-transition),box-shadow var(--ds-transition);
}
.wc-ds .ds-textarea{height:auto;min-height:88px;padding:var(--ds-3);resize:vertical;line-height:1.5}
.wc-ds .ds-select{
  appearance:none;padding-right:var(--ds-8);cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237a879b' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--ds-3) center;
}
.wc-ds .ds-input::placeholder,
.wc-ds .ds-textarea::placeholder{color:var(--ds-text-3)}

.wc-ds .ds-input:hover,
.wc-ds .ds-select:hover,
.wc-ds .ds-textarea:hover{border-color:var(--ds-brand-400)}

.wc-ds .ds-input:focus,
.wc-ds .ds-select:focus,
.wc-ds .ds-textarea:focus{outline:none;border-color:var(--ds-brand-500);box-shadow:var(--ds-focus)}

.wc-ds .ds-input:disabled,
.wc-ds .ds-select:disabled,
.wc-ds .ds-textarea:disabled{background:var(--ds-surface-3);color:var(--ds-text-3);cursor:not-allowed}

.wc-ds .ds-input.ds-invalid,
.wc-ds .ds-select.ds-invalid,
.wc-ds .ds-textarea.ds-invalid{border-color:var(--ds-danger-600)}
.wc-ds .ds-input.ds-invalid:focus,
.wc-ds .ds-select.ds-invalid:focus,
.wc-ds .ds-textarea.ds-invalid:focus{box-shadow:0 0 0 3px rgba(180,35,24,.22)}

.wc-ds .ds-hint{font-size:var(--ds-fs-xs);color:var(--ds-text-3)}
.wc-ds .ds-error{font-size:var(--ds-fs-xs);font-weight:600;color:var(--ds-danger-600)}

/* Campo com prefixo/sufixo (R$, kg, km) */
.wc-ds .ds-input-group{display:flex;align-items:stretch}
.wc-ds .ds-input-group>.ds-addon{
  display:inline-flex;align-items:center;padding:0 var(--ds-3);
  border:1px solid var(--ds-line-strong);
  background:var(--ds-surface-3);color:var(--ds-text-3);
  font-size:var(--ds-fs-sm);font-weight:600;white-space:nowrap;
}
.wc-ds .ds-input-group>.ds-addon:first-child{border-right:0;border-radius:var(--ds-r-md) 0 0 var(--ds-r-md)}
.wc-ds .ds-input-group>.ds-addon:last-child{border-left:0;border-radius:0 var(--ds-r-md) var(--ds-r-md) 0}
.wc-ds .ds-input-group>.ds-input{border-radius:0}
.wc-ds .ds-input-group>.ds-input:first-child{border-radius:var(--ds-r-md) 0 0 var(--ds-r-md)}
.wc-ds .ds-input-group>.ds-input:last-child{border-radius:0 var(--ds-r-md) var(--ds-r-md) 0}

/* Caixa de marcação e opção */
.wc-ds .ds-check{display:inline-flex;align-items:center;gap:var(--ds-2);cursor:pointer;font-size:var(--ds-fs-md)}
.wc-ds .ds-check input{width:18px;height:18px;accent-color:var(--ds-brand-500);cursor:pointer;margin:0}

/* Chave liga/desliga */
.wc-ds .ds-switch{display:inline-flex;align-items:center;gap:var(--ds-3);cursor:pointer}
.wc-ds .ds-switch input{position:absolute;opacity:0;pointer-events:none}
.wc-ds .ds-switch .ds-switch-track{
  position:relative;width:44px;height:24px;flex:0 0 44px;
  border-radius:var(--ds-r-full);background:var(--ds-line-strong);
  transition:background var(--ds-transition);
}
.wc-ds .ds-switch .ds-switch-track::after{
  content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;
  border-radius:50%;background:var(--ds-surface);box-shadow:var(--ds-shadow-1);
  transition:transform var(--ds-transition);
}
.wc-ds .ds-switch input:checked + .ds-switch-track{background:var(--ds-brand-500)}
.wc-ds .ds-switch input:checked + .ds-switch-track::after{transform:translateX(20px)}
.wc-ds .ds-switch input:focus-visible + .ds-switch-track{box-shadow:var(--ds-focus)}

/* ==================================================================
   7. TABELA — linha de altura fixa, cabeçalho fixo, zebra
   ================================================================== */
.wc-ds .ds-table-wrap{width:100%;overflow:auto;background:var(--ds-surface)}
.wc-ds .ds-table-wrap.ds-table-sticky{max-height:560px}

.wc-ds .ds-table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--ds-fs-md)}
.wc-ds .ds-table thead th{
  position:sticky;top:0;z-index:2;
  height:var(--ds-row-h);
  padding:0 var(--ds-4);
  border-bottom:1px solid var(--ds-line);
  background:var(--ds-surface-3);
  color:var(--ds-text-3);
  font-size:var(--ds-fs-xs);
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:left;
  white-space:nowrap;
}
.wc-ds .ds-table tbody td{
  height:var(--ds-row-h);
  padding:0 var(--ds-4);
  border-bottom:1px solid var(--ds-line);
  color:var(--ds-text);
  vertical-align:middle;
}
.wc-ds .ds-table tbody tr:nth-child(even) td{background:var(--ds-surface-2)}
.wc-ds .ds-table tbody tr:hover td{background:var(--ds-brand-50)}
.wc-ds .ds-table tbody tr:last-child td{border-bottom:0}

.wc-ds .ds-table .ds-t-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.wc-ds .ds-table .ds-t-mid{text-align:center}
.wc-ds .ds-table .ds-t-actions{text-align:right;white-space:nowrap;width:1%}

.wc-ds .ds-table tfoot td{
  height:var(--ds-row-h);
  padding:0 var(--ds-4);
  border-top:1px solid var(--ds-line-strong);
  background:var(--ds-surface-3);
  font-weight:700;
  color:var(--ds-navy-900);
}

/* Célula com duas linhas (nome + detalhe) */
.wc-ds .ds-cell-2{display:flex;flex-direction:column;gap:1px;line-height:1.3;padding:var(--ds-2) 0}
.wc-ds .ds-cell-2 b{font-weight:650}
.wc-ds .ds-cell-2 span{font-size:var(--ds-fs-xs);color:var(--ds-text-3)}

/* Estado vazio */
.wc-ds .ds-empty{
  display:flex;flex-direction:column;align-items:center;gap:var(--ds-2);
  padding:var(--ds-12) var(--ds-5);text-align:center;color:var(--ds-text-3);
}
.wc-ds .ds-empty strong{font-size:var(--ds-fs-lg);color:var(--ds-text-2);font-weight:650}

/* ==================================================================
   8. ETIQUETA DE SITUAÇÃO
   ================================================================== */
.wc-ds .ds-tag{
  display:inline-flex;align-items:center;gap:var(--ds-1);
  height:24px;padding:0 var(--ds-2);
  border-radius:var(--ds-r-sm);
  background:var(--ds-neutral-100);color:var(--ds-neutral-600);
  font-size:var(--ds-fs-xs);font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;
}
.wc-ds .ds-tag-ok{background:var(--ds-ok-100);color:var(--ds-ok-600)}
.wc-ds .ds-tag-warn{background:var(--ds-warn-100);color:var(--ds-warn-600)}
.wc-ds .ds-tag-danger{background:var(--ds-danger-100);color:var(--ds-danger-600)}
.wc-ds .ds-tag-info{background:var(--ds-info-100);color:var(--ds-info-600)}
.wc-ds .ds-tag::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:currentColor;flex:0 0 6px;
}

/* ==================================================================
   9. ABAS
   ================================================================== */
.wc-ds .ds-tabs{
  display:flex;gap:var(--ds-1);
  border-bottom:1px solid var(--ds-line);
  overflow-x:auto;
}
.wc-ds .ds-tab{
  height:var(--ds-control-h);padding:0 var(--ds-4);
  border:0;border-bottom:2px solid transparent;background:transparent;
  color:var(--ds-text-3);font-family:inherit;font-size:var(--ds-fs-md);
  font-weight:600;cursor:pointer;white-space:nowrap;
  transition:color var(--ds-transition),border-color var(--ds-transition);
}
.wc-ds .ds-tab:hover{color:var(--ds-text)}
.wc-ds .ds-tab[aria-selected="true"]{color:var(--ds-brand-600);border-bottom-color:var(--ds-brand-500)}
.wc-ds .ds-tab:focus-visible{outline:none;box-shadow:var(--ds-focus);border-radius:var(--ds-r-sm)}

/* ==================================================================
   10. MODAL — largura fixa por tamanho, só o corpo rola
   ================================================================== */
.wc-ds-overlay{
  position:fixed;inset:0;z-index:12000;
  display:none;align-items:center;justify-content:center;
  padding:var(--ds-6,24px) var(--ds-5,20px);
  background:rgba(11,31,63,.55);
  backdrop-filter:blur(2px);
}
.wc-ds-overlay.ds-open{display:flex}

.wc-ds .ds-modal{
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:var(--ds-modal-md);
  max-width:100%;
  max-height:calc(100dvh - 48px);
  border:1px solid var(--ds-line);
  border-radius:var(--ds-r-lg);
  background:var(--ds-surface);
  box-shadow:var(--ds-shadow-3);
  overflow:hidden;
}
.wc-ds .ds-modal-sm{width:var(--ds-modal-sm)}
.wc-ds .ds-modal-lg{width:var(--ds-modal-lg)}
.wc-ds .ds-modal-xl{width:var(--ds-modal-xl)}

.wc-ds .ds-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ds-4);
  min-height:56px;padding:var(--ds-3) var(--ds-3) var(--ds-3) var(--ds-5);
  border-bottom:1px solid var(--ds-line);
  background:var(--ds-surface);
}
.wc-ds .ds-modal-title{margin:0;font-size:var(--ds-fs-xl);font-weight:650;color:var(--ds-navy-900)}
.wc-ds .ds-modal-sub{margin:2px 0 0;font-size:var(--ds-fs-sm);color:var(--ds-text-3)}

.wc-ds .ds-modal-body{
  padding:var(--ds-5);
  overflow:auto;
  overscroll-behavior:contain;
  background:var(--ds-surface-2);
}
.wc-ds .ds-modal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:var(--ds-2);
  padding:var(--ds-3) var(--ds-5);
  border-top:1px solid var(--ds-line);
  background:var(--ds-surface);
}
.wc-ds .ds-modal-foot .ds-foot-start{margin-right:auto}

@media(max-width:700px){
  .wc-ds-overlay{align-items:flex-end;padding:var(--ds-2,8px)}
  .wc-ds .ds-modal,
  .wc-ds .ds-modal-sm,
  .wc-ds .ds-modal-lg,
  .wc-ds .ds-modal-xl{width:100%;max-height:calc(100dvh - 16px)}
  .wc-ds .ds-modal-body{padding:var(--ds-4)}
}

/* ==================================================================
   11. AVISO EM LINHA
   ================================================================== */
.wc-ds .ds-note{
  display:flex;gap:var(--ds-3);
  padding:var(--ds-3) var(--ds-4);
  border:1px solid var(--ds-line);
  border-left:3px solid var(--ds-text-3);
  border-radius:var(--ds-r-md);
  background:var(--ds-surface-2);
  font-size:var(--ds-fs-md);color:var(--ds-text-2);
}
.wc-ds .ds-note-info{border-left-color:var(--ds-brand-500);background:var(--ds-info-100);color:var(--ds-info-600)}
.wc-ds .ds-note-ok{border-left-color:var(--ds-ok-600);background:var(--ds-ok-100);color:var(--ds-ok-600)}
.wc-ds .ds-note-warn{border-left-color:var(--ds-warn-600);background:var(--ds-warn-100);color:var(--ds-warn-600)}
.wc-ds .ds-note-danger{border-left-color:var(--ds-danger-600);background:var(--ds-danger-100);color:var(--ds-danger-600)}

/* ==================================================================
   12. CARREGANDO
   ================================================================== */
.wc-ds .ds-skeleton{
  height:var(--ds-row-h);border-radius:var(--ds-r-sm);
  background:linear-gradient(90deg,var(--ds-surface-3) 25%,var(--ds-surface-2) 37%,var(--ds-surface-3) 63%);
  background-size:400% 100%;
  animation:ds-shimmer 1.3s ease infinite;
}
@keyframes ds-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}

@media(prefers-reduced-motion:reduce){
  .wc-ds *,.wc-ds *::before,.wc-ds *::after{
    animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms;
  }
}