/* ============================================================
   legislat. — Platform / Bills page
   Same editorial system: Bone, Obsidian, Orange Pop
   ============================================================ */

:root{
  --obsidian:   #0B0F14;
  --navy:       #101828;
  --orange:     #FF7A29;
  --orange-deep:#C44A00;
  --paper:      #FAF7F0;
  --paper-2:    #F3EFE6;
  --paper-3:    #EEE9DC;
  --white:      #FFFFFF;

  --ink:        var(--obsidian);
  --ink-2:      #1F2530;
  --ink-3:      #5B636F;
  --ink-4:      #8A8780;
  --rule:       #0B0F141A;
  --rule-2:     #0B0F140F;
  --rule-3:     #0B0F1408;

  --ok:         #2F6A47;
  --ok-soft:    #DDE7DA;
  --warn:       #9C7416;
  --warn-soft:  #EEE3C2;
  --bad:        #8E3722;
  --bad-soft:   #ECD7CF;

  --accent-soft:#FCDCC4;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;

  --shadow-card: 0 1px 0 #14171C0A, 0 1px 2px #14171C08;
  --shadow-pop:  0 24px 60px -28px #0B0F1466, 0 2px 6px #0B0F1414;

  --font-serif: "Newsreader", ui-serif, Georgia, serif;
  --font-sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sidebar-w:  272px;
  --inspector-w: 440px;
}

*{ box-sizing: border-box; }
html, body, #root{ min-height: 100%; }
body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection{ background: var(--ink); color: var(--paper); }

/* ────────────── Brand mark (carried over) ────────────── */
.mark{
  --mark-size: 32px;
  --mark-bg: var(--paper);
  --mark-ink: var(--obsidian);
  --mark-dot: var(--orange);
  --mark-ring: var(--obsidian);
  --mark-ring-w: 1.25px;
  --mark-radius: 22%;
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--mark-size); height: var(--mark-size);
  background: var(--mark-bg);
  color: var(--mark-ink);
  border: var(--mark-ring-w) solid var(--mark-ring);
  border-radius: var(--mark-radius);
  flex: none; position: relative; line-height: 1; overflow: hidden;
  font-family: var(--font-serif); font-size: 0;
}
.mark::before{
  content: "l"; font-family: var(--font-serif); font-weight: 600;
  font-size: calc(var(--mark-size) * 0.68); line-height: 1;
  color: var(--mark-ink); transform: translateY(3%);
}
.mark::after{
  content: ""; width: calc(var(--mark-size) * 0.14); height: calc(var(--mark-size) * 0.14);
  border-radius: 50%; background: var(--mark-dot);
  margin-left: calc(var(--mark-size) * 0.05); align-self: flex-end;
  margin-bottom: calc(var(--mark-size) * 0.235);
}
.mark.sm{ --mark-size: 22px; --mark-ring-w: 1px; }
.mark.md{ --mark-size: 30px; }
.wordmark{
  font-family: var(--font-serif); font-weight: 600;
  font-size: 22px; letter-spacing: -0.025em;
  color: var(--ink); line-height: 1; text-transform: lowercase;
}
.wordmark .dot{ color: var(--orange-deep); }

/* ============================================================
   App shell — 3 columns: sidebar | main | inspector
   ============================================================ */
.app{
  min-height: 100vh;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr var(--inspector-w);
  background: var(--paper);
}
.app.inspector-closed{ grid-template-columns: var(--sidebar-w) 1fr 0; }

/* ────────────── Sidebar ────────────── */
.sidebar{
  position: sticky; top: 0; height: 100vh;
  background: var(--paper-2);
  border-right: 1px solid var(--rule-2);
  display: flex; flex-direction: column;
  padding: 22px 16px 16px;
}
.sidebar-brand{
  display: inline-flex; align-items: center; gap: 12px;
  padding: 0 6px 22px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-2);
}
.sidebar-brand .wordmark{ font-size: 20px; }
/* Brand mark pops on the sand sidebar */
.sidebar-brand .mark{
  --mark-bg: var(--white);
  --mark-size: 36px;
  --mark-ring-w: 1px;
  box-shadow: 0 1px 0 #14171C0A, 0 1px 3px #14171C10;
}

.sidebar-section{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 6px 10px;
}
.sidebar-nav{ display: flex; flex-direction: column; gap: 2px; }
.nav-item{
  appearance: none; background: transparent; border: 0;
  display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 12px;
  width: 100%; padding: 10px 12px;
  font: inherit; font-size: 14px; color: var(--ink-2);
  text-align: left; cursor: pointer;
  border-radius: 6px;
  position: relative;
  white-space: nowrap;
  transition: background 140ms, color 140ms;
}
.nav-item .ico{ color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; }
.nav-item:hover{ background: var(--paper-3); color: var(--ink); }
.nav-item:hover .ico{ color: var(--ink); }
.nav-item.active{
  color: var(--paper);
  font-weight: 500;
  background: var(--obsidian);
}
.nav-item.active .ico{ color: var(--paper); }
.nav-item.active .count{ color: #FAF7F099; }
.nav-item .count{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
/* Truncate long nav labels ("Buscador de Gaceta Oficial") with ellipsis
   so the count badge to the right is never clipped or overlapped. */
.nav-item > span:nth-child(2){
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar subsection header — sits between the main nav group and a
   secondary group ("Buscadores"). Smaller, uppercase, muted; matches
   the typography of similar group labels elsewhere in the app. */
.nav-subhead{
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-4);
  padding: 14px 12px 6px;
  margin-top: 4px;
  border-top: 1px solid var(--rule-2);
}

.sidebar-spacer{ flex: 1; }
.sidebar-user{
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px;
  align-items: center; gap: 12px;
  padding: 10px;
  margin-top: 16px;
  border-top: 1px solid var(--rule-2);
  padding-top: 18px;
  cursor: pointer;
  border-radius: 8px;
}
.sidebar-user:hover{ background: var(--paper-3); }
.sidebar-user .avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #2A3F66, #0B0F14);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 500; font-size: 15px;
}
.sidebar-user > div{ min-width: 0; }
.sidebar-user .name{
  font-weight: 500; font-size: 14px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user .role{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user .chev{ color: var(--ink-3); flex: none; }

/* ============================================================
   Main column
   ============================================================ */
.main{
  display: flex; flex-direction: column;
  min-width: 0;
  position: relative;
}

.topbar{
  position: sticky; top: 0; z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px max(28px, calc(50% - 540px)) 14px;
  background: linear-gradient(var(--paper) 82%, transparent);
}
.search{
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 11px 18px;
  transition: border-color 120ms, box-shadow 120ms;
}
.search:focus-within{ border-color: var(--ink); box-shadow: 0 0 0 3px #0B0F140F; }
.search input{
  border: 0; outline: 0; background: transparent;
  width: 100%; font: inherit; font-size: 14px; color: var(--ink);
}
.search input::placeholder{ color: var(--ink-4); }
.search svg{ color: var(--ink-3); flex: none; }
.search kbd{
  font-family: var(--font-mono); font-size: 10.5px;
  padding: 2px 6px;
  border: 1px solid var(--rule); border-radius: 4px;
  color: var(--ink-3); background: var(--paper);
  letter-spacing: 0.04em;
}
.icon-btn{
  appearance: none; background: var(--white); cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  flex: none;
  transition: border-color 140ms, background 140ms;
}
.icon-btn:hover{ border-color: var(--ink); }
.icon-btn.flush{ background: transparent; border-color: transparent; width: 32px; height: 32px; color: var(--ink-3); }
.icon-btn.flush:hover{ background: var(--paper-3); color: var(--ink); }
.icon-btn.flush.fill{ color: var(--orange-deep); }

/* ── Page header (title + count) ── */
.page-head{
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  padding: 14px max(28px, calc(50% - 540px)) 0;
}
.page-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.page-title .dot{ color: var(--orange-deep); }
.page-count{
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-count b{ color: var(--ink); font-weight: 500; }

/* ── Tab strip ── */
.tabstrip{
  display: flex; align-items: center; gap: 28px;
  padding: 14px max(28px, calc(50% - 540px)) 0;
  border-bottom: 1px solid var(--rule-2);
  margin-top: 0;
}
.tab{
  appearance: none; background: transparent; border: 0;
  padding: 12px 0 16px;
  position: relative;
  font: inherit; font-size: 14px; color: var(--ink-3);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.tab .num{
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-4);
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.tab:hover{ color: var(--ink); }
.tab.active{ color: var(--ink); font-weight: 500; }
.tab.active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--orange);
}
.tab.active .num{
  color: var(--orange-deep);
  background: var(--accent-soft);
  border-color: transparent;
  font-weight: 500;
}

/* ============================================================
   Bill list
   ============================================================ */
.bill-list{
  padding: 24px max(32px, calc(50% - 440px)) 80px;
  display: flex; flex-direction: column;
  gap: 16px;
}

.bill-card{
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 22px 24px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
  position: relative;
}
.bill-card:hover{ border-color: #0B0F1426; }
.bill-card.selected{
  background: var(--white);
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.bill-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.bill-meta{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bill-meta .pl{ color: var(--ink); font-weight: 500; }
.bill-meta .sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

.status-pill{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--orange-deep);
  border: 1px solid #C44A0029;
  white-space: nowrap;
}
.status-pill::before{
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange-deep);
}
.status-pill.ok{ background: var(--ok-soft); color: var(--ok); border-color: #2F6A4733; }
.status-pill.ok::before{ background: var(--ok); }
.status-pill.warn{ background: var(--warn-soft); color: var(--warn); border-color: #9C741633; }
.status-pill.warn::before{ background: var(--warn); }
.status-pill.muted{ background: var(--paper-3); color: var(--ink-3); border-color: var(--rule); }
.status-pill.muted::before{ background: var(--ink-4); }

.bill-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 10px;
  color: var(--ink);
}
.bill-desc{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 70ch;
}

.bill-section{
  display: flex; flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
}
.bill-section-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Impact (sentiment + magnitude) chip ── */
.chips-row{
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.impact-chip{
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.3;
  cursor: default;
  position: relative;
}
.impact-chip .dot{ width: 7px; height: 7px; border-radius: 50%; flex: none; }
.impact-chip .name{ color: var(--ink); }
.impact-chip .arrow{ flex: none; display: inline-flex; opacity: 0.7; }

/* Signal-bar magnitude meter (1–3 ascending bars) */
.impact-chip .meter{
  display: inline-flex; gap: 2px;
  align-items: flex-end;
  height: 11px;
  flex: none;
}
.impact-chip .meter .bar{
  width: 3px;
  background: currentColor;
  opacity: 0.22;
  border-radius: 1px;
}
.impact-chip .meter .bar:nth-child(1){ height: 4px; }
.impact-chip .meter .bar:nth-child(2){ height: 7.5px; }
.impact-chip .meter .bar:nth-child(3){ height: 11px; }
.impact-chip .meter .bar.on{ opacity: 1; }

/* Sentiment colors */
.impact-chip.pos{ color: var(--ok); border-color: #2F6A4733; background: #EFF4EC; }
.impact-chip.pos .dot{ background: var(--ok); }
.impact-chip.pos .name{ color: var(--ok); }
.impact-chip.neg{ color: var(--bad); border-color: #8E372229; background: #F6ECE7; }
.impact-chip.neg .dot{ background: var(--bad); }
.impact-chip.neg .name{ color: var(--bad); }
.impact-chip.neu{ color: var(--warn); border-color: #9C741633; background: #F4EEDB; }
.impact-chip.neu .dot{ background: var(--warn); }
.impact-chip.neu .name{ color: var(--warn); }

/* Hover tooltip */
.impact-tooltip{
  position: absolute;
  bottom: calc(100% + 10px);
  left: -4px;
  width: 280px;
  background: var(--obsidian);
  color: var(--paper);
  border-radius: 10px;
  padding: 14px 16px;
  z-index: 50;
  box-shadow: var(--shadow-pop);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms, transform 140ms;
  white-space: normal;
}
.impact-tooltip::after{
  content: "";
  position: absolute;
  left: 20px; bottom: -5px;
  width: 10px; height: 10px;
  background: var(--obsidian);
  transform: rotate(45deg);
  border-radius: 1px;
}
.impact-chip:hover .impact-tooltip,
.impact-chip:focus-within .impact-tooltip{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.impact-tooltip .tt-head{
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FAF7F0AA;
  margin-bottom: 8px;
}
.impact-tooltip .tt-head .dot{
  width: 6px; height: 6px; border-radius: 50%;
}
.impact-tooltip .tt-head .lvl{ color: var(--paper); }
.impact-tooltip .tt-head .sep{ width: 3px; height: 3px; border-radius: 50%; background: #FAF7F055; }
.impact-tooltip .tt-body{
  margin: 0;
  color: #FAF7F0E0;
  font-size: 13px;
}
.impact-tooltip.pos .tt-head .dot{ background: #7CB97A; }
.impact-tooltip.neg .tt-head .dot{ background: #E78A6D; }
.impact-tooltip.neu .tt-head .dot{ background: #E6C672; }

/* When tooltip would overflow on the right, flip its arrow position */
.impact-tooltip.flip-right{ left: auto; right: -4px; }
.impact-tooltip.flip-right::after{ left: auto; right: 20px; }

/* ── Topic chip ── */
.topic-chip{
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink-2);
  white-space: nowrap;
  line-height: 1.4;
}
.topic-chip.more{ color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }
.bill-card.selected .topic-chip{ background: var(--paper); }

/* ── Note (small body in selected card) ── */
.bill-note{
  background: var(--paper-2);
  border-left: 2px solid var(--orange);
  padding: 12px 14px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-bottom: 14px;
  border-radius: 0 4px 4px 0;
}

/* ── Proponent ── */
.proponent{
  display: flex; align-items: center; gap: 12px;
  padding: 4px 0;
}
.proponent .avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #D1A98C, #8B5A3C);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 500; font-size: 14px;
  position: relative;
}
.proponent .avatar.b{ background: linear-gradient(135deg, #A8B5C9, #4E5E78); }
.proponent .avatar.c{ background: linear-gradient(135deg, #B3C5A6, #5E7350); }
.proponent .avatar.d{ background: linear-gradient(135deg, #C9B0BC, #6F4F62); }
.proponent .avatar .verified{
  position: absolute; right: -2px; bottom: -2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--ok); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--paper);
}
.proponent .who .name{ font-size: 14px; font-weight: 500; color: var(--ink); }
.proponent .who .role{
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 1px;
}

/* ── Card footer ── */
.bill-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-2);
}
.bill-foot .actions{
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink-3);
}
.bill-foot .actions .icon-btn{ width: 32px; height: 32px; border-radius: 8px; }

/* ============================================================
   Inspector (right column)
   ============================================================ */
.inspector{
  background: var(--paper);
  border-left: 1px solid var(--rule-2);
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  min-height: 0;
}
.app.inspector-closed .inspector{ display: none; }
.inspector-scroll{
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 24px 28px 24px;
  display: flex; flex-direction: column;
}

.inspector-head{
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
}
.inspector-meta{
  display: flex; flex-direction: column; gap: 4px;
}
.inspector-meta .row{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.inspector-meta .row .pl{ color: var(--ink); font-weight: 500; }
.inspector-meta .row .sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.inspector-meta .duration{ color: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; }

.inspector-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 12px 0 14px;
  color: var(--ink);
}
.inspector-desc{
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
}

.inspector-block{
  margin-bottom: 22px;
}
.inspector-block-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

/* ── Impact list (expanded rows in inspector) ── */
.impact-list{
  display: flex; flex-direction: column;
  gap: 8px;
}
.impact-row{
  background: var(--white);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-4);
  border-radius: 8px;
  padding: 12px 14px;
}
.impact-row.pos{ border-left-color: var(--ok); background: #F6FAF3; border-color: #2F6A4722; }
.impact-row.neg{ border-left-color: var(--bad); background: #FBF1ED; border-color: #8E372222; }
.impact-row.neu{ border-left-color: var(--warn); background: #FAF4E0; border-color: #9C741622; }
.impact-row-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.impact-row-name{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink);
}
.impact-row-name .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); }
.impact-row.pos .impact-row-name .dot{ background: var(--ok); }
.impact-row.neg .impact-row-name .dot{ background: var(--bad); }
.impact-row.neu .impact-row-name .dot{ background: var(--warn); }
.impact-row-tags{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.impact-row-dir{ display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.impact-row.pos .impact-row-dir{ color: var(--ok); }
.impact-row.neg .impact-row-dir{ color: var(--bad); }
.impact-row.neu .impact-row-dir{ color: var(--warn); }
.impact-row-meter{
  display: inline-flex; gap: 2px; align-items: flex-end; height: 11px;
  color: var(--ink-3);
}
.impact-row.pos .impact-row-meter{ color: var(--ok); }
.impact-row.neg .impact-row-meter{ color: var(--bad); }
.impact-row.neu .impact-row-meter{ color: var(--warn); }
.impact-row-meter .bar{ width: 3px; background: currentColor; opacity: 0.22; border-radius: 1px; }
.impact-row-meter .bar:nth-child(1){ height: 4px; }
.impact-row-meter .bar:nth-child(2){ height: 7.5px; }
.impact-row-meter .bar:nth-child(3){ height: 11px; }
.impact-row-meter .bar.on{ opacity: 1; }
.impact-row-lvl{ color: var(--ink-3); }
.impact-row.pos .impact-row-lvl{ color: var(--ok); }
.impact-row.neg .impact-row-lvl{ color: var(--bad); }
.impact-row.neu .impact-row-lvl{ color: var(--warn); }
.impact-row-note{
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
}

.keypoints{
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.keypoints li{
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.keypoints li::before{
  content: "";
  width: 5px; height: 5px;
  background: var(--ink);
  border-radius: 50%;
  margin-top: 8px;
  margin-left: 4px;
}

/* ── Argument card ── */
.argument{
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 14px 16px;
}
.argument + .argument{ margin-top: 10px; }
.argument-head{
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
  gap: 12px;
}
.arg-tag{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.arg-tag.for{ background: var(--ok-soft); color: var(--ok); }
.arg-tag.against{ background: var(--bad-soft); color: var(--bad); }
.arg-tag svg{ width: 11px; height: 11px; }
.arg-time{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px; color: var(--ink-3);
}
.arg-time .play-btn{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.arg-time .play-btn:hover{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.arg-time .play-btn svg{ margin-left: 1px; }
.argument-body{
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

.inspector-foot{
  flex: none;
  padding: 14px 24px 18px;
  background: var(--paper);
  border-top: 1px solid var(--rule-2);
}
.btn-primary{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 10px;
  padding: 13px 20px;
  cursor: pointer;
  transition: background 140ms, border-color 140ms, transform 80ms;
}
.btn-primary.block{ width: 100%; }
.btn-primary:hover{
  background: #1A1F28;
  box-shadow: 0 6px 14px -8px rgba(11,15,20,.45);
  transform: translateY(-1px);
}
.btn-primary:active{ background: #000; transform: translateY(0); box-shadow: none; }
.btn-primary svg{ transition: transform 140ms; }
.btn-primary:hover svg{ transform: translateX(2px); }

.btn-text{
  appearance: none; background: transparent; border: 0;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-text:hover{ color: var(--orange-deep); }

/* ============================================================
   Bill Detail screen — expediente completo
   ============================================================ */
.app.view-detail{
  grid-template-columns: var(--sidebar-w) 1fr var(--inspector-w);
}

.detail-main{
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--paper);
}

.detail-topbar{
  position: sticky; top: 0; z-index: 5;
  padding: 18px max(28px, calc(50% - 540px)) 14px;
  background: linear-gradient(var(--paper) 82%, transparent);
  border-bottom: 1px solid var(--rule-2);
}

.crumbs{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.crumb-back{
  appearance: none; cursor: pointer;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  margin-right: 4px;
  transition: border-color 140ms, background 140ms;
}
.crumb-back:hover{ border-color: var(--ink); background: var(--paper-3); }
.crumb{
  color: var(--ink-3);
}
.crumb.link{
  appearance: none; background: transparent; border: 0;
  cursor: pointer;
  font: inherit; color: var(--ink-3);
  padding: 4px 2px;
}
.crumb.link:hover{ color: var(--ink); }
.crumb.current{
  color: var(--ink);
  font-weight: 500;
  text-transform: none;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0;
}
.crumb-sep{ color: var(--ink-4); opacity: 0.7; }

.detail-scroll{
  padding: 22px max(28px, calc(50% - 540px)) 60px;
  display: flex; flex-direction: column;
  gap: 18px;
}

/* ── Detail card (shared) ── */
.dcard{
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  padding: 28px 30px;
}
.dcard-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.dcard-meta{ display: flex; flex-direction: column; gap: 4px; }
.dcard-meta .row{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.dcard-meta .pl{ color: var(--ink); font-weight: 500; }
.dcard-meta .sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.dcard-meta .duration{
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.04em; color: var(--ink-3);
}

.dcard-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 4px 0 14px;
  text-wrap: pretty;
}
.dcard-desc{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 22px;
  max-width: 72ch;
}
.dcard-h2{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 18px;
}

/* ── Detail keypoints (bulleted) ── */
.dk{ margin: 6px 0 22px; }
.dk-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.dk-list{
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 7px;
}
.dk-list li{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.dk-list li::before{
  content: "";
  width: 5px; height: 5px;
  background: var(--ink);
  border-radius: 50%;
  margin-top: 8px;
  margin-left: 4px;
}

/* ── Proponent row in detail ── */
.proponent-row{
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-2);
}
.proponent-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

/* ── Impact detail cards ── */
.impact-detail-list{
  display: flex; flex-direction: column;
  gap: 12px;
}
.impact-detail{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink-4);
  border-radius: 10px;
  padding: 18px 20px;
}
.impact-detail.pos{ border-left-color: var(--ok); background: #F5F9F1; border-color: #2F6A4722; }
.impact-detail.neg{ border-left-color: var(--bad); background: #FBF1ED; border-color: #8E372222; }
.impact-detail.neu{ border-left-color: var(--warn); background: #FAF4E0; border-color: #9C741622; }

.impact-detail-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.impact-detail-name{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 500; color: var(--ink);
}
.impact-detail-name .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.impact-detail.pos .impact-detail-name .dot{ background: var(--ok); }
.impact-detail.neg .impact-detail-name .dot{ background: var(--bad); }
.impact-detail.neu .impact-detail-name .dot{ background: var(--warn); }

.sentiment-pill{
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--paper-2);
  color: var(--ink-3);
  border: 1px solid var(--rule);
}
.sentiment-pill.pos{ background: var(--ok-soft);  color: var(--ok);  border-color: #2F6A4733; }
.sentiment-pill.neg{ background: var(--bad-soft); color: var(--bad); border-color: #8E372233; }
.sentiment-pill.neu{ background: var(--warn-soft);color: var(--warn);border-color: #9C741633; }

.impact-detail-sub{
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.impact-detail-meter{
  display: inline-flex; gap: 2px; align-items: flex-end; height: 11px;
  color: var(--ink-3);
}
.impact-detail.pos .impact-detail-meter{ color: var(--ok); }
.impact-detail.neg .impact-detail-meter{ color: var(--bad); }
.impact-detail.neu .impact-detail-meter{ color: var(--warn); }
.impact-detail-meter .bar{ width: 3px; background: currentColor; opacity: 0.22; border-radius: 1px; }
.impact-detail-meter .bar:nth-child(1){ height: 4px; }
.impact-detail-meter .bar:nth-child(2){ height: 7.5px; }
.impact-detail-meter .bar:nth-child(3){ height: 11px; }
.impact-detail-meter .bar.on{ opacity: 1; }

.impact-detail-note{
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.impact-detail .dk{ margin-top: 14px; margin-bottom: 0; }
.impact-detail .dk-label{ color: var(--ink-3); }

/* ── Argumentos detail ── */
.arg-detail-list{
  display: flex; flex-direction: column;
  gap: 12px;
}
.arg-detail{
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 18px;
}
.arg-detail .arg-tag{
  margin-bottom: 12px;
  background: transparent;
  border: 1px solid currentColor;
  padding: 4px 10px;
}
.arg-detail .arg-tag.for{ color: var(--ok); }
.arg-detail .arg-tag.against{ color: var(--bad); }
.arg-detail-body{
  margin: 0 0 14px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.arg-detail-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.proponent.compact .avatar{ width: 32px; height: 32px; font-size: 12px; }
.proponent.compact .avatar .verified{ display: none; }
.arg-play{
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.arg-play:hover{ border-color: var(--ink); }
.arg-play-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
}
.arg-play-icon svg{ margin-left: 1px; }

/* ============================================================
   Video + Transcript panel (right column on detail)
   ============================================================ */
.video-panel{
  background: var(--paper);
  border-left: 1px solid var(--rule-2);
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 20px 22px;
  gap: 16px;
}

.video-frame{
  background: var(--obsidian);
  border-radius: 12px;
  overflow: hidden;
  flex: none;
}
.video-thumb{
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 80% at 30% 30%, #1B2330 0%, #0B0F14 60%, #060A10 100%);
  display: flex; align-items: center; justify-content: center;
}
.video-thumb::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, #0008 100%);
}
.video-play{
  appearance: none;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #FFFFFFE6;
  color: var(--obsidian);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: transform 140ms, background 140ms;
  box-shadow: 0 6px 20px #0006;
}
.video-play:hover{ transform: scale(1.04); background: #fff; }
.video-play svg{ margin-left: 3px; }

.video-bar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 12px;
  color: #FAF7F0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.video-bar .t-now,
.video-bar .t-end{ color: #FAF7F0C0; }
.video-bar .scrub{
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: #FFFFFF22;
}
.video-bar .scrub .fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--orange);
  border-radius: 999px;
}
.video-bar .scrub .knob{
  position: absolute; top: 50%;
  width: 10px; height: 10px;
  margin-left: -5px; margin-top: -5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px #0006;
}

.vp-session{ flex: none; }
.vp-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 4px;
}
.vp-meta{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.vp-transcript{
  flex: 1;
  min-height: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule-2);
  padding-top: 14px;
}
.vp-transcript-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  flex: none;
}
.vp-transcript-label{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.link-btn{
  appearance: none; background: transparent; border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit; font-size: 12px;
  color: var(--ink-3);
}
.link-btn:hover{ color: var(--ink); }

.vp-transcript-list{
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  display: flex; flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
}
.vp-transcript-list::-webkit-scrollbar{ width: 8px; }
.vp-transcript-list::-webkit-scrollbar-thumb{
  background: #0B0F1422; border-radius: 4px;
  border: 2px solid transparent; background-clip: content-box;
}

.tx{
  border-left: 2px solid transparent;
  padding: 4px 4px 4px 10px;
}
.tx.current{
  border-left-color: var(--orange);
  background: #FF7A290F;
  border-radius: 0 6px 6px 0;
  padding: 8px 10px 8px 10px;
}
.tx-head{
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.tx-time{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.tx.current .tx-time{
  color: var(--orange-deep);
  font-weight: 500;
}
.tx-speaker{
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.tx-text{
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.tx.current .tx-text{ color: var(--ink); }

/* ============================================================
   Responsive — collapse right column below 1180px
   ============================================================ */
@media (max-width: 1180px){
  .app{ grid-template-columns: var(--sidebar-w) 1fr; }
  .inspector,
  .video-panel,
  .rr-panel,
  .ts-side{
    display: none;
  }
  .app.inspector-open .inspector,
  .app.view-detail .video-panel,
  .app.temas-detail .rr-panel,
  .app.actores-detail .rr-panel,
  .app.ses-transcript .ts-side{
    display: flex;
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: var(--inspector-w);
    z-index: 80;
    box-shadow: -24px 0 60px -28px #0B0F1466;
  }
}
@media (max-width: 880px){
  :root{ --sidebar-w: 0px; }
  .app{ grid-template-columns: 1fr; }
  .sidebar{ display: none; }
  .topbar, .tabstrip, .bill-list,
  .detail-topbar, .detail-scroll,
  .transcript-center{
    padding-left: 16px; padding-right: 16px;
  }
}

/* ============================================================
   Tweaks (body data attrs)
   ============================================================ */
body[data-density="compact"] .bill-card{ padding: 16px 20px; }
body[data-density="compact"] .bill-list{ gap: 10px; padding-top: 18px; }
body[data-density="compact"] .bill-title{ font-size: 19px; margin-bottom: 6px; }
body[data-density="compact"] .bill-desc{ margin-bottom: 12px; }
body[data-density="compact"] .bill-foot{ margin-top: 12px; padding-top: 12px; }

.impact-chip.more-chip{
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--paper-2);
  border-color: var(--rule);
}

/* ── Collapsible block (inspector sections) ── */
.collapse-block{
  margin-bottom: 22px;
}
.collapse-head{
  appearance: none;
  display: flex; align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 0;
  margin: -6px 0 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
}
.collapse-head .inspector-block-label{ margin: 0; flex: 1; }
.collapse-count{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: 999px;
}
.collapse-chev{
  display: inline-flex;
  color: var(--ink-3);
  transition: transform 160ms;
}
.collapse-block.open .collapse-chev{ transform: rotate(180deg); }
.collapse-head:hover{ color: var(--ink); }
.collapse-head:hover .collapse-chev{ color: var(--ink); }
.collapse-body{
  padding-top: 8px;
}

/* ============================================================
   Temas — list cards
   ============================================================ */
.topic-card{
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 22px 24px 18px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
  position: relative;
}
.topic-card:hover{ border-color: #0B0F1426; }
.topic-card.selected{
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}

.topic-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.topic-meta{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.topic-meta .sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

.source-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  background: #E6EEF8;
  color: #1F4E8A;
  border: 1px solid #1F4E8A29;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.source-pill svg{ opacity: 0.85; }

.topic-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 4px 0 8px;
  color: var(--ink);
}
.topic-desc{
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px;
  max-width: 72ch;
}
.topic-section{
  display: flex; flex-direction: column;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
}
.topic-section-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.topic-foot{
  display: flex; align-items: center; justify-content: flex-end;
  gap: 4px;
  margin-top: 12px;
}
.topic-foot .icon-btn{ width: 32px; height: 32px; border-radius: 8px; }

/* ── Sentiment badge (cards) ── */
.sent-badge-row{
  display: flex; flex-wrap: wrap;
  gap: 8px;
}
.sent-badge{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: var(--paper);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  line-height: 1.3;
}
.sent-badge .sent-ico{
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: currentColor;
}
.sent-badge .sent-ico svg{ color: var(--paper); }
.sent-badge.pos{ color: var(--ok);  background: #EEF6E9; border-color: #2F6A4733; }
.sent-badge.neg{ color: var(--bad); background: #F8E9E3; border-color: #8E372233; }
.sent-badge.neu{ color: var(--warn);background: #F4ECCF; border-color: #9C741633; }
.sent-badge.more{
  color: var(--ink-3);
  background: var(--paper-3);
  border: 1px dashed var(--rule);
  padding: 5px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.sent-badge.sm{
  font-size: 12px;
  padding: 3px 12px 3px 4px;
}
.sent-badge.sm .sent-ico{ width: 16px; height: 16px; }

/* ── Inspector tweaks for Temas ── */
.company-chip{
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 13px;
  color: var(--ink);
}
.company-chip .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-4);
  flex: none;
}
.company-chip.pos{ color: var(--ok);  border-color: #2F6A4733; background: #EFF4EC; }
.company-chip.pos .dot{ background: var(--ok); }
.company-chip.neg{ color: var(--bad); border-color: #8E372229; background: #F6ECE7; }
.company-chip.neg .dot{ background: var(--bad); }
.company-chip.neu{ color: var(--warn);border-color: #9C741633; background: #F4EEDB; }
.company-chip.neu .dot{ background: var(--warn); }
.company-chip.more{
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  background: var(--paper-2);
}

/* ── Actor mini grid (inspector) ── */
.actor-mini-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 14px;
}
.actor-mini{
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.actor-mini .avatar{
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #D1A98C, #8B5A3C);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 500; font-size: 12px;
  position: relative;
  flex: none;
}
.actor-mini .avatar.b{ background: linear-gradient(135deg, #A8B5C9, #4E5E78); }
.actor-mini .avatar.c{ background: linear-gradient(135deg, #B3C5A6, #5E7350); }
.actor-mini .avatar.d{ background: linear-gradient(135deg, #C9B0BC, #6F4F62); }
.stance-dot{
  position: absolute; right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid var(--paper);
}
.stance-dot.for{      background: var(--ok); }
.stance-dot.against{  background: var(--bad); }
.stance-dot.neutral{  background: var(--warn); }
.actor-mini .who{ min-width: 0; }
.actor-mini .name{
  font-size: 13px; font-weight: 500; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.actor-mini .role{
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.actor-mini.more{
  display: inline-flex; align-items: center; justify-content: center;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--paper-2);
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  align-self: center;
}

/* ── Inspector misc helpers ── */
.inspector-note{
  margin: 0 0 10px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.inspector-note b{ color: var(--ink); font-weight: 500; }
.link-list{
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.link-list.inline{
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: center;
}
.link-list a.dim-link{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-underline-offset: 3px;
  font-size: 13px;
  cursor: pointer;
}
.link-list a.dim-link:hover{ text-decoration-color: var(--ink); }
.link-list .more-link{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.inspector-foot.inspector-foot-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 22px 14px;
}
.foot-actions{
  display: inline-flex; align-items: center; gap: 2px;
}
.foot-actions .icon-btn{ width: 32px; height: 32px; border-radius: 8px; }
.inspector-foot.inspector-foot-row .btn-primary{
  padding: 11px 18px;
}

/* ============================================================
   Tema Detail
   ============================================================ */
.app.temas-detail{
  grid-template-columns: var(--sidebar-w) 1fr var(--inspector-w);
}
.app.temas-detail .inspector,
.app.temas-detail .video-panel{ display: none; }
.app.view-list .rr-panel{ display: none; }

.dcard-h2-row{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px;
}
.dcard-h2-row .dcard-h2{ margin: 0; }
.dcard-count{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: 999px;
}

.sub-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 18px 0 12px;
}
.sub-label.compact{ margin-top: 16px; margin-bottom: 8px; }
.sub-label.no-margin{ margin: 0; }

/* Tema header card extras */
.mentions-block{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-2);
}
.mentions-line{
  font-size: 13.5px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.mentions-line b{ color: var(--ink); font-weight: 500; }

/* Impact: company row (detail) */
.cmp-list{
  display: flex; flex-direction: column;
  gap: 14px;
}
.cmp-row{
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-2);
}
.cmp-row:last-child{ padding-bottom: 0; border-bottom: 0; }
.cmp-row-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.cmp-row-name{
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.cmp-row-note{
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 72ch;
}

/* Impact: industry row */
.ind-list{
  display: flex; flex-direction: column;
}
.ind-row{
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: baseline;
}
.ind-row:last-child{ border-bottom: 0; }
.ind-row-name{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.ind-row-note{
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* Actor list (detail) */
.actor-list{
  display: flex; flex-direction: column;
  gap: 4px;
}
.actor-row{
  border-radius: 10px;
  transition: background 140ms;
}
.actor-row:hover{ background: var(--paper-2); }
.actor-row.open{ background: var(--paper-2); }
.actor-row-main{
  display: grid;
  grid-template-columns: minmax(220px, auto) 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 14px;
  cursor: pointer;
}
.actor-row-who{
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.actor-row-who .avatar{
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #D1A98C, #8B5A3C);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 500; font-size: 14px;
  flex: none;
}
.actor-row-who .avatar.b{ background: linear-gradient(135deg, #A8B5C9, #4E5E78); }
.actor-row-who .avatar.c{ background: linear-gradient(135deg, #B3C5A6, #5E7350); }
.actor-row-who .avatar.d{ background: linear-gradient(135deg, #C9B0BC, #6F4F62); }
.actor-row-who .name{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.actor-row-who .role{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 2px;
}
.actor-row-tags{
  display: flex; flex-wrap: wrap;
  gap: 6px;
}
.actor-tag{
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ECEEF6;
  color: #3C4663;
  border: 1px solid #3C46631F;
  font-size: 12px;
  white-space: nowrap;
}
.actor-row-right{ display: inline-flex; align-items: center; }
.stance-pill{
  appearance: none;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid currentColor;
  background: var(--paper);
  cursor: pointer;
  transition: filter 140ms;
}
.stance-pill .dot{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stance-pill svg{ transition: transform 160ms; }
.stance-pill.open svg{ transform: rotate(180deg); }
.stance-pill.for{      color: var(--ok);   background: #EEF6E9; }
.stance-pill.against{  color: var(--bad);  background: #F8E9E3; }
.stance-pill.neutral{  color: var(--warn); background: #F4ECCF; }
.stance-pill:hover{ filter: brightness(0.97); }

.actor-evidence{
  padding: 4px 14px 18px 66px;
}
.ev-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.ev-list{
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 8px;
}
.ev-item{
  display: grid;
  grid-template-columns: 3px 1fr;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  padding: 12px 14px;
}
.ev-bar{
  border-radius: 2px;
  background: var(--ink-4);
}
.ev-item.for     .ev-bar{ background: var(--ok); }
.ev-item.against .ev-bar{ background: var(--bad); }
.ev-item.neutral .ev-bar{ background: var(--warn); }
.ev-head{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.ev-time{ color: var(--ink); font-weight: 500; }
.ev-sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.ev-session{ color: var(--ink-3); }
.ev-quote{
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

/* Fuente sesión card */
.fuente-card{
  background: #F4F1E7;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 24px 26px;
}
.fuente-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 16px;
}
.fuente-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.fuente-meta{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.fuente-sala{
  font-size: 13px;
  color: var(--ink-3);
}
.fuente-summary{
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0 0 6px;
}
.fuente-quotes{
  display: flex; flex-direction: column;
  gap: 14px;
}
.fuente-quote{
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  padding: 14px 16px;
}
.fq-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.fq-agenda{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.icon-btn.flush.sm{ width: 26px; height: 26px; }
.fq-quote{
  margin: 0 0 12px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.fq-speaker{
  display: flex; align-items: center; gap: 14px;
  border-top: 1px solid var(--rule-2);
  padding-top: 10px;
}
.fq-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.fq-who{
  display: flex; align-items: center; gap: 10px;
}
.fq-who .avatar{
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #D1A98C, #8B5A3C);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 500; font-size: 11px;
}
.fq-who .avatar.b{ background: linear-gradient(135deg, #A8B5C9, #4E5E78); }
.fq-who .avatar.c{ background: linear-gradient(135deg, #B3C5A6, #5E7350); }
.fq-who .avatar.d{ background: linear-gradient(135deg, #C9B0BC, #6F4F62); }
.fq-who .name{ font-size: 13px; font-weight: 500; color: var(--ink); }
.fq-who .role{
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 1px;
}

.ver-info-btn{
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px;
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--white);
  border: 1px solid var(--rule);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.ver-info-btn:hover{ border-color: var(--ink); }
.ver-info-btn svg:first-child{ color: var(--ink-3); }
.ver-info-btn svg:last-child{ margin-left: 2px; }

/* Análisis: rel chips */
.rel-chips{
  display: flex; flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.rel-chip{
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px 6px 12px;
  border-radius: 999px;
  border: 1px solid #3C46631F;
  background: #ECEEF6;
  color: #3C4663;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms;
}
.rel-chip:hover{ border-color: #3C4663; background: #E3E7F2; }

/* Trend block / chart */
.trend-block{
  margin: 22px 0 8px;
  padding: 18px;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: var(--paper);
}
.trend-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.trend-range{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.trend-sub{
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.freq-chart-wrap{
  position: relative;
  width: 100%;
}
.freq-chart{
  width: 100%;
  height: 140px;
  display: block;
}
.freq-x-axis{
  position: relative;
  height: 18px;
  margin-top: 2px;
}
.freq-x-tick{
  position: absolute;
  transform: translateX(-50%);
  top: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}

/* Hitos timeline */
.hitos{
  list-style: none;
  padding: 0; margin: 0;
  position: relative;
}
.hitos::before{
  content: "";
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--rule);
}
.hito{
  position: relative;
  padding: 6px 0 18px 36px;
}
.hito:last-child{ padding-bottom: 4px; }
.hito-marker{
  position: absolute;
  left: 4px; top: 8px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink-4);
  box-shadow: 0 0 0 3px var(--paper);
}
.hito.first      .hito-marker{ border-color: #2E66C7; }
.hito.committee  .hito-marker{ border-color: #6E45B5; }
.hito.press      .hito-marker{ border-color: var(--ok); }
.hito.spontaneous .hito-marker{ border-color: #C2701A; }
.hito.formal     .hito-marker{ border-color: var(--bad); }

.hito-head{
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.hito-date{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hito-tag{
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.hito-tag.first       { background: #DDE7F6; color: #2E66C7; }
.hito-tag.committee   { background: #E7DDF6; color: #6E45B5; }
.hito-tag.press       { background: var(--ok-soft); color: var(--ok); }
.hito-tag.spontaneous { background: #F6E4D0; color: #C2701A; }
.hito-tag.indirect    { background: #F6EAD9; color: #B07333; }
.hito-tag.formal      { background: var(--bad-soft); color: var(--bad); }

.hito-title{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.hito-text{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* ============================================================
   Resumen rápido panel (right column on Tema detail)
   ============================================================ */
.rr-panel{
  background: var(--paper);
  border-left: 1px solid var(--rule-2);
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 24px 22px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.rr-head{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.rr-list{
  display: flex; flex-direction: column;
  gap: 10px;
}
.stat-card{
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 14px 16px;
}
.stat-card.mag{
  background: linear-gradient(180deg, #FFFFFF, #FFF6EE);
  border-color: #FF7A292B;
}
.stat-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.stat-value-row{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.stat-value{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.stat-hint{
  font-size: 12.5px;
  color: var(--ink-3);
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: 2px;
  line-height: 1.5;
}
.stat-hint .dot{
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}
.stat-hint .dot.pos{ background: var(--ok); }
.stat-hint .dot.neg{ background: var(--bad); }
.stat-hint .dot.neu{ background: var(--warn); }
.stat-pill{
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Magnitud meter */
.mag-meter{
  display: inline-flex; align-items: center; gap: 4px;
}
.mag-dot{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rule);
  border: 1px solid #0B0F141A;
}
.mag-dot.on{
  background: var(--orange);
  border-color: var(--orange-deep);
}


/* ============================================================
   Sesiones legislativas — list cards
   ============================================================ */
.session-card .topic-section{ margin-top: 4px; }
.session-card .topic-title{ font-size: 22px; }

/* State pill (En Debate Legislativo / En Comisión / etc) */
.state-pill{
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #ECEEF6;
  color: #3C4663;
  border: 1px solid #3C46631F;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Inspector head with stacked tags */
.inspector-head-tags{
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 6px;
}

/* Role tag (Ponente / Presidente / Interviniente) */
.role-tag{
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: #E6EEF8;
  color: #1F4E8A;
  border: 1px solid #1F4E8A29;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex: none;
}

/* Actor mini list (inspector + detail) — full-width rows with role-tag */
.actor-mini-list{
  display: flex; flex-direction: column;
  gap: 10px;
}
.actor-mini.full{
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  width: 100%;
}
.actor-mini.full .avatar{ width: 36px; height: 36px; font-size: 13px; }
.actor-mini.full .name{ font-size: 14px; }
.actor-mini.full .role{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 2px;
}

/* ============================================================
   Sesion detail
   ============================================================ */
.ses-state-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.ses-divider{
  height: 1px;
  background: var(--rule-2);
  margin: 22px 0;
}
.ses-actor-list{
  display: flex; flex-direction: column;
  gap: 8px;
}

/* Dicho (quote) card */
.dicho-list{
  display: flex; flex-direction: column;
  gap: 12px;
}
.dicho{
  background: #EEF1F8;
  border: 1px solid #C7D2E5;
  border-radius: 10px;
  padding: 16px 18px;
}
.dicho-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.dicho-quote{
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
.dicho-play{
  appearance: none;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--white);
  border: 1px solid #1F4E8A33;
  color: #1F4E8A;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.dicho-play:hover{ background: #DCE5F5; }
.dicho-play svg{ margin-left: 1px; }
.dicho-foot{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid #C7D2E555;
}
.dicho-who{
  display: flex; align-items: center; gap: 10px;
}
.dicho-who .avatar{
  width: 28px; height: 28px; border-radius: 50%;
  background: linear-gradient(135deg, #D1A98C, #8B5A3C);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 500; font-size: 11px;
}
.dicho-who .avatar.b{ background: linear-gradient(135deg, #A8B5C9, #4E5E78); }
.dicho-who .avatar.c{ background: linear-gradient(135deg, #B3C5A6, #5E7350); }
.dicho-who .avatar.d{ background: linear-gradient(135deg, #C9B0BC, #6F4F62); }
.dicho-who .name{ font-size: 13px; font-weight: 500; color: var(--ink); }
.dicho-who .role{
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-4); margin-top: 1px;
}
.dicho-time{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* Detailed timeline list */
.tl-list{
  list-style: none;
  padding: 0; margin: 0;
  position: relative;
}
.tl-list::before{
  content: "";
  position: absolute;
  left: 64px; top: 16px; bottom: 16px;
  width: 1px;
  background: var(--rule);
}
.tl-row{
  display: grid;
  grid-template-columns: 56px 18px 1fr;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 0 22px;
  position: relative;
}
.tl-row:last-child{ padding-bottom: 4px; }
.tl-time{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding-top: 2px;
  text-align: right;
}
.tl-row.highlight .tl-time{ color: var(--obsidian); font-weight: 500; }
.tl-marker{
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--obsidian);
  margin: 4px auto 0;
  box-shadow: 0 0 0 3px var(--white);
}
.tl-row.highlight .tl-marker{
  background: var(--orange);
}
.tl-body{ min-width: 0; }
.tl-row-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.tl-title{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.tl-play{
  appearance: none;
  flex: none;
  width: 28px; height: 28px;
  border-radius: 7px;
  background: var(--white);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.tl-play:hover{ border-color: var(--ink); background: var(--paper-2); }
.tl-play svg{ margin-left: 1px; }
.tl-text{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 70ch;
}

/* ============================================================
   Sesion — Full transcript screen
   ============================================================ */
.app.ses-transcript{
  grid-template-columns: var(--sidebar-w) 1fr var(--inspector-w);
}
.app.ses-transcript .inspector,
.app.ses-transcript .video-panel,
.app.ses-transcript .rr-panel{ display: none; }

.transcript-main{
  background: var(--paper);
}
.transcript-center{
  padding: 8px max(28px, calc(50% - 540px)) 60px;
  display: flex; flex-direction: column;
  gap: 20px;
}
.ts-header{
  padding: 6px 0 0;
}
.ts-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.018em;
  margin: 0 0 4px;
  color: var(--ink);
}
.ts-meta{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ts-video{
  background: var(--obsidian);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}
.ts-video .video-thumb{
  aspect-ratio: 16 / 9;
}
.ts-video-label{
  position: absolute;
  top: 14px; left: 16px;
  color: #FAF7F0C0;
  font-size: 12px;
  font-weight: 500;
  z-index: 2;
}
.ts-video-speaker{
  position: absolute;
  left: 16px; bottom: 56px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #00000099;
  color: #FAF7F0;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  z-index: 2;
}
.ts-video-speaker .dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok);
}

/* Resumen list */
.ts-resumen{
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 12px;
  padding: 18px 20px 14px;
}
.ts-resumen-list{
  list-style: none;
  padding: 0; margin: 0;
  position: relative;
}
.ts-resumen-list::before{
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--rule);
}
.ts-resumen-row{
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  border-radius: 6px;
  transition: background 140ms;
}
.ts-resumen-row:hover{ background: var(--paper-2); padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }
.ts-resumen-marker{
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink-3);
  margin-top: 4px;
  box-shadow: 0 0 0 3px var(--white);
}
.ts-resumen-row.highlight .ts-resumen-marker{
  background: #6E45B5;
  border-color: #6E45B5;
}
.ts-resumen-body{ display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ts-resumen-time{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.ts-resumen-row.highlight .ts-resumen-time{ color: #6E45B5; font-weight: 500; }
.ts-resumen-title{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.ts-resumen-row.highlight .ts-resumen-title{ color: #6E45B5; }

/* Right side — full transcript */
.ts-side{
  background: var(--paper);
  border-left: 1px solid var(--rule-2);
  position: sticky; top: 0;
  height: 100vh;
  display: flex; flex-direction: column;
  min-height: 0;
  padding: 22px 26px 24px;
}
.ts-side-head{
  flex: none;
  margin-bottom: 14px;
}
.ts-side-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.ts-side-list{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  display: flex; flex-direction: column;
  gap: 18px;
  scrollbar-width: thin;
}
.ts-side-list::-webkit-scrollbar{ width: 8px; }
.ts-side-list::-webkit-scrollbar-thumb{
  background: #0B0F1422; border-radius: 4px;
  border: 2px solid transparent; background-clip: content-box;
}

.ts-tx{
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 140ms;
  border-bottom: 1px solid var(--rule-2);
}
.ts-tx:hover{ background: var(--paper-2); }
.ts-tx.active{
  background: #EFE4FA;
  border-bottom-color: transparent;
}
.ts-tx-head{
  display: inline-flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.ts-tx-time{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}
.ts-tx.active .ts-tx-time{ color: #6E45B5; font-weight: 600; }
.ts-tx-speaker{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.ts-tx.active .ts-tx-speaker{ color: #6E45B5; }
.ts-tx-text{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.ts-tx.active .ts-tx-text{ color: var(--ink); }


/* ============================================================
   Actores claves
   ============================================================ */

/* Avatar */
.act-avatar{
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #D1A98C, #8B5A3C);
  color: var(--paper);
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 16px;
  width: 48px; height: 48px;
  flex: none;
}
.act-avatar.b{ background: linear-gradient(135deg, #A8B5C9, #4E5E78); }
.act-avatar.c{ background: linear-gradient(135deg, #B3C5A6, #5E7350); }
.act-avatar.d{ background: linear-gradient(135deg, #C9B0BC, #6F4F62); }
.act-avatar.sm{ width: 32px; height: 32px; font-size: 12px; }
.act-avatar.md{ width: 40px; height: 40px; font-size: 14px; }
.act-avatar.lg{ width: 56px; height: 56px; font-size: 18px; }
.act-avatar.xl{ width: 84px; height: 84px; font-size: 26px; }

/* List card */
.actor-card .actor-card-head{
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
}
.actor-card-id{ min-width: 0; }
.actor-card-name{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
}
.actor-card-name.lg{ font-size: 24px; }
.actor-card-role{
  font-size: 13.5px;
  color: var(--ink-3);
  margin-top: 4px;
}
.actor-card-sec{
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
  display: flex; flex-direction: column;
  gap: 10px;
}
.actor-card-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Postura chip (subtle blue, used widely on Actores screens) */
.postura-chip{
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: #E6EEF8;
  color: #1F4E8A;
  border: 1px solid #1F4E8A29;
  font-size: 13px;
  white-space: nowrap;
  line-height: 1.4;
}
.chips-row.tight{ gap: 6px; }

/* Inspector head */
.actor-inspector-head{
  display: flex; gap: 14px;
  margin-bottom: 18px;
}

/* Relation pill */
.relation-pill{
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.relation-pill.allied{
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid #2F6A4733;
}
.relation-pill.opposed{
  background: var(--bad-soft);
  color: var(--bad);
  border: 1px solid #8E372233;
}

/* Alianza row */
.alianza-row{
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-2);
  grid-template-columns: 32px 1fr auto;
}
.alianza-row:last-child{ border-bottom: 0; }

/* Detail layout */
.app.actores-detail{
  grid-template-columns: var(--sidebar-w) 1fr var(--inspector-w);
}
.app.actores-detail .inspector,
.app.actores-detail .video-panel{ display: none; }

/* Detail header */
.actor-detail-head{
  display: flex; gap: 22px;
  align-items: center;
  margin-bottom: 18px;
}
.actor-detail-id{ min-width: 0; }
.actor-detail-name{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 4px;
}
.actor-detail-role{
  font-size: 15px;
  color: var(--ink-3);
}

.range-pill{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  background: var(--paper-2);
  padding: 4px 12px;
  border-radius: 999px;
}

/* Hito legend */
.hito-legend{
  display: flex; flex-wrap: wrap;
  gap: 12px 18px;
  padding: 4px 0 8px;
  margin-bottom: 8px;
}
.hito-legend-item{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink-3);
}
.hito-legend-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}

/* Actor historial timeline */
.actor-hitos{
  list-style: none;
  padding: 0; margin: 0;
  position: relative;
}
.actor-hitos::before{
  content: "";
  position: absolute;
  left: 5px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--rule);
}
.actor-hito{
  position: relative;
  padding: 4px 0 18px 28px;
}
.actor-hito:last-child{ padding-bottom: 4px; }
.actor-hito-dot{
  position: absolute;
  left: 0; top: 8px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--ink-4);
  box-shadow: 0 0 0 3px var(--white);
}
.actor-hito.cargo       .actor-hito-dot{ background: #2E66C7; }
.actor-hito.partido     .actor-hito-dot{ background: #6E45B5; }
.actor-hito.postura     .actor-hito-dot{ background: #C2701A; }
.actor-hito.declaracion .actor-hito-dot{ background: #2F6A47; }

.actor-hito-head{
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.actor-hito-date{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.actor-hito-tag{
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.actor-hito-tag.cargo      { background: #DDE7F6; color: #2E66C7; }
.actor-hito-tag.partido    { background: #E7DDF6; color: #6E45B5; }
.actor-hito-tag.postura    { background: #F6E4D0; color: #C2701A; }
.actor-hito-tag.declaracion{ background: var(--ok-soft); color: var(--ok); }
.actor-hito-title{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.actor-hito-text{
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

/* Alianza list (detail) */
.alianza-list{
  display: flex; flex-direction: column;
}

/* Responsive hooks (extends existing) */
.app.actores-detail .rr-panel{ display: flex; }


/* ============================================================
   Configuración (Settings) — top-tab nav
   ============================================================ */
.conf-app.inspector-closed{ grid-template-columns: var(--sidebar-w) 1fr; }
.set-content{
  padding: 28px max(28px, calc(50% - 540px)) 96px;
  display: flex; flex-direction: column;
  gap: 22px;
}

/* Tabs */
.tabstrip.settings-tabs{
  padding-top: 10px;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--rule-2);
}
.tabstrip.settings-tabs .tabstrip-sep{
  display: inline-block;
  width: 1px; height: 18px;
  background: var(--rule);
  margin: 0 10px;
  align-self: center;
  margin-bottom: 16px;
}
.tab.settings-tab{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 12px 16px;
  color: var(--ink-3);
}
.tab.settings-tab svg{ opacity: 0.85; }
.tab.settings-tab:hover{ color: var(--ink); }
.tab.settings-tab.active{ color: var(--ink); }
.tab.settings-tab.active svg{ opacity: 1; color: var(--orange-deep); }

/* Page heading inside content */
.set-page-head{
  display: flex; flex-direction: column;
  gap: 4px;
  margin-bottom: 4px;
}
.set-page-head.with-action{
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.set-page-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.set-page-sub{
  font-size: 14px;
  color: var(--ink-3);
  margin: 0;
  max-width: 70ch;
}

.set-section-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 18px 0 12px;
}

.set-stack{
  display: flex; flex-direction: column;
  gap: 18px;
  max-width: 880px;
  width: 100%;
}

/* ── Cards ── */
.set-card{
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  padding: 22px 24px;
}
.set-card.flush{ padding: 0; }
.set-card-head{ margin-bottom: 18px; }
.set-card-title{
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  color: var(--ink);
  margin: 0 0 4px;
}
.set-card-desc{
  font-size: 13px;
  color: var(--ink-3);
  margin: 0;
}
.set-card-foot{
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--rule-2);
}

/* ── Form fields ── */
.set-grid{ display: grid; gap: 14px; }
.set-grid.two{ grid-template-columns: 1fr 1fr; }
@media (max-width: 720px){ .set-grid.two{ grid-template-columns: 1fr; } }

.set-field{
  display: flex; flex-direction: column;
  gap: 6px;
}
.set-field-label{
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.01em;
}
.set-field input{
  width: 100%;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 140ms, box-shadow 140ms;
}
.set-field input:focus,
.set-field.focused input{
  border-color: var(--ink);
  box-shadow: 0 0 0 3px #0B0F140F;
}
.set-field input::placeholder{ color: var(--ink-4); }
.set-field-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0 12px 0 0;
  background: var(--white);
}
.set-field-row input{
  border: 0;
  background: transparent;
  padding-right: 0;
}
.set-field-row input:focus{ box-shadow: none; }
.set-field-row .btn-text{ padding: 6px 4px; }

.btn-ghost{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 13px 20px;
  cursor: pointer;
  transition: border-color 140ms, background 140ms, transform 80ms;
}
.btn-ghost:hover{ border-color: var(--ink); }
.btn-ghost.sm{ padding: 9px 14px; font-size: 13px; border-radius: 8px; }
.btn-ghost.icon svg{ color: var(--ink-3); }
.btn-primary.sm{ padding: 9px 16px; font-size: 13.5px; border-radius: 8px; }

/* Account row */
.set-account-row{
  display: inline-flex; align-items: center; gap: 14px;
  padding: 4px 0;
}
.link-quiet{
  appearance: none; background: transparent; border: 0;
  font: inherit; font-size: 13.5px; color: var(--ink-2);
  cursor: pointer;
}
.link-quiet:hover{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.link-danger{
  appearance: none; background: transparent; border: 0;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--bad);
  cursor: pointer;
}
.link-danger:hover{ text-decoration: underline; text-underline-offset: 3px; }
.dot-sep{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }

/* ── Password modal ── */
.set-modal-overlay{
  position: fixed; inset: 0;
  z-index: 200;
  background: #0B0F1466;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.set-modal{
  width: 100%;
  max-width: 440px;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.set-modal-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 6px;
}
.set-modal-head h3{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.set-modal-body{
  padding: 8px 20px 18px;
  display: flex; flex-direction: column;
  gap: 14px;
}
.set-modal-foot{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--rule-2);
}

/* ── Alertas ── */
.set-question{
  font-size: 13px;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.set-rule{
  border: 0;
  border-top: 1px solid var(--rule-2);
  margin: 22px 0;
}
.alert-stack{
  display: flex; flex-direction: column;
  gap: 10px;
}
.alert-option{
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--white);
  transition: border-color 140ms, background 140ms;
}
.alert-option.selected{
  border-color: var(--ink);
  background: #F4F1EA;
  box-shadow: inset 0 0 0 1px #0B0F140F;
}
.alert-option.on.selected{ background: #F4F1EA; }
.alert-option-head{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
}
.alert-option-ico{
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--paper-2);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.alert-option-ico.email{ background: #E6EEF8; color: #1F4E8A; }
.alert-option-ico.wa{ background: #D9F4E2; color: #128C45; }
.alert-option-info{ min-width: 0; }
.alert-option-title{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.alert-option-desc{
  font-size: 12.5px;
  color: var(--ink-3);
}
.alert-option-extra{
  border-top: 1px solid var(--rule-2);
  padding: 12px 16px;
  background: #FBF9F3;
}
.alert-inline-input{
  width: 100%;
  font: inherit; font-size: 13.5px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 9px 12px;
  outline: none;
}
.alert-inline-input:focus{ border-color: var(--ink); }
.alert-inline-input.wa-row{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 0 8px 0 12px;
}
.alert-inline-input.wa-row .cc{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  padding-right: 8px;
  border-right: 1px solid var(--rule-2);
}
.alert-inline-input.wa-row input{
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13.5px; padding: 9px 0;
}
.alert-inline-input.wa-row .btn-text{ font-size: 12.5px; }

/* Toggle override sizing if needed inside alert option */
.alert-option .toggle{ flex: none; }

/* ── Actores Claves ── */
.set-crumbs{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: -2px;
}
.set-crumbs .crumb.link{
  appearance: none; background: transparent; border: 0;
  cursor: pointer;
  font: inherit; color: var(--ink-3);
}
.set-crumbs .crumb.link:hover{ color: var(--ink); }
.set-crumbs .crumb.current{
  color: var(--ink); font-family: var(--font-sans); font-weight: 500;
  font-size: 13px; text-transform: none; letter-spacing: 0;
}

.set-toolbar{
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 10px;
  margin-bottom: 14px;
}
@media (max-width: 720px){ .set-toolbar{ grid-template-columns: 1fr; } }
.set-search{
  display: flex; align-items: center; gap: 10px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 9px 14px;
}
.set-search svg{ color: var(--ink-3); }
.set-search input{
  border: 0; outline: 0; background: transparent;
  font: inherit; font-size: 13.5px;
  width: 100%; color: var(--ink);
}
.set-search input::placeholder{ color: var(--ink-4); }
.set-select{
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 9px 14px;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}
.set-select span{ flex: 1; text-align: left; color: var(--ink-2); }
.set-select svg{ color: var(--ink-3); }
.set-select:hover{ border-color: var(--ink); }

.actor-set-list{
  display: flex; flex-direction: column;
}
.actor-set-row{
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-bottom: 1px solid var(--rule-2);
}
.actor-set-row:last-child{ border-bottom: 0; }
.actor-set-av{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.actor-set-av.av-0{ background: linear-gradient(135deg, #DDE8F4, #B6C7DD); color: #1F3D63; }
.actor-set-av.av-1{ background: linear-gradient(135deg, #E7DDF1, #C3B4D9); color: #443469; }
.actor-set-av.av-2{ background: linear-gradient(135deg, #DCE9DC, #B3CCB1); color: #2F5236; }
.actor-set-av.av-3{ background: linear-gradient(135deg, #F1E3D2, #D8BC97); color: #6B4924; }
.actor-set-name{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.actor-set-meta{
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px;
  color: var(--ink-3);
}
.dot-tiny{ width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); }
.actor-set-empresa{
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ink-3);
}
.actor-set-empresa svg{ opacity: 0.7; }

.follow-btn{
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 140ms, background 140ms, color 140ms;
}
.follow-btn:hover{ border-color: var(--ink); }
.follow-btn.is-following{
  background: var(--paper-2);
  border-color: var(--rule);
  color: var(--ink-2);
}
.follow-btn.is-following svg{ color: var(--ok); }

/* Empty state */
.set-empty{
  display: flex; flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 36px 20px 28px;
  gap: 10px;
}
.set-empty-ico{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper-2);
  color: var(--ink-3);
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
}
.set-empty-title{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.set-empty-desc{
  font-size: 13.5px;
  color: var(--ink-3);
  margin: 0 0 8px;
  max-width: 44ch;
}

/* ── Facturación ── */
.plan-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-2);
}
.plan-info{ min-width: 0; }
.plan-name{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 4px;
}
.plan-meta{
  font-size: 13.5px;
  color: var(--ink-3);
}
.plan-price{ color: var(--ink-2); font-weight: 500; }
.plan-pill{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid #2F6A4733;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.plan-pill .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.plan-renewal{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.plan-renewal b{ color: var(--ink); font-weight: 500; }

.pagos-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.pagos-table th{
  text-align: left;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  border-bottom: 1px solid var(--rule-2);
}
.pagos-table td{
  padding: 16px 22px;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-2);
}
.pagos-table tr:last-child td{ border-bottom: 0; }
.pagos-table tbody tr:hover{ background: #FBF9F3; }
.pagos-table .btn-text{ font-size: 13px; }
.status-dot{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ok);
  font-weight: 500;
  font-size: 13px;
}
.status-dot .dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
}

/* ── Mis empresas ── */
.empresa-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 880px){ .empresa-grid{ grid-template-columns: 1fr; } }
.empresa-card{
  background: var(--white);
  border: 1px solid var(--rule-2);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex; flex-direction: column;
  gap: 18px;
}
.empresa-card.is-active{
  border-color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.empresa-card-head{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 14px;
}
.empresa-ico{
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.empresa-name{
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.empresa-industry{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-top: 2px;
}
.empresa-pill{
  display: inline-flex; align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ok);
  background: var(--ok-soft);
  border: 1px solid #2F6A4733;
  padding: 4px 10px;
  border-radius: 999px;
}
.empresa-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
}
.empresa-stat-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.empresa-stat-val{
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.empresa-card-foot{
  display: flex; align-items: center; gap: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
}

/* Sidebar user current state */
.sidebar-user.is-current{ background: var(--paper-3); }

.wordmark .tld{ color: inherit; font: inherit; }

/* ════════════════════════════════════════════════════════════
   Round 2 — Filters · Ellipsis · Modal · Empresa detail · etc.
   ════════════════════════════════════════════════════════════ */

/* ── Filter button + popover ── */
.filter-anchor{ position: relative; }
.icon-btn.has-filters{ border-color: var(--obsidian); color: var(--obsidian); }
.icon-btn.is-open{ background: var(--paper-3); }
.icon-btn-badge{
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  font: 500 10px/16px var(--font-mono);
  text-align: center;
  border: 2px solid var(--paper);
}

.filter-popover{
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 380px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  z-index: 600;
  display: flex; flex-direction: column;
  max-height: 80vh;
  overflow: hidden;
}
.filter-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-2);
}
.filter-title{ font: 500 16px/1.2 var(--font-serif); letter-spacing: -0.015em; color: var(--ink); }
.filter-body{ padding: 6px 18px 14px; overflow-y: auto; }
.filter-section{ padding: 14px 0; border-bottom: 1px solid var(--rule-3); }
.filter-section:last-child{ border-bottom: none; }
.filter-section-label{
  font: 500 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.filter-chips{ display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip{
  appearance: none;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink-2);
  padding: 6px 12px;
  border-radius: 999px;
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  transition: background .1s ease, color .1s ease, border-color .1s ease;
}
.filter-chip:hover{ background: var(--paper-3); }
.filter-chip.on{
  background: var(--obsidian);
  color: var(--paper);
  border-color: var(--obsidian);
}
.filter-chip.add{
  background: transparent;
  border-style: dashed;
  color: var(--ink-3);
}
.filter-foot{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-top: 1px solid var(--rule-2);
  background: var(--paper-2);
}
.filter-count{ font: 400 12px/1 var(--font-mono); color: var(--ink-3); }

.empty-list{
  padding: 40px 20px;
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  border: 1px dashed var(--rule);
  border-radius: 12px;
  margin: 16px 0;
}

/* ── Ellipsis menu ── */
.ellipsis-wrap{ position: relative; display: inline-flex; }
.icon-btn.flush.is-open{ background: var(--paper-3); }
.ellipsis-menu{
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 280px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: 500;
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
}
.ellipsis-item{
  appearance: none;
  background: transparent;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 3px;
  transition: background .1s ease;
}
.ellipsis-item:hover{ background: var(--paper-3); }
.ellipsis-name{ font: 500 14px/1.2 var(--font-sans); color: var(--ink); }
.ellipsis-desc{ font: 400 13px/1.35 var(--font-sans); color: var(--ink-3); }

/* ── Generic Modal (lpv-modal) ── */
.lpv-modal-overlay{
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(11,15,20,.40);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.lpv-modal{
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  max-width: 100%;
  max-height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.lpv-modal-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rule-2);
}
.lpv-modal-title{
  margin: 0;
  font: 500 18px/1.2 var(--font-serif);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.lpv-modal-sub{
  margin: 4px 0 0;
  font: 400 13px/1.45 var(--font-sans);
  color: var(--ink-3);
}
.lpv-modal-close{
  appearance: none; background: transparent; border: none;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-3);
  flex: none;
}
.lpv-modal-close:hover{ background: var(--paper-3); color: var(--ink); }
.lpv-modal-body{
  padding: 18px 22px;
  overflow-y: auto;
}
.lpv-modal-foot{
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--rule-2);
  background: var(--paper-2);
}

/* ── Set warn callouts (Configuración → Alertas) ── */
.set-warn{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  font: 400 13px/1.45 var(--font-sans);
  border: 1px solid;
}
.set-warn.warn{ background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
.set-warn.bad{ background: var(--bad-soft); color: var(--bad); border-color: var(--bad); }

/* ── Empresa form fields ── */
.empresa-form{ display: flex; flex-direction: column; gap: 14px; }
.empresa-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 720px){ .empresa-grid-2{ grid-template-columns: 1fr; } }
.empresa-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  margin: 0;
}
.empresa-grid-2 > .empresa-field > .empresa-input,
.empresa-grid-2 > .empresa-field > .empresa-textarea{
  margin: 0;
  box-sizing: border-box;
}
.empresa-grid-2 > .empresa-field > .empresa-input{
  height: 42px;
}
.empresa-field > .set-field-label,
.empresa-field > label{
  margin: 0;
  padding: 0;
  line-height: 1.2;
  font: 500 12.5px/1.2 var(--font-sans);
  color: var(--ink-2);
  letter-spacing: -0.005em;
  display: block;
}
.empresa-field .req{ color: var(--bad); }
.set-field-label{
  font: 500 12px/1.2 var(--font-sans);
  color: var(--ink-2);
  letter-spacing: -0.005em;
}
.set-field-sub{
  margin: 0 0 4px;
  font: 400 12px/1.45 var(--font-sans);
  color: var(--ink-3);
}
.empresa-input,
.empresa-textarea{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font: 400 14px/1.45 var(--font-sans);
}
.empresa-input:focus,
.empresa-textarea:focus{
  outline: none;
  box-shadow: 0 0 0 3px #0B0F140F;
  border-color: var(--ink);
}
.empresa-textarea{ resize: vertical; min-height: 64px; }

.tag-input-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
}
.tag-input-row.read{
  border-style: dashed;
  padding: 8px 10px;
  background: transparent;
}
.empresa-tag{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 8px 4px 10px;
  background: #EAF1F8;
  color: #1F4E8A;
  border-radius: 999px;
  font: 500 12px/1 var(--font-sans);
}
.empresa-tag .x{
  appearance: none; background: transparent; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 999px;
  color: inherit; cursor: pointer;
  opacity: .75;
}
.empresa-tag .x:hover{ opacity: 1; background: #1F4E8A22; }
.empresa-tag-input{
  flex: 1; min-width: 140px;
  border: none; background: transparent; padding: 6px 4px;
  font: 400 13px/1.4 var(--font-sans);
  color: var(--ink);
  outline: none;
}
.btn-text.add{
  padding: 4px 8px;
  border-radius: 6px;
  color: #1F4E8A;
  font-weight: 500;
}
.btn-text.add:hover{ background: #1F4E8A11; }

/* ── Empresa detail view ── */
.empresa-breadcrumb{
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: -8px;
  color: var(--ink-3);
  font: 400 13px/1 var(--font-sans);
}
.empresa-breadcrumb .btn-text{ color: var(--ink-3); padding: 0; }
.empresa-breadcrumb .btn-text:hover{ color: var(--ink); }
.empresa-breadcrumb > span{ color: var(--ink); }

.empresa-team-head{
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
}
.empresa-team-title{
  margin: 0;
  font: 500 18px/1.2 var(--font-serif);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.set-card.flush > .set-card-body{ padding: 0; }
.empresa-team-table{
  width: 100%;
  border-collapse: collapse;
}
.empresa-team-table th{
  font: 500 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3);
  text-align: left;
  padding: 14px 18px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule-2);
}
.empresa-team-table th.r{ text-align: right; }
.empresa-team-table td{
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule-3);
  font: 400 13.5px/1.4 var(--font-sans);
  color: var(--ink-2);
  vertical-align: middle;
}
.empresa-team-table td.r{ text-align: right; }
.empresa-team-table tr:last-child td{ border-bottom: none; }
.empresa-team-member{ display: flex; align-items: center; gap: 12px; }
.empresa-team-avatar{
  width: 36px; height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #cfd8e3, #94a3b8);
  color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  font: 500 12px/1 var(--font-mono);
  letter-spacing: 0.04em;
  flex: none;
}
.empresa-team-name{ font: 500 14px/1.2 var(--font-sans); color: var(--ink); }
.empresa-team-email{
  font: 400 12px/1.3 var(--font-mono);
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 2px;
}
.empresa-team-rol{
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 18px 4px 0;
  font: 500 13px/1 var(--font-sans);
  color: var(--ink-2);
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M3 5l3 3 3-3' fill='none' stroke='%235B636F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 12px;
}
.empresa-team-estado{
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--ok-soft);
  color: var(--ok);
  font: 500 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.04em;
}

/* ── ImpactChip compact (used on cards) ── */
.impact-chip.compact{ padding-left: 12px; padding-right: 12px; }

/* ── btn-primary small variant (used in empresa team head) ── */
.btn-primary.sm{
  padding: 6px 12px;
  font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 6px;
}

/* ════════════════════════════════════════════════════════════
   Round 3 — Settings head · Segmented control · Check cards ·
              Detect banner · Empresa read-only · Role pill
   ════════════════════════════════════════════════════════════ */

/* Slim settings header (no search/filter) */
.settings-head{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  margin-bottom: 12px;
}
.settings-head .page-head{ padding-top: 0; }
.settings-head .tabstrip{ margin-top: 0; }

/* ── Segmented control (Frecuencia · alertas) ── */
.segmented-control{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 640px){ .segmented-control{ grid-template-columns: 1fr; } }
.segment-card{
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease, box-shadow .1s ease;
  width: 100%;
  position: relative;
}
.segment-card:hover{ background: var(--paper-3); }
.segment-card.on{
  background: var(--paper-2);
  border-color: var(--obsidian);
  box-shadow: inset 0 0 0 1px var(--obsidian);
}
.segment-card .seg-ico{
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--paper-3);
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.segment-card.on .seg-ico{ background: var(--obsidian); color: var(--paper); }
.segment-card .seg-body{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.segment-card .seg-name{ font: 500 14px/1.2 var(--font-sans); color: var(--ink); }
.segment-card .seg-desc{ font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-3); }
.segment-card .seg-radio{
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 1.5px solid var(--rule);
  background: var(--white);
  flex: none;
  position: relative;
}
.segment-card.on .seg-radio{
  border-color: var(--obsidian);
  background: var(--obsidian);
}
.segment-card.on .seg-radio::after{
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: var(--paper);
}

/* ── Check cards (Canales) ── */
.check-card{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: background .1s ease, border-color .1s ease, box-shadow .1s ease;
}
.check-card:hover{ background: var(--paper-3); }
.check-card.on{
  background: var(--paper-2);
  border-color: var(--obsidian);
  box-shadow: inset 0 0 0 1px var(--obsidian);
}
.check-head{
  display: flex; align-items: center; gap: 12px;
}
.check-box{
  position: relative;
  width: 18px; height: 18px;
  flex: none;
}
.check-box input{
  position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer;
}
.check-box::before{
  content: '';
  position: absolute; inset: 0;
  border: 1.5px solid var(--rule);
  border-radius: 4px;
  background: var(--white);
}
.check-card.on .check-box::before{
  background: var(--obsidian);
  border-color: var(--obsidian);
}
.check-box svg{
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  color: var(--paper);
  opacity: 0;
}
.check-card.on .check-box svg{ opacity: 1; }
.check-ico{
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
}
.check-ico.email{ background: #E6EEF8; color: #1F4E8A; }
.check-ico.wa{ background: #D9F4E2; color: #128C45; }
.check-body{ display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.check-name{ font: 500 14px/1.2 var(--font-sans); color: var(--ink); }
.check-desc{ font: 400 12.5px/1.4 var(--font-sans); color: var(--ink-3); }
.check-fields{
  display: block;
  padding-left: 30px;   /* align with the body, past the checkbox */
}
.check-fields.muted{ opacity: .65; }

/* ── Onboarding "Buscar empresa" loading state + detect banner ── */
.spinner{
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: lpv-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes lpv-spin{ to{ transform: rotate(360deg); } }

.detect-banner{
  display: flex; align-items: center; gap: 10px;
  margin: 16px 0;
  padding: 12px 14px;
  background: var(--ok-soft);
  color: var(--ok);
  border: 1px solid var(--ok);
  border-radius: 10px;
  font: 400 13.5px/1.5 var(--font-sans);
}
.detect-banner strong{ color: var(--ok); font-weight: 600; }

/* ── Empresa role pill + section heads + read-only fields + member note ── */
.empresa-section-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
}
.empresa-section-title{
  margin: 0;
  font: 500 18px/1.2 var(--font-serif);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.empresa-section-sub{
  margin: 4px 0 0;
  font: 400 13px/1.45 var(--font-sans);
  color: var(--ink-3);
}
.role-pill{
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font: 500 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid;
  white-space: nowrap;
  flex: none;
}
.role-pill.admin{ background: var(--accent-soft); color: var(--orange-deep); border-color: var(--orange-deep); }
.role-pill.miembro{ background: var(--paper-2); color: var(--ink-3); border-color: var(--rule); }

.empresa-read-row{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule-3);
}
.empresa-read-row:last-child{ border-bottom: none; }
.empresa-read-row .set-field-label{
  font: 500 11px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink-3);
}
.empresa-read-value{
  font: 400 14px/1.55 var(--font-sans);
  color: var(--ink);
}
.empresa-read-empty{ color: var(--ink-4); }
.tag-row.read-only{ display: flex; flex-wrap: wrap; gap: 6px; }
.empresa-tag.readonly{ background: var(--paper-3); color: var(--ink-2); }
.empresa-tag.readonly .x{ display: none; }

.empresa-grid-2 > .empresa-read-row{ border-bottom: none; padding-top: 0; }

.empresa-member-note{
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--paper-2);
  color: var(--ink-3);
  border: 1px dashed var(--rule);
  border-radius: 10px;
  font: 400 13px/1.5 var(--font-sans);
}
.empresa-member-note b{ color: var(--ink); font-weight: 600; }

/* ════════════════════════════════════════════════════════════
   Round 4 — Country picker (Configuración → Alertas)
   ════════════════════════════════════════════════════════════ */
.country-picker-wrap{ position: relative; display: inline-flex; }
.country-picker{
  appearance: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: 500 13px/1 var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  white-space: nowrap;
  height: 36px;
}
.country-picker:hover{ background: var(--paper-3); }
.country-picker.is-open{ background: var(--paper-3); border-color: var(--ink); }
.country-flag{ font-size: 16px; line-height: 1; }
.country-code-val{ font: 500 13.5px/1 var(--font-mono); letter-spacing: 0.01em; }
.country-popover{
  position: absolute; top: calc(100% + 6px); left: 0;
  width: 320px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: 1100;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.country-search{
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule-2);
  color: var(--ink-3);
}
.country-search input{
  flex: 1; border: none; background: transparent; outline: none;
  font: 400 13.5px/1.4 var(--font-sans); color: var(--ink);
}
.country-list{ max-height: 320px; overflow-y: auto; padding: 4px 0; }
.country-section-label{
  font: 500 10px/1 var(--font-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-3);
  padding: 8px 14px 4px;
}
.country-row{
  appearance: none;
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 14px;
  background: transparent; border: none;
  text-align: left;
  cursor: pointer;
  font: 400 13.5px/1.3 var(--font-sans);
  color: var(--ink);
}
.country-row:hover{ background: var(--paper-3); }
.country-row.active{ background: var(--paper-2); }
.country-row .country-flag{ font-size: 18px; line-height: 1; flex: none; }
.country-row .country-name{ flex: 1; min-width: 0; }
.country-row .country-code{ font: 400 12px/1 var(--font-mono); color: var(--ink-3); }
.country-empty{ padding: 16px 14px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* When CountryCodePicker is inside an AlertOption WhatsApp row, give the cc the same look as the old span */
.alert-inline-input.wa-row .country-picker{
  border-radius: 8px;
  margin-right: 2px;
}

/* ════════════════════════════════════════════════════════════
   Round 6 — Empresa card clickable + sidebar email tweaks
   ════════════════════════════════════════════════════════════ */

/* Whole empresa-card is now a clickable button into the detail */
.empresa-card.is-clickable{
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}
.empresa-card.is-clickable:hover{
  background: var(--white);
  border-color: var(--ink);
  box-shadow: 0 6px 14px -8px rgba(11,15,20,.25);
  transform: translateY(-1px);
}
.empresa-card.is-clickable:active{
  transform: translateY(0);
  box-shadow: 0 1px 0 #14171C0A;
}
.empresa-card.is-clickable:focus-visible{
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11,15,20,.06);
}

/* Footer affordance "Administrar →" — was a button, now a static visual cue */
.empresa-card-cta{
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 13px/1 var(--font-sans);
  color: var(--ink);
  transition: gap 140ms ease;
}
.empresa-card.is-clickable:hover .empresa-card-cta{ gap: 8px; }
.empresa-card.is-clickable:hover .empresa-card-cta svg{ color: var(--orange-deep); }

/* Role pill inside empresa-card header (replaces the old "Activa" pill) */
.empresa-card-head .role-pill{
  margin-left: auto;
  font: 500 10px/1 var(--font-mono);
  padding: 4px 8px;
}

/* ════════════════════════════════════════════════════════════
   Round 7 — Empresa sub-tabs · Crear empresa stage · Alertas fixes ·
              Follow button · Delete account modal
   ════════════════════════════════════════════════════════════ */

/* ── Empresa sub-tabs (Datos / Equipo / Facturación) ── */
.empresa-sub-tabs{
  display: inline-flex;
  gap: 4px;
  margin: 4px 0 22px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.empresa-sub-tab{
  appearance: none; background: transparent; border: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 8px;
  font: 500 13px/1 var(--font-sans);
  color: var(--ink-3);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}
.empresa-sub-tab:hover{ color: var(--ink); }
.empresa-sub-tab.active{
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 2px #14171C14, 0 0 0 1px var(--rule);
}

/* ── Empresa Datos pane: breathing room between cards ── */
.empresa-datos{
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.empresa-datos .set-card{ padding: 22px 24px; }
.empresa-datos .set-card-head{ margin-bottom: 16px; }
.empresa-datos .set-card-body > * + *{ margin-top: 16px; }
.empresa-datos .empresa-field + .empresa-field{ margin-top: 14px; }

/* ── Crear empresa detect-card (mirrors onboarding) ── */
.detect-card{
  margin: 14px 0 18px;
  padding: 14px 16px;
  background: var(--ok-soft);
  border: 1px solid var(--ok);
  border-radius: 12px;
}
.detect-card-head{
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
  color: var(--ok);
}
.detect-card-icon{
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--ok);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
}
.detect-card-title{
  font: 600 14px/1.2 var(--font-sans);
  letter-spacing: -0.005em;
}
.detect-card-body{
  margin: 0;
  font: 400 13.5px/1.5 var(--font-sans);
  color: #295c3a;
}
.detect-card-body strong{ color: var(--ok); font-weight: 600; }

/* Spinner for the modal Buscar empresa CTA */
.spinner{
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 999px;
  animation: lpv-spin 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes lpv-spin{ to{ transform: rotate(360deg); } }

/* Block primary button used inside modals */
.btn-primary.block{
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}

/* ── Alertas pane — row clickability + "missing angle" fix ── */
.alert-option{ overflow: hidden; }
.alert-option-head{ cursor: pointer; }
.alert-option-head:hover{ background: rgba(0,0,0,.025); }
.alert-option-head .toggle{ cursor: pointer; }
.alert-option-extra{
  border-top: 1px solid var(--rule-2);
  padding: 14px 16px;
  background: #FBF9F3;
}
.alert-option-extra input,
.alert-option-extra .alert-inline-input{
  border: 0;
  background: transparent;
  outline: none;
  padding: 4px 0;
  font: 400 14px/1.4 var(--font-sans);
  color: var(--ink);
  width: 100%;
}
.alert-option-extra .alert-inline-input.wa-row{
  display: flex; align-items: center; gap: 10px;
  padding: 0;
}
.alert-option-extra .alert-inline-input.wa-row input{
  flex: 1; min-width: 0;
}
.alert-option-extra .alert-inline-input.wa-row .btn-text{
  white-space: nowrap;
}
.alert-inline-help{
  font: 400 12px/1.4 var(--font-sans);
  color: var(--ink-3);
  margin-top: 6px;
}

/* ── FollowButton (hover swap, mirrors onboarding .monitor-btn) ── */
.follow-btn{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  min-width: 116px;
  height: 32px;
  border: 1px solid transparent;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.follow-btn:not(.on){
  background: var(--obsidian);
  color: var(--paper);
  border-color: var(--obsidian);
}
.follow-btn:not(.on):hover{ background: #1A1F28; }
.follow-btn.on{
  background: var(--ok-soft);
  color: var(--ok);
  border-color: var(--ok);
}
.follow-btn.on .label-default{ display: inline-flex; align-items: center; gap: 6px; }
.follow-btn.on .label-hover{ display: none; align-items: center; gap: 6px; }
.follow-btn.on:hover{
  background: var(--bad-soft);
  color: var(--bad);
  border-color: var(--bad);
}
.follow-btn.on:hover .label-default{ display: none; }
.follow-btn.on:hover .label-hover{ display: inline-flex; }

/* ── Delete account modal ── */
.delete-modal{ display: flex; flex-direction: column; gap: 12px; }
.delete-modal-icon{
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--bad-soft);
  color: var(--bad);
  display: inline-flex; align-items: center; justify-content: center;
}
.delete-modal-lead{
  margin: 0;
  font: 400 14px/1.55 var(--font-sans);
  color: var(--ink-2);
}
.delete-modal-list{
  margin: 0 0 0 18px;
  padding: 0;
  font: 400 13px/1.55 var(--font-sans);
  color: var(--ink-3);
}
.delete-modal-list li{ margin: 2px 0; }
.delete-modal-confirm{
  margin: 6px 0 0;
  font: 400 13.5px/1.5 var(--font-sans);
  color: var(--ink-2);
}
.delete-modal-confirm strong{
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--bad);
  letter-spacing: 0.04em;
}
.delete-modal input{
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font: 500 14px/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
}
.delete-modal input:focus{
  border-color: var(--bad);
  box-shadow: 0 0 0 3px rgba(142,55,34,.12);
}
.btn-destructive{
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--bad);
  color: var(--paper);
  border: 1px solid var(--bad);
  font: 500 13.5px/1 var(--font-sans);
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}
.btn-destructive:hover:not(:disabled){
  background: #732D1B;
  border-color: #732D1B;
  box-shadow: 0 6px 14px -8px rgba(142,55,34,.55);
  transform: translateY(-1px);
}
.btn-destructive:active:not(:disabled){ transform: translateY(0); box-shadow: none; }
.btn-destructive:disabled{
  background: var(--bad-soft);
  color: var(--bad);
  border-color: var(--bad-soft);
  cursor: not-allowed;
  opacity: 0.8;
}

/* ════════════════════════════════════════════════════════════
   Round 8 — AlertsCard · Perfil logout-row · Field error state
   ════════════════════════════════════════════════════════════ */

/* AlertsCard — unified Alertas (used in onboarding + settings) */
.alerts-card{
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
}
.alerts-section{
  padding: 22px 24px;
  border-bottom: 1px solid var(--rule-2);
}
.alerts-section:last-of-type{ border-bottom: none; }
.alerts-section-eyebrow{
  font: 500 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  margin-bottom: 6px;
  display: inline-flex; align-items: center; gap: 8px;
}
.alerts-section-tag{
  font: 400 10px/1 var(--font-mono);
  letter-spacing: 0.06em;
  color: var(--ink-4);
  text-transform: lowercase;
}
.alerts-section-question{
  font: 400 14.5px/1.5 var(--font-sans);
  color: var(--ink-2);
  margin: 0 0 14px;
}
.alerts-freq-pills{
  display: inline-flex;
  gap: 8px;
}
.alerts-freq-pill{
  appearance: none;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: var(--ink-2);
  font: 500 14px/1 var(--font-sans);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.alerts-freq-pill:hover{ background: var(--paper-3); }
.alerts-freq-pill.on{
  background: var(--obsidian);
  border-color: var(--obsidian);
  color: var(--paper);
}
.alerts-channel-row{
  display: flex; align-items: center; gap: 10px;
}
.alerts-channel-row .channel-ico{
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #E6EEF8; color: #1F4E8A;
  flex: none;
}
.alerts-channel-row .channel-ico.wa{ background: #D9F4E2; color: #128C45; }
.alerts-channel-row input[type="email"],
.alerts-channel-row input[type="text"]{
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
  font: 400 14px/1.4 var(--font-sans);
  color: var(--ink);
  outline: none;
}
.alerts-channel-row input:focus{
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11,15,20,.06);
}
.alerts-verify-btn{
  appearance: none;
  padding: 9px 14px;
  border-radius: 8px;
  background: var(--obsidian);
  color: var(--paper);
  border: 1px solid var(--obsidian);
  font: 500 13px/1 var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms ease, box-shadow 140ms ease, transform 120ms ease;
  flex: none;
}
.alerts-verify-btn:hover{
  background: #1A1F28;
  box-shadow: 0 6px 14px -8px rgba(11,15,20,.45);
  transform: translateY(-1px);
}
.alerts-whatsapp-toggle{
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer;
  padding: 6px 0;
  font: 500 14px/1.4 var(--font-sans);
  color: var(--ink);
  user-select: none;
}
.alerts-whatsapp-toggle .check-square{
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--rule);
  background: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--paper);
  flex: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.alerts-whatsapp-toggle.on .check-square{
  background: var(--obsidian);
  border-color: var(--obsidian);
}
.alerts-whatsapp-fields{
  margin-top: 14px;
  display: flex; align-items: center; gap: 10px;
}
.alerts-whatsapp-fields .country-picker{ flex: none; }
.alerts-whatsapp-fields input{
  flex: 1; min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--white);
  font: 400 14px/1.4 var(--font-sans);
  color: var(--ink);
  outline: none;
}
.alerts-whatsapp-fields input:focus{
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11,15,20,.06);
}

/* Settings-mode footer (dirty state) */
.alerts-card-foot{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 24px;
  border-top: 1px solid var(--rule-2);
  background: var(--paper-2);
}
.alerts-card-foot .btn-ghost,
.alerts-card-foot .btn-primary{
  font: 500 13.5px/1 var(--font-sans);
  padding: 9px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.alerts-card-foot .btn-ghost{
  background: transparent;
  color: var(--ink-2);
  border: 1px solid transparent;
}
.alerts-card-foot .btn-ghost:hover{ background: rgba(0,0,0,.04); color: var(--ink); }
.alerts-card-foot .btn-primary{
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.alerts-card-foot .btn-primary:disabled{
  opacity: 0.45; cursor: not-allowed;
}
.alerts-card-foot .btn-primary:hover:not(:disabled){
  background: #1A1F28;
  box-shadow: 0 6px 14px -8px rgba(11,15,20,.45);
  transform: translateY(-1px);
}

/* Perfil — logout row (separated from Cuenta card) */
.logout-row{
  margin-top: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-2);
  display: flex; justify-content: flex-start;
}
.logout-row .btn-ghost{
  appearance: none;
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: var(--ink-3);
  border: 1px solid transparent;
  padding: 8px 14px;
  border-radius: 8px;
  font: 500 13.5px/1 var(--font-sans);
  cursor: pointer;
}
.logout-row .btn-ghost:hover{
  color: var(--ink);
  background: var(--paper-3);
}

/* Set-field validation state */
.set-field.invalid > input,
.set-field.invalid > .set-field-row > input{
  border-color: var(--bad);
}
.set-field-error{
  display: block;
  margin-top: 4px;
  font: 400 12px/1.4 var(--font-sans);
  color: var(--bad);
}

/* ════════════════════════════════════════════════════════════
   VerifyCodeModal — 6-digit OTP
   ════════════════════════════════════════════════════════════ */
.otp-row{
  display: flex; justify-content: center; gap: 10px;
  margin: 6px 0 14px;
}
.otp-input{
  width: 48px; height: 56px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--white);
  font: 500 22px/1 var(--font-mono);
  text-align: center;
  color: var(--ink);
  outline: none;
  caret-color: var(--ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.otp-input:focus{
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(11,15,20,.08);
}
.otp-resend{
  text-align: center;
  font: 400 13px/1 var(--font-sans);
  color: var(--ink-3);
  margin-bottom: 6px;
}
.otp-resend strong{ color: var(--ink); font-weight: 500; font-family: var(--font-mono); }
.otp-help{
  text-align: center;
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--ink-3);
  margin: 12px 0 0;
}

/* ════════════════════════════════════════════════════════════
   Toast — global confirmation messages
   ════════════════════════════════════════════════════════════ */
.lpv-toast-host{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 5000;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}
.lpv-toast{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  max-width: 380px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  box-shadow: 0 12px 28px -10px rgba(11,15,20,.55), 0 2px 6px rgba(11,15,20,.18);
  font: 500 13.5px/1.4 var(--font-sans);
  pointer-events: auto;
  animation: lpv-toast-in 220ms cubic-bezier(.2,.7,.3,1);
}
.lpv-toast.success{ background: #1f4d2f; border-color: #1f4d2f; color: #DDE7DA; }
.lpv-toast.success .lpv-toast-ico{ color: #84d39a; }
.lpv-toast.warn{ background: #6b5210; border-color: #6b5210; color: #EEE3C2; }
.lpv-toast.warn .lpv-toast-ico{ color: #f0c560; }
.lpv-toast.error{ background: #5c241a; border-color: #5c241a; color: #ECD7CF; }
.lpv-toast.error .lpv-toast-ico{ color: #ef8c75; }
.lpv-toast-ico{
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.lpv-toast-msg{ flex: 1; min-width: 0; }
@keyframes lpv-toast-in{
  from{ opacity: 0; transform: translateY(8px); }
  to  { opacity: 1; transform: translateY(0); }
}

/* ════════════════════════════════════════════════════════════
   Plan management page
   ════════════════════════════════════════════════════════════ */
.plan-page{ display: flex; flex-direction: column; gap: 28px; }
.plan-page-back{
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-3); font: 500 13px/1 var(--font-sans);
  padding: 0;
  width: fit-content;
}
.plan-page-back:hover{ color: var(--ink); }
.plan-page-header{ max-width: 700px; }

.plan-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px){ .plan-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){ .plan-grid{ grid-template-columns: 1fr; } }

.plan-card{
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px 22px;
  display: flex; flex-direction: column;
  gap: 14px;
  position: relative;
}
.plan-card.popular{
  border-color: var(--ink);
  box-shadow: 0 12px 28px -16px rgba(11,15,20,.25);
}
.plan-card.current{
  background: var(--paper-2);
  border-color: var(--ok);
  box-shadow: inset 0 0 0 1px var(--ok);
}
.plan-popular-badge{
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--paper);
  padding: 4px 12px; border-radius: 999px;
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.plan-card .plan-name{
  font: 500 18px/1.2 var(--font-serif);
  letter-spacing: -0.015em;
  color: var(--ink);
}
.plan-card .plan-price{
  font: 500 30px/1.1 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--ink);
}
.plan-price-meta{
  font: 400 12px/1.4 var(--font-mono);
  color: var(--ink-3);
  margin-top: 2px;
}
.plan-tagline{
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-3);
  margin: 0;
  min-height: 56px;
}
.plan-features{
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.plan-feature{
  display: flex; align-items: flex-start; gap: 8px;
  font: 400 13.5px/1.4 var(--font-sans);
  color: var(--ink-2);
}
.plan-feature.not-included{ color: var(--ink-4); }
.plan-feature .ico-ok{ color: var(--ok); flex: none; margin-top: 2px; }
.plan-feature .ico-no{ color: var(--ink-4); flex: none; margin-top: 2px; }
.plan-cta{
  margin-top: 12px;
  width: 100%;
  justify-content: center;
}
.plan-cta.current{
  background: var(--ok-soft) !important;
  color: var(--ok) !important;
  border-color: var(--ok) !important;
  cursor: default !important;
  opacity: 1 !important;
}
.plan-cta.current:hover{
  background: var(--ok-soft) !important;
  box-shadow: none !important;
  transform: none !important;
}

.plan-compare-table{
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
}
.plan-compare-table th,
.plan-compare-table td{
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  font: 400 13.5px/1.4 var(--font-sans);
  color: var(--ink-2);
}
.plan-compare-table th{
  background: var(--paper-2);
  font: 500 10px/1 var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}
.plan-compare-table td.col-current,
.plan-compare-table th.col-current{
  background: rgba(47,106,71,.08);
  font-weight: 500;
  color: var(--ink);
}
.plan-compare-table tr:last-child td{ border-bottom: none; }

.plan-foot-note{
  font: 400 13px/1.5 var(--font-sans);
  color: var(--ink-3);
  text-align: center;
  margin: 0;
}

/* Picker modal — chip rethink (replaces old checkbox list) */
.picker-mod-chips-all{
  max-height: 320px;
  overflow-y: auto;
  padding: 10px;
  display: flex; flex-wrap: wrap; gap: 6px;
  border: 1px solid var(--rule-2);
  border-radius: 10px;
  background: var(--paper-2);
}
.picker-mod-chip{
  padding: 7px 14px;
  font: 500 13px/1 var(--font-sans);
}
.picker-mod-chip.on{
  background: var(--obsidian);
  color: var(--paper);
  border-color: var(--obsidian);
}
.picker-mod-chip:not(.on):hover{ background: var(--paper-3); border-color: var(--ink-4); }