/* ─── SperLat — Amanecer LATAM Design System (Dense/Tool variant) ─────────────
   Fonts: Fraunces (display) + DM Sans (body)
   ──────────────────────────────────────────────────────────────────────────── */

/* ─── Self-hosted fonts (no CDN dependency) ──────────────────────────────── */
/* DM Sans — latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/dm-sans-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* DM Sans — latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/dm-sans.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces italic — vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-ital-vi.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Fraunces italic — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-ital-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces italic — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-ital.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Fraunces normal — vietnamese */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-vi.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* Fraunces normal — latin-ext */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Fraunces normal — latin */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/fraunces.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  /* ── Amanecer LATAM — semantic palette ───────────────────────────────── */
  --color-primary:         #FF7A5A;  /* Naranja Atacama — energía, acción */
  --color-primary-dark:    #E06B4D;  /* Naranja Atacama Oscuro — hover */
  --color-secondary:       #0B2545;  /* Azul Patagónico — confianza, titulares */
  --color-nav-bg:          #0B2545;  /* Fondo de navegación / sidebar */
  --color-text:            #343a40;  /* Gris Andes — texto principal */
  --color-accent:          #007F5F;  /* Verde Quetzal — éxito, énfasis */
  --color-bg-main:         #FBFBF8;  /* Blanco Lienzo — fondo principal */
  --color-bg-accent:       #F9F6EE;  /* Sal de Uyuni — fondo de acento */
  --color-text-on-primary: #FFFFFF;  /* Blanco Nítido — texto sobre primario */
  --color-surface:         #FFFFFF;  /* Superficie de tarjetas/modales — override en temas oscuros */
  --color-text-muted:      #888888;  /* Labels, secondary text — muted gray */
  --color-text-strong:     #111827;  /* High-contrast body text, table cells */
  --color-input-bg:        #fafbfc;  /* Input / textarea background */
  --color-input-border:    #e0e3ea;  /* Input / card border color */

  /* ── Legacy aliases — backward compat, do not remove ─────────────────── */
  --azul:      var(--color-secondary);
  --naranja:   var(--color-primary);
  --verde:     var(--color-accent);
  --crema:     var(--color-bg-main);
  --gris:      var(--color-text);
  --negro:     #1b1227;
  --borde:     #e0ddd6;
  --gris-claro: #f4f2ee;

  /* ── Typography ────────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* ── Spacing & elevation ───────────────────────────────────────────────── */
  --radius:    8px;
  --radius-lg: 16px;
  --shadow:    0 1px 4px rgba(11,37,69,.08), 0 4px 16px rgba(11,37,69,.06);
  --shadow-lg: 0 8px 32px rgba(11,37,69,.12);
  --transition: 160ms ease;
}

/* ─── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--crema);
  color: var(--gris);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ─── Typography ──────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-heading, var(--azul));
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.6rem); }
p  { font-size: 1rem; }

.display { font-family: var(--font-display); }
.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--naranja);
}

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.section { padding: 5rem 0; }
.section--dark {
  background: var(--negro);
  color: #fff;
}
.section--dark h1,
.section--dark h2,
.section--dark h3 { color: #fff; }
.section--alt { background: var(--gris-claro); }

/* ─── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 500;
  border: 2px solid transparent;
  transition: var(--transition);
  white-space: nowrap;
}
.btn-primary {
  background: var(--naranja);
  color: #fff;
  border-color: var(--naranja);
}
.btn-primary:hover {
  background: #ff6040;
  border-color: #ff6040;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(255,122,90,.35);
}
.btn-outline {
  background: transparent;
  color: var(--crema);
  border-color: rgba(255,255,255,.3);
}
.btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,.08);
}
.btn-ghost {
  background: transparent;
  color: var(--azul);
  border-color: var(--borde);
}
.btn-ghost:hover { background: var(--gris-claro); }
.btn-lg { padding: .9rem 2rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem 1rem; font-size: .85rem; }

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--negro);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  gap: 2rem;
}
.nav__logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--crema);
  letter-spacing: -.02em;
}
.nav__logo span { color: var(--naranja); }
.nav__links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
}
.nav__links a {
  color: rgba(255,255,255,.7);
  font-size: .9rem;
  font-weight: 400;
  transition: color var(--transition);
}
.nav__links a:hover { color: #fff; }
.nav__actions { display: flex; align-items: center; gap: .75rem; }
.nav__user {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: rgba(255,255,255,.8);
  font-size: .875rem;
}
.nav__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.15);
}
.nav__avatar-placeholder {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--azul);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 600;
  color: #fff;
  border: 2px solid rgba(255,255,255,.15);
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--negro);
  color: #fff;
  padding: 6rem 0 5rem;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11,37,69,.6) 0%, transparent 70%);
  pointer-events: none;
}
.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,122,90,.12);
  border: 1px solid rgba(255,122,90,.25);
  color: var(--naranja);
  padding: .3rem .85rem;
  border-radius: 100px;
  font-size: .8rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  letter-spacing: .04em;
}
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.25rem;
  max-width: 720px;
}
.hero__title em {
  font-style: italic;
  color: var(--naranja);
}
.hero__sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,.7);
  max-width: 560px;
  line-height: 1.65;
  margin-bottom: 2.5rem;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.hero__fine {
  font-size: .8rem;
  color: rgba(255,255,255,.4);
}

/* ─── Verticals strip ─────────────────────────────────────────────────────── */
.verticals {
  padding: 2.5rem 0;
  background: var(--azul);
  overflow: hidden;
}
.verticals__label {
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-bottom: 1rem;
}
.verticals__grid {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scrollbar-width: none;
}
.verticals__grid::-webkit-scrollbar { display: none; }
.vertical-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.8);
  padding: .5rem 1rem;
  border-radius: 100px;
  font-size: .85rem;
  white-space: nowrap;
  transition: var(--transition);
}
.vertical-chip:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
  border-color: rgba(255,255,255,.2);
}
.vertical-chip__icon { font-size: 1.1rem; }

/* ─── Stats ───────────────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 2rem;
  padding: 3.5rem 0;
}
.stat { text-align: center; }
.stat__number {
  font-family: var(--font-display);
  font-size: 2.8rem;
  font-weight: 500;
  color: var(--azul);
  line-height: 1;
}
.stat__label {
  font-size: .85rem;
  color: var(--color-text-muted);
  margin-top: .35rem;
}

/* ─── Features grid ───────────────────────────────────────────────────────── */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.feature-card {
  background: var(--color-surface);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: var(--transition);
}
.feature-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: rgba(11,37,69,.15);
}
.feature-card__icon {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}
.feature-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--azul);
  margin-bottom: .5rem;
}
.feature-card__desc {
  font-size: .9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ─── Pricing ─────────────────────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.pricing-card {
  background: var(--color-surface);
  border: 2px solid var(--borde);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  position: relative;
  transition: var(--transition);
}
.pricing-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: rgba(11,37,69,.2);
}
.pricing-card--featured {
  border-color: var(--naranja);
  box-shadow: 0 0 0 4px rgba(255,122,90,.1);
}
.pricing-card__badge {
  position: absolute;
  top: -1px; right: 1.5rem;
  background: var(--naranja);
  color: #fff;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .25rem .6rem;
  border-radius: 0 0 6px 6px;
}
.pricing-card__plan {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--naranja);
  margin-bottom: .25rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .8rem;
}
.pricing-card__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--azul);
  margin-bottom: .75rem;
}
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: .25rem;
  margin-bottom: 1.5rem;
}
.pricing-card__amount {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 500;
  color: var(--azul);
  line-height: 1;
}
.pricing-card__period {
  font-size: .85rem;
  color: var(--color-text-muted);
}
.pricing-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  margin-bottom: 1.75rem;
}
.pricing-card__features li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .875rem;
  color: var(--color-text-muted);
}
.pricing-card__features li::before {
  content: '✓';
  color: var(--verde);
  font-weight: 600;
  flex-shrink: 0;
  margin-top: .05rem;
}
.pricing-card__features li.unavailable::before {
  content: '–';
  color: #ccc;
}
.pricing-card__features li.unavailable { color: #bbb; }

/* ─── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 720px; margin: 0 auto; }
.faq__item {
  border-bottom: 1px solid var(--borde);
}
.faq__question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 1.25rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--azul);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  font-family: var(--font-display);
  transition: color var(--transition);
}
.faq__question:hover { color: var(--naranja); }
.faq__icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform var(--transition);
  color: var(--naranja);
}
.faq__item.open .faq__icon { transform: rotate(45deg); }
.faq__answer {
  display: none;
  padding: 0 0 1.25rem;
  font-size: .925rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}
.faq__item.open .faq__answer { display: block; }

/* ─── Dashboard ───────────────────────────────────────────────────────────── */
.app-layout {
  display: flex;
  min-height: 100vh;
}
.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--color-nav-bg);
  color: rgba(255,255,255,.8);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.sidebar__logo {
  padding: 1.25rem 1.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar__logo span { color: var(--naranja); }
.sidebar__user {
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .8rem;
}
.sidebar__user-name { font-weight: 500; color: #fff; }
.sidebar__user-plan {
  color: var(--naranja);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.sidebar__nav { padding: 1rem 0; flex: 1; }
.sidebar__nav a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 1.5rem;
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  transition: var(--transition);
  border-left: 3px solid transparent;
}
.sidebar__nav a:hover {
  color: #fff;
  background: rgba(255,255,255,.05);
}
.sidebar__nav a.active {
  color: #fff;
  border-left-color: var(--naranja);
  background: rgba(255,255,255,.06);
}
.sidebar__nav .nav-icon { font-size: 1rem; width: 20px; text-align: center; color: rgba(255,255,255,.65); filter: brightness(1.5) saturate(0.75); }
.sidebar__bottom {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .8rem;
}
.sidebar__bottom a {
  color: rgba(255,255,255,.5);
  display: block;
  padding: .3rem 0;
}
.sidebar__bottom a:hover { color: #fff; }
.sidebar__theme-toggle {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.5); font-size: .9rem;
  padding: .3rem 0; display: block; line-height: 1;
}
.sidebar__theme-toggle:hover { color: #fff; }

/* ── Sidebar sections & grouped nav ─────────────────────────────────────── */
.sidebar__divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: .5rem 0;
}
.sidebar__group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; color: rgba(255,255,255,.3);
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .5rem 1.5rem .2rem; cursor: pointer; transition: color var(--transition);
}
.sidebar__group-toggle:hover { color: rgba(255,255,255,.5); }
.sidebar__group-arrow { transition: transform .2s ease; display: inline-block; font-size: .8rem; }
.sidebar__group[data-open="true"]  .sidebar__group-arrow { transform: rotate(90deg); }
.sidebar__group[data-open="false"] .sidebar__group-body  { display: none; }
.sidebar__nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1.5rem .5rem 1.75rem;
  font-size: .875rem;
  color: rgba(255,255,255,.65);
  border-left: 3px solid transparent;
  transition: var(--transition);
}
.sidebar__nav-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar__nav-link.active { color: #fff; border-left-color: var(--naranja); background: rgba(255,255,255,.06); }
.sidebar__discover {
  color: var(--naranja, #FF7A5A);
  font-weight: 600;
  border: 1px solid rgba(255,122,90,.25);
  border-radius: var(--radius, 6px);
  margin-top: .35rem;
  background: rgba(255,122,90,.06);
}
.sidebar__discover:hover {
  color: #FF7A5A;
  background: rgba(255,122,90,.12);
  border-color: rgba(255,122,90,.4);
}

/* ── Mobile overlay ──────────────────────────────────────────────────────── */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 199;
}
.sidebar-overlay.visible { display: block; }

.mobile-header {
  display: none;
}

.app-main {
  flex: 1;
  overflow-x: hidden;
  background: var(--gris-claro);
}
.app-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--borde);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.app-header__title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--azul);
}
.app-content { padding: 2rem; }

/* ─── Onboarding completion banner ───────────────────────────────────────── */
.onboarding-banner { background: var(--color-surface, #fff); border: 1px solid var(--borde, #e2e8f0); border-left: 4px solid var(--naranja, #FF7A5A); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1.5rem; }
.onboarding-header { display: flex; justify-content: space-between; font-weight: 700; color: var(--color-text, #343a40); margin-bottom: 0.5rem; }
.onboarding-pct { color: var(--naranja, #FF7A5A); }
.onboarding-bar { height: 6px; background: var(--borde, #e2e8f0); border-radius: 3px; overflow: hidden; margin-bottom: 0.75rem; }
.onboarding-fill { height: 100%; background: var(--naranja, #FF7A5A); border-radius: 3px; transition: width 0.3s; }
.onboarding-checks { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.onboarding-check { font-size: 0.8rem; padding: 0.2rem 0.6rem; border-radius: 12px; text-decoration: none; color: var(--color-text, #343a40); }
.onboarding-check.done { background: rgba(0,127,95,.1); color: var(--verde, #007F5F); }
.onboarding-check.pending { background: rgba(255,122,90,.1); color: var(--naranja, #FF7A5A); border: 1px solid rgba(255,122,90,.3); }

/* ─── Stat cards (dashboard) ──────────────────────────────────────────────── */
.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.stat-card__label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  margin-bottom: .35rem;
}
.stat-card__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--azul);
  line-height: 1;
}
.stat-card__sub { font-size: .75rem; color: var(--color-text-muted); margin-top: .25rem; }

/* ─── Module grid (dashboard) ─────────────────────────────────────────────── */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.module-card {
  background: var(--color-surface);
  border: 1px solid var(--borde);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: var(--transition);
  text-decoration: none;
}
.module-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--naranja);
  transform: translateY(-1px);
}
.module-card__icon { font-size: 1.75rem; }
.module-card__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--azul);
}
.module-card__desc { font-size: .8rem; color: var(--color-text-muted); }

/* ─── Xanadu ──────────────────────────────────────────────────────────────── */
.xanadu-layout { display: flex; min-height: 100vh; }
.xanadu-sidebar {
  width: 232px;
  background: #071830;
  color: rgba(255,255,255,.6);
  padding: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(255,255,255,.05);
}
.xanadu-sidebar__logo {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: #fff;
  padding: 1.5rem 1.25rem 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: .5rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.xanadu-sidebar__logo::before {
  content: '⬡';
  color: #FF7A5A;
  font-size: 1.1rem;
}
.xanadu-sidebar nav { flex: 1; padding: .25rem 0; }
.xanadu-sidebar a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1.25rem;
  font-size: .8125rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color .15s, background .15s;
  border-left: 2px solid transparent;
  margin: 1px 0;
}
.xanadu-sidebar a:hover {
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.04);
}
.xanadu-sidebar a.active {
  color: #fff;
  background: rgba(255,122,90,.1);
  border-left-color: #FF7A5A;
}
.xanadu-sidebar a .xnav-icon {
  font-size: .85rem;
  width: 1.1rem;
  text-align: center;
  flex-shrink: 0;
}
.xanadu-sidebar__footer {
  padding: .75rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.07);
}
.xanadu-sidebar__footer a {
  font-size: .75rem;
  color: rgba(255,255,255,.25);
  text-decoration: none;
  transition: color .15s;
  border-left: none !important;
  padding: 0 !important;
  background: none !important;
}
.xanadu-sidebar__footer a:hover { color: rgba(255,255,255,.6); }
.xanadu-nav__link {
  display: flex; align-items: center; gap: .6rem;
  padding: .5rem 1.25rem; font-size: .8125rem;
  color: rgba(255,255,255,.5); text-decoration: none;
  transition: color .15s, background .15s;
  border-left: 2px solid transparent; margin: 1px 0;
}
.xanadu-nav__link:hover { color: rgba(255,255,255,.9); background: rgba(255,255,255,.04); }
.xanadu-nav__link.active { color: #fff; background: rgba(255,122,90,.1); border-left-color: #FF7A5A; }
.xanadu-nav__group-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: none; color: rgba(255,255,255,.4);
  font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: .4rem 1rem .2rem; cursor: pointer;
}
.xanadu-nav__group-toggle:hover { color: rgba(255,255,255,.7); }
.xanadu-nav__arrow { transition: transform .2s ease; display: inline-block; font-size: .8rem; }
.xanadu-nav__group[data-open="true"]  .xanadu-nav__arrow { transform: rotate(90deg); }
.xanadu-nav__group[data-open="false"] .xanadu-nav__group-body { display: none; }
.xanadu-main {
  flex: 1;
  background: #f4f5f7;
  padding: 2rem 2.5rem;
  overflow-x: auto;
}
.xanadu-main h1 { font-size: 1.4rem; margin-bottom: 1.5rem; color: #0B2545; }

/* ─── Xanadu KPI / analytics layout ──────────────────────────────────────── */
.xanadu-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.xanadu-kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.xanadu-kpi-card__label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  margin-bottom: .3rem;
}
.xanadu-kpi-card__value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.1;
}
.xanadu-section {
  margin-bottom: 2rem;
}
.xanadu-section__title {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #888;
  margin-bottom: .75rem;
}
.xanadu-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
@media (max-width: 900px) { .xanadu-two-col { grid-template-columns: 1fr; } }
.xanadu-panel {
  background: var(--color-surface);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  overflow-x: auto;
}
/* ─── Xanadu analytics tabs ──────────────────────────────────────────────── */
.xanadu-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--borde, #e5e7eb);
  margin-bottom: 1.5rem;
}
.xanadu-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: .55rem 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  white-space: nowrap;
}
.xanadu-tab:hover { color: #555; }
.xanadu-tab.active {
  color: var(--azul, #0B2545);
  border-bottom-color: var(--naranja, #FF7A5A);
}

/* ─── Xanadu tenant profile hero ─────────────────────────────────────────── */
.xanadu-profile-hero {
  background: linear-gradient(135deg, var(--azul, #0B2545) 0%, #1a3a5c 100%);
  border-radius: var(--radius);
  padding: 1.75rem;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}
.xanadu-profile-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,.22);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  font-family: 'Fraunces', serif;
}
.xanadu-profile-meta { flex: 1; min-width: 0; }
.xanadu-profile-name {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: .25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.xanadu-profile-username {
  font-size: .8125rem;
  color: rgba(255,255,255,.58);
  margin-bottom: .75rem;
}
.xanadu-profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.xanadu-profile-actions { flex-shrink: 0; }
/* Override light-bg plan badges on dark hero */
.xanadu-profile-hero .badge {
  background: rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
}

/* ─── Plugin directory tree ───────────────────────────────────────────────── */
.xanadu-plugin-group-label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-med, #888);
  padding: .75rem 0 .25rem;
}
.xanadu-plugin-tree {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .5rem;
}
.xanadu-plugin-row {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .45rem .75rem;
  border-radius: 6px;
  font-size: .875rem;
}
.xanadu-plugin-row:hover { background: var(--crema, #f5f5f0); }
.xanadu-plugin-row .plugin-slug {
  font-family: monospace;
  font-size: .8125rem;
  color: var(--azul, #0B2545);
  font-weight: 600;
  min-width: 120px;
}
.xanadu-plugin-row .plugin-version { font-size: .75rem; color: var(--gris-med, #888); }
.plugin-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.plugin-status-dot.active   { background: var(--verde, #007F5F); }
.plugin-status-dot.inactive { background: #ddd; }

/* ─── Activity timeline ───────────────────────────────────────────────────── */
.xanadu-timeline { display: flex; flex-direction: column; }
.xanadu-timeline-item {
  display: flex;
  gap: .875rem;
  padding-bottom: 1.25rem;
  position: relative;
}
.xanadu-timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: var(--borde, #e5e7eb);
}
.xanadu-timeline-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  background: var(--crema, #f5f5f0);
  border: 1px solid var(--borde, #e5e7eb);
  color: var(--gris-med, #888);
}
.xanadu-timeline-content { flex: 1; padding-top: .2rem; min-width: 0; }
.xanadu-timeline-action { font-size: .875rem; color: var(--gris, #343a40); margin-bottom: .15rem; }
.xanadu-timeline-time { font-size: .75rem; color: var(--gris-med, #888); }

/* ─── Activity heatmap ───────────────────────────────────────────────────── */
.heat-grid {
  display: grid;
  gap: 3px;
  font-size: .65rem;
  overflow-x: auto;
}
.heat-cell {
  border-radius: 2px;
  min-width: 0;
  height: 20px;
}
.heat-label { color: #888; display: flex; align-items: center; font-size: .68rem; white-space: nowrap; }
.heat-label-col { color: #888; text-align: center; font-size: .65rem; }

.xanadu-plan-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .5rem;
  font-size: .85rem;
}
.xanadu-plan-bar__label { width: 68px; font-weight: 600; flex-shrink: 0; }
.xanadu-plan-bar__track { flex: 1; background: #e5e7eb; border-radius: 999px; height: 10px; }
.xanadu-plan-bar__fill  { height: 10px; border-radius: 999px; background: var(--color-primary); }
.xanadu-plan-bar__count { width: 32px; text-align: right; color: #888; font-size: .78rem; }

/* ─── Table ───────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--borde);
  font-size: .875rem;
}
thead { background: var(--gris-claro); }
th {
  text-align: left;
  padding: .75rem 1rem;
  font-weight: 600;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--borde);
}
td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--gris-claro); }

/* ─── Badges ──────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: .2rem .6rem;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.badge-semilla { background: #e8f5e9; color: #2e7d32; }
.badge-tallo   { background: #e3f2fd; color: #1565c0; }
.badge-roble   { background: #fff3e0; color: #e65100; }
.badge-legado  { background: #f3e5f5; color: #6a1b9a; }
.badge-active  { background: #e8f5e9; color: #2e7d32; }
.badge-inactive { background: #fce4ec; color: #c62828; }
.badge-teleconsulta { display: inline-flex; align-items: center; gap: .25rem; background: #e6f4ef; color: #007F5F; border: 1px solid #9ad4c0; border-radius: 4px; font-size: .75rem; font-weight: 700; padding: .2rem .55rem; font-family: sans-serif; white-space: nowrap; }

/* ─── Forms ───────────────────────────────────────────────────────────────── */
/* ── Settings card ──────────────────────────────────────────────────────── */
.settings-card {
  background: var(--color-surface);
  border: 1px solid var(--color-input-border);
  border-radius: 10px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.settings-card__header {
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--color-input-border);
}
.settings-card .settings-card__title {
  color: var(--color-text);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: .8rem;
  font-weight: 600;
  color: var(--azul);
  margin-bottom: .4rem;
  letter-spacing: .02em;
}
.form-input {
  width: 100%;
  padding: .65rem .9rem;
  border: 1px solid var(--color-input-border);
  border-radius: var(--radius);
  font-size: .9rem;
  font-family: var(--font-body);
  background: var(--color-input-bg);
  color: var(--gris);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-input:focus {
  outline: none;
  border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(11,37,69,.08);
}
.form-error {
  background: #fce4ec;
  color: #c62828;
  border: 1px solid #ef9a9a;
  border-radius: var(--radius);
  padding: .75rem 1rem;
  font-size: .875rem;
  margin-bottom: 1rem;
}

/* ─── Footer ──────────────────────────────────────────────────────────────── */
.footer {
  background: var(--negro);
  color: rgba(255,255,255,.5);
  padding: 4rem 0 2rem;
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: .75rem;
}
.footer__brand span { color: var(--naranja); }
.footer__tagline { font-size: .875rem; line-height: 1.6; }
.footer__col h4 {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  margin-bottom: .75rem;
}
.footer__col a {
  display: block;
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  padding: .2rem 0;
  transition: color var(--transition);
}
.footer__col a:hover { color: #fff; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .8rem;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ─── Claim CTA (abogado-site unclaimed profiles) ─────────────────────────── */
.claim-cta { background: #FFF3F0; border: 1px solid #FF7A5A; border-radius: 8px; padding: 1.25rem; margin: 1.5rem 0; text-align: center; }
.claim-cta p { color: #0B2545; margin: 0 0 0.5rem; font-weight: 600; }
.btn-claim { display: inline-block; background: #FF7A5A; color: #fff; padding: 0.6rem 1.4rem; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.claim-sub { font-size: 0.8rem; color: #666; margin-top: 0.5rem; font-weight: 400 !important; }

/* ─── Utilities ───────────────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-naranja { color: var(--naranja); }
.text-verde   { color: var(--verde); }
.text-muted   { color: var(--color-text-muted); }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }

/* ─── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav__links { display: none; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .hero { padding: 4rem 0 3rem; }
  .section { padding: 3.5rem 0; }

  /* Mobile sidebar — slide-in overlay */
  .mobile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    background: var(--color-nav-bg);
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .mobile-header__logo {
    font-family: var(--font-display);
    color: #fff;
    font-size: 1.1rem;
  }
  .mobile-header__logo span { color: var(--naranja); }
  .sidebar-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px;
  }
  .sidebar-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }
  .sidebar-close {
    display: block;
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: rgba(255,255,255,.5);
    font-size: 1rem;
    cursor: pointer;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-260px);
    transition: transform .25s ease;
    width: 260px;
    box-shadow: 4px 0 24px rgba(0,0,0,.3);
  }
  .sidebar--open { transform: translateX(0); }
  .app-layout { flex-direction: column; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; }
}
@media (min-width: 769px) {
  .mobile-header  { display: none !important; }
  .sidebar-close  { display: none !important; }
  .sidebar-overlay { display: none !important; }
}

/* ─── Laburo mobile 360px ────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* --- Hero --- */
  .hero {
    padding: 2rem 1rem 2rem;
  }
  .hero-inner {
    padding: 0;
  }
  .hero-title {
    font-size: 1.75rem;
    word-break: break-word;
    overflow-wrap: break-word;
  }
  .hero-sub {
    font-size: .9rem;
    margin-bottom: 1.25rem;
  }
  .hero-ctas {
    flex-direction: column;
    gap: .6rem;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-outline {
    display: block;
    width: 100%;
    text-align: center;
    min-height: 44px;
    line-height: 44px;
    padding: 0 1rem;
    box-sizing: border-box;
  }
  .hero-badges {
    gap: .4rem;
  }

  /* --- Section padding --- */
  .section {
    padding: 1.75rem 1rem;
  }
  .section--alt {
    padding: 1.75rem 1rem;
  }

  /* --- Grid cards: force single column --- */
  .grid-cards {
    grid-template-columns: 1fr;
  }

  /* --- Card title: allow wrapping instead of truncating --- */
  .card-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* --- Job card row layout: stack vertically on mobile --- */
  .card--row {
    flex-direction: column;
    gap: .75rem;
  }
  .card-aside {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .4rem;
  }

  /* --- Filter bar: stack inputs and button vertically --- */
  .filter-bar {
    flex-direction: column;
    align-items: stretch;
    padding: .75rem 1rem;
    gap: .5rem;
    overflow-x: visible;
  }
  .filter-bar input[type=text] {
    min-width: 0;
    width: 100%;
    font-size: 1rem; /* 16px — prevents iOS zoom */
    min-height: 44px;
    padding: .6rem .75rem;
  }
  .filter-bar button {
    width: 100%;
    min-height: 44px;
    font-size: 1rem;
    padding: .6rem 1rem;
  }
  .filter-bar label {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* --- Filter bar on jobs page horizontal scroll fallback
       (for category-style pill bars, not the main filter form) --- */
  .filter-pills {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: .5rem;
    flex-wrap: nowrap;
    padding-bottom: .25rem;
    scrollbar-width: none;
  }
  .filter-pills::-webkit-scrollbar {
    display: none;
  }
  .filter-pills .badge,
  .filter-pills .skill-tag {
    flex-shrink: 0;
  }

  /* --- Skill chips: ensure clean wrapping with adequate tap size --- */
  .skills-row {
    gap: .4rem;
  }
  .skill-tag {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
  }
  .skill-tag--lg {
    min-height: 32px;
    font-size: .85rem;
    padding: .3rem .8rem;
  }

  /* --- Worker profile --- */
  .profile-wrap {
    padding: 1.25rem 1rem;
  }
  .profile-header {
    gap: 1rem;
    margin-bottom: 1.25rem;
  }
  .profile-name {
    font-size: 1.25rem;
  }
  .profile-section {
    padding: 1rem;
  }

  /* --- CTA box: stack text and button vertically --- */
  .cta-box {
    flex-direction: column;
    align-items: stretch;
    gap: .75rem;
  }
  .cta-box .btn-primary,
  .cta-box .btn-outline {
    display: block;
    width: 100%;
    text-align: center;
    min-height: 44px;
    line-height: 44px;
    padding: 0 1rem;
    box-sizing: border-box;
  }

  /* --- Worker page bottom share/CV row: stack vertically --- */
  .worker-share-row {
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
  }
  .worker-share-row .btn-outline {
    display: block;
    width: 100%;
    text-align: center;
    min-height: 44px;
    line-height: 44px;
    padding: 0 1rem;
    box-sizing: border-box;
    font-size: .875rem;
  }

  /* --- Pagination: ensure touch targets --- */
  .pagination a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 .65rem;
  }

  /* --- Nav: collapse links on narrow viewport --- */
  .nav-links {
    gap: .5rem;
  }
  .nav-links a {
    font-size: .8rem;
  }

  /* --- Results header padding --- */
  .results-header {
    padding: .6rem 1rem;
    font-size: .8rem;
  }

  /* --- Job list padding --- */
  .job-list {
    padding: 1rem;
  }

  /* --- How it works grid: single column --- */
  .how-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ─── Crypto Alertas — investor profile defaults ─────────────────────────── */
.alert-hint { font-size: 0.8rem; color: #007F5F; margin-bottom: 0.5rem; }
.alert-profile-tip { display: flex; align-items: center; gap: 0.75rem; background: #f0faf6; border: 1px solid #007F5F; border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.9rem; }
.badge-profile { background: #0B2545; color: #fff; padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }

/* ─── C1: Profile hero (criptoactivo.digital) ─────────────────────────────── */
.profile-hero { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-radius: 10px; margin-bottom: 1.5rem; background: linear-gradient(135deg, #0B2545 60%, #1a3a6e); color: #fff; }
.profile-hero__tagline { font-family: 'Fraunces', serif; font-size: 1.4rem; margin: 0 0 0.25rem; }
.profile-hero__sub { font-size: 0.9rem; opacity: 0.85; margin: 0; }
.profile-hero__cta { background: #FF7A5A; color: #fff; padding: 0.55rem 1.2rem; border-radius: 6px; text-decoration: none; font-weight: 700; white-space: nowrap; }

/* ─── C2: Recommended coins (criptoactivo.digital) ────────────────────────── */
.recommended-coins { margin-bottom: 1.5rem; }
.recommended-coins h3 { font-size: 1rem; color: #0B2545; margin-bottom: 0.75rem; }
.coin-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.coin-chip { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.75rem; border: 1px solid #e2e8f0; border-radius: 20px; text-decoration: none; color: #0B2545; font-size: 0.85rem; background: #fff; }
.coin-chip img { border-radius: 50%; }
.coin-chip__change.pos { color: #007F5F; }
.coin-chip__change.neg { color: #c0392b; }

/* ─── C10: Portfolio share card (criptoactivo.digital) ────────────────────── */
.share-card-section { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.btn-share-card, .btn-copy-link { padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn-share-card { background: #0B2545; color: #fff; }
.btn-copy-link { background: transparent; border: 1px solid #0B2545; color: #0B2545; }

/* ─── Employer analytics row (laburo employer-dash) ───────────────────────── */
.posting-analytics { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; padding: .5rem 0; border-top: 1px solid #e2e8f0; margin-top: .6rem; font-size: .8rem; color: #6b7280; }
.analytics-stat { display: flex; align-items: center; gap: .3rem; }
.analytics-stat strong { color: #0B2545; font-weight: 600; }
.analytics-conversion { color: #FF7A5A; font-weight: 600; }

/* ─── Laburo: Profile completion bar ─────────────────────────────────────── */
.profile-completion-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem 1.25rem 0.875rem;
  margin-bottom: 1.25rem;
}
.profile-completion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.profile-completion-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #0B2545;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.profile-completion-pct {
  font-size: 0.85rem;
  font-weight: 700;
  color: #FF7A5A;
}
.profile-completion-pct--done {
  color: #007F5F;
}
.profile-completion-bar-track {
  width: 100%;
  height: 8px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.profile-completion-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FF7A5A 0%, #e05a3a 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
  min-width: 4px;
}
.profile-completion-bar-fill[style*="width:100"] {
  background: linear-gradient(90deg, #007F5F 0%, #005f47 100%);
}
.profile-completion-tips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
}
.profile-completion-tip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: #343a40;
  background: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
}
.profile-completion-tip-icon {
  font-size: 0.75rem;
  font-weight: 700;
  color: #FF7A5A;
  line-height: 1;
}
.profile-completion-done-msg {
  font-size: 0.82rem;
  color: #007F5F;
  margin: 0;
  font-weight: 600;
}
@media (max-width: 480px) {
  .profile-completion-tips { gap: 0.35rem; }
  .profile-completion-tip   { font-size: 0.75rem; }
}

/* ── Active filter chips (medico-site /buscar) ──────────────────────── */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #e0f2f1;
  border: 1px solid #99d6cf;
  color: #007F5F;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.filter-chip:hover {
  background: #b2e4de;
  border-color: #6ec8c0;
  color: #005f47;
}
.filter-chip__remove {
  font-size: 0.72rem;
  line-height: 1;
  opacity: 0.7;
}
/* Alias used in cochera-site chips */
.filter-chip__x {
  font-size: 0.78rem;
  line-height: 1;
  opacity: 0.65;
  margin-left: 0.1rem;
}
@media (max-width: 480px) {
  .filter-chip { font-size: 0.78rem; padding: 0.2rem 0.55rem; }
}

/* ── filter-chips row container (cochera-site /buscar) ──────────────── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
/* Dark-theme variant for cochera-site (dark background) */
.cochera-dark .filter-chip,
body.cochera .filter-chip {
  background: rgba(0, 127, 95, 0.12);
  border-color: rgba(0, 127, 95, 0.4);
  color: #4ecdc4;
}
.cochera-dark .filter-chip:hover,
body.cochera .filter-chip:hover {
  background: rgba(0, 127, 95, 0.22);
  border-color: rgba(0, 127, 95, 0.6);
  color: #6eddd8;
}

/* ── Criptoactivo VS comparison table ───────────────────────────────────────── */
.vs-section { padding: 3rem 1.25rem; max-width: 860px; margin: 0 auto; }
.vs-section .section-header { margin-bottom: 1.5rem; }
.vs-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); margin-bottom: .75rem; }
.vs-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--border); }
.vs-table { width: 100%; border-collapse: collapse; font-size: .875rem; background: var(--surface); }
.vs-table thead tr { border-bottom: 2px solid var(--border); }
.vs-table th { padding: .9rem 1.1rem; text-align: center; font-weight: 700; font-size: .82rem; color: var(--muted); white-space: nowrap; }
.vs-table th:first-child { text-align: left; width: 52%; }
.vs-table th.col-us { color: var(--accent); font-size: .85rem; }
.vs-table td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; color: var(--muted); font-size: .83rem; }
.vs-table tbody tr:last-child td { border-bottom: none; }
.vs-table td:first-child { text-align: left; color: var(--text); font-weight: 500; }
.vs-table tbody tr:hover td { background: rgba(255,255,255,.03); }
.vs-check { color: #4ade80; font-size: 1.05rem; font-weight: 700; }
.vs-cross { color: var(--muted); font-size: 1rem; opacity: .5; }
.vs-partial { color: #f59e0b; font-size: .78rem; font-weight: 600; }
.vs-badge { display: inline-block; background: rgba(249,115,22,.15); border: 1px solid rgba(249,115,22,.35); color: var(--accent); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .55rem; border-radius: 999px; margin-left: .35rem; vertical-align: middle; }
.vs-cta-row { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.vs-cta-note { font-size: .82rem; color: var(--muted); }

/* ─── UI-1.1 Sidebar accordion connector line (P01) ──────────────────────── */
.sidebar__group-body {
  position: relative;
}
.sidebar__group-body::before {
  content: '';
  position: absolute;
  left: 2rem;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: rgba(255,255,255,.12);
  border-radius: 1px;
  pointer-events: none;
}

/* ─── UI-1.2 Avatar online status dot (P02) ──────────────────────────────── */
.nav__avatar-placeholder { position: relative; }
.nav__avatar             { position: relative; }
.nav__avatar-placeholder.is-online::after,
.nav__avatar.is-online::after {
  content: '';
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--verde, #007F5F);
  border: 2px solid var(--azul, #0B2545);
}

/* ─── UI-1.3 Empty state component (P03) ─────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--gris-med, #888);
}
.empty-state__icon  { font-size: 2.5rem; margin-bottom: 1rem; opacity: .5; line-height: 1; }
.empty-state__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gris, #343a40);
  margin-bottom: .35rem;
}
.empty-state__body  { font-size: .875rem; max-width: 320px; line-height: 1.65; }
.empty-state__action { margin-top: 1.25rem; }

/* ─── UI-1.4 KPI card with delta badge (P04) ─────────────────────────────── */
@keyframes kpi-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.kpi-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--borde, #e5e7eb);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  animation: kpi-enter 0.35s ease-out both;
}
.kpi-grid .kpi-card:nth-child(1) { animation-delay: 0.00s; }
.kpi-grid .kpi-card:nth-child(2) { animation-delay: 0.06s; }
.kpi-grid .kpi-card:nth-child(3) { animation-delay: 0.12s; }
.kpi-grid .kpi-card:nth-child(4) { animation-delay: 0.18s; }
/* Clickable KPI variant */
a.kpi-card--link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
}
a.kpi-card--link:hover {
  border-color: var(--azul, #0B2545);
  box-shadow: 0 4px 12px rgba(11,37,69,.12);
  transform: translateY(-2px);
}
a.kpi-card--link .kpi-card__value { color: var(--azul, #0B2545); }
.kpi-card__label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-med, #888);
  margin-bottom: .4rem;
}
.kpi-card__value {
  font-size: 1.75rem;
  font-weight: 700;
  font-family: 'Fraunces', serif;
  color: var(--azul, #0B2545);
  line-height: 1;
  margin-bottom: .35rem;
}
.kpi-card__delta {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  font-size: .75rem;
  font-weight: 700;
}
.kpi-card__delta--up   { color: var(--verde, #007F5F); }
.kpi-card__delta--down { color: #c62828; }
.kpi-card__sub { font-size: .75rem; color: var(--gris-med, #888); margin-top: .15rem; }

/* ─── UI-1.5 Alphabetical list divider (P11) ─────────────────────────────── */
.list-alpha-divider {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris-med, #888);
  padding: .6rem 0 .3rem;
  border-bottom: 1px solid var(--borde, #e5e7eb);
  margin-bottom: .2rem;
  margin-top: .75rem;
}
.list-alpha-divider:first-child { margin-top: 0; }

/* ─── UI-1.7 Row actions 3-dot dropdown (P18) ────────────────────────────── */
.row-actions {
  position: relative;
  display: inline-block;
}
.row-actions__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: .3rem .5rem;
  border-radius: 4px;
  color: var(--gris-med, #888);
  font-size: 1.2rem;
  line-height: 1;
  transition: background .12s, color .12s;
}
.row-actions__btn:hover { background: var(--gris-claro, #f3f4f6); color: var(--azul, #0B2545); }
.row-actions__menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  min-width: 164px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--borde, #e5e7eb);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  z-index: 200;
  overflow: hidden;
}
.row-actions.open .row-actions__menu { display: block; }
.row-actions__item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .55rem 1rem;
  font-size: .875rem;
  color: var(--gris, #343a40);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .12s;
}
.row-actions__item:hover { background: var(--crema, #f5f5f0); color: inherit; }
.row-actions__item--danger        { color: #c62828; }
.row-actions__item--danger:hover  { background: rgba(198,40,40,.06); }

@media (max-width: 480px) {
  .row-actions__menu { right: auto; left: 0; }
}

/* ─── UI-2.1 Unified modal (P06) ─────────────────────────────────────────── */
#spx-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: modal-in .15s ease;
}
#spx-modal[hidden] { display: none; }
@keyframes modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-container {
  background: var(--color-surface, #fff);
  border-radius: var(--radius);
  box-shadow: 0 8px 40px rgba(0,0,0,.2);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-slide .18s ease;
}
@keyframes modal-slide {
  from { transform: translateY(-12px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--borde, #e5e7eb);
}
.modal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--azul, #0B2545);
}
.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--gris-med, #888);
  padding: .1rem .35rem;
  border-radius: 4px;
  transition: background .12s;
}
.modal-close:hover { background: var(--gris-claro, #f3f4f6); color: var(--gris, #343a40); }
.modal-body {
  padding: 1.25rem;
}

/* ─── UI-2.3 Dashboard widget card ────────────────────────────────────────── */
.widget-card {
  background: var(--color-surface);
  border: 1px solid var(--borde, #e5e7eb);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
}
.widget-card__label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted, #888);
  margin-bottom: .75rem;
}
.widget-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .35rem 0;
  border-bottom: 1px solid var(--borde, #e5e7eb);
  font-size: .85rem;
}
.widget-row:last-child { border-bottom: none; }
.widget-row__name { font-weight: 500; }
.widget-row__meta { color: var(--gris-med, #888); font-size: .75rem; }

/* ─── UI-2.5 KPI grid wrapper (dashboard) ─────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .875rem;
  margin-bottom: 1.75rem;
}
@media (max-width: 640px) {
  .activity-grid { grid-template-columns: 1fr !important; }
}

/* ─── UI-3.1 Data grid (toolbar + bulk + pagination) ─────────────────────── */
.data-grid { }
.data-grid__toolbar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: .75rem;
  flex-wrap: wrap;
}
.data-grid__search {
  flex: 1;
  min-width: 160px;
  max-width: 320px;
  padding: .45rem .75rem;
  border: 1px solid var(--borde, #e5e7eb);
  border-radius: var(--radius);
  font-size: .875rem;
  background: var(--color-surface);
  color: var(--color-text);
}
.data-grid__search:focus {
  outline: none;
  border-color: var(--azul, #0B2545);
  box-shadow: 0 0 0 3px rgba(11,37,69,.08);
}
.data-grid__bulk-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--azul, #0B2545);
  color: #fff;
  padding: .35rem .75rem;
  border-radius: var(--radius);
  font-size: .8rem;
  font-weight: 600;
  animation: bulk-in .15s ease;
}
@keyframes bulk-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
.bulk-count { margin-right: .25rem; }
/* checkbox styling */
.select-all,
.select-row {
  width: 15px;
  height: 15px;
  cursor: pointer;
  accent-color: var(--azul, #0B2545);
}
.data-grid__pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  font-size: .8rem;
  color: var(--gris-med, #888);
  flex-wrap: wrap;
  gap: .5rem;
}
.data-grid__pagination-links {
  display: flex;
  gap: .25rem;
}
.data-grid__pagination-links a,
.data-grid__pagination-links span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  border-radius: 4px;
  font-size: .8rem;
  text-decoration: none;
  color: var(--azul, #0B2545);
  border: 1px solid var(--borde, #e5e7eb);
  padding: 0 .35rem;
  transition: background .12s;
}
.data-grid__pagination-links a:hover { background: var(--crema, #f5f5f0); }
.data-grid__pagination-links span { background: var(--azul, #0B2545); color: #fff; border-color: var(--azul); }
.data-grid__pagination-links .disabled { opacity: .4; pointer-events: none; }

/* ─── UI-3.2 Filter sidebar (off-canvas right) ───────────────────────────── */
.filter-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 299;
}
.filter-sidebar-overlay.visible { display: block; }
.filter-sidebar {
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 300px;
  background: var(--color-surface, #fff);
  border-left: 1px solid var(--borde, #e5e7eb);
  z-index: 300;
  transform: translateX(100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,.1);
}
.filter-sidebar--open { transform: translateX(0); }
.filter-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borde, #e5e7eb);
  font-weight: 700;
  font-size: .9375rem;
  color: var(--azul, #0B2545);
  flex-shrink: 0;
}
.filter-sidebar__close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.2rem;
  color: var(--gris-med, #888);
  padding: .15rem .35rem;
  border-radius: 4px;
}
.filter-sidebar__close:hover { background: var(--crema, #f5f5f0); }
.filter-sidebar__body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
}
.filter-sidebar__footer {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--borde, #e5e7eb);
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.filter-group {
  margin-bottom: 1.25rem;
}
.filter-group__label {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-med, #888);
  margin-bottom: .5rem;
}

/* ─── UI-3.4 Generic activity timeline ───────────────────────────────────── */
.activity-timeline { display: flex; flex-direction: column; }
.activity-timeline__item {
  display: flex;
  gap: .875rem;
  padding-bottom: 1.25rem;
  position: relative;
}
.activity-timeline__item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: var(--borde, #e5e7eb);
}
.activity-timeline__dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .7rem;
  font-weight: 700;
  background: var(--crema, #f5f5f0);
  border: 1px solid var(--borde, #e5e7eb);
  color: var(--gris-med, #888);
}
.activity-timeline__dot--success { background: rgba(0,127,95,.1); border-color: rgba(0,127,95,.3); color: #007F5F; }
.activity-timeline__dot--danger  { background: rgba(198,40,40,.08); border-color: rgba(198,40,40,.2); color: #c62828; }
.activity-timeline__dot--info    { background: rgba(11,37,69,.08); border-color: rgba(11,37,69,.15); color: var(--azul, #0B2545); }
.activity-timeline__content { flex: 1; padding-top: .25rem; min-width: 0; }
.activity-timeline__action { font-size: .875rem; color: var(--gris, #343a40); margin-bottom: .15rem; }
.activity-timeline__meta   { font-size: .8rem; color: var(--gris-med, #888); }
.activity-timeline__time   { font-size: .75rem; color: var(--gris-med, #888); margin-top: .1rem; }

/* ─── UI-4.4 OKLCH color tokens (progressive enhancement) ────────────────── */
/* Fallback HEX defined in :root above. These override only when OKLCH is supported. */
/* Safari < 15.4 uses the HEX fallbacks silently. */
@supports (color: oklch(0 0 0)) {
  :root {
    --color-primary:   oklch(68% 0.18 42);    /* #FF7A5A — Naranja Atacama */
    --color-secondary: oklch(20% 0.08 260);   /* #0B2545 — Azul Patagónico */
    --color-accent:    oklch(45% 0.15 155);   /* #007F5F — Verde Quetzal */
    --color-bg-main:   oklch(98% 0.005 80);   /* #FBFBF8 — Blanco Lienzo */
    --color-text:      oklch(28% 0.012 260);  /* #343a40 — Gris Andes */
    --gris-med:        oklch(60% 0.02 260);   /* #888 — muted */
    /* State tokens */
    --warning: oklch(78% 0.17 65);
    --danger:  oklch(58% 0.22 28);
    --info:    oklch(62% 0.15 250);
  }
}

/* ─── UI-4.3 Form group layout 3-9 (P17) ─────────────────────────────────── */
/* Horizontal label + input layout for CRM detail forms. */
/* Mobile: stacked. ≥768px: label 180px + input fluid. */
.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: .375rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .form-row {
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 1rem;
  }
}
.form-row .col-label {
  font-weight: 500;
  font-size: .875rem;
  color: var(--color-text-muted);
}

/* ─── UI-4.5 Flex KPI inline dense (P12) ─────────────────────────────────── */
/* Value + delta inline on mobile/desktop, stacked on tablet. */
.kpi-inline {
  display: flex;
  align-items: flex-end;
  gap: .5rem;
  flex-wrap: wrap;
}
@media (min-width: 768px) and (max-width: 1199px) {
  .kpi-inline {
    display: block;
  }
  .kpi-inline .kpi-delta {
    display: block;
    margin-top: .25rem;
  }
}
@media (min-width: 1200px) {
  .kpi-inline { display: flex; }
}
.kpi-inline .kpi-value {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-text-strong);
}
.kpi-inline .kpi-delta {
  font-size: .75rem;
  font-weight: 600;
  padding: .15rem .4rem;
  border-radius: 999px;
}
.kpi-inline .kpi-delta--up   { background: rgba(0,127,95,.1);  color: #007F5F; }
.kpi-inline .kpi-delta--down { background: rgba(198,40,40,.08); color: #c62828; }
.kpi-inline .kpi-delta--flat { background: rgba(136,136,136,.1); color: #888; }

/* ─── UI-1.1 Sidebar group connector line (P01) ──────────────────────────── */
/* Vertical line connecting items in an open sidebar group — Metronic accordion style */
.sidebar__group[data-open="true"] .sidebar__group-body {
  position: relative;
  padding-left: 1.1rem;
}
.sidebar__group[data-open="true"] .sidebar__group-body::before {
  content: '';
  position: absolute;
  left: .6rem;
  top: .2rem;
  bottom: .4rem;
  width: 1px;
  background: var(--borde, #e5e7eb);
  border-radius: 1px;
}

/* ─── UI-1.2 Avatar online status dot (P02) ──────────────────────────────── */
.sidebar__user { position: relative; }
.nav__avatar,
.nav__avatar-placeholder {
  position: relative;
  flex-shrink: 0;
}
.nav__avatar::after,
.nav__avatar-placeholder::after {
  content: '';
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  border: 2px solid var(--sidebar-bg, #fff);
}

/* ─── UI-1.5 Alphabetical list divider (P11) ─────────────────────────────── */
/* Usage: <div class="alpha-divider">A</div> between alphabetical groups */
.alpha-divider {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris-med, #888);
  padding: .4rem 0 .2rem;
  border-bottom: 1px solid var(--borde, #e5e7eb);
  margin-bottom: .4rem;
  user-select: none;
}

/* ─── UI-2.3 Dashboard widget grid — row layout (P15) ────────────────────── */
/* .dashboard-row wraps widget sections with consistent spacing + label */
.dashboard-row {
  margin-bottom: 1.75rem;
}
.dashboard-row__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.dashboard-row__title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
  margin: 0;
}
.dashboard-row__action {
  font-size: .8rem;
  color: var(--azul, #0B2545);
  text-decoration: none;
  font-weight: 600;
}
.dashboard-row__action:hover { text-decoration: underline; }

/* ── B3 Global search modal ⌘K ──────────────────────────────────────────── */
#spx-search[hidden] { display: none; }
#spx-search {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(11,37,69,.55); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: clamp(3rem, 12vh, 8rem);
}
.search-modal__container {
  background: var(--color-surface, #fff); border-radius: 14px;
  width: min(600px, calc(100vw - 2rem));
  box-shadow: 0 24px 60px rgba(11,37,69,.22);
  overflow: hidden;
}
.search-modal__header {
  display: flex; align-items: center; gap: .75rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid rgba(0,0,0,.07);
}
.search-modal__icon { font-size: 1.1rem; opacity: .45; flex-shrink: 0; }
.search-modal__input {
  flex: 1; border: none; outline: none; font-size: 1rem;
  font-family: var(--font-body); color: var(--azul);
  background: transparent;
}
.search-modal__esc {
  font-size: .7rem; padding: .2rem .45rem; border-radius: 5px;
  background: rgba(0,0,0,.07); color: #666; font-family: inherit; flex-shrink: 0;
}
.search-modal__results { max-height: 360px; overflow-y: auto; }
.search-modal__empty { padding: 1.1rem 1.25rem; color: #888; font-size: .88rem; margin: 0; }
.search-modal__result {
  display: flex; align-items: center; gap: .85rem;
  padding: .75rem 1.25rem; text-decoration: none; color: var(--azul);
  transition: background .1s;
}
.search-modal__result:hover,
.search-modal__result:focus { background: rgba(11,37,69,.05); outline: none; }
.search-modal__result-icon { font-size: 1.1rem; flex-shrink: 0; }
.search-modal__result-body { display: flex; flex-direction: column; min-width: 0; }
.search-modal__result-label { font-size: .92rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-modal__result-sub   { font-size: .78rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mobile header search button */
.mobile-header__search {
  background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.7); font-size: 1.1rem; padding: .25rem .5rem;
  margin-left: auto;
}

/* ── B3 Email template editor toolbar ───────────────────────────────────── */
.tmpl-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem;
  padding: .45rem .65rem;
  background: var(--crema, #f5f5f0);
  border: 1px solid var(--borde, #e5e7eb);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}
.tmpl-toolbar__btn {
  padding: .18rem .5rem;
  border: 1px solid var(--borde, #e5e7eb);
  border-radius: 4px;
  background: var(--color-surface, #fff);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--azul, #0B2545);
  font-family: inherit;
  line-height: 1.4;
  transition: background .1s, color .1s;
}
.tmpl-toolbar__btn:hover { background: var(--azul, #0B2545); color: #fff; border-color: var(--azul, #0B2545); }
.tmpl-toolbar__btn--var {
  background: rgba(255,122,90,.07);
  border-color: rgba(255,122,90,.25);
  color: var(--naranja, #FF7A5A);
  font-family: 'DM Mono', monospace;
  font-size: .7rem;
}
.tmpl-toolbar__btn--var:hover { background: var(--naranja, #FF7A5A); color: #fff; border-color: var(--naranja, #FF7A5A); }
.tmpl-toolbar__sep { font-size: .65rem; color: #9ca3af; margin: 0 .15rem; flex-shrink: 0; }
.tmpl-toolbar__preview-toggle { margin-left: auto; }
.tmpl-preview-container {
  display: none;
  border: 1px solid var(--borde, #e5e7eb);
  border-top: 2px solid var(--naranja, #FF7A5A);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.tmpl-preview-container.visible { display: block; }
.tmpl-preview {
  width: 100%;
  border: none;
  height: 240px;
  background: #fff;
  display: block;
}
/* Connect toolbar to textarea visually */
.tmpl-body-wrap textarea {
  border-radius: 0 0 var(--radius) var(--radius) !important;
}

/* ── B8 Booking split-screen ─────────────────────────────────────────────── */
.booking-split {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  border: 1px solid var(--borde, #e5e7eb);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 400px;
}
.booking-list {
  border-right: 1px solid var(--borde, #e5e7eb);
  overflow-y: auto;
  max-height: 70vh;
}
.booking-list-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: .75rem 1rem;
  border: none;
  border-bottom: 1px solid var(--borde, #e5e7eb);
  background: var(--color-surface);
  cursor: pointer;
  font-family: inherit;
  transition: background .1s;
}
.booking-list-item:hover { background: var(--crema, #f5f5f0); }
.booking-list-item.active { background: rgba(11,37,69,.06); border-left: 3px solid var(--azul, #0B2545); }
.booking-list-item__name { font-weight: 600; font-size: .875rem; color: var(--azul, #0B2545); }
.booking-list-item__meta { font-size: .75rem; color: var(--color-text-muted, #888); margin-top: .1rem; }
.booking-detail { padding: 0; }
.booking-detail__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 300px;
  color: var(--color-text-muted, #888);
  font-size: .875rem;
  gap: .5rem;
}
.booking-detail__empty-icon { font-size: 2rem; }
.booking-detail-card { display: none; height: 100%; }
.booking-detail-card.visible { display: block; }
.booking-detail__header {
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--borde, #e5e7eb);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem;
}
.booking-detail__tabs {
  display: flex;
  border-bottom: 1px solid var(--borde, #e5e7eb);
  padding: 0 1.25rem;
}
.booking-detail__tab {
  padding: .55rem .75rem;
  font-size: .8125rem;
  font-weight: 600;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-text-muted, #888);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit;
  transition: color .12s;
}
.booking-detail__tab.active { color: var(--azul, #0B2545); border-bottom-color: var(--azul, #0B2545); }
.booking-detail__panel { display: none; padding: 1.1rem 1.25rem; }
.booking-detail__panel.active { display: block; }

@media (max-width: 640px) {
  .booking-split { grid-template-columns: 1fr; }
  .booking-list { border-right: none; border-bottom: 1px solid var(--borde, #e5e7eb); max-height: none; }
  .booking-split.detail-open .booking-list { display: none; }
  .booking-split.detail-open .booking-detail { display: block; }
  .booking-detail__back { display: flex; }
}
@media (min-width: 641px) {
  .booking-detail__back { display: none !important; }
}

/* ── UI-3.3 Contact split-screen ────────────────────────────────────────── */
.contact-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--borde, #e5e7eb);
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 50vh;
  margin-top: .75rem;
}
.contact-list-panel {
  border-right: 1px solid var(--borde, #e5e7eb);
  overflow-y: auto;
  max-height: calc(100vh - 160px);
  padding: .75rem;
}
.contact-list-panel .table-wrap {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}
.contact-row { cursor: pointer; }
.contact-row:hover td { background: rgba(11,37,69,.04); }
.contact-row.active td { background: rgba(11,37,69,.07); }
#contact-panel {
  overflow-y: auto;
  max-height: calc(100vh - 160px);
}
.contact-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 240px;
  color: var(--color-text-muted);
  font-size: .875rem;
  padding: 2rem;
  text-align: center;
}
.contact-panel__content { padding: 1.1rem 1.25rem; }
.contact-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--borde, #e5e7eb);
}
.contact-panel__name { font-size: 1rem; font-weight: 700; color: var(--azul); line-height: 1.2; }
.contact-panel__company { font-size: .78rem; color: var(--color-text-muted); margin-top: .15rem; }
.contact-panel__actions { display: flex; gap: .3rem; flex-wrap: wrap; flex-shrink: 0; }
.contact-panel__info { display: flex; flex-direction: column; gap: .38rem; margin-bottom: .75rem; }
.contact-panel__field { display: flex; gap: .6rem; align-items: baseline; }
.contact-panel__label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--color-text-muted);
  min-width: 65px;
  flex-shrink: 0;
}
.contact-panel__section {
  margin-bottom: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--borde, #e5e7eb);
}
.contact-panel__section-title {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-muted);
  margin-bottom: .45rem;
}
.contact-panel__loading {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-muted);
  font-size: .875rem;
}
@media (max-width: 899px) {
  .contact-split { grid-template-columns: 1fr; border: none; min-height: 0; }
  .contact-list-panel { border-right: none; max-height: none; padding: 0; }
  .contact-list-panel .table-wrap { border: 1px solid var(--borde, #e5e7eb); border-radius: var(--radius); }
  #contact-panel { display: none !important; }
}

/* ── UI-5.4 Empty state component (P03) ────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.5rem 1.5rem;
  color: var(--color-text-muted);
}
.empty-state__svg { display: block; margin: 0 auto 1.25rem; opacity: .35; }
.empty-state__icon { font-size: 2.25rem; margin-bottom: 1rem; opacity: .5; }
.empty-state__title {
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 .4rem;
}
.empty-state__subtitle {
  font-size: .82rem;
  margin: 0 0 1.25rem;
  max-width: 320px;
}
.empty-state__cta { margin-top: .25rem; }

/* ── UI-8.3 Bulk actions bar ────────────────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  background: var(--azul, #0B2545);
  color: #fff;
  padding: .65rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: .875rem;
}
.bulk-bar__count { font-weight: 700; white-space: nowrap; }
.bulk-bar[hidden] { display: none !important; }
/* Highlight selected rows */
.contact-row.bulk-selected td { background: rgba(11,37,69,.05); }

/* ── UI-6.6 Abogado availability ────────────────────────────────────────── */
.avail-days-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}
.avail-day-label {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .875rem;
  cursor: pointer;
  background: var(--off-white, #f9f9f7);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: .35rem .65rem;
  user-select: none;
}
@media (max-width: 480px) {
  .avail-days-grid { display: grid; grid-template-columns: 1fr 1fr; }
}
.blocked-date-tag {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: var(--color-input-bg, #f3f4f6);
  border: 1px solid var(--borde);
  border-radius: 100px;
  padding: .15rem .55rem;
  font-size: .78rem;
}
.blocked-date-remove {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .9rem;
  color: var(--color-text-muted);
  padding: 0 .1rem;
  line-height: 1;
}
.blocked-date-remove:hover { color: #c62828; }

/* ── UI-6.4 Tag autocomplete dropdown ──────────────────────────────────── */
.tags-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0; right: 0;
  background: var(--color-surface, #fff);
  border: 1px solid var(--borde, #e5e7eb);
  border-radius: var(--radius, 6px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  z-index: 200;
  max-height: 200px;
  overflow-y: auto;
}
.tags-dropdown__item {
  display: block;
  padding: .45rem .85rem;
  font-size: .875rem;
  cursor: pointer;
  color: var(--color-text);
}
.tags-dropdown__item:hover,
.tags-dropdown__item.active {
  background: var(--crema, #f5f5f0);
}

/* ── UI-5.6 Form blur validation ────────────────────────────────────────── */
.form-input.is-invalid {
  border-color: #c62828;
  background-color: rgba(198,40,40,.03);
}
.form-field-error {
  display: block;
  font-size: .72rem;
  color: #c62828;
  margin-top: .25rem;
  min-height: 1em;
}

/* ── UI-6.1 Pipeline drag-and-drop ──────────────────────────────────────── */
/* ── UI-6.2 Deal card micro-badges ──────────────────────────────────────── */
.pipeline-card__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-bottom: .4rem;
  flex-wrap: wrap;
}
.pipeline-card__updated {
  font-size: .67rem;
  color: var(--color-text-muted);
}

/* ── UI-6.1 Pipeline drag-and-drop ──────────────────────────────────────── */
.pipeline-card.dragging { opacity: .4; cursor: grabbing; }
.pipeline-col.drag-over {
  background: rgba(11,37,69,.05);
  border-radius: var(--radius);
  outline: 2px dashed var(--azul, #0B2545);
  outline-offset: -3px;
}

/* ── UI-7 — Notifications drawer + badge + recent views ─────────────────────── */

/* Bell button — resets button defaults, matches nav link appearance */
.sidebar__notif-btn {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: .45rem 1.25rem;
  font-family: inherit;
  font-size: .875rem;
  color: var(--color-text);
  cursor: pointer;
  gap: 0;
}
.sidebar__notif-btn:hover { background: var(--sidebar-hover, rgba(255,255,255,.06)); }

/* Unread count badge on bell */
.notif-badge {
  background: var(--naranja, #FF7A5A);
  color: #fff;
  border-radius: 100px;
  font-size: .6rem;
  font-weight: 700;
  padding: .05rem .4rem;
  margin-left: .35rem;
  vertical-align: middle;
  line-height: 1.5;
}

/* Recent views links — slightly smaller than normal nav links */
.sidebar__recent-link {
  font-size: .8rem;
  padding: .3rem 1.25rem .3rem 1.5rem;
  color: var(--color-text-muted);
}
.sidebar__section-label {
  padding: .3rem 1rem .15rem;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-text-muted);
}

/* Drawer overlay */
.notif-drawer__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 1090;
}
.notif-drawer__overlay.visible { display: block; }

/* Drawer panel */
.notif-drawer {
  position: fixed;
  top: 0;
  right: -380px;
  width: 360px;
  max-width: 92vw;
  height: 100vh;
  background: var(--color-surface, #fff);
  border-left: 1px solid var(--borde, #dee2e6);
  z-index: 1100;
  transition: right .25s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -6px 0 24px rgba(0,0,0,.12);
}
.notif-drawer.open { right: 0; }

.notif-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borde, #dee2e6);
  font-weight: 600;
  font-size: .95rem;
  color: var(--azul, #0B2545);
  flex-shrink: 0;
}
.notif-drawer__close {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: .25rem;
  line-height: 1;
}
.notif-drawer__close:hover { color: var(--color-text); }

.notif-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: .5rem 0;
}
.notif-drawer__loading {
  padding: 2rem 1.25rem;
  text-align: center;
  font-size: .85rem;
  color: var(--color-text-muted);
}
.notif-drawer__empty {
  padding: 3rem 1.25rem;
  text-align: center;
  font-size: .85rem;
  color: var(--color-text-muted);
}

.notif-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.notif-drawer__item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--borde, #dee2e6);
}
.notif-drawer__item--unread {
  border-left: 3px solid var(--naranja, #FF7A5A);
  background: rgba(255,122,90,.04);
}
.notif-drawer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--borde, #dee2e6);
  flex-shrink: 0;
  margin-top: .35rem;
}
.notif-drawer__item--unread .notif-drawer__dot {
  background: var(--naranja, #FF7A5A);
}
.notif-drawer__content { flex: 1; min-width: 0; }
.notif-drawer__body-text {
  font-size: .85rem;
  color: var(--color-text);
  line-height: 1.45;
}
.notif-drawer__time {
  font-size: .72rem;
  color: var(--color-text-muted);
  margin-top: .2rem;
}
.notif-drawer__link {
  font-size: .78rem;
  color: var(--azul, #0B2545);
  text-decoration: none;
  font-weight: 600;
  margin-top: .25rem;
  display: inline-block;
}

.notif-drawer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--borde, #dee2e6);
  flex-shrink: 0;
}
.notif-drawer__footer button {
  background: none;
  border: none;
  font-size: .8rem;
  font-family: inherit;
  color: var(--azul, #0B2545);
  cursor: pointer;
  font-weight: 600;
  padding: .25rem 0;
}
.notif-drawer__footer button:hover { text-decoration: underline; }
.notif-drawer__see-all {
  font-size: .8rem;
  color: var(--color-text-muted);
  text-decoration: none;
  font-weight: 600;
}
.notif-drawer__see-all:hover { color: var(--azul, #0B2545); }

/* ─── presupuesto.digital ──────────────────────────────────────────────────── */

/* publico */
.pub-wrap { padding: 2rem 1rem 4rem; }
.pub-provider {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--borde);
}
.pub-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--gold-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  border: 2px solid var(--gold-dim);
  overflow: hidden;
  flex-shrink: 0;
}
.pub-avatar img         { width: 100%; height: 100%; object-fit: cover; }
.pub-provider-name      { font-weight: 700; color: var(--azul); }
.pub-provider-label     { font-size: .78rem; color: var(--gris-med); }
.pub-header             { margin-bottom: 1.25rem; }
.pub-numero             { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--gris-med); margin-bottom: .3rem; }
.pub-titulo             { font-size: 1.4rem; font-weight: 700; color: var(--azul); font-family: 'Fraunces', Georgia, serif; margin-bottom: .4rem; }
.pub-meta               { font-size: .82rem; color: var(--gris-med); display: flex; flex-wrap: wrap; gap: .75rem; }
.pub-items              { margin: 1.25rem 0; }
.pub-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .65rem 0;
  border-bottom: 1px solid var(--borde);
  gap: .5rem;
}
.pub-item:last-child    { border-bottom: none; }
.pub-item-desc          { flex: 1; font-size: .9rem; }
.pub-item-qty           { font-size: .78rem; color: var(--gris-med); }
.pub-item-sub           { font-weight: 600; color: var(--azul); white-space: nowrap; font-family: 'Courier New', monospace; }
.pub-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-top: 2.5px solid var(--azul);
  font-weight: 800;
  font-size: 1.05rem;
}
.pub-total-val { font-family: 'Courier New', monospace; font-size: 1.35rem; color: var(--azul); }
.pub-notas {
  margin-top: .75rem;
  padding: .85rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: .85rem;
  color: var(--gris-med);
}
.action-area {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.action-area .btn       { justify-content: center; font-size: .95rem; }
.action-divider {
  text-align: center;
  font-size: .78rem;
  color: var(--gris-med);
  margin: .35rem 0;
}
.status-banner {
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1.5rem;
  font-weight: 600;
  font-size: .92rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.status-aprobado        { background: var(--verde-bg); color: var(--verde); border: 1px solid rgba(0,127,95,.2); }
.status-pagado          { background: var(--gold-bg);  color: #8a6d00;      border: 1px solid var(--gold-dim); }
.status-vencido         { background: rgba(192,57,43,.07); color: var(--rojo); border: 1px solid rgba(192,57,43,.15); }
.status-rechazado       { background: rgba(192,57,43,.07); color: var(--rojo); border: 1px solid rgba(192,57,43,.15); }
.rechazar-toggle {
  background: none;
  border: 1px solid rgba(192,57,43,.35);
  color: var(--rojo);
  border-radius: var(--radius);
  padding: .5rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  margin-top: .75rem;
  width: 100%;
}
.rechazar-toggle:hover  { background: rgba(192,57,43,.06); }
#rechazar-form          { display: none; margin-top: .75rem; }
#rechazar-form.visible  { display: block; }
#rechazar-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  font-size: .875rem;
  font-family: 'DM Sans', sans-serif;
  resize: vertical;
  min-height: 80px;
  color: var(--texto);
  background: var(--fondo);
}
#rechazar-form .btn-rechazar-confirm {
  background: var(--rojo);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: .55rem 1.25rem;
  font-size: .875rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: .5rem;
  font-family: 'DM Sans', sans-serif;
  width: 100%;
}
.watermark              { display: flex; align-items: center; gap: .4rem; justify-content: center; margin-top: 2rem; font-size: .72rem; color: var(--gris-med); }
.watermark a            { color: var(--azul); font-weight: 600; }

/* detalle */
.det-wrap               { padding: 2rem 1rem 4rem; }
.det-back               { margin-bottom: 1.25rem; }
.det-back a             { color: var(--gris-med); font-size: .85rem; }
.det-back a:hover       { color: var(--azul); }
.det-header             { margin-bottom: 1.5rem; }
.det-header h1          { font-size: 1.4rem; margin-bottom: .35rem; }
.det-header-row         { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.det-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 700px) {
  .det-grid { grid-template-columns: 1fr; }
}
.detail-block           { margin-bottom: 1.25rem; }
.detail-block .detail-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-med); margin-bottom: .2rem; }
.detail-block .detail-val   { font-size: .92rem; color: var(--gris); }
.item-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 0;
  border-bottom: 1px solid var(--borde);
  gap: .5rem;
  font-size: .88rem;
}
.item-row:last-child    { border-bottom: none; }
.item-qty               { color: var(--gris-med); font-size: .78rem; }
.item-sub               { font-weight: 600; color: var(--azul); font-family: 'Courier New', monospace; white-space: nowrap; }
.total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75rem 0;
  border-top: 2px solid var(--azul);
  font-weight: 800;
}
.total-val              { font-family: 'Courier New', monospace; color: var(--azul); font-size: 1.15rem; }
.side-card              { padding: 1.25rem; }
.side-card h3           { font-size: .95rem; margin-bottom: 1rem; }
.side-actions           { display: flex; flex-direction: column; gap: .65rem; }
.side-actions .btn      { justify-content: center; }
.share-link-box {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: .6rem .75rem;
  font-size: .78rem;
  font-family: 'Courier New', monospace;
  color: var(--azul);
  word-break: break-all;
  margin-bottom: .75rem;
}
.status-badge-xl {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 1rem;
  border-radius: 100px;
  font-size: .85rem;
  font-weight: 700;
}

/* mis-presupuestos */
.list-wrap { padding: 2rem 1rem 4rem; }
.list-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.list-header h1         { font-size: 1.5rem; }
.list-header p          { color: var(--gris-med); font-size: .875rem; }
.user-tag {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--gold-bg);
  border: 1px solid var(--gold-dim);
  border-radius: 100px;
  padding: .3rem .75rem;
  font-size: .78rem;
  font-weight: 700;
  color: #6b4f00;
}
.user-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold-dim);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: .8rem;
}
.user-avatar img        { width: 100%; height: 100%; object-fit: cover; }
.pres-card {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .75rem;
  transition: border-color .15s, box-shadow .15s;
  text-decoration: none;
  color: inherit;
}
.pres-card:hover        { border-color: var(--azul); box-shadow: 0 2px 12px rgba(11,37,69,.1); text-decoration: none; }
.pres-card-main         { flex: 1; min-width: 0; }
.pres-card-title        { font-weight: 700; color: var(--azul); font-size: .95rem; margin-bottom: .2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pres-card-meta         { font-size: .78rem; color: var(--gris-med); display: flex; flex-wrap: wrap; gap: .6rem; }
.pres-card-right        { text-align: right; flex-shrink: 0; }
.pres-card-total        { font-weight: 800; color: var(--azul); font-family: 'Courier New', monospace; font-size: .95rem; }
.empty-state            { text-align: center; padding: 3rem 1rem; color: var(--gris-med); }
.empty-state h2         { font-size: 1.2rem; margin-bottom: .5rem; }
.empty-state p          { margin-bottom: 1.5rem; font-size: .9rem; }
.stats-bar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.stat-item {
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  text-align: center;
}
.stat-item .stat-val    { font-size: 1.3rem; font-weight: 800; color: var(--azul); font-family: 'Fraunces', Georgia, serif; }
.stat-item .stat-label  { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--gris-med); font-weight: 700; }
.presup-filter-tabs     { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.presup-filter-tab {
  display: inline-block;
  padding: .3rem .85rem;
  border-radius: 100px;
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--borde);
  background: transparent;
  color: #555;
}
.presup-filter-tab.active,
.presup-filter-tab:hover { background: #0B2545; color: #fff; border-color: #0B2545; }

/* ── Paginas — public page renderer ─────────────────────────────── */
.pg-public-wrap { max-width:860px; margin:0 auto; padding:2.5rem 1.25rem 4rem; }
.pg-public-nav  { display:flex; align-items:center; justify-content:space-between; padding:.75rem 1.25rem; background:#fff; border-bottom:1px solid #e2e8f0; }
.pg-prose { font-size:.97rem; line-height:1.85; }
.pg-prose h1,.pg-prose h2,.pg-prose h3 { font-family:'Fraunces',serif; color:#0B2545; }
.pg-prose h2 { font-size:1.5rem; margin-top:2rem; }
.pg-prose h3 { font-size:1.15rem; margin-top:1.5rem; }
.pg-prose img { max-width:100%; border-radius:8px; margin:1rem 0; }
.pg-prose a   { color:#0B2545; }
.pg-prose blockquote { border-left:4px solid #FF7A5A; padding:.5rem 1rem; margin:1rem 0; background:#fff7f5; border-radius:0 8px 8px 0; color:#64748b; }
.pg-prose code { background:#f1f5f9; padding:.15rem .35rem; border-radius:4px; font-size:.85em; }
.pg-prose pre  { background:#0B2545; color:#e2e8f0; padding:1rem 1.25rem; border-radius:8px; overflow-x:auto; font-size:.85rem; }
.pg-prose table { width:100%; border-collapse:collapse; margin:1rem 0; }
.pg-prose th,.pg-prose td { border:1px solid #e2e8f0; padding:.5rem .75rem; text-align:left; }
.pg-prose th { background:#f8fafc; font-weight:700; font-size:.85rem; }

/* ── Portal Cliente Hub ────────────────────────────────────────────────────── */
.hub-wrap { min-height:100vh; background:var(--color-bg,#FBFBF8); }
.hub-header { background:#0B2545; color:#fff; padding:1rem 1.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.hub-header-title { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:700; margin:0; }
.hub-logout-btn { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.35); border-radius:6px; padding:.4rem .85rem; font-size:.85rem; cursor:pointer; white-space:nowrap; }
.hub-logout-btn:hover { background:rgba(255,255,255,.25); }
.hub-body { max-width:860px; margin:0 auto; padding:1.5rem 1rem; }
.hub-section { margin-bottom:2rem; }
.hub-section-title { font-family:'Fraunces',serif; font-size:1.05rem; font-weight:700; color:#0B2545; margin:0 0 .85rem; padding-bottom:.5rem; border-bottom:2px solid #e5e7eb; }
.hub-empty { text-align:center; color:#9ca3af; padding:2.5rem 1rem; font-size:.95rem; }
.hub-table-wrap { overflow-x:auto; min-width:0; }
.hub-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.hub-table th { text-align:left; font-weight:600; color:#6b7280; padding:.5rem .75rem; border-bottom:1px solid #e5e7eb; white-space:nowrap; }
.hub-table td { padding:.65rem .75rem; border-bottom:1px solid #f3f4f6; color:#343a40; vertical-align:middle; }
.hub-table tr:last-child td { border-bottom:none; }
.hub-badge { display:inline-block; padding:.2rem .55rem; border-radius:999px; font-size:.78rem; font-weight:600; }
.hub-badge-borrador,.hub-badge-pendiente,.hub-badge-draft { background:#f3f4f6; color:#6b7280; }
.hub-badge-enviado,.hub-badge-sent { background:rgba(11,37,69,.10); color:#0B2545; }
.hub-badge-aceptado,.hub-badge-pagado,.hub-badge-active { background:rgba(0,127,95,.12); color:#007F5F; }
.hub-badge-rechazado,.hub-badge-vencido,.hub-badge-overdue { background:rgba(255,122,90,.12); color:#FF7A5A; }
.hub-link { color:#FF7A5A; text-decoration:none; font-weight:600; }
.hub-link:hover { text-decoration:underline; }
.hub-date { color:#9ca3af; font-size:.82rem; white-space:nowrap; }
@media (max-width:540px) { .hub-table th:nth-child(3),.hub-table td:nth-child(3) { display:none; } }

/* ── Kasvu — Pulso del negocio ─────────────────────────────────────────────── */
.kasvu-pulse-card { background:var(--color-surface); border:1px solid var(--borde); border-radius:var(--radius); padding:.75rem 1rem; margin-bottom:1rem; }
.kasvu-pulse-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--color-text-muted); margin-bottom:.6rem; }
.kasvu-pulse-pills { display:flex; flex-wrap:wrap; gap:.5rem; }
.kasvu-pulse-pill { display:inline-flex; align-items:center; gap:.35rem; text-decoration:none; padding:.35rem .7rem; border-radius:99px; background:var(--color-input-bg); border:1px solid var(--borde); color:var(--gris); }
.kasvu-pulse-pill--warn { background:rgba(255,122,90,.1); border-color:rgba(255,122,90,.3); color:#c2400b; }
.kasvu-pulse-value { font-size:.78rem; font-weight:700; }
.kasvu-pulse-desc { font-size:.72rem; color:inherit; opacity:.8; }

/* ── Portal Acceso ─────────────────────────────────────────────────────────── */
.portal-acceso-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--color-bg,#FBFBF8); padding:1rem; }
.portal-acceso-card { width:100%; max-width:420px; background:#fff; border-radius:12px; box-shadow:0 2px 16px rgba(11,37,69,.10); padding:2rem 1.75rem; }
.portal-acceso-logo { text-align:center; margin-bottom:1.5rem; }
.portal-acceso-logo span { font-size:2rem; }
.portal-acceso-title { font-family:'Fraunces',serif; font-size:1.35rem; font-weight:700; color:#0B2545; margin:0 0 .35rem; text-align:center; }
.portal-acceso-sub { font-size:.9rem; color:#6b7280; text-align:center; margin:0 0 1.5rem; }
.portal-alert { border-radius:8px; padding:.75rem 1rem; font-size:.9rem; margin-bottom:1.25rem; }
.portal-alert-success { background:rgba(0,127,95,.10); color:#007F5F; border:1px solid rgba(0,127,95,.25); }
.portal-alert-info { background:rgba(11,37,69,.07); color:#0B2545; border:1px solid rgba(11,37,69,.15); }
.portal-label { display:block; font-size:.85rem; font-weight:600; color:#343a40; margin-bottom:.35rem; }
.portal-input { width:100%; padding:.65rem .85rem; border:1.5px solid #d1d5db; border-radius:8px; font-size:1rem; color:#343a40; background:#fff; box-sizing:border-box; transition:border-color .15s; }
.portal-input:focus { outline:none; border-color:#0B2545; }
.portal-btn { display:block; width:100%; margin-top:1.1rem; padding:.75rem 1rem; background:#FF7A5A; color:#fff; border:none; border-radius:8px; font-size:1rem; font-weight:600; cursor:pointer; transition:background .15s; }
.portal-btn:hover { background:#e86645; }
.portal-footer { text-align:center; margin-top:1.25rem; font-size:.8rem; color:#9ca3af; }

/* ── cobro-pagar public payment page ─────────────────────────────────────── */
.cobro-wrap { max-width:480px; width:100%; }
.cobro-logo { text-align:center; margin-bottom:1.5rem; font-family:'Fraunces',serif; font-size:1.15rem; color:var(--azul,#0B2545); font-weight:700; }
.cobro-card { background:var(--color-surface,#fff); border:1px solid var(--borde,#dee2e6); border-radius:12px; padding:1.5rem; margin-bottom:1.25rem; }
.cobro-section-label { font-size:.78rem; font-weight:600; color:var(--color-text-muted,#6c757d); text-transform:uppercase; letter-spacing:.05em; margin-bottom:1rem; }
.cobro-grid { display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.cobro-field-label { font-size:.75rem; color:var(--color-text-muted,#6c757d); }
.cobro-field-value { font-weight:600; }
.cobro-amount { font-size:1.5rem; font-weight:700; color:var(--azul,#0B2545); }
.cobro-badge { font-size:.8rem; font-weight:600; padding:.25rem .55rem; border-radius:8px; display:inline-block; }
.cobro-badge--paid { background:#d4edda; color:#155724; }
.cobro-badge--pending { background:#fff3cd; color:#856404; }
.cobro-pay-option { border:1px solid var(--borde,#dee2e6); border-radius:8px; padding:1rem; margin-bottom:.75rem; }
.cobro-pay-option__label { font-size:.8rem; font-weight:600; margin-bottom:.4rem; }
.cobro-pay-option__value { font-size:1.1rem; font-weight:700; font-family:monospace; }
.cobro-pay-option__sub { font-size:.8rem; color:var(--color-text-muted,#6c757d); }
.btn-mp { display:block; background:#00b1ea; color:#fff; border-radius:8px; padding:.85rem; text-align:center; font-size:.9rem; font-weight:700; text-decoration:none; margin-bottom:.75rem; }
.cobro-muted { color:var(--color-text-muted,#6c757d); font-size:.88rem; margin:0; }

/* ── Pagina Publica — Template Gallery ──────────────────────────────────────── */
.template-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1rem;
}
.template-card {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  border: 2px solid var(--borde, #dee2e6);
  border-radius: var(--radius, 8px);
  overflow: hidden;
  background: #fff;
  transition: border-color 150ms, box-shadow 150ms;
}
.template-card:hover { border-color: var(--color-accent, #FF7A5A); box-shadow: 0 2px 8px rgba(0,0,0,.07); }
.template-card--active { border-color: var(--color-accent, #FF7A5A); box-shadow: 0 0 0 3px rgba(255,122,90,.15); }
.template-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--color-input-bg, #f4f5f7);
}
.template-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 200ms;
}
.template-card:hover .template-card__thumb img { transform: scale(1.04); }
.template-card__check {
  position: absolute; top: .5rem; right: .5rem;
  background: var(--color-accent, #FF7A5A);
  color: #fff;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700;
  line-height: 1;
}
.template-card__meta {
  display: flex; flex-direction: column; gap: .15rem;
  padding: 0 .75rem;
}
.template-card__label { font-size: .85rem; font-weight: 600; color: var(--color-text, #343a40); }
.template-card__sub   { font-size: .72rem; color: var(--color-text-muted, #6c757d); }
.template-card__btn   { margin: 0 .75rem .75rem; align-self: flex-start; }
@media (max-width: 480px) {
  .template-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Financial dashboard utilities (resumen, aging, proveedor, proyeccion) ── */
.breadcrumb-link { color: var(--color-text-muted); font-size: .85rem; text-decoration: none; }
.breadcrumb-link:hover { text-decoration: underline; }
.breadcrumb-sep  { margin: 0 8px; color: var(--color-text-muted); }
.panel {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 1.25rem;
}
.panel__title { font-weight: 700; font-size: .95rem; margin-bottom: .75rem; }
.two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .two-col-grid { grid-template-columns: 1fr; }
}
.bar-track { height: 8px; background: var(--color-border, #e5e7eb); border-radius: 4px; overflow: hidden; }
.bar-fill  { height: 100%; border-radius: 4px; }
.stacked-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--color-border, #e5e7eb); }
.text-right  { text-align: right; }
.text-bold   { font-weight: 600; }
.text-bolder { font-weight: 700; }
.text-heavy  { font-weight: 800; }
.text-sm     { font-size: .85rem; }
.text-xs     { font-size: .75rem; }
.footer-note { font-size: .78rem; color: var(--color-text-muted); line-height: 1.5; }
.color-green   { color: #16A34A; }
.color-red     { color: #DC2626; }
.color-blue    { color: #2563EB; }
.color-amber   { color: #d97706; }
.color-orange  { color: #ea580c; }
.color-danger  { color: #ef4444; }
.flex-between  { display: flex; justify-content: space-between; align-items: center; }
.link-primary  { color: var(--color-primary); text-decoration: none; }
.link-primary:hover { text-decoration: underline; }
.inline-badge  {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .75rem;
  font-weight: 600;
}

/* ── Legal cases — digital signature badges (S6-2) ─────────────────────────── */
.sig-badge        { display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px;
                    font-weight:600; margin-top:3px; }
.sig-valid        { background:#d1fae5; color:#065f46; }
.sig-invalid      { background:#fee2e2; color:#991b1b; }
.sig-upload label { font-size:11px; padding:2px 8px; }