/* SIPADES Portal plugin styles */
.sipades-portal{font-family:Inter,system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; color:#fff; padding:22px 0; position:relative;}
.sipades-portal .wrap{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:center;padding:26px;border-radius:14px;background:linear-gradient(180deg,#062033 0%, #083449 100%);box-shadow:0 14px 40px rgba(2,8,23,0.6);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.04)}

/* left content */
.sipades-portal .left{padding:8px 12px; z-index:2}
.sipades-portal .tag{display:inline-block;padding:6px 10px;background:rgba(255,255,255,0.03);border-radius:999px;font-weight:700;color:#7be1ff;border:1px solid rgba(255,255,255,0.03)}
.sipades-portal h2{margin:12px 0 8px;font-size:24px}
.sipades-portal .highlight{color:#7be1ff}
.sipades-portal .desc{color:rgba(255,255,255,0.9);margin:0 0 12px}

/* mockup small */
.sipades-portal .mockup{margin-top:12px}
.sipades-portal .screen{width:300px;height:160px;border-radius:12px;background:linear-gradient(180deg,#0c2f3f,#05212a);position:relative;box-shadow:0 10px 26px rgba(2,8,23,0.6);overflow:hidden;animation:float 5s ease-in-out infinite}
.sipades-portal .waves{position:absolute;left:-30%;bottom:-10%;width:160%;height:80%;background:radial-gradient(circle at 20% 20%, rgba(123,225,255,0.08), transparent 12%), radial-gradient(circle at 80% 80%, rgba(123,225,255,0.06), transparent 10%);transform:translateY(0);animation:wave 6s linear infinite;opacity:0.9}
.sipades-portal .dot{width:12px;height:12px;border-radius:50%;position:absolute;background:rgba(255,255,255,0.06)}
.sipades-portal .dot-1{left:18px;top:18px;box-shadow:0 6px 18px rgba(0,0,0,0.4)}
.sipades-portal .dot-2{right:18px;bottom:18px;box-shadow:0 6px 18px rgba(0,0,0,0.45)}

@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}
@keyframes wave{0%{transform:translateX(0)}100%{transform:translateX(-40%) }}

/* right panel */
.sipades-portal .right{padding:12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);z-index:2}
.sipades-portal .right h3{margin:0 0 8px}
.sipades-portal .right p{margin:0 0 14px;color:rgba(255,255,255,0.9)}

/* buttons */
.sipades-portal .actions{display:flex;gap:10px;align-items:center}
.sipades-portal .btn{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:10px;border:0;cursor:pointer;font-weight:700;text-decoration:none;background:linear-gradient(90deg,#7be1ff,#4fa8ff);color:#022133;transition:transform .16s ease, box-shadow .16s ease}
.sipades-portal .btn:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(11,49,72,0.45)}
.sipades-portal .copy-btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff;box-shadow:none}

/* support links */
.sipades-portal .support{margin-top:12px;display:flex;gap:12px}
.sipades-portal .support a{color:rgba(255,255,255,0.85);text-decoration:none;font-size:13px}
.sipades-portal .support a:hover{text-decoration:underline}

/* responsive */
@media (max-width:900px){
  .sipades-portal .wrap{grid-template-columns:1fr;padding:18px}
  .sipades-portal .screen{width:100%;height:140px}
}