/* ============================================================
   Partners Obsidian Soft · Estética alineada con obsidiansoft.com
   Color de marca: el teal exacto del logo SVG (#53868b)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --brand:        #53868b;       /* color exacto del logo Obsidian */
  --brand-dark:   #3d6468;
  --brand-deep:   #1f4144;
  --brand-soft:   #e8f4f5;
  --brand-glow:   #6fa3a8;
  --accent:       #cf2e2e;       /* rojo accent diagonal de obsidiansoft.com */
  --accent-soft:  #fbe5e5;

  --black:        #0d1417;
  --black-2:      #1a2227;
  --black-3:      #2a343a;

  --text:         #1a2227;
  --text-soft:    #4a565d;
  --text-light:   #8c969d;
  --border:       #e3e6e8;
  --border-soft:  #eef0f1;
  --bg:           #f6f7f8;
  --surface:      #ffffff;

  --radius:       8px;
  --radius-lg:    14px;
  --max-width:    1200px;

  --font-display: 'Bebas Neue', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-brand:   'Nasalization', 'Bebas Neue', sans-serif;
  --font-mono:    'JetBrains Mono', SFMono-Regular, ui-monospace, Menlo, monospace;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Fuente de marca · la misma que el wordmark "OBSIDIAN" del logo */
@font-face {
  font-family: 'Nasalization';
  src: url('/static/fonts/nasalization-rg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

[data-theme="dark"] {
  --text:        #e6e8ea;
  --text-soft:   #b6bbbf;
  --text-light:  #8c969d;
  --border:      #2a343a;
  --border-soft: #1a2227;
  --bg:          #0d1417;
  --surface:     #15201f;
  --brand-soft:  #14282b;
}
[data-theme="dark"] body { background: var(--bg); }

html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 400;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bebas Neue regular (sin negrita) en titulares principales */
h1, h2, h3, h4 { font-weight: 500; line-height: 1.15; }
.hero-title, .feature-title, .section-title, .page-header h2,
.cta-band-text h2, .auth-card h2 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  font-weight: 400;
  text-transform: none;
}

/* Mono para títulos secundarios y elementos técnicos */
.profile-card h3, .detail-block h3, .feature-eyebrow,
.dropdown-meta-name, .footer-tagline {
  font-family: var(--font-mono);
}
.profile-card h3, .detail-block h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-deep);
  margin-bottom: 14px;
}
[data-theme="dark"] .profile-card h3,
[data-theme="dark"] .detail-block h3 { color: var(--brand-glow); }

a { color: var(--brand); text-decoration: none; transition: color .12s; }
a:hover { color: var(--brand-dark); text-decoration: none; }

code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--brand-soft);
  color: var(--brand-deep);
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 500;
}
[data-theme="dark"] code { color: var(--brand-glow); }

/* ============================================================
   Topbar (negro, full-bleed, sticky, logo más grande)
   ============================================================ */
#topbar {
  background: var(--black);
  color: #fff;
  border-bottom: 1px solid #1a2227;
  position: sticky;
  top: 0;
  z-index: 100;
}
.topbar-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px;
  height: 80px;
  display: flex;
  align-items: center;
  gap: 24px;
}
@media (max-width: 600px) {
  .topbar-inner { padding: 0 16px; height: 68px; gap: 12px; }
}
#topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
#topbar .brand-logo {
  display: block;
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  transition: filter .12s;
}
@media (max-width: 600px) { #topbar .brand-logo { height: 28px; } }
#topbar .brand:hover .brand-logo { filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(83,134,139,.5)); }
#topbar .brand-tag {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--brand-glow);
  border-left: 1px solid #2a343a;
  padding: 2px 0 6px 12px;          /* mismo padding vertical que .topnav a */
  border-bottom: 2px solid transparent; /* iguala altura de cada item del menú */
  line-height: 1;
  font-weight: 500;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
}

#topbar .topnav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: 24px;
  flex: 1;
}
#topbar .topnav a {
  color: #d6dde0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 0 6px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  transition: color .12s, border-color .12s;
}
#topbar .topnav a:hover { color: #fff; }
#topbar .topnav a.active {
  color: var(--brand-glow);
  font-weight: 400;
  border-color: var(--brand-glow);
}

#topbar .user-menu { position: relative; flex-shrink: 0; }
#topbar .user-menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid #2a343a;
  border-radius: 999px;
  padding: 6px 14px 6px 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  color: #d6dde0;
}
#topbar .user-menu-trigger:hover { color: #fff; border-color: #4a565d; background: rgba(255,255,255,.04); }
#topbar .avatar-thumb {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
#topbar .avatar-placeholder-thumb {
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
#topbar .user-menu-stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
#topbar .user-menu-name { font-weight: 500; color: #fff; }
#topbar .user-menu-partner {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--brand-glow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 1px;
}
#topbar .chevron path { stroke: #8c969d; }

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
  min-width: 240px;
  z-index: 200;
  padding: 6px 0;
}
.user-dropdown.open { display: block; }
.dropdown-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-light);
  padding: 10px 16px 4px;
  font-weight: 500;
}
.dropdown-meta { padding: 4px 16px 10px; border-bottom: 1px solid var(--border-soft); }
.dropdown-meta-name { font-size: 13px; font-weight: 600; color: var(--text); }
.dropdown-meta-partner {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-light);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.dropdown-item {
  display: block;
  padding: 9px 16px;
  color: var(--text);
  font-size: 13px;
  text-decoration: none;
}
/* Botones usados como dropdown-item (p.ej. "Cerrar sesión") */
button.dropdown-item {
  width: 100%; text-align: left;
  background: none; border: none;
  cursor: pointer; font-size: 13px; font-family: inherit;
}
.dropdown-item:hover { background: var(--brand-soft); color: var(--brand-dark); text-decoration: none; }
.dropdown-divider { height: 1px; background: var(--border-soft); margin: 4px 0; }
.dropdown-item-danger:hover { background: var(--accent-soft); color: var(--accent); }
[data-theme="dark"] .user-dropdown { background: #1a2227; border-color: #2a343a; color: var(--text); }
[data-theme="dark"] .dropdown-item:hover { background: #2a343a; }

@media (max-width: 880px) {
  #topbar .topnav { display: none; }
}
@media (max-width: 600px) {
  #topbar .user-menu-stack { display: none; }
  #topbar .user-menu-trigger { padding: 4px; border-radius: 50%; }
  #topbar .user-menu-trigger .chevron { display: none; }
  /* Empuja el avatar al borde derecho · la nav móvil ya está oculta */
  #topbar .user-menu { margin-left: auto; }
}
@media (max-width: 880px) and (min-width: 601px) {
  /* Tablet / topnav oculto pero avatar con texto: también pegado al
     borde derecho */
  #topbar .user-menu { margin-left: auto; }
}

/* ============================================================
   Layout wrapper
   ============================================================ */
#wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 28px 64px;
}
@media (max-width: 600px) { #wrapper { padding: 0 16px 48px; } }
#content { min-height: 60vh; }

/* ============================================================
   Footer
   ============================================================ */
#footer {
  background: var(--black);
  color: #d6dde0;
  margin-top: 64px;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 36px 28px 28px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.footer-brand { display: flex; flex-direction: column; gap: 6px; }
.footer-logo {
  height: 38px;
  width: auto;
  filter: brightness(0) invert(1);
  display: block;
}
.footer-tagline {
  font-size: 11.5px;
  color: var(--brand-glow);
  letter-spacing: 0.04em;
  font-weight: 500;
  text-transform: uppercase;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.footer-links a { color: #d6dde0; font-size: 12.5px; }
.footer-links a:hover { color: var(--brand-glow); }
.footer-meta { font-size: 11.5px; color: #8c969d; text-align: right; }
@media (max-width: 700px) {
  .footer-inner { grid-template-columns: 1fr; gap: 16px; }
  .footer-meta { text-align: left; }
}

/* ============================================================
   Flash messages
   ============================================================ */
.flash-stack { display: flex; flex-direction: column; gap: 8px; margin: 16px 0 0; }
.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 400;
}
.flash-error   { background: var(--accent-soft); color: #9f1239; border: 1px solid #fecdd3; }
.flash-success { background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; }
.flash-info    { background: var(--brand-soft); color: var(--brand-dark); border: 1px solid #c8d6d9; }

/* Versión inline embebida dentro del .auth-card (login/verify), entre el
   campo y el botón. No usa la pila global porque en auth-page el wrapper
   es flex centrado y el .flash-stack se convertía en hermano lateral
   desplazando la tarjeta. */
.auth-flash {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.45;
  border: 1px solid transparent;
}
.auth-flash + .auth-flash { margin-top: -8px; }
.auth-flash-error   { background: #fef2f2; color: #9f1239; border-color: #fecdd3; }
.auth-flash-success { background: #f0fdf4; color: #166534; border-color: #bbf7d0; }
.auth-flash-info    { background: var(--brand-soft); color: var(--brand-dark); border-color: #c8d6d9; }

/* ============================================================
   Auth screens
   ============================================================ */
body.auth-page {
  position: relative;
  background: var(--black);
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}
body.auth-page #wrapper {
  max-width: 100%;
  padding: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.auth-page #footer { display: none; }
body.auth-page #topbar { display: none; }

body.auth-page::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle at 20% 30%, rgba(83,134,139,.42)  0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(45,80,90,.55)    0%, transparent 60%),
    radial-gradient(circle at 60% 20%, rgba(31,65,68,.45)    0%, transparent 60%),
    radial-gradient(circle at 30% 85%, rgba(83,134,139,.30)  0%, transparent 65%),
    linear-gradient(160deg, #0a1013 0%, #15252a 55%, #1f4144 100%);
  background-size: 220% 220%, 240% 240%, 260% 260%, 250% 250%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 50% 0%, 0% 100%, center;
  filter: saturate(1.05);
  animation: auth-bg-shift 32s ease-in-out infinite alternate;
}
body.auth-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(83,134,139,.20) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 100%, rgba(0,0,0,.55)    0%, transparent 60%);
  pointer-events: none;
  animation: auth-bg-pulse 18s ease-in-out infinite alternate;
}
@keyframes auth-bg-shift {
  0%   { background-position: 0% 0%,   100% 100%, 50% 0%,    0% 100%, center; }
  25%  { background-position: 30% 20%,  70% 80%,  60% 30%,  10% 90%,  center; }
  50%  { background-position: 60% 40%,  40% 60%,  70% 50%,  30% 70%,  center; }
  75%  { background-position: 80% 70%,  20% 30%,  50% 70%,  60% 40%,  center; }
  100% { background-position: 100% 100%, 0% 0%,   30% 90%, 100% 0%,   center; }
}
@keyframes auth-bg-pulse { 0%{opacity:.85} 50%{opacity:1} 100%{opacity:.80} }
@media (prefers-reduced-motion: reduce) {
  body.auth-page::before, body.auth-page::after { animation: none; }
}

.auth-shell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}
.auth-card {
  background: #fff;
  width: 100%; max-width: 460px;
  padding: 44px 40px 36px;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.30);
}
.auth-logo { text-align: center; margin-bottom: 22px; }
.auth-logo-img { display: inline-block; height: auto; width: 200px; max-width: 80%; }
.auth-card h2 { text-align: center; font-size: 30px; color: var(--text); }
.auth-subtitle {
  text-align: center;
  color: var(--text-light);
  font-size: 13.5px;
  margin: 8px 0 28px;
  line-height: 1.55;
}
@media (max-width: 600px) {
  .auth-shell { padding: 16px; }
  .auth-card  { padding: 32px 24px 28px; border-radius: 12px; }
}

/* OTP boxes */
.otp-group { display: flex; gap: 8px; justify-content: center; }
.otp-box {
  width: 44px; height: 52px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text);
}
.otp-box:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(83,134,139,.20);
}
.auth-note {
  margin-top: 22px;
  font-size: 12px;
  color: var(--text-light);
  text-align: center;
  line-height: 1.6;
}

/* Form basics shared across all pages */
.form-group { margin-bottom: 16px; }
.form-group label, .form-row label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-light);
  margin-bottom: 6px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.input-field {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  font-family: var(--font-body);
  background: #fff;
  color: var(--text);
  transition: border-color .12s, box-shadow .12s;
}
.input-field:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(83,134,139,.18);
}
[data-theme="dark"] .input-field { background: #15201f; border-color: var(--border); color: var(--text); }

.btn-primary {
  width: 100%;
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.btn-primary:hover { background: var(--brand-dark); color: #fff; }
.btn-primary.btn-inline { width: auto; padding: 9px 18px; font-size: 13px; }
.btn-secondary {
  display: inline-block;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: border-color .12s, color .12s, background .12s;
}
.btn-secondary:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.btn-mini {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);
  cursor: pointer;
}
.btn-mini:hover { border-color: var(--brand); color: var(--brand); }

/* ============================================================
   Hero "cinema" · la home post-login (medio alto + diagonal roja)
   ============================================================ */
.hero-cinema {
  position: relative;
  margin: 24px 0 0;
  height: 50vh;
  min-height: 360px;
  max-height: 520px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--text);
  isolation: isolate;
  padding: 0 56px;
  border: 1px solid var(--border);
}
@media (max-width: 700px) {
  .hero-cinema {
    margin: 16px 0 0;
    padding: 56px 28px;
    height: auto;
    min-height: 320px;
    max-height: none;
    border-radius: var(--radius-lg);
  }
}
.hero-cinema .hero-bg {
  position: absolute; inset: 0; z-index: -4;
  background: #ffffff;
}
/* Hexágonos pintados como mask sobre el fondo blanco · tinte teal muy suave */
.hero-cinema .hero-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--brand);
  -webkit-mask-image: url('/static/img/bg/network-vector.svg');
          mask-image: url('/static/img/bg/network-vector.svg');
  -webkit-mask-size: cover;
          mask-size: cover;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: .35;
  pointer-events: none;
}
.hero-cinema .hero-overlay {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(ellipse at 30% 50%,
      rgba(255,255,255,.55) 0%, transparent 70%),
    linear-gradient(105deg,
      rgba(255,255,255,.45) 0%,
      rgba(255,255,255,.10) 60%,
      transparent 100%);
}
/* Diagonal roja eliminada · el hero queda limpio sobre el fondo blanco
   con la retícula de hexágonos como único elemento gráfico. */
.hero-cinema .hero-diagonal { display: none; }

.hero-inner { max-width: 640px; position: relative; z-index: 2; }
.hero-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  color: var(--brand-dark);
  font-weight: 500;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-eyebrow-l { flex: 0 0 auto; }
.hero-eyebrow-r { flex: 0 0 auto; }
.hero-eyebrow-l::after {
  content: '·';
  margin-left: 14px;
  color: var(--brand-dark);
  opacity: .7;
}
@media (max-width: 700px) {
  .hero-eyebrow {
    justify-content: space-between;
    gap: 8px;
    letter-spacing: 1.6px;
    font-size: 9.5px;
    width: 100%;
  }
  .hero-eyebrow-l::after { display: none; }
}
.hero-title {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1.02;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  color: var(--text);
}
@media (max-width: 700px) { .hero-title { font-size: 38px; } }
@media (max-width: 420px) { .hero-title { font-size: 32px; } }

.hero-sub {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 540px;
  font-weight: 400;
}
.hero-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.btn-cta {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border: 1px solid var(--brand);   /* sin borde "user-agent" */
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s, background .12s, border-color .12s;
}
.btn-cta[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(83,134,139,.35);
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: #fff;
  text-decoration: none;
}
.btn-cta-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
}
.btn-cta-ghost:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
  border-color: #fff;
}

/* ============================================================
   Bento grid (home · webinar destacado + docs + pipeline)
   ============================================================ */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 28px 0;
}
@media (max-width: 800px) { .bento { grid-template-columns: 1fr; } }
.bento-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  overflow: hidden;
}
.bento-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(83,134,139,.12);
  text-decoration: none;
  color: var(--text);
}
.bento-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--brand);
  font-weight: 600;
}

/* Webinar (card normal · sin thumbnail XL) */
.bento-webinar-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin-top: 4px;
  color: var(--text);
}
.bento-webinar-author {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-top: 4px;
}

/* B · últimos documentos */
.bento-doc-list { list-style: none; margin: 6px 0; }
.bento-doc-list li {
  display: grid;
  grid-template-columns: minmax(112px, max-content) 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
}
.bento-doc-list li:last-child { border-bottom: 0; }
.bento-doc-kind {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
}
.bento-doc-title {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bento-doc-date {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-light);
}
.bento-link {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
  font-weight: 600;
  padding-top: 12px;
}
.bento-empty-msg {
  font-size: 13px;
  color: var(--text-light);
  padding: 18px 0;
}

/* Pipeline · ahora en claro como las otras cards · trío centrado */
.bento-pipeline-row {
  display: flex;
  justify-content: center;
  gap: 36px;
  margin: 8px 0 4px;
}
.bento-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}
.bento-stat-num {
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1;
  color: var(--brand);
  font-weight: 400;
  text-align: center;
}
.bento-stat-num.bento-stat-win  { color: #2e8b57; }
.bento-stat-num.bento-stat-lost { color: #9ca3af; }
.bento-stat-name {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
}

/* ============================================================
   Counters strip (legacy · mantenido por compatibilidad)
   ============================================================ */
.counters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 28px 0;
}
.counter {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  text-decoration: none;
  color: var(--text);
  transition: border-color .12s, transform .12s, box-shadow .12s;
  display: block;
}
.counter:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(83,134,139,.12);
  text-decoration: none;
  color: var(--text);
}
.counter-num {
  font-family: var(--font-display);
  font-size: 44px;
  color: var(--brand);
  line-height: 1;
  margin-bottom: 4px;
}
.counter-name {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--text);
}
.counter-cta { background: var(--black); border-color: var(--black); color: #fff; }
.counter-cta:hover { background: var(--black-2); color: #fff; }
.counter-cta .counter-num { color: var(--brand-glow); }
.counter-cta .counter-name { color: #fff; }

/* ============================================================
   Feature row (Qué es Obsidian)
   ============================================================ */
.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 40px 48px;
  margin: 24px 0 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.feature-text { max-width: 520px; }
.section-eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 2.4px;
  color: var(--brand);
  font-weight: 500;
  margin-bottom: 14px;
}
.feature-title { font-size: 42px; margin-bottom: 14px; color: var(--text); }
.feature-desc { color: var(--text-soft); font-size: 14.5px; line-height: 1.7; margin-bottom: 18px; }
.feature-actions { display: flex; flex-direction: column; gap: 6px; }
.link-arrow { font-size: 13px; font-weight: 600; color: var(--brand); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.link-arrow:hover { color: var(--brand-dark); }
.feature-image {
  position: relative;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
  border: 0;
}
.feature-image img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
  .feature-title { font-size: 32px; }
}

/* ============================================================
   Section heads / 2-col rows
   ============================================================ */
.row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 24px 0 8px; }
@media (max-width: 900px) { .row-2col { grid-template-columns: 1fr; gap: 28px; } }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.section-title { font-size: 28px; color: var(--text); }
.section-link { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand); font-weight: 500; }
.section-link:hover { color: var(--brand-dark); }
.empty-block {
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
  color: var(--text-light);
  font-size: 13px;
}
.link-emph { color: var(--brand); font-weight: 600; }

/* ============================================================
   Document / resource lists (home)
   ============================================================ */
.doc-list, .res-list { list-style: none; }
.doc-item, .res-item {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.doc-item:last-child, .res-item:last-child { border-bottom: none; }
.doc-kind, .res-kind {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: 600;
  border-radius: 4px;
  padding: 4px 6px;
  text-align: center;
  align-self: start;
  white-space: nowrap;
}
.doc-kind-datasheet, .res-kind-demo  { background: var(--brand-soft); color: var(--brand-dark); }
.doc-kind-manual, .res-kind-caso     { background: #fdf3e3; color: #8a4d0a; }
.doc-kind-presentacion, .res-kind-formacion { background: #efe9f6; color: #4a1a6a; }
.doc-kind-contrato                   { background: var(--accent-soft); color: var(--accent); }
.doc-kind-otro, .res-kind-enlace     { background: #eef0f1; color: #45525d; }

.doc-title, .res-title {
  display: block;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--text);
  text-decoration: none;
  margin-bottom: 4px;
}
.doc-title:hover, .res-title:hover { color: var(--brand); text-decoration: none; }
.doc-desc, .res-desc { color: var(--text-soft); font-size: 13px; line-height: 1.55; }
.res-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-light); margin-top: 4px; letter-spacing: 0.06em; text-transform: uppercase; }

/* ============================================================
   Page headers
   ============================================================ */
.page-header { margin: 24px 0; }
.page-header h2 { font-size: 44px; color: var(--text); }
.page-header .page-subtitle { color: var(--text-soft); margin-top: 4px; font-size: 14.5px; max-width: 720px; line-height: 1.55; }
.page-header-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.back-link { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); display: inline-block; margin-bottom: 8px; }
.back-link:hover { color: var(--brand); text-decoration: none; }

/* ============================================================
   Filter tabs
   ============================================================ */
.filter-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 24px; }
.filter-tab {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  background: var(--surface);
  font-weight: 500;
}
.filter-tab:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }
.filter-tab.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ============================================================
   Doc / resource grid (collection pages)
   ============================================================ */
.doc-grid, .res-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .doc-grid, .res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .doc-grid, .res-grid { grid-template-columns: 1fr; } }

.doc-card, .res-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 18px;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.doc-card:hover, .res-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(83,134,139,.12);
}
.doc-card-kind, .res-card-kind {
  align-self: flex-start;
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.2px;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.doc-card-title, .res-card-title { font-size: 16px; font-weight: 600; margin-top: 4px; color: var(--text); line-height: 1.3; }
.doc-card-desc, .res-card-desc { color: var(--text-soft); font-size: 13px; line-height: 1.6; }
.doc-card-meta, .res-card-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: auto;
  padding-top: 10px;
}
.doc-card-action, .res-card-action {
  align-self: flex-start;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--brand);
}
.doc-card-action:hover, .res-card-action:hover { color: var(--brand-dark); text-decoration: none; }

/* ============================================================
   CTA band
   ============================================================ */
.cta-band {
  margin: 48px 0 0;
  background: linear-gradient(105deg, var(--black) 0%, var(--brand-deep) 100%);
  border-radius: var(--radius-lg);
  padding: 36px 48px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 600px) {
  .cta-band { margin: 32px 0 0; padding: 28px 24px; }
}
.cta-band::after {
  content: ""; position: absolute; right: -30px; bottom: -60px;
  width: 220px; height: 220px;
  background: url('/static/img/obsidian-stroke.png') center/contain no-repeat;
  opacity: .10;
  pointer-events: none;
  filter: brightness(0) invert(1);
}
.cta-band-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.cta-band-text h2 { font-size: 32px; color: #fff; margin-bottom: 4px; }
.cta-band-text p { color: rgba(255,255,255,.7); font-size: 14px; }

/* ============================================================
   Tables
   ============================================================ */
.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  /* Sin overflow:hidden · los tooltips de los iconos
     necesitan poder salir de los límites de la tabla */
}
.data-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.data-table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius); }
.data-table tbody tr:last-child td:first-child  { border-bottom-left-radius: var(--radius); }
.data-table tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--radius); }
.data-table th, .data-table td {
  padding: 11px 16px;
  text-align: left;
  font-size: 13px;
  border-bottom: 1px solid var(--border-soft);
}
.data-table th {
  background: #f9fafb;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
[data-theme="dark"] .data-table th { background: #1a2227; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--brand-soft); }
[data-theme="dark"] .data-table tr:hover td { background: var(--black-3); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); }
.data-table .cen, .data-table th.cen { text-align: center; }
.data-table .row-link { color: var(--text); font-weight: 600; }
.data-table .row-link:hover { color: var(--brand); }
.muted { color: var(--text-light); }
.muted-sm { color: var(--text-light); font-size: 11px; margin-top: 2px; }

/* Tables responsive (móvil) */
@media (max-width: 760px) {
  .data-table thead { display: none; }
  .data-table tr {
    display: block;
    border-bottom: 1px solid var(--border);
    padding: 12px 14px;
  }
  .data-table td {
    display: flex;
    justify-content: space-between;
    border: none;
    padding: 6px 0;
    text-align: right;
  }
  .data-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-light);
    font-weight: 500;
    align-self: center;
    margin-right: 12px;
  }
}

/* ============================================================
   Pills
   ============================================================ */
.status-pill, .kind-pill, .role-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  /* Fallback · cualquier status sin variante específica conserva
     un badge gris neutro y nunca se queda sin formato */
  background: #eef0f1;
  color: #45525d;
}
.status-nueva       { background: var(--brand-soft); color: var(--brand-dark); }
.status-lead        { background: var(--brand-soft); color: var(--brand-dark); }
.status-en_curso    { background: #eff6ff; color: #1e40af; }
.status-ganada      { background: #f0fdf4; color: #166534; }
.status-cliente     { background: #f0fdf4; color: #166534; }
.status-demo        { background: #fdf3e3; color: #8a4d0a; }
.status-perdida     { background: #f3f4f6; color: #6b7280; }
.status-descartada  { background: #f3f4f6; color: #6b7280; }
.kind-standard      { background: #eef0f1; color: #45525d; }
.kind-intermediate  { background: #fdf3e3; color: #8a4d0a; }
.kind-admin         { background: var(--brand-soft); color: var(--brand-dark); }
.role-pill          { background: var(--brand-soft); color: var(--brand-dark); margin-right: 4px; }
.level-pill         {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--brand-soft);
  color: var(--brand-dark);
  border: 1px solid #c8dadc;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   Partner chips · logo SVG (blanco) sobre pill negra
   ============================================================ */
.partner-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--black);
  border: 1px solid var(--black-2);
  border-radius: 999px;
  padding: 4px 12px 4px 6px;
  text-decoration: none;
  transition: transform .12s, box-shadow .12s, background .12s;
  vertical-align: middle;
}
.partner-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
  background: var(--black-2);
}
.partner-chip-logo {
  display: inline-block;
  flex-shrink: 0;
  width: 56px; height: 16px;
  background-color: #fff;
  -webkit-mask-position: left center;
  mask-position: left center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.partner-chip-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
}
.partner-chip-plain {
  background: var(--surface);
  border-color: var(--border);
}
.partner-chip-plain .partner-chip-name { color: var(--text); }

/* Tamaños */
.partner-chip-xs { padding: 2px 9px 2px 4px; }
.partner-chip-xs .partner-chip-logo { width: 44px; height: 13px; }
.partner-chip-xs .partner-chip-name { font-size: 10px; }

.partner-chip-md { padding: 7px 18px 7px 10px; gap: 12px; }
.partner-chip-md .partner-chip-logo { width: 80px; height: 24px; }
.partner-chip-md .partner-chip-name { font-size: 13px; }

.partner-chip-lg { padding: 10px 22px 10px 14px; gap: 14px; }
.partner-chip-lg .partner-chip-logo { width: 100px; height: 32px; }
.partner-chip-lg .partner-chip-name { font-size: 14px; }

/* Sólo logo · sin fondo, teñido en azul Obsidian, ancho FIJO para
   alinear visualmente todas las filas independientemente del ratio
   de cada SVG. Hover sutil con tooltip nativo. */
.partner-logo-only {
  display: inline-block;
  width: 160px;             /* ancho uniforme · todos los logos */
  background-color: #4b5563;   /* gris oscuro neutro */
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  vertical-align: middle;
  transition: background-color .12s, transform .12s;
}
.partner-logo-only:hover {
  background-color: var(--brand-dark);
  transform: scale(1.04);
}
@media (max-width: 900px) {
  .partner-logo-only { width: 120px; }
}
@media (max-width: 600px) {
  .partner-logo-only { width: 90px; }
}

/* ============================================================
   Date badges (fechas como pill mono)
   ============================================================ */
.date-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand-dark);
  border: 1px solid #c8dadc;
  white-space: nowrap;
}
.date-badge-neutral { background: var(--brand-soft); color: var(--brand-dark); border-color: #c8dadc; }

/* ============================================================
   Topbar · logo del partner del usuario (sustituye al nombre) */
#topbar .user-menu-partner-logo {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  background: rgba(255,255,255,.06);
  padding: 2px 8px;
  border-radius: 4px;
  max-width: 130px;
}
#topbar .user-menu-partner-logo img {
  display: block;
  width: auto;
  height: 14px;
  filter: brightness(0) invert(1);
}

/* Mi empresa · vista previa del logo del partner */
.company-logo-preview {
  margin: 18px 0;
  padding: 28px;
  background: var(--brand-soft);
  border: 1px solid #c8dadc;
  border-radius: var(--radius);
  text-align: center;
}
.company-logo-preview img {
  max-height: 80px;
  max-width: 240px;
  width: auto;
  height: auto;
  display: inline-block;
  /* Tinta el SVG (todos los logos son blancos sobre transparente)
     en el azul de marca · sólo funciona si filter chain alcanza
     el color exacto. Si no, dejar la imagen tal cual. */
}
.company-logo-preview .logo-mask {
  display: inline-block;
  width: 240px; height: 80px;
  background-color: var(--brand);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* Logo del partner en la tabla admin */
.admin-partner-logo {
  display: inline-block;
  height: 22px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
  background: #0d1417;
  padding: 3px 6px;
  border-radius: 3px;
}

/* Mi empresa · badge de nivel */
.company-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.company-badge {
  width: 160px;
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.company-badge img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,.08));
}
@media (max-width: 600px) {
  .company-row { flex-direction: column-reverse; align-items: stretch; }
  .company-badge { width: 140px; align-self: center; }
}

/* ============================================================
   Detail block
   ============================================================ */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}
.detail-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.detail-card-label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--text-light);
  margin-bottom: 4px;
  font-weight: 500;
}
.detail-card-value { font-size: 14px; color: var(--text); font-weight: 500; }

.detail-block { margin-bottom: 24px; }
.detail-text {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text);
  white-space: pre-wrap;
}

/* ============================================================
   Forms
   ============================================================ */
.form-vertical { max-width: 720px; }
.form-row { margin-bottom: 16px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; gap: 0; } }
.form-hint { display: block; color: var(--text-light); font-size: 11.5px; margin-top: 4px; }
.form-actions {
  display: flex; gap: 10px;
  margin-top: 24px;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
textarea.input-field { resize: vertical; min-height: 80px; font-family: var(--font-body); }
select.input-field,
select:not([class]) {
  /* Chevron teal idéntico al de los formularios .form-card */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2353868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  cursor: pointer;
}
/* File inputs · estilo del botón nativo unificado con .btn-secondary */
input[type="file"].input-field {
  padding: 8px 11px;
  cursor: pointer;
  font-size: 13.5px;
}
input[type="file"].input-field::file-selector-button,
input[type="file"].input-field::-webkit-file-upload-button {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-right: 12px;
  transition: border-color .12s, color .12s, background .12s;
}
input[type="file"].input-field::file-selector-button:hover,
input[type="file"].input-field::-webkit-file-upload-button:hover {
  border-color: var(--brand);
  color: var(--brand);
}

/* ============================================================
   Profile / Configuración
   ============================================================ */
.profile-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }
@media (max-width: 800px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
}
.profile-card-wide { grid-column: 1 / -1; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 14px; font-size: 13.5px; }
.kv-key { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-light); }
.kv-list { margin: 0; display: flex; flex-direction: column; }
.kv-row {
  display: grid;
  grid-template-columns: minmax(170px, 220px) 1fr;
  gap: 18px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.kv-row:last-child { border-bottom: 0; }
.kv-row .kv-key { margin: 0; padding-top: 2px; }
.kv-row .kv-val {
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}
.kv-row .kv-val .form-hint { font-size: 12px; color: var(--text-light); }
@media (max-width: 700px) {
  .kv-row { grid-template-columns: 1fr; gap: 4px; }
}
.avatar-preview {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  overflow: hidden;
}
.avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-placeholder {
  font-size: 36px; color: var(--brand-dark); font-weight: 700;
  font-family: var(--font-display);
}
.avatar-form { margin-bottom: 8px; }
.avatar-form input[type="file"] { font-size: 12px; margin-bottom: 8px; display: block; }
.theme-toggle-form { display: flex; gap: 8px; }
.theme-swatch {
  flex: 1;
  padding: 16px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  cursor: pointer;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
}
.theme-swatch.active { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.theme-swatch-light { background: #fafafa; }
.theme-swatch-dark { background: var(--black-2); color: #f3f4f6; }
.theme-swatch-dark.active { background: var(--black); color: var(--brand-glow); }

/* ============================================================
   Admin subnav (Partners · Usuarios · Importar)
   ============================================================ */
.admin-subnav {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 0;
}
.admin-subnav-item {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  padding: 8px 14px 4px;
  text-decoration: none;
  font-weight: 500;
  position: relative;
}
.admin-subnav-item:hover { color: var(--brand); text-decoration: none; }
.admin-subnav-item.active {
  color: var(--brand-dark);
}
.admin-subnav-item.active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--brand);
}

.info-card {
  background: var(--brand-soft);
  border: 1px solid #c8dadc;
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 8px;
}
.info-card h3 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-dark);
  margin-bottom: 6px;
}
.info-card p { font-size: 13px; color: var(--text); margin-bottom: 6px; }
.info-card p:last-child { margin-bottom: 0; }

/* Tarjeta-formulario blanca · usada en /demo y /admin/demo */
.form-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 8px;
}
.form-card h3 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-dark);
  margin: 0 0 14px;
}
.form-card summary {
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-dark);
}
.form-card .form-row {
  display: block;
  margin-bottom: 14px;
}
.form-card .form-row > span {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.form-card .form-row input,
.form-card .form-row textarea,
.form-card .form-row select {
  width: 100%;
  padding: 9px 11px;
  font-size: 13.5px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  line-height: 1.4;
}
.form-card .form-row select {
  /* Flecha SVG inline (chevron teal) en lugar del control nativo */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2353868b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 34px;
  cursor: pointer;
}
.form-card .form-row input:focus,
.form-card .form-row textarea:focus,
.form-card .form-row select:focus {
  outline: 2px solid var(--brand-soft);
  border-color: var(--brand);
}

/* Filas atenuadas (acceso a demo desactivado) */
.row-muted { opacity: 0.55; }

/* Tarjetas blancas para los bloques de la home (docs / recursos) */
.home-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
}
.home-card .section-head { margin-bottom: 12px; }

/* ============================================================
   Impersonation banner
   ============================================================ */
.impersonation-banner {
  background: linear-gradient(105deg, #fbbf24 0%, #f59e0b 100%);
  color: #1f2937;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 110;
}
.impersonation-icon { font-size: 14px; }
.impersonation-meta { color: #4a4031; font-weight: 400; }
.impersonation-stop {
  margin-left: auto;
  background: #1f2937;
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.impersonation-stop:hover { background: var(--black); color: #fff; text-decoration: none; }

/* When impersonation is active, the topbar sits below the banner */
.impersonation-banner + #topbar { top: 38px; }

/* ============================================================
   Resource cards · webinar / logo thumbnails
   ============================================================ */
.res-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  margin: -20px -20px 12px;
  background: var(--black);
}
.res-card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .18s;
}
.res-card-thumb:hover img { transform: scale(1.04); }
.res-card-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  background: rgba(13,20,23,.85);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  border: 2px solid rgba(255,255,255,.85);
  transition: background .12s, transform .12s;
}
.res-card-thumb:hover .res-card-play { background: var(--accent); transform: translate(-50%,-50%) scale(1.05); }
.res-card-thumb-logo {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 14px;
}
.res-card-thumb-logo img { object-fit: contain; }
.res-card-author {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: -2px;
}

/* Pills extra: webinar, logo, foto */
.res-kind-webinar    { background: var(--brand-soft); color: var(--brand-dark); }
.res-kind-logo       { background: #efe9f6; color: #4a1a6a; }
.res-kind-foto       { background: #fdf3e3; color: #8a4d0a; }

.res-card-thumb-photo {
  background: #f4f4f5;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.res-card-thumb-photo img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  border-radius: 4px;
}
/* Logo de YouTube superpuesto sobre la miniatura del vídeo */
.res-card-yt-badge {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.35));
  transition: transform .18s;
}
.res-card-thumb:hover .res-card-yt-badge {
  transform: translate(-50%, -50%) scale(1.06);
}
.res-card-thumb-logo-dark {
  background: var(--black);
}
.res-card-thumb-logo-dark img { filter: none; }

/* Botones de formato (descarga por extensión) */
.res-card-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.format-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brand-dark);
  text-decoration: none;
  transition: background .12s, border-color .12s, color .12s, transform .12s;
}
.format-pill:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.format-arrow { font-size: 12px; opacity: .9; }

/* ============================================================
   Gallery
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.gallery-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.gallery-card:hover {
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(83,134,139,.12);
}
.gallery-thumb {
  display: block;
  aspect-ratio: 4/3;
  background: var(--black-2);
  overflow: hidden;
}
.gallery-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .25s;
}
.gallery-card:hover .gallery-thumb img { transform: scale(1.02); }
.gallery-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.gallery-partner {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand);
}
.gallery-title { font-weight: 600; font-size: 14.5px; color: var(--text); }
.gallery-caption { color: var(--text-soft); font-size: 12.5px; line-height: 1.5; }

/* Selector de idioma · dropdown del usuario */
.dropdown-lang {
  display: flex;
  align-items: center;
  gap: 8px;
}
.dropdown-lang.active { color: var(--brand-dark); font-weight: 600; }
.dropdown-lang-code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  background: var(--brand-soft);
  color: var(--brand-dark);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* Selector de idioma · footer (sin sesión) */
.footer-langs { display: inline-flex; gap: 6px; margin-left: 14px; }
.footer-lang {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8c969d;
  padding: 2px 6px;
  border-radius: 3px;
  text-decoration: none;
}
.footer-lang.active { background: rgba(255,255,255,.08); color: var(--brand-glow); }
.footer-lang:hover { color: #fff; }

/* Selector de idioma · pantallas auth (login/verify) */
.auth-langs {
  margin-top: 24px;
  display: flex;
  gap: 6px;
  justify-content: center;
}
.auth-lang {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-light);
  text-decoration: none;
}
.auth-lang.active { border-color: var(--brand); color: var(--brand-dark); background: var(--brand-soft); }
.auth-lang:hover { border-color: var(--brand); color: var(--brand); text-decoration: none; }

.btn-mini-strong {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-mini-strong:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-mini-danger {
  color: #b1442d;
  border-color: #e9c8be;
}
.btn-mini-danger:hover {
  background: #b1442d;
  border-color: #b1442d;
  color: #fff;
}
/* ============================================================
   Botones de icono · usados en todas las pantallas /admin
   Estilo único · borde y silueta finos en color neutro,
   independientemente de la acción. El tooltip muestra qué hace.
   Las clases btn-icon-muted / btn-icon-danger se conservan como
   alias para no romper plantillas pero pintan idénticamente.
   ============================================================ */
.btn-icon,
.btn-icon-muted,
.btn-icon-danger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.btn-icon:hover,
.btn-icon:focus-visible,
.btn-icon-muted:hover,
.btn-icon-muted:focus-visible,
.btn-icon-danger:hover,
.btn-icon-danger:focus-visible {
  border-color: var(--text-muted);
  color: var(--text);
  background: #fff;
  text-decoration: none;
  outline: none;
}
.btn-icon svg,
.btn-icon-muted svg,
.btn-icon-danger svg { stroke-width: 1.5; }
/* Tooltip · aparece DEBAJO del icono (no se solapa con la fila
   superior ni con los datos de columnas adyacentes). En la última
   columna de acciones se alinea al borde derecho para no salirse. */
.btn-icon[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1f2937;
  color: #fff;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  z-index: 50;
}
.btn-icon[data-tip]:hover::after,
.btn-icon[data-tip]:focus-visible::after {
  opacity: 1;
}
/* Cuando el icono está dentro de .row-actions (última columna),
   el tooltip se alinea al borde derecho del botón para que no se
   salga por la derecha de la tabla. */
.row-actions .btn-icon[data-tip]::after {
  left: auto;
  right: 0;
  transform: translateX(0);
}
/* Y para el ÚLTIMO icono de la fila de acciones, también queremos
   que no se salga. La regla anterior ya lo cubre todos. */
.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  white-space: nowrap;
}
/* La columna de acciones se ajusta a su contenido (sólo iconos) y
   queda alineada a la derecha. Reserva el min-width necesario para
   alojar hasta 3 iconos sin pisar la celda anterior. */
.data-table th.col-actions,
.data-table td.row-actions {
  width: 1%;
  min-width: 132px;
  white-space: nowrap;
  padding-left: 10px;
  padding-right: 12px;
  text-align: right;
}
.data-table th:last-child,
.data-table td:last-child { padding-right: 12px; }

/* ============================================================
   Errors
   ============================================================ */
.error-shell { text-align: center; padding: 60px 20px; max-width: 520px; margin: 0 auto; }
.error-code { font-family: var(--font-display); font-size: 96px; color: var(--brand); line-height: 1; }
.error-shell h2 { font-size: 22px; margin: 8px 0 12px; color: var(--text); }
.error-msg { color: var(--text-light); font-size: 14px; margin-bottom: 24px; }
.error-debug { margin-top: 24px; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }
.error-debug pre {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px;
  margin-top: 8px;
  white-space: pre-wrap;
  color: var(--text);
  max-height: 360px;
  overflow: auto;
}
[data-theme="dark"] .error-debug pre { background: var(--black-2); color: #d1d5db; }

/* ── Colores de fase para pills de subestado (kanban y listas) ── */
.status-pill[data-phase="contacto"],
.sub-pill[data-phase="contacto"]    { background:#EFF6FF; color:#1D4ED8; border-color:#BFDBFE; }
.status-pill[data-phase="demo"],
.sub-pill[data-phase="demo"]        { background:#ECFEFF; color:#0E7490; border-color:#A5F3FC; }
.status-pill[data-phase="piloto"],
.sub-pill[data-phase="piloto"]      { background:#F5F3FF; color:#6D28D9; border-color:#DDD6FE; }
.status-pill[data-phase="propuesta"],
.sub-pill[data-phase="propuesta"]   { background:#EEF2FF; color:#3730A3; border-color:#C7D2FE; }
.status-pill[data-phase="negociacion"],
.sub-pill[data-phase="negociacion"] { background:#F1F5F9; color:#334155; border-color:#CBD5E1; }
.status-pill[data-phase="riesgo"],
.sub-pill[data-phase="riesgo"]      { background:#FEF2F2; color:#991B1B; border-color:#FECACA; }