/* ==========================================================================
   Bridge Creative Hub — App UI
   Sistema de diseño portado de Pollo Office (buzz-main): superficies/texto por
   variables --s-*, acento por --color-accent-*, tipografía Inter. Look cálido
   y suave estilo "Taskflow": tarjetas redondeadas, bordes sutiles, sombras
   ligeras. Cambiar de tema/acento (theme.js) reescribe estas variables.
   ========================================================================== */

/* Tipografía de marca Accenture (Graphik), jalada del landing (assets/fonts) */
@font-face{font-family:"Graphik";src:url("/assets/fonts/Graphik-Regular-Web.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Graphik";src:url("/assets/fonts/Graphik-Medium-Web.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Graphik";src:url("/assets/fonts/Graphik-Semibold-Web.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Graphik";src:url("/assets/fonts/Graphik-Bold-Web.woff2") format("woff2");font-weight:700;font-display:swap}

:root {
  color-scheme: light;
  --font-sans: "Graphik", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Superficies/texto (light por defecto; theme.js las reescribe) */
  --s-body-bg: #f6f6f7; --s-body-text: #18181b; --s-surface: #ffffff;
  --s-bg50: #f6f6f7; --s-bg100: #f2f2f3; --s-pill: #18181b;
  --s-border100: #f2f2f3; --s-border200: #e7e7e9; --s-border300: #d6d6d9;
  --s-text900: #18181b; --s-text800: #18181b; --s-text700: #5b5b63;
  --s-text600: #5b5b63; --s-text500: #9a9aa2; --s-text400: #9a9aa2; --s-text300: #e7e7e9;
  --s-hover50: #f0f0f1; --s-hover100: #ececec; --s-input-text: #18181b;
  --s-placeholder: #9a9aa2; --s-scroll: #d6d6d9;

  /* Acento de marca Accenture (púrpura por defecto; theme.js lo reescribe) */
  --color-accent-50: #F4ECFF; --color-accent-100: #E6DCFF;
  --color-accent-500: #A100FF; --color-accent-600: #7500C0; --color-accent-700: #460073;

  /* Semánticos de estado (fijos, no dependen del acento) */
  --ok-bg: #ecfdf5; --ok-fg: #047857;
  --warn-bg: #fffbeb; --warn-fg: #b45309;
  --bad-bg: #fef2f2; --bad-fg: #b91c1c;
  --info-bg: #eff6ff; --info-fg: #1d4ed8;

  /* Geometría cuadrada de marca Accenture (0px radius). Círculos solo para
     avatares, puntos y barras (--r-pill). */
  --r: 0px; --r-sm: 0px; --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(17,17,20,.05);
  --shadow: 0 4px 16px rgba(17,17,20,.06);
  --shadow-lg: 0 12px 32px rgba(17,17,20,.10);

  /* ---- Alias de compatibilidad (usados en estilos inline de las páginas) ---- */
  --fg: var(--s-text900); --muted: var(--s-text600); --surface: var(--s-surface);
  --surface-2: var(--s-bg100); --border: var(--s-border200);
  --accent: var(--color-accent-500); --accent-text: var(--color-accent-700);
  --accent-3: var(--color-accent-50);
  --danger: var(--bad-fg); --success-ink: var(--ok-fg); --blue: var(--color-accent-500);
  --danger-ink: var(--bad-fg); --success-bg: var(--ok-bg); --warning-ink: var(--warn-fg);
  --info-ink: var(--info-fg);
  --font-display: var(--font-sans); --font-body: var(--font-sans);
  --text-h2: 1.5rem; --text-caption: .75rem;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --elev-1: var(--shadow-sm); --elev-2: var(--shadow);
}

.dark { color-scheme: dark; }

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--s-scroll) transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--s-body-bg); color: var(--s-body-text);
  font-family: var(--font-sans); -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv02","cv03","cv04";
}
a { color: inherit; text-decoration: none; }

/* ---- Shell -------------------------------------------------------------- */
.app { display: grid; grid-template-columns: 256px 1fr; min-height: 100vh; }

.side {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--s-border200); background: var(--s-surface);
}
.side__brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 16px; }
.side__brand img { height: 22px; width: auto; }
.side__brand b { font-size: 1.0625rem; font-weight: 700; letter-spacing: -.02em; }
.side__chip {
  font: 600 10px/1 var(--font-mono); letter-spacing: .04em; color: var(--s-text700);
  background: var(--color-accent-50); border: 1px solid var(--color-accent-100);
  padding: 4px 8px; border-radius: var(--r-pill);
}
.side__nav { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.side__group { font: 600 11px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--s-text500); padding: 18px 8px 8px; }
.side__link {
  display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 12px;
  color: var(--s-text700); font-size: .9rem; font-weight: 500; border-radius: var(--r-sm);
  transition: background .12s ease, color .12s ease;
}
.side__link:hover { background: var(--s-hover50); color: var(--s-text900); }
.side__link.active { background: var(--color-accent-50); color: var(--s-text900); font-weight: 600; box-shadow: inset 2px 0 0 var(--color-accent-500); }
.side__link .ic { width: 16px; height: 16px; flex: none; }
.side__link .badge { margin-left: auto; }
.side__foot { border-top: 1px solid var(--s-border200); padding: 16px 20px; display: flex; align-items: center; gap: 10px; }

/* ---- Topbar ------------------------------------------------------------- */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px;
  height: 64px; padding: 0 28px; background: color-mix(in srgb, var(--s-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--s-border200);
}
.top__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.01em; }
.top__spacer { flex: 1; }
.top__user { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--s-text600); }
.top__avatar {
  width: 30px; height: 30px; border-radius: var(--r-pill); display: grid; place-items: center;
  background: var(--color-accent-500); color: #fff; font: 600 .72rem/1 var(--font-sans);
}
.top__btn {
  height: 34px; padding: 0 14px; border: 1px solid var(--s-border200); background: var(--s-surface);
  color: var(--s-text800); font: 600 .78rem/1 var(--font-sans); cursor: pointer;
  border-radius: var(--r-sm); transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.top__btn:hover { background: var(--s-hover50); border-color: var(--s-border300); }

/* ---- Page --------------------------------------------------------------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.page { padding: 32px 36px; max-width: 1240px; width: 100%; margin: 0 auto; }
.page__head { margin-bottom: 28px; }
.page__head h1 { margin: 0 0 6px; font-size: 1.9rem; font-weight: 700; letter-spacing: -.025em; }
.page__head p { margin: 0; color: var(--s-text600); max-width: 70ch; }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spacer { flex: 1; }

/* ---- KPI cards ---------------------------------------------------------- */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi { background: var(--s-surface); border: 1px solid var(--s-border200); border-radius: var(--r); padding: 20px 22px; box-shadow: var(--shadow-sm); }
.kpi b { display: block; font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi span { font: 600 .72rem/1.4 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--s-text500); }

/* ---- Cards -------------------------------------------------------------- */
.cards { display: grid; gap: 16px; }
.cards--2 { grid-template-columns: 1fr 1fr; }
.card2 { background: var(--s-surface); border: 1px solid var(--s-border200); border-radius: var(--r); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.card2 h3 { margin: 0 0 16px; font-size: 1.0625rem; font-weight: 700; letter-spacing: -.01em; }

/* ---- Table -------------------------------------------------------------- */
.tbl-wrap { background: var(--s-surface); border: 1px solid var(--s-border200); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-sm); }
.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tbl th { text-align: left; font: 600 11px/1.2 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--s-text500); padding: 14px 18px; border-bottom: 1px solid var(--s-border200); background: var(--s-bg50); }
.tbl td { padding: 14px 18px; border-bottom: 1px solid var(--s-border100); vertical-align: middle; color: var(--s-text800); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr { transition: background .1s ease; }
.tbl tbody tr:hover { background: var(--s-hover50); }
.tbl a { color: var(--s-text900); font-weight: 600; text-decoration: underline; text-decoration-color: var(--s-border300); text-underline-offset: 2px; }
.tbl a:hover { text-decoration-color: var(--s-text900); }
.tbl .num { font-variant-numeric: tabular-nums; color: var(--s-text500); font-size: .82rem; }

/* card2 nested tables: sin doble borde */
.card2 .tbl-wrap { border: 0; box-shadow: none; border-radius: 0; }
.card2 .tbl th { background: transparent; }

/* ---- Status pills ------------------------------------------------------- */
.st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; font: 600 11px/1 var(--font-sans); letter-spacing: .02em; border-radius: 0; }
.st::before { content: ""; width: 6px; height: 6px; background: currentColor; }
.st--draft, .st--archived { background: var(--s-bg100); color: var(--s-text500); }
.st--active { background: var(--color-accent-50); color: var(--s-text800); }
.st--in_review, .st--pending { background: var(--warn-bg); color: var(--warn-fg); }
.st--approved { background: var(--ok-bg); color: var(--ok-fg); }
.st--rejected { background: var(--bad-bg); color: var(--bad-fg); }

/* ---- Forms -------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.fld { display: flex; flex-direction: column; gap: 6px; }
.fld label { font: 600 11px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--s-text500); }
.fld input, .fld textarea, .fld select {
  background: var(--s-surface); border: 1px solid var(--s-border200); color: var(--s-input-text);
  padding: 10px 12px; font: 400 .9rem/1.4 var(--font-sans); border-radius: var(--r-sm);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--s-placeholder); }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline: 0; border-color: var(--color-accent-500); box-shadow: 0 0 0 3px var(--color-accent-100); }
.fld textarea { min-height: 90px; resize: vertical; }

/* ---- Buttons (compat .btn del sistema previo) --------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: var(--r-sm); font: 600 .875rem/1 var(--font-sans); cursor: pointer; text-decoration: none; transition: filter .12s ease, background .12s ease; }
.btn--wipe { background: var(--color-accent-500); color: #fff; }
.btn--wipe:hover { background: var(--color-accent-600); }
.btn--lg { height: 46px; padding: 0 24px; font-size: .95rem; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Readiness bars ----------------------------------------------------- */
.readi { display: flex; flex-direction: column; gap: 14px; }
.readi__row { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; font-size: .85rem; color: var(--s-text600); }
.readi__row .num { color: var(--s-text900); font-weight: 600; font-variant-numeric: tabular-nums; }
.readi__row .bar { grid-column: 1 / -1; height: 6px; background: var(--s-bg100); border-radius: var(--r-pill); overflow: hidden; }
.readi__row .bar i { display: block; height: 100%; background: var(--color-accent-500); border-radius: var(--r-pill); }

/* ---- Misc --------------------------------------------------------------- */
.alerts { display: flex; flex-direction: column; gap: 10px; }
.alert { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--s-text600); }
.alert::before { content: ""; width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--color-accent-500); flex: none; }
.empty { padding: 40px; text-align: center; color: var(--s-text500); font-size: .9rem; }
.toast { position: fixed; right: 24px; bottom: 24px; background: var(--s-pill); color: var(--s-surface); padding: 12px 18px; font: 600 .85rem/1 var(--font-sans); border-radius: var(--r-sm); box-shadow: var(--shadow-lg); z-index: 100; }
.meta-line { display: flex; gap: 18px; flex-wrap: wrap; color: var(--s-text600); font-size: .85rem; margin-top: 8px; }
.meta-line b { color: var(--s-text900); font-weight: 600; }

/* ---- Appearance menu (tema/acento) ------------------------------------- */
.appr { position: relative; }
.appr__panel { position: absolute; right: 0; top: 42px; z-index: 50; width: 260px; background: var(--s-surface); border: 1px solid var(--s-border200); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: 14px; }
.appr__h { font: 600 11px/1 var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--s-text500); margin: 4px 2px 8px; }
.appr__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.appr__opt { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid var(--s-border200); border-radius: var(--r-sm); background: var(--s-surface); color: var(--s-text700); font-size: .8rem; cursor: pointer; }
.appr__opt:hover { background: var(--s-hover50); }
.appr__opt.on { border-color: var(--color-accent-500); color: var(--s-text900); box-shadow: inset 0 0 0 1px var(--color-accent-500); }
.appr__sw { width: 14px; height: 14px; border-radius: var(--r-pill); flex: none; border: 1px solid rgba(0,0,0,.12); }
.appr__dots { display: flex; gap: 4px; }
.appr__dots i { width: 12px; height: 12px; border-radius: var(--r-pill); cursor: pointer; border: 2px solid transparent; }
.appr__dots i.on { border-color: var(--s-text900); }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; overflow-x: auto; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .cards--2 { grid-template-columns: 1fr; }
}