/* ============================================================
   chinaco-ui.css — Design System único China&Co (v1, 18/07/2026)
   Fase 1 do blueprint de unificação. Uma fachada para todas as telas.
   A marca já existia refeita 8 vezes; aqui ela vira um arquivo só.
   Uso: <link rel="stylesheet" href="/chinaco-ui.css">
   ============================================================ */

:root{
  /* --- Marca (oficial, não inventar) --- */
  --cc-rose:#FF5990;
  --cc-coral:#FF6E54;
  --cc-grad:linear-gradient(135deg,#FF5990 0%,#FF6E54 100%);
  --cc-rose-ink:#D63570;          /* rosa escuro p/ texto sobre claro (contraste AA) */
  --cc-rose-wash:#FFF0F5;         /* fundo rosa clarinho */

  /* --- Neutros (paleta canônica light — a do cluster painel/CRM/compras) --- */
  --cc-ink:#1A1625;               /* texto forte */
  --cc-ink-2:#3A3547;             /* texto médio */
  --cc-mute:#6B6577;              /* texto suave (AA sobre branco) */
  --cc-line:#E7E4EC;              /* bordas/hairline */
  --cc-bg:#F7F6F8;                /* fundo da página */
  --cc-surface:#FFFFFF;           /* cartões/superfícies */
  --cc-surface-2:#FBFAFC;         /* superfície secundária */

  /* --- Estado --- */
  --cc-ok:#1F9D6B; --cc-ok-wash:#E7F7F0;
  --cc-warn:#C77D14; --cc-warn-wash:#FCF3E5;
  --cc-err:#DB3B4B; --cc-err-wash:#FCECEE;
  --cc-info:#2563EB; --cc-info-wash:#EAF1FE;

  /* --- Tipografia --- */
  --cc-serif:'Fraunces',Georgia,serif;
  --cc-sans:'DM Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  --cc-cjk:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --cc-mono:'DM Mono',ui-monospace,'SF Mono',monospace;

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

  /* --- Raio / sombra --- */
  --cc-r-sm:8px; --cc-r:12px; --cc-r-lg:16px; --cc-r-pill:100px;
  --cc-sh-1:0 1px 2px rgba(26,22,37,.06),0 1px 3px rgba(26,22,37,.10);
  --cc-sh-2:0 8px 24px rgba(26,22,37,.10);
  --cc-sh-3:0 20px 48px rgba(26,22,37,.16);

  /* --- z-index semântico (fim dos 9999 aleatórios) --- */
  --cc-z-base:1; --cc-z-sticky:100; --cc-z-dropdown:200; --cc-z-modal-back:300; --cc-z-modal:400; --cc-z-toast:500; --cc-z-tooltip:600; --cc-z-gate:2147483000;

  --cc-ease:cubic-bezier(.22,1,.36,1);
}

/* Idioma: telas bilíngues alternam .cc-pt / .cc-cn */
:lang(zh),.cc-cn{font-family:var(--cc-cjk)}
html.cc-show-pt .cc-cn{display:none}
html.cc-show-cn .cc-pt{display:none}

/* --- Base --- */
.cc-app{margin:0;font-family:var(--cc-sans);background:var(--cc-bg);color:var(--cc-ink-2);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
.cc-app *{box-sizing:border-box}
.cc-app h1,.cc-app h2,.cc-app h3{font-family:var(--cc-serif);color:var(--cc-ink);font-weight:500;letter-spacing:-.01em;line-height:1.15;margin:0}
.cc-app a{color:var(--cc-rose-ink);text-decoration:none}
.cc-app a:hover{text-decoration:underline}
.cc-muted{color:var(--cc-mute)}
.cc-mono{font-family:var(--cc-mono);font-size:.92em}

/* --- Botão --- */
.cc-btn{display:inline-flex;align-items:center;gap:var(--cc-2);font-family:var(--cc-sans);font-size:14px;font-weight:600;padding:10px 18px;border-radius:var(--cc-r-sm);border:1px solid transparent;cursor:pointer;transition:transform .15s var(--cc-ease),box-shadow .2s,background .2s,border-color .2s;line-height:1}
.cc-btn:active{transform:translateY(1px)}
.cc-btn-primary{background:var(--cc-grad);color:#fff}
.cc-btn-primary:hover{box-shadow:var(--cc-sh-2)}
.cc-btn-ghost{background:var(--cc-surface);color:var(--cc-ink);border-color:var(--cc-line)}
.cc-btn-ghost:hover{border-color:var(--cc-rose);color:var(--cc-rose-ink)}
.cc-btn-danger{background:var(--cc-err);color:#fff}
.cc-btn:disabled{opacity:.5;cursor:not-allowed}

/* --- Input + validação inline --- */
.cc-field{display:block;margin-bottom:var(--cc-4)}
.cc-label{display:block;font-size:12px;font-weight:600;color:var(--cc-ink-2);margin-bottom:var(--cc-2)}
.cc-input,.cc-select,.cc-textarea{width:100%;padding:10px 12px;border:1px solid var(--cc-line);border-radius:var(--cc-r-sm);font-size:14px;font-family:inherit;color:var(--cc-ink);background:var(--cc-surface);transition:border-color .2s,box-shadow .2s}
.cc-input:focus,.cc-select:focus,.cc-textarea:focus{outline:none;border-color:var(--cc-rose);box-shadow:0 0 0 3px rgba(255,89,144,.15)}
.cc-input:invalid:not(:placeholder-shown){border-color:var(--cc-err)}
.cc-input[aria-invalid="true"]{border-color:var(--cc-err);box-shadow:0 0 0 3px rgba(219,59,75,.12)}
.cc-hint{font-size:12px;color:var(--cc-mute);margin-top:var(--cc-1)}
.cc-error-msg{font-size:12px;color:var(--cc-err);margin-top:var(--cc-1);min-height:15px}

/* --- Card (sem nested cards, sem side-stripe) --- */
.cc-card{background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:var(--cc-r-lg);padding:var(--cc-6);box-shadow:var(--cc-sh-1)}
.cc-card-h{font-family:var(--cc-serif);font-size:18px;color:var(--cc-ink);margin-bottom:var(--cc-3)}

/* --- Chip / badge --- */
.cc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--cc-r-pill);background:var(--cc-surface-2);color:var(--cc-ink-2);border:1px solid var(--cc-line)}
.cc-chip-ok{background:var(--cc-ok-wash);color:var(--cc-ok);border-color:transparent}
.cc-chip-warn{background:var(--cc-warn-wash);color:var(--cc-warn);border-color:transparent}
.cc-chip-err{background:var(--cc-err-wash);color:var(--cc-err);border-color:transparent}
.cc-chip-brand{background:var(--cc-rose-wash);color:var(--cc-rose-ink);border-color:transparent}

/* --- Kanban coluna --- */
.cc-kcol{background:var(--cc-surface-2);border:1px solid var(--cc-line);border-radius:var(--cc-r);padding:var(--cc-3);min-width:260px}
.cc-kcol-h{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cc-mute);margin-bottom:var(--cc-3)}
.cc-kcard{background:var(--cc-surface);border:1px solid var(--cc-line);border-radius:var(--cc-r-sm);padding:var(--cc-3);margin-bottom:var(--cc-2);box-shadow:var(--cc-sh-1);cursor:pointer;transition:border-color .2s,transform .15s var(--cc-ease)}
.cc-kcard:hover{border-color:var(--cc-rose);transform:translateY(-2px)}

/* --- Empty state honesto (não "vazio que mente") --- */
.cc-empty{text-align:center;padding:var(--cc-10) var(--cc-4);color:var(--cc-mute)}
.cc-empty .cc-empty-ico{font-size:28px;opacity:.5;margin-bottom:var(--cc-3)}
.cc-empty .cc-empty-t{font-family:var(--cc-serif);font-size:16px;color:var(--cc-ink-2);margin-bottom:var(--cc-1)}
.cc-empty-err{color:var(--cc-err)}   /* estado de ERRO é distinto de "sem dados" */

/* --- Loading --- */
.cc-loading{display:inline-block;width:18px;height:18px;border:2px solid var(--cc-line);border-top-color:var(--cc-rose);border-radius:50%;animation:cc-spin .7s linear infinite}
@keyframes cc-spin{to{transform:rotate(360deg)}}
.cc-skel{background:linear-gradient(90deg,var(--cc-surface-2) 25%,var(--cc-line) 37%,var(--cc-surface-2) 63%);background-size:400% 100%;animation:cc-shimmer 1.4s infinite;border-radius:var(--cc-r-sm)}
@keyframes cc-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* --- Toast (feedback: fim do alert() de 2010) --- */
.cc-toasts{position:fixed;bottom:var(--cc-6);right:var(--cc-6);z-index:var(--cc-z-toast);display:flex;flex-direction:column;gap:var(--cc-2)}
.cc-toast{background:var(--cc-ink);color:#fff;padding:12px 16px;border-radius:var(--cc-r-sm);box-shadow:var(--cc-sh-3);font-size:14px;display:flex;align-items:center;gap:var(--cc-2);animation:cc-slide .3s var(--cc-ease)}
.cc-toast-ok{background:var(--cc-ok)}.cc-toast-err{background:var(--cc-err)}.cc-toast-warn{background:var(--cc-warn)}
@keyframes cc-slide{from{transform:translateX(20px);opacity:0}to{transform:none;opacity:1}}

/* --- Tabela --- */
.cc-table{width:100%;border-collapse:collapse;font-size:14px}
.cc-table th{text-align:left;font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--cc-mute);padding:10px 12px;border-bottom:1px solid var(--cc-line)}
.cc-table td{padding:12px;border-bottom:1px solid var(--cc-line);color:var(--cc-ink-2)}
.cc-table tr:hover td{background:var(--cc-surface-2)}

/* --- KPI --- */
.cc-kpi .cc-kpi-n{font-family:var(--cc-serif);font-size:32px;color:var(--cc-ink);line-height:1}
.cc-kpi .cc-kpi-l{font-size:12px;color:var(--cc-mute);margin-top:var(--cc-1)}

/* --- Modal --- */
.cc-modal-back{position:fixed;inset:0;background:rgba(26,22,37,.5);z-index:var(--cc-z-modal-back);display:flex;align-items:center;justify-content:center;padding:var(--cc-4)}
.cc-modal{background:var(--cc-surface);border-radius:var(--cc-r-lg);box-shadow:var(--cc-sh-3);max-width:520px;width:100%;padding:var(--cc-8);z-index:var(--cc-z-modal)}

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