/* ════════════════════════════════════════════════════════════════════════════
   TAS PLATFORM — DESIGN SYSTEM v1 (D1a) · LIGHT THEME
   Tokens + base components extracted from the approved Socialite public-web
   mockups (socialiteagency-home-final-v2 / socialiteagency-chatbot-landing-v2).

   ADDITIVE: imported by NOTHING yet. Screens adopt it one by one (D1b/D1c) by
   adding <link rel="stylesheet" href="/dashboard/assets/design-tokens.css">.
   Every class is namespaced `ds-` so it can never collide with a page's own CSS.

   THE TWO-GREENS RULE (decided with Adria — do not "fix"):
     --green  #1D9E75  → ACTION / SUCCESS / positive state (buttons, toggles,
                          active status). The product's existing green. IT STAYS.
     --logo-teal #53CEA2 (and --logo-gradient) → the LOGO and light brand accents
                          ONLY. Never a button, never a state.
   Backgrounds are LIGHT (white / --cyan-50). No dark backgrounds in this system.

   Style guide: /dashboard/assets/style-guide.html (the living reference).
   Reviewer: .claude/agents/design-reviewer.md enforces this file.
   ════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@1,400;1,500;1,600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* ── Color ─────────────────────────────────────────────────────────────── */
  --cyan:       #00B4F0;   /* primary brand hue — fills/accents, NOT under text */
  --cyan-dark:  #0099D4;   /* darker brand accent (non-text uses)              */
  /* Filled-BUTTON fills — the minimal darkening of the brand hues that puts a
     WHITE label at WCAG AA in every state (strict AA — Adria 2026-07-08):     */
  --cyan-btn:        #007FA9;  /* white label 4.56:1 */
  --cyan-btn-hover:  #007095;  /* white label 5.60:1 */
  --green-btn:       #198563;  /* white label 4.59:1 */
  --green-btn-hover: #167557;  /* white label 5.65:1 */
  --cyan-soft:  #EAF6FB;   /* tinted fills (chips, hovers, selected rows)      */
  --cyan-50:    #F2F9FC;   /* lightest page-section background                 */
  --black:      #0F1923;   /* near-black (hero text, footers stay LIGHT here)  */
  --ink:        #1A2330;   /* headings                                         */
  --body:       #4E5C70;   /* body text                                        */
  --soft:       #66717F;   /* secondary/muted text + placeholders — AA on every
                              light surface (4.96 white · 4.66 bg-soft/cyan-50 ·
                              4.51 cyan-soft). #8A98AC was 2.93:1 (strict AA).  */
  --line:       #E5EAF1;   /* borders (dividers, card edges — non-interactive) */
  --line-soft:  #EFF3F8;   /* hairlines, row separators                        */
  --line-strong:#7E8896;   /* INTERACTIVE control boundary — 3.59:1 on white
                              (WCAG 1.4.11 non-text ≥3:1). Outline buttons +
                              input borders whose affordance must read on a light
                              surface. --line (1.21:1) is dividers-only.        */
  --bg-soft:    #F6F8FB;   /* alternate surface background                     */
  --green:      #1D9E75;   /* ACTION / SUCCESS — the product green (see rule)  */
  --green-dark: #178963;   /* success hover                                    */
  --green-soft: #E7F5F0;   /* success tint                                     */
  --amber:      #8A5A12;   /* warning TEXT — 5.36:1 on --amber-soft (AA)       */
  --amber-soft: #FBF3E4;   /* warning tint                                     */
  --red:        #BE3636;   /* danger/error TEXT — 4.86:1 on --red-soft (AA)    */
  --red-soft:   #FBECEC;   /* danger tint                                      */

  /* Derived TEXT shades — brand hues dark enough for WCAG AA at any size.
     Use these whenever cyan/green appear as SMALL TEXT (kickers, badges, active
     tabs, links); --cyan / --green stay as FILLS and large accents.            */
  --cyan-text:  #0077A8;   /* 5.00:1 on white · 4.54:1 on --cyan-soft          */
  --green-text: #157055;   /* 6.03:1 on white · 5.38:1 on --green-soft         */
  --logo-blue:  #53B2D0;   /* logo/brand accents ONLY                          */
  --logo-teal:  #53CEA2;   /* logo/brand accents ONLY — never action/success   */
  --logo-gradient: linear-gradient(135deg, #53B2D0 0%, #53CEA2 100%);

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-ui:        'Poppins', -apple-system, sans-serif;          /* UI + body */
  --font-editorial: 'Playfair Display', Georgia, serif;  /* italic accents ONLY */
  --font-brand:     'Inter', -apple-system, sans-serif;  /* brand-chip contexts */

  /* Type scale (mockup ranges; clamp() spans the range responsively) */
  --fs-display: clamp(42px, 6vw, 72px);   /* hero display                      */
  --fs-section: clamp(32px, 4.2vw, 46px); /* section titles                    */
  --fs-subhead: clamp(21px, 2.8vw, 38px); /* sub-headlines                     */
  --fs-body-lg: 18px;
  --fs-body:    15px;
  --fs-label:   13px;                     /* labels / small UI                 */
  --fs-kicker:  12px;                     /* kickers / overlines (11–14 range) */

  /* ── Shape ─────────────────────────────────────────────────────────────── */
  --r-pill:    100px;  /* buttons, badges — the dominant look                  */
  --r-card-lg: 16px;
  --r-card-md: 12px;
  --r-input:   10px;
  --r-avatar:  50%;

  /* ── Depth (soft/diffuse ONLY — never hard) ────────────────────────────── */
  --shadow-standard: 0 5px 16px rgba(0, 0, 0, 0.06);
  --shadow-high:     0 26px 70px rgba(15, 25, 35, 0.20);
  --shadow-brand:    0 8px 26px rgba(0, 180, 240, 0.30);
  --shadow-green:    0 8px 26px rgba(29, 158, 117, 0.30);
  --shadow-focus:    0 0 0 3px rgba(0, 180, 240, 0.25);

  /* ── Rhythm ────────────────────────────────────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
}

/* ── Base surface (opt-in wrapper — future screens set this on <body>) ────── */
.ds-page {
  background: #fff;
  color: var(--body);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.ds-surface-soft { background: var(--bg-soft); }
.ds-surface-tint { background: var(--cyan-50); }

/* ── Typography helpers ────────────────────────────────────────────────────
   NOTE for the style guide + reviews: `.ds-state-hover` / `.ds-state-focus`
   classes mirror the real :hover / :focus-visible styles so static pages
   (and screenshots) can SHOW every state. Never use them in real screens.  */
.ds-display  { font-family: var(--font-ui); font-size: var(--fs-display); font-weight: 700; color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; }
.ds-h-section{ font-family: var(--font-ui); font-size: var(--fs-section); font-weight: 700; color: var(--ink); line-height: 1.15; letter-spacing: -0.015em; }
.ds-h-sub    { font-family: var(--font-ui); font-size: var(--fs-subhead); font-weight: 600; color: var(--ink); line-height: 1.25; }
.ds-body-lg  { font-size: var(--fs-body-lg); color: var(--body); }
.ds-body     { font-size: var(--fs-body); color: var(--body); }
.ds-muted    { color: var(--soft); }
.ds-label    { font-size: var(--fs-label); font-weight: 500; color: var(--body); }

/* Editorial accent — the warm/human touch: <em> inside headings only.
   --cyan-text (not --cyan-dark): subheads clamp down to 21px where AA needs 4.5:1. */
.ds-display em, .ds-h-section em, .ds-h-sub em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 500;
  color: var(--cyan-text);
  letter-spacing: 0;
}

/* Kicker / overline (section headers) — small text, so the AA cyan */
.ds-kicker {
  display: inline-block;
  font-size: var(--fs-kicker);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-text);
}

/* Section header block: kicker + title (+ optional lead) */
.ds-section-header { margin-bottom: var(--sp-6); }
.ds-section-header .ds-kicker { margin-bottom: var(--sp-2); }
.ds-section-header p { margin-top: var(--sp-3); max-width: 62ch; }

/* ── Buttons (pill — the dominant shape) ────────────────────────────────────
   STRICT WCAG AA (Adria 2026-07-08): filled buttons use --cyan-btn/--green-btn —
   the brand hues darkened just enough that the white label measures ≥4.5:1 in
   EVERY state (resting AND hover). The bright --cyan/--green stay for fills and
   accents that don't sit under text.                                          */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 600;
  padding: 12px 28px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: background 0.16s, color 0.16s, border-color 0.16s, box-shadow 0.16s, transform 0.16s;
  background: var(--cyan-btn); color: #fff;
  box-shadow: var(--shadow-standard);
}
.ds-btn:hover, .ds-btn.ds-state-hover {
  background: var(--cyan-btn-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
}
.ds-btn:focus-visible, .ds-btn.ds-state-focus { outline: none; box-shadow: var(--shadow-focus); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] {
  background: var(--line); color: var(--soft);
  box-shadow: none; transform: none; cursor: not-allowed;
}

/* Secondary: bordered ink on a faint surface. Border = --line-strong (3.59:1 on
   white) so the outline reads as a real control (WCAG 1.4.11); the --bg-soft fill
   gives a second affordance cue without a shadow (keeps button rows calm). */
.ds-btn-secondary {
  background: var(--bg-soft); color: var(--ink); border-color: var(--line-strong);
  box-shadow: none;
}
.ds-btn-secondary:hover, .ds-btn-secondary.ds-state-hover {
  background: var(--cyan-soft); border-color: var(--cyan);
  color: var(--cyan-text); transform: translateY(-1px); box-shadow: var(--shadow-standard);
}
.ds-btn-secondary:disabled { background: var(--bg-soft); color: var(--soft); border-color: var(--line-soft); }

/* Success / positive action — THE PRODUCT GREEN (#1D9E75), never the logo teal */
.ds-btn-success { background: var(--green-btn); }
.ds-btn-success:hover, .ds-btn-success.ds-state-hover {
  background: var(--green-btn-hover);
  box-shadow: var(--shadow-green);
}

/* Danger — destructive actions (Eliminar…): bordered red on white, AA text.
   Added in D1b (first missing component found migrating the clients list). */
.ds-btn-danger {
  background: #fff; color: var(--red); border-color: var(--red);
  box-shadow: none;
}
.ds-btn-danger:hover, .ds-btn-danger.ds-state-hover {
  background: var(--red-soft); color: var(--red);
  transform: translateY(-1px); box-shadow: var(--shadow-standard);
}
.ds-btn-danger:disabled { background: var(--bg-soft); color: var(--soft); border-color: var(--line-soft); }

/* Small size */
.ds-btn-sm { padding: 8px 18px; font-size: var(--fs-label); }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.ds-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card-lg); box-shadow: var(--shadow-standard);
  padding: var(--sp-5);
}
.ds-card-md { border-radius: var(--r-card-md); padding: var(--sp-4); }
.ds-card-title { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: var(--sp-3); }

/* ── Section card ──────────────────────────────────────────────────────────────
   ONE consistent treatment for every configuration/section CONTAINER across the
   portal AND dashboard — collapsible or not, and IDENTICAL whether open or closed.
   White surface + soft shadow + a product-green left accent (the look Adria
   approved on the expanded portal sections, now applied uniformly so a collapsed
   section reads exactly the same as an expanded one). The 3px accent is decorative
   (the section title conveys meaning) — it is NOT a control affordance, so §4b
   non-text contrast does not apply; --green is the sanctioned product green (the
   same #1D9E75 the portal already shipped for the open-accordion accent).
   Apply by ADDING `ds-section-card` to a section container's class list — the
   visual lives here once (system), never copied per page. */
.ds-section-card {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--r-card-lg);
  box-shadow: var(--shadow-standard);
}

/* ── Forms ─────────────────────────────────────────────────────────────────── */
.ds-field { margin-bottom: var(--sp-4); }
.ds-field > label {
  display: block; font-size: var(--fs-label); font-weight: 500;
  color: var(--body); margin-bottom: var(--sp-2);
}
.ds-input, .ds-select, .ds-textarea {
  width: 100%; font-family: var(--font-ui); font-size: var(--fs-body);
  color: var(--ink); background: #fff;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-input); /* 3.59:1 affordance (1.4.11) */
  padding: 11px 14px; outline: none;
  transition: border-color 0.16s, box-shadow 0.16s, background 0.16s;
}
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--soft); }
.ds-input:hover, .ds-select:hover, .ds-textarea:hover { border-color: var(--soft); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus,
.ds-input.ds-state-focus, .ds-select.ds-state-focus, .ds-textarea.ds-state-focus {
  border-color: var(--cyan); box-shadow: var(--shadow-focus);
}
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled {
  background: var(--bg-soft); color: var(--soft); cursor: not-allowed;
}
.ds-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%234E5C70' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
  padding-right: 38px;
}
.ds-textarea { min-height: 96px; resize: vertical; }
.ds-help  { font-size: var(--fs-kicker); color: var(--body); margin-top: var(--sp-1); }
.ds-error { font-size: var(--fs-kicker); color: var(--red); margin-top: var(--sp-1); }

/* ── Badges (pill labels) ──────────────────────────────────────────────────── */
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-kicker); font-weight: 600;
  padding: 4px 12px; border-radius: var(--r-pill);
  background: var(--cyan-soft); color: var(--cyan-text);
  border: 1px solid transparent;
}
.ds-badge-success { background: var(--green-soft); color: var(--green-text); }
.ds-badge-warning { background: var(--amber-soft); color: var(--amber); }
.ds-badge-danger  { background: var(--red-soft);   color: var(--red); }
.ds-badge-neutral { background: var(--bg-soft);    color: var(--body); border-color: var(--line); }
/* Brand chip — the ONLY sanctioned UI use of the logo gradient (Inter, brand
   contexts). Its white text is the BRAND NAME itself: WCAG 1.4.3 exempts logotype
   text from contrast requirements. Confined to the brand mark — never UI text. */
.ds-badge-brand {
  background: var(--logo-gradient); color: #fff;
  font-family: var(--font-brand); font-weight: 700; letter-spacing: 0.02em;
}

/* ── Toggle / switch (ACTIVE = the product green) ──────────────────────────── */
.ds-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.ds-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ds-toggle .ds-toggle-track {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--line); transition: background 0.16s; cursor: pointer;
}
.ds-toggle .ds-toggle-track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: var(--r-avatar);
  background: #fff; box-shadow: 0 1px 3px rgba(15, 25, 35, 0.25);
  transition: transform 0.16s;
}
.ds-toggle:hover .ds-toggle-track { filter: brightness(0.94); }
.ds-toggle input:checked + .ds-toggle-track { background: var(--green); }
.ds-toggle input:checked + .ds-toggle-track::after { transform: translateX(20px); }
.ds-toggle input:focus-visible + .ds-toggle-track { box-shadow: var(--shadow-focus); }
.ds-toggle input:disabled + .ds-toggle-track { opacity: 0.45; cursor: not-allowed; }

/* ── Table ─────────────────────────────────────────────────────────────────── */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.ds-table th {
  text-align: left; font-size: var(--fs-kicker); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--body);
  padding: 10px 14px; border-bottom: 1.5px solid var(--line);
}
.ds-table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); color: var(--body); }
.ds-table tbody tr { transition: background 0.12s; }
.ds-table tbody tr:hover, .ds-table tbody tr.ds-state-hover { background: var(--cyan-50); }
.ds-table td:first-child { color: var(--ink); font-weight: 500; }

/* ── Tabs ──────────────────────────────────────────────────────────────────── */
/* On narrow screens the row scrolls INSIDE itself — the page never scrolls sideways */
.ds-tabs { display: flex; gap: var(--sp-2); border-bottom: 1.5px solid var(--line); overflow-x: auto; }
.ds-tab {
  font-family: var(--font-ui); font-size: var(--fs-body); font-weight: 500;
  color: var(--body); background: none; border: none; cursor: pointer;
  padding: 10px 16px; margin-bottom: -1.5px; white-space: nowrap; flex-shrink: 0;
  border-bottom: 2px solid transparent;
  transition: color 0.16s, border-color 0.16s;
}
.ds-tab:hover, .ds-tab.ds-state-hover { color: var(--ink); }
.ds-tab:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: 6px; }
.ds-tab.ds-active { color: var(--cyan-text); border-bottom-color: var(--cyan); font-weight: 600; }

/* ── Avatar ────────────────────────────────────────────────────────────────── */
.ds-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-avatar);
  background: var(--cyan-soft); color: var(--cyan-text);
  font-size: var(--fs-label); font-weight: 600;
}