/* ============================================================================
   WeRise Design System — hoja compartida (v1.1 · acento AZUL #1b64ff)
   Fuente: /root/werise-design-system.html. Vanilla CSS, sin frameworks.
   Reglas: radius 2px máx · sin box-shadows · animación solo opacity .15s.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;1,300&family=DM+Mono:wght@400;500&display=swap');

:root{
  --black:#0a0a0a; --white:#F6F4EF; --cream:#EDE9E0;
  --gold:#1b64ff; --gold-lt:#d0e0ff; --gold-dk:#1040cc;   /* acento AZUL (var legado) */
  --red:#B03A2E; --green:#1A6B3C; --blue:#1B3F7A; --gray:#6B6760; --border:#D8D3C8;
  --meta:#1877F2; --gads:#4285F4; --gsc:#34A853; --ga4:#E8710A;
  --nav-w:220px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body.wrs{font-family:'DM Sans',sans-serif;background:#F0EEE9;color:var(--black);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── LAYOUT: nav lateral 220px negro fijo + main ── */
.wrs-shell{min-height:100vh}
.wrs-nav{position:fixed;left:0;top:0;bottom:0;width:var(--nav-w);background:var(--black);color:#fff;padding:24px 18px;overflow-y:auto;z-index:100}
.wrs-nav-logo{padding-bottom:22px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.10)}
.wrs-nav-logo img{height:30px;width:auto;display:block}
.wrs-nav-group{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.2em;color:rgba(255,255,255,.30);text-transform:uppercase;margin:18px 0 8px}
.wrs-nav a{display:block;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.08em;color:rgba(255,255,255,.55);text-decoration:none;padding:7px 8px;text-transform:uppercase;transition:opacity .15s,color .15s}
.wrs-nav a:hover{color:#fff}
.wrs-nav a.active{color:var(--gold);border-left:2px solid var(--gold);padding-left:10px}
.wrs-main{margin-left:var(--nav-w)}

/* ── HERO / PORTADA negra ── */
.wrs-hero{background:var(--black);color:#fff;padding:72px 64px}
.wrs-hero-label{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--gold);text-transform:uppercase;margin-bottom:16px}
.wrs-hero h1{font-family:'Playfair Display',serif;font-size:clamp(38px,5.5vw,68px);font-weight:900;line-height:.96;letter-spacing:-.03em;margin-bottom:20px}
.wrs-hero h1 span{color:var(--gold)}
.wrs-hero-sub{font-size:16px;font-weight:300;color:rgba(255,255,255,.55);max-width:560px;line-height:1.6}

/* ── SECCIONES ── */
.wrs-section{background:var(--white);padding:56px 64px;border-bottom:1px solid var(--border)}
.wrs-label{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.25em;color:var(--gold);text-transform:uppercase;margin-bottom:12px}
.wrs-title{font-family:'Playfair Display',serif;font-size:clamp(26px,3.2vw,40px);font-weight:700;letter-spacing:-.01em;margin-bottom:36px}
.wrs-sub{font-size:15px;color:var(--gray);max-width:640px;margin-bottom:32px}

/* ── KPI CARDS (grid gap 1px sobre border, sin radius) ── */
.wrs-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border)}
.wrs-kpi{background:var(--white);padding:24px 22px}
.wrs-kpi-label{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.16em;color:var(--gray);text-transform:uppercase;margin-bottom:10px}
.wrs-kpi-value{font-family:'Playfair Display',serif;font-size:34px;font-weight:700;line-height:1;letter-spacing:-.02em;margin-bottom:6px}
.wrs-kpi-sub{font-size:12px;color:var(--gray)}

/* ── BADGES ── */
.wrs-badge{display:inline-block;padding:2px 8px;font-size:10px;font-weight:600;font-family:'DM Sans',sans-serif;border-radius:2px;margin-top:8px}
.wrs-badge.g{background:#E8F5EE;color:var(--green)} .wrs-badge.r{background:#FDECEA;color:var(--red)}
.wrs-badge.gold{background:#e8f0ff;color:var(--gold-dk)} .wrs-badge.b{background:#E8F0FE;color:var(--blue)}

/* ── INSIGHT CARDS (border-left 3px) ── */
.wrs-insight{padding:24px;border-left:3px solid}
.wrs-insight.pos{border-color:var(--green);background:#F5FBF7} .wrs-insight.alert{border-color:var(--red);background:#FDF5F5}
.wrs-insight.info{border-color:var(--gold);background:#e8f0ff} .wrs-insight.data{border-color:var(--blue);background:#F0F4FD}
.wrs-insight-title{font-weight:600;font-size:14px;margin-bottom:8px}
.wrs-insight-body{font-size:13px;color:var(--gray);line-height:1.65}

/* ── PILLS de plataforma (sobre negro) ── */
.wrs-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid rgba(0,0,0,.12);font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray)}
.wrs-pill-dot{width:6px;height:6px;border-radius:50%}

/* ── TABLAS ── */
.wrs-table{width:100%;border-collapse:collapse;font-size:13.5px}
.wrs-table thead th{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gray);padding:10px 14px;text-align:right;border-bottom:2px solid var(--black)}
.wrs-table thead th:first-child{text-align:left}
.wrs-table tbody td{padding:13px 14px;text-align:right;border-bottom:1px solid var(--border)}
.wrs-table tbody td:first-child{text-align:left;font-weight:500}
.wrs-table tbody tr.total td{background:var(--cream);font-weight:600;border-bottom:none}

/* ── BOTONES ── */
.wrs-btn{display:inline-flex;align-items:center;gap:8px;font-family:'DM Mono',monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:10px 18px;border:1px solid var(--gold);background:var(--gold);color:#fff;cursor:pointer;border-radius:2px;text-decoration:none;transition:opacity .15s}
.wrs-btn:hover{opacity:.85}
.wrs-btn.ghost{background:transparent;color:var(--gold)}

/* ── SEMÁFORO ── */
.wrs-sem{padding:20px;border:1px solid var(--border);position:relative}
.wrs-sem-dot{width:10px;height:10px;border-radius:50%;position:absolute;top:14px;right:14px}

/* ── FOOTER ── */
.wrs-footer{background:var(--white);border-top:1px solid var(--border);padding:24px 64px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:12px;color:var(--gray);font-family:'DM Mono',monospace;letter-spacing:.05em}
.wrs-footer img{height:22px;width:auto;opacity:.5;filter:invert(1)} /* logo blanco → oscuro sobre fondo claro */

@media(max-width:820px){
  .wrs-nav{position:static;width:auto;height:auto} .wrs-main{margin-left:0}
  .wrs-hero,.wrs-section,.wrs-footer{padding-left:24px;padding-right:24px}
  .wrs-kpis{grid-template-columns:repeat(2,1fr)}
}
@media print{ .wrs-nav{display:none} .wrs-main{margin-left:0} }