/* ==========================================================================
Chaping Afiliados — Design Tokens + base components
Source of truth: docs/CHAPING_DESIGN_SYSTEM.md
Conventions:
- All custom properties prefixed with --ch-* or canonical short names
- All public classes prefixed with .chaping-*
- Never write hex colors directly in component CSS — use var(--*)
========================================================================== */
/* ---- 0. Web fonts (load via Google Fonts in or PHP enqueue) -------- */
/*
*/
/* ---- 1. Tokens ----------------------------------------------------------- */
:root {
/* Brand */
--ch-orange: #FF6A13;
--ch-orange-hi: #FF8438;
--ch-orange-press: #E15808;
--ch-orange-soft: #FFE7D2;
--ch-orange-wash: #FFF4EA;
--ch-orange-ink: #6B2A07;
/* Text + neutrals */
--ink: #15171A;
--ink-2: #2A2F36;
--fg: #1F2328;
--fg-muted: #5B6573;
--fg-subtle: #8A93A1;
--fg-on-dark: #F4F5F7;
/* Surfaces */
--bg: #F6F7F9;
--surface: #FFFFFF;
--surface-2: #FAFBFC;
--surface-sunken: #F1F3F5;
/* Lines */
--line: #E6E8EC;
--line-strong: #D3D7DD;
/* Semantic */
--success: #16A34A;
--success-wash: #E7F6EC;
--success-line: #B6DFC1;
--success-ink: #0F7A37;
--warning: #F59E0B;
--warning-wash: #FEF3D7;
--warning-line: #F1CE7D;
--warning-ink: #8A5B05;
--danger: #DC2626;
--danger-wash: #FCE6E6;
--danger-line: #F3B9B9;
--danger-ink: #A11A1A;
--info: #2563EB;
--info-wash: #E4ECFD;
--info-line: #BFCFF8;
--info-ink: #1D4FCE;
--neutral-wash: #EEF0F3;
/* Typography */
--font-display: "Nunito", system-ui, -apple-system, Segoe UI, sans-serif;
--font-body: "Inter", system-ui, -apple-system, Segoe UI, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
/* Spacing (4px grid) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
--s-9: 48px; --s-10: 64px; --s-11: 96px;
/* Radius */
--r-flat: 0;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 14px;
--r-pill: 999px;
/* Shadow */
--shadow-1: 0 1px 2px rgba(20,23,28,.05), 0 1px 1px rgba(20,23,28,.04);
--shadow-2: 0 4px 14px rgba(20,23,28,.08), 0 2px 4px rgba(20,23,28,.04);
--shadow-pop:0 12px 32px rgba(20,23,28,.16);
/* Focus ring */
--ch-focus: 0 0 0 3px rgba(255,106,19,.28);
/* Motion */
--ease-out: cubic-bezier(.2, .7, .2, 1);
--dur-fast: 120ms;
--dur-med: 180ms;
--dur-slow: 240ms;
}
/* ---- 2. Reset minimal scope (only inside .chaping-* islands) ------------- */
.chaping-scope,
.chaping-scope * { box-sizing: border-box; }
.chaping-scope {
font-family: var(--font-body);
font-size: 14px;
line-height: 1.55;
color: var(--fg);
-webkit-font-smoothing: antialiased;
}
/* ---- 3. Typography utilities -------------------------------------------- */
.chaping-display-xl{ font-family: var(--font-display); font-weight: 900; font-size: 56px; line-height: 1.05; letter-spacing: -0.025em; }
.chaping-display-lg{ font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; }
.chaping-h1 { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; color: var(--ink); margin: 0; }
.chaping-h2 { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); margin: 0; }
.chaping-h3 { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--ink); margin: 0; }
.chaping-body { font-family: var(--font-body); font-weight: 400; font-size: 14px; line-height: 1.55; }
.chaping-body-sm { font-family: var(--font-body); font-weight: 400; font-size: 13px; line-height: 1.55; color: var(--fg-muted); }
.chaping-caption { font-family: var(--font-body); font-weight: 500; font-size: 11px; line-height: 1.4; text-transform: uppercase; letter-spacing: .12em; color: var(--fg-subtle); }
.chaping-mono { font-family: var(--font-mono); font-weight: 500; font-size: 13px; }
/* ---- 4. Button ---------------------------------------------------------- */
.chaping-btn{
display: inline-flex; align-items: center; gap: 8px;
font-family: var(--font-body);
font-weight: 600;
font-size: 13px;
line-height: 1;
padding: 10px 16px;
border-radius: var(--r-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out),
border-color var(--dur-fast) var(--ease-out),
transform 80ms var(--ease-out);
}
.chaping-btn:active{ transform: scale(.985); }
.chaping-btn:focus-visible{ outline: none; box-shadow: var(--ch-focus); }
.chaping-btn--primary{ background: var(--ch-orange); color: #fff; }
.chaping-btn--primary:hover{ background: var(--ch-orange-press); color: #fff; }
.chaping-btn--secondary{ background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.chaping-btn--secondary:hover{ background: var(--surface-sunken); }
.chaping-btn--ghost{ background: transparent; color: var(--fg); }
.chaping-btn--ghost:hover{ background: var(--surface-sunken); color: var(--ink); }
.chaping-btn--danger{ background: var(--surface); color: var(--danger); border-color: var(--line-strong); }
.chaping-btn--danger:hover{ background: var(--danger-wash); border-color: var(--danger); }
.chaping-btn--sm{ padding: 7px 12px; font-size: 12px; }
.chaping-btn--lg{ padding: 14px 22px; font-size: 14px; }
.chaping-btn[disabled],
.chaping-btn[aria-disabled="true"]{ opacity: .5; pointer-events: none; }
.chaping-btn .chaping-ic{ width: 14px; height: 14px; flex: none; }
/* ---- 5. Form ------------------------------------------------------------ */
.chaping-field{
display: flex; flex-direction: column; gap: 6px;
margin-bottom: 12px;
}
.chaping-field > label{
font-size: 12px;
font-weight: 600;
color: var(--ink-2);
}
.chaping-help{ font-size: 11px; color: var(--fg-subtle); }
.chaping-err{ font-size: 11px; color: var(--danger); }
.chaping-input,
.chaping-select,
.chaping-textarea{
width: 100%;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
padding: 10px 12px;
outline: none;
transition: border-color var(--dur-fast) var(--ease-out),
box-shadow var(--dur-fast) var(--ease-out);
}
.chaping-textarea{ resize: vertical; min-height: 96px; }
.chaping-input::placeholder,
.chaping-textarea::placeholder{ color: var(--fg-subtle); }
.chaping-input:focus,
.chaping-select:focus,
.chaping-textarea:focus{
border-color: var(--ch-orange);
box-shadow: var(--ch-focus);
}
.chaping-input.is-error,
.chaping-select.is-error,
.chaping-textarea.is-error{ border-color: var(--danger); }
.chaping-input.is-error:focus{ box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.chaping-check{
display: inline-flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--ink);
cursor: pointer; user-select: none;
}
.chaping-check input{
appearance: none; -webkit-appearance: none;
width: 16px; height: 16px;
border: 1.5px solid var(--line-strong);
border-radius: 4px;
background: var(--surface);
display: inline-grid; place-content: center;
cursor: pointer;
}
.chaping-check input:checked{ background: var(--ch-orange); border-color: var(--ch-orange); }
.chaping-check input:checked::after{
content: "";
width: 8px; height: 4px;
border-left: 2px solid #fff; border-bottom: 2px solid #fff;
transform: rotate(-45deg) translate(1px, -1px);
}
.chaping-input-search{
display: flex; align-items: center; gap: 8px;
border: 1px solid var(--line-strong);
border-radius: var(--r-sm);
padding: 8px 12px;
background: var(--surface);
}
.chaping-input-search input{
border: none; outline: none; background: transparent; flex: 1;
font-family: inherit; font-size: 13px; color: var(--ink);
}
/* ---- 6. Badge ----------------------------------------------------------- */
.chaping-badge{
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-body);
font-size: 11px; font-weight: 600;
padding: 4px 8px;
border-radius: var(--r-pill);
border: 1px solid transparent;
line-height: 1;
white-space: nowrap;
}
.chaping-badge .dot{
width: 6px; height: 6px; border-radius: 50%;
display: inline-block;
}
.chaping-badge--neutral{ background: var(--neutral-wash); color: var(--ink-2); }
.chaping-badge--neutral .dot{ background: var(--fg-subtle); }
.chaping-badge--info { background: var(--info-wash); color: #1D4FCE; }
.chaping-badge--info .dot{ background: var(--info); }
.chaping-badge--success{ background: var(--success-wash); color: #0F7A37; }
.chaping-badge--success .dot{ background: var(--success); }
.chaping-badge--warning{ background: var(--warning-wash); color: #8A5B05; }
.chaping-badge--warning .dot{ background: var(--warning); }
.chaping-badge--danger { background: var(--danger-wash); color: #A11A1A; }
.chaping-badge--danger .dot{ background: var(--danger); }
.chaping-badge--amber { background: var(--ch-orange-wash); color: var(--ch-orange-ink); }
.chaping-badge--amber .dot{ background: var(--ch-orange); }
.chaping-badge--dark { background: var(--ink); color: #fff; }
.chaping-badge--dark .dot{ background: #fff; }
/* ---- 7. Table ----------------------------------------------------------- */
.chaping-tbl-wrap{
border: 1px solid var(--line);
border-radius: var(--r-md);
overflow: hidden;
background: var(--surface);
}
.chaping-tbl{
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.chaping-tbl thead th{
text-align: left;
background: var(--surface-sunken);
color: var(--fg-muted);
font-weight: 600;
font-size: 11px;
text-transform: uppercase;
letter-spacing: .08em;
padding: 10px 14px;
border-bottom: 1px solid var(--line);
}
.chaping-tbl tbody td{
padding: 12px 14px;
border-bottom: 1px solid var(--line);
color: var(--ink-2);
vertical-align: middle;
}
.chaping-tbl tbody tr:last-child td{ border-bottom: none; }
.chaping-tbl tbody tr:hover{ background: var(--surface-2); }
.chaping-tbl .mono{ font-family: var(--font-mono); font-size: 12px; color: var(--fg-muted); }
.chaping-tbl .amount{ font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.chaping-tbl .right{ text-align: right; }
.chaping-tbl .cell-actions{ display: flex; gap: 6px; justify-content: flex-end; }
/* ---- 8. KPI card -------------------------------------------------------- */
.chaping-kpi{
border: 1px solid var(--line);
border-radius: var(--r-md);
background: var(--surface);
padding: 18px;
position: relative;
overflow: hidden;
}
.chaping-kpi__label{
font-size: 11px;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--fg-muted);
font-weight: 600;
display: flex; align-items: center; gap: 6px;
margin-bottom: 12px;
}
.chaping-kpi__value{
font-family: var(--font-display);
font-weight: 800;
font-size: 28px;
letter-spacing: -.015em;
color: var(--ink);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.chaping-kpi__value .unit{
font-size: 14px;
font-weight: 700;
color: var(--fg-muted);
margin-left: 2px;
}
.chaping-kpi__foot{
margin-top: 10px;
font-size: 12px;
color: var(--fg-muted);
display: flex; align-items: center; gap: 6px;
}
.chaping-kpi__foot .delta-up { color: var(--success); font-weight: 600; }
.chaping-kpi__foot .delta-down { color: var(--danger); font-weight: 600; }
.chaping-kpi--accent{
background: linear-gradient(180deg, var(--ch-orange-wash) 0%, var(--surface) 80%);
border-color: var(--ch-orange-soft);
}
/* ---- 9. Tabs ------------------------------------------------------------ */
.chaping-tabs{
display: flex;
gap: 4px;
border-bottom: 1px solid var(--line);
padding: 0 2px;
}
.chaping-tab{
position: relative;
padding: 12px 16px;
font-size: 13px;
font-weight: 600;
color: var(--fg-muted);
cursor: pointer;
border: none; background: none;
font-family: inherit;
}
.chaping-tab:hover{ color: var(--ink); }
.chaping-tab.is-active{ color: var(--ink); }
.chaping-tab.is-active::after{
content: "";
position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px;
background: var(--ch-orange);
border-radius: 2px 2px 0 0;
}
/* ---- 10. Notice / alert ------------------------------------------------- */
.chaping-notice{
display: flex; gap: 12px;
padding: 12px 14px;
border-radius: var(--r-sm);
border: 1px solid;
font-size: 13px;
align-items: flex-start;
}
.chaping-notice .chaping-ic{ width: 16px; height: 16px; flex: none; margin-top: 1px; }
.chaping-notice strong{ display: block; margin-bottom: 2px; font-weight: 700; }
.chaping-notice--info { background: var(--info-wash); border-color: #BFCFF8; color: #1D4FCE; }
.chaping-notice--success{ background: var(--success-wash); border-color: #B6DFC1; color: #0F7A37; }
.chaping-notice--warning{ background: var(--warning-wash); border-color: #F1CE7D; color: #8A5B05; }
.chaping-notice--danger { background: var(--danger-wash); border-color: #F3B9B9; color: #A11A1A; }
/* ---- 11. Card / panel --------------------------------------------------- */
.chaping-card{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: var(--s-6);
box-shadow: var(--shadow-1);
}
.chaping-section{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-8);
}
.chaping-section + .chaping-section{ margin-top: var(--s-6); }
/* ---- 12. Frontend dashboard nav ----------------------------------------- */
.chaping-dashboard{
display: grid;
grid-template-columns: 220px 1fr;
min-height: 100vh;
background: var(--bg);
}
.chaping-dashboard__sidebar{
background: var(--surface);
border-right: 1px solid var(--line);
padding: 22px 16px;
}
.chaping-dashboard__nav{ display: flex; flex-direction: column; gap: 2px; }
.chaping-dashboard__nav .group{
font-size: 10px;
text-transform: uppercase;
letter-spacing: .12em;
color: var(--fg-subtle);
padding: 8px 10px 6px;
font-weight: 600;
}
.chaping-dashboard__nav a{
display: flex; align-items: center; gap: 10px;
padding: 9px 10px;
border-radius: var(--r-sm);
color: var(--fg);
text-decoration: none;
font-size: 13px;
font-weight: 500;
transition: background var(--dur-fast) var(--ease-out),
color var(--dur-fast) var(--ease-out);
}
.chaping-dashboard__nav a .chaping-ic{ width: 16px; height: 16px; color: var(--fg-muted); }
.chaping-dashboard__nav a:hover{ background: var(--surface-sunken); color: var(--ink); }
.chaping-dashboard__nav a.is-active{
background: var(--ch-orange-wash);
color: var(--ch-orange-ink);
font-weight: 600;
}
.chaping-dashboard__nav a.is-active .chaping-ic{ color: var(--ch-orange); }
.chaping-dashboard__main{ padding: 28px 32px 40px; min-width: 0; }
/* ---- 13. Icon defaults -------------------------------------------------- */
.chaping-ic{
display: inline-block;
vertical-align: middle;
width: 16px; height: 16px;
flex: none;
}
/* ---- 14. Responsive ----------------------------------------------------- */
@media (max-width: 1024px){
.chaping-dashboard{ grid-template-columns: 1fr; }
.chaping-dashboard__sidebar{
border-right: none;
border-bottom: 1px solid var(--line);
}
}
@media (max-width: 768px){
.chaping-dashboard__main{ padding: 20px 16px 32px; }
.chaping-section{ padding: var(--s-6); }
}
/* ---- 15. Reduced motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}