/* ==========================================================================
   CampaStock · Sistema de diseño único
   Fuente de verdad de color, tipografía, espaciado, radios, sombras y
   componentes compartidos (botones, chips, paneles, formularios, tablas,
   estados). Lo usan TODAS las pantallas: landing, acceso, registro, soporte,
   demo y la plataforma interna. No dupliques tokens en otras hojas.
   ========================================================================== */

/* ---------- 1. Tipografía autoalojada (sin CDN) ---------- */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-Regular.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-Medium.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-SemiBold.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-Bold.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/inter-ExtraBold.woff2') format('woff2')}
@font-face{font-family:Inter;font-style:normal;font-weight:900;font-display:swap;src:url('/fonts/inter-Black.woff2') format('woff2')}

/* ---------- 2. Tokens ---------- */
:root{
  /* marca */
  --cs-ink-900:#0e1412;
  --cs-ink-800:#141b18;
  --cs-ink-700:#1b2320;
  --cs-ink-600:#28322d;
  --cs-ink-500:#3a4540;
  --cs-ink-400:#5c6862;
  --cs-ink-300:#8b958f;

  --cs-brass-600:#8f5804;
  --cs-brass-500:#b0700c;
  --cs-brass-400:#d8931a;
  --cs-brass-300:#e8a83a;
  --cs-brass-200:#f4c979;
  --cs-brass-100:#fbeccd;
  --cs-brass-50:#fdf6e6;

  --cs-canvas:#f2eee4;
  --cs-canvas-2:#e9e3d5;
  --cs-surface:#fffdf8;
  --cs-surface-2:#f8f4ea;
  --cs-surface-3:#f2eee3;
  --cs-border:#e2dbca;
  --cs-border-strong:#cfc6b1;

  /* semánticos */
  --cs-ok:#2c7a52;      --cs-ok-bg:#e5f2ea;   --cs-ok-line:#bcdcc8;
  --cs-info:#33628d;    --cs-info-bg:#e7f0f7; --cs-info-line:#c4daea;
  --cs-warn:#8c5a0d;    --cs-warn-bg:#fbedd0; --cs-warn-line:#ecd6a3;
  --cs-danger:#a83f31;  --cs-danger-bg:#f9e8e5;--cs-danger-line:#e7c2ba;
  --cs-demand:#6c4189;  --cs-demand-bg:#f1e9f6;--cs-demand-line:#ddcbe8;
  --cs-wa:#1f9d55;      --cs-wa-bg:#e4f5ea;

  /* tipografía */
  --cs-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --cs-font-display:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --fs-3xs:.6875rem;  /* 11 */
  --fs-2xs:.75rem;    /* 12 */
  --fs-xs:.8125rem;   /* 13 */
  --fs-sm:.875rem;    /* 14 */
  --fs-md:1rem;       /* 16 */
  --fs-lg:1.125rem;   /* 18 */
  --fs-xl:1.375rem;   /* 22 */
  --fs-2xl:1.75rem;   /* 28 */
  --fs-3xl:2.25rem;   /* 36 */
  --fs-display:clamp(2.1rem,5.2vw,3.5rem);
  --fs-display-sm:clamp(1.65rem,4vw,2.5rem);
  --lh-tight:1.1;
  --lh-snug:1.3;
  --lh-base:1.55;
  --tr-tight:-.03em;
  --tr-eyebrow:.14em;

  /* espaciado */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:40px; --sp-9:56px; --sp-10:72px;

  /* radios */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* sombras */
  --sh-xs:0 1px 2px rgba(28,24,16,.06);
  --sh-sm:0 4px 14px rgba(28,24,16,.06);
  --sh-md:0 10px 28px rgba(28,24,16,.08);
  --sh-lg:0 22px 56px rgba(20,17,10,.14);
  --sh-dark:0 26px 64px rgba(0,0,0,.42);

  /* foco accesible (único en todo el producto) */
  --focus-ring:0 0 0 3px var(--cs-surface),0 0 0 6px rgba(176,112,12,.55);
  --focus-ring-dark:0 0 0 3px var(--cs-ink-800),0 0 0 6px var(--cs-brass-300);

  --cs-motion:.18s cubic-bezier(.2,.7,.3,1);

  /* ---- alias heredados (una sola definición para todas las hojas) ---- */
  --ink:var(--cs-ink-800);
  --ink-2:var(--cs-ink-900);
  --ink-3:var(--cs-ink-600);
  --graphite:var(--cs-ink-800);
  --graphite-2:var(--cs-ink-600);
  --muted:var(--cs-ink-400);
  --cream:var(--cs-canvas);
  --paper:var(--cs-surface);
  --amber:var(--cs-brass-300);
  --amber-dark:var(--cs-brass-500);
  --amber-deep:var(--cs-brass-500);
  --line:var(--cs-border);
  --green:var(--cs-ok);
  --green-bg:var(--cs-ok-bg);
  --blue:var(--cs-info);
  --blue-bg:var(--cs-info-bg);
  --red:var(--cs-danger);
  --red-bg:var(--cs-danger-bg);
  --wa:var(--cs-wa);
  --wa-bg:#e6e0d5;
  --shadow:var(--sh-md);
  --radius:var(--r-lg);
}

/* ---------- 3. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cs-canvas);
  color:var(--cs-ink-800);
  font-family:var(--cs-font);
  font-size:var(--fs-md);
  line-height:var(--lh-base);
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
@supports not (overflow:clip){body{overflow-x:hidden}}
img{max-width:100%;display:block}
[hidden]{display:none!important}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button,a{touch-action:manipulation}
h1,h2,h3,h4{margin:0 0 var(--sp-2);font-family:var(--cs-font-display);letter-spacing:var(--tr-tight);line-height:var(--lh-tight);text-wrap:balance}
h1{font-size:var(--fs-2xl);font-weight:800}
h2{font-size:var(--fs-xl);font-weight:800}
h3{font-size:var(--fs-lg);font-weight:700;letter-spacing:-.02em}
h4{font-size:var(--fs-md);font-weight:700;letter-spacing:-.01em}
p{margin:0 0 var(--sp-3)}
p:last-child{margin-bottom:0}
ul,ol{margin:0;padding:0;list-style:none}
table{border-collapse:collapse}
::selection{background:var(--cs-brass-200);color:var(--cs-ink-900)}

/* foco visible, mismo lenguaje en todo el producto */
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-sm)}
.on-dark :focus-visible,.sidebar :focus-visible,.topbar :focus-visible,
.page-head :focus-visible,.foot :focus-visible{box-shadow:var(--focus-ring-dark)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ---------- 4. Tipografía de apoyo ---------- */
.eyebrow{
  display:block;margin:0 0 var(--sp-2);
  font-size:var(--fs-3xs);font-weight:800;line-height:1.3;
  letter-spacing:var(--tr-eyebrow);text-transform:uppercase;
  color:var(--cs-brass-500);
}
.eyebrow.light{color:var(--cs-brass-200)}
.eyebrow.dark{color:var(--cs-brass-500)}
.helper-text{margin:0;color:var(--cs-ink-400);font-size:var(--fs-xs);line-height:var(--lh-base)}
.lead,.sub{color:var(--cs-ink-400);font-size:var(--fs-lg);line-height:var(--lh-base);max-width:62ch}
.rule{height:4px;width:52px;border-radius:2px;background:var(--cs-brass-300);margin-bottom:var(--sp-5)}

/* ---------- 5. Botones (una sola familia) ---------- */
.btn,.primary-action,.light-action,.ghost,.save,.cancel,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:44px;padding:0 var(--sp-5);
  border:1px solid transparent;border-radius:var(--r-md);
  font-family:var(--cs-font);font-size:var(--fs-sm);font-weight:800;letter-spacing:-.005em;
  text-decoration:none;text-align:center;white-space:nowrap;
  transition:background var(--cs-motion),border-color var(--cs-motion),color var(--cs-motion),box-shadow var(--cs-motion),transform var(--cs-motion);
}
.btn{min-height:50px;padding:0 var(--sp-6);font-size:var(--fs-md);border-radius:var(--r-md)}

.btn.primary,.primary-action,.save,.button{
  background:linear-gradient(180deg,var(--cs-brass-300),var(--cs-brass-400));
  color:#1c1710;border-color:var(--cs-brass-400);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,var(--sh-sm);
}
.btn.primary:hover,.primary-action:hover,.save:hover,.button:hover{background:linear-gradient(180deg,#f2bc55,#dd9a1f);border-color:var(--cs-brass-500)}
.btn.primary:active,.primary-action:active,.save:active,.button:active{transform:translateY(1px)}

.ghost,.cancel,.button.secondary{background:var(--cs-surface);color:var(--cs-ink-700);border-color:var(--cs-border-strong)}
.ghost:hover,.cancel:hover,.button.secondary:hover{background:var(--cs-surface-2);border-color:var(--cs-ink-300)}

.light-action{background:#fff;color:var(--cs-ink-800);border-color:rgba(255,255,255,.6);box-shadow:var(--sh-sm)}
.light-action:hover{background:#f4f1e9}

.btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.btn.ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}
.btn.demo{background:rgba(232,168,58,.14);color:#fff;border-color:var(--cs-brass-300)}
.btn.demo:hover{background:rgba(232,168,58,.26)}
.btn.outline{background:var(--cs-surface);color:var(--cs-ink-800);border-color:var(--cs-ink-700)}
.btn.outline:hover{background:var(--cs-surface-2)}
.btn.quiet{background:transparent;color:var(--cs-ink-700);border-color:var(--cs-border-strong)}
.btn.quiet:hover{background:var(--cs-surface-2);border-color:var(--cs-ink-300)}
.btn.sm{min-height:40px;padding:0 var(--sp-4);font-size:var(--fs-sm)}
.small{min-height:36px;padding:0 var(--sp-3);font-size:var(--fs-2xs);border-radius:var(--r-sm)}
.btn.block,.block{width:100%}
.danger-action{color:var(--cs-danger)!important}
button:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed;transform:none}
button:disabled:hover{transform:none}

/* ---------- 6. Chips de estado (único estilo compartido) ---------- */
.status-chip,.badge,.chip-destino,.chip-approval,.channel-kind,.connection-pill,.vision-estado,.plan-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:26px;padding:3px 10px;border:1px solid transparent;border-radius:var(--r-pill);
  font-size:var(--fs-3xs);font-weight:800;line-height:1.25;letter-spacing:.01em;white-space:nowrap;
  background:var(--cs-surface-3);color:var(--cs-ink-400);border-color:var(--cs-border);
}
.status-chip::before,.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;opacity:.85}
.status-chip.ok,.badge.ok,.chip-approval.ok,.channel-kind.feed,.connection-pill.connected,.vision-estado.bueno{background:var(--cs-ok-bg);color:var(--cs-ok);border-color:var(--cs-ok-line)}
.status-chip.review,.badge.rev,.chip-approval.pending,.connection-pill.pending,.channel-kind.assisted,.vision-estado.danado{background:var(--cs-warn-bg);color:var(--cs-warn);border-color:var(--cs-warn-line)}
.status-chip.reserved,.badge.res{background:var(--cs-info-bg);color:var(--cs-info);border-color:var(--cs-info-line)}
.status-chip.sold,.channel-kind.api,.connection-pill.disconnected{background:var(--cs-surface-3);color:var(--cs-ink-400);border-color:var(--cs-border-strong)}
.status-chip.none,.connection-pill.error,.vision-estado.roto,.vision-estado.inservible,.vision-estado.ausente{background:var(--cs-danger-bg);color:var(--cs-danger);border-color:var(--cs-danger-line)}
.connection-pill.included,.plan-badge{background:var(--cs-brass-50);color:var(--cs-brass-600);border-color:var(--cs-warn-line)}
.plan-badge{min-height:32px;padding:5px 14px;font-size:var(--fs-2xs)}
.plan-badge::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cs-brass-400);flex:none}
.plan-badge.dark{background:rgba(232,168,58,.14);color:var(--cs-brass-200);border-color:#6f5a2f}

/* ---------- 7. Panel / tarjeta ---------- */
.panel{
  background:var(--cs-surface);border:1px solid var(--cs-border);
  border-radius:var(--r-lg);padding:var(--sp-6);box-shadow:var(--sh-sm);
}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-4);margin-bottom:var(--sp-5)}
.panel-head.compact{margin-bottom:var(--sp-4)}
.panel-head>div{min-width:0}
.panel-head .eyebrow{margin-bottom:3px}
.panel-head h3{margin:0}

/* ---------- 8. Formularios ---------- */
.form-field,.stock-search label,.form-grid label,.piece-edit-form label,
.compat-form label,.photo-upload-form label,.auth-form label,.entry-form label,
.settings-form label,.invite-form label,.feed-url{display:grid;gap:6px}
.stock-search label>span,.form-grid label>span,.piece-edit-form label>span,
.compat-form label>span,.photo-upload-form label>span,.auth-form label>span,
.entry-form label>span,.settings-form label span,.invite-form label span,.feed-url>span{
  display:block;margin:0;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.01em;color:var(--cs-ink-500);
}
.stock-search input,.stock-search select,.form-grid input,.form-grid textarea,.form-grid select,
.piece-edit-form input,.piece-edit-form textarea,.piece-edit-form select,
.compat-form input,.compat-form select,.photo-upload-form input,
.auth-form input,.entry-form input,.settings-form input,.invite-form input,
.feed-url input,.request-status,.panel select,.field{
  width:100%;min-height:46px;padding:11px 13px;
  border:1px solid var(--cs-border-strong);border-radius:var(--r-md);
  background:#fff;color:var(--cs-ink-800);font-size:var(--fs-sm);
  transition:border-color var(--cs-motion),box-shadow var(--cs-motion);
}
textarea{resize:vertical;line-height:var(--lh-base)}
input::placeholder,textarea::placeholder{color:#a5a99f}
.stock-search input:focus-visible,.stock-search select:focus-visible,.form-grid input:focus-visible,
.form-grid textarea:focus-visible,.form-grid select:focus-visible,.piece-edit-form input:focus-visible,
.piece-edit-form textarea:focus-visible,.piece-edit-form select:focus-visible,.compat-form input:focus-visible,
.compat-form select:focus-visible,.auth-form input:focus-visible,.entry-form input:focus-visible,
.settings-form input:focus-visible,.invite-form input:focus-visible,.panel select:focus-visible{
  border-color:var(--cs-brass-500);box-shadow:var(--focus-ring)
}
.checkline{display:flex!important;align-items:center;gap:var(--sp-2);min-height:46px;white-space:nowrap;font-size:var(--fs-sm);font-weight:600}
.checkline input{width:19px!important;height:19px;min-height:19px!important;accent-color:var(--cs-brass-500)}
.wide,.full{grid-column:1/-1}

/* ---------- 9. Estados: carga, vacío, error ---------- */
.empty-state,.empty-stock,.chat-empty-thread,.dashboard-skeleton{
  margin:0;padding:var(--sp-7) var(--sp-4);
  color:var(--cs-ink-400);font-size:var(--fs-sm);line-height:var(--lh-base);text-align:center;
}
.empty-stock{grid-column:1/-1}
.empty-state>span,.empty-stock>span{
  display:grid;place-items:center;margin:0 auto var(--sp-3);
  width:44px;height:44px;border-radius:var(--r-md);
  background:var(--cs-brass-50);color:var(--cs-brass-500);font-size:1.15rem;font-weight:800;
  border:1px solid var(--cs-warn-line);
}
.is-loading,.dashboard-skeleton{position:relative}
.skeleton-bar{display:block;height:12px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--cs-surface-3),var(--cs-canvas-2),var(--cs-surface-3));background-size:200% 100%;animation:ppShimmer 1.2s linear infinite}
@keyframes ppShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
.form-error,.auth-message,.error-note{
  margin:0;padding:12px 14px;border:1px solid var(--cs-danger-line);border-radius:var(--r-md);
  background:var(--cs-danger-bg);color:var(--cs-danger);font-size:var(--fs-sm);font-weight:700;line-height:1.45;
}
.notice-warn{padding:12px 14px;border:1px solid var(--cs-warn-line);border-radius:var(--r-md);background:var(--cs-brass-50);color:var(--cs-brass-600);font-size:var(--fs-xs);line-height:var(--lh-base)}

/* ---------- 10. Tabla base compartida ---------- */
.cs-table{width:100%;font-size:var(--fs-sm)}
.cs-table th{
  text-align:left;padding:0 10px 10px;border-bottom:1px solid var(--cs-border);
  font-size:var(--fs-3xs);font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--cs-ink-400);
}
.cs-table td{padding:12px 10px;border-bottom:1px solid var(--cs-surface-3)}
.cs-table tbody tr:hover{background:var(--cs-surface-2)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}

/* ---------- 10bis. Iconos (SVG en línea, sin librerías) ---------- */
.ic{width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-lg{width:22px;height:22px}

/* ---------- 11. Utilidades ---------- */
.inline-actions{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-4)}
.stack-2{display:grid;gap:var(--sp-2)}
.stack-4{display:grid;gap:var(--sp-4)}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 12. Foco visible (al final: gana a cualquier componente) ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:none;box-shadow:var(--focus-ring);
}
.sidebar a:focus-visible,.sidebar button:focus-visible,
.page-head a:focus-visible,.page-head button:focus-visible,
.topbar a:focus-visible,.topbar button:focus-visible,
.hero a:focus-visible,.piloto a:focus-visible,.foot a:focus-visible,
.entry-offer a:focus-visible,.site-header a:focus-visible,
.chat-head button:focus-visible,.demo-ribbon a:focus-visible{
  box-shadow:var(--focus-ring-dark);
}