@font-face{font-family:'GeistSans';src:url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'GeistSans';src:url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'GeistSans';src:url('https://cdn.jsdelivr.net/npm/geist@1.3.0/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

/* ════════════════ TOKENS ════════════════ */
:root{
  /* Barra inferior del teléfono: es una PÍLDORA FLOTANTE (mismo cristal que el navbar del landing),
     no una barra pegada al borde. Todo lo que se apoya en ella (FABs, toasts, popovers, la hoja
     "Más", el alto de la tabla) mide desde --tabbar-space; no repetir el cálculo a mano. */
  --tabbar-h:58px;
  --tabbar-gap:.75rem;
  --tabbar-space:calc(var(--tabbar-h) + var(--tabbar-gap) + env(safe-area-inset-bottom));
  --ink:#100E0B;
  --ink-soft:#4A443E;
  --ink-mute:#6B6560;
  --indigo:#7D5C17;
  --indigo-600:#8E6B1F;
  --indigo-700:#6A4E13;
  --violet:#A07A28;
  --indigo-light:#D9C078;
  --indigo-soft:#E6D6A4;
  --amber:#F59E0B;
  --amber-2:#FB923C;
  --amber-h:#D97706;
  --teal:#10B981;
  --paper:#FFFFFF;
  --mist:#F7F6F3;
  --lilac:#F6F0E2;
  --g100:#F2F1EE;
  --g200:#E6E3DC;
  --g300:#CBC6BC;
  --g400:#96908A;
  --g500:#6B6560;
  --dark:#060507;
  --dark-2:#0D0C10;
  --line-dark:rgba(255,255,255,.10);
  --ease:cubic-bezier(0.32,0.72,0,1);
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --r-card:1.5rem;
  --r-pill:9999px;
  /* Marca Nexel. --grad va de claro a profundo porque se usa con
     background-clip:text sobre BLANCO: el extremo #7D5C17 carga el contraste.
     --grad-glow es el mismo al revés, para banda oscura. --grad-warm es el
     relleno premium y lleva texto OSCURO: el champagne no contrasta con #fff. */
  --grad:linear-gradient(135deg,#C9A84C 0%,#A07A28 55%,#7D5C17 100%);
  --grad-glow:linear-gradient(135deg,#E0C983 0%,#C9A84C 55%,#B8922F 100%);
  --grad-warm:linear-gradient(135deg,#D9B85F 0%,#C9A84C 55%,#A07A28 100%);
  --font-head:'Space Grotesk',sans-serif;
  --font-body:'Plus Jakarta Sans',sans-serif;
  --font-mono:'JetBrains Mono',monospace;

  /* ── Sistema del portal (ritmo 4/8, elevación, foco, color semántico) ──
     Lo de arriba es de la landing y no se toca. Esto es lo que usan los módulos
     del portal para verse como una sola pieza en vez de seis. */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.25rem; --s6:1.5rem; --s7:2rem; --s8:2.5rem;
  --r-xs:.375rem; --r-sm:.5rem; --r-md:.75rem; --r-lg:1rem; --r-xl:1.25rem;
  /* 3 niveles, no 8 sombras distintas copiadas a mano */
  --e1:0 1px 2px rgba(16,14,11,.04),0 1px 3px rgba(16,14,11,.05);
  --e2:0 2px 6px -1px rgba(16,14,11,.07),0 10px 24px -8px rgba(16,14,11,.12);
  --e-pop:0 24px 55px rgba(16,14,11,.2);
  --ring:0 0 0 3px rgba(201,168,76,.35);
  /* Color semántico: los mismos valores que ya estaban regados, ahora con nombre */
  --ok-fg:#059669;   --ok-bg:rgba(16,185,129,.12);  --ok-bd:rgba(16,185,129,.28);
  --warn-fg:#B45309; --warn-bg:rgba(245,158,11,.13); --warn-bd:rgba(245,158,11,.3);
  --danger-fg:#DC2626; --danger-bg:rgba(220,38,38,.1); --danger-bd:rgba(220,38,38,.3);
  --info-fg:#6A4E13; --info-bg:rgba(125,92,23,.1);   --info-bd:rgba(125,92,23,.24);
  --gold-fg:#A77B06; --gold-bg:rgba(212,175,55,.18); --gold-bd:rgba(212,175,55,.55);
  --neutral-fg:#6B6560; --neutral-bg:rgba(107,101,96,.1); --neutral-bd:rgba(107,101,96,.24);
}
/* Cifras que no bailan de ancho al repintarse (el portal re-renderiza en vivo cada 30s) */
.num,.kpi-value,.lic-mon-val,.prop-monto,.me-rank-monto,.mini-v,.compat-dot,.kpi-delta{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:0}
body{font-family:var(--font-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
button{cursor:pointer;border:none;background:none;font-family:var(--font-body)}
input,textarea,select{font-family:var(--font-body)}
::selection{background:rgba(160,122,40,.2)}

/* film grain overlay */
.grain::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:300;opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ─── UTIL ─── */
.hidden{display:none!important}
.flex{display:flex}.items-center{align-items:center}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}

/* ─── Piezas que pide la home corporativa. Todas cuelgan del landing. ─── */

/* El rombo del wordmark de Nexel. Cuadrado girado 45°, en em para que escale
   con el tamaño de la marca (navbar, footer, modal usan tamaños distintos). */
/* ─── El logo de Nexel ───
   NEXEL en GeistSans + el rombo arriba a la derecha, TODO del mismo color.
   Reproducido con la fuente de marca (ya cargada arriba) en vez de incrustar el
   PNG: escala nítido, hereda el color del contexto y se puede animar.

   Proporciones medidas sobre el asset oficial
   (Branding/nexel-geist-transparent-black.png), en múltiplos de la altura de caja:
     rombo 0.431 · hueco tras la L 0.138 · centro del rombo 0.147 bajo el tope.
   Pasadas a `em` con la caja de GeistSans (~0.72em) y compensando que un cuadrado
   girado 45° mide lado×√2 de punta a punta. */
   El rombo va en el ACENTO, no del color del texto: así lo hace el asset de
   Branding, donde el wordmark es negro y el rombo violeta. Traducido a esta
   paleta, violeta → champagne. El wordmark sí se adapta a la banda (blanco sobre
   oscuro, tinta sobre claro) vía currentColor. */
.brand-nexel{letter-spacing:-.01em}
.brand-diamond{
  display:inline-block;width:.22em;height:.22em;margin-left:.145em;vertical-align:.50em;
  background:var(--grad-glow);transform:rotate(45deg);
}
/* El rombo es un <span> vacío pintado con background. Dentro del wordmark del
   mockup manda `.as-brand span`, que recorta el fondo contra el texto — y aquí
   no hay texto, así que el rombo desaparece. Hay que ganarle en especificidad,
   no basta con declararlo en .brand-diamond. */
.as-brand .brand-diamond{
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:initial;background:var(--grad-glow);
}
.hero-eyebrow b{color:var(--indigo-light);font-weight:700}

/* La home trae 4 números (los del ROI), no los 5 de Copilot. */
#stats.stats-4 .stats-grid{grid-template-columns:repeat(4,1fr)}

/* Cinco dolores: 3 arriba y 2 centrados abajo. Rejilla de 6 con tramos de 2 —
   así la fila de abajo queda centrada sin celdas vacías a los lados. */
.prob-grid.g5{grid-template-columns:repeat(6,1fr)}
.prob-grid.g5 .prob-card{grid-column:span 2}
.prob-grid.g5 .prob-card:nth-child(4){grid-column:2/span 2}
.prob-grid.g5 .prob-card:nth-child(5){grid-column:4/span 2}

/* Enlace "ver el producto" dentro de un panel del mockup. */
.as-more{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-size:.82rem;font-weight:700;color:var(--indigo);transition:gap .2s var(--ease);
}
.as-more:hover{gap:.7rem}
.as-nav .as-ni svg{width:15px;height:15px;display:block}
.as-live.soon{color:var(--indigo);background:rgba(201,168,76,.14)}

/* #features y #how son bandas OSCURAS. El gradiente de marca termina en
   #7D5C17, que sobre negro casi no se lee: ahí va --grad-glow, el mismo al
   revés. (El h1 del hero ya tenía su propia versión clara.) */
#features .sec-title .g,
#how .sec-title .g,
#features .sec-sub b,
#how .sec-sub b{
  background:var(--grad-glow);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ════════════════ NAVBAR ════════════════ */
#navbar{
  position:fixed;top:1.1rem;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:2.25rem;
  background:rgba(255,255,255,.72);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(15,23,42,.07);border-radius:var(--r-pill);
  padding:.55rem .7rem .55rem 1.4rem;z-index:300;
  box-shadow:0 8px 30px rgba(16,14,11,.08),inset 0 1px 0 rgba(255,255,255,.6);
  white-space:nowrap;transition:box-shadow .4s,background .4s;
}
#navbar.scrolled{box-shadow:0 12px 40px rgba(16,14,11,.14),inset 0 1px 0 rgba(255,255,255,.7);background:rgba(255,255,255,.85)}
.brand{display:flex;align-items:center}
.brand-word{font-family:'GeistSans',sans-serif;font-weight:700;font-size:1.28rem;letter-spacing:-.035em;color:var(--ink)}
.brand-accent{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.nav-links{display:flex;gap:1.85rem}
.nav-links a{font-size:.9rem;font-weight:600;color:var(--ink-soft);transition:color .2s;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:2px;background:var(--grad);border-radius:2px;transition:width .3s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{width:100%}
.btn-nav{
  background:var(--ink);color:#fff;font-weight:700;font-size:.875rem;
  padding:.6rem 1.3rem;border-radius:var(--r-pill);font-family:var(--font-head);
  transition:transform .15s var(--ease),box-shadow .3s;
  box-shadow:0 4px 14px rgba(16,14,11,.18);
}
.btn-nav:hover{transform:translateY(-1px) scale(1.02);box-shadow:0 8px 22px rgba(16,14,11,.28)}
.btn-nav:active{transform:scale(.97)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:.4rem}
.ham-line{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:all .3s var(--ease)}
.hamburger.open .ham-line{background:#fff}
.hamburger.open .ham-line:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open .ham-line:nth-child(2){opacity:0}
.hamburger.open .ham-line:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
body.menu-open{overflow:hidden}

/* ════════════════ BUTTONS ════════════════ */
.btn-primary{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--grad-warm);color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:1rem;
  padding:.55rem .65rem .55rem 1.5rem;border-radius:var(--r-pill);
  transition:transform .2s var(--ease),box-shadow .3s;
  box-shadow:0 10px 28px rgba(201,168,76,.34);
}
.btn-primary:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 16px 40px rgba(201,168,76,.45)}
.btn-primary:active{transform:scale(.98)}
.btn-primary .btn-ico{width:34px;height:34px;border-radius:50%;background:rgba(16,14,11,.14);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.btn-primary:hover .btn-ico{transform:translate(3px,-2px) scale(1.06)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(255,255,255,.06);color:#fff;font-family:var(--font-head);font-weight:600;font-size:1rem;
  padding:.85rem 1.5rem;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px);transition:background .25s,transform .15s var(--ease);
}
.btn-ghost:hover{background:rgba(255,255,255,.13);transform:translateY(-1px)}
.btn-indigo{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--ink);color:#fff;font-family:var(--font-head);font-weight:700;font-size:1rem;
  padding:.55rem .65rem .55rem 1.5rem;border-radius:var(--r-pill);
  transition:transform .2s var(--ease),box-shadow .3s;box-shadow:0 10px 28px rgba(16,14,11,.22);
}
.btn-indigo:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 16px 40px rgba(16,14,11,.3)}
.btn-indigo .btn-ico{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.btn-indigo:hover .btn-ico{transform:translate(3px,-2px)}

/* ════════════════ SECTION SHELL ════════════════ */
section{position:relative}
.sec-pad{padding:7rem 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:.7rem;
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--indigo);background:none;border:none;
  padding:0;margin-bottom:1.4rem;
}
.eyebrow.on-dark{color:var(--indigo-light)}
.eyebrow .dot{width:22px;height:2px;border-radius:2px;background:var(--grad);box-shadow:none}
.sec-title{font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.03em;line-height:1.06;color:var(--ink)}
.sec-title .g{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sec-sub{font-size:1.1rem;color:var(--ink-mute);line-height:1.65;max-width:560px;margin-top:1.25rem}
.sec-head-center{text-align:center;max-width:680px;margin:0 auto 4rem}
.sec-head-center .sec-sub{margin-left:auto;margin-right:auto}

/* ════════════════ HERO ════════════════ */
#hero{
  position:relative;min-height:100vh;display:flex;align-items:center;padding:8rem 0 5rem;overflow:hidden;
  background:
    radial-gradient(60% 55% at 18% -5%,rgba(160,122,40,.42),transparent 60%),
    radial-gradient(48% 50% at 92% 12%,rgba(125,92,23,.40),transparent 58%),
    radial-gradient(42% 45% at 70% 108%,rgba(201,168,76,.20),transparent 60%),
    linear-gradient(180deg,#060507 0%,#0D0C10 100%);
  color:#fff;
}
.hero-orb{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;will-change:transform}
.hero-orb.o1{width:420px;height:420px;background:rgba(160,122,40,.5);top:-120px;left:-80px}
.hero-orb.o2{width:360px;height:360px;background:rgba(125,92,23,.45);top:40px;right:-60px}
.hero-orb.o3{width:300px;height:300px;background:rgba(201,168,76,.26);bottom:-120px;left:40%}
.hero-inner{position:relative;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:3.25rem;align-items:center;max-width:1240px;margin:0 auto;padding:0 1.5rem;z-index:2}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.82);background:none;border:none;
  padding:0;margin-bottom:1.75rem;
}
.hero-h1{font-family:var(--font-head);font-weight:700;font-size:clamp(2.5rem,5.2vw,4.2rem);line-height:1.02;letter-spacing:-.035em;margin-bottom:1.5rem}
.hero-h1 .line{display:block;overflow:hidden}
.hero-h1 .g{background:linear-gradient(120deg,#D9C078,#E0C983 40%,#FBBF24);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero-p{font-size:1.18rem;line-height:1.6;color:rgba(255,255,255,.72);max-width:480px;margin-bottom:2.25rem}
.hero-ctas{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:2.25rem}
.hero-trust{display:flex;align-items:center;gap:.7rem;font-size:.85rem;color:rgba(255,255,255,.6)}
.hero-trust-ico{width:34px;height:34px;flex:0 0 34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(16,185,129,.12);color:#10B981}
.hero-trust-ico svg{width:19px;height:19px}

/* hero mockup */
.hero-mockup{position:relative;z-index:2}
.mock-shell{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:1.4rem;padding:.7rem;
  box-shadow:0 40px 90px rgba(0,0,0,.5);backdrop-filter:blur(10px);
}
.mock-inner{background:#fff;border-radius:1rem;overflow:hidden}
.mock-bar{display:flex;align-items:center;gap:.4rem;padding:.85rem 1rem;background:#F7F6F3;border-bottom:1px solid var(--g200)}
.mock-dot{width:9px;height:9px;border-radius:50%}
.mock-url{margin-left:.6rem;font-size:.6rem;color:var(--g400);font-family:var(--font-mono);background:#fff;border:1px solid var(--g200);border-radius:6px;padding:.18rem .6rem}
.mock-body{padding:1.35rem 1.2rem;background:#fff}
.mock-row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.1rem}
.mock-h{font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--ink)}
.mock-chip{font-size:.55rem;font-weight:700;color:var(--indigo);background:rgba(125,92,23,.1);padding:.2rem .5rem;border-radius:99px}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin-bottom:1.1rem}
.mock-kpi{background:#F7F6F3;border:1px solid var(--g200);border-radius:.6rem;padding:.75rem .7rem}
.mock-kpi b{font-family:var(--font-mono);font-size:1.15rem;color:var(--ink);display:block}
.mock-kpi small{font-size:.5rem;color:var(--g500)}
.mock-list{display:flex;flex-direction:column;gap:.72rem}
.mock-item{display:flex;align-items:center;gap:.7rem}
.mock-item .ent{font-size:.6rem;font-weight:600;color:var(--ink);width:78px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mock-track{flex:1;height:8px;background:#EFEBE0;border-radius:99px;overflow:hidden}
.mock-fill{height:100%;border-radius:99px;background:var(--grad)}
.mock-item .amt{font-family:var(--font-mono);font-size:.55rem;color:var(--g500);flex-shrink:0}
.float-badge{position:absolute;background:#fff;border-radius:1rem;padding:.8rem 1.05rem;box-shadow:0 22px 50px rgba(16,14,11,.28);display:flex;align-items:center;gap:.7rem;z-index:3}
.float-badge .fb-ico{width:40px;height:40px;border-radius:.7rem;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
.float-badge .fb-t{font-size:.66rem;color:var(--g500)}
.float-badge .fb-v{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink)}
.float-badge.b1{top:-30px;left:-42px}
.float-badge.b2{bottom:-30px;right:-34px}

.hero-wave{position:absolute;bottom:-1px;left:0;width:100%;line-height:0;z-index:1}

/* ════════════════ STATS ════════════════ */
#stats{background:var(--lilac);padding:4.5rem 0;border-bottom:1px solid var(--g200)}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;max-width:1100px;margin:0 auto}
.stat{text-align:center;position:relative;padding:0 1rem}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:15%;height:70%;width:1px;background:var(--g200)}
.stat-n{font-family:var(--font-head);font-weight:700;font-size:clamp(2rem,3.5vw,2.9rem);letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1}
.stat-l{font-size:.9rem;color:var(--ink-mute);margin-top:.5rem;font-weight:500}

/* ════════════════ TRUST MARQUEE ════════════════ */
.src-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.src-dot.on{background:#10B981;animation:dotpulse 2s ease-in-out infinite}
.src-dot.soon{background:#F59E0B}
@keyframes dotpulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}50%{box-shadow:0 0 0 6px rgba(16,185,129,0)}}

/* ════════════════ PROBLEM ════════════════ */
#problem{background:var(--paper);padding:7rem 0;position:relative;overflow:hidden}
#problem::before{content:"";position:absolute;top:-120px;right:-90px;width:440px;height:440px;background:radial-gradient(circle,rgba(160,122,40,.08),transparent 68%);pointer-events:none}
#problem::after{content:"";position:absolute;bottom:-150px;left:-110px;width:420px;height:420px;background:radial-gradient(circle,rgba(125,92,23,.06),transparent 70%);pointer-events:none}
.prob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1rem;position:relative;z-index:1}
.prob-card{position:relative;overflow:hidden;background:radial-gradient(100% 70% at 100% 0%,rgba(160,122,40,.07),transparent 55%),linear-gradient(180deg,#FCFBFF,#fff);border:1px solid var(--g200);border-radius:var(--r-card);padding:2.5rem 2rem 2.25rem;box-shadow:0 1px 3px rgba(16,14,11,.04),0 16px 36px rgba(125,92,23,.05);transition:transform .45s var(--ease),box-shadow .45s,border-color .45s}
.prob-card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--grad);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.prob-card:hover{transform:translateY(-8px);box-shadow:0 32px 64px rgba(125,92,23,.18);border-color:var(--indigo-soft)}
.prob-card:hover::before{transform:scaleX(1)}
.prob-ico{position:relative;width:58px;height:58px;border-radius:1.05rem;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem;background:var(--grad);color:#fff;box-shadow:0 14px 28px rgba(125,92,23,.32);transition:transform .45s var(--ease)}
.prob-card:hover .prob-ico{transform:scale(1.09) rotate(-5deg)}
.prob-ico svg{width:28px;height:28px}
.prob-h{font-family:var(--font-head);font-weight:700;font-size:1.22rem;color:var(--ink);margin-bottom:.6rem;letter-spacing:-.01em}
.prob-d{font-size:.95rem;color:var(--ink-mute);line-height:1.65;max-width:34ch}

/* ════════════════ FEATURES BENTO ════════════════ */
#features{background:radial-gradient(55% 55% at 85% 0%,rgba(160,122,40,.22),transparent 60%),linear-gradient(180deg,#0D0C10 0%,#060507 100%);color:#fff;padding:clamp(4rem,7vh,7rem) 0;position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
#features::before{content:"";position:absolute;top:-100px;right:-100px;width:420px;height:420px;background:radial-gradient(circle,rgba(160,122,40,.16),transparent 70%);pointer-events:none}
#features .sec-title{color:#fff}
#features .sec-sub{color:rgba(255,255,255,.62)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:1.25rem;margin-top:1rem}
.bento-card{
  position:relative;background:var(--paper);border:1px solid var(--g200);border-radius:var(--r-card);padding:2rem;
  overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s;
  box-shadow:0 1px 3px rgba(16,14,11,.04);
}
.bento-card:hover{transform:translateY(-5px);box-shadow:0 28px 60px rgba(125,92,23,.12)}
.bento-card.big{grid-column:span 4}
.bento-card.sm{grid-column:span 2}
.bento-card.wide{grid-column:span 6}
.feat-ico{width:50px;height:50px;border-radius:.9rem;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.25rem;background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(125,92,23,.28)}
.feat-h{font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--ink);margin-bottom:.6rem;letter-spacing:-.01em}
.feat-d{font-size:.95rem;color:var(--ink-mute);line-height:1.65;max-width:46ch}
.feat-tag{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.72rem;font-weight:700;color:var(--indigo);background:rgba(125,92,23,.08);padding:.3rem .75rem;border-radius:99px}
/* search inside big card */
.feat-search{margin-top:1.5rem;background:var(--mist);border:1px solid var(--g200);border-radius:1rem;padding:1rem}
.feat-search-bar{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--g200);border-radius:.7rem;padding:.7rem .9rem;font-size:.85rem;color:var(--ink)}
.feat-search-bar .cur{width:2px;height:16px;background:var(--indigo);animation:blink 1s steps(2) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.feat-chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.75rem}
.feat-chips span{font-size:.68rem;font-weight:600;color:var(--violet);background:rgba(160,122,40,.08);padding:.25rem .6rem;border-radius:99px;border:1px solid rgba(160,122,40,.14)}
.wide-inner{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.mini-stack{display:flex;flex-direction:column;gap:.6rem}
.mini-doc{display:flex;align-items:center;gap:.7rem;background:var(--mist);border:1px solid var(--g200);border-radius:.7rem;padding:.7rem .85rem}
.mini-doc .mi{width:32px;height:32px;border-radius:.5rem;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:.8rem}
.mini-doc .mt{font-size:.78rem;font-weight:600;color:var(--ink)}
.mini-doc .ms{font-size:.65rem;color:var(--g500)}

/* ─── system screenshot (solución) ─── */
.app-shot{max-width:1080px;margin:1rem auto 0;background:#fff;border:1px solid var(--g200);border-radius:1.4rem;overflow:hidden;box-shadow:0 40px 100px rgba(16,14,11,.16)}
.as-bar{display:flex;align-items:center;gap:.45rem;padding:.8rem 1rem;background:#F7F6F3;border-bottom:1px solid var(--g200)}
.as-dot{width:11px;height:11px;border-radius:50%}
.as-url{margin-left:.7rem;font-family:var(--font-mono);font-size:.72rem;color:var(--g500);background:#fff;border:1px solid var(--g200);border-radius:7px;padding:.28rem .85rem}
.as-body{display:grid;grid-template-columns:232px 1fr;min-height:470px}
.as-side{background:linear-gradient(180deg,#0D0C10,#060507);padding:1.4rem 1rem;display:flex;flex-direction:column;gap:.3rem}
.as-brand{font-family:'GeistSans',sans-serif;font-weight:700;font-size:1.15rem;color:#fff;letter-spacing:-.03em;padding:.2rem .6rem 1rem}
.as-brand span{background:linear-gradient(135deg,#D9C078,#E0C983);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.as-navlabel{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.35);padding:.4rem .6rem .5rem}
.as-nav{display:flex;align-items:center;gap:.7rem;padding:.68rem .7rem;border-radius:.7rem;font-size:.86rem;font-weight:600;color:rgba(255,255,255,.7)}
.as-nav .as-ni{width:26px;height:26px;border-radius:.5rem;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;font-size:.85rem}
.as-nav.active{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(125,92,23,.35)}
.as-nav.active .as-ni{background:rgba(255,255,255,.2)}
.as-user{margin-top:auto;display:flex;align-items:center;gap:.6rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.08)}
.as-av{width:34px;height:34px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.75rem;color:#fff;flex-shrink:0}
.as-un{font-size:.8rem;font-weight:700;color:#fff}
.as-ue{font-size:.68rem;color:rgba(255,255,255,.45)}
.as-main{background:#fff;padding:1.5rem 1.6rem;display:flex;flex-direction:column;gap:1rem}
.as-mhead{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}
.as-mtitle{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--ink)}
.as-msub{font-size:.82rem;color:var(--ink-mute);margin-top:.2rem}
.as-live{flex-shrink:0;font-size:.6rem;font-weight:700;color:var(--teal);background:rgba(16,185,129,.1);padding:.3rem .6rem;border-radius:99px;white-space:nowrap}
.as-search{display:flex;align-items:center;gap:.6rem;background:var(--mist);border:1px solid var(--g200);border-radius:.8rem;padding:.85rem 1rem;font-size:.9rem;color:var(--ink)}
.as-cur{width:2px;height:16px;background:var(--indigo);animation:blink 1s steps(2) infinite}
.as-chips{display:flex;gap:.5rem;flex-wrap:wrap}
.as-chips span{font-size:.68rem;font-weight:600;color:var(--violet);background:rgba(160,122,40,.08);border:1px solid rgba(160,122,40,.14);padding:.28rem .65rem;border-radius:99px}
.as-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.as-kpi{background:var(--mist);border:1px solid var(--g200);border-radius:.8rem;padding:.8rem .9rem}
.as-kpi b{font-family:var(--font-head);font-size:1.4rem;color:var(--ink);display:block;letter-spacing:-.02em}
.as-kpi small{font-size:.66rem;color:var(--g500)}
.as-rows{display:flex;flex-direction:column;gap:.5rem}
.as-row{display:grid;grid-template-columns:118px 1fr auto auto;align-items:center;gap:.9rem;background:#fff;border:1px solid var(--g200);border-radius:.7rem;padding:.7rem .9rem;transition:border-color .2s,box-shadow .2s}
.as-row:hover{border-color:var(--indigo);box-shadow:0 10px 24px rgba(125,92,23,.08)}
.as-ent{font-size:.78rem;font-weight:700;color:var(--ink)}
.as-desc{font-size:.78rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.as-amt{font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--ink)}
.as-pill{font-size:.62rem;font-weight:700;color:var(--indigo);background:rgba(125,92,23,.1);padding:.28rem .6rem;border-radius:99px}
/* app-shot interactivo: pestañas del sidebar */
.as-nav{cursor:pointer}
.as-panel{display:none;flex-direction:column;gap:1rem}
.as-panel.active{display:flex}
.as-profhead{display:flex;align-items:center;gap:.85rem;background:var(--mist);border:1px solid var(--g200);border-radius:.8rem;padding:.85rem 1rem}
.as-pf-n{font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--ink)}
.as-pf-s{font-size:.72rem;color:var(--g500);margin-top:.1rem}
.as-field-l{font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g500);margin-bottom:.5rem}
.as-kpis.k4{grid-template-columns:repeat(4,1fr)}
.as-pill.st-abierta{color:#059669;background:rgba(16,185,129,.14)}
.as-pill.st-curso{color:#B45309;background:rgba(245,158,11,.15)}
.as-pill.st-adjudicada{color:var(--violet);background:rgba(160,122,40,.12)}
.as-pill.st-cerrada{color:#6B6560;background:rgba(107,101,96,.14)}
.as-pill.st-ganada{color:#8A6D00;background:linear-gradient(135deg,rgba(234,179,8,.22),rgba(202,138,4,.22));border:1px solid rgba(202,138,4,.4)}

/* ════════════════ HOW IT WORKS (dark) ════════════════ */
#how{background:linear-gradient(180deg,#060507,#0D0C10);color:#fff;padding:clamp(4rem,7vh,7rem) 0;position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
#how::before{content:"";position:absolute;top:20%;left:-10%;width:500px;height:500px;background:radial-gradient(circle,rgba(160,122,40,.25),transparent 70%);filter:blur(40px);pointer-events:none}
#how .sec-title{color:#fff}
#how .sec-sub{color:rgba(255,255,255,.6)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:1.5rem;position:relative}
.step{position:relative;z-index:2;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);border-radius:1.4rem;padding:2.75rem 2rem 3rem}
.step-num{font-family:var(--font-head);font-weight:700;font-size:1.05rem;width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;margin-bottom:1.75rem;box-shadow:0 10px 24px rgba(160,122,40,.4)}
.step-h{font-family:var(--font-head);font-weight:700;font-size:1.35rem;margin-bottom:.8rem}
.step-d{font-size:1rem;color:rgba(255,255,255,.62);line-height:1.7}
.step-connector{display:none}
/* ─── Variante CLARA de los pasos ───
   En Nexel OS esta sección viene justo detrás de la de módulos, que es oscura.
   Dos bandas oscuras seguidas se leen como una sola y el ritmo de la página se
   pierde. Con esto queda oscuro · claro · oscuro · claro. */
#how.on-light{background:var(--mist);color:var(--ink)}
#how.on-light::before{display:none}
#how.on-light .sec-title{color:var(--ink)}
#how.on-light .sec-sub{color:var(--ink-mute)}
/* Sobre claro el gradiente vuelve al normal: --grad-glow es el claro, pensado
   para bandas oscuras, y aquí no se leería. */
#how.on-light .sec-title .g,
#how.on-light .sec-sub b{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#how.on-light .step{background:var(--paper);border-color:var(--g200);box-shadow:0 1px 3px rgba(16,14,11,.04)}
#how.on-light .step-d{color:var(--ink-soft)}
#how.on-light .step-badge{color:var(--g400)}

/* ════════════════ PRICING ════════════════ */
#pricing{background:var(--paper);padding:clamp(4rem,7vh,7rem) 0;min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.price-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:1.75rem;max-width:880px;margin:0 auto}
.price-card{position:relative;border-radius:var(--r-card);padding:2.5rem;transition:transform .4s var(--ease)}
.price-free{background:var(--mist);border:1px solid var(--g200)}
.price-free:hover{transform:translateY(-4px)}
.price-pro{
  background:linear-gradient(165deg,#0D0C10,#241B08);color:#fff;
  box-shadow:0 30px 70px rgba(125,92,23,.3);overflow:hidden;
}
.price-pro::before{content:"";position:absolute;top:-80px;right:-80px;width:260px;height:260px;background:radial-gradient(circle,rgba(160,122,40,.5),transparent 70%);pointer-events:none}
.price-pro:hover{transform:translateY(-6px)}
.price-badge{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .85rem;border-radius:99px;margin-bottom:1.5rem}
.price-free .price-badge{color:var(--indigo);background:rgba(125,92,23,.1)}
.price-pro .price-badge{color:#100E0B;background:var(--grad-warm);position:relative;z-index:2}
.price-name{font-family:var(--font-head);font-weight:700;font-size:1.3rem;margin-bottom:.5rem;position:relative;z-index:2}
.price-tag{display:flex;align-items:baseline;gap:.4rem;margin-bottom:.4rem;position:relative;z-index:2}
.price-amt{font-family:var(--font-head);font-weight:700;font-size:3.2rem;letter-spacing:-.03em}
.price-pro .price-amt{background:linear-gradient(120deg,#fff,#E6D6A4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.price-per{font-size:.95rem;color:var(--g500)}
.price-pro .price-per{color:rgba(255,255,255,.6)}
.price-note{font-size:.9rem;font-weight:600;margin-bottom:.55rem;position:relative;z-index:2}
.price-free .price-note{color:var(--ink)}
.price-pro .price-note{color:#fff}
.price-benefit{font-size:.82rem;line-height:1.55;margin-bottom:1.75rem;position:relative;z-index:2}
.price-free .price-benefit{color:var(--ink-mute)}
.price-pro .price-benefit{color:rgba(255,255,255,.6)}
.price-feats{display:flex;flex-direction:column;gap:.85rem;margin-bottom:2rem;position:relative;z-index:2}
.price-feat{display:flex;align-items:flex-start;gap:.7rem;font-size:.92rem}
.price-free .price-feat{color:var(--ink-soft)}
.price-pro .price-feat{color:rgba(255,255,255,.85)}
.price-check{width:20px;height:20px;border-radius:50%;background:rgba(16,185,129,.15);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0;margin-top:1px}
.price-pro .price-check{background:rgba(16,185,129,.2)}
.price-cta-free{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;background:#fff;color:var(--ink);border:1px solid var(--g200);font-family:var(--font-head);font-weight:700;font-size:.95rem;padding:.95rem;border-radius:var(--r-pill);transition:all .2s var(--ease)}
.price-cta-free:hover{border-color:var(--indigo);color:var(--indigo);transform:translateY(-1px)}
.price-cta-pro{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;background:var(--grad-warm);color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:.95rem;padding:.95rem;border-radius:var(--r-pill);position:relative;z-index:2;box-shadow:0 12px 30px rgba(201,168,76,.42);transition:transform .2s var(--ease)}
.price-cta-pro:hover{transform:translateY(-2px) scale(1.01)}
.price-foot{text-align:center;margin-top:2rem;font-size:.9rem;color:var(--ink-mute)}
.price-foot b{color:var(--ink)}

/* Toggle Mensual / Anual del pricing (arriba de las tarjetas) */
.price-toggle{display:flex;width:fit-content;gap:.25rem;margin:0 auto 2rem;padding:.3rem;background:var(--mist);border:1px solid var(--g200);border-radius:99px}
.pt-opt{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-head);font-weight:700;font-size:.9rem;color:var(--ink-soft);background:transparent;border:none;padding:.6rem 1.35rem;border-radius:99px;cursor:pointer;transition:all .25s var(--ease)}
.pt-opt.on{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(125,92,23,.35)}
.pt-save{font-size:.6rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;padding:.18rem .5rem;border-radius:99px;background:rgba(16,185,129,.16);color:var(--teal)}
.pt-opt.on .pt-save{background:rgba(255,255,255,.22);color:#fff}
/* Nota "2 meses gratis" (solo en el card Pro, fondo oscuro) */
.price-annual-note{font-size:.82rem;line-height:1.5;color:#E6D6A4;margin:0 0 1.1rem;position:relative;z-index:2}
.price-annual-note b{color:#fff}
/* Gancho "menos de $1 al día" en la tarjeta Pro (fondo oscuro) */
.price-perday{display:inline-block;font-size:.82rem;font-weight:700;color:#D1FAE5;background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.3);padding:.4rem .8rem;border-radius:99px;margin:0 0 1.1rem;position:relative;z-index:2}
.price-perday strong{color:#fff;font-weight:800}
/* Alternancia mensual/anual: por defecto se ve lo mensual; en .annual, lo anual */
#pricing .cyc-ano{display:none}
#pricing.annual .cyc-mes{display:none}
#pricing.annual .price-amt.cyc-ano,#pricing.annual .price-per.cyc-ano{display:inline}
#pricing.annual .price-annual-note.cyc-ano{display:block}
/* Anual = solo la tarjeta Pro, centrada (la de prueba se oculta) */
#pricing.annual .price-free{display:none}
#pricing.annual .price-grid{grid-template-columns:1fr;max-width:440px}

/* ════════════════ FAQ ════════════════ */
#faq{background:var(--paper);padding:7rem 0}
.faq-wrap{max-width:760px;margin:0 auto}
.faq-item{border:1px solid var(--g200);border-radius:1rem;margin-bottom:.85rem;overflow:hidden;transition:border-color .3s,box-shadow .3s;background:var(--paper)}
.faq-item.open{border-color:var(--indigo);box-shadow:0 12px 30px rgba(125,92,23,.1)}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.35rem 1.6rem;cursor:pointer;font-family:var(--font-head);font-weight:600;font-size:1.05rem;color:var(--ink)}
.faq-icon{width:28px;height:28px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .35s var(--ease),background .3s;font-size:1.1rem;color:var(--indigo)}
.faq-item.open .faq-icon{transform:rotate(45deg);background:var(--grad);color:#fff}
.faq-a{height:0;overflow:hidden}
.faq-a-inner{padding:0 1.6rem 1.4rem;font-size:.97rem;color:var(--ink-mute);line-height:1.7}

/* ════════════════ CTA FINAL ════════════════ */

/* ════════════════ FOOTER ════════════════ */
footer{background:var(--dark);color:#fff;padding:5rem 0 2.5rem}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.5rem;margin-bottom:3.5rem}
.foot-brand .brand-word{color:#fff;font-size:1.4rem}
.foot-desc{font-size:.92rem;color:rgba(255,255,255,.5);line-height:1.65;margin-top:1.1rem;max-width:280px}
.foot-col h4{font-family:var(--font-head);font-weight:600;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:1.1rem}
.foot-col a{display:block;font-size:.92rem;color:rgba(255,255,255,.7);margin-bottom:.7rem;transition:color .2s}
.foot-col a:hover{color:#fff}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;padding-top:2rem;border-top:1px solid var(--line-dark);font-size:.85rem;color:rgba(255,255,255,.45)}
.foot-bottom .made{display:flex;align-items:center;gap:.4rem}
.foot-bottom .made b{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.foot-bottom .made a{text-decoration:none}

/* ════════════════ MOBILE MENU ════════════════ */
#mobile-menu{position:fixed;inset:0;z-index:250;background:rgba(6,5,7,.96);backdrop-filter:blur(24px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.75rem}
.mobile-close{position:absolute;top:1.35rem;right:1.35rem;width:42px;height:42px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.mobile-close:hover{background:rgba(255,255,255,.2)}
.mobile-link{font-family:var(--font-head);font-weight:700;font-size:2rem;color:#fff;transition:color .2s}
.mobile-link:hover{color:var(--indigo-light)}
/* Ingresar: en el navbar el .btn-nav se oculta a ≤768 (ver RESPONSIVE), así que el login vive acá.
   Sin esto, el único acceso a la cuenta desde un teléfono es la pestaña interna del modal de registro. */
.mobile-login{min-height:48px;padding:.85rem 2.4rem;border:1px solid rgba(255,255,255,.35);border-radius:99px;background:transparent;color:#fff;font-family:var(--font-body);font-weight:700;font-size:1rem;cursor:pointer;transition:background .2s,border-color .2s}
.mobile-login:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* ════════════════ MODAL ════════════════ */
#modal-overlay{position:fixed;inset:0;z-index:400;background:rgba(6,5,7,.6);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:1.5rem}
#modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:1.75rem;padding:2.5rem;width:100%;max-width:440px;box-shadow:0 40px 100px rgba(0,0,0,.4);position:relative}
.modal-close{position:absolute;top:1.25rem;right:1.25rem;width:34px;height:34px;border-radius:50%;background:var(--g100);display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--g500);transition:background .2s}
.modal-close:hover{background:var(--g200)}
.modal-logo{display:flex;justify-content:center;margin-bottom:.5rem}
.modal-logo .brand-word{font-size:1.5rem}
.modal-sub{text-align:center;font-size:.9rem;color:var(--ink-mute);margin-bottom:1.75rem}
.modal-tabs{display:flex;gap:.4rem;background:var(--g100);border-radius:var(--r-pill);padding:.3rem;margin-bottom:1.75rem}
.modal-tab{flex:1;text-align:center;padding:.6rem;border-radius:var(--r-pill);font-weight:600;font-size:.9rem;color:var(--g500);transition:all .25s var(--ease);cursor:pointer;user-select:none}
.modal-tab.active{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(16,14,11,.08)}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--ink-soft);margin-bottom:.4rem}
.field input{width:100%;padding:.8rem 1rem;border:1.5px solid var(--g200);border-radius:.8rem;font-size:.92rem;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(125,92,23,.12)}
/* La acción principal del diálogo lleva el mismo relleno champagne que el CTA
   del sitio, con texto oscuro: el champagne no da contraste contra el blanco. */
.modal-submit{display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;background:var(--grad-warm);color:var(--ink);font-family:var(--font-head);font-weight:700;font-size:.98rem;padding:.95rem;border-radius:.9rem;margin-top:.5rem;box-shadow:0 8px 22px rgba(201,168,76,.3);transition:transform .15s var(--ease),box-shadow .3s}
.modal-submit:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(201,168,76,.42)}
/* botón Google (visual por ahora; OAuth real más adelante) */
.gbtn{display:flex;align-items:center;justify-content:center;gap:.7rem;width:100%;background:#fff;color:var(--ink);font-family:var(--font-head);font-weight:600;font-size:.95rem;padding:.85rem;border:1.5px solid var(--g200);border-radius:.9rem;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
.gbtn:hover{background:var(--mist);border-color:var(--g300);box-shadow:0 1px 3px rgba(16,14,11,.06)}
.gbtn svg{width:18px;height:18px;flex-shrink:0}
.modal-or{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0;color:var(--g500);font-size:.76rem;font-weight:500}
.modal-or::before,.modal-or::after{content:"";flex:1;height:1px;background:var(--g200)}
.g-soon{display:none;text-align:center;font-size:.74rem;color:var(--indigo);margin-top:.55rem}
.g-soon.show{display:block}
.modal-foot{text-align:center;font-size:.82rem;color:var(--g500);margin-top:1.25rem}
.spinner{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ════════════════════════════════════════════
   DASHBOARD — tema landing (indigo/violet/amber)
   ════════════════════════════════════════════ */
/* El PORTAL va sobre blanco. El acento sigue siendo dorado y los oscuros
   siguen siendo los de Nexel; lo que se neutraliza son las superficies grandes,
   que en cálido leían "crema" en pantallas enteras de tablas y tarjetas.
   Va acotado a #dashboard a propósito: el landing conserva sus bandas tibias,
   donde el tinte sí suma. Es una diferencia buscada, no una copia olvidada. */
#dashboard{display:none;min-height:100dvh;font-family:var(--font-body);color:var(--ink);
  background:var(--paper);
  --mist:#FAFAFA;
  --lilac:#F5F5F6;
  --g100:#F4F4F5;
  --g200:#E8E8EA;
  --g300:#D3D3D7;
}
/* Chip de conexión: solo aparece cuando la app NO está al día (reconectando / sin red) y se borra
   solo al recuperarse. Arriba-centro para no pelear con los pills flotantes de la esquina inferior
   (.trial-fab / el gadget del digest) ni con los toasts. */
.nx-conn{position:fixed;top:.9rem;left:50%;transform:translateX(-50%);z-index:80;
  display:flex;align-items:center;gap:.45rem;
  background:#fff;border:1px solid var(--g200);color:var(--ink-soft,#4A443E);
  font-family:var(--font-body);font-weight:700;font-size:.78rem;
  padding:.45rem .9rem;border-radius:99px;box-shadow:0 8px 24px rgba(16,14,11,.14);pointer-events:none}
.nx-conn svg{width:15px;height:15px;flex:none;color:var(--amber);animation:nx-conn-spin 1.1s linear infinite}
.nx-conn-off{border-color:rgba(239,68,68,.35)}
.nx-conn-off svg{color:#EF4444;animation:none}
@keyframes nx-conn-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.nx-conn svg{animation:none}}
@media(max-width:640px){.nx-conn{top:auto;bottom:calc(var(--tabbar-space) + .9rem)}}

/* sidebar — oscuro como el hero */
.dash-sidebar{position:fixed;left:0;top:0;bottom:0;width:256px;background:linear-gradient(180deg,#0D0C10,#060507);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;padding:1.5rem 1rem;z-index:50;overflow-y:auto}
/* Botón flotante de días de trial: abajo-derecha, levantado sobre la pila de toasts (right:1.1rem/
   bottom:1.1rem) — Crisp ya está oculto dentro del dashboard (crispShow(false) en showDashboard), así
   que el único vecino de esa esquina son los toasts. */
.trial-fab{position:fixed;right:1.25rem;bottom:1.25rem;z-index:70;display:flex;align-items:center;gap:.45rem;background:linear-gradient(180deg,#0D0C10,#060507);border:1px solid rgba(255,255,255,.08);color:#fff;font-family:var(--font-body);font-weight:800;font-size:.82rem;padding:.65rem 1.05rem;border-radius:99px;cursor:pointer;box-shadow:0 10px 26px rgba(16,14,11,.35);transition:transform .15s,filter .15s}
.trial-fab svg{width:18px;height:18px;flex:none;color:var(--amber)}
.trial-fab:hover{filter:brightness(1.15);transform:translateY(-1px)}
.trial-fab[hidden]{display:none}
@media(max-width:640px){.trial-fab{bottom:calc(var(--tabbar-space) + 1.25rem)}}
/* Botón flotante del resumen diario (digest) — mismo pill que .trial-fab, gradiente morado (misma
   marca que la tarjeta/pw-btn-primary). Visible todo el día una vez que hay digest generado (con o
   sin dismiss); reabre la tarjeta sin volver a pedirla al backend.
   Posición: pegado a la esquina inferior (mismo slot que .trial-fab) para NO quedar encima de la
   tarjeta de licitaciones — .dash-main casi no reserva espacio abajo. Solo cuando el pill de trial
   está visible sube un piso y se apila arriba de él (`:has` más abajo). */
.digest-fab{position:fixed;right:1.25rem;bottom:.5rem;z-index:70;display:flex;align-items:center;gap:.45rem;background:var(--grad);border:0;color:#fff;font-family:var(--font-body);font-weight:800;font-size:.82rem;padding:.65rem 1.05rem;border-radius:99px;cursor:pointer;box-shadow:0 10px 26px rgba(201,168,76,.4);transition:transform .15s,filter .15s}
.digest-fab svg{width:18px;height:18px;flex:none}
.digest-fab:hover{filter:brightness(1.08);transform:translateY(-1px)}
.digest-fab[hidden]{display:none}
/* Solo en trial conviven los dos pills → Novedades se apila arriba del de días de prueba.
   `renderTrialFab()` togglea el atributo [hidden], así que el apilado se resuelve solo, sin JS. */
body:has(#trial-fab:not([hidden])) .digest-fab{bottom:5rem}
/* Novedades sin ver en tus seguidas → vibración suave (no abre el gadget solo). El indicador de esquina
   es puntito rojo (cambios de estado/docs, `.has-cambios`) y/o 🎉 (ganaste, `.has-ganada`); si pasan las
   dos cosas se ven ambos. */
.digest-fab.has-alert{animation:dgFabShake 2s ease-in-out infinite}
.digest-fab.has-cambios::after{content:"";position:absolute;top:-4px;right:-4px;width:12px;height:12px;border-radius:50%;background:#DC2626;border:2px solid #fff}
.digest-fab.has-ganada::before{content:"🎉";position:absolute;top:-12px;left:-8px;font-size:15px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
@keyframes dgFabShake{0%,86%,100%{transform:translateY(0) rotate(0)}89%{transform:translateY(-1px) rotate(-3deg)}93%{transform:translateY(-1px) rotate(3deg)}97%{transform:translateY(0) rotate(-1.5deg)}}
@media(prefers-reduced-motion:reduce){.digest-fab.has-alert{animation:none}}
@media(max-width:640px){
  .digest-fab{bottom:calc(var(--tabbar-space) + .5rem)}
  body:has(#trial-fab:not([hidden])) .digest-fab{bottom:calc(var(--tabbar-space) + 5rem)}
}
.dg-gift{padding:.85rem .95rem;border-radius:.85rem;background:rgba(201,168,76,.08);border:1px solid rgba(201,168,76,.25);color:var(--ink);font-size:.84rem;font-weight:600;line-height:1.35}
.sidebar-logo{padding:.25rem .6rem;margin-bottom:.2rem}
.sidebar-logo .brand-word{font-size:1.3rem;color:#fff}
.sidebar-logo .brand-accent{background:linear-gradient(135deg,#D9C078,#E0C983);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sidebar-by{font-size:.64rem;text-transform:uppercase;letter-spacing:.14em;color:rgba(255,255,255,.4);padding:0 .6rem;margin-bottom:2rem}
.sidebar-by strong{background:var(--grad-warm);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
.nav-section-label{font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.3);padding:.375rem .75rem;margin-bottom:.4rem}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.7rem .8rem;border-radius:.7rem;margin-bottom:.2rem;cursor:pointer;color:rgba(255,255,255,.6);font-size:.9rem;font-weight:500;transition:all .2s var(--ease)}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--grad);color:#fff;font-weight:600;box-shadow:0 8px 22px rgba(125,92,23,.4)}
.nav-item-icon{font-size:1.05rem;flex-shrink:0}
.sidebar-bottom{border-top:1px solid rgba(255,255,255,.08);padding-top:1rem}
.user-chip{display:flex;align-items:center;gap:.75rem;padding:.5rem .35rem}
.user-avatar{width:36px;height:36px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;color:#fff;flex-shrink:0}
.user-info{flex:1;min-width:0}
.user-name{font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-empresa{font-size:.7rem;color:rgba(255,255,255,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-badge{font-size:.58rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--grad-warm);color:#100E0B;padding:.22rem .55rem;border-radius:99px;flex-shrink:0}
.btn-logout{display:flex;align-items:center;gap:.5rem;width:100%;padding:.55rem .8rem;border-radius:.7rem;margin-top:.5rem;font-size:.82rem;color:rgba(255,255,255,.5);font-family:var(--font-body);font-weight:500;transition:all .2s}
.btn-logout:hover{background:rgba(239,68,68,.13);color:#FCA5A5}
.dash-main{margin-left:256px;padding:1.2rem 2.75rem .5rem;min-height:100dvh}
.dash-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:.55rem;padding-bottom:.6rem;border-bottom:1px solid var(--g200)}
.dash-page-title{font-family:var(--font-head);font-weight:700;font-size:1.8rem;color:var(--ink);letter-spacing:-.03em}
.dash-sub{font-size:.9rem;color:var(--ink-mute);margin-top:.3rem;max-width:560px;line-height:1.5}
.dash-header-right{display:flex;align-items:center;gap:.875rem;flex-shrink:0}
/* notificaciones (campanita) — reemplaza la búsqueda no funcional */
.dash-notif{position:relative;display:inline-flex}
/* campana pelada (sin fondo) en color de marca */
.notif-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:none;background:none;cursor:pointer;color:var(--indigo);transition:color .15s}
.notif-btn:hover{color:var(--violet)}
.dash-notif.open .notif-btn{color:var(--indigo-700)}
.notif-btn svg{width:38px;height:38px;display:block}
/* badge — círculo montado sobre el hombro, anillo blanco, siempre visible (0 por ahora) */
.notif-badge{position:absolute;top:4px;right:3px;min-width:13px;height:13px;padding:0 1px;border-radius:99px;background:#DC2626;color:#fff;font-size:.5rem;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;box-sizing:content-box}
.notif-pop{position:absolute;top:calc(100% + 10px);right:0;width:320px;background:#fff;border:1px solid var(--g200);border-radius:.8rem;box-shadow:0 24px 55px rgba(16,14,11,.2);z-index:50;display:none;overflow:hidden}
.dash-notif.open .notif-pop{display:block}
.notif-pop-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid var(--g100)}
.notif-pop-title{font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink)}
.notif-mark{font-size:.72rem;font-weight:600;color:var(--indigo);background:none;border:none;cursor:pointer}
.notif-mark:hover{text-decoration:underline}
.notif-list{max-height:380px;overflow-y:auto}
.notif-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:2.2rem 1.4rem}
.notif-empty svg{width:30px;height:30px;color:var(--indigo-soft)}
.notif-empty-title{font-size:.86rem;font-weight:600;color:var(--ink-soft)}
.notif-empty-sub{font-size:.76rem;color:var(--ink-mute);line-height:1.5}
.dash-avatar{width:38px;height:38px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.875rem;flex-shrink:0}
.view{display:none}.view.active{display:block}

/* ── KPIs ──
   Anatomía: [ícono] ETIQUETA … [delta]  /  CIFRA  /  subtítulo.
   La cifra manda; el color vive en el chip del ícono (donde significa algo) y no
   en una barra de gradiente decorativa arriba de cada tarjeta. `auto-fit` porque
   Seguimiento trae 4 KPIs, Mi Empresa 6 y el Registro 7 — con 4 columnas fijas la
   última fila quedaba coja. */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--s3);margin-bottom:var(--s3)}
.kpi-card{position:relative;container-type:inline-size;background:#fff;border-radius:var(--r-md);padding:var(--s3) var(--s4);border:1px solid var(--g200);box-shadow:var(--e1);transition:border-color .15s ease,box-shadow .15s ease}
.kpi-card:hover{border-color:var(--indigo-soft);box-shadow:var(--e2)}
.kpi-head{display:flex;align-items:flex-start;gap:.4rem;min-height:20px}
.kpi-ico{width:20px;height:20px;border-radius:var(--r-xs);display:inline-flex;align-items:center;justify-content:center;flex:none}
.kpi-ico svg{width:13px;height:13px}
.kpi-tone-indigo{background:rgba(125,92,23,.1);color:var(--indigo)}
.kpi-tone-violet{background:rgba(160,122,40,.1);color:var(--violet)}
.kpi-tone-teal{background:var(--ok-bg);color:var(--ok-fg)}
.kpi-tone-warm{background:var(--warn-bg);color:#D97706}
.kpi-tone-danger{background:var(--danger-bg);color:var(--danger-fg)}
.kpi-tone-neutral{background:var(--g100);color:var(--ink-mute)}
.kpi-tone-gold{background:var(--gold-bg);color:var(--gold-fg)}
/* Con un delta al lado, una etiqueta larga ("Ofertado perdido") no cabe en una línea: baja a dos
   antes que truncarse — la etiqueta es la que dice QUÉ es la cifra, no puede quedar en "OFERTADO …" */
.kpi-label{font-size:.625rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);
  line-height:1.35;min-width:0;padding-top:.1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* La cifra se ajusta al ancho de SU tarjeta: con 7 KPIs (Registro) las tarjetas quedan angostas y un
   monto como "B/. 525,926.00" partía en dos líneas. El 1.5rem de arriba es el fallback si el
   navegador no soporta container queries. */
.kpi-value{font-family:var(--font-head);font-size:1.5rem;font-size:clamp(1.05rem,11.5cqw,1.5rem);font-weight:700;color:var(--ink);line-height:1.2;margin-top:.3rem;letter-spacing:-.025em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Valores que son un nombre (Entidad top / Rival top), no una cifra: no pueden ir a 1.5rem */
.kpi-value.kpi-text{font-family:var(--font-body);font-size:.9rem;font-weight:700;line-height:1.35;letter-spacing:0;white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kpi-sub{font-size:.6875rem;color:var(--ink-mute);margin-top:.15rem;line-height:1.35}
/* Delta contra el año pasado (Mi Empresa). El color lo decide si el movimiento es BUENO,
   no si sube: "ofertado perdido" subiendo es rojo (ver meDelta en app.js). */
.kpi-delta{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:.15rem;padding:.1rem .35rem;border-radius:var(--r-pill);font-size:.625rem;font-weight:800;white-space:nowrap;border:1px solid transparent}
.kpi-delta svg{width:11px;height:11px}
.kpi-delta-up{color:var(--ok-fg);background:var(--ok-bg);border-color:var(--ok-bd)}
.kpi-delta-down{color:var(--danger-fg);background:var(--danger-bg);border-color:var(--danger-bd)}
.kpi-delta-flat,.kpi-delta-new{color:var(--ink-mute);background:var(--g100);border-color:var(--g200)}

/* table */
.table-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--g200);overflow:hidden;box-shadow:var(--e1)}
.table-card-title{font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--ink)}
.table-card-sub{font-size:.78rem;color:var(--ink-mute);margin-top:.15rem}
.table-head{display:grid;grid-template-columns:128px 106px 1fr 84px 96px 96px 98px 76px;padding:.8rem 1.4rem;background:#F7F6F3;border-bottom:1px solid var(--g200);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g500);gap:.7rem}
.table-row-item{display:grid;grid-template-columns:128px 106px 1fr 84px 96px 96px 98px 76px;padding:.9rem 1.4rem;border-bottom:1px solid var(--g100);align-items:center;gap:.7rem;transition:background .12s}
.table-row-item:last-child{border-bottom:none}
.table-row-item:hover{background:#F7F6F3}
.cell-acto{font-family:var(--font-mono);font-size:.7rem;color:var(--indigo);font-weight:600}
.cell-entidad{font-size:.85rem;font-weight:600;color:var(--ink)}
.cell-desc{font-size:.8rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-monto{font-family:var(--font-mono);font-size:.78rem;font-weight:600;color:var(--ink)}
.cell-fecha{font-size:.75rem;color:var(--ink-mute)}
.cell-estado{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
/* ── Badges de estado: UNA base, el tono entra por variables ──
   El mismo "estado" estaba codificado tres veces (.badge-*, .rm-estado.est-*, .compat-dot.c-*) con
   colores y radios distintos. Ahora todos leen --b-bg/--b-fg/--b-bd; los nombres de clase siguen
   siendo los mismos, así que el markup de app.js no cambia. */
.badge{--b-bg:var(--neutral-bg);--b-fg:var(--neutral-fg);--b-bd:var(--neutral-bd);
  font-size:.6rem;font-weight:700;padding:.22rem .55rem;border-radius:var(--r-pill);white-space:nowrap;letter-spacing:.02em;
  background:var(--b-bg);color:var(--b-fg);border:1px solid var(--b-bd)}
.badge-abierta{--b-bg:var(--ok-bg);--b-fg:var(--ok-fg);--b-bd:var(--ok-bd)}
.badge-cerrada{--b-bg:var(--neutral-bg);--b-fg:var(--neutral-fg);--b-bd:var(--neutral-bd)}
.badge-adjudicada{--b-bg:var(--danger-bg);--b-fg:var(--danger-fg);--b-bd:var(--danger-bd)}
.badge-vigente{--b-bg:var(--warn-bg);--b-fg:var(--warn-fg);--b-bd:var(--warn-bd)}
.badge-ganada{--b-bg:var(--gold-bg);--b-fg:var(--gold-fg);--b-bd:var(--gold-bd);font-weight:800}
/* Desierta / Cancelada: el acto TERMINÓ sin ganador. Tono apagado y en cursiva para que se lea como
   algo cerrado y no se confunda con "Por adjudicar", que sí está esperando fallo. */
.badge-desierta{--b-bg:var(--neutral-bg);--b-fg:var(--neutral-fg);--b-bd:var(--neutral-bd);
  font-style:italic;opacity:.85}
.badge-adj-emp{font-size:.58rem;color:var(--ink-mute);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.btn-ver{font-size:.72rem;font-weight:600;color:var(--indigo);border:1px solid rgba(125,92,23,.25);border-radius:var(--r-xs);padding:.28rem .65rem;transition:all .15s;font-family:var(--font-body);background:#fff}
.btn-ver:hover{background:rgba(125,92,23,.06);border-color:var(--indigo)}

/* forms */
.form-card{background:#fff;border-radius:var(--r-lg);padding:var(--s5) var(--s6);border:1px solid var(--g200);box-shadow:var(--e1)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem 1.4rem}
.form-grid .field{margin-bottom:0}
.col-2{grid-column:span 2}
.field{margin-bottom:1.1rem}
.field:last-child{margin-bottom:0}
/* icon sizing — sistema, no emoji */
.nav-item-icon{display:inline-flex;align-items:center;justify-content:center}
.nav-item-icon svg{width:18px;height:18px}
.btn-go svg,.btn-outline svg,.btn-ver svg,.btn-danger svg{width:16px;height:16px}
.ai-hint svg{width:14px;height:14px}
.res-btn svg{width:17px;height:17px}
.res-pliego svg{width:12px;height:12px}
.res-done svg,.funnel svg{width:15px;height:15px}
.perfil-acc-head svg{width:18px;height:18px}
.doc-item svg{width:15px;height:15px}
.field-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.38rem}
.field-hint{font-size:.76rem;color:var(--ink-mute);margin-top:.45rem;line-height:1.55}
/* bolita "!" clickeable junto al título de un campo */
.info-tip{display:inline-flex;vertical-align:middle;margin-left:.4rem;position:relative;top:-1px}
.info-dot{width:10px;height:10px;border-radius:50%;background:var(--ink);color:#fff;font-size:.46rem;font-weight:700;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-transform:none;letter-spacing:0;padding:0;border:none}
.info-dot:hover{opacity:.85}
.info-pop{position:absolute;top:calc(100% + 8px);left:0;width:max-content;max-width:260px;background:#fff;border:1px solid var(--g200);border-radius:.6rem;box-shadow:0 24px 55px rgba(16,14,11,.2);padding:.6rem .75rem;font-size:.76rem;font-weight:400;color:var(--ink-mute);line-height:1.5;text-transform:none;letter-spacing:0;text-align:left;z-index:40;display:none}
.info-tip.open .info-pop{display:block}
.inp,.sel,.txta{width:100%;padding:.7rem .95rem;border:1px solid var(--g200);border-radius:.7rem;font-size:.9rem;font-family:var(--font-body);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s;background:#fff}
.inp:focus,.sel:focus,.txta:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(125,92,23,.1)}
.txta{resize:vertical;line-height:1.6;min-height:90px}
.sel{-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234F46E5' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.4rem}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.money-wrap{display:flex;align-items:center;border:1px solid var(--g200);border-radius:.7rem;padding:0 .9rem;background:#fff;transition:border-color .2s,box-shadow .2s}
.money-wrap:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(125,92,23,.1)}
.money-wrap .sign{color:var(--ink-mute);font-size:.9rem}
.money-wrap input{border:none;outline:none;flex:1;padding:.7rem .45rem;font-family:var(--font-mono);font-size:.9rem;color:var(--ink);background:transparent}
.ai-hint{display:inline-flex;align-items:center;gap:.4rem;background:rgba(160,122,40,.07);color:var(--violet);font-size:.74rem;font-weight:600;border-radius:.5rem;padding:.28rem .65rem;margin-top:.38rem;border:1px solid rgba(160,122,40,.16)}

/* ── Chips: DOS patrones, no cuatro ──
   · Chip suelto (este): elegir/activar → activo = relleno indigo (la marca), no negro.
   · Riel segmentado (#lic-filter / #res-filter): activo = píldora blanca sobre el riel.
   El rojo de `.chip-cr.on` (compra rápida) es la única excepción, y es semántica. */
.chip-row{display:flex;flex-wrap:wrap;gap:.55rem}
.chip{padding:.55rem 1rem;border-radius:var(--r-sm);border:1px solid var(--g200);background:#fff;font-size:.85rem;font-weight:600;color:var(--ink-mute);cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--indigo);color:var(--ink)}
.chip.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.chip.on:hover{background:var(--indigo-700);border-color:var(--indigo-700);color:#fff}
.chip-estado{display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;line-height:1.25}
.chip-estado .ce-hint{font-size:.66rem;font-weight:500;opacity:.65}

/* multi-select */
.ms{position:relative}
.ms-control{min-height:46px;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.4rem .6rem;border:1px solid var(--g200);border-radius:.7rem;background:#fff;cursor:text;transition:border-color .2s,box-shadow .2s}
.ms.open .ms-control{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(125,92,23,.1)}
.ms-tag{display:inline-flex;align-items:center;gap:.4rem;background:rgba(125,92,23,.1);color:var(--indigo);font-size:.78rem;font-weight:600;padding:.28rem .6rem;border-radius:.45rem}
.ms-tag b{cursor:pointer;font-weight:700;opacity:.6;font-size:.9rem;line-height:1}
.ms-tag b:hover{opacity:1}
.ms-input{flex:1;min-width:90px;border:none;outline:none;font-size:.85rem;padding:.35rem;background:transparent;color:var(--ink)}
.ms-input::placeholder{color:var(--g400)}
.ms-menu{position:absolute;top:calc(100% + 6px);left:0;right:0;max-height:240px;overflow-y:auto;background:#fff;border:1px solid var(--g200);border-radius:.7rem;box-shadow:0 24px 55px rgba(16,14,11,.2);z-index:30;display:none;padding:.35rem}
.ms.open .ms-menu{display:block}
.ms-opt{padding:.55rem .7rem;font-size:.85rem;color:var(--ink);cursor:pointer;display:flex;align-items:center;gap:.6rem;transition:background .12s;border-radius:.5rem}
.ms-opt:hover{background:#F7F6F3}
.ms-opt.sel{color:var(--indigo);font-weight:600}
.ms-ck{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--g300);display:flex;align-items:center;justify-content:center;font-size:.62rem;flex-shrink:0;color:transparent}
.ms-opt.sel .ms-ck{background:var(--indigo);border-color:var(--indigo);color:#fff}
.ms-empty{padding:.7rem;font-size:.82rem;color:var(--ink-mute);text-align:center}
/* tag input (texto libre → tags; con autocompletado de términos ya conocidos por el motor) */
.tag-input{position:relative}
.tag-input-control{min-height:46px;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;padding:.4rem .6rem;border:1px solid var(--g200);border-radius:.7rem;background:#fff;cursor:text;transition:border-color .2s,box-shadow .2s}
.tag-input-control:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(125,92,23,.1)}
.tag-input-field{flex:1;min-width:140px;border:none;outline:none;font-size:.85rem;padding:.35rem;background:transparent;color:var(--ink)}
.tag-input-field::placeholder{color:var(--g400)}
/* Sugerencias: términos que el motor YA clasificó → reusarlos hace la búsqueda instantánea (la caché
   de la IA es por término; un término nuevo re-analiza todo el universo). */
.tag-ac{position:absolute;left:0;right:0;top:calc(100% + .3rem);z-index:40;background:#fff;border:1px solid var(--g200);border-radius:.7rem;box-shadow:0 10px 30px rgba(15,23,42,.10);overflow:hidden;max-height:17rem;overflow-y:auto}
.tag-ac-item{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.55rem .7rem;cursor:pointer;font-size:.85rem;color:var(--ink);border-bottom:1px solid var(--g100)}
.tag-ac-item:last-child{border-bottom:0}
.tag-ac-item:hover,.tag-ac-item.sel{background:rgba(125,92,23,.06)}
.tag-ac-t{font-weight:600}
.tag-ac-tag{flex:none;font-size:.68rem;font-weight:600;color:var(--ink-mute);background:var(--g100);border-radius:.4rem;padding:.15rem .4rem;white-space:nowrap}
.tag-ac-tag.mine{color:var(--indigo);background:rgba(125,92,23,.10)}

/* primary action */
/* Botones del portal: mismos radios y misma escala de sombra. Sin `translateY` en el hover —
   dentro de un módulo con datos, una tarjeta que salta distrae y desalinea la fila. */
.btn-go{display:flex;align-items:center;justify-content:center;gap:.6rem;background:var(--grad);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.98rem;padding:.8rem 1.75rem;border-radius:var(--r-md);width:100%;transition:filter .15s,box-shadow .15s;box-shadow:0 6px 18px rgba(125,92,23,.26)}
.btn-go:hover{filter:brightness(1.06);box-shadow:0 10px 26px rgba(125,92,23,.34)}
.btn-go:active{filter:brightness(.96)}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:36px;padding:.5rem 1rem;border:1px solid var(--g200);border-radius:var(--r-sm);font-size:.85rem;font-weight:600;color:var(--ink);background:#fff;transition:border-color .15s,color .15s,background .15s}
.btn-outline:hover{border-color:var(--indigo);color:var(--indigo);background:rgba(125,92,23,.04)}
.btn-danger{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:.5rem .9rem;border-radius:var(--r-sm);font-size:.82rem;font-weight:600;color:var(--danger-fg);background:rgba(220,38,38,.08);transition:background .15s}
.btn-danger:hover{background:rgba(220,38,38,.16)}
.form-divider{border-top:1px solid var(--g200);margin:.1rem 0;padding-top:.75rem}

/* Feature 1 — tira "busca un acto específico" (compacta, sin scroll) */
.acto-strip{border-top:1px dashed var(--g200);margin-top:.6rem;padding-top:.6rem}
.acto-strip-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.4rem;text-align:center}
.acto-row{display:flex;gap:.55rem;align-items:stretch}
.acto-row .inp{flex:1}
.btn-acto{flex-shrink:0;padding:0 1.4rem;border-radius:.7rem;background:var(--ink);color:#fff;font-family:var(--font-head);font-weight:700;font-size:.9rem;transition:transform .15s var(--ease),background .2s}
.btn-acto:hover{background:var(--indigo);transform:translateY(-1px)}
.btn-acto:disabled{opacity:.55;cursor:default;transform:none}
.acto-msg{margin-top:.55rem;font-size:.8rem;color:var(--ink-mute);text-align:center}

/* Feature 6 — banner "fuera de tus entidades" + píldora en la tarjeta */
.fuera-banner{display:flex;align-items:center;gap:.85rem;background:linear-gradient(180deg,rgba(160,122,40,.07),rgba(125,92,23,.05));border:1px solid rgba(160,122,40,.2);border-radius:.9rem;padding:.8rem 1.05rem;margin-top:.7rem}
.fuera-banner svg{width:20px;height:20px;color:var(--violet);flex-shrink:0}
.fuera-banner-txt{flex:1;font-size:.86rem;color:var(--ink);line-height:1.4}
.fuera-banner-txt b{color:var(--violet)}
/* Aclaración de costo: el opt-in no descuenta cupo. Va debajo del texto, en tono secundario. */
.fuera-banner-txt small{display:block;margin-top:.15rem;font-size:.74rem;color:var(--ink-mute)}
.res-done-sub{margin-top:.3rem;font-size:.78rem;font-weight:500;color:var(--ink-mute)}
.fuera-banner-acts{display:flex;gap:.5rem;flex-shrink:0}
.btn-fuera{padding:.5rem 1rem;border-radius:.6rem;font-size:.83rem;font-weight:700;transition:all .15s}
.btn-fuera.si{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(125,92,23,.28)}
.btn-fuera.si:hover{transform:translateY(-1px)}
.btn-fuera.si:disabled{opacity:.6;cursor:default;transform:none}
.btn-fuera.no{background:#fff;border:1px solid var(--g200);color:var(--ink-mute)}
.btn-fuera.no:hover{border-color:var(--ink);color:var(--ink)}
.pill-fuera{display:inline-flex;align-items:center;gap:.3rem;flex-shrink:0;font-size:.64rem;font-weight:700;letter-spacing:.02em;padding:.16rem .5rem;border-radius:var(--r-pill);background:rgba(160,122,40,.1);color:var(--violet);border:1px solid rgba(160,122,40,.22);cursor:pointer;transition:all .15s;text-transform:none}
.pill-fuera:hover{background:rgba(160,122,40,.18)}
.pill-fuera svg{width:11px;height:11px}
.pill-fuera.done{background:rgba(16,185,129,.1);color:#059669;border-color:rgba(16,185,129,.25);cursor:default}
.pill-fuera:disabled{opacity:.6;cursor:default}
/* Píldora dorada "Licitación del día": la #1 por compatibilidad del regalo (Novedades) → dentro de los resultados. */
.pill-del-dia{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:.3rem;flex-shrink:0;min-width:9.5rem;font-size:.64rem;font-weight:800;letter-spacing:.02em;padding:.16rem .6rem;border-radius:var(--r-pill);background:linear-gradient(135deg,#ffe9a8,#f4c445);color:#7a5600;border:1px solid #e0ad2f;box-shadow:0 1px 5px rgba(214,158,46,.4);text-transform:none;white-space:nowrap}
.pill-del-dia svg{width:12px;height:12px}
/* Compra rápida (Cotización en Línea): píldora ROJA al lado del nombre (solo resultados de búsqueda). */
.pill-cr{display:inline-flex;align-items:center;gap:.3rem;flex-shrink:0;font-size:.64rem;font-weight:800;letter-spacing:.02em;padding:.16rem .55rem;border-radius:var(--r-pill);background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger-bd);text-transform:none;white-space:nowrap}
/* "Cierra pronto": píldora ROJA junto a la fecha de cierre (cualquier licitación que cierra en <24h). */
.pill-pronto{display:inline-flex;align-items:center;margin-left:.35rem;font-size:.62rem;font-weight:800;letter-spacing:.02em;padding:.08rem .45rem;border-radius:var(--r-pill);background:var(--danger-bg);color:var(--danger-fg);border:1px solid var(--danger-bd);text-transform:none;white-space:nowrap}
.rm-cierre.rm-pronto{color:var(--danger-fg);border-color:var(--danger-bd);background:rgba(220,38,38,.08)}
/* Chip "Compra rápida" activo: rojo (en vez del ink) para diferenciarlo de los buckets de monto. */
.chip-cr.on{background:#DC2626;border-color:#DC2626;color:#fff}
/* Estado "Programada" (aún no abre): ámbar, distinto de Abierta (verde) y Por adjudicar (gris). */
.badge-programada{background:rgba(217,119,6,.12);color:#D97706;border:1px solid rgba(217,119,6,.28)}
.lic-card.res-del-dia{box-shadow:0 0 0 1.5px #f0c040 inset,0 2px 14px rgba(214,158,46,.18)}

/* searching */
#search-loading{display:none;max-width:840px;margin:0 auto;background:#fff;border:1px solid var(--g200);border-radius:1.2rem;padding:2.75rem 3rem;box-shadow:0 1px 3px rgba(16,14,11,.04)}
.scan-head{margin-bottom:1.5rem}
.loading-counter{font-family:var(--font-head);font-weight:700;line-height:1;letter-spacing:-.04em;display:flex;align-items:baseline;gap:.12rem}
.loading-pct-text{font-size:5rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.pct-sign{font-size:2.4rem;color:var(--ink-mute)}
.scan-stage{font-size:.95rem;font-weight:600;color:var(--ink-soft);margin-top:.65rem;min-height:1.3em}
.progress-track{height:6px;background:var(--g200);border-radius:99px;overflow:hidden;margin-bottom:1.75rem}
.progress-bar-fill{height:100%;background:var(--grad);width:0%;border-radius:99px;box-shadow:0 0 12px rgba(125,92,23,.5)}
/* Contexto de la espera, bajo la barra: por qué esta pasada tarda más. Secundario a propósito —
   el dato que manda sigue siendo el contador de .scan-stage. */
.scan-sub{font-size:.86rem;line-height:1.45;color:var(--ink-mute);margin:-1.1rem 0 1.35rem}
/* Vista previa en vivo de las coincidencias mientras el filtro fino sigue corriendo. */
.scan-preview{margin-top:1.25rem;border-top:1px solid var(--g200);padding-top:.9rem}
.sp-head{font-size:.86rem;font-weight:700;color:var(--ink-soft);margin-bottom:.5rem}
.sp-row{display:flex;align-items:baseline;gap:.7rem;padding:.42rem 0;border-bottom:1px solid var(--g100)}
.sp-obj{flex:1;min-width:0;font-size:.9rem;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-ent{font-size:.78rem;color:var(--ink-mute);flex-shrink:0;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-pct{font-size:.8rem;font-weight:700;color:var(--indigo);flex-shrink:0}
@media(max-width:640px){.sp-ent{display:none}}
.scan-steps{display:flex;flex-direction:column}
.scan-step{display:flex;align-items:center;gap:.85rem;padding:.55rem .1rem;opacity:.3;transition:opacity .35s var(--ease)}
.scan-step.active,.scan-step.done{opacity:1}
.ss-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--g300);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s,border-color .3s}
.ss-spin{display:none;width:16px;height:16px;border:2px solid rgba(125,92,23,.25);border-top-color:var(--indigo);border-radius:50%;animation:spin .7s linear infinite}
.ss-check{display:none;align-items:center;justify-content:center;color:#fff;width:14px;height:14px;line-height:0}
.ss-check svg{display:block;width:14px;height:14px}
.scan-step.active .ss-dot{border-color:transparent}
.scan-step.active .ss-spin{display:block}
.scan-step.done .ss-dot{background:var(--grad);border-color:transparent}
.scan-step.done .ss-check{display:flex}
.ss-label{flex:1;font-size:.9rem;color:var(--ink);font-weight:500}
.scan-step.active .ss-label{font-weight:600}
.ss-n{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-mute)}

/* funnel */
.funnel{background:#fff;border:1px solid var(--g200);border-radius:1rem;overflow:hidden;margin-bottom:1.25rem}
.funnel-head{padding:.7rem 1.1rem;background:#F7F6F3;border-bottom:1px solid var(--g200);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g500)}
.funnel-body{padding:.6rem 1.1rem}
.funnel-row{display:flex;align-items:center;justify-content:space-between;padding:.5rem .6rem;border-radius:.5rem;font-size:.85rem}
.funnel-row.acc{background:rgba(125,92,23,.06)}
.funnel-row .fl{color:var(--ink-mute)}
.funnel-row.acc .fl{color:var(--indigo);font-weight:600}
.funnel-row .fn{font-family:var(--font-mono);font-weight:600;color:var(--ink)}
.funnel-row.acc .fn{color:var(--indigo)}
.funnel-arrow{text-align:center;color:var(--g300);font-size:.72rem;padding:.05rem;user-select:none}

/* results */
#search-results{display:none}
.results-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.1rem;flex-wrap:wrap;gap:.75rem}
.results-title{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--ink)}
.results-badge{font-size:.7rem;font-weight:700;padding:.3rem .8rem;border-radius:99px;background:rgba(16,185,129,.12);color:#059669;border:1px solid rgba(16,185,129,.25)}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.25rem;max-width:460px}
.mini{background:#fff;border:1px solid var(--g200);border-radius:var(--r-md);padding:.7rem .9rem;box-shadow:var(--e1)}
.mini.acc{border-color:rgba(125,92,23,.4);background:rgba(125,92,23,.03)}
.mini-l{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute);font-weight:700}
.mini-v{font-family:var(--font-mono);font-size:1.15rem;font-weight:700;color:var(--ink);margin-top:.2rem}
.mini.acc .mini-v{color:var(--indigo)}
.res-actions{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem;flex-wrap:wrap;gap:.5rem}
.res-count{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-mute)}
.res-bulk{display:flex;gap:.7rem;font-size:.8rem;font-weight:600;align-items:center}
.res-bulk button{color:var(--ink-mute);transition:color .15s}
.res-bulk .apr:hover{color:var(--teal)}
.res-bulk .des:hover{color:#DC2626}
.res-bulk .sep{color:var(--g300)}
.res-item{display:flex;align-items:flex-start;gap:.85rem;border:1px solid var(--g200);border-radius:.85rem;padding:.9rem 1.1rem;margin-bottom:.65rem;background:#fff;transition:all .18s}
.res-item.apr{border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.04)}
.res-item.des{border-color:rgba(220,38,38,.4);background:rgba(220,38,38,.03);opacity:.7}
.res-main{flex:1;min-width:0}
.res-top{display:flex;justify-content:space-between;gap:.75rem;align-items:center}
.res-ent{font-size:.9rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-obj{font-size:.82rem;color:var(--ink-mute);margin-top:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--ink-mute);margin-top:.45rem;display:flex;flex-wrap:wrap;gap:.45rem;align-items:center}
.rm-acto{color:var(--indigo);font-weight:600}
.rm-estado{font-weight:700;padding:.08rem .45rem;border-radius:var(--r-pill);border:1px solid;letter-spacing:.02em}
.rm-estado.est-vigente{color:var(--ok-fg);background:var(--ok-bg);border-color:var(--ok-bd)}
.rm-estado.est-programada{color:var(--warn-fg);background:var(--warn-bg);border-color:var(--warn-bd)}
.rm-estado.est-abierta{color:var(--indigo);background:var(--info-bg);border-color:var(--info-bd)}
.rm-estado.est-enmendada{color:#A07A28;background:rgba(160,122,40,.1);border-color:rgba(160,122,40,.24)}
.rm-cierre{color:var(--ink-soft);font-weight:600;padding:.08rem .45rem;border-radius:99px;border:1px solid var(--g200);background:var(--g100)}
.rm-items{color:var(--g400)}
.res-pliego{display:inline-flex;align-items:center;gap:.25rem;color:#fff;background:var(--indigo);border:1px solid var(--indigo);border-radius:.4rem;padding:.12rem .5rem;font-size:.66rem;cursor:pointer;user-select:none;transition:filter .15s,transform .15s}
.res-pliego:hover{filter:brightness(.92)}
.res-pliego:active{transform:scale(.97)}
.rm-tipo{font-weight:700;padding:.08rem .45rem;border-radius:99px;border:1px solid;letter-spacing:.02em}
.rm-tipo.tc-prod{color:var(--indigo);background:rgba(125,92,23,.1);border-color:rgba(125,92,23,.22)}
.rm-tipo.tc-serv{color:#B45309;background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.28)}
.rm-tipo.tc-mix{color:#0F766E;background:rgba(13,148,136,.1);border-color:rgba(13,148,136,.24)}
.res-acts{display:flex;gap:.6rem;flex-shrink:0;align-items:flex-start}
.ra-col{display:flex;flex-direction:column;align-items:center;gap:.3rem}
.ra-lbl{font-family:var(--font-mono);font-size:.6rem;line-height:1;text-transform:uppercase;letter-spacing:.04em;color:var(--g400)}
.ra-monto{font-family:var(--font-mono);font-size:.82rem;font-weight:700;color:var(--indigo);height:34px;display:flex;align-items:center;justify-content:center}
.res-btn{width:34px;height:34px;border-radius:.6rem;border:1px solid var(--g200);display:flex;align-items:center;justify-content:center;color:var(--ink-mute);transition:all .15s;font-size:1.05rem;background:#fff}
.res-btn.apr-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.res-item.apr .apr-btn{background:var(--teal);border-color:var(--teal);color:#fff}
.res-btn.des-btn:hover{background:#DC2626;border-color:#DC2626;color:#fff}
.res-item.des .des-btn{background:#DC2626;border-color:#DC2626;color:#fff}
.res-confirm{display:flex;gap:.75rem;border-top:1px solid var(--g200);padding-top:1.1rem;margin-top:1rem}
.res-done{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.3);border-radius:.7rem;padding:.85rem 1.1rem;font-size:.85rem;color:#059669;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}

/* perfiles — accordion */
.perfil-acc{display:flex;flex-direction:column;gap:.75rem}
.perfil-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);box-shadow:var(--e1);overflow:hidden;transition:border-color .25s,box-shadow .25s}
/* perfil-solo (único perfil, siempre abierto, sin animación de colapso) no necesita recortar su
   contenido — overflow:hidden acá tapaba el dropdown de "Entidades habituales" (.ms-menu). */
.perfil-card.perfil-solo{overflow:visible}
.perfil-acc-head{display:flex;align-items:center;gap:.85rem;padding:1.1rem 1.3rem;cursor:pointer;user-select:none}
.perfil-acc-head .pa-ico{width:38px;height:38px;border-radius:.6rem;background:rgba(125,92,23,.1);color:var(--indigo);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.perfil-card.open .pa-ico{background:var(--grad);color:#fff}
.pa-name{flex:1;min-width:0}
.pa-title{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.pa-star{color:var(--amber)}
.pa-meta{font-size:.75rem;color:var(--ink-mute);margin-top:.15rem}
.pa-chev{color:var(--ink-mute);transition:transform .3s var(--ease);flex-shrink:0}
.perfil-card.open .pa-chev{transform:rotate(180deg);color:var(--indigo)}
.perfil-acc-body{height:0;overflow:hidden}
.perfil-acc-inner{padding:0 1.5rem 1.6rem;border-top:1px solid var(--g100)}
.check-row{display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--ink);cursor:pointer;user-select:none}
.check-row input{width:18px;height:18px;accent-color:var(--indigo)}
.doc-item{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border:1px solid var(--g200);border-radius:.6rem;font-size:.82rem;margin-bottom:.45rem;background:#fff}
.doc-item .di-name{flex:1;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-item .di-chars{font-size:.66rem;font-weight:700;color:var(--indigo);background:rgba(125,92,23,.1);padding:.15rem .45rem;border-radius:99px}
.doc-item .di-del{color:var(--ink-mute);cursor:pointer;display:inline-flex}
.doc-item .di-del:hover{color:#DC2626}

/* ajustes / membresía */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem;align-items:start}
.set-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--e1)}
.set-title{font-family:var(--font-head);font-weight:700;font-size:1.15rem;color:var(--ink)}
.set-sub{font-size:.82rem;color:var(--ink-mute);margin-top:.2rem;margin-bottom:1.4rem}
.plan-card{position:relative;border-radius:var(--r-lg);padding:1.5rem;background:linear-gradient(160deg,#0D0C10,#241B08);color:#fff;overflow:hidden;margin-bottom:1.1rem}
.plan-card::before{content:"";position:absolute;top:-60px;right:-60px;width:200px;height:200px;background:radial-gradient(circle,rgba(160,122,40,.5),transparent 70%);pointer-events:none}
.plan-badge{position:relative;z-index:2;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#100E0B;background:var(--grad-warm);display:inline-block;padding:.25rem .7rem;border-radius:99px;margin-bottom:.9rem}
.plan-name{position:relative;z-index:2;font-family:var(--font-head);font-weight:700;font-size:1.6rem}
.plan-price{position:relative;z-index:2;font-family:var(--font-head);font-weight:700;font-size:2rem;background:linear-gradient(120deg,#fff,#E6D6A4);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin:.15rem 0}
.plan-price span{font-size:.9rem;color:rgba(255,255,255,.6);-webkit-text-fill-color:rgba(255,255,255,.6)}
.plan-meta{position:relative;z-index:2;font-size:.8rem;color:rgba(255,255,255,.6);margin-top:.45rem}
.plan-status{color:#34D399;font-weight:600}
.plan-actions{margin-bottom:1.1rem}
.bill-row{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;color:var(--ink-mute);padding:.65rem 0;border-top:1px solid var(--g100)}
.bill-row b{color:var(--ink);font-weight:600}
.pay-list{margin-top:1.3rem;display:flex;flex-direction:column;gap:.65rem}
.pay-item{display:flex;align-items:center;gap:.85rem;border:1px solid var(--g200);border-radius:.8rem;padding:.85rem 1rem;transition:border-color .2s,background .2s}
.pay-item.def{border-color:var(--indigo);background:rgba(125,92,23,.03)}
.pay-ico{width:46px;height:30px;border-radius:.4rem;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.6rem;flex-shrink:0;letter-spacing:.03em}
.pay-info{flex:1;min-width:0}
.pay-label{font-size:.88rem;font-weight:600;color:var(--ink)}
.pay-sub{font-size:.74rem;color:var(--ink-mute);margin-top:.1rem}
.pay-def{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--indigo);background:rgba(125,92,23,.1);padding:.25rem .6rem;border-radius:99px;border:1px solid rgba(125,92,23,.22)}
.pay-mk{font-size:.78rem;font-weight:600;color:var(--ink-mute);transition:color .15s}
.pay-mk:hover{color:var(--indigo)}
.pay-del{color:var(--ink-mute);display:inline-flex;cursor:pointer}
.pay-del:hover{color:#DC2626}
.pay-del svg{width:16px;height:16px}
.pay-form{margin-top:1.1rem;border:1px dashed var(--g300);border-radius:.9rem;padding:1.4rem;background:#F7F6F3}

/* ════════════════ SCROLL REVEAL ════════════════ */
.reveal{opacity:0;transform:translateY(42px)}

/* ════════════════ RESPONSIVE ════════════════ */
@media(max-width:1024px){
  .bento-card.big{grid-column:span 6}
  .bento-card.sm{grid-column:span 3}
  .table-head,.table-row-item{grid-template-columns:112px 96px 1fr 78px 88px 88px 92px 70px}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  /* En tablet las 5 tarjetas pasan a 2 por fila; sin esto la de 6 columnas las
     deja ilegibles. */
  .prob-grid.g5{grid-template-columns:repeat(2,1fr)}
  .prob-grid.g5 .prob-card,
  .prob-grid.g5 .prob-card:nth-child(4),
  .prob-grid.g5 .prob-card:nth-child(5){grid-column:auto}
}
@media(max-width:768px){
  .nav-links{display:none}.btn-nav{display:none}.hamburger{display:flex}
  #navbar{gap:0;padding:.55rem 1.2rem}
  .hero-inner{grid-template-columns:1fr;gap:3.5rem}
  .hero-mockup{order:-1;max-width:420px;margin:0 auto}
  .stats-grid{grid-template-columns:1fr 1fr;gap:2rem}
  #stats.stats-4 .stats-grid{grid-template-columns:1fr 1fr}
  .stat:not(:last-child)::after{display:none}
  .prob-grid,.steps{grid-template-columns:1fr}
  /* Las de arriba llevan `.prob-grid` a secas y no ganan contra `.prob-grid.g5`. */
  .prob-grid.g5{grid-template-columns:1fr}
  .prob-grid.g5 .prob-card,
  .prob-grid.g5 .prob-card:nth-child(4),
  .prob-grid.g5 .prob-card:nth-child(5){grid-column:auto}
  .step-connector{display:none}
  .bento{grid-template-columns:1fr}
  .bento-card.big,.bento-card.sm,.bento-card.wide{grid-column:span 1}
  .wide-inner{grid-template-columns:1fr;gap:1.5rem}
  .as-body{grid-template-columns:1fr;min-height:auto}
  .as-side{display:none}
  .as-main{padding:1.25rem}
  .as-row{grid-template-columns:1fr auto;gap:.5rem .8rem}
  .as-desc{grid-column:1 / -1;order:3}
  .price-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
  .sec-pad,.sec-pad{padding:5rem 0}
  #hero{padding:9rem 0 5rem}
  .dash-sidebar{display:none}.dash-sidebar.open{display:flex}
  .dash-main{margin-left:0;padding:1.25rem}
  .kpi-grid{grid-template-columns:1fr}
  .table-head{display:none}
  .table-row-item{grid-template-columns:1fr;gap:.375rem}
  .cell-acto::before{content:'Acto: ';color:var(--ink-mute);font-weight:400}
  .cell-monto::before{content:'Monto: ';color:var(--ink-mute);font-weight:400}
  .row-2{grid-template-columns:1fr}
  .mini-grid{grid-template-columns:1fr 1fr}
  .settings-grid{grid-template-columns:1fr}
  .dash-header{flex-direction:column;align-items:flex-start;gap:.875rem}
  .float-badge{display:none}
}
@media(max-width:480px){
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn-primary,.hero-ctas .btn-ghost{justify-content:center}
  .foot-grid{grid-template-columns:1fr}
}
/* ── responsive hardening: tablets + teléfonos (no afecta desktop) ── */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:3rem}
  .hero-mockup{order:-1;max-width:420px;margin:0 auto}
  .hero-p{max-width:none}
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem}
}
@media(max-width:768px){
  .sec-head-center{margin-bottom:2.5rem}
  .hero-p{font-size:1.06rem}
  #problem{padding:5rem 0}
  .as-mhead{flex-wrap:wrap}
  .as-kpi b{font-size:1.18rem}
}
@media(max-width:480px){
  .container{padding:0 1.15rem}
  .price-card{padding:1.85rem 1.4rem}
  .price-amt{font-size:2.7rem}
  .modal{padding:1.75rem 1.5rem}
  .stats-grid{gap:1.1rem 1rem}
  .as-main{padding:1.1rem}
  .as-kpis{gap:.5rem}
  .as-kpis.k4{grid-template-columns:repeat(2,1fr)}
  .as-kpi{padding:.65rem .6rem}
  .as-kpi b{font-size:1.05rem}
  .foot-grid{grid-template-columns:1fr}
}
@media(max-width:360px){
  .stat-n{font-size:1.7rem}
  .price-amt{font-size:2.4rem}
}
/* ─── BOOT SPLASH (carga al iniciar sesión / refresh) — logo TODO BLANCO → banda morada barre der→izq desde el final de "Fácil" y lo pinta ─── */
/* Anti-flash: al volver de Google/refresh con sesión, ocultamos el landing antes del splash. */
html.booting{background:#060507}
html.booting #landing,html.booting #navbar,html.booting #mobile-menu{display:none!important}
/* Fondo del negro tibio de Nexel; el wordmark blanco resalta encima. */
#boot-splash{position:fixed;inset:0;z-index:600;display:none;align-items:center;justify-content:center;overflow:hidden;background:linear-gradient(180deg,#0D0C10,#060507)}
#boot-splash.show{display:flex}
#boot-splash .bs-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:center}
/* el wordmark queda QUIETO, centrado; arranca TODO BLANCO ("Nexel" + "Copilot") */
#boot-splash .bs-word{position:relative;margin:0;font-family:'GeistSans',sans-serif;font-weight:700;font-size:clamp(32px,5.2vw,54px);letter-spacing:-.035em;line-height:1;white-space:nowrap;color:#fff}
/* "Copilot": el champagne de marca vive debajo; una copia BLANCA encima se desvanece → se "pinta" de dorado.
   Default opacity:0 = estado final pintado (reduced-motion) */
#boot-splash .bs-accent{position:relative;display:inline-block}
#boot-splash .bs-accent-grad{background:var(--grad-glow);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
#boot-splash .bs-accent-white{position:absolute;left:0;top:0;color:#fff;opacity:0}
/* SEGUNDO PASE: banda dorada recortada SOLO al texto "Copilot" → por construcción no puede tocar "Nexel" */
#boot-splash .bs-accent-sweep{position:absolute;left:0;top:0;color:transparent;pointer-events:none;background:linear-gradient(100deg,rgba(201,168,76,0) 40%,#E0C983 46%,#C9A84C 50%,#B8922F 54%,rgba(201,168,76,0) 60%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;background-position:-30% center;opacity:0}
/* banda con el DORADO DE MARCA (igual a "Copilot") recortada al texto; barre der→izq (empieza en el final de "Fácil") vía background-position */
#boot-splash .bs-paint{position:absolute;left:0;top:0;color:transparent;pointer-events:none;background:linear-gradient(100deg,rgba(201,168,76,0) 40%,#E0C983 46%,#C9A84C 50%,#B8922F 54%,rgba(201,168,76,0) 60%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;background-size:220% 100%;background-position:200% center}

/* ════════════ Fase 5b: menú de usuario · notificaciones (campana + toast + sonido) · paywall ════════════ */
/* Menú de usuario (dropdown junto a la campana) */
.usermenu{position:relative}
.userchip{cursor:pointer;transition:background .15s}
.userchip:hover{background:rgba(125,92,23,.05)}
.uc-caret{width:14px;height:14px;color:var(--ink-mute);flex:none;transition:transform .2s;margin-left:.1rem}
.usermenu.open .uc-caret{transform:rotate(180deg)}
.uc-badge.pro{background:var(--grad);color:#fff}
.uc-badge.vencido{background:#FEE2E2;color:#B91C1C}
.um-pop{position:absolute;top:calc(100% + 12px);right:0;width:290px;background:#fff;border:1px solid var(--g200);border-radius:.9rem;box-shadow:0 18px 50px rgba(16,14,11,.18);padding:.45rem;z-index:60;display:none;animation:umIn .16s ease}
.usermenu.open .um-pop{display:block}
@keyframes umIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.um-head{display:flex;align-items:center;gap:.7rem;padding:.7rem .7rem .75rem}
.um-avatar{width:42px;height:42px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:.95rem;flex:none}
.um-id{min-width:0}
.um-name{font-size:.9rem;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-email{font-size:.74rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Tarjeta de membresía (color del sidebar): trial → precio + CTA · pro → días. Mismo tamaño. */
.um-mem{background:linear-gradient(180deg,#0D0C10,#060507);border:1px solid rgba(255,255,255,.08);border-radius:.8rem;padding:.85rem .9rem;margin:.1rem .15rem .4rem;color:#fff}
.um-mem-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.um-mem-label{font-size:.64rem;font-weight:700;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.06em}
.um-mem-badge{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.22rem .55rem;border-radius:99px;color:#100E0B;background:var(--grad-warm)}
.um-mem-badge.pro{background:var(--grad);color:#fff}
.um-mem-badge.vencido{background:#FEE2E2;color:#B91C1C}
.um-mem-days{font-family:var(--font-head);font-size:1.18rem;font-weight:800;color:#fff;letter-spacing:-.01em;margin-top:.5rem}
/* Insignia "Pro" junto al título de la tarjeta de acción (dentro del recuadro, en la fila del label). */
.um-mem-pro-badge{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#100E0B;background:var(--grad-warm);padding:.2rem .55rem;border-radius:99px;flex-shrink:0}
.um-mem-price{font-size:.76rem;font-weight:600;color:var(--indigo-light);margin-top:.18rem}
.um-mem-price[hidden]{display:none}
.um-mem-cta{display:flex;align-items:center;justify-content:center;width:100%;border:0;border-radius:.6rem;padding:.62rem;margin-top:.75rem;background:var(--grad);color:#fff;font-family:var(--font-body);font-weight:700;font-size:.82rem;cursor:pointer;box-shadow:0 6px 16px rgba(201,168,76,.4);transition:filter .15s,transform .1s}
.um-mem-cta:hover{filter:brightness(1.08)}
.um-mem-cta:active{transform:translateY(1px)}
.um-mem-cta[hidden]{display:none}
.um-mem-cta.um-cta-danger{background:#fff;color:#DC2626;box-shadow:none;border:1px solid rgba(220,38,38,.35)}
.um-mem-cta.um-cta-danger:hover{filter:none;background:#FEF2F2}
.um-logout{display:flex;align-items:center;gap:.55rem;width:100%;border:0;background:none;border-radius:.6rem;padding:.6rem .7rem;font-family:var(--font-body);font-size:.84rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s}
.um-logout:hover{background:#FEF2F2;color:#DC2626}
.um-logout svg{width:16px;height:16px;flex:none}
.um-item{display:flex;align-items:center;gap:.55rem;width:100%;border:0;background:none;border-radius:.6rem;padding:.6rem .7rem;font-family:var(--font-body);font-size:.84rem;font-weight:600;color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s}
.um-item:hover{background:var(--lilac);color:var(--indigo-700)}
.um-item svg{width:16px;height:16px;flex:none}

/* Campana: acciones del encabezado + ítems de la lista */
.notif-head-actions{display:flex;align-items:center;gap:.35rem}
.notif-mute{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:0;background:none;border-radius:.5rem;color:var(--ink-mute);cursor:pointer;transition:background .15s,color .15s}
.notif-mute:hover{background:var(--g100);color:var(--indigo)}
.notif-mute[aria-pressed="true"]{color:#DC2626}
.notif-mute svg{width:16px;height:16px}
.notif-item{display:flex;gap:.6rem;padding:.7rem .8rem;border-radius:.6rem;transition:background .15s;text-align:left}
.notif-item + .notif-item{border-top:1px solid var(--g100)}
.notif-item:hover{background:var(--g100)}
.notif-item.unread{background:rgba(125,92,23,.05)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--indigo);margin-top:.4rem;flex:none;opacity:0}
.notif-item.unread .notif-dot{opacity:1}
.notif-it-body{min-width:0;flex:1}
.notif-it-title{font-size:.82rem;font-weight:700;color:var(--ink);line-height:1.3}
.notif-it-text{font-size:.78rem;color:var(--ink-soft);line-height:1.45;margin-top:.15rem}
.notif-it-time{font-size:.68rem;color:var(--ink-mute);margin-top:.3rem}
.notif-it-link{font-size:.74rem;font-weight:700;color:var(--indigo);text-decoration:none;margin-top:.3rem;display:inline-block;cursor:pointer}
.notif-it-del{flex:none;width:1.4rem;height:1.4rem;padding:0;display:grid;place-items:center;border:none;background:none;border-radius:.35rem;color:var(--ink-mute);cursor:pointer;opacity:0;transition:opacity .15s,background .15s,color .15s}
.notif-it-del svg{width:.85rem;height:.85rem}
.notif-item:hover .notif-it-del,.notif-it-del:focus-visible{opacity:1}
.notif-it-del:hover{background:var(--g100);color:var(--ink)}
@media(hover:none){.notif-it-del{opacity:1}}   /* táctil: no hay hover, la × siempre visible */

/* Toast de notificación: esquina inferior derecha, apilable, no intrusivo */
.nt-wrap{position:fixed;right:1.1rem;bottom:1.1rem;z-index:8000;display:flex;flex-direction:column;gap:.6rem;max-width:340px}
.nt-toast{display:flex;align-items:flex-start;gap:.65rem;background:#fff;border:1px solid var(--g200);border-left:4px solid var(--indigo);border-radius:.8rem;box-shadow:0 18px 50px rgba(16,14,11,.22);padding:.8rem .9rem;cursor:pointer;opacity:0;transform:translateX(24px);transition:opacity .3s,transform .3s}
.nt-toast.show{opacity:1;transform:none}
.nt-ico{flex:none;width:30px;height:30px;border-radius:.55rem;background:var(--grad);display:flex;align-items:center;justify-content:center}
.nt-ico svg{width:16px;height:16px;color:#fff}
.nt-body{min-width:0;flex:1}
.nt-title{font-size:.82rem;font-weight:700;color:var(--ink);line-height:1.3}
.nt-text{font-size:.77rem;color:var(--ink-soft);line-height:1.4;margin-top:.15rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nt-x{flex:none;border:0;background:none;color:var(--ink-mute);font-size:.85rem;cursor:pointer;padding:.1rem .2rem;line-height:1}
.nt-x:hover{color:var(--ink)}
/* Toast de sistema (acción hecha / error) — misma tarjeta, stack abajo-derecha, sin caja verde plana */
.sys-toast{cursor:default;align-items:center}
.sys-toast .nt-title{font-weight:600}
.sys-toast.is-ok{border-left-color:#10B981}
.sys-toast.is-ok .nt-ico{background:linear-gradient(135deg,#10B981,#059669)}
.sys-toast.is-err{border-left-color:#DC2626}
.sys-toast.is-err .nt-ico{background:linear-gradient(135deg,#F87171,#DC2626)}

/* Paywall: trial vencido / membresía expirada — no descartable, dashboard visible detrás */
.pw-overlay{position:fixed;inset:0;z-index:9500;display:flex;align-items:center;justify-content:center;padding:1.2rem;background:rgba(16,14,11,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pwFade .25s ease}
@keyframes pwFade{from{opacity:0}to{opacity:1}}
.pw-card{position:relative;width:440px;max-width:100%;background:#fff;border-radius:1.1rem;box-shadow:0 30px 80px rgba(16,14,11,.45);overflow:hidden;animation:pwPop .3s cubic-bezier(.2,.8,.25,1)}
.mb-x{position:absolute;top:.9rem;right:.9rem;width:30px;height:30px;border:0;background:var(--g100);border-radius:50%;color:var(--ink-mute);font-size:.82rem;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;transition:background .15s,color .15s}
.mb-x:hover{background:var(--g200);color:var(--ink)}
.pw-price-per{font-weight:600;opacity:.85}
.pw-btn-primary:disabled{filter:grayscale(.2);opacity:.6;cursor:not-allowed;box-shadow:none}
.pw-btn-danger{background:#DC2626;color:#fff;box-shadow:0 8px 20px rgba(220,38,38,.3)}
.pw-btn-danger:hover{filter:brightness(1.06)}
.pw-btn-danger:active{transform:translateY(1px)}
/* Encuesta de cancelación */
.cx-reasons{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.9rem}
.cx-reason{display:flex;align-items:center;gap:.6rem;padding:.7rem .85rem;border:1px solid var(--g200);border-radius:.7rem;cursor:pointer;font-size:.88rem;color:var(--ink-soft);transition:border-color .15s,background .15s}
.cx-reason:hover{border-color:var(--g300);background:var(--g100)}
.cx-reason input{accent-color:var(--indigo);width:16px;height:16px;flex:none}
.cx-reason:has(input:checked){border-color:var(--indigo);background:rgba(125,92,23,.05);color:var(--ink)}
.cx-text{width:100%;border:1px solid var(--g200);border-radius:.7rem;padding:.7rem .85rem;font-family:var(--font-body);font-size:.88rem;color:var(--ink);outline:none;resize:vertical;margin-bottom:1rem}
.cx-text:focus{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(125,92,23,.12)}
.cx-rate-l{font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:.4rem}
.cx-stars{display:flex;gap:.3rem;margin-bottom:.4rem}
.cx-star{border:0;background:none;font-size:1.5rem;line-height:1;color:var(--g300);cursor:pointer;transition:color .12s,transform .1s;padding:0}
.cx-star:hover{transform:scale(1.12)}
.cx-star.on{color:#F59E0B}
/* Botón "Cancelar membresía" en Ajustes (outline rojo) */
.btn-danger-outline{color:#DC2626!important;border-color:rgba(220,38,38,.4)!important}
.btn-danger-outline:hover{background:rgba(220,38,38,.06)!important}
@keyframes pwPop{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.pw-top{padding:1.7rem 1.7rem 0;text-align:center}
.pw-emblem{width:54px;height:54px;border-radius:1rem;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;box-shadow:0 10px 24px rgba(201,168,76,.4)}
.pw-emblem svg{width:26px;height:26px;color:#fff}
.pw-emblem.ok{background:linear-gradient(135deg,#16A34A,#22C55E);box-shadow:0 10px 24px rgba(34,197,94,.4)}
.pw-emblem.danger{background:linear-gradient(135deg,#DC2626,#B91C1C);box-shadow:0 10px 24px rgba(220,38,38,.4)}
.susp-reason{background:#FEF2F2;border:1px solid #FECACA;border-radius:.8rem;padding:.85rem 1rem;margin-bottom:1rem}
.susp-reason-l{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#B91C1C;margin-bottom:.3rem}
.susp-reason-v{font-size:.95rem;line-height:1.5;color:#7F1D1D}
.li-forgot{text-align:right;margin:-.35rem 0 .2rem}
.link-btn{background:none;border:0;padding:0;font:inherit;font-size:.82rem;color:var(--indigo);font-weight:600;cursor:pointer}
.link-btn:hover{text-decoration:underline}
/* Recuperar contraseña (sub-vistas del modal) */
.rec-lead{font-size:.9rem;line-height:1.55;color:var(--ink-soft);margin:.1rem 0 1.1rem;text-align:center}
.rec-lead strong{color:var(--ink);font-weight:700}
.rec-back{text-align:center;margin-top:1rem;font-size:.82rem;color:var(--ink-soft)}
.rec-check{display:flex;justify-content:center;margin:.2rem 0 1rem}
.rec-check svg{width:52px;height:52px;color:#16A34A}
.rec-code-input{text-align:center;letter-spacing:.5em;font-size:1.4rem;font-weight:800;font-variant-numeric:tabular-nums;padding-left:.5em}
.pw-title{font-size:1.18rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.pw-text{font-size:.9rem;color:var(--ink-soft);line-height:1.55;margin-top:.55rem}
.pw-body{padding:1.4rem 1.7rem 1.7rem}
.pw-actions{display:flex;flex-direction:column;gap:.6rem;margin-top:1.3rem}
.pw-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:.75rem;padding:.85rem 1.1rem;font-family:var(--font-body);font-size:.92rem;font-weight:700;cursor:pointer;transition:filter .15s,transform .1s,background .15s,color .15s}
.pw-btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(201,168,76,.35)}
.pw-btn-primary:hover{filter:brightness(1.06)}
.pw-btn-primary:active{transform:translateY(1px)}
.pw-btn-ghost{background:none;color:var(--ink-mute);border:1px solid var(--g200)}
.pw-btn-ghost:hover{background:var(--g100);color:var(--ink-soft)}
.pw-plan{background:var(--g100);border:1px solid var(--g200);border-radius:.85rem;padding:1.1rem 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.pw-plan-name{font-size:.95rem;font-weight:800;color:var(--ink)}
.pw-plan-desc{font-size:.76rem;color:var(--ink-mute);margin-top:.2rem}
.pw-price{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:#fff;background:var(--grad);padding:.3rem .7rem;border-radius:99px;white-space:nowrap}
.pw-method{margin-top:1rem;border:1px dashed var(--g300);border-radius:.75rem;padding:.9rem 1rem;display:flex;align-items:center;gap:.7rem;background:#FBFBFE}
.pw-method svg{width:20px;height:20px;color:var(--ink-mute);flex:none}
.pw-method-t{font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.pw-method-s{font-size:.72rem;color:var(--ink-mute);margin-top:.1rem}
.pw-fine{font-size:.72rem;color:var(--ink-mute);text-align:center;margin-top:.9rem;line-height:1.5}
/* Pago embebido dentro del bloqueador (Páguelo Fácil Hosted Fields en real; campos mock en prueba) */
.pw-sep{display:flex;align-items:center;gap:.7rem;margin:1.2rem 0 .9rem}
.pw-sep::before,.pw-sep::after{content:"";flex:1;height:1px;background:var(--g200)}
.pw-sep span{font-size:.64rem;font-weight:700;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em}
.pf-embed .field{margin-top:.7rem;margin-bottom:0}
.pf-embed .field:first-child{margin-top:0}
.pf-row2{display:flex;gap:.7rem;margin-top:.7rem}
.pf-row2 .field{flex:1;margin-top:0}
.pw-secured{display:flex;align-items:center;justify-content:center;gap:.4rem;font-size:.68rem;color:var(--ink-mute);margin-top:.85rem}
.pw-secured b{color:#0A63C9;font-weight:700}
.pw-secured svg{width:13px;height:13px;flex:none}
.pf-loading{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:1.6rem;color:var(--ink-mute);font-size:.85rem}

/* Tarjeta de bienvenida diaria (digest) — panel EMBEBIDO anclado a #digest-fab (como un widget de
   chat de soporte): NO es un bloqueo de página completa, sin backdrop oscuro, flota sobre cualquier
   módulo. Mismos colores/marca que los bloqueadores (emblema+gradiente morado) pero como panel, no
   modal. Cada sección es una fila resumen (ícono + texto + "Ver"), nunca el detalle completo — el
   detalle vive en su módulo (buscador/seguimiento) al presionar Ver. */
.dg-panel{position:fixed;right:1.25rem;bottom:4.1rem;z-index:9500;width:360px;max-width:calc(100vw - 2.5rem);max-height:calc(100vh - 10rem);overflow-y:auto;background:#fff;border-radius:1.1rem;box-shadow:0 24px 60px rgba(16,14,11,.28);border:1px solid var(--g200);transform-origin:bottom right;animation:dgPanelPop .2s cubic-bezier(.2,.8,.25,1)}
/* Sigue al #digest-fab: si el pill de trial está visible, el fab sube un piso y el panel también. */
body:has(#trial-fab:not([hidden])) .dg-panel{bottom:8.6rem}
@keyframes dgPanelPop{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.dg-panel-top{padding:1.3rem 1.5rem 0;text-align:center}
.dg-panel-emblem{width:46px;height:46px;border-radius:.9rem;background:var(--grad);display:flex;align-items:center;justify-content:center;margin:0 auto .8rem;box-shadow:0 10px 22px rgba(201,168,76,.4)}
.dg-panel-emblem svg{width:22px;height:22px;color:#fff}
.dg-panel-title{font-size:1.02rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.dg-panel-sub{font-size:.82rem;color:var(--ink-soft);margin-top:.3rem}
@media(max-width:640px){
  .dg-panel{right:.7rem;left:.7rem;width:auto;bottom:calc(var(--tabbar-space) + 4.1rem)}
  body:has(#trial-fab:not([hidden])) .dg-panel{bottom:calc(var(--tabbar-space) + 8.6rem)}
}
.dg-body{padding:1.1rem 1.4rem 1.4rem;display:flex;flex-direction:column;gap:.6rem}
.dg-empty{padding:1.4rem .5rem;text-align:center;color:var(--ink-mute);font-size:.85rem}
.dg-row{display:flex;align-items:center;gap:.9rem;padding:.85rem .95rem;border:1px solid var(--g200);border-radius:.85rem}
.dg-row-icon{width:38px;height:38px;border-radius:.7rem;background:var(--grad);display:flex;align-items:center;justify-content:center;flex:none;box-shadow:0 6px 16px rgba(201,168,76,.3)}
.dg-row-icon svg{width:18px;height:18px;color:#fff}
.dg-row-text{flex:1;min-width:0}
.dg-row-main{font-size:.86rem;font-weight:700;color:var(--ink)}
.dg-row-sub{font-size:.75rem;color:var(--ink-mute);margin-top:.15rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dg-row-btns{display:flex;flex-direction:column;gap:.4rem;flex:none}
.dg-row-btn{background:var(--grad);color:#fff;border:0;border-radius:.6rem;padding:.5rem 1.05rem;font-family:var(--font-body);font-size:.8rem;font-weight:700;cursor:pointer;flex:none;box-shadow:0 6px 16px rgba(201,168,76,.3);transition:filter .15s,transform .1s,background .15s}
.dg-row-btn:hover{filter:brightness(1.06)}
.dg-row-btn:active{transform:translateY(1px)}
.dg-row-btn-outline{background:#fff;color:var(--indigo);border:1px solid var(--g200);box-shadow:none}
.dg-row-btn-outline:hover{background:var(--g100);filter:none}

/* Onboarding in-app (código de invitación + empresa) — bloqueo TRANSPARENTE sobre el portal ya
   visible (mismo tratamiento que el paywall .pw-overlay), no una pantalla opaca previa al dashboard. */
.ob-overlay{position:fixed;inset:0;z-index:9600;display:flex;align-items:safe center;justify-content:center;overflow-y:auto;padding:1.2rem;background:rgba(16,14,11,.62);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:pwFade .25s ease}
.ob-card{position:relative;width:430px;max-width:100%;background:#fff;border-radius:1.2rem;box-shadow:0 40px 100px rgba(0,0,0,.55);overflow:hidden;animation:pwPop .32s cubic-bezier(.2,.8,.25,1)}
.ob-card-terms{width:600px}
.ob-card-personalizar{width:640px}
.ob-terms-frame{border:1px solid var(--g200);border-radius:.85rem;overflow:hidden;margin-bottom:1.2rem;background:var(--mist)}
.ob-terms-loading{padding:2.4rem 1rem;text-align:center;font-size:.82rem;color:var(--ink-mute)}
.ob-terms-loading a{color:var(--indigo);font-weight:600}
.ob-terms-scroll{max-height:300px;overflow-y:auto;padding:1rem 1.15rem}
.ob-terms-body h2{font-family:var(--font-head);font-weight:700;font-size:.94rem;color:var(--ink);letter-spacing:-.01em;margin:1.2rem 0 .45rem}
.ob-terms-body h2:first-child{margin-top:0}
.ob-terms-body p{font-size:.81rem;color:var(--ink-mute);line-height:1.65;margin-bottom:.7rem}
.ob-terms-body ul{margin:0 0 .7rem 1.1rem}
.ob-terms-body li{font-size:.81rem;color:var(--ink-mute);line-height:1.65;margin-bottom:.3rem}
.ob-terms-body a{color:var(--indigo);font-weight:600}
.ob-terms-body strong{color:var(--ink-soft)}
.ob-terms-check{align-items:flex-start;text-align:left;margin:0 0 1.3rem}
.ob-hero{background:linear-gradient(180deg,#0D0C10,#060507);padding:1.8rem 1.7rem 1.5rem;text-align:center;color:#fff}
.ob-logo .brand-word{font-size:1.5rem;color:#fff}
.ob-logo .brand-accent{background:linear-gradient(135deg,#D9C078,#E0C983);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ob-greet{font-size:.92rem;font-weight:600;color:rgba(255,255,255,.9);margin-top:.6rem}
.ob-body{padding:1.6rem 1.7rem 1.7rem}
.ob-steps{display:inline-block;font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--indigo-700);background:var(--lilac);padding:.3rem .6rem;border-radius:99px;margin-bottom:.85rem}
.ob-h{font-family:var(--font-head);font-size:1.22rem;font-weight:800;color:var(--ink);letter-spacing:-.01em}
.ob-sub{font-size:.86rem;color:var(--ink-soft);line-height:1.55;margin:.5rem 0 1.2rem}
.ob-form .field{margin-bottom:.9rem}
.ob-err{font-size:.78rem;font-weight:600;color:#DC2626;margin:-.3rem 0 .9rem;line-height:1.4}
.ob-err[hidden]{display:none}
.ob-form .pw-btn-primary{width:100%}
.ob-logout{display:block;width:100%;margin-top:.9rem;border:0;background:none;font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--ink-mute);cursor:pointer;transition:color .15s}
.ob-logout:hover{color:var(--ink-soft)}

/* ── Selector de empresa del onboarding (identidad en Panamá Compra, no texto libre) ── */
.ob-emp-row{display:flex;gap:.5rem;align-items:stretch}
.ob-emp-row .inp{flex:1;min-width:0}
.ob-emp-row .btn-go{width:auto;flex:0 0 auto;padding:.8rem 1.15rem;font-size:.86rem;box-shadow:none}
.ob-emp-row .btn-go:hover{transform:none;box-shadow:0 8px 20px rgba(125,92,23,.28)}
.ob-emp-lista:not(:empty){margin-top:.6rem}
.ob-emp-head{font-size:.76rem;font-weight:700;color:var(--ink-soft);margin-bottom:.45rem}
.ob-emp-msg{font-size:.78rem;color:var(--ink-soft);line-height:1.5;background:var(--mist);border:1px solid var(--g200);border-radius:.7rem;padding:.65rem .8rem}
.ob-emp-err{color:#DC2626;background:#FEF2F2;border-color:#FECACA}
.ob-emp-libre-on{background:var(--lilac);border-color:var(--indigo-soft);color:var(--indigo-700)}
/* La lista scrollea DENTRO de la tarjeta: buscar "Global" trae 173 empresas y el overlay del
   onboarding no puede crecer sin fin (el botón Siguiente quedaría fuera de pantalla). */
.ob-emp-lista .reg-emp-list{max-height:210px;overflow-y:auto}
.ob-emp-libre{display:block;margin-top:.55rem;border:0;background:none;padding:0;font-family:var(--font-body);font-size:.76rem;font-weight:600;color:var(--ink-mute);text-decoration:underline;cursor:pointer;transition:color .15s}
.ob-emp-libre:hover{color:var(--indigo)}

/* ── Candidatas del portal (compartido: onboarding + Registro de Proveedores) ── */
.reg-emp-list{display:flex;flex-direction:column;gap:.4rem}
.reg-emp{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;width:100%;text-align:left;background:var(--paper);border:1px solid var(--g200);border-radius:.7rem;padding:.7rem .85rem;cursor:pointer;transition:border-color .15s,background .15s,box-shadow .15s}
.reg-emp:hover{border-color:var(--indigo-light);background:var(--mist)}
.reg-emp.on{border-color:var(--indigo);background:var(--lilac);box-shadow:0 0 0 1px var(--indigo) inset}
.reg-emp-nom{font-family:var(--font-head);font-size:.88rem;font-weight:700;color:var(--ink);line-height:1.3}
.reg-emp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .7rem;font-size:.74rem;color:var(--ink-mute)}
.reg-emp-ruc{font-weight:700;color:var(--ink-soft)}
.reg-emp-off{font-weight:700;color:var(--amber-h);background:#FEF3C7;border-radius:99px;padding:.05rem .4rem}
.reg-hint{font-weight:600;color:var(--ink-mute)}

/* ═══════════ Tour de bienvenida (primera vez) — capas lft-* creadas por app.js ═══════════
   z-index POR ENCIMA del onboarding (.ob-overlay=9600) y del paywall (.pw-overlay=9500). */
.lft-dim{position:fixed;inset:0;z-index:9800;background:rgba(6,5,7,.72);opacity:0;pointer-events:none}
.lft-dim.show{pointer-events:auto}
.lft-dim.spot{background:transparent}   /* durante spotlight: solo bloquea clics; el oscuro lo pone el anillo */
.lft-hl{position:fixed;top:0;left:0;width:0;height:0;z-index:9850;border-radius:16px;pointer-events:none;
  box-shadow:0 0 0 9999px rgba(6,5,7,.72),0 0 0 2px #fff,0 0 0 6px rgba(160,122,40,.55);opacity:0;display:none}
.lft-hl.show{display:block}
#lft-stage{position:fixed;inset:0;z-index:9900;pointer-events:none}
#lft-stage>*{pointer-events:auto}
.lft-card{position:fixed;left:50%;top:50%;width:452px;max-width:calc(100vw - 32px);background:#fff;
  border-radius:var(--r-card);box-shadow:0 40px 90px rgba(6,5,7,.5);overflow:hidden;opacity:0}
.lft-confirm{width:412px}
.lft-tip{position:fixed;width:344px;max-width:calc(100vw - 32px);background:#fff;border-radius:1.25rem;
  box-shadow:0 34px 74px rgba(6,5,7,.42)}
.lft-tip .lft-head{border-radius:1.25rem 1.25rem 0 0}
.lft-head{background:linear-gradient(135deg,#0D0C10 0%,#241B08 100%);display:flex;align-items:center;gap:.65rem;padding:1rem 1.2rem;color:#fff}
.lft-brand{display:flex;flex-direction:column;gap:3px;min-width:0}
.lft-head .brand-word{color:#fff;font-size:1.18rem}
.lft-brand small{color:var(--indigo-light);font-weight:700;font-size:.58rem;letter-spacing:.17em;text-transform:uppercase}
.lft-step{margin-left:auto;flex:none;font-size:.72rem;font-weight:700;color:#cfd4ec;background:rgba(255,255,255,.09);padding:.28rem .62rem;border-radius:var(--r-pill)}
.lft-body{padding:1.45rem 1.35rem .2rem}
.lft-body.center{text-align:center;padding:1.75rem 1.5rem .2rem}
.lft-ico{width:50px;height:50px;border-radius:15px;background:var(--lilac);color:var(--indigo-700);display:grid;place-items:center;margin-bottom:.85rem}
.lft-body.center .lft-ico{margin-left:auto;margin-right:auto}
.lft-ico.warn{background:#FEF3E2;color:#C77700}
.lft-ico svg{width:25px;height:25px}
.lft-body h3{font-family:var(--font-head);font-size:1.3rem;letter-spacing:-.015em;margin-bottom:.5rem;color:var(--ink)}
.lft-tip .lft-body h3{font-size:1.1rem}
.lft-body p{font-size:.93rem;color:var(--ink-soft);line-height:1.58}
.lft-tip .lft-body p{font-size:.86rem;line-height:1.5}
.lft-foot{display:flex;align-items:center;gap:.7rem;padding:1.25rem 1.35rem}
.lft-body.center + .lft-foot{padding-top:1.35rem}
.lft-foot.choose{padding-top:.4rem}
.lft-tip .lft-foot{padding:1.05rem 1.25rem 1.15rem}
.lft-dots{display:flex;gap:.34rem}
.lft-dots i{width:6px;height:6px;border-radius:50%;background:var(--g300);transition:.28s var(--ease)}
.lft-dots i.on{background:var(--indigo);width:18px;border-radius:3px}
.lft-grow{flex:1}
.lft-btn{font-family:var(--font-body);font-weight:700;font-size:.85rem;border:0;cursor:pointer;min-height:44px;padding:.5rem 1.2rem;border-radius:var(--r-pill);display:inline-flex;align-items:center;justify-content:center;gap:.4rem;white-space:nowrap;transition:transform .16s var(--ease),filter .16s,color .16s}
.lft-btn svg{width:16px;height:16px}
.lft-btn-primary{background:var(--grad);color:#fff;box-shadow:0 10px 22px rgba(125,92,23,.35)}
.lft-btn-primary:hover{filter:brightness(1.06)}
.lft-btn-primary:active{transform:scale(.97)}
.lft-btn-ghost{background:transparent;color:var(--ink-mute);padding:.5rem .7rem}
.lft-btn-ghost:hover{color:var(--ink)}
.lft-btn:focus-visible,.lft-skip:focus-visible{outline:3px solid var(--indigo-light);outline-offset:2px}
.lft-skip{position:fixed;top:14px;right:16px;z-index:9950;min-height:40px;background:rgba(255,255,255,.92);border:1px solid var(--g200);color:var(--ink-soft);font-weight:600;font-size:.8rem;padding:.5rem .95rem;border-radius:var(--r-pill);cursor:pointer;opacity:0;pointer-events:none;transition:color .16s,background .16s}
.lft-skip.on{opacity:1;pointer-events:auto}
.lft-skip:hover{color:var(--ink);background:#fff}

@media (prefers-reduced-motion: reduce){
  .um-pop,.pw-overlay,.pw-card,.nt-toast,.ob-overlay,.ob-card{animation:none!important;transition:none!important}
  .lft-dots i,.lft-btn,.lft-skip,.lft-hl{transition:none!important}
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE+TABLET OVERHAUL (aditivo; desktop >1024px NO se toca)
   Todo va envuelto en media queries ≤1024 → el desktop nunca ve estas reglas.
   ══════════════════════════════════════════════════════════════════════════ */

/* ───────── SHELL COMPARTIDO (espejo idéntico en _admin_theme.css) ───────── */
.dash-scrim{display:none}
body.nav-locked{overflow:hidden}
/* TABLET (641–1024): drawer deslizante + scrim + escala fluida del shell */
@media(min-width:641px) and (max-width:1024px){
  .dash-sidebar{display:none}
  .dash-sidebar.open{display:flex}
  .dash-main{margin-left:0;padding:clamp(1.25rem,3vw,2.25rem)}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .dash-scrim{display:block;position:fixed;inset:0;z-index:45;background:rgba(6,5,7,.45);opacity:0;pointer-events:none;transition:opacity .25s}
  .dash-sidebar.open ~ .dash-scrim{opacity:1;pointer-events:auto}
}
/* TELÉFONO (≤640): el sidebar desaparece (lo reemplaza la barra inferior) */
@media(max-width:640px){
  .dash-sidebar,.dash-sidebar.open{display:none}
  .dash-scrim{display:none}
  .dash-main{margin-left:0;padding:1.1rem 1.1rem calc(var(--tabbar-space) + 1.1rem)}
}
/* ─────────────── FIN SHELL COMPARTIDO ─────────────── */

/* ───────── SOLO app.css (landing + portal del cliente) ───────── */
/* 100dvh real en móvil/tablet (evita el salto por la barra de direcciones); en desktop dvh==vh */
@media(max-width:1024px){
  #hero,#features,#how,#pricing{min-height:100dvh}
}
/* ════════════ MÓVIL NATIVO (landing ≤768) ════════════
   El landing deja de comportarse como desktop encogido: las secciones se ajustan al contenido
   (sin pantalla-completa que dejaba huecos enormes) y tipografía/espaciado a escala de teléfono. */
@media(max-width:768px){
  /* 1) Sin estiramiento vertical */
  #hero,#features,#how,#pricing{min-height:auto}
  #features,#how,#pricing{justify-content:flex-start}
  /* 2) Ritmo vertical compacto y parejo */
  #hero{padding:6rem 0 2.75rem}
  #stats{padding:2.75rem 0}
  #problem{padding:3.25rem 0}
  #features{padding:3.25rem 0}
  #how{padding:3.25rem 0}
  #pricing{padding:3.25rem 0}
  /* 3) Encabezados de sección a escala móvil */
  .sec-head-center{margin-bottom:1.75rem}
  .sec-title{font-size:1.7rem;line-height:1.12}
  .sec-sub{font-size:1rem;margin-top:.8rem}
  /* 4) Hero: texto primero, mockup debajo; tipografía contenida */
  .hero-inner{gap:2.25rem}
  .hero-mockup{order:0;max-width:380px}
  .hero-eyebrow{margin-bottom:1rem}
  .hero-h1{font-size:2.05rem;line-height:1.1;margin-bottom:1rem}
  .hero-p{font-size:1rem;line-height:1.55;margin-bottom:1.5rem}
  .hero-ctas{gap:.75rem;margin-bottom:1.5rem}
  .hero-trust{flex-wrap:wrap;gap:.7rem;font-size:.8rem}
  /* 5) Tarjetas en una columna, espaciado ajustado (nativo, no estirado) */
  .prob-grid,.steps{gap:.9rem;margin-top:.5rem}
  .prob-card{padding:1.5rem}
  .prob-ico{width:46px;height:46px;font-size:1.3rem;margin-bottom:1rem}
  .prob-h{font-size:1.1rem}
  .step{padding:1.5rem 1.4rem 1.7rem}
  .step-num{width:44px;height:44px;margin-bottom:1.1rem}
  .step-h{font-size:1.15rem;margin-bottom:.55rem}
  .step-d{font-size:.95rem;line-height:1.6}
  /* 6) Precios compactos */
  .price-card{padding:1.6rem 1.4rem}
  .price-feats{gap:.7rem;margin-bottom:1.5rem}
  .price-benefit{margin-bottom:1.25rem}
}
@media(max-width:380px){
  .hero-h1{font-size:1.85rem}
  .sec-title{font-size:1.55rem}
}
/* TABLET (641–1024): hamburguesa visible + contenedor fluido */
@media(min-width:641px) and (max-width:1024px){
  #sidebar-toggle{display:inline-flex}
  .container{padding:0 clamp(1.15rem,3vw,2rem)}
}
/* TABLET pequeña / teléfono grande (641–768): mantener columnas, no apilar a 1 */
@media(min-width:641px) and (max-width:768px){
  .prob-grid{grid-template-columns:repeat(2,1fr)}
  .price-grid{grid-template-columns:1fr 1.15fr}
}
/* Barra de pestañas inferior y hoja "Más": ocultas por defecto; visibles solo en teléfono
   (las reglas base van ANTES de su @media — a igual especificidad gana la última del archivo). */
.mobile-tabbar{display:none}
.more-sheet{display:none}
/* TELÉFONO (≤640): barra de pestañas inferior nativa + guardas */
@media(max-width:640px){
  #sidebar-toggle{display:none!important}
  /* 5 columnas: el portal tiene 6 vistas y la barra solo aguanta 5 → la 5ª ("Más") abre la hoja
     con Perfil/Ajustes. Sin esto, Registro y Mi Empresa quedan INALCANZABLES en teléfono
     (el sidebar es display:none y #sidebar-toggle también). */
  /* PÍLDORA FLOTANTE — mismo cristal que el #navbar del landing (blur + saturate + borde tenue +
     realce interior arriba), pero anclada abajo. No toca los bordes de la pantalla. */
  .mobile-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;z-index:120;
    left:.7rem;right:.7rem;bottom:calc(var(--tabbar-gap) + env(safe-area-inset-bottom));
    height:var(--tabbar-h);
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
    border:1px solid rgba(15,23,42,.07);border-radius:var(--r-pill);
    box-shadow:0 8px 30px rgba(16,14,11,.12),inset 0 1px 0 rgba(255,255,255,.6);
    padding:0 .3rem;overflow:hidden}
  .tab-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.16rem;
    height:100%;padding:.3rem 2px;border-radius:var(--r-pill);
    border:0;background:none;cursor:pointer;color:var(--ink-mute);font-family:var(--font-body);font-size:.56rem;font-weight:700;letter-spacing:-.01em;
    white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .tab-item .tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .tab-item svg{width:21px;height:21px;flex:none}
  .tab-item.active{color:var(--indigo)}
  /* La pestaña activa se marca con su propia píldora interior (no con una línea, que en un borde
     redondeado se ve cortada). */
  .tab-item.active::before{content:"";position:absolute;inset:0;border-radius:inherit;
    background:rgba(125,92,23,.09);z-index:-1}
  .tab-item{position:relative;isolation:isolate}

  /* Hoja "Más" — flota sobre la píldora, con la misma caja redondeada (una hoja pegada a los bordes
     debajo de una píldora se vería incoherente). */
  .more-sheet{display:block;position:fixed;z-index:125;
    left:.7rem;right:.7rem;
    bottom:calc(var(--tabbar-space) + .5rem);
    background:rgba(255,255,255,.96);
    -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
    border:1px solid rgba(15,23,42,.07);border-radius:1.25rem;
    box-shadow:0 18px 50px rgba(16,14,11,.22),inset 0 1px 0 rgba(255,255,255,.6);padding:.5rem .7rem .8rem;
    transform:translateY(calc(100% + var(--tabbar-space)));transition:transform .26s cubic-bezier(.2,.8,.25,1);
    visibility:hidden}
  .more-sheet.open{transform:translateY(0);visibility:visible}
  .more-grip{width:38px;height:4px;border-radius:99px;background:var(--g300);margin:.35rem auto .6rem}
  .more-item{display:flex;align-items:center;gap:.8rem;width:100%;min-height:52px;padding:.6rem .7rem;
    border:0;background:none;border-radius:.7rem;cursor:pointer;text-align:left;
    font-family:var(--font-body);font-size:.95rem;font-weight:600;color:var(--ink)}
  .more-item:active{background:var(--mist)}
  .more-item svg{width:20px;height:20px;flex:none;color:var(--ink-mute)}
  .more-item.danger{color:#DC2626}
  .more-item.danger svg{color:#DC2626}
  /* El scrim del drawer es display:none en teléfono; la hoja lo reutiliza como fondo. */
  body.sheet-open .dash-scrim{display:block;position:fixed;inset:0;z-index:124;background:rgba(6,5,7,.45)}

  /* Guardas de desborde + targets táctiles ≥44px */
  #dashboard{overflow-x:hidden}
  .lic-act{min-width:44px;min-height:44px}
  .notif-btn{min-width:44px;min-height:44px}
  /* El dropdown de usuario no debe desbordar el borde derecho */
  .um-pop{max-width:calc(100vw - 1.6rem)}
}

/* ════════════════ SISTEMA CENTRALIZADO (#centraliza) ════════════════ */
/* ─── Comparativo (sin nombrar rivales) ─── */
.cmp{margin-top:2rem}
.cmp-table{max-width:840px;margin:0 auto;border:1px solid var(--g200);border-radius:var(--r-card);overflow:hidden;background:var(--paper);box-shadow:0 1px 3px rgba(16,14,11,.04)}
.cmp-row{display:grid;grid-template-columns:2.2fr 1fr 1.2fr 1fr;align-items:center}
.cmp-row+.cmp-row{border-top:1px solid var(--g200)}
.cmp-feat{padding:.95rem 1.1rem;font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.35}
.cmp-c{padding:.95rem .5rem;text-align:center;font-size:.78rem;display:flex;align-items:center;justify-content:center}
.cmp-colhead .cmp-feat,.cmp-colhead .cmp-c{font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--ink-soft);background:var(--mist)}
.cmp-c svg{width:20px;height:20px}
.cmp-c.no{color:var(--g400)}
.cmp-c.mid{color:var(--amber-h)}
.cmp-c.ok{color:var(--teal)}
.cmp-us{background:rgba(125,92,23,.05)}
.cmp-colhead .cmp-us{color:var(--indigo);background:rgba(125,92,23,.08)}
.cmp-row .cmp-us{color:var(--indigo)}
.cmp-us.no{color:var(--g400)}
@media(max-width:640px){
  .cmp-table{overflow-x:auto}
  .cmp-row{grid-template-columns:1.7fr .8fr 1fr .8fr;min-width:460px}
}

/* ════════════════ CÓMO FUNCIONA (#how) — upgrade ════════════════ */
.steps::before{content:"";position:absolute;top:72px;left:16.6%;right:16.6%;height:2px;background:linear-gradient(90deg,transparent,rgba(160,122,40,.55) 18%,rgba(160,122,40,.55) 82%,transparent);z-index:1}
.step{transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.step:hover{transform:translateY(-6px);border-color:rgba(160,122,40,.4);box-shadow:0 26px 55px rgba(160,122,40,.2)}
.step-ico{position:relative;z-index:2;width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:var(--grad);color:#fff;box-shadow:0 10px 24px rgba(160,122,40,.4);margin-bottom:1.4rem}
.step-ico svg{width:26px;height:26px}
.step-badge{position:absolute;top:1.6rem;right:1.8rem;font-family:var(--font-mono);font-weight:600;font-size:.9rem;color:rgba(255,255,255,.3)}

/* ════════════════ FUENTES ════════════════
   Antes esto era una tarjeta con título, párrafo, borde y sombra que pesaba
   tanto como la sección que acompañaba. Las fuentes son un dato de apoyo, no un
   bloque: ahora van en una tira de una línea. El punto de color ya dice el
   estado (verde vivo, ámbar pendiente), así que sobran los rótulos
   "Activo"/"Pronto" — se fueron con `.src-state`. */
.src-chip{display:inline-flex;align-items:center;gap:.55rem;font-size:.82rem;font-weight:700;color:var(--ink);background:var(--mist);border:1px solid var(--g200);padding:.5rem .95rem;border-radius:999px}
.src-chip.soon{color:var(--ink-mute)}
.src-strip{margin-top:1.7rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem .6rem}
.src-strip-l{font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-right:.25rem}
.src-strip .src-chip{font-size:.76rem;font-weight:600;gap:.42rem;padding:.32rem .75rem;background:transparent}
.src-strip .src-dot{width:6px;height:6px}
@media(max-width:768px){
  .steps::before{display:none}
}

/* ════════════════ TESTIMONIOS (#testi) ════════════════ */
#testi{background:var(--lilac);padding:7rem 0;position:relative;overflow:hidden}
#testi::before{content:"";position:absolute;top:-90px;right:-70px;width:420px;height:420px;background:radial-gradient(circle,rgba(160,122,40,.09),transparent 70%);pointer-events:none}
#testi .container{position:relative;z-index:1}
.tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:1rem}
.tst-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--g200);border-radius:var(--r-card);padding:2rem 1.8rem;box-shadow:0 1px 3px rgba(16,14,11,.04);transition:transform .4s var(--ease),box-shadow .4s,border-color .4s}
.tst-card:hover{transform:translateY(-6px);box-shadow:0 26px 55px rgba(125,92,23,.14);border-color:var(--indigo-soft)}
.tst-stars{display:inline-flex;gap:2px;color:var(--amber);margin-bottom:1.05rem}
.tst-stars svg{width:18px;height:18px}
.tst-quote{font-size:1rem;line-height:1.65;color:var(--ink-soft);flex:1;margin-bottom:1.5rem}
.tst-who{display:flex;align-items:center;gap:.85rem}
.tst-av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:.92rem;box-shadow:0 8px 18px rgba(125,92,23,.28)}
.tst-name{font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink)}
.tst-role{font-weight:500;color:var(--ink-mute)}
.tst-co{font-size:.82rem;color:var(--ink-soft);margin-top:.12rem}
.tst-rubro{font-size:.72rem;font-weight:600;color:var(--indigo);margin-top:.15rem}
/* Panel oscuro, no dorado: el CTA de adentro es champagne y sobre fondo dorado
   desaparecía. Mismo criterio que la banda oscura de Nexel. */
.tst-cta{margin-top:2.5rem;text-align:center;background:linear-gradient(135deg,#0D0C10 0%,#241B08 60%,#0D0C10 100%);border-radius:1.6rem;padding:3rem 2rem;color:#fff;position:relative;overflow:hidden;box-shadow:0 30px 70px rgba(16,14,11,.35)}
.tst-cta h3{font-family:var(--font-head);font-weight:700;font-size:clamp(1.4rem,2.6vw,2.05rem);letter-spacing:-.02em;line-height:1.18;max-width:620px;margin:0 auto .7rem}
.tst-cta p{font-size:1.02rem;color:rgba(255,255,255,.85);margin-bottom:1.7rem}
.tst-cta .btn-primary{box-shadow:0 14px 34px rgba(201,168,76,.45)}
@media(max-width:900px){.tst-grid{grid-template-columns:1fr;max-width:520px;margin-inline:auto}}
@media(min-width:641px) and (max-width:900px){.tst-grid{grid-template-columns:repeat(2,1fr);max-width:none}}

/* ═══════════ Mi Empresa (desempeño propio) ═══════════ */
.me-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.me-otros{flex:0 0 auto;white-space:nowrap}

/* Las dos tarjetas fijas "Dónde ganas"/"Quién te gana" se fueron al popup de los KPIs (histRanking):
   empujaban el histórico media pantalla hacia abajo y en el Registro ni existían. */
.kpi-card-click{cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s}
.kpi-card-click:hover{border-color:var(--indigo);box-shadow:0 4px 14px rgba(125,92,23,.12);transform:translateY(-1px)}
.kpi-card-click:focus-visible{outline:2px solid var(--indigo);outline-offset:2px}
.kpi-mas{display:block;margin-top:.35rem;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--indigo)}
.reg-pop-ov{position:fixed;inset:0;background:rgba(16,14,11,.45);display:flex;align-items:center;justify-content:center;padding:1.2rem;z-index:120}
.reg-pop{background:#fff;border-radius:1.1rem;box-shadow:0 30px 80px rgba(0,0,0,.3);width:100%;max-width:34rem;max-height:80vh;display:flex;flex-direction:column;overflow:hidden}
.reg-pop-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--g200);font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink)}
.reg-pop-body{padding:.4rem 1.2rem 1.1rem;overflow-y:auto}
.me-rank{display:flex;flex-direction:column}
/* Nombre + meta apilados a la izquierda, monto pegado a la derecha y centrado en vertical. Con grid
   el monto caía a una tercera línea suelta y no se leía como "lo que esta entidad te dio". */
.me-rank-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem .1rem;border-bottom:1px solid var(--g100)}
.me-rank-row:last-child{border-bottom:0}
.me-rank-row>div:first-child{min-width:0}
.me-rank-nom{font-weight:700;font-size:.84rem;color:var(--ink);line-height:1.35}
.me-rank-monto{font-family:var(--font-head);font-weight:700;font-size:.84rem;color:var(--ink);text-align:right;white-space:nowrap;flex:0 0 auto}
.me-rank-meta{font-size:.74rem;color:var(--ink-mute);margin-top:.1rem}


.me-empty{text-align:center;padding:2.4rem 1.6rem}
.me-empty-ico{width:44px;height:44px;margin:0 auto .9rem;color:var(--indigo)}
.me-empty-ico svg{width:100%;height:100%}
.me-empty-h{font-family:var(--font-head);font-size:1.05rem;font-weight:800;color:var(--ink);margin-bottom:.5rem}
.me-empty-p{font-size:.85rem;color:var(--ink-soft);line-height:1.6;max-width:34rem;margin:0 auto 1.2rem}

/* ── Empresa vinculada en Ajustes (solo lectura: el cambio lo aplica un admin) ── */
.inp-lock{background:var(--mist);color:var(--ink-soft);cursor:default}
.vin-box{background:var(--mist);border:1px solid var(--g200);border-radius:.8rem;padding:.85rem 1rem;margin-bottom:.85rem}
.vin-nom{font-family:var(--font-head);font-weight:800;font-size:.95rem;color:var(--ink);line-height:1.35}
.vin-meta{font-size:.78rem;font-weight:600;color:var(--ink-mute);margin-top:.25rem}
.vin-off{font-size:.82rem;color:var(--ink-soft);line-height:1.55;margin-bottom:.9rem}
.vin-pend{display:flex;gap:.45rem;align-items:flex-start;font-size:.78rem;font-weight:600;color:var(--indigo-700);background:var(--lilac);border:1px solid var(--indigo-soft);border-radius:.7rem;padding:.6rem .75rem;margin-bottom:.85rem}
.vin-pend svg{width:14px;height:14px;flex:none;margin-top:.1rem}
.vin-form{margin-bottom:.85rem}
.vin-ta{resize:vertical;min-height:4.5rem;font-family:var(--font-body)}
.vin-btns{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}

/* ── Frescura del histórico + botón Actualizar (Registro y Mi Empresa) ── */
.fresh-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.fresh{display:flex;align-items:center;gap:.6rem;flex:0 0 auto}
.fresh-txt{font-size:.76rem;font-weight:600;color:var(--ink-mute);white-space:nowrap}
.fresh-btn{width:auto;white-space:nowrap;padding:.55rem .9rem;font-size:.82rem}
.fresh-btn svg{width:15px;height:15px}
.fresh-btn:disabled{opacity:.5;cursor:not-allowed}
.fresh-btn .spinner{width:14px;height:14px}
.me-head-acciones{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;flex:0 0 auto}
@media(max-width:640px){ .fresh{width:100%;justify-content:space-between} }

/* Paginador dentro de las tarjetas de Mi Empresa: el módulo tiene un techo de altura (8 filas por
   tabla) para que un año con muchos actos no lo convierta en un scroll eterno. */
.me-tabla-gan .nx-pager,.me-tabla-per .nx-pager,.me-tabla-sin .nx-pager{margin-top:.7rem;padding-top:.15rem}

/* Monto de una seguida ya adjudicada: se muestra el ADJUDICADO (el real), no la referencia del
   pliego. La etiqueta existe para que el número no cambie en silencio — el tooltip trae la
   referencia para comparar. Ver licMonto() en app.js. */
.lic-mon-tag{display:block;margin-top:.15rem;font-size:.62rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--teal);cursor:help}

/* Rival cliqueable → abre el Registro de Proveedores con la búsqueda hecha (ver verProveedor).
   Se ve como enlace, no como botón: es navegación, no una acción destructiva. */
.prov-link{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--indigo);font-weight:700;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:2px;transition:color .15s}
.prov-link:hover{color:var(--indigo-700);text-decoration-style:solid}
.me-rank-nom .prov-link{font-family:inherit;font-size:inherit}

/* ══════════════════════════════════════════════════════════════════════════
   PORTAL — COMPONENTES DE MÓDULO
   Estas reglas vivían inyectadas desde app.js (dos bloques <style> creados en
   runtime). Se movieron aquí sin cambiar el resultado en cascada: iban al final
   del <head>, y este es el final del único stylesheet. Las reglas que se
   pisaban a sí mismas quedaron colapsadas a su valor ganador.
   ══════════════════════════════════════════════════════════════════════════ */

/* Quien pide menos movimiento no debería ver NINGUNA transición del portal (antes solo se apagaban
   5 componentes). Las transiciones de color/sombra se quedan en 0s; nada se mueve. */
@media(prefers-reduced-motion:reduce){
  #dashboard *,.docs-modal *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ─── Foco visible ───
   Los inputs ya tenían anillo; los botones, chips, filas y pestañas NO tenían ninguno: quien navega
   con teclado se perdía. Solo :focus-visible → el mouse no lo dispara. */
#dashboard button:focus-visible,
#dashboard a:focus-visible,
#dashboard select:focus-visible,
#dashboard [tabindex]:focus-visible,
.docs-modal button:focus-visible{outline:2px solid var(--indigo);outline-offset:2px;border-radius:var(--r-xs)}
#dashboard .inp:focus-visible,#dashboard .sel:focus-visible,#dashboard .txta:focus-visible{outline:none}

/* ─── Pestañas de Seguimiento: En proceso / Resueltas ───
   Reusa el segmento de .modal-tabs, pero compacto y alineado a la izquierda (en el modal las
   pestañas se reparten todo el ancho; acá no deben estirarse hasta el borde de la tarjeta). */
.lic-tabs{padding:.65rem 1.4rem .15rem;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lic-tabs::-webkit-scrollbar{display:none}
.lic-tabs .modal-tabs{display:inline-flex;width:auto;margin:0;gap:.25rem;padding:.25rem}
.lic-tabs .modal-tab{flex:none;padding:.4rem .85rem;font-size:.8rem;white-space:nowrap}
.lic-tab-n{display:inline-block;margin-left:.35rem;font-size:.72rem;font-weight:700;color:var(--ink-mute);background:rgba(15,23,42,.06);border-radius:99px;padding:.02rem .45rem}
.modal-tab.active .lic-tab-n{color:var(--indigo);background:rgba(125,92,23,.12)}

/* ─── Barra de filtros de la lista (Seguimiento y Búsqueda) ─── */
.lic-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.4rem .8rem;padding:.45rem 1.4rem;border-bottom:1px solid var(--g200);flex-wrap:nowrap}
.lic-toolbar-group{display:inline-flex;align-items:center;gap:.6rem;flex-wrap:nowrap;min-width:0}
.lic-toolbar-label{display:inline-flex;align-items:center;gap:.5rem;font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft)}
.lic-toolbar-label svg{width:15px;height:15px;color:var(--ink-mute)}
.lic-ent-sel{max-width:175px;padding:.32rem .55rem;border:1px solid var(--g200);border-radius:.6rem;background:#fff;font-size:.74rem;font-weight:600;color:var(--ink);cursor:pointer}
.lic-ent-sel:disabled{opacity:.55;cursor:default}
#lic-filter{display:inline-flex;gap:.25rem;background:#F7F6F3;border:1px solid var(--g200);border-radius:.7rem;padding:.2rem;flex-wrap:nowrap}
#lic-filter .chip{padding:.3rem .55rem;border:1px solid transparent;background:transparent;border-radius:.5rem;font-size:.72rem;font-weight:600;color:var(--ink-mute);box-shadow:none}
#lic-filter .chip:hover{color:var(--ink);border-color:transparent;background:rgba(15,23,42,.05)}
#lic-filter .chip.on{background:#fff;border-color:var(--g200);color:var(--ink);box-shadow:0 1px 2px rgba(16,14,11,.10)}
.lic-prio-group{display:inline-flex}
.lic-prio-group .chip{padding:.3rem .6rem;border:1px solid var(--g200);background:#fff;border-radius:.5rem;font-size:.72rem;font-weight:600;color:var(--ink-mute);cursor:pointer;white-space:nowrap;transition:all .15s}
.lic-prio-group .chip:hover{border-color:var(--indigo);color:var(--indigo)}
.lic-prio-group .chip.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
/* La cabecera de .table-card quedó fuera de uso: los filtros la reemplazaron. */
.table-card-head{display:none}

/* ─── Agrupador por entidad en resultados de búsqueda ─── */
.res-acc-grp{border:1px solid var(--g200);border-radius:var(--r-md);margin-bottom:.7rem;overflow:hidden;background:#fff;box-shadow:var(--e1)}
.res-acc-head{display:flex;align-items:center;gap:.7rem;width:100%;padding:.85rem 1.1rem;background:#FAFBFE;border:0;cursor:pointer;text-align:left;transition:background .15s}
.res-acc-head:hover{background:rgba(15,23,42,.05)}
.rag-name{flex:1;min-width:0;font-family:var(--font-head);font-weight:700;font-size:.92rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rag-count{flex:none;font-size:.78rem;font-weight:700;color:var(--indigo);background:rgba(125,92,23,.1);border-radius:99px;padding:.1rem .6rem}
.rag-chev{width:17px;height:17px;flex:none;color:var(--ink-mute);transition:transform .2s}
.res-acc-grp.open .rag-chev{transform:rotate(180deg)}
.res-acc-body{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 .6rem}
.res-acc-grp.open .res-acc-body{max-height:6000px;padding:.6rem}

/* ─── Perfil (acordeón único, siempre abierto) ─── */
.perfil-solo-head{display:flex;align-items:center;gap:.85rem;padding:1.2rem 1.5rem 1rem}
#perfil-intro{display:none}
.perfil-card.open .perfil-acc-inner{padding-top:1.4rem}
/* CTA "Buscar con mi perfil" en la esquina del header */
.perfil-cta{display:flex;flex-direction:column;gap:.4rem;align-items:flex-start;min-width:0}
.pc-text{display:inline-flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:600;color:var(--ink-mute)}
.pc-text.has-new{color:#92400E;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.32);border-radius:.55rem;padding:.28rem .6rem}
.pc-text svg{width:14px;height:14px;flex:none;color:var(--ink-mute)}
.pc-text.has-new svg{color:#F59E0B}
.pc-text.has-new b{color:#B45309;font-weight:800}
.pc-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border:0;border-radius:.6rem;background:var(--grad);color:#fff;font-family:var(--font-body);font-size:.85rem;font-weight:600;cursor:pointer;box-shadow:0 6px 16px rgba(125,92,23,.22);transition:filter .15s,transform .15s}
.pc-btn:hover{filter:brightness(1.06)}
.pc-btn svg{width:15px;height:15px}

/* ─── Top-bar: buscador contextual + recuadro de usuario ─── */
.sidebar-bottom .user-chip{display:none}
.topbar-search{display:flex;align-items:center;gap:.5rem;flex:0 1 340px;max-width:340px;background:#fff;border:1px solid var(--g200);border-radius:.7rem;padding:.5rem .8rem;box-shadow:0 1px 2px rgba(16,14,11,.05)}
.topbar-search:focus-within{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(125,92,23,.1)}
.topbar-search svg{width:16px;height:16px;color:var(--ink-mute);flex:none}
.topbar-search input{border:0;outline:0;background:none;width:100%;font-family:var(--font-body);font-size:.86rem;color:var(--ink)}
.dash-header-right{gap:.5rem;padding:.4rem .6rem .4rem .75rem;border-radius:.9rem;background:#fff;border:1px solid var(--g200);box-shadow:0 1px 3px rgba(16,14,11,.05)}
.dash-header-right .notif-btn{color:var(--indigo)}
.dash-header-right .notif-btn:hover{color:var(--violet)}
.userchip{display:flex;align-items:center;gap:.55rem;background:none;border:0;border-left:1px solid var(--g200);border-radius:0;padding:.05rem .05rem .05rem .65rem;box-shadow:none}
.uc-avatar{width:32px;height:32px;border-radius:50%;background:var(--grad);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.78rem;color:#fff;flex:none}
.uc-info{min-width:0;line-height:1.2}
.uc-name{font-size:.8rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.uc-empresa{font-size:.66rem;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.uc-badge{font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--grad-warm);color:#100E0B;padding:.2rem .5rem;border-radius:99px;flex:none}

/* ─── Widget NexAPI en el sidebar ─── */
.sidebar-nexapi{margin-top:auto;margin-bottom:.6rem}
.nx-refresh{display:flex;align-items:center;justify-content:center;gap:.5rem;width:100%;padding:.6rem .8rem;border-radius:.7rem;cursor:pointer;font-family:var(--font-body);font-size:.82rem;font-weight:600;color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:all .2s var(--ease)}
.nx-refresh:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2)}
.nx-refresh svg{width:15px;height:15px;flex-shrink:0}
.nx-sub{font-size:.62rem;line-height:1.35;color:rgba(255,255,255,.4);margin:.4rem .2rem 0;text-align:center}
.nx-sub b{color:rgba(255,255,255,.65);font-weight:600}
#rb-btn svg{transition:transform .2s}
#rb-btn.loading{pointer-events:none;opacity:.75}
#rb-btn.loading svg{animation:rb-spin 1s linear infinite}
@keyframes rb-spin{to{transform:rotate(360deg)}}

/* ─── Paginador compartido (Seguimiento · Búsqueda · Registro · Mi Empresa) ─── */
.nx-pager{display:flex;align-items:center;justify-content:center;gap:.35rem;padding:.45rem .8rem .15rem}
.nx-page{min-width:32px;height:32px;padding:0 .55rem;border:1px solid var(--g200);background:#fff;border-radius:.55rem;font-family:var(--font-body);font-size:.82rem;font-weight:600;color:var(--ink-mute);cursor:pointer;transition:all .15s}
.nx-page:hover:not(:disabled){border-color:var(--indigo);color:var(--indigo)}
.nx-page.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.nx-page:disabled{opacity:.4;cursor:default}
.nx-ell{display:inline-flex;align-items:center;padding:0 .25rem;color:var(--ink-mute);font-size:.85rem}

/* ─── Búsqueda: embudo, filtros y acciones ─── */
#res-zone .res-actions{padding:.55rem 1.4rem;border-bottom:1px solid var(--g100)}
.res-funnel{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .5rem;padding:.6rem 0 .1rem;font-family:var(--font-mono);font-size:.66rem;color:var(--ink-mute)}
.res-funnel .rf-step{display:inline-flex;align-items:center;gap:.3rem;background:#fff;border:1px solid var(--g200);border-radius:99px;padding:.18rem .6rem}
.res-funnel .rf-step b{font-family:var(--font-body);color:var(--ink);font-weight:700}
.res-funnel .rf-step.acc{background:rgba(125,92,23,.08);border-color:rgba(125,92,23,.28);color:var(--indigo)}
.res-funnel .rf-step.acc b{color:var(--indigo)}
.res-funnel .rf-arrow{color:var(--g400)}
#res-filter{display:inline-flex;gap:.2rem;background:#F7F6F3;border:1px solid var(--g200);border-radius:.7rem;padding:.2rem;flex-wrap:nowrap}
#res-filter .chip{padding:.3rem .55rem;border:1px solid transparent;background:transparent;border-radius:.5rem;font-size:.72rem;font-weight:600;color:var(--ink-mute);cursor:pointer;white-space:nowrap}
#res-filter .chip:hover{color:var(--ink);background:rgba(15,23,42,.05)}
#res-filter .chip.on{background:#fff;border-color:var(--g200);color:var(--ink);box-shadow:0 1px 2px rgba(16,14,11,.1)}

/* ─── Shell del dashboard: sin scroll propio, la paginación controla el alto ─── */
.dash-main.lic-locked{height:auto;overflow:visible;display:block}
.dash-main.lic-locked #view-licitaciones{display:block}
.dash-main.lic-locked #view-licitaciones .table-card{display:block;flex:none;min-height:0}
#view-licitaciones .table-card{margin-top:.7rem}

/* ─── Tarjeta de licitación (la fila de Seguimiento y de Búsqueda) ─── */
.lic-card{display:grid;grid-template-columns:minmax(0,1fr) 190px 132px auto;align-items:center;gap:1.5rem;padding:.6rem 1.5rem;border-bottom:1px solid var(--g100);transition:background .12s}
.lic-card.res-noestado{grid-template-columns:minmax(0,1fr) 132px auto}
.lic-card.res-noestado.res-compat{grid-template-columns:minmax(0,1fr) 92px 132px auto}
.lic-card:last-child{border-bottom:none}
.lic-card:hover{background:#F9FAFE}
/* Cabecera de columnas: UNA vez arriba de la lista. Antes cada fila repetía "Estado" y "Monto" —
   seis filas = doce etiquetas compitiendo con los datos. */
.lic-head{display:grid;grid-template-columns:minmax(0,1fr) 190px 132px auto;gap:1.5rem;align-items:center;
  padding:.45rem 1.5rem;background:var(--mist);border-bottom:1px solid var(--g200);
  font-size:.58rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g500);
  position:sticky;top:0;z-index:2}
.lic-head.res-noestado{grid-template-columns:minmax(0,1fr) 132px auto}
.lic-head.res-noestado.res-compat{grid-template-columns:minmax(0,1fr) 92px 132px auto}
.lic-head span{text-align:center}
.lic-head span:first-child,.lic-head span:last-child{text-align:left}
.lic-main{min-width:0}
.lic-top{display:flex;align-items:flex-start;gap:.75rem}
.lic-ent{font-size:.92rem;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lic-obj{font-size:.8rem;color:var(--ink-mute);margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lic-meta{font-family:var(--font-mono);font-size:.68rem;color:var(--ink-mute);margin-top:.25rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.lic-meta .badge{font-family:var(--font-body)}
/* Encabezado de columna (Estado/Monto): chiquito, pegado arriba de su valor */
.lic-h{font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ink);line-height:1}
.lic-estado-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.45rem;text-align:center;min-width:0}
.lic-mon-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;white-space:nowrap}
.lic-mon-val{font-family:var(--font-mono);font-size:.98rem;font-weight:700;color:var(--ink)}
/* Píldora de estado de 2 líneas: arriba el estado, abajo la empresa (adjudicada/ganada) */
.badge-2l{display:inline-flex;flex-direction:column;align-items:center;text-align:center;gap:1px;padding:.24rem .65rem;line-height:1.15;max-width:100%}
.badge-2l .b2-top{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em}
.badge-2l .b2-emp{font-size:.58rem;font-weight:600;max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Acciones de la fila */
.lic-acts{display:flex;gap:.4rem;align-items:center;justify-content:flex-end}
.lic-act{position:relative;width:34px;height:34px;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--g200);background:#fff;color:var(--ink-mute);transition:background .15s,border-color .15s,color .15s;flex:none;cursor:pointer}
.lic-act svg{width:16px;height:16px}
.lic-act:hover{color:var(--ink);border-color:var(--g300)}
.lic-act.prop:hover{color:var(--indigo);border-color:var(--indigo)}
.lic-act.seg:hover{color:#fff;background:#059669;border-color:#059669}
.lic-act.del:hover{color:#fff;background:#DC2626;border-color:#DC2626}
.lic-dot{position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#DC2626;border:2px solid #fff;box-shadow:0 0 0 1px rgba(220,38,38,.25)}
.lic-empty{padding:2.4rem 1rem;text-align:center;color:var(--ink-mute);font-size:.92rem}
/* ─── Esqueleto de carga (ver lfSkeleton en app.js) ─── */
.nx-sk-row{display:grid;grid-template-columns:minmax(0,1fr) 190px 132px;align-items:center;gap:1.5rem;padding:.85rem 1.5rem;border-bottom:1px solid var(--g100)}
.nx-sk-main{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.nx-sk{display:block;height:10px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--g100) 25%,#E9EDF5 37%,var(--g100) 63%);background-size:400% 100%;animation:lfSk 1.4s ease infinite}
.nx-sk-l{width:38%;height:12px}
.nx-sk-m{width:72%}
.nx-sk-s{width:26%;height:8px}
.nx-sk-pill{width:110px;height:18px;justify-self:center}
.nx-sk-num{width:74px;height:14px;justify-self:center}
@keyframes lfSk{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.nx-sk{animation:none}}
@media(max-width:768px){.nx-sk-row{grid-template-columns:1fr}.nx-sk-pill,.nx-sk-num{justify-self:start}}

/* ─── Estado vacío del portal (Seguimiento, resultados, tablas) ─── */
.nx-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--s7) var(--s5)}
.nx-empty-ico{width:40px;height:40px;border-radius:var(--r-pill);background:rgba(125,92,23,.08);color:var(--indigo);display:inline-flex;align-items:center;justify-content:center;margin-bottom:var(--s3)}
.nx-empty-ico svg{width:19px;height:19px}
.nx-empty-h{font-family:var(--font-head);font-size:1rem;font-weight:700;color:var(--ink)}
.nx-empty-p{font-size:.85rem;color:var(--ink-mute);line-height:1.55;max-width:38ch;margin-top:.35rem}
.nx-empty .btn-outline{margin-top:var(--s4)}
/* Filtro "Ver" de cambios de estado (digest diario) + nota inline de qué cambió en una fila */
.lic-filtro-chip{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;margin:0 0 .3rem;font-size:.78rem;color:var(--ink-soft);background:rgba(201,168,76,.06);border-bottom:1px solid var(--g100)}
.lic-filtro-chip button{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--indigo);cursor:pointer}
.lic-filtro-chip button:hover{text-decoration:underline}
.lic-cambio{font-size:.72rem;color:var(--indigo);margin-top:.35rem;font-weight:600}
/* La lista tiene su propio scroll: se recorre sin perder de vista los KPIs ni la cabecera */
#lic-rows{overflow-y:auto;overscroll-behavior:contain}
#lic-rows:focus{outline:none}
#lic-rows::-webkit-scrollbar{width:10px}
#lic-rows::-webkit-scrollbar-thumb{background:var(--g300);border-radius:99px;border:3px solid #fff}
#lic-rows::-webkit-scrollbar-thumb:hover{background:var(--g400)}

/* ─── % de compatibilidad (solo Búsqueda Inteligente) ─── */
.compat-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;text-align:center;min-width:0}
.info-tip.compat-tip{margin-left:0}
.compat-dot{min-width:2.6rem;padding:.22rem .55rem;border-radius:99px;font-family:var(--font-mono);font-size:.72rem;font-weight:800;line-height:1.3;border:1px solid;cursor:pointer;text-transform:none;letter-spacing:0;background:none}
.compat-dot:hover{filter:brightness(.96)}
.compat-dot.c-hi{color:#059669;background:rgba(16,185,129,.12);border-color:rgba(16,185,129,.28)}
.compat-dot.c-med{color:#B45309;background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.3)}
.compat-dot.c-lo{color:var(--ink-mute);background:var(--g100);border-color:var(--g200)}
.compat-tip .info-pop.compat-pop{left:auto;right:0;width:232px}
.compat-pop b{display:block;font-size:.72rem;color:var(--ink);margin-bottom:.35rem}
.compat-pop-row{display:flex;align-items:center;gap:.45rem;padding:.2rem 0}
.compat-pop-row svg{width:13px;height:13px;flex:none}
.compat-pop-row.ok{color:#059669}
.compat-pop-row.no{color:var(--ink-mute);opacity:.7}

/* ─── Modal "Ver documentos" ─── */
.docs-overlay{position:fixed;inset:0;z-index:600;background:rgba(16,14,11,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:1.5rem}
.docs-modal{background:#fff;border-radius:1.1rem;width:min(1180px,96vw);max-height:92vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 40px 100px rgba(16,14,11,.4)}
.docs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;padding:1.15rem 1.4rem;border-bottom:1px solid var(--g200)}
.docs-title{font-family:var(--font-head);font-weight:700;font-size:1.05rem;color:var(--ink)}
.docs-sub{font-size:.76rem;color:var(--ink-mute);margin-top:.15rem}
.docs-close{width:34px;height:34px;border-radius:.6rem;border:1px solid var(--g200);background:#fff;color:var(--ink-mute);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;transition:all .15s}
.docs-close:hover{color:var(--ink);border-color:var(--g300)}
.docs-close svg{width:16px;height:16px}
.docs-content{display:grid;grid-template-columns:260px 1fr;min-height:0;flex:1}
.docs-list{border-right:1px solid var(--g200);overflow-y:auto;padding:.7rem;background:#FAFBFE;display:flex;flex-direction:column;gap:.4rem}
.docs-item{display:flex;align-items:center;gap:.6rem;text-align:left;padding:.6rem .7rem;border:1px solid transparent;border-radius:.6rem;background:transparent;cursor:pointer;transition:all .15s;width:100%}
.docs-item:hover{background:#fff;border-color:var(--g200)}
.docs-item.active{background:#fff;border-color:var(--indigo);box-shadow:0 1px 3px rgba(125,92,23,.12)}
.docs-item-ic{width:30px;height:30px;border-radius:.5rem;background:rgba(125,92,23,.1);color:var(--indigo);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.docs-item-ic svg{width:15px;height:15px}
.docs-item-txt{min-width:0;display:flex;flex-direction:column}
.docs-item-name{font-size:.8rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.docs-item-type{font-size:.66rem;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.04em;margin-top:.1rem}
.docs-viewer{position:relative;background:var(--g100);min-height:520px}
/* Centrado sobre el visor del PDF (columna derecha), no sobre todo el modal: el sidebar mide 260px
   → el centro del PDF está en 50% + 130px. En móvil (una sola columna) vuelve al centro. */
.docs-newtab{position:absolute;left:calc(50% + 130px);top:50%;transform:translate(-50%,-50%);z-index:5;display:inline-flex;align-items:center;gap:.35rem;padding:.42rem .85rem;border:0;border-radius:2rem;background:var(--indigo);color:#fff;font-size:.72rem;font-weight:700;cursor:pointer;transition:filter .15s;box-shadow:0 2px 8px rgba(125,92,23,.3)}
.docs-newtab:hover{filter:brightness(1.08)}
.docs-newtab svg{width:13px;height:13px;flex:none}
.docs-viewer .pdf-doc{width:100%;height:100%;min-height:440px;overflow-y:auto;background:var(--g100);padding:14px 0;text-align:center;-webkit-overflow-scrolling:touch}
.docs-viewer .pdf-page{display:inline-block;margin:0 auto 14px;max-width:100%;background:#fff;box-shadow:0 1px 8px rgba(16,14,11,.16);border-radius:2px}
.docs-viewer .pdf-loading{display:flex;align-items:center;justify-content:center;height:100%;min-height:200px;color:var(--ink-mute);font-size:.85rem;padding:2rem;text-align:center}
.docs-viewer-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-mute);font-size:.85rem;padding:2rem;text-align:center;pointer-events:none}
.docs-prod{display:flex;align-items:center;gap:.6rem;text-align:left;padding:.6rem .7rem;border:1px solid transparent;border-radius:.6rem;background:transparent;cursor:pointer;transition:all .15s;width:100%}
.docs-prod:hover{background:#fff;border-color:rgba(125,92,23,.3)}
.docs-prod.active{background:rgba(125,92,23,.06);border-color:var(--indigo);box-shadow:0 1px 3px rgba(125,92,23,.12)}
.docs-reng{position:absolute;inset:0;overflow:auto;background:#fff;padding:1rem 1.2rem;display:none}
.docs-reng-head{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:.8rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.docs-reng-head svg{width:17px;height:17px;flex:none}
.docs-reng-tbl{width:100%;border-collapse:collapse;font-size:.8rem}
.docs-reng-tbl th{position:sticky;top:0;background:#FAFBFE;text-align:left;font-weight:700;color:var(--ink-mute);text-transform:uppercase;font-size:.62rem;letter-spacing:.04em;padding:.45rem .55rem;border-bottom:1px solid var(--g200)}
.docs-reng-tbl td{padding:.45rem .55rem;border-bottom:1px solid var(--g100);color:var(--ink);vertical-align:top}
.docs-reng-tbl tr:hover td{background:#FAFBFE}
.docs-reng-tbl .rg-num{font-family:var(--font-mono);white-space:nowrap}
.docs-sec + .docs-sec{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--g100)}
.docs-info-tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.docs-info-tbl th{text-align:left;font-weight:700;color:var(--ink-mute);text-transform:uppercase;font-size:.62rem;letter-spacing:.04em;padding:.4rem .7rem .4rem 0;border-bottom:1px solid var(--g100);white-space:nowrap;vertical-align:top;width:1%}
.docs-info-tbl td{padding:.4rem 0;border-bottom:1px solid var(--g100);color:var(--ink);vertical-align:top}
.docs-info-tbl tr:last-child th,.docs-info-tbl tr:last-child td{border-bottom:0}
.docs-info-tbl a{color:var(--indigo)}
.docs-req-list{margin:.2rem 0 0;padding-left:1.1rem;font-size:.82rem;color:var(--ink);line-height:1.7}
.docs-empty{padding:1.6rem .8rem;text-align:center;color:var(--ink-mute);font-size:.85rem}
.docs-aviso{display:flex;gap:.6rem;align-items:flex-start;padding:.7rem .8rem;margin-bottom:.6rem;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.35);border-radius:.7rem}
.docs-aviso-ic{flex:none;width:1.25rem;height:1.25rem;color:#B45309;margin-top:.05rem}
.docs-aviso-ic svg{width:100%;height:100%}
.docs-aviso-txt{display:flex;flex-direction:column;gap:.15rem;font-size:.8rem;line-height:1.35}
.docs-aviso-txt strong{color:#92400E;font-size:.82rem}
.docs-aviso-txt span{color:var(--ink-mute)}
.docs-foot{padding:.85rem 1.4rem;border-top:1px solid var(--g200);background:#FAFBFE;position:relative;display:flex;align-items:center;min-height:2.5rem}
.docs-portal{display:inline-flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--indigo)}
.docs-portal svg{width:15px;height:15px}
/* Compartir: pegado a la derecha del pie (el zoom vive centrado/absoluto, no pelea por el espacio). */
.docs-share{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;
  border:1px solid var(--g200);border-radius:.55rem;background:#fff;color:var(--ink);
  font-family:var(--font-body);font-size:.78rem;font-weight:700;cursor:pointer;transition:border-color .18s,color .18s,background .18s}
.docs-share svg{width:15px;height:15px}
.docs-share:hover{border-color:var(--indigo);color:var(--indigo)}
.docs-share.done{border-color:#10B981;color:#047857;background:rgba(16,185,129,.08)}
.docs-adj-btn .docs-item-ic{color:#047857}
.docs-cambios-btn .docs-item-ic{color:#B45309}
.docs-prop-btn .docs-item-ic{color:#6A4E13}

/* ─── Modal: adjudicación ─── */
.adj-card{background:linear-gradient(135deg,rgba(16,185,129,.08),rgba(125,92,23,.05));border:1px solid rgba(16,185,129,.3);border-radius:.7rem;padding:.9rem 1rem;margin-bottom:.9rem}
.adj-emp{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--ink)}
.adj-meta{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.35rem;font-size:.82rem;color:var(--ink-mute)}
.adj-docs{margin-top:1rem}
.adj-docs-h{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-mute);margin-bottom:.5rem}
.adj-doclink{display:flex;align-items:center;gap:.45rem;width:100%;text-align:left;padding:.5rem .6rem;border:1px solid var(--g200);border-radius:.5rem;background:#fff;cursor:pointer;font-size:.8rem;color:var(--ink);margin-bottom:.4rem;transition:all .15s}
.adj-doclink:hover{border-color:var(--indigo);color:var(--indigo)}
.adj-doclink svg{width:14px;height:14px;flex:none}
.adj-doclink .muted{color:var(--ink-mute)}

/* ─── Modal: proponentes + análisis de propuestas ─── */
.prop-n{display:inline-flex;align-items:center;justify-content:center;min-width:1.3rem;height:1.3rem;padding:0 .4rem;border-radius:999px;background:var(--indigo);color:#fff;font-size:.7rem;font-weight:700}
.prop-tbl-wrap{overflow-x:auto}
.prop-tbl{width:100%;border-collapse:collapse;font-size:.82rem}
.prop-tbl th{text-align:left;font-weight:700;color:var(--ink-mute);text-transform:uppercase;font-size:.62rem;letter-spacing:.04em;padding:.5rem .8rem .5rem 0;border-bottom:1px solid var(--g200);white-space:nowrap}
.prop-tbl th:nth-child(2){text-align:right}   /* Monto (era la 3ª cuando existía la columna RUC) */
.prop-tbl td{padding:.55rem .8rem .55rem 0;border-bottom:1px solid var(--g100);color:var(--ink);vertical-align:top}
.prop-tbl tr:last-child td{border-bottom:0}
.prop-emp{font-weight:600;min-width:11rem}
.prop-hora{white-space:nowrap;color:var(--ink-mute)}
.prop-monto{white-space:nowrap;font-weight:700;text-align:right}
.prop-verlink{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .55rem;border:1px solid var(--g200);border-radius:.5rem;background:#fff;color:var(--indigo);font-size:.75rem;font-weight:600;white-space:nowrap;transition:all .15s}
.prop-verlink:hover{border-color:var(--indigo);background:rgba(201,168,76,.06)}
.prop-verlink svg{width:13px;height:13px;flex:none}
.prop-badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .5rem;border-radius:999px;font-size:.68rem;font-weight:700;white-space:nowrap}
.prop-badge svg{width:12px;height:12px;flex:none}
.prop-part{background:rgba(201,168,76,.1);color:#6A4E13}
.prop-win{background:rgba(212,175,55,.2);color:#A77B06;font-weight:800}
.prop-row-win{background:rgba(212,175,55,.07)}
.prop-row-win .prop-emp{font-weight:700}
.prop-nota{margin-top:.7rem;font-size:.75rem;color:var(--ink-mute);line-height:1.4}
.prop-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap}
.prop-head-t{display:inline-flex;align-items:center;gap:.4rem}
.prob-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .8rem;border:0;border-radius:.6rem;background:var(--indigo);color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;transition:filter .15s}
.prob-btn:hover{filter:brightness(1.08)}
.prob-btn svg{width:14px;height:14px;flex:none}
.prob-btn-2{background:#fff;color:var(--indigo);border:1px solid var(--g200)}
.prob-lock{display:inline-flex;align-items:center;gap:.35rem;font-size:.73rem;font-weight:600;color:var(--ink-mute)}
.prob-lock svg{width:12px;height:12px;flex:none}
.prob-run{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:600;color:var(--indigo)}
.prob-run svg{width:14px;height:14px;animation:spin 1.1s linear infinite}
.prob-prog{width:100%;height:4px;border-radius:999px;background:var(--g200);overflow:hidden;margin:.2rem 0 .7rem}
.prob-prog-fill{height:100%;background:var(--indigo);border-radius:999px;transition:width .4s ease}
.prob-alerta{display:flex;align-items:flex-start;gap:.5rem;padding:.65rem .8rem;margin-bottom:.7rem;border:1px solid rgba(220,38,38,.25);background:rgba(220,38,38,.06);border-radius:.6rem;font-size:.78rem;color:#991B1B;line-height:1.45}
.prob-alerta svg{width:15px;height:15px;flex:none;margin-top:.05rem}
.prob-nota{margin-bottom:.7rem;font-size:.75rem;color:var(--ink-mute);line-height:1.4}
.prob-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .5rem;border:1px solid transparent;border-radius:.5rem;font-size:.75rem;font-weight:800;cursor:pointer;background:var(--g100);color:var(--ink)}
.prob-badge svg{width:11px;height:11px;flex:none;opacity:.6}
.prob-bien{background:rgba(22,163,74,.12);color:#15803D}
.prob-medio{background:rgba(217,119,6,.12);color:#B45309}
.prob-bajo{background:rgba(107,101,96,.12);color:#4A443E}
.prob-mal{background:rgba(220,38,38,.12);color:#B91C1C}
.prob-det-box{padding:.7rem .85rem;background:#FAFBFE;border:1px solid var(--g200);border-radius:.6rem;margin:.15rem 0 .4rem}
.prob-marcas{font-size:.76rem;color:var(--ink);margin-bottom:.35rem;display:flex;align-items:center;gap:.35rem}
.prob-marcas svg{width:12px;height:12px;flex:none;color:var(--indigo)}
.prob-scores{font-size:.72rem;color:var(--ink-mute);margin-bottom:.5rem}
.prob-razones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.4rem}
/* Con desglose, cada renglón es un bloque: se separan para que no se lean corridos. */
.prob-razones>li:has(.prob-hz-lista){padding-bottom:.4rem;border-bottom:1px solid var(--g100)}
.prob-razones>li:has(.prob-hz-lista):last-child{border-bottom:0;padding-bottom:0}
.prob-razones li{display:flex;align-items:flex-start;gap:.45rem;font-size:.78rem;line-height:1.4;flex-wrap:wrap}
.prob-vd{padding:.1rem .4rem;border-radius:.35rem;font-size:.66rem;font-weight:800;white-space:nowrap;flex:none}
.prob-vd-cumple{background:rgba(22,163,74,.12);color:#15803D}
.prob-vd-no_cumple{background:rgba(220,38,38,.12);color:#B91C1C}
.prob-vd-parcial{background:rgba(217,119,6,.12);color:#B45309}
.prob-vd-sin_info{background:var(--g100);color:var(--ink-mute)}
.prob-vd-precio{background:rgba(201,168,76,.1);color:#6A4E13}
.prob-reng{font-size:.68rem;font-weight:700;color:var(--ink-mute);flex:none}
.prob-txt{color:var(--ink);flex:1;min-width:10rem}
.prob-vd-documento{background:rgba(220,38,38,.12);color:#B91C1C}
/* Desglose del renglón por característica: TODO lo que no cumple, con su exigido vs ofertado. Los
   incumplimientos van abiertos; las características que cumplen, plegadas en un <details>. */
/* Sangrado + guía: el desglose se lee como parte de SU renglón, no como una lista suelta. */
.prob-razones>li>.prob-hz-lista{margin-left:.15rem;padding-left:.6rem;border-left:1px dashed var(--g200)}
.prob-hz-lista{list-style:none;margin:.35rem 0 .15rem;padding:0;display:flex;flex-direction:column;gap:.3rem;flex:1 1 100%}
.prob-hz{display:flex;flex-direction:column;gap:.2rem;padding:.35rem .5rem;border-radius:.4rem;background:var(--g50);border-left:2px solid var(--g200)}
.prob-hz-no_cumple{border-left-color:#B91C1C}
.prob-hz-parcial{border-left-color:#B45309}
.prob-hz-sin_info{border-left-color:var(--ink-mute)}
.prob-hz-cumple{border-left-color:#15803D}
.prob-hz-cab{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.prob-hz-car{font-weight:800;font-size:.74rem;color:var(--ink)}
.prob-hz-vs{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;font-size:.74rem;color:var(--ink)}
.prob-hz-vs svg{width:13px;height:13px;flex:none;color:var(--ink-mute)}
.prob-hz-ex,.prob-hz-of{display:inline-flex;align-items:baseline;gap:.25rem}
.prob-hz-vs i{font-style:normal;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-mute)}
.prob-hz-of{font-weight:700}
.prob-hz-no_cumple .prob-hz-of{color:#B91C1C}
.prob-hz-parcial .prob-hz-of{color:#B45309}
.prob-hz-nota{font-size:.7rem;color:var(--ink-mute);font-style:italic}
/* Marca discreta: ese veredicto salió de la aritmética (rangos, unidades, ±, dirección del mérito),
   no del criterio del modelo. Va tenue a propósito — informa, no compite con el veredicto. */
.prob-hz-calc{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-mute);border:1px solid var(--line);border-radius:999px;padding:.05rem .3rem;
  cursor:help;flex:none}
.prob-hz-ok summary{cursor:pointer;font-size:.72rem;font-weight:700;color:var(--ink-mute);padding:.2rem 0}
.prob-hz-ok summary:hover{color:var(--ink)}
.prob-hz-ok .prob-hz-lista{margin-top:.3rem}
/* Cuántos incumplimientos hay en total: el conteo por renglón dice 1 aunque falle por tres cosas. */
.prob-hz-cnt{font-size:.66rem;font-weight:800;color:#B91C1C;text-transform:none;letter-spacing:0}
/* Técnico con poca cobertura: se rotula "sin información suficiente" en vez de un número engañoso. */
.prob-cob-baja{color:#B45309;font-weight:700}
/* Banner de propuesta inadmisible (faltó un documento requerido no subsanable). */
.prob-inad{display:flex;align-items:flex-start;gap:.4rem;padding:.5rem .65rem;margin-bottom:.5rem;border:1px solid rgba(220,38,38,.3);background:rgba(220,38,38,.08);border-radius:.5rem;font-size:.74rem;font-weight:700;color:#991B1B;line-height:1.4}
.prob-inad svg{width:14px;height:14px;flex:none;margin-top:.05rem}
/* Lista de documentos requeridos que el oferente no presentó. */
.prob-docs{margin-bottom:.5rem;font-size:.75rem}
.prob-docs>b{display:flex;align-items:center;gap:.35rem;color:#B91C1C;margin-bottom:.3rem;font-size:.74rem}
.prob-docs>b svg{width:13px;height:13px;flex:none}
.prob-docs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.25rem}
.prob-docs li{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;color:var(--ink);line-height:1.35}
.prob-doc-tag{padding:.08rem .35rem;border-radius:.3rem;font-size:.64rem;font-weight:800;flex:none}
.prob-doc-no .prob-doc-tag{background:rgba(220,38,38,.14);color:#B91C1C}
.prob-doc-sub .prob-doc-tag{background:rgba(217,119,6,.14);color:#B45309}
/* Conteo de cumplimiento: en cuántos renglones cumple / parcial / sin info / no cumple. */
.prob-conteo{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.5rem}
.prob-cnt{padding:.12rem .45rem;border-radius:.35rem;font-size:.68rem;font-weight:800}
.prob-cnt-cumple{background:rgba(22,163,74,.12);color:#15803D}
.prob-cnt-parcial{background:rgba(217,119,6,.12);color:#B45309}
.prob-cnt-sin_info{background:var(--g100);color:var(--ink-mute)}
.prob-cnt-no_cumple{background:rgba(220,38,38,.12);color:#B91C1C}
/* Desglose: técnico / documentos / precio → score total. El % del oferente sale de aquí. */
.prob-breakdown{border:1px solid var(--g200);border-radius:.55rem;padding:.5rem .65rem;margin-bottom:.5rem;background:#fff}
.prob-bd-row{font-size:.76rem;color:var(--ink);line-height:1.5;padding:.12rem 0}
/* `ic()` no fija tamaño: sin esto el icono del aviso sale a tamaño completo y rompe la fila. */
.prob-bd-row svg{width:12px;height:12px;flex:none;vertical-align:-1px}
.prob-bd-total{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.35rem;padding-top:.35rem;border-top:1px dashed var(--g200);font-size:.8rem;color:var(--ink)}
.prob-bd-total b{font-size:.9rem}
.prob-bd-pct{font-weight:800;color:var(--indigo)}
.prob-razones-t{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-mute);margin:.3rem 0 .35rem}
/* Veredicto de adjudicación (acto ya adjudicado): verde = ganó bien, rojo = cuestionable. */
.prob-adj{display:flex;align-items:flex-start;gap:.4rem;padding:.5rem .65rem;margin-bottom:.5rem;border-radius:.5rem;font-size:.76rem;line-height:1.45}
.prob-adj svg{width:14px;height:14px;flex:none;margin-top:.05rem}
.prob-adj-ok{border:1px solid rgba(22,163,74,.3);background:rgba(22,163,74,.08);color:#15803D}
.prob-adj-mal{border:1px solid rgba(220,38,38,.3);background:rgba(220,38,38,.08);color:#991B1B}
/* Variante verde de la alerta superior (adjudicación correcta). */
.prob-alerta-ok{border-color:rgba(22,163,74,.25);background:rgba(22,163,74,.06);color:#15803D}
/* ─── Historial de cambios de una seguida (tab "Cambios") ───
   Timeline: un encabezado por día y una fila por cambio. La hora va en columna fija a la izquierda
   para que las filas se lean alineadas aunque varios cambios compartan el mismo instante. */
.cambios-list{display:flex;flex-direction:column;gap:.4rem}
.cambio-dia{font-family:var(--font-head);font-weight:700;font-size:.78rem;color:var(--ink-mute);
  text-transform:capitalize;margin:var(--s3) 0 .1rem;padding-bottom:.3rem;border-bottom:1px solid var(--g100)}
.cambio-dia:first-child{margin-top:0}
.cambio-row{display:flex;align-items:center;gap:.6rem;padding:.6rem .85rem;border:1px solid var(--g200);
  border-radius:var(--r-md,.7rem);font-size:.85rem;color:var(--ink)}
.cambio-hora{flex:none;width:4.6rem;font-size:.72rem;font-weight:600;color:var(--ink-mute);font-variant-numeric:tabular-nums}
.cambio-txt{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;min-width:0;flex:1}
.cambio-txt>span:last-child{min-width:0;overflow-wrap:anywhere}
/* "Nuevo" = este usuario todavía no lo había visto. */
.cambio-nuevo{flex:none;background:var(--indigo);color:#fff;border-radius:var(--r-pill);
  padding:.05rem .4rem;font-size:.62rem;font-weight:800;letter-spacing:.02em;text-transform:uppercase}
.cambio-ver{flex:none;display:inline-flex;align-items:center;gap:.3rem;background:var(--g100);
  border:1px solid var(--g200);color:var(--indigo);border-radius:var(--r-pill);padding:.25rem .6rem;
  font-size:.75rem;font-weight:700;cursor:pointer;transition:background .15s var(--ease)}
.cambio-ver:hover{background:var(--indigo-soft)}
.cambio-ver svg{width:14px;height:14px;flex:none}
.cambios-pie{margin-top:var(--s3);font-size:.72rem;color:var(--ink-mute)}
/* Chip de tipo de documento — variante de la base `.badge` (el tono entra por --b-*). */
.badge-doc{font-size:.62rem;letter-spacing:.02em;text-transform:uppercase}
.badge-doc-ok{--b-bg:var(--ok-bg);--b-fg:var(--ok-fg);--b-bd:var(--ok-bd)}
.badge-doc-warn{--b-bg:var(--warn-bg);--b-fg:var(--warn-fg);--b-bd:var(--warn-bd)}
.badge-doc-danger{--b-bg:var(--danger-bg);--b-fg:var(--danger-fg);--b-bd:var(--danger-bd)}
.badge-doc-neutral{--b-bg:var(--neutral-bg);--b-fg:var(--neutral-fg);--b-bd:var(--neutral-bd)}
/* Teléfono: la hora pasa arriba como su propia línea, si no la fila queda sin ancho para el texto. */
@media (max-width:640px){
  .cambio-row{flex-wrap:wrap;gap:.4rem}
  .cambio-hora{width:auto}
  .cambio-ver{margin-left:auto}
}

/* ─── Registro de Proveedores (+ tablas que Mi Empresa reusa) ─── */
.reg-card{margin-top:var(--s4);padding:var(--s4) var(--s4) var(--s3)}
/* Cabecera de módulo: título + conteo. Misma en las 5 tarjetas de Registro y Mi Empresa. */
.reg-card-head{font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--ink);margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:.5rem}
.reg-count{background:var(--g100);color:var(--ink-mute);border-radius:var(--r-pill);padding:.1rem .5rem;font-size:.72rem;font-weight:700}
.reg-hint{font-weight:400;color:var(--ink-mute);font-size:.78rem}
.reg-msg{padding:var(--s5) 0;color:var(--ink-mute);font-size:.85rem;line-height:1.5;text-align:center}
.reg-err{color:#B91C1C}
.reg-ajuste{color:#B45309;padding:.5rem 0 0}
.reg-fallo{text-align:center}
.reg-fallo .reg-msg{padding-bottom:.4rem}
.reg-fallo .btn-go{margin-top:.9rem}
.reg-emp-list{display:flex;flex-direction:column;gap:.5rem}
.reg-emp{display:flex;flex-direction:column;gap:.25rem;text-align:left;padding:.7rem .85rem;border:1px solid var(--g200);border-radius:.7rem;background:#fff;cursor:pointer;transition:all .15s}
.reg-emp:hover{border-color:var(--indigo);background:rgba(201,168,76,.04)}
.reg-emp.on{border-color:var(--indigo);background:rgba(201,168,76,.08)}
.reg-emp-nom{font-weight:700;font-size:.88rem;color:var(--ink)}
.reg-emp-meta{display:flex;flex-wrap:wrap;gap:.75rem;font-size:.76rem;color:var(--ink-mute)}
.reg-emp-off{color:#B45309;font-weight:600}
/* Fila del HISTORIAL: tarjeta + × para quitarla. Solo el historial la usa; las candidatas de una
   búsqueda siguen siendo un .reg-emp suelto (ahí no hay nada que quitar). */
.reg-emp-row{display:flex;align-items:stretch;gap:.4rem}
.reg-emp-row .reg-emp{flex:1;min-width:0}
.reg-emp-x{flex:none;width:34px;border:1px solid var(--g200);border-radius:.7rem;background:#fff;color:var(--ink-mute);display:grid;place-items:center;cursor:pointer;opacity:0;transition:background .15s,border-color .15s,color .15s,opacity .15s}
.reg-emp-x svg{width:15px;height:15px}
.reg-emp-row:hover .reg-emp-x,.reg-emp-x:focus-visible{opacity:1}
.reg-emp-x:hover{color:#fff;background:#DC2626;border-color:#DC2626}
@media(hover:none){.reg-emp-x{opacity:1;min-width:44px}}   /* táctil: no hay hover, la × siempre visible */
.reg-anios{margin:0}
.reg-chip-cargando{opacity:.45;cursor:progress}
.reg-chip-cargando:hover{border-color:var(--g200)}
.reg-head{margin-top:1.2rem}
.reg-head-emp{font-size:1.15rem;font-weight:800;color:var(--ink)}
.reg-head-meta{font-size:.8rem;color:var(--ink-mute);margin-top:.15rem}
.reg-kpis{margin-top:.9rem}
.reg-sort-ico{display:inline-flex;vertical-align:-2px;margin-left:.2rem;opacity:.35}
.reg-sort-ico svg{width:11px;height:11px}
.reg-link{color:var(--indigo);text-decoration:none}
.reg-link:hover{text-decoration:underline}
.reg-dif{font-size:.72rem;font-weight:700;margin-left:.25rem}
.reg-dif-alto{color:#B91C1C}
.reg-dif-bajo{color:#047857}
.reg-causa{display:inline-flex;padding:.2rem .5rem;border-radius:999px;font-size:.68rem;font-weight:700;white-space:nowrap}
.reg-causa-precio{background:rgba(201,168,76,.1);color:#6A4E13}
.reg-causa-req{background:rgba(180,83,9,.12);color:#B45309}
.reg-nopub{color:var(--ink-mute);font-style:italic;font-weight:400}
.reg-motivo{display:flex;gap:.4rem;align-items:flex-start}
.reg-motivo svg{width:13px;height:13px;flex:none;margin-top:.15rem}

/* ─── Histórico de adjudicaciones: una tabla, tres pestañas (ver regHistTabla en app.js) ───
   Reusa la tarjeta de Seguimiento (.lic-card) en vez de una <table> de 10 columnas: el ancho lo
   manda el contenedor, no la suma de las celdas, así que no hay scroll horizontal que arrastrar.
   Solo dos columnas: lo que describe el acto, y el dato que define la pestaña. */
.reg-hist .lic-card,
.reg-hist .lic-head{grid-template-columns:minmax(0,1fr) 160px auto}

/* Panel "Resultado" del diálogo: el estudio que antes vivía en seis columnas de la tabla. */
.est-sec{max-width:42rem}
.est-head{font-family:var(--font-head);font-weight:700;font-size:1rem;color:var(--ink);margin-bottom:.9rem}
.est-row{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.5rem 1rem;padding:.5rem 0;border-bottom:1px solid var(--g100)}
.est-row:last-of-type{border-bottom:0}
.est-lbl{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute)}
.est-val{font-size:.88rem;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.est-motivo{margin-top:.9rem;font-size:.82rem;color:var(--ink-mute);line-height:1.5}
/* Los documentos llegan después que el estudio (ver regVerDocs): esto lo dice en vez de dejar la
   lista muda mientras el pliego viaja. */
.docs-bajando{padding:.7rem .9rem;font-size:.76rem;color:var(--ink-mute);font-style:italic}
.docs-bajando.err{color:#B91C1C;font-style:normal}
/* `wrap` explícito: la regla base de .lic-toolbar es `nowrap` (allá los filtros SIEMPRE caben en una
   línea). Acá compiten las pestañas, las chips de orden y el total, y sin wrap se aprietan. */
.reg-hist .lic-toolbar{justify-content:flex-start;flex-wrap:wrap;row-gap:.5rem;gap:.4rem .75rem;padding:.5rem 1.4rem}
.reg-hist-bar .modal-tabs{margin:0;padding:.22rem;gap:.2rem}
.reg-hist-bar .modal-tab{flex:none;padding:.35rem .7rem;font-size:.78rem;white-space:nowrap}
.reg-hist-bar .reg-hist-total{margin-left:auto}   /* el total se va al extremo, sin empujar nada */
.reg-hist-rows{padding-bottom:.2rem}
/* La etiqueta ("Monto ganado" / "Tu oferta" / "Estado") va DENTRO de la celda y no en una cabecera de
   columnas: ahí no cuesta alto, porque quien manda el alto de la fila es la columna izquierda
   (entidad + objeto + meta). La cabecera costaba 27px por tabla. Sale del data-lbl porque cambia
   con la pestaña. */
.reg-dato-cell{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:.15rem;text-align:right;min-width:0}
.reg-dato-cell::before{content:attr(data-lbl);font-family:var(--font-mono);font-size:.56rem;text-transform:uppercase;letter-spacing:.07em;color:var(--g500);line-height:1}
.reg-estado-txt{font-size:.8rem;font-weight:600;color:var(--ink-soft)}
.reg-hist-total{font-size:.72rem;font-weight:700;color:var(--ink-soft);white-space:nowrap}
/* Lo que antes eran seis columnas (ganador, su monto, diferencia, posición, causa): una línea. */
.reg-hist .lic-card{padding-top:.6rem;padding-bottom:.6rem}
.reg-hist .lic-obj{margin:.1rem 0}
/* ── Altura de fila FIJA ──
   "6 siempre caben" solo se sostiene si ninguna fila puede crecer con su contenido. Toda fila tiene
   las mismas tres líneas —entidad, objeto, meta— y cada una queda en UNA línea con ellipsis: un
   nombre de entidad largo o un objeto kilométrico recortan, no envuelven. Lo que se recorta está
   completo en el diálogo (tab "Resultado"), a un clic. */
.reg-hist .lic-meta{flex-wrap:nowrap;overflow:hidden}
.reg-hist .lic-meta>*{flex:none}
/* Chips de orden: mismo lenguaje que los de monto en Seguimiento (#lic-filter). */
.hist-sort{display:inline-flex;gap:.25rem;background:#F7F6F3;border:1px solid var(--g200);border-radius:.7rem;padding:.2rem;flex-wrap:wrap}
.hist-sort .chip{padding:.3rem .55rem;border:1px solid transparent;background:transparent;border-radius:.5rem;font-size:.72rem;font-weight:600;color:var(--ink-mute);box-shadow:none}
.hist-sort .chip:hover{color:var(--ink);background:rgba(15,23,42,.05)}
.hist-sort .chip.on{background:#fff;border-color:var(--g200);color:var(--ink);box-shadow:0 1px 2px rgba(16,14,11,.10)}
.hist-sort .chip.on .reg-sort-ico{opacity:1}

/* ─── Responsive de los módulos (venía en los mismos bloques inyectados) ─── */
@media(max-width:768px){
  .lic-head{display:none}   /* las tarjetas se apilan: una cabecera de columnas no aplica */
  .lic-card{grid-template-columns:1fr 1fr;align-items:center;gap:.7rem 1rem}
  .lic-main{grid-column:1/-1}
  .lic-ent{white-space:normal}
  .lic-estado-cell{align-items:flex-start;text-align:left}
  .lic-mon-cell,.compat-cell{align-items:flex-start}
  /* Sin cabecera de columnas, cada celda dice qué es (la tarjeta apilada la necesita) */
  .lic-estado-cell::before{content:"Estado"}
  .lic-mon-cell::before{content:"Monto"}
  .compat-cell::before{content:"Compatibilidad"}
  /* La regla base .reg-hist .lic-card le gana en especificidad a .lic-card: hay que repetirla aquí
     o la tarjeta del histórico no se apila en teléfono. La etiqueta cambia por pestaña, así que
     sale del data-lbl que pone _regCard en vez de estar quemada en el CSS. */
  .reg-hist .lic-card{grid-template-columns:1fr 1fr}
  .reg-dato-cell{align-items:flex-start;text-align:left}
  .reg-dato-cell::before{content:attr(data-lbl)}
  /* La barra pasa a columna (regla base de .lic-toolbar) y cada hijo tiene ~306px. Las tres píldoras
     pedían 385: se acorta la etiqueta larga y se les permite envolver — una segunda línea se lee,
     un scroll horizontal escondido no. */
  /* En teléfono la regla base de .lic-ent quita el ellipsis para que el nombre completo se lea. En
     estas filas eso deja una entidad larga ocupando 4 líneas y una tarjeta de 300px. Dos líneas es
     el equilibrio: se lee de qué entidad es, y la fila no se dispara. El nombre completo sigue en el
     `title` y en el diálogo. */
  .reg-hist .lic-ent,
  .reg-hist .lic-obj{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow:hidden}
  /* La regla base manda .lic-acts a una fila propia con borde punteado (en Seguimiento son DOS
     botones y lo merece). Acá es uno solo: se sienta al lado del dato y la tarjeta ahorra ~45px. */
  .reg-hist .lic-acts{grid-column:auto;justify-content:flex-end;align-items:center;border-top:0;padding-top:0}
  .hist-tab-larga{display:none}
  .reg-hist-bar .modal-tabs{flex-wrap:wrap;max-width:100%}
  .reg-hist-bar .hist-sort{max-width:100%;flex-wrap:wrap}
  .reg-hist-bar .reg-hist-total{margin-left:0}
  .lic-estado-cell::before,.lic-mon-cell::before,.compat-cell::before,.reg-dato-cell::before{
    font-family:var(--font-mono);font-size:.58rem;text-transform:uppercase;letter-spacing:.07em;color:var(--g500);line-height:1}
  .lic-acts{grid-column:1/-1;justify-content:flex-start;border-top:1px dashed var(--g200);padding-top:.6rem}
  #lic-rows{max-height:calc(100dvh - 348px)}   /* 300px + la fila de pestañas En proceso/Resueltas */
}
@media(max-width:640px){
  /* El modal de pliegos y las tablas del registro se resuelven en el bloque
     "MÓVIL — TABLAS Y MODAL DE PLIEGOS" del final del archivo (maestro-detalle + scroll real). */
  /* Los filtros se apilan: la regla base los fuerza a 1 línea (nowrap) y desbordarían */
  .lic-toolbar{flex-direction:column;align-items:stretch;gap:.55rem;flex-wrap:wrap}
  .lic-toolbar-group{width:100%;min-width:0;flex-wrap:wrap;gap:.4rem .5rem}
  #lic-filter,#res-filter{flex-wrap:wrap}
  .lic-ent-sel{max-width:none;width:100%}
  #lic-rows{max-height:calc(100dvh - 348px - var(--tabbar-space))}
}
@media(max-width:380px){
  .lic-card{grid-template-columns:1fr;gap:.5rem}
  .lic-estado-cell,.lic-mon-cell,.compat-cell{align-items:flex-start;text-align:left}
}

/* ══════════════════════════════════════════════════════════════════════════════════════
   MÓVIL — CONTENIDO DE LOS MÓDULOS (aditivo; desktop >1024px intacto)
   Va al FINAL del archivo a propósito: varias secciones nuevas (Mi Empresa, tablas del
   registro, modal de pliegos) se definen DESPUÉS del bloque "MOBILE+TABLET OVERHAUL", así
   que a igual especificidad le ganaban. Desde acá no.

   Contexto que explica la gravedad: #dashboard{overflow-x:hidden} → lo que desborda no
   scrollea, se RECORTA. Un popover mal anclado no se ve feo: desaparece.
   ══════════════════════════════════════════════════════════════════════════════════════ */
@media(max-width:640px){

  /* ── 1. Popovers anclados al borde derecho ──
     A ≤768 .dash-header pasa a column/flex-start → la campana deja de estar a la derecha y
     queda pegada al borde IZQUIERDO. Con `right:0` el popover de 320px se dibujaba hacia la
     izquierda (borde en x≈-246px) y overflow-x:hidden lo recortaba: el centro de
     notificaciones era INALCANZABLE (no se veía el título ni "Limpiar todas").
     Solución: en teléfono no se anclan al botón, se fijan al viewport. */
  .notif-pop,.um-pop{position:fixed;left:.8rem;right:.8rem;width:auto;max-width:none;z-index:130;
    top:auto;bottom:calc(var(--tabbar-space) + .8rem);
    max-height:calc(100dvh - var(--tabbar-space) - 6rem);overflow-y:auto}
  .notif-list{max-height:none}
  .notif-mark,.notif-mute{min-height:44px;display:inline-flex;align-items:center}
  .notif-mark[hidden],.notif-mute[hidden]{display:none}

  /* ── 2. Los desplegables quedaban DEBAJO de la barra inferior ──
     .ms-menu (z-index:30) y .tag-ac (z-index:40) contra .mobile-tabbar (z-index:120): si el
     campo estaba en la mitad baja de la pantalla, las últimas opciones eran intocables. */
  .ms-menu,.tag-ac{z-index:130;max-height:min(50vh,300px)}
  /* Target táctil: .ms-opt medía 36px → elegir una entidad con el dedo fallaba. */
  .ms-opt{min-height:44px;padding:.6rem .7rem}
  .tag-ac-item{min-height:44px;display:flex;align-items:center}

  /* ── 3. Formularios: .form-grid es 1fr 1fr SIN media query ──
     Aplasta Búsqueda, Registro de Proveedores, Perfil y el onboarding a columnas de ~123px:
     el <select> deja ~69px de texto ("NexAPI Panamá" no cabe) y el placeholder del monto se
     corta. .col-2 debe bajar a span 1 o deja huecos. */
  .form-grid{grid-template-columns:1fr}
  .col-2{grid-column:span 1}

  /* ── 4. Respiro horizontal: paddings de escritorio sobre 360px de pantalla ── */
  #search-loading{padding:1.5rem 1.1rem}
  .loading-pct-text{font-size:3.2rem}
  .pct-sign{font-size:1.6rem}
  .set-card{padding:1.15rem}
  .form-card{padding:1.15rem}

  /* Los toasts se montaban encima de la barra inferior (bottom:1.1rem). */
  .nt-wrap{left:.7rem;right:.7rem;max-width:none;bottom:calc(var(--tabbar-space) + 1.1rem)}

  /* Paginador: con muchas páginas desbordaba y overflow-x:hidden lo recortaba. */
  .nx-pager{overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}

  /* Cerrar el modal de pliegos medía 34px → bajo el mínimo táctil. */
  .docs-close{width:44px;height:44px}
}

/* ─────────── Control de zoom del visor de pliegos (todas las pantallas) ───────────
   Sin esto el PDF solo se podía "leer" a fit-width; en teléfono eso son ~5px de texto. */
.pdf-zoom{display:inline-flex;align-items:center;gap:.15rem;margin-left:auto;background:#fff;border:1px solid var(--g200);border-radius:2rem;padding:.15rem}
.pdf-zoom-btn{width:32px;height:32px;border:0;background:none;border-radius:50%;color:var(--ink-soft);font-size:1.05rem;font-weight:700;line-height:1;cursor:pointer}
.pdf-zoom-btn:hover{background:var(--mist);color:var(--ink)}
.pdf-zoom-val{min-width:52px;height:32px;border:0;background:none;border-radius:1rem;color:var(--ink-soft);font-family:var(--font-mono);font-size:.72rem;font-weight:600;cursor:pointer}
.pdf-zoom-val:hover{background:var(--mist);color:var(--ink)}
.pdf-zoom.zoomed .pdf-zoom-val{color:var(--indigo)}
/* Con zoom la página excede el ancho del visor → hay que poder arrastrarla en horizontal.
   El .pdf-doc solo tenía overflow-y. */
.docs-viewer .pdf-doc.pdf-zoomed{overflow-x:auto;text-align:left}
.docs-viewer .pdf-doc.pdf-zoomed .pdf-page{max-width:none}

/* Envoltorio de scroll para tablas anchas dentro del modal (renglones / oferta).
   .docs-reng-tbl es width:100% y NO tenía wrapper: en vez de scrollear, colapsaba y partía
   la columna "Descripción" carácter por carácter. */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* La vuelta atrás del maestro-detalle solo existe en teléfono (regla base ANTES de su @media:
   a igual especificidad gana la última del archivo). */
.docs-back{display:none}

/* ══════════════════ MÓVIL — TABLAS Y MODAL DE PLIEGOS ══════════════════ */
@media(max-width:640px){
  /* 2. Proponentes: tiene wrapper con scroll pero sin min-width → se comprimía igual.
        Además vive dentro de .docs-reng{overflow:auto} → doble scroll horizontal anidado;
        se anula el del padre para que el gesto caiga siempre en la tabla. */
  .prop-tbl{min-width:40rem}
  .prop-tbl-wrap,.tbl-scroll{-webkit-overflow-scrolling:touch}
  .docs-reng{overflow-x:hidden;padding:.85rem .8rem}
  .docs-reng-tbl{min-width:32rem}
  .prob-txt{min-width:0;flex:1 1 100%}
  /* Exige → Ofertó no cabe en una línea de teléfono: se apila y la flecha apunta hacia abajo. */
  .prob-hz-vs{flex-direction:column;align-items:flex-start;gap:.15rem}
  .prob-hz-vs svg{transform:rotate(90deg);margin-left:.15rem}

  /* 3. Info general: th con width:1% + nowrap fijaba la etiqueta al ancho de la más larga
        ("Término de entrega") y dejaba ~150px al valor; un correo largo desbordaba y se recortaba. */
  .docs-info-tbl,.docs-info-tbl tbody,.docs-info-tbl tr,.docs-info-tbl th,.docs-info-tbl td{display:block;width:auto}
  .docs-info-tbl th{white-space:normal;border-bottom:0;padding:.5rem 0 .1rem}
  .docs-info-tbl td{padding:0 0 .5rem;border-bottom:1px solid var(--g100)}
  .docs-info-tbl td,.docs-info-tbl a{overflow-wrap:anywhere}

  /* 4. Pie del modal: .docs-newtab era position:absolute centrado DENTRO del pie (su bloque
        contenedor es .docs-foot, no el visor), y la regla ≤640 lo centraba justo encima de
        .docs-portal — tapaba "Abrir en Panamá Compra", la única salida cuando el PDF no se lee. */
  .docs-foot{position:static;flex-wrap:wrap;gap:.5rem;padding:.7rem .8rem calc(.7rem + env(safe-area-inset-bottom))}
  .docs-newtab{position:static;transform:none;left:auto;top:auto;order:3;width:100%;justify-content:center;min-height:44px}
  .docs-portal{order:1}
  .pdf-zoom{order:2;margin-left:auto}
  .docs-share{order:4;width:100%;justify-content:center;min-height:44px;margin-left:0}

  /* 5. El modal ocupa la pantalla: .docs-overlay{padding:1.5rem} se comía 48px de 360. */
  .docs-overlay{padding:0}
  .docs-modal{width:100%;max-width:none;max-height:100dvh;height:100dvh;border-radius:0}
  .docs-head{padding:.9rem 1rem}

  /* 6. Maestro-detalle: la lista ocupaba 34vh SIEMPRE (aun después de elegir) y solo mostraba
        ~5 items → con un pliego de 8-10 documentos, "Proponentes" y "Cambios" quedaban
        enterrados. Ahora la lista es la pantalla completa y al elegir se pasa al visor. */
  .docs-content{grid-template-columns:1fr;position:relative}
  .docs-list{max-height:none;height:100%;border-right:0;border-bottom:0;overflow-y:auto}
  .docs-item,.docs-prod{min-height:52px}
  .docs-modal.docs-detail .docs-list{display:none}
  .docs-modal:not(.docs-detail) .docs-viewer{display:none}
  .docs-modal:not(.docs-detail) .docs-foot .docs-newtab,
  .docs-modal:not(.docs-detail) .pdf-zoom{display:none!important}
  .docs-back{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;padding:.3rem .6rem .3rem .3rem;
    border:0;background:none;color:var(--indigo);font-family:var(--font-body);font-size:.82rem;font-weight:700;cursor:pointer}
  .docs-back[hidden]{display:none}   /* el atributo hidden lo apaga; sin esto la clase le ganaba */
  .docs-back svg{width:18px;height:18px;flex:none}
  .docs-viewer{min-height:0}
  .docs-viewer .pdf-doc{min-height:0}
}



/* Motor + portales en la MISMA fila. El nombre del motor es corto ("NexAPI Panamá"), así que no
   necesita todo el ancho: cediendo un poco, los portales entran al lado con el mismo peso visual en
   vez de flotar encima del selector. El desplegable reusa el lenguaje del multiselect de entidades
   (mismo check, misma sombra, mismo radio) para que el formulario se lea de una pieza. */
.motor-row{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:.5rem;
  align-items:stretch}
.pt-wrap{position:relative}
.pt-btn{width:100%;height:100%;display:flex;align-items:center;gap:.4rem;padding:.7rem .8rem;
  border:1px solid var(--g200);border-radius:.7rem;background:#fff;color:var(--ink);
  font-family:var(--font-body);font-size:.9rem;cursor:pointer;text-align:left;
  transition:border-color .2s,box-shadow .2s,color .2s}
.pt-btn:hover{border-color:var(--g300)}
.pt-btn.abierto{border-color:var(--indigo);box-shadow:0 0 0 3px rgba(125,92,23,.1)}
.pt-btn.filtrado{color:var(--indigo);border-color:var(--indigo)}
.pt-btn > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-btn svg{width:14px;height:14px;flex:none;color:var(--indigo)}
.pt-btn svg:last-child{opacity:.85;transition:transform .18s}
.pt-btn.abierto svg:last-child{transform:rotate(180deg)}
.pt-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:min(280px,78vw);
  background:#fff;border:1px solid var(--g200);border-radius:.7rem;
  box-shadow:0 24px 55px rgba(16,14,11,.2);z-index:30;padding:.35rem}
.pt-opt{padding:.5rem .6rem;font-size:.82rem;color:var(--ink);cursor:pointer;display:flex;
  align-items:center;gap:.55rem;border-radius:.5rem;transition:background .12s}
.pt-opt:hover{background:#F7F6F3}
.pt-opt.sel{color:var(--indigo);font-weight:600}
.pt-opt .ms-ck svg{width:11px;height:11px}
.pt-opt.sel .ms-ck{background:var(--indigo);border-color:var(--indigo);color:#fff}
/* En teléfono el motor manda: los portales pasan abajo, a lo ancho, en vez de estrujarse. */
@media (max-width:640px){
  .motor-row{grid-template-columns:1fr}
  .pt-menu{left:0;right:auto;min-width:100%}
}