/* ==========================================================================
   WOC Frontend UI, consistente e parametrizável via CSS variables
   ========================================================================== */

:root{
  --woc-font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --woc-base-font-size:16px;
  --woc-title-font-size:24px;
  --woc-title-weight:700;
  --woc-text-weight:400;
  --woc-button-weight:700;

  --woc-surface-padding:22px;
  --woc-card-padding:14px;
  --woc-grid-cols:2;

  --woc-grafite:#2B2B2B;
  --woc-offwhite:#F5F5F3;
  --woc-cinza:#6F6F6F;
  --woc-acento:#B11E53;
  --woc-acento-hover:#8E1843;

  --woc-border-hex:#2B2B2B;
  --woc-border-opacity:0.18;
  --woc-borda:rgba(43,43,43,.18);
  --woc-raio:14px;

  --woc-card-bg:#FFFFFF;
  --woc-input-bg:#FFFFFF;
  --woc-input-text:#2B2B2B;
  --woc-input-placeholder:#6F6F6F;

  --woc-btn-bg:#2B2B2B;
  --woc-btn-text:#FFFFFF;
  --woc-btn-bg-hover:#1F1F1F;

  --woc-btn-primary-bg:#B11E53;
  --woc-btn-primary-text:#FFFFFF;
  --woc-btn-primary-bg-hover:#8E1843;

  --woc-link-underline:0;
}

/* Base wrapper */
.woc-ui{
  font-family:var(--woc-font-family);
  font-size:var(--woc-base-font-size);
  font-weight:var(--woc-text-weight);
  color:var(--woc-grafite);
}

.woc-surface{
  background:var(--woc-offwhite);
  border:1px solid var(--woc-borda);
  border-radius:var(--woc-raio);
  padding:var(--woc-surface-padding);
  color:var(--woc-grafite);
  box-sizing:border-box;
}

.woc-surface__header{margin-bottom:16px;}

.woc-surface__kicker{
  font-size:12px;
  color:var(--woc-cinza);
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}

.woc-surface__title{
  margin:0;
  font-size:var(--woc-title-font-size);
  line-height:1.2;
  font-weight:var(--woc-title-weight);
}

.woc-surface__subtitle{
  margin:6px 0 0;
  color:var(--woc-cinza);
}

/* Links */
.woc-surface a{
  color:var(--woc-acento);
}

.woc-ui .woc-surface a{
  text-decoration:none;
}

.woc-ui.woc-link-underline-1 .woc-surface a{
  text-decoration:underline;
  text-decoration-thickness:from-font;
  text-decoration-color:rgba(0,0,0,.25);
}

/* Alerts */
.woc-alert{
  border-radius:12px;
  padding:12px 14px;
  margin:14px 0;
  border:1px solid var(--woc-borda);
  background:var(--woc-card-bg);
}

.woc-alert--success{border-color:rgba(17,140,84,.35);}
.woc-alert--error{border-color:rgba(177,30,83,.35);}

/* Forms */
.woc-form{margin-top:14px;}

.woc-grid{
  display:grid;
  grid-template-columns:repeat(var(--woc-grid-cols), minmax(0, 1fr));
  gap:14px;
}

.woc-field{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.woc-field label{
  font-size:13px;
  color:var(--woc-cinza);
}

.woc-field input,
.woc-field select,
.woc-field textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--woc-borda);
  border-radius:12px;
  background:var(--woc-input-bg) !important;
  color:var(--woc-input-text) !important;
  box-sizing:border-box;
  outline:none;
}

/* Reforço de especificidade para vencer tema e page builders */
.woc-ui .woc-field input,
.woc-ui .woc-field select,
.woc-ui .woc-field textarea{
  background:var(--woc-input-bg) !important;
  color:var(--woc-input-text) !important;
  border-color:var(--woc-borda) !important;
}

.woc-field input::placeholder,
.woc-field textarea::placeholder{
  color:var(--woc-input-placeholder) !important;
  opacity:1;
}

.woc-field input:focus,
.woc-field select:focus,
.woc-field textarea:focus{
  border-color:rgba(177,30,83,.6);
  box-shadow:0 0 0 3px rgba(177,30,83,.12);
}

.woc-field input[disabled]{
  opacity:1 !important;
  background:rgba(255,255,255,.55) !important;
  color:var(--woc-grafite) !important;
  -webkit-text-fill-color:var(--woc-grafite) !important;
}

@supports (background: color-mix(in srgb, white 50%, transparent)){
  .woc-field input[disabled]{
    background:color-mix(in srgb, var(--woc-input-bg) 75%, transparent) !important;
  }
}

.woc-help{font-size:12px;color:var(--woc-cinza);}

.woc-divider{
  border:0;
  height:1px;
  background:var(--woc-borda);
  margin:18px 0;
}

/* Checkbox */
.woc-field--checkbox{margin-top:8px;}

.woc-field--checkbox label{
  display:flex;
  gap:10px;
  align-items:flex-start;
  color:var(--woc-grafite);
}

.woc-field--checkbox input{
  width:18px;
  height:18px;
  margin-top:2px;
  accent-color:var(--woc-acento);
}

/* Actions + Buttons */
.woc-actions{margin-top:14px;}

.woc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:var(--woc-raio);
  border:1px solid var(--woc-btn-bg);
  background:var(--woc-btn-bg) !important;
  color:var(--woc-btn-text) !important;
  font-weight:var(--woc-button-weight);
  text-decoration:none;
  cursor:pointer;
  width:100%;
  box-sizing:border-box;
}

.woc-btn:hover{
  background:var(--woc-btn-bg-hover) !important;
  border-color:var(--woc-btn-bg-hover) !important;
}

.woc-btn:disabled{
  opacity:.65;
  cursor:not-allowed;
}

.woc-btn--primary{
  border-color:var(--woc-btn-primary-bg);
  background:var(--woc-btn-primary-bg) !important;
  color:var(--woc-btn-primary-text) !important;
}

.woc-btn--primary:hover{
  background:var(--woc-btn-primary-bg-hover) !important;
  border-color:var(--woc-btn-primary-bg-hover) !important;
  color:var(--woc-btn-primary-text) !important;
}

.woc-btn--ghost{
  width:auto;
  background:transparent !important;
  border-color:var(--woc-borda) !important;
  color:var(--woc-grafite) !important;
}

.woc-btn--ghost:hover{
  background:rgba(0,0,0,.04) !important;
}

/* Tables */
.woc-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid var(--woc-borda);
  border-radius:var(--woc-raio);
  background:var(--woc-card-bg);
}

.woc-table th,
.woc-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--woc-borda);
  text-align:left;
  font-size:14px;
  vertical-align:top;
}

.woc-table th{
  font-weight:600;
  color:var(--woc-grafite);
  background:rgba(245,245,243,.55);
}

@supports (background: color-mix(in srgb, white 50%, black)){
  .woc-table th{
    background:color-mix(in srgb, var(--woc-card-bg) 86%, var(--woc-offwhite));
  }
}

.woc-table tr:last-child td{border-bottom:0;}
.woc-table a{color:var(--woc-acento);}
.woc-table__link{color:var(--woc-acento) !important;text-decoration:underline;}
.woc-table .woc-btn{padding:8px 10px;border-radius:var(--woc-raio);font-size:13px;width:auto;}

/* Cards e atalhos */
.woc-card{
  border:1px solid var(--woc-borda);
  border-radius:var(--woc-raio);
  padding:var(--woc-card-padding);
  background:var(--woc-card-bg);
  box-sizing:border-box;
}

.woc-card__title{
  margin:0 0 6px;
  font-weight:700;
  color:var(--woc-grafite);
}

.woc-card__hint{
  margin:0 0 12px;
  color:var(--woc-cinza);
  font-size:13px;
}

.woc-card__actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

/* Honeypot invisível */
.woc-form .hp-wrap{
  position:absolute !important;
  left:-10000px !important;
  top:-10000px !important;
  height:0 !important;
  width:0 !important;
  overflow:hidden !important;
}

/* KPI e listas rápidas (dashboard loja) */
.woc-kpi-bar{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.woc-kpi-bar__filter{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.woc-kpi-bar__label{
  font-weight:700;
  color:var(--woc-grafite);
}

.woc-kpi-grid{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  flex:1;
}

@media (max-width:900px){
  .woc-kpi-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (max-width:520px){
  .woc-kpi-grid{grid-template-columns:1fr;}
}

.woc-kpi{
  border:1px solid var(--woc-borda);
  border-radius:var(--woc-raio);
  background:var(--woc-card-bg);
  padding:12px;
  box-sizing:border-box;
}

.woc-kpi__label{color:var(--woc-cinza); font-size:13px; font-weight:700;}
.woc-kpi__value{font-size:28px; font-weight:800; color:var(--woc-grafite); line-height:1.1; margin-top:6px;}
.woc-kpi__hint{color:var(--woc-cinza); font-size:12px; margin-top:4px;}

.woc-quick{
  display:grid;
  gap:12px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

@media (max-width:720px){
  .woc-quick{grid-template-columns:1fr;}
  .woc-grid{grid-template-columns:1fr;}
}

.woc-quick__col{
  border:1px solid var(--woc-borda);
  border-radius:var(--woc-raio);
  background:var(--woc-card-bg);
  padding:12px;
  box-sizing:border-box;
}

.woc-quick__title{font-weight:800; margin-bottom:8px;}

.woc-list{list-style:none; padding:0; margin:0;}

.woc-list__item{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:8px 0;
  border-top:1px solid rgba(43,43,43,.10);
}

.woc-list__item:first-child{border-top:0;}
.woc-list__main{font-weight:700;}
.woc-list__meta{color:var(--woc-cinza); font-size:12px; white-space:nowrap;}
.woc-muted{color:var(--woc-cinza);}