.skip-link{position:absolute;left:-999px;top:8px;background:var(--gold);color:#0c1b33;padding:10px 14px;border-radius:10px;font-weight:900;z-index:9999;text-decoration:none}.skip-link:focus{left:12px;outline:3px solid #fff;outline-offset:2px}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid rgba(201,163,78,.85);outline-offset:2px}

    :root{
      --bg:#0c1b33; --panel:#13284b; --panel2:#0a162b;
      --txt:#e9eef7; --muted:#a9b6cc; --gold:#c9a34e; --danger:#ff6b6b; --ok:#47d18c; --info:#7dc6ff;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius:16px;
    }
    *{box-sizing:border-box}
    body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(180deg,var(--bg),#071126);color:var(--txt)}
    a{color:inherit}
    .wrap{max-width:1100px;margin:0 auto;padding:16px}
    .hidden{display:none !important}
    .center{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
    .card{background:rgba(19,40,75,.92);border:1px solid rgba(201,163,78,.18);border-radius:var(--radius);box-shadow:var(--shadow)}
    .loginCard{width:min(560px,100%);padding:22px 22px 18px}
    .brandRow{display:flex;gap:14px;align-items:center;margin-bottom:10px}
    .logo{width:56px;height:56px;border-radius:14px;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px solid rgba(201,163,78,.25)}
    .logo img{width:46px;height:auto}
    h1{margin:0;font-size:20px;letter-spacing:.6px;color:var(--gold)}
    .tagline{margin:4px 0 0;color:var(--muted);font-weight:650;letter-spacing:.2px}
    .field{margin-top:14px}
    label{display:block;color:var(--muted);font-size:12px;margin-bottom:6px}
    input,textarea,select{
      width:100%;padding:12px 12px;border-radius:12px;border:1px solid rgba(233,238,247,.12);
      background:rgba(10,22,43,.85);color:var(--txt);outline:none
    }
    textarea{min-height:160px;resize:vertical;line-height:1.45}
    .btnRow{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
    button{
      padding:11px 14px;border-radius:12px;border:1px solid rgba(201,163,78,.35);
      background:linear-gradient(180deg,rgba(201,163,78,.95),rgba(201,163,78,.78));
      color:#0a0f18;font-weight:850;cursor:pointer
    }
    button.secondary{
      background:transparent;color:var(--txt);
      border:1px solid rgba(233,238,247,.16)
    }
    button.ghost{
      background:rgba(10,22,43,.5);
      border:1px solid rgba(233,238,247,.10);
      color:var(--txt);
      font-weight:750
    }
    button:active{transform:translateY(1px)}
    .appShell{min-height:100vh}
    .topbar{
      position:sticky;top:0;z-index:10;
      background:rgba(7,17,38,.82);backdrop-filter: blur(10px);
      border-bottom:1px solid rgba(233,238,247,.08)
    }
    .topbarInner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;max-width:1100px;margin:0 auto}
    .brandMini{display:flex;align-items:center;gap:10px}
    .brandMini .logo{width:38px;height:38px;border-radius:12px}
    .brandMini b{color:var(--gold);letter-spacing:.4px}
    .userPill{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:650;font-size:13px}
    .pill{padding:7px 10px;border-radius:999px;background:rgba(19,40,75,.6);border:1px solid rgba(233,238,247,.09)}
    .grid{display:grid;grid-template-columns:270px 1fr;gap:16px;align-items:start}
    @media (max-width: 920px){ .grid{grid-template-columns:1fr} }
    .nav{padding:14px}
    .nav h3{margin:4px 0 12px;color:var(--muted);font-size:12px;letter-spacing:.2px;text-transform:uppercase}
    .nav a{
      display:flex;gap:10px;align-items:center;
      padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--txt);
      border:1px solid transparent
    }
    .nav a.active{border-color:rgba(201,163,78,.35);background:rgba(201,163,78,.10)}
    .nav a:hover{background:rgba(233,238,247,.04)}
    .main{padding:14px}
    .panel{padding:14px}
    .panel h2{margin:0 0 12px;color:var(--gold);font-size:18px}
    .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    @media (max-width: 620px){ .kpis{grid-template-columns:1fr} }
    .kpi{padding:12px;border-radius:14px;background:rgba(10,22,43,.7);border:1px solid rgba(233,238,247,.08)}
    .kpi .v{font-size:18px;font-weight:900}
    .kpi .l{color:var(--muted);font-size:12px;margin-top:4px}
    .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    .badge{display:inline-flex;gap:8px;align-items:center;padding:7px 10px;border-radius:999px;border:1px solid rgba(233,238,247,.1);background:rgba(10,22,43,.65);color:var(--muted);font-size:12px}
    .dot{width:8px;height:8px;border-radius:999px;background:var(--gold)}
    .dot.ok{background:var(--ok)} .dot.danger{background:var(--danger)} .dot.info{background:var(--info)}
    .split{display:grid;grid-template-columns:1.1fr .9fr;gap:12px}
    @media(max-width: 920px){ .split{grid-template-columns:1fr} }
    .muted{color:var(--muted)}
    .small{font-size:12px}
    .table{width:100%;border-collapse:separate;border-spacing:0 10px}
    .table td{padding:12px;background:rgba(10,22,43,.65);border:1px solid rgba(233,238,247,.07)}
    .table tr td:first-child{border-radius:12px 0 0 12px}
    .table tr td:last-child{border-radius:0 12px 12px 0}
    .searchBar{display:flex;gap:10px;align-items:center;margin-bottom:10px}
    .searchBar input{flex:1}
    .modalBack{position:fixed;inset:0;background:rgba(0,0,0,.52);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
    .modal{width:min(920px,100%);padding:16px}
    .modal header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:10px}
    .modal header b{color:var(--gold)}
    .closeBtn{background:transparent;border:1px solid rgba(233,238,247,.16);color:var(--txt)}
    .hint{margin-top:10px;color:var(--muted);font-size:12px;line-height:1.35}
    .warn{color:#ffd27d}
    .ok{color:var(--ok)}
    .danger{color:var(--danger)}
    .stepper{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
    .step{
      display:flex;gap:8px;align-items:center;
      padding:8px 10px;border-radius:999px;
      border:1px solid rgba(233,238,247,.12);
      background:rgba(10,22,43,.55);
      color:var(--muted); font-size:12px; font-weight:750;
      cursor:pointer; user-select:none; transition:border-color .15s,background .15s
    }
    .step:hover{border-color:rgba(201,163,78,.25);background:rgba(201,163,78,.07);color:var(--txt)}
    .step.active{border-color:rgba(201,163,78,.35);background:rgba(201,163,78,.10);color:var(--txt)}
    .step.done{border-color:rgba(71,209,140,.28);background:rgba(71,209,140,.08);color:var(--txt)}
    .twoCol{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    @media(max-width: 920px){ .twoCol{grid-template-columns:1fr} }
    .box{padding:14px;border-radius:14px;background:rgba(10,22,43,.6);border:1px solid rgba(233,238,247,.07)}
    .pre{white-space:pre-wrap;word-break:break-word;background:rgba(7,17,38,.65);border:1px solid rgba(233,238,247,.07);padding:12px;border-radius:12px;max-height:320px;overflow:auto}
    .miniTitle{color:var(--gold);font-weight:850;margin-bottom:6px}
    .linkGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
    @media(max-width: 620px){ .linkGrid{grid-template-columns:1fr} }
    .linkCard{padding:12px;border-radius:14px;background:rgba(10,22,43,.6);border:1px solid rgba(233,238,247,.08)}
    .linkCard b{color:var(--txt)}
    .linkCard a{display:inline-block;margin-top:6px;color:var(--info);text-decoration:none}
    .linkCard a:hover{text-decoration:underline}

    /* ── RBAC / Usuarios ── */
    .roleBadge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.3px}
    .roleBadge.admin{background:rgba(201,163,78,.18);color:var(--gold);border:1px solid rgba(201,163,78,.35)}
    .roleBadge.user{background:rgba(71,209,140,.10);color:var(--ok);border:1px solid rgba(71,209,140,.22)}
    .statusBadge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:800}
    .statusBadge.active{background:rgba(71,209,140,.10);color:var(--ok);border:1px solid rgba(71,209,140,.22)}
    .statusBadge.inactive{background:rgba(169,182,204,.08);color:var(--muted);border:1px solid rgba(169,182,204,.18)}
    .statusBadge.blocked{background:rgba(255,107,107,.10);color:var(--danger);border:1px solid rgba(255,107,107,.22)}
    .userCard{padding:14px;border-radius:14px;background:rgba(10,22,43,.7);border:1px solid rgba(233,238,247,.08);margin-bottom:10px;transition:border-color .2s}
    .userCard:hover{border-color:rgba(201,163,78,.22)}
    .userCard .ucHead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
    .userCard .ucName{font-size:15px;font-weight:900;color:var(--txt)}
    .userCard .ucMeta{color:var(--muted);font-size:12px;margin-top:4px;line-height:1.5}
    .userCard .ucActions{display:flex;gap:8px;flex-wrap:wrap}
    .infoGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    @media(max-width:620px){.infoGrid{grid-template-columns:1fr}}
    .infoGrid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
    @media(max-width:760px){.infoGrid3{grid-template-columns:1fr 1fr}}
    @media(max-width:480px){.infoGrid3{grid-template-columns:1fr}}
    .fieldGroup{display:flex;flex-direction:column;gap:4px}
    .fieldGroup label{color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
    .passStrength{height:4px;border-radius:999px;margin-top:5px;transition:width .3s,background .3s}
    .lockBanner{background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.2);border-radius:14px;padding:14px;margin-bottom:12px;color:var(--danger)}
    .changePwdCard{background:rgba(201,163,78,.07);border:1px solid rgba(201,163,78,.22);border-radius:14px;padding:16px;margin-bottom:16px}
    .navAdminOnly{display:none}
    .navAdminOnly.show{display:flex}
    .profileCard{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:rgba(10,22,43,.5);border:1px solid rgba(233,238,247,.07)}
    .profileAvatar{width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg,var(--gold),#a07830);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:16px;color:#0a0f18;flex-shrink:0}
    .profileAvatar.admin-av{background:linear-gradient(135deg,var(--gold),#7a5820)}
    .profileAvatar.user-av{background:linear-gradient(135deg,var(--ok),#2a8a5a)}
    .toast{position:fixed;bottom:24px;right:24px;padding:12px 18px;border-radius:12px;background:rgba(19,40,75,.96);border:1px solid rgba(201,163,78,.3);color:var(--txt);font-size:13px;font-weight:700;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:200;animation:slideUp .25s ease;pointer-events:none}
    @keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
    .expOwner{font-size:11px;color:var(--muted);margin-top:4px}
    .sectionTitle{font-size:13px;font-weight:900;color:var(--gold);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 10px;border-bottom:1px solid rgba(201,163,78,.15);padding-bottom:6px}

    /* ── Mejoras UX premium v9 ── */
    /* Autosave indicator */
    #autosaveIndicator{position:fixed;bottom:24px;left:24px;padding:7px 13px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(7,17,38,.85);border:1px solid rgba(71,209,140,.25);color:var(--ok);opacity:0;transition:opacity .4s;pointer-events:none;z-index:150}
    #autosaveIndicator.show{opacity:1}
    /* Progress bar wizard */
    .wizardProgress{height:3px;border-radius:999px;background:rgba(233,238,247,.06);margin-bottom:16px;overflow:hidden}
    .wizardProgressBar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),#e0c060);transition:width .4s ease}
    /* Confidence meter */
    .confidenceMeter{display:flex;align-items:center;gap:10px;margin:10px 0}
    .confidenceMeter .gauge{flex:1;height:8px;border-radius:999px;background:rgba(233,238,247,.07);overflow:hidden}
    .confidenceMeter .gaugeFill{height:100%;border-radius:999px;transition:width .6s ease,background .6s}
    .confidenceMeter .gaugeVal{font-size:18px;font-weight:900;min-width:44px;text-align:right}
    /* Export panel */
    .exportGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-top:12px}
    .exportCard{padding:14px 10px;border-radius:14px;background:rgba(10,22,43,.7);border:1px solid rgba(233,238,247,.09);text-align:center;cursor:pointer;transition:border-color .2s,background .2s}
    .exportCard:hover{border-color:rgba(201,163,78,.35);background:rgba(201,163,78,.05)}
    .exportCard .eIcon{font-size:24px;display:block;margin-bottom:6px}
    .exportCard .eLabel{font-size:12px;font-weight:800;color:var(--txt)}
    .exportCard .eDesc{font-size:10px;color:var(--muted);margin-top:3px}
    /* Word count badge */
    .wc{font-size:10px;color:var(--muted);font-weight:600;margin-left:auto}
    /* Keyboard shortcut hint */
    .kbd{display:inline-block;padding:1px 6px;border-radius:5px;background:rgba(233,238,247,.07);border:1px solid rgba(233,238,247,.14);font-size:10px;font-family:monospace;color:var(--muted)}
    /* Timeline versiones */
    .timeline{border-left:2px solid rgba(201,163,78,.2);padding-left:14px;margin-top:10px}
    .timelineItem{position:relative;margin-bottom:14px}
    .timelineItem::before{content:"";position:absolute;left:-19px;top:5px;width:8px;height:8px;border-radius:999px;background:var(--gold);border:2px solid var(--bg)}
    .timelineItem.n3::before{background:var(--ok)}
    .timelineItem.save::before{background:var(--info)}
    /* Scroll suave */
    html{scroll-behavior:smooth}
    /* Input focus mejorado */
    input:focus,textarea:focus,select:focus{border-color:rgba(201,163,78,.4);box-shadow:0 0 0 3px rgba(201,163,78,.08)}
    /* Botón danger */
    button.danger{background:linear-gradient(180deg,rgba(255,107,107,.9),rgba(200,60,60,.8));border-color:rgba(255,107,107,.4);color:#fff}
    /* Panel header con acciones */
    .panelHeader{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:16px}
    .panelHeader h2{margin:0}
    /* Tabs */
    .tabs{display:flex;gap:4px;border-bottom:1px solid rgba(233,238,247,.08);margin-bottom:14px}
    .tab{padding:8px 14px;border-radius:10px 10px 0 0;background:transparent;border:none;color:var(--muted);font-size:13px;font-weight:700;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
    .tab.active{color:var(--gold);border-bottom-color:var(--gold);background:rgba(201,163,78,.06)}
    /* N3 viewer */
    #n3Viewer{background:rgba(7,17,38,.6);border:1px solid rgba(233,238,247,.07);border-radius:14px;padding:18px;line-height:1.7;font-size:14px;max-height:500px;overflow-y:auto;white-space:pre-wrap;word-break:break-word}
    /* Stat cards panel */
    .statCard{padding:14px;border-radius:14px;background:linear-gradient(135deg,rgba(10,22,43,.9),rgba(19,40,75,.7));border:1px solid rgba(201,163,78,.12);position:relative;overflow:hidden}
    .statCard::after{content:"";position:absolute;top:-20px;right:-20px;width:80px;height:80px;border-radius:999px;background:rgba(201,163,78,.05)}
    .statCard .sv{font-size:28px;font-weight:900;color:var(--gold)}
    .statCard .sl{font-size:11px;color:var(--muted);margin-top:3px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
  
    /* DSEBI: Mobile hamburger */
    #hamburgerBtn{ display:none; }
    @media(max-width:920px){
      #hamburgerBtn{ display:flex !important; align-items:center; }
      #mobileNavOverlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:200; }
      #mobileNavOverlay.open{ display:block; }
      #mobileNavDrawer{
        position:fixed; top:0; left:0; width:min(280px,85vw); height:100vh;
        background:var(--panel); border-right:1px solid rgba(201,163,78,.2);
        z-index:201; transform:translateX(-100%); transition:transform .25s ease;
        padding:20px 14px; overflow-y:auto;
      }
      #mobileNavDrawer.open{ transform:translateX(0); }
    }

  
    .deptLbl{display:flex;align-items:center;gap:8px;cursor:pointer;padding:5px 6px;border-radius:8px;font-size:12px;transition:background .15s}
    .deptLbl:hover{background:rgba(201,163,78,.08)}
    .deptLbl input{width:auto;flex-shrink:0;margin:0}
    .deptLbl span b{color:var(--muted)}
    @keyframes cfPulse{0%{box-shadow:0 0 0 0 rgba(125,198,255,.7);transform:scale(1)}55%{box-shadow:0 0 0 12px rgba(125,198,255,0);transform:scale(1.02)}100%{box-shadow:0 0 0 0 rgba(125,198,255,0);transform:scale(1)}}
    .md-table-wrap{overflow-x:auto;width:100%;margin:10px 0}
    .md-table{width:100%;border-collapse:collapse;font-size:12px}
    .md-table th{padding:7px 10px;background:#1a3060;color:#c9a34e;font-weight:700;text-align:left;border:1px solid rgba(201,163,78,.25);white-space:nowrap}
    .md-table td{padding:6px 10px;border:1px solid rgba(233,238,247,.12);vertical-align:top;word-break:break-word;line-height:1.5}
    .md-table tr:nth-child(even) td{background:rgba(255,255,255,.02)}
    .tbl-wrap{overflow-x:auto;width:100%;margin-bottom:12px}

  

/* ══ Confuturo — Modo Ruta Guiada no invasivo ══ */
.routeGuide{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;margin:0 0 14px;border-radius:14px;
  border:1px solid rgba(125,198,255,.22);
  background:linear-gradient(180deg,rgba(125,198,255,.075),rgba(10,22,43,.32));
}
.routeGuide.off{opacity:.72;border-style:dashed;background:rgba(10,22,43,.42)}
.routeGuideIcon{width:34px;height:34px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(125,198,255,.12);border:1px solid rgba(125,198,255,.22);flex-shrink:0}
.routeGuideText{flex:1;min-width:220px;line-height:1.45}
.routeGuideTitle{font-size:12px;font-weight:900;color:var(--info);text-transform:uppercase;letter-spacing:.35px;margin-bottom:2px}
.routeGuideMsg{font-size:12px;color:var(--muted)}
.routeGuideActions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
.routeGuideActions button{font-size:12px;padding:7px 11px}
.guide-pulse{
  position:relative;
  border-color:rgba(125,198,255,.72) !important;
  box-shadow:0 0 0 0 rgba(125,198,255,.42);
  animation:confuturoGuidePulse 1.9s ease-out infinite;
}
.guide-pulse::after{
  content:"";position:absolute;inset:-5px;border-radius:inherit;
  border:1px solid rgba(125,198,255,.32);pointer-events:none;
}
.guide-pulse-soft{
  outline:2px solid rgba(125,198,255,.48);
  outline-offset:3px;
}
@keyframes confuturoGuidePulse{
  0%{box-shadow:0 0 0 0 rgba(125,198,255,.42)}
  68%{box-shadow:0 0 0 10px rgba(125,198,255,0)}
  100%{box-shadow:0 0 0 0 rgba(125,198,255,0)}
}
@media (prefers-reduced-motion: reduce){
  .guide-pulse{animation:none;box-shadow:none;outline:2px solid rgba(125,198,255,.55);outline-offset:3px}
  .guide-pulse::after{display:none}
}
@media(max-width:620px){
  .routeGuide{align-items:flex-start}
  .routeGuideActions{width:100%;margin-left:0}
  .routeGuideActions button{flex:1}
}


/* ══ Confuturo — Tooltips inteligentes no invasivos ══ */
.cf-tip-enabled{position:relative}
.cf-help{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;margin-left:6px;border-radius:999px;
  border:1px solid rgba(125,198,255,.38);
  background:rgba(125,198,255,.08);color:var(--info);
  font-size:11px;font-weight:900;line-height:1;cursor:help;
  vertical-align:middle;box-shadow:none;flex:0 0 auto;padding:0;
}
.cf-help:hover,.cf-help:focus-visible{background:rgba(125,198,255,.16);border-color:rgba(125,198,255,.7);outline:none}
.cf-tip-dot{
  display:inline-flex;align-items:center;justify-content:center;margin-left:6px;
  width:16px;height:16px;border-radius:999px;font-size:10px;font-weight:900;
  color:var(--info);border:1px solid rgba(125,198,255,.32);background:rgba(125,198,255,.06)
}
#cfSmartTip{
  position:fixed;z-index:49;max-width:min(340px,calc(100vw - 28px));
  padding:10px 12px;border-radius:12px;
  background:rgba(8,18,34,.98);color:var(--txt);
  border:1px solid rgba(125,198,255,.35);
  box-shadow:0 16px 34px rgba(0,0,0,.42),0 0 0 1px rgba(201,163,78,.05) inset;
  font-size:12px;line-height:1.45;letter-spacing:.05px;
  opacity:0;transform:translateY(4px);pointer-events:none;
  transition:opacity .14s ease, transform .14s ease;
}
#cfSmartTip.open{opacity:1;transform:translateY(0)}
#cfSmartTip .cf-tip-title{display:block;font-weight:900;color:var(--gold);margin-bottom:3px;font-size:11.5px;text-transform:uppercase;letter-spacing:.28px}
#cfSmartTip .cf-tip-body{display:block;color:var(--txt)}
#cfSmartTip .cf-tip-foot{display:block;margin-top:6px;color:var(--muted);font-size:11px}
.cf-has-tip{cursor:help}
.nav a.cf-has-tip::after{content:'i';display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;margin-left:auto;border-radius:999px;border:1px solid rgba(125,198,255,.22);color:var(--info);font-size:9px;font-weight:900;opacity:.72}
.routeGuide.cf-has-tip{cursor:default}
@media (max-width:720px){
  #cfSmartTip{font-size:12px;max-width:calc(100vw - 20px)}
  .cf-help{width:20px;height:20px}
}
@media (prefers-reduced-motion: reduce){#cfSmartTip{transition:none}}

#cfSmartTip:not(.open){pointer-events:none;}