:root {
    --primary: #003566; --green: #aec90c; --cyan: #18bac6;
    --deep: #01194c; --white: #ffffff;
    --gray-soft: #f0f4ff; --gray-mid: #8899bb;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body { font-family: 'Inter', sans-serif; background: var(--gray-soft); color: var(--primary); font-size: 15px; line-height: 1.5; }

  .sidebar { width: 240px; min-height: 100vh; background: var(--primary); position: fixed; top: 0; left: 0; z-index: 100; display: flex; flex-direction: column; transition: transform 0.25s ease; }

  /* Botón hamburguesa: solo existe visualmente en mobile/tablet (ver media query ≤1024px) */
  .menu-toggle-btn { display: none; width: 36px; height: 36px; border-radius: 9px; background: var(--gray-soft); border: 1px solid #d0daea; align-items: center; justify-content: center; cursor: pointer; color: var(--primary); flex-shrink: 0; }
  .menu-toggle-btn:hover { border-color: var(--primary); }

  /* Fondo oscuro detrás del drawer, solo visible cuando el sidebar está abierto en mobile */
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(1,25,76,0.55); z-index: 99; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; }
  .sidebar-backdrop.open { opacity: 1; pointer-events: auto; }
  .sidebar-logo { padding: 28px 24px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .logo-text { font-size: 22px; font-weight: 700; color: var(--white); letter-spacing: -0.5px; }
  .logo-dot { color: var(--green); }
  .logo-sub { font-size: 10px; color: var(--cyan); letter-spacing: 2px; text-transform: uppercase; font-weight: 500; margin-top: 2px; }

  .nav-section { padding: 12px 0; }
  .nav-label { font-size: 9px; color: rgba(255,255,255,0.35); letter-spacing: 2px; text-transform: uppercase; padding: 8px 24px 4px; font-weight: 600; }
  .nav-item { display: flex; align-items: center; gap: 12px; padding: 11px 24px; cursor: pointer; color: rgba(255,255,255,0.6); font-size: 14.5px; font-weight: 500; transition: all 0.15s; border-left: 3px solid transparent; }
  .nav-item:hover { color: var(--white); background: rgba(255,255,255,0.06); }
  .nav-item.active { color: var(--white); background: rgba(174,201,12,0.12); border-left-color: var(--green); }
  .nav-item svg { width: 16px; height: 16px; flex-shrink: 0; }
  .nav-badge { margin-left: auto; background: var(--green); color: var(--primary); font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 20px; }

  .sidebar-bottom { margin-top: auto; padding: 20px 16px; border-top: 1px solid rgba(255,255,255,0.08); }
  .upgrade-card { background: linear-gradient(135deg, var(--cyan) 0%, #0d8a94 100%); border-radius: 12px; padding: 16px; cursor: pointer; transition: transform 0.2s; }
  .upgrade-card:hover { transform: translateY(-2px); }

  .main { margin-left: 240px; min-height: 100vh; }
  .topbar { background: var(--white); border-bottom: 1px solid #e4eaf5; padding: 0 32px; height: 64px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 50; }
  .page-title { font-size: 20px; font-weight: 700; color: var(--primary); letter-spacing: -0.01em; }
  .site-selector { display: flex; align-items: center; gap: 8px; background: var(--gray-soft); border: 1px solid #d0daea; padding: 7px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; color: var(--primary); }
  .topbar-right { display: flex; align-items: center; gap: 12px; }
  .notif-btn { width: 36px; height: 36px; border-radius: 9px; background: var(--gray-soft); border: 1px solid #d0daea; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; }
  .notif-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; background: var(--green); border-radius: 50%; border: 2px solid var(--white); }
  .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--deep); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--white); cursor: pointer; }
  .logout-btn { width: 36px; height: 36px; border-radius: 9px; background: var(--gray-soft); border: 1px solid #d0daea; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray-mid); transition: all 0.15s; }
  .logout-btn:hover { background: #ffe8e8; border-color: #ffb3ba; color: #cc2233; }
  .logout-btn svg { width: 16px; height: 16px; }

  /* AUTH SCREEN — pantalla completa, sin nada del dashboard detrás */
  .app-hidden { display: none !important; }
  .auth-screen { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; background: radial-gradient(1200px 700px at 15% 10%, #01305e 0%, transparent 60%), linear-gradient(135deg, var(--deep) 0%, var(--primary) 55%, #012a5e 100%); overflow-y: auto; padding: 24px; }
  .hidden { display: none !important; }
  .auth-screen.hidden { display: none; }
  .auth-brand { position: absolute; top: 32px; left: 40px; display: flex; flex-direction: column; }
  .auth-brand .logo-text { font-size: 22px; }
  .auth-card-wrap { width: 420px; max-width: 92vw; }
  .auth-card { background: var(--white); border-radius: 20px; padding: 40px 36px; box-shadow: 0 20px 60px rgba(0,10,30,0.4); }
  .auth-card.hidden { display: none; }
  .auth-lock { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--gray-mid); justify-content: center; margin-top: 18px; }
  .auth-lock svg { width: 13px; height: 13px; }

  .content { padding: 28px 32px; }
  .page { display: none; }
  .page.active { display: block; }

  /* CONNECT GOOGLE BANNER */
  .connect-banner { background: linear-gradient(135deg, #fff8e1, #fff3cd); border: 1.5px solid #ffd54f; border-radius: 16px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
  .connect-text { font-size: 14px; color: #7a5c00; font-weight: 600; }
  .connect-sub { font-size: 12px; color: #9a7a20; margin-top: 3px; }
  .google-btn { display: flex; align-items: center; gap: 10px; background: var(--white); border: 1.5px solid #ddd; border-radius: 10px; padding: 10px 18px; cursor: pointer; font-size: 13px; font-weight: 600; color: #333; font-family: 'Inter', sans-serif; transition: box-shadow 0.2s; }
  .google-btn:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

  /* HEALTH */
  .health-section { display: grid; grid-template-columns: 300px 1fr; gap: 20px; margin-bottom: 24px; }
  .health-card { background: linear-gradient(145deg, var(--primary) 0%, var(--deep) 100%); border-radius: 20px; padding: 28px 24px; position: relative; overflow: hidden; }
  .health-card::after { content: ''; position: absolute; top: -40px; right: -40px; width: 150px; height: 150px; background: rgba(24,186,198,0.1); border-radius: 50%; }
  .health-title { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; }
  .health-score-wrap { display: flex; align-items: flex-end; gap: 8px; margin: 16px 0 6px; }
  .health-score { font-size: 72px; font-weight: 700; color: var(--white); line-height: 1; font-family: 'DM Mono', monospace; }
  .health-score-max { font-size: 20px; color: rgba(255,255,255,0.4); margin-bottom: 10px; }
  .score-bar { height: 6px; background: rgba(255,255,255,0.12); border-radius: 10px; margin-top: 16px; overflow: hidden; }
  .score-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 10px; transition: width 1s ease; }
  .health-checks { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
  .check-row { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.75); }
  .check-icon { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 10px; font-weight: 700; }
  .check-ok { background: rgba(174,201,12,0.2); color: var(--green); }
  .check-warn { background: rgba(255,204,0,0.2); color: #ffcc00; }
  .check-bad { background: rgba(255,85,102,0.2); color: #ff5566; }

  /* METRICS */
  .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
  .metric-card { background: var(--white); border-radius: 14px; padding: 24px; border: 1px solid #e9edf5; transition: box-shadow 0.2s, border-color 0.2s; }
  .metric-card:hover { box-shadow: 0 2px 12px rgba(0,53,102,0.06); border-color: #d6dfef; }
  .metric-header { display: flex; align-items: flex-start; justify-content: space-between; }
  .metric-icon { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
  .metric-icon svg { width: 20px; height: 20px; }
  .metric-icon.cyan { background: rgba(24,186,198,0.12); color: var(--cyan); }
  .metric-icon.green { background: rgba(174,201,12,0.12); color: #7a9100; }
  .metric-icon.blue { background: rgba(0,53,102,0.1); color: var(--primary); }
  .metric-icon.orange { background: rgba(255,152,0,0.12); color: #e67e00; }
  .metric-delta { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; }
  .delta-up { background: rgba(174,201,12,0.12); color: #5a7000; }
  .delta-neutral { background: rgba(136,153,187,0.1); color: var(--gray-mid); }
  .metric-value { font-size: 34px; font-weight: 700; color: var(--primary); margin-top: 16px; font-family: 'DM Mono', monospace; letter-spacing: -0.01em; }
  .metric-label { font-size: 13.5px; color: var(--gray-mid); margin-top: 5px; font-weight: 500; }
  .metric-sub { font-size: 12.5px; color: var(--gray-mid); margin-top: 10px; padding-top: 10px; border-top: 1px solid #eef1f8; }

  /* CHARTS */
  .charts-grid { display: grid; grid-template-columns: 1fr 380px; gap: 20px; margin-bottom: 24px; }
  .chart-card { background: var(--white); border-radius: 14px; padding: 28px; border: 1px solid #e9edf5; }
  .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
  .card-title { font-size: 16.5px; font-weight: 700; color: var(--primary); letter-spacing: -0.01em; }
  .card-actions { display: flex; gap: 6px; }
  .tab-btn { font-size: 11px; padding: 5px 12px; border-radius: 8px; cursor: pointer; font-weight: 600; border: none; background: var(--gray-soft); color: var(--gray-mid); transition: all 0.15s; font-family: 'Inter', sans-serif; }
  .tab-btn.active { background: var(--primary); color: var(--white); }

  /* KEYWORDS TABLE */
  .keyword-card { background: var(--white); border-radius: 16px; padding: 24px; border: 1px solid #e4eaf5; margin-bottom: 24px; }
  .kw-table { width: 100%; border-collapse: collapse; }
  .kw-table th { text-align: left; font-size: 11px; color: var(--gray-mid); text-transform: uppercase; letter-spacing: 1px; font-weight: 600; padding: 0 12px 12px; border-bottom: 1px solid #e4eaf5; }
  .kw-table td { padding: 13px 12px; font-size: 13.5px; border-bottom: 1px solid #f0f4ff; }
  .kw-table tr:last-child td { border-bottom: none; }
  .kw-table tr:hover td { background: #fafcff; }
  .kw-keyword { font-weight: 600; color: var(--primary); }
  .kw-url { font-size: 11.5px; color: var(--cyan); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
  .pos-badge { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 32px; border-radius: 8px; font-size: 13px; font-weight: 700; font-family: 'DM Mono', monospace; }
  .pos-top3 { background: rgba(174,201,12,0.15); color: #5a7000; }
  .pos-top10 { background: rgba(24,186,198,0.12); color: #0d8a94; }
  .pos-top20 { background: rgba(0,53,102,0.08); color: var(--primary); }
  .pos-below { background: rgba(255,85,102,0.08); color: #cc2233; }
  .trend-up { color: var(--green); font-size: 12px; font-weight: 700; }
  .trend-down { color: #cc2233; font-size: 12px; font-weight: 700; }
  .trend-same { color: var(--gray-mid); font-size: 12px; }

  /* PREMIUM BANNER */
  .premium-banner { background: linear-gradient(135deg, var(--deep) 0%, #003080 60%, #004488 100%); border-radius: 20px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; position: relative; overflow: hidden; border: 1px solid rgba(24,186,198,0.2); }
  .premium-banner::before { content: ''; position: absolute; top: -60px; right: -60px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(174,201,12,0.15) 0%, transparent 70%); border-radius: 50%; }
  .premium-eyebrow { font-size: 10px; color: var(--cyan); text-transform: uppercase; letter-spacing: 2px; font-weight: 700; }
  .premium-title { font-size: 22px; font-weight: 700; color: var(--white); margin-top: 6px; }
  .premium-title span { color: var(--green); }
  .premium-sub { font-size: 13px; color: rgba(255,255,255,0.65); margin-top: 8px; max-width: 500px; line-height: 1.6; }
  .premium-price { font-size: 36px; font-weight: 700; color: var(--white); font-family: 'DM Mono', monospace; }
  .premium-price span { font-size: 14px; color: rgba(255,255,255,0.5); font-family: 'Inter', sans-serif; font-weight: 400; }
  .premium-btn { display: inline-block; background: var(--green); color: var(--primary); font-size: 13px; font-weight: 700; padding: 12px 28px; border-radius: 10px; cursor: pointer; margin-top: 14px; border: none; font-family: 'Inter', sans-serif; transition: transform 0.2s, box-shadow 0.2s; }
  .premium-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(174,201,12,0.4); }

  /* AUDIT — SEMrush style */
  .audit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; }
  .audit-card { background: var(--white); border-radius: 16px; padding: 24px; border: 1px solid #e4eaf5; }
  .audit-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f4ff; }
  .audit-item:last-child { border-bottom: none; }
  .audit-name { font-size: 13.5px; font-weight: 500; color: var(--primary); }
  .audit-detail { font-size: 11.5px; color: var(--gray-mid); margin-top: 2px; }
  .status-pill { font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 20px; }
  .pill-ok   { background: rgba(174,201,12,0.12); color: #5a7000; }
  .pill-warn { background: rgba(255,204,0,0.12);  color: #9a7000; }
  .pill-bad  { background: rgba(255,85,102,0.1);  color: #cc2233; }
  .pill-info { background: rgba(24,186,198,0.1);  color: #0d8a94; }

  /* AUDIT OVERVIEW GRID */
  .audit-overview { display: grid; grid-template-columns: 260px 1fr 1fr; gap: 20px; margin-bottom: 24px; }
  .audit-score-card { background: linear-gradient(145deg, var(--primary), var(--deep)); border-radius: 20px; padding: 28px 24px; color: white; position: relative; overflow: hidden; }
  .audit-score-card::after { content:''; position:absolute; top:-30px; right:-30px; width:120px; height:120px; background:rgba(24,186,198,0.12); border-radius:50%; }
  .audit-score-big { font-size: 68px; font-weight: 700; font-family: 'DM Mono', monospace; line-height: 1; }
  .audit-score-label { font-size: 11px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
  .audit-gauge { height: 6px; background: rgba(255,255,255,0.12); border-radius: 10px; margin: 14px 0 10px; overflow: hidden; }
  .audit-gauge-fill { height: 100%; border-radius: 10px; transition: width 1.2s ease; }
  .gauge-high   { background: linear-gradient(90deg, #aec90c, #7a9100); }
  .gauge-medium { background: linear-gradient(90deg, #ffcc00, #ff9900); }
  .gauge-low    { background: linear-gradient(90deg, #ff5566, #cc2233); }
  .audit-msg { font-size: 12px; color: rgba(255,255,255,0.6); line-height: 1.5; }

  /* PAGES STATUS CARD */
  .pages-status-card { background: var(--white); border-radius: 16px; padding: 24px; border: 1px solid #e4eaf5; }
  .pages-stat-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid #f0f4ff; }
  .pages-stat-row:last-child { border-bottom: none; }
  .pages-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .dot-ok   { background: #aec90c; }
  .dot-warn { background: #ffcc00; }
  .dot-bad  { background: #ff5566; }
  .dot-info { background: #18bac6; }
  .dot-gray { background: #8899bb; }
  .pages-stat-name { font-size: 13px; font-weight: 500; color: var(--primary); margin-left: 10px; flex: 1; }
  .pages-stat-count { font-size: 14px; font-weight: 700; font-family: 'DM Mono', monospace; color: var(--primary); }

  /* COUNTERS */
  .audit-counters-card { background: var(--white); border-radius: 16px; padding: 24px; border: 1px solid #e4eaf5; display: flex; flex-direction: column; justify-content: center; }
  .ctr-row { display: flex; gap: 20px; margin-bottom: 20px; }
  .ctr-box { flex: 1; border-radius: 12px; padding: 18px; text-align: center; }
  .ctr-box.error-box  { background: rgba(255,85,102,0.07); border: 1px solid rgba(255,85,102,0.2); }
  .ctr-box.warn-box   { background: rgba(255,204,0,0.07); border: 1px solid rgba(255,204,0,0.2); }
  .ctr-number { font-size: 36px; font-weight: 700; font-family: 'DM Mono', monospace; }
  .ctr-number.error-num { color: #cc2233; }
  .ctr-number.warn-num  { color: #9a7000; }
  .ctr-label  { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
  .ctr-label.error-lbl { color: #cc2233; }
  .ctr-label.warn-lbl  { color: #9a7000; }

  /* ISSUES TABLE — SEMrush style */
  .issues-section { background: var(--white); border-radius: 16px; padding: 24px; border: 1px solid #e4eaf5; margin-bottom: 24px; }
  .issues-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
  .issue-tab { font-size: 12px; font-weight: 600; padding: 7px 18px; border-radius: 8px; cursor: pointer; border: none; background: var(--gray-soft); color: var(--gray-mid); font-family: 'Inter', sans-serif; transition: all 0.15s; }
  .issue-tab.active-err  { background: rgba(255,85,102,0.1); color: #cc2233; }
  .issue-tab.active-warn { background: rgba(255,204,0,0.1); color: #9a7000; }

  .issue-row { border: 1px solid #e4eaf5; border-radius: 12px; margin-bottom: 10px; overflow: hidden; transition: box-shadow 0.15s; }
  .issue-row:hover { box-shadow: 0 4px 16px rgba(0,53,102,0.07); }
  .issue-row-header { display: flex; align-items: center; padding: 14px 18px; cursor: pointer; gap: 14px; }
  .issue-sev-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0; }
  .sev-error { background: rgba(255,85,102,0.1); color: #cc2233; }
  .sev-warn  { background: rgba(255,204,0,0.1);  color: #9a7000; }
  .issue-row-title { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--primary); }
  .issue-count-badge { background: var(--gray-soft); color: var(--primary); font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; white-space: nowrap; }
  .issue-count-badge.badge-err  { background: rgba(255,85,102,0.1); color: #cc2233; }
  .issue-count-badge.badge-warn { background: rgba(255,204,0,0.1);  color: #9a7000; }
  .issue-fix-link { font-size: 11px; font-weight: 600; color: var(--cyan); cursor: pointer; white-space: nowrap; }
  .issue-fix-link:hover { text-decoration: underline; }
  .issue-expand-arrow { font-size: 12px; color: var(--gray-mid); transition: transform 0.2s; }
  .issue-expand-arrow.open { transform: rotate(180deg); }

  .issue-detail-panel { display: none; padding: 0 18px 16px; border-top: 1px solid #f0f4ff; }
  .issue-detail-panel.open { display: block; }
  .issue-detail-text { font-size: 12.5px; color: var(--gray-mid); margin: 12px 0 8px; line-height: 1.6; }
  .issue-how-to { background: rgba(174,201,12,0.06); border-left: 3px solid var(--green); border-radius: 0 8px 8px 0; padding: 10px 14px; font-size: 12px; color: var(--primary); line-height: 1.6; margin: 8px 0 12px; }
  .issue-how-to strong { color: #5a7000; }
  .issue-urls-list { display: flex; flex-direction: column; gap: 4px; }
  .issue-url-item { font-size: 11.5px; color: var(--cyan); font-family: 'DM Mono', monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 4px 8px; background: #f8faff; border-radius: 6px; }

  /* CRAWL PROGRESS */
  .crawl-progress { background: var(--white); border-radius: 16px; padding: 28px; border: 1px solid #e4eaf5; text-align: center; }
  .crawl-spinner-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 16px; }
  .crawl-big-spinner { width: 40px; height: 40px; border: 3px solid rgba(0,53,102,0.1); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.8s linear infinite; }
  .crawl-title { font-size: 16px; font-weight: 700; color: var(--primary); }
  .crawl-sub { font-size: 13px; color: var(--gray-mid); margin-top: 6px; }
  .crawl-progress-bar { height: 4px; background: #e4eaf5; border-radius: 10px; margin: 16px 0; overflow: hidden; }
  .crawl-progress-fill { height: 100%; background: linear-gradient(90deg, var(--cyan), var(--green)); border-radius: 10px; animation: crawlPulse 1.5s ease-in-out infinite; }
  @keyframes crawlPulse { 0%,100%{width:20%} 50%{width:80%} }

  /* SPEED */
  .speed-metric { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
  .speed-name { font-size: 12.5px; color: var(--primary); font-weight: 500; min-width: 200px; }
  .speed-value { font-size: 14px; font-weight: 700; font-family: 'DM Mono', monospace; }
  .speed-good { color: #5a7000; } .speed-medium { color: #9a7000; } .speed-bad { color: #cc2233; }
  .speed-bar-wrap { flex: 1; margin: 0 12px; }
  .speed-bar { height: 5px; background: #e4eaf5; border-radius: 4px; overflow: hidden; }
  .speed-bar-fill { height: 100%; border-radius: 4px; }
  .fill-good { background: linear-gradient(90deg, var(--green), #8aad00); }
  .fill-medium { background: linear-gradient(90deg, #ffcc00, #ff9900); }
  .fill-bad { background: linear-gradient(90deg, #ff5566, #cc2233); }

  /* LOADING STATES */
  .skeleton { background: linear-gradient(90deg, #e4eaf5 25%, #f0f4ff 50%, #e4eaf5 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; }
  @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
  .loading-val { display: inline-block; width: 80px; height: 28px; }
  .loading-sm { display: inline-block; width: 60px; height: 14px; }
  .spinner { width: 20px; height: 20px; border: 2px solid rgba(0,53,102,0.15); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.7s linear infinite; display: inline-block; }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* MODAL */
  .modal-overlay { position: fixed; inset: 0; background: rgba(1,25,76,0.7); z-index: 1000; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
  .modal-overlay.hidden { display: none; }
  .modal { background: var(--white); border-radius: 20px; padding: 36px; width: 460px; max-width: 90vw; position: relative; }
  .modal-close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 8px; background: var(--gray-soft); border: none; cursor: pointer; font-size: 16px; color: var(--gray-mid); }
  .modal-title { font-size: 20px; font-weight: 700; color: var(--primary); }
  .modal-sub { font-size: 13px; color: var(--gray-mid); margin-top: 6px; }
  .form-group { margin-top: 18px; }
  .form-label { font-size: 12px; font-weight: 600; color: var(--primary); margin-bottom: 6px; display: block; }
  .form-input { width: 100%; padding: 10px 14px; border: 1.5px solid #d0daea; border-radius: 10px; font-size: 13.5px; font-family: 'Inter', sans-serif; color: var(--primary); outline: none; transition: border-color 0.15s; }
  .form-input:focus { border-color: var(--cyan); }
  .form-btn { width: 100%; margin-top: 22px; padding: 12px; background: var(--primary); color: var(--white); font-size: 14px; font-weight: 700; border: none; border-radius: 10px; cursor: pointer; font-family: 'Inter', sans-serif; transition: background 0.15s; }
  .form-btn:hover { background: var(--deep); }
  .form-link { font-size: 12px; color: var(--cyan); cursor: pointer; text-align: center; margin-top: 14px; }

  /* TOAST */
  #toast { position: fixed; bottom: 24px; right: 24px; background: var(--primary); color: var(--white); padding: 14px 22px; border-radius: 12px; font-size: 13px; font-weight: 600; transform: translateY(100px); opacity: 0; transition: all 0.4s; z-index: 9999; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 30px rgba(0,53,102,0.3); }

  @keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
  .metric-card { animation: fadeUp 0.4s ease both; }
  .metric-card:nth-child(1) { animation-delay: 0.05s; }
  .metric-card:nth-child(2) { animation-delay: 0.1s; }
  .metric-card:nth-child(3) { animation-delay: 0.15s; }
  .metric-card:nth-child(4) { animation-delay: 0.2s; }
  ::-webkit-scrollbar { width: 5px; }
  ::-webkit-scrollbar-thumb { background: #c0ccdd; border-radius: 10px; }

  /* Utilidades de grid reutilizables — reemplazan los grids que estaban
     escritos como estilo inline (esos no podían responder a los @media) */
  .grid-2    { display: grid; grid-template-columns: 1fr 1fr; }
  .grid-3    { display: grid; grid-template-columns: repeat(3,1fr); }
  .grid-4    { display: grid; grid-template-columns: repeat(4,1fr); }
  .grid-5    { display: grid; grid-template-columns: repeat(5,1fr); }
  .grid-wide { display: grid; grid-template-columns: 1.3fr 1fr; }

  /* Los <canvas> de Chart.js nunca deben poder empujar el ancho de la página */
  .chart-card canvas { max-width: 100%; }

  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════════════════════ */

  /* ≤1200px: columnas anchas pasan a 1 o 2 columnas */
  @media (max-width: 1200px) {
    .health-section, .charts-grid { grid-template-columns: 1fr; }
    .metrics-grid, .grid-4 { grid-template-columns: repeat(2,1fr); }
    .grid-5 { grid-template-columns: repeat(3,1fr); }
    .audit-grid { grid-template-columns: 1fr; }
    .audit-overview { grid-template-columns: 1fr; }
  }

  /* ≤1024px: el sidebar deja de empujar el contenido y se vuelve un drawer
     que se desliza sobre la pantalla, con el botón hamburguesa visible */
  @media (max-width: 1024px) {
    .sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0,0,0,0.25); }
    .sidebar.open { transform: translateX(0); }
    .sidebar-backdrop { display: block; }
    .main { margin-left: 0; }
    .menu-toggle-btn { display: flex; }
    .content { padding: 20px; }
  }

  /* ≤768px: topbar y tarjetas se apilan, tablas ganan scroll horizontal */
  @media (max-width: 768px) {
    .metrics-grid { grid-template-columns: 1fr; }
    .grid-2, .grid-wide, .grid-3 { grid-template-columns: 1fr; }
    .grid-4, .grid-5 { grid-template-columns: repeat(2,1fr); }
    .premium-banner { flex-direction: column; align-items: flex-start; gap: 20px; }
    .premium-banner > div:last-child { align-self: stretch; text-align: left; }

    .topbar { padding: 0 16px; height: auto; min-height: 60px; flex-wrap: wrap; gap: 10px; row-gap: 10px; }
    .topbar > div:first-child { flex: 1; min-width: 0; flex-wrap: wrap; row-gap: 10px; gap: 10px; }
    .page-title { font-size: 15px; }
    /* El selector de dominio es el elemento más ancho: en vez de competir por
       espacio con los íconos y encimarse, baja a su propia fila completa */
    .site-selector { order: 3; flex-basis: 100%; max-width: 100%; min-width: 0; }
    .site-selector span#currentSiteName { max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
    .topbar-right { gap: 8px; flex-wrap: wrap; row-gap: 8px; justify-content: flex-end; }
    #lastSyncLabel { display: none; }
    #exportPdfBtnLabel { display: none; }
    #exportPdfBtn { padding: 8px !important; }

    .content { padding: 16px; }
    .keyword-card, .chart-card, .audit-card, .pages-status-card, .audit-counters-card, .issues-section { padding: 16px; }
    .keyword-card { overflow-x: auto; }
    .kw-table { min-width: 620px; }
    .ctr-row { flex-direction: column; gap: 12px; }
    #siteMenu, #notifMenu { min-width: 0 !important; width: min(320px, 90vw) !important; right: 0; left: auto !important; }
  }

  /* ≤480px: teléfonos angostos */
  @media (max-width: 480px) {
    .grid-4, .grid-5 { grid-template-columns: 1fr; }
    .health-score { font-size: 52px; }
    .audit-score-big { font-size: 48px; }
    .metric-value { font-size: 22px; }
    .premium-title { font-size: 18px; }
    .premium-price { font-size: 28px; }
    .ctr-number { font-size: 28px; }
    .auth-card { padding: 28px 22px; }
    .modal { padding: 24px; }
    .site-selector span#currentSiteName { max-width: 55vw; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-backdrop { transition: none; }
  }
/* ═════ Rediseño: shell + Investigación KW ═════ */
/* Teguilog — rediseño sobrio (shell + Investigación KW). Cargar DESPUÉS de styles.css */
:root{
  --t-navy:#0a1f4d; --t-navy-2:#12306d; --t-blue:#1d6bff; --t-blue-h:#1558d6; --t-blue-soft:#e8f0ff;
  --t-bg:#f5f7fa; --t-surface:#fff; --t-line:#e3e8ef; --t-line-2:#eef1f5;
  --t-text:#1b2536; --t-muted:#667085; --t-green:#0b9a6d; --t-orange:#c2570c; --t-red:#c4321f; --t-amber:#a16207;
  --t-r:8px;
}
body{font-family:'Inter',system-ui,sans-serif;background:var(--t-bg);color:var(--t-text);font-size:14px}
/* sidebar */
.sidebar{width:220px;background:var(--t-navy)}
.main{margin-left:220px}
.sidebar-logo{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,.07)}
.logo-text{font-size:19px;font-weight:600}
.logo-sub{font-size:9px;letter-spacing:1.6px;color:rgba(255,255,255,.45)}
.nav-section{padding:8px 0}
.nav-label{font-size:10px;letter-spacing:1.2px;color:rgba(255,255,255,.4);padding:10px 20px 4px}
.nav-item{padding:8px 20px;font-size:13px;font-weight:400;gap:10px;color:rgba(255,255,255,.7);border-left:2px solid transparent}
.nav-item svg{width:15px;height:15px;stroke-width:1.6}
.nav-item:hover{background:rgba(255,255,255,.05)}
.nav-item.active{background:rgba(255,255,255,.09);border-left-color:#b6e82e;color:#fff;font-weight:500}
.nav-badge{background:rgba(255,255,255,.14);color:#fff;font-weight:500;font-size:10px;padding:1px 7px}
.sidebar-bottom{padding:12px}
.upgrade-card{background:transparent;border:1px solid rgba(255,255,255,.14);border-radius:var(--t-r);padding:8px 12px}
.upgrade-card:hover{transform:none;background:rgba(255,255,255,.05)}
.upgrade-card *{font-size:11px!important;font-weight:400!important;line-height:1.4!important;margin:0!important}
.upgrade-card :first-child{color:#8fb8ff!important;letter-spacing:.8px;font-weight:500!important}
.upgrade-card > :nth-child(n+3){display:none!important}
/* topbar */
.topbar{height:52px;padding:0 24px;border-bottom:1px solid var(--t-line)}
.page-title{font-size:16px;font-weight:600}
.site-selector{padding:5px 10px;border-radius:6px;background:#fff;border-color:var(--t-line);font-size:12.5px}
.site-selector svg{color:var(--t-muted)!important}
#exportPdfBtn{border:1px solid var(--t-line)!important;border-radius:6px!important;font-size:12.5px!important;font-weight:500!important;padding:6px 12px!important;color:var(--t-text)!important}
#lastSyncLabel{background:transparent!important;border:none!important;padding:0!important;font-size:12px!important;color:var(--t-muted)!important}
.content{padding:20px 24px}

/* ===== Investigación KW ===== */
#page-kwresearch > div:first-child{display:none}               /* título duplicado (ya está en la topbar) */
#page-kwresearch #kwrResults > :not(#kwrV2){display:none!important}
#page-kwresearch > div:nth-child(2){border-radius:var(--t-r)!important;border:1px solid var(--t-line)!important;box-shadow:none!important;padding:14px 16px!important;margin-bottom:16px!important}
#page-kwresearch > div:nth-child(2) > div{align-items:flex-end!important;gap:12px!important}
#page-kwresearch label{font-size:11px!important;font-weight:500!important;color:var(--t-muted)!important;text-transform:none!important;letter-spacing:0!important;margin-bottom:4px!important}
#page-kwresearch #kwrInput,#page-kwresearch #kwrCountry,#page-kwresearch #kwrLang{height:36px;padding:0 12px!important;border:1px solid #cfd6e0!important;border-radius:6px!important;font:400 13.5px 'Inter',sans-serif!important;color:var(--t-text)!important;background:#fff}
#page-kwresearch #kwrInput:focus,#page-kwresearch #kwrCountry:focus,#page-kwresearch #kwrLang:focus{border-color:var(--t-blue)!important;box-shadow:0 0 0 3px rgba(31,111,235,.12)}
#page-kwresearch #kwrBtn{height:36px;padding:0 20px!important;border-radius:6px!important;background:var(--t-blue)!important;font:600 13px 'Inter',sans-serif!important}
#page-kwresearch #kwrBtn:hover{background:var(--t-blue-h)!important}
#page-kwresearch #kwrLoading{border-radius:var(--t-r)!important;padding:40px!important}
#page-kwresearch #kwrLoading *{font-family:'Inter',sans-serif!important}

#kwrV2{font-family:'Inter',sans-serif;color:var(--t-text)}
.v2-panel{background:var(--t-surface);border:1px solid var(--t-line);border-radius:var(--t-r);margin-bottom:16px}
.v2-head{padding:16px 20px 0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.v2-eyebrow{font-size:11px;color:var(--t-muted);text-transform:uppercase;letter-spacing:.6px;font-weight:500}
.v2-kw{font-size:20px;font-weight:600;letter-spacing:-.01em;margin:2px 0 0}
.v2-badges{display:flex;gap:8px;align-items:center;margin-left:auto;font-size:12px;color:var(--t-muted)}
.v2-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px;background:#98a2b3}
.v2-dot.ok{background:var(--t-green)}
.v2-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:14px;border-top:1px solid var(--t-line-2)}
.v2-m{padding:14px 20px;border-right:1px solid var(--t-line-2);min-width:0}
.v2-m:last-child{border-right:none}
.v2-lbl{font-size:11.5px;color:var(--t-muted);margin-bottom:4px}
.v2-val{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2}
.v2-sub{font-size:12px;color:var(--t-muted);margin-top:3px;line-height:1.35}
.v2-bar{height:4px;background:var(--t-line-2);border-radius:2px;margin-top:8px;overflow:hidden}
.v2-bar i{display:block;height:100%;border-radius:2px}
.v2-txt-ok{color:var(--t-green)}.v2-txt-warn{color:var(--t-amber)}.v2-txt-hi{color:var(--t-orange)}.v2-txt-bad{color:var(--t-red)}
.v2-spark{display:block;margin-top:6px}
.v2-tabs{display:flex;gap:2px;padding:0 12px;border-bottom:1px solid var(--t-line)}
.v2-tab{background:none;border:none;border-bottom:2px solid transparent;padding:12px 10px;font:500 13px 'Inter',sans-serif;color:var(--t-muted);cursor:pointer;margin-bottom:-1px}
.v2-tab:hover{color:var(--t-text)}
.v2-tab.on{color:var(--t-blue);border-bottom-color:var(--t-blue)}
.v2-tab span{font-weight:400;margin-left:5px;font-size:12px;color:var(--t-muted)}
.v2-bar-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--t-line-2)}
.v2-bar-tools select{height:30px;border:1px solid #cfd6e0;border-radius:6px;padding:0 8px;font:400 12.5px 'Inter',sans-serif;background:#fff;color:var(--t-text)}
.v2-bar-tools label{font-size:12px;color:var(--t-muted);display:flex;align-items:center;gap:5px;cursor:pointer}
.v2-count{margin-left:auto;font-size:12px;color:var(--t-muted)}
.v2-scroll{overflow-x:auto}
table.v2-t{width:100%;border-collapse:collapse;font-size:13px}
.v2-t th{background:#fafbfc;text-align:left;font-size:11.5px;font-weight:500;color:var(--t-muted);padding:9px 16px;border-bottom:1px solid var(--t-line);white-space:nowrap;user-select:none}
.v2-t th.s{cursor:pointer}.v2-t th.s:hover{color:var(--t-text)}
.v2-t th.r,.v2-t td.r{text-align:right;font-variant-numeric:tabular-nums}
.v2-t td{padding:9px 16px;border-bottom:1px solid var(--t-line-2);white-space:nowrap}
.v2-t td.k{font-weight:500;color:var(--t-text);white-space:normal;min-width:200px}
.v2-t tbody tr:hover{background:#f7f9fc}
.v2-t tbody tr:last-child td{border-bottom:none}
.v2-kd{display:inline-flex;align-items:center;gap:7px;justify-content:flex-end}
.v2-kd i{width:8px;height:8px;border-radius:50%;display:inline-block}
.v2-tag{display:inline-block;font-size:11.5px;padding:1px 8px;border-radius:4px;border:1px solid var(--t-line);color:#475467;background:#f9fafb}
.v2-tag.commercial{background:#fdf6e3;border-color:#f1e2b0;color:#8a5a00}
.v2-tag.transactional{background:#eaf6f0;border-color:#bfe3d1;color:#0f6b4b}
.v2-tag.informational{background:#eaf1fd;border-color:#c9dcf8;color:#1a55b0}
.v2-tag.navigational{background:#f3eefb;border-color:#dccff2;color:#5b3c99}
.v2-btn{border:1px solid var(--t-line);background:#fff;border-radius:6px;font:500 12px 'Inter',sans-serif;padding:3px 10px;cursor:pointer;color:var(--t-text)}
.v2-btn:hover{border-color:#b8c2d0;background:#f7f9fc}
.v2-empty,.v2-err{padding:36px 20px;text-align:center;color:var(--t-muted);font-size:13px}
.v2-err{color:var(--t-red)}
@media (max-width:900px){
  .v2-metrics{grid-template-columns:repeat(2,1fr)}
  .v2-m:nth-child(2n){border-right:none}.v2-m:nth-child(n+3){border-top:1px solid var(--t-line-2)}
  .v2-badges{margin-left:0;width:100%}
  .main{margin-left:0}
}

/* ═════════ TEGUILOG — SISTEMA DE DISEÑO (capa global) ═════════
   Paleta: azul marino profundo + azul eléctrico (acción) + turquesa y lima (acentos de marca).
   Reglas: bordes de 1px, radios 8px, sin sombras ni degradados, color solo con significado. */
:root{
  --primary:#0a1f4d; --deep:#071638; --cyan:#12c2cc; --green:#a6d61c;
  --gray-soft:#f4f7fc; --gray-mid:#6b7a99;
  --t-blue:#1d6bff; --t-blue-h:#1558d6; --t-line:#e1e8f2; --t-bg:#f4f7fc;
}
.logo-text{color:#fff}
.logo-text .logo-dot,.logo-dot{color:var(--cyan)}
.logo-sub{color:var(--green)!important}
.nav-item.active{border-left-color:var(--green)}
.upgrade-card *{color:#fff}
.upgrade-card :first-child{color:var(--green)!important}

/* tarjetas y paneles: planos, borde fino */
.metric-card,.chart-card,.keyword-card,.audit-card,.audit-overview,.audit-score-card,.pages-status-card,.issues-section,.card,.connect-banner,.modal{
  background:#fff!important;border:1px solid var(--t-line)!important;border-radius:8px!important;box-shadow:none!important}
.health-card,.premium-banner{background:#fff!important;color:var(--primary)!important;border:1px solid var(--t-line)!important;border-radius:8px!important;box-shadow:none!important}
.health-card *,.premium-banner *{text-shadow:none!important}
.health-card::before,.health-card::after,.premium-banner::before,.premium-banner::after{display:none!important}
.health-title,.health-score,.health-score-max,.premium-title,.premium-price{color:var(--primary)!important}
.premium-sub,.premium-eyebrow{color:var(--gray-mid)!important}
.premium-eyebrow{color:var(--cyan)!important}
.premium-btn,.form-btn,.google-btn+.form-btn{background:var(--t-blue)!important;color:#fff!important;border:none!important;border-radius:6px!important;box-shadow:none!important;font-weight:600}
.premium-btn:hover,.form-btn:hover{background:var(--t-blue-h)!important}
.card-title{font-size:14px;font-weight:600}
.card-header{padding-bottom:10px;margin-bottom:12px;border-bottom:1px solid var(--t-line)}

/* métricas: cifras sobrias, iconos monocromo sutil */
.metric-card{padding:16px!important}
.metric-icon,.metric-icon.cyan,.metric-icon.blue,.metric-icon.green,.metric-icon.orange,.metric-icon.red,.metric-icon.purple{background:#eef3ff!important;color:var(--t-blue)!important;border-radius:6px!important;width:30px!important;height:30px!important}
.metric-icon.cyan{background:#e3f8f9!important;color:#0a9aa4!important}
.metric-icon.green{background:#f1f9d6!important;color:#5f8a00!important}
.metric-value{font-family:'Inter',sans-serif!important;font-size:26px!important;font-weight:600!important;margin-top:10px!important;font-variant-numeric:tabular-nums}
.metric-label{font-size:12px;font-weight:500;color:var(--gray-mid)}
.delta-up,.trend-up{color:#0b9a6d}.trend-down{color:#d1361f}

/* tablas */
.kw-table{width:100%;border-collapse:collapse;font-size:13px}
.kw-table th{background:#fafbfd;font-size:11.5px;font-weight:500;color:var(--gray-mid);text-transform:none;letter-spacing:0;padding:9px 12px;border-bottom:1px solid var(--t-line)}
.kw-table td{padding:9px 12px;border-bottom:1px solid #eef2f8}
.kw-table tbody tr:hover{background:#f6f9ff}
.kw-keyword{font-weight:500}.kw-url{color:var(--gray-mid);font-size:12px}

/* píldoras y estados: una sola familia */
.pill-ok,.status-pill,.pos-top3,.pos-top10,.pill-warn,.pill-bad,.pill-info,.pos-top20,.pos-below,.pos-badge{border-radius:4px!important;font-size:11.5px!important;font-weight:500!important;padding:1px 8px!important}
.pill-ok,.pos-top3{background:#e4f6ee!important;color:#0b7a57!important}
.pill-warn,.pos-top20{background:#fff4dc!important;color:#9a6200!important}
.pill-bad,.pos-below{background:#fde9e6!important;color:#b4281a!important}
.pill-info,.pos-top10{background:#e8f0ff!important;color:#1558d6!important}
.fill-good,.speed-good,.speed-bar-fill{background:#0b9a6d}.fill-medium{background:#e5a100}.fill-bad{background:#d1361f}
.score-bar,.speed-bar,.speed-bar-wrap{height:4px;background:#eaf0f8;border-radius:2px}
.score-fill{background:var(--t-blue)!important}

/* pestañas y botones */
.tab-btn,.issue-tab{border-radius:6px!important;font-weight:500;font-size:12.5px}
.tab-btn.active,.issue-tab.active{background:var(--t-blue)!important;color:#fff!important}
.notif-btn,.menu-toggle-btn,.avatar,.logout-btn{border-radius:6px!important;box-shadow:none!important}
.avatar{background:var(--primary)!important;color:#fff!important;border-radius:50%!important;width:30px!important;height:30px!important;font-size:12px!important}
.notif-dot{background:var(--t-blue)}

/* formularios y modales */
.form-input{border:1px solid #cfd8e6!important;border-radius:6px!important;height:38px;font-family:'Inter',sans-serif!important}
.form-input:focus{border-color:var(--t-blue)!important;box-shadow:0 0 0 3px rgba(29,107,255,.14)!important;outline:none}
.form-label{font-size:12px!important;font-weight:500!important;text-transform:none!important;letter-spacing:0!important;color:var(--gray-mid)!important}
.google-btn{border:1px solid #cfd8e6!important;border-radius:6px!important;box-shadow:none!important}
.modal-overlay{background:rgba(10,31,77,.45)}
.modal{padding:24px!important}
.auth-screen{background:var(--t-bg)!important}
.auth-card{box-shadow:none!important;border:1px solid var(--t-line)!important;border-radius:10px!important;background:#fff!important}
.auth-brand .logo-text{color:var(--primary)}

/* auditoría / gauges */
.audit-gauge-fill,.gauge-high,.gauge-medium,.gauge-low{box-shadow:none}
.issue-row{border-bottom:1px solid #eef2f8}.sev-error{color:#d1361f}.sev-warn{color:#c27700}
.skeleton{background:linear-gradient(90deg,#eef2f8,#f6f8fc,#eef2f8)}
.spinner{border-color:#dbe5f5;border-top-color:var(--t-blue)}

/* investigación KW: acentos vivos */
.v2-tab.on{color:var(--t-blue);border-bottom-color:var(--t-blue)}
.v2-tag.commercial{background:#fff4dc;border-color:#f6dfa0;color:#8a5a00}
.v2-tag.informational{background:#e8f0ff;border-color:#c6d9ff;color:#1558d6}
.v2-tag.transactional{background:#e4f6ee;border-color:#b6e3cd;color:#0b7a57}
.v2-tag.navigational{background:#f1ebff;border-color:#d9cbff;color:#5b34b8}

/* Logo en pantallas de acceso (fondo claro) */
.auth-brand .logo-text,.auth-brand .logo-text *:not(.logo-dot){color:var(--primary)!important}
.auth-brand .logo-dot{color:var(--cyan)!important}

/* ── Corrección: tarjetas de puntaje (texto blanco sobre fondo marino sólido) ── */
.health-card,.audit-score-card{background:var(--primary)!important;color:#fff!important;border:none!important;border-radius:8px!important;box-shadow:none!important}
.health-card::after,.health-card::before,.audit-score-card::after,.audit-score-card::before{display:none!important;content:none!important}
.health-title{color:rgba(255,255,255,.6)!important}
.health-score,.audit-score-big{color:#fff!important;font-family:'Inter',sans-serif!important;font-variant-numeric:tabular-nums}
.health-score-max,.audit-score-label{color:rgba(255,255,255,.55)!important}
.health-card .score-bar,.audit-gauge{background:rgba(255,255,255,.16)!important}
.health-card .score-fill{background:var(--green)!important}

/* ── Contadores de errores/advertencias: planos, color solo en la cifra ── */
.ctr-box,.ctr-box.error-box,.ctr-box.warn-box{background:#fff!important;border:1px solid var(--t-line)!important;border-radius:8px!important;padding:14px!important}
.ctr-box.error-box{border-left:3px solid #d1361f!important}
.ctr-box.warn-box{border-left:3px solid #e5a100!important}
.ctr-number{font-family:'Inter',sans-serif!important;font-size:30px!important;font-weight:600!important}
.ctr-label{font-size:11px!important;letter-spacing:.8px!important;color:var(--gray-mid)!important;font-weight:500!important}
.issue-tab.active-err{background:#fff!important;color:#b4281a!important;box-shadow:inset 0 0 0 1px #f0b9b1}
.issue-tab.active-warn{background:#fff!important;color:#8a5a00!important;box-shadow:inset 0 0 0 1px #f2d98a}