/* ChileSST · componentes compartidos (prefijo cs-). Independientes de la landing:
   pensados para importarse también en el dashboard y la comunidad.
   Ver DESIGN-SYSTEM.md para la correspondencia con las clases actuales del portal. */

/* Eyebrow / etiqueta de sección */
.cs-eyebrow{display:inline-flex;align-items:center;gap:8px;font:var(--cs-eyebrow);letter-spacing:var(--cs-eyebrow-track);text-transform:uppercase;color:var(--cs-blue-600)}
.cs-on-dark .cs-eyebrow,.cs-eyebrow.on-dark{color:var(--cs-cyan-300)}

/* Botones */
.cs-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:12px 24px;border-radius:var(--cs-r-pill);border:2px solid transparent;font:700 15px/1.2 var(--cs-font);white-space:nowrap;cursor:pointer;overflow:hidden;text-decoration:none;transition:transform var(--cs-fast),box-shadow var(--cs-fast),background var(--cs-fast),color var(--cs-fast),border-color var(--cs-fast)}
.cs-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--cs-ease)}
.cs-btn:hover svg{transform:translateX(3px)}
.cs-btn--primary{background:var(--cs-grad-btn);background-size:180% 100%;color:#fff;box-shadow:0 10px 24px -10px rgba(24,90,219,.7)}
.cs-btn--primary:hover{transform:translateY(-2px);background-position:100% 0;box-shadow:0 14px 30px -10px rgba(54,200,255,.65)}
.cs-btn--light{background:#fff;color:var(--cs-navy)}.cs-btn--light:hover{transform:translateY(-2px);box-shadow:0 10px 24px -10px rgba(0,0,0,.45)}
.cs-btn--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}.cs-btn--ghost:hover{background:rgba(255,255,255,.12);border-color:var(--cs-cyan-300);transform:translateY(-2px)}
.cs-btn--outline{border-color:var(--cs-ink);color:var(--cs-ink);background:transparent}.cs-btn--outline:hover{background:var(--cs-ink);color:#fff;transform:translateY(-2px)}
.cs-btn--lg{min-height:54px;padding:14px 30px;font-size:16px}
.cs-shine::before{content:'';position:absolute;inset:0 auto 0 -60%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:cs-shine 4.5s 1.5s infinite}
@keyframes cs-shine{0%{left:-60%}22%,100%{left:130%}}

/* Pills de estado (mismo vocabulario que el dashboard) */
.cs-state{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--cs-r-pill);font:800 11.5px/1.4 var(--cs-font);white-space:nowrap}
.cs-state::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.cs-state--live{background:#e5f7f1;color:var(--cs-teal-700)}
.cs-state--live::before{animation:cs-pulse 2.4s infinite}
.cs-state--soon{background:#fff4dd;color:var(--cs-amber-700)}
.cs-state--dev{background:#eef0ff;color:#4338a8}
.cs-state--verified{background:#e9f1fd;color:var(--cs-blue-600)}
.cs-state--new{background:#e3f6ff;color:#0b6f9e}
.cs-state--warn{background:#fdecea;color:var(--cs-red-700)}
.cs-on-dark .cs-state--live{background:rgba(45,187,173,.16);color:#7be3d4}
.cs-on-dark .cs-state--soon{background:rgba(242,179,61,.16);color:#ffd384}
.cs-on-dark .cs-state--dev{background:rgba(143,160,255,.16);color:#c4ccff}
.cs-on-dark .cs-state--verified,.cs-on-dark .cs-state--new{background:rgba(54,200,255,.14);color:var(--cs-cyan-300)}
@keyframes cs-pulse{0%{box-shadow:0 0 0 0 currentColor}70%{box-shadow:0 0 0 6px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* Tarjeta base + variante interactiva (foco de luz que sigue al puntero) */
.cs-card{position:relative;border-radius:var(--cs-r-lg);background:#fff;border:1px solid var(--cs-line);box-shadow:var(--cs-shadow-soft);transition:transform var(--cs-base) var(--cs-ease),box-shadow var(--cs-base),border-color var(--cs-base)}
.cs-card--dark{background:var(--cs-glass);border-color:var(--cs-glass-line);box-shadow:none;color:var(--cs-on-dark)}
.cs-spotlight{--mx:50%;--my:50%;isolation:isolate;overflow:hidden}
.cs-spotlight::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(54,200,255,.16),transparent 45%);transition:opacity .3s}
.cs-spotlight:hover::after{opacity:1}
.cs-lift:hover{transform:translateY(-6px);box-shadow:var(--cs-shadow-card)}
.cs-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .45s var(--cs-ease-out)}
/* Borde animado (degradado que recorre el contorno) */
.cs-glow-border{position:relative;isolation:isolate}
.cs-glow-border::before{content:'';position:absolute;inset:-1.5px;z-index:-1;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--cs-angle,0deg),rgba(54,200,255,0) 0deg,rgba(54,200,255,.9) 60deg,rgba(24,90,219,.9) 120deg,rgba(54,200,255,0) 200deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:cs-border 6s linear infinite}
@property --cs-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes cs-border{to{--cs-angle:360deg}}

/* Panel oscuro (glass) */
.cs-panel{border-radius:var(--cs-r-lg);background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid var(--cs-glass-line);backdrop-filter:blur(6px)}

/* Métrica */
.cs-metric{display:grid;gap:4px;padding:14px 16px;border-radius:var(--cs-r);background:#fff;border:1px solid var(--cs-line)}
.cs-metric dt{font:var(--cs-eyebrow);letter-spacing:.1em;text-transform:uppercase;color:var(--cs-muted)}
.cs-metric dd{margin:0;font:700 28px/1 var(--cs-display);color:var(--cs-ink);letter-spacing:-.03em}
.cs-metric small{font-size:12px;color:var(--cs-muted)}
.cs-metric .up{color:var(--cs-teal-700)}.cs-metric .down{color:var(--cs-red-700)}

/* Icono contenedor */
.cs-icon{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;flex:none;color:var(--cs-blue);background:linear-gradient(135deg,#e6f1ff,#dff7ff)}
.cs-icon svg{width:20px;height:20px}
.cs-on-dark .cs-icon{background:rgba(54,200,255,.12);color:var(--cs-cyan-300)}

/* Avatar con iniciales o foto */
.cs-avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;flex:none;background:var(--cs-grad-btn);color:#fff;font:700 13px var(--cs-display);object-fit:cover;box-shadow:0 0 0 2px #fff}
.cs-avatar--lg{width:64px;height:64px;font-size:20px}

/* Placa de nivel (= rep-plaque del dashboard) */
.cs-plaque{display:inline-flex;align-items:center;gap:6px;padding:2px 8px 2px 6px;border:1px solid #c9dcea;border-radius:6px;background:linear-gradient(180deg,#fbfdff,#eef5fb);color:#24496b;font:800 10.5px/1.6 var(--cs-font);white-space:nowrap}
.cs-plaque i{display:inline-block;width:5px;height:9px;border-radius:1.5px;background:var(--cs-blue-dash);margin-right:-4px}
.cs-plaque i.off{background:#d4e2ee}
.cs-plaque b{margin-left:6px;font-weight:800}
.cs-plaque--teal i:not(.off){background:var(--cs-teal)}

/* Insignia (= rep-badge del dashboard) */
.cs-insignia{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;flex:none;color:#fff;box-shadow:inset 0 0 0 1px #ffffff55,0 1px 3px #12365830}
.cs-insignia svg{width:14px;height:14px}
.cs-insignia--bronce{background:linear-gradient(145deg,#c98a56,#8f5326)}
.cs-insignia--plata{background:linear-gradient(145deg,#a9b8c6,#647789)}
.cs-insignia--oro{background:linear-gradient(145deg,#e7c25a,#b07f12)}

/* Voto «Útil» (= rep-vote) */
.cs-vote{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 11px;border:1px solid #c9dcea;border-radius:var(--cs-r-pill);background:#fff;color:#24496b;font:800 12px var(--cs-font)}
.cs-vote b{color:var(--cs-ink)}.cs-vote.on{background:var(--cs-blue-dash);border-color:var(--cs-blue-dash);color:#fff}.cs-vote.on b{color:#fff}

/* Cinta / ticker continuo */
.cs-ticker{position:relative;display:flex;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.cs-ticker-track{display:flex;flex:none;gap:12px;margin:0;padding:0 12px 0 0;list-style:none;animation:cs-ticker var(--cs-ticker-speed,60s) linear infinite}
.cs-ticker--reverse .cs-ticker-track{animation-direction:reverse}
.cs-ticker:hover .cs-ticker-track,.cs-ticker:focus-within .cs-ticker-track{animation-play-state:paused}
@keyframes cs-ticker{to{transform:translateX(-100%)}}

/* Barra de progreso (= rep-bar) */
.cs-progress{-webkit-appearance:none;appearance:none;width:100%;height:8px;border:0;border-radius:99px;background:#e2edf6;overflow:hidden}
.cs-progress::-webkit-progress-bar{background:#e2edf6;border-radius:99px}
.cs-progress::-webkit-progress-value{background:var(--cs-grad);border-radius:99px}
.cs-progress::-moz-progress-bar{background:var(--cs-grad);border-radius:99px}

@media (prefers-reduced-motion:reduce){
 .cs-shine::before,.cs-ticker-track,.cs-glow-border::before,.cs-state--live::before{animation:none!important}
 .cs-tilt{transform:none!important}
}

/* Ámbito claro dentro de una sección oscura (p. ej. la consola). */
.cs-on-dark .cs-light .cs-state--live{background:#e5f7f1;color:var(--cs-teal-700)}
.cs-on-dark .cs-light .cs-state--soon{background:#fff4dd;color:var(--cs-amber-700)}
.cs-on-dark .cs-light .cs-state--dev{background:#eef0ff;color:#4338a8}
.cs-on-dark .cs-light .cs-state--verified,.cs-on-dark .cs-light .cs-state--new{background:#e9f1fd;color:var(--cs-blue-600)}
.cs-on-dark .cs-light .cs-icon{color:var(--cs-blue);background:linear-gradient(135deg,#e6f1ff,#dff7ff)}
.cs-metric dd.cs-metric-note{font:400 12px/1.4 var(--cs-font);letter-spacing:0;color:var(--cs-muted)}
.console-kpis .cs-metric dd.cs-metric-note{font-size:11px}