*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#06101f;color:#eef6ff}
body.modal-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button{font:inherit}
.site-header{height:76px;position:sticky;top:0;z-index:20;background:#03101fee;backdrop-filter:blur(14px);border-bottom:1px solid #17324c}
.nav-wrap{height:100%;max-width:1700px;margin:auto;padding:0 28px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto;min-width:max-content}.brand img{width:64px;height:54px;display:block;object-fit:contain;border-radius:8px;flex:0 0 64px}.brand-name{font-size:23px;font-weight:800;letter-spacing:.2px;color:#fff;white-space:nowrap}.brand-name span{color:#00baff}
.nav{display:flex;align-items:center;gap:25px;margin-left:auto}
.nav a{color:#d5e2ef;font-size:14px;white-space:nowrap}
.nav a:hover{color:#00bfff}
.header-phone{display:flex;flex-direction:column;text-align:right;white-space:nowrap;color:#fff}
.header-phone strong{font-size:18px}
.header-phone small{font-size:10px;color:#91abc3}
.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:8px;padding:14px 22px;background:linear-gradient(90deg,#009fe8,#10c3f3);color:#fff;font-weight:700;cursor:pointer;transition:.2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 25px #00baff35}
.outline{background:transparent;border:1px solid #3b718e}
.header-btn{white-space:nowrap}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:26px}

.hero{min-height:560px;max-width:1700px;margin:auto;padding:60px 28px;display:grid;grid-template-columns:43% 57%;align-items:center;gap:15px;background:radial-gradient(circle at 70% 45%,#083b69,#020b18 62%)}
.hero-copy{padding-right:25px}
.eyebrow{color:#00bfff;letter-spacing:4px;font-size:11px;font-weight:800}
.hero h1{font-size:51px;line-height:1.05;margin:16px 0 20px;letter-spacing:-1.5px}
.hero h1 span,h2 span{color:#00baff}
.hero p{font-size:18px;color:#b9cbe0;line-height:1.55}
.hero-actions{display:flex;gap:15px;margin-top:25px}
.trust{display:flex;gap:28px;margin-top:32px}
.trust div{display:flex;flex-direction:column}
.trust b{font-size:13px;color:#fff}
.trust small{color:#7f9bb4;font-size:10px;margin-top:3px}
.hero-media{height:420px;position:relative;overflow:hidden;border:1px solid #126da0;border-radius:16px;background:#06182b;box-shadow:0 0 70px #0077bb40}
.hero-media video,.presentation-video video{width:100%;height:100%;object-fit:cover;display:block}
.media-fallback{position:absolute;inset:0;z-index:0}
.media-fallback img{width:100%;height:100%;object-fit:cover}
.hero-media video{position:relative;z-index:1}
.media-badge{position:absolute;left:20px;bottom:18px;z-index:3;background:#031425dd;border:1px solid #168dcc;border-radius:8px;padding:11px 14px;color:#cceaff;font-size:11px}

.services-section,.projects{background:#f3f7fb;color:#102238;padding:70px 28px}
.section-head{max-width:1700px;margin:0 auto 28px}
.section-head h2{font-size:38px;margin:8px 0}
.service-grid{max-width:1700px;margin:auto;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.service-card{background:#fff;border-radius:13px;padding:23px;min-height:270px;box-shadow:0 3px 15px #0b274012;border:1px solid #e2eaf1;display:flex;flex-direction:column}
.service-card.featured{background:linear-gradient(150deg,#0d58bf,#063775);color:#fff;border-color:#1167c7}
.service-icon{font-size:28px;color:#008df0;font-weight:bold;margin-bottom:18px}
.featured .service-icon{color:#fff}
.service-card h3{font-size:20px;margin:0 0 14px}
.service-card p{font-size:15px;line-height:1.55;color:#617991;margin:0 0 20px}
.featured p{color:#d4e5f5}
.text-btn{margin-top:auto;align-self:flex-start;border:0;background:none;padding:0;color:#008df0;font-weight:800;cursor:pointer}
.featured .text-btn{color:#fff}

.servers-section{max-width:1700px;margin:auto;padding:75px 28px;display:grid;grid-template-columns:30% 70%;gap:28px;background:linear-gradient(115deg,#041323,#062846)}
.servers-intro{padding-right:20px}
.servers-intro h2{font-size:38px;margin:10px 0 16px}
.servers-intro p{color:#abc2d8;line-height:1.6}
.servers-intro ul{list-style:none;padding:0;line-height:2;color:#c9dced;font-size:14px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{position:relative;border:1px solid #1b6d9c;border-radius:14px;padding:23px;background:#06192be8;box-shadow:0 12px 35px #0003}
.plan.popular{border-color:#00bfff;box-shadow:0 0 30px #00bfff20}
.popular-badge{position:absolute;right:14px;top:14px;background:#008ee8;border-radius:20px;padding:5px 9px;font-size:9px;font-weight:bold}
.plan-type{color:#00bfff;font-size:10px;font-weight:bold;letter-spacing:2px}
.plan h3{margin:9px 0;font-size:20px}
.price{font-size:31px;font-weight:800;margin:12px 0}
.price small{font-size:12px;color:#89a5bc}
.specs{line-height:1.9;color:#bcd0e3;font-size:13px}
.plan-btn{width:100%;margin-top:15px}
.load-error{padding:25px;background:#301016;border:1px solid #873d4c;border-radius:10px;color:#ffdce2}

.ia-section{padding:75px 28px;max-width:1700px;margin:auto;background:#f7faff;color:#102238;display:grid;grid-template-columns:1fr 1fr;gap:50px}
.ia-section h2,.presentation h2,.contact h2{font-size:38px;margin:10px 0 18px}
.ia-section p,.presentation p,.contact p{line-height:1.65;color:#637b94}
.ia-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ia-grid article{background:#fff;border:1px solid #dce7f1;border-radius:13px;padding:24px}
.ia-grid span{font-size:30px}
.ia-grid h3{margin-bottom:8px}

.presentation{max-width:1700px;margin:auto;padding:70px 28px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;background:#07182a}
.presentation-video{height:330px;border-radius:15px;overflow:hidden;border:1px solid #126da0}

.projects{padding-top:70px}
.project-grid{max-width:1700px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.project-grid article{min-height:210px;padding:30px;border-radius:14px;background:linear-gradient(145deg,#0b2440,#071426);color:#fff;display:flex;flex-direction:column;justify-content:end}
.project-grid span{color:#00bfff;font-weight:bold}
.project-grid h3{margin:8px 0}
.project-grid p{color:#b9cbe0}

.contact{max-width:1700px;margin:auto;padding:75px 28px;display:grid;grid-template-columns:1fr 1fr;gap:60px;background:radial-gradient(circle at 70%,#0a4770,#03101e)}
.contact form{display:grid;gap:12px}
.contact input,.contact textarea,.modal-box input,.modal-box textarea{padding:14px;border:1px solid #1d496a;border-radius:7px;background:#071a2b;color:#fff;outline:none}
.contact input:focus,.contact textarea:focus,.modal-box input:focus,.modal-box textarea:focus{border-color:#00bfff}
.contact textarea{min-height:125px;resize:vertical}
.contact small{color:#9fc3dc}
.phone-link{display:inline-block;margin-left:14px;color:#8fdcff;font-weight:bold}

footer{background:#020914;color:#7890a8;padding:24px 28px}
.footer-inner{max-width:1700px;margin:auto;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

.modal{position:fixed;inset:0;background:#000b;display:grid;place-items:center;z-index:50;padding:20px}
.hidden{display:none!important}
.modal-box{width:min(850px,100%);max-height:90vh;overflow:auto;background:#08192b;border:1px solid #1c79aa;border-radius:15px;padding:32px;position:relative}
.close{position:absolute;right:14px;top:8px;background:none;border:0;color:#fff;font-size:31px;cursor:pointer}
.modal-service{display:grid;grid-template-columns:38% 62%;gap:25px;align-items:center}
.modal-service img{width:100%;border-radius:12px;background:#06182b}
.modal-service h2{font-size:32px;margin:8px 0}
.modal-service p{color:#bcd0e3;line-height:1.6}
.modal-service ul{padding:0;list-style:none;line-height:2;color:#cce0f0}
#orderForm{display:grid;gap:12px}
#orderForm textarea{min-height:100px}

.whatsapp-float{position:fixed;right:22px;bottom:22px;width:58px;height:58px;border-radius:50%;background:#18c964;color:#fff;display:grid;place-items:center;font-size:26px;z-index:25;box-shadow:0 8px 25px #0005}
.music-toggle{position:fixed;left:20px;bottom:20px;width:48px;height:48px;border:0;border-radius:50%;background:#fff;color:#06101f;z-index:25;box-shadow:0 6px 20px #0005;cursor:pointer}
.music-toggle.playing{background:#00bfff;color:#fff}

@media(max-width:1200px){
  .nav{gap:14px}
  .header-phone{display:none}
  .service-grid{grid-template-columns:repeat(3,1fr)}
  .plans{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .menu-toggle{display:block;margin-left:auto}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;padding:20px 28px;background:#03101f;flex-direction:column;align-items:flex-start}
  .nav.open{display:flex}
  .hero,.servers-section,.ia-section,.presentation,.contact{grid-template-columns:1fr}
  .hero h1{font-size:42px}
  .hero-media{height:350px}
  .service-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .brand img{width:64px;height:48px;flex-basis:64px}
  .header-btn{display:none}
  .hero,.services-section,.servers-section,.ia-section,.presentation,.projects,.contact{padding-left:16px;padding-right:16px}
  .hero h1{font-size:34px}
  .hero-actions,.trust{flex-direction:column}
  .service-grid,.plans,.ia-grid,.project-grid{grid-template-columns:1fr}
  .modal-service{grid-template-columns:1fr}
  .footer-inner{flex-direction:column}
}

@media(max-width:1100px){.brand{min-width:210px}.brand img{width:68px;height:50px;flex-basis:68px}.brand-name{font-size:20px}}

/* ===== Nuevos módulos: Dominios, Cloud/Backup y Área cliente ===== */
.domain-section{max-width:1700px;margin:auto;padding:78px 28px;background:linear-gradient(135deg,#b9effa,#d9f8ff);color:#06265f}
.light-head{max-width:1100px;margin-bottom:25px}.light-head h2{font-size:42px;margin:10px 0;color:#06265f}.light-head p{max-width:900px;color:#365d85;line-height:1.6}
.domain-search{max-width:1150px;margin:30px auto 18px;display:grid;grid-template-columns:1fr auto;gap:10px}.domain-search input{min-width:0;border:1px solid #84cde8;border-radius:12px;padding:20px 24px;font-size:22px;color:#102f66;outline:none;background:#fff}.domain-search input:focus{border-color:#006ce0;box-shadow:0 0 0 4px #006ce020}.domain-search .btn{background:#0756cf;padding:18px 30px;border-radius:12px}.domain-result{max-width:1150px;margin:auto;min-height:20px}.domain-result-card{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 24px;border-radius:14px;background:#fff;border:1px solid #b3d9eb;box-shadow:0 8px 25px #0756cf15}.domain-result-card h3{margin:6px 0;font-size:27px}.domain-result-card p{margin:0;color:#607b9b}.domain-result-card.available{border-color:#31b77b}.domain-result-card.registered{border-color:#e3a2a2}.domain-status{font-size:11px;font-weight:800;letter-spacing:1.5px;color:#0756cf}.available .domain-status{color:#078b54}.registered .domain-status{color:#bd3535}.domain-action{text-align:right;display:grid;gap:10px}.domain-action strong{font-size:18px}.domain-shortcuts{display:flex;justify-content:center;gap:35px;margin-top:28px;font-weight:800;color:#0756cf}.domain-loading{padding:16px;text-align:center;color:#365d85}
.cloud-section{max-width:1700px;margin:auto;padding:75px 28px;background:#f5f9fd;color:#102238}.cloud-section .section-head p{max-width:850px;color:#637b94;line-height:1.6}.storage-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:15px}.storage-card{background:#fff;border:1px solid #dbe6ef;border-radius:14px;padding:23px;min-height:310px;display:flex;flex-direction:column;box-shadow:0 6px 22px #0b274010}.storage-icon{font-size:30px;color:#008fe8;margin-bottom:15px}.storage-card h3{font-size:20px;margin:8px 0}.storage-price{font-size:27px;font-weight:800;color:#0756cf}.storage-price small{font-size:12px;color:#68829c}.storage-card p{color:#637b94;line-height:1.5;font-size:14px}.storage-size{font-size:13px;color:#3e5f7d;margin-top:5px}.storage-btn{width:100%;margin-top:auto}
.portal-section{max-width:1700px;margin:auto;padding:78px 28px;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;background:linear-gradient(120deg,#06182a,#0a3556)}.portal-copy h2{font-size:40px;margin:10px 0 18px}.portal-copy p{color:#b9cbe0;line-height:1.65;max-width:700px}.portal-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:25px;color:#d9ecfa;font-weight:700;font-size:14px}.portal-card{background:#f7fbff;color:#102238;border-radius:16px;padding:28px;border:1px solid #2587b7;box-shadow:0 18px 50px #0005}.portal-card h3{font-size:27px;margin:5px 0 20px}.portal-card form{display:grid;gap:12px}.portal-card input{padding:14px;border:1px solid #cbdce8;border-radius:8px;background:#fff;color:#102238;outline:none}.portal-card input:focus{border-color:#009fe8}.portal-card small{min-height:18px;color:#496b86}.portal-top{display:flex;justify-content:space-between;gap:15px;align-items:center}.portal-top h3{margin:4px 0 0}.outline-btn{border:1px solid #147bb0;background:transparent;color:#0b5b88;border-radius:8px;padding:9px 13px;cursor:pointer;font-weight:700}.portal-status{margin:15px 0;padding:12px;border-radius:9px;background:#e8f5fb;color:#285675;font-size:13px;line-height:1.45}.portal-server{border:1px solid #d7e4ec;border-radius:11px;padding:14px;margin-top:10px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.portal-server strong{display:block}.portal-server small{display:block;color:#7890a8;margin-top:4px}.server-state{font-size:11px;font-weight:800;text-transform:uppercase}.server-state.running{color:#07945b}.server-state.stopped{color:#a13a3a}.server-actions{grid-column:1/-1;display:flex;gap:7px;flex-wrap:wrap}.server-actions button{border:1px solid #bcd3e1;background:#fff;color:#1b5475;border-radius:6px;padding:7px 10px;cursor:pointer}.deploy-form{margin-top:22px;padding-top:20px;border-top:1px solid #dce8f0}.deploy-form h4{margin:0 0 12px}.deploy-form input{font-size:14px}

@media(max-width:1200px){.storage-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.portal-section{grid-template-columns:1fr}.storage-grid{grid-template-columns:repeat(2,1fr)}.domain-result-card{align-items:flex-start;flex-direction:column}.domain-action{text-align:left}.domain-shortcuts{flex-wrap:wrap;gap:15px}.portal-points{grid-template-columns:1fr}}
@media(max-width:600px){.domain-section,.cloud-section,.portal-section{padding-left:16px;padding-right:16px}.domain-search{grid-template-columns:1fr}.domain-search input{font-size:18px}.storage-grid{grid-template-columns:1fr}.portal-card{padding:20px}.portal-top{align-items:flex-start}.server-actions button{flex:1}.domain-shortcuts{display:grid;text-align:center}}

/* ===== Contratación, pago y despliegue automático ===== */
.purchase-flow{display:grid;gap:14px}.purchase-flow h2{font-size:32px;margin:4px 0 0}.purchase-intro{color:#bcd0e3;line-height:1.6;margin:0}.purchase-steps{display:flex;gap:8px;flex-wrap:wrap;margin:5px 0 8px}.purchase-steps span{padding:7px 11px;border:1px solid #1d496a;border-radius:20px;color:#7899b4;font-size:12px}.purchase-steps span.active{border-color:#00bfff;color:#fff;background:#073451}.purchase-form{display:grid;gap:10px}.purchase-form input:not([type="checkbox"]){padding:14px;border:1px solid #1d496a;border-radius:7px;background:#071a2b;color:#fff;outline:none}.purchase-form input:not([type="checkbox"]):focus{border-color:#00bfff}.purchase-form small{min-height:18px;color:#a9c8dc}.check-line{display:flex;align-items:flex-start;gap:8px;color:#bcd0e3;font-size:12px;line-height:1.4}.check-line input{margin-top:2px}.purchase-login-link{text-align:center;color:#91abc3;font-size:13px;padding-top:5px}.purchase-login-link button{border:0;background:none;color:#00bfff;font-weight:700;cursor:pointer}.purchase-summary{display:grid;grid-template-columns:1fr auto;gap:6px 15px;padding:16px;border:1px solid #1d496a;border-radius:10px;background:#061a2d}.purchase-summary b{font-size:17px}.purchase-summary span{grid-column:1;color:#91abc3;font-size:12px}.purchase-summary strong{grid-column:2;grid-row:1/3;align-self:center;color:#00bfff;font-size:20px}.deploy-progress{margin-top:10px;padding:14px;border:1px solid #cfe0eb;border-radius:10px;background:#f2f8fc;color:#24516e;line-height:1.45}.deploy-progress-top{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px}.progress-track{height:10px;background:#dceaf2;border-radius:20px;overflow:hidden;margin-bottom:8px}.progress-bar{height:100%;background:linear-gradient(90deg,#009fe8,#10c3f3);border-radius:20px;transition:width .35s ease}.deploy-progress.completed{border-color:#7bd0a9;background:#eefaf4}.deploy-progress.failed{border-color:#e5a1aa;background:#fff1f3;color:#8b2d3b}.progress-ip{margin-top:8px;padding:8px 10px;background:#e3f6ff;border-radius:7px;color:#15587b}.progress-error{margin-top:8px;color:#9d3040;font-weight:700}.server-ip,.server-ssh{grid-column:1/-1;padding:8px 10px;border-radius:7px;background:#f5f9fc;color:#315a73;font-size:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.server-ip button,.server-ssh button{border:1px solid #b8d1df;background:#fff;color:#1b5475;border-radius:5px;padding:4px 8px;cursor:pointer}.server-ssh code{font-size:12px;flex:1;min-width:180px}.portal-server{grid-template-columns:1fr auto}

/* Área cliente: selección de planes y estado real VMware */
.deploy-label{font-size:13px;font-weight:800;color:#315a73;margin-top:2px}
.deploy-form select{padding:14px;border:1px solid #cbdce8;border-radius:8px;background:#fff;color:#102238;outline:none;font-size:14px}
.deploy-form select:focus{border-color:#009fe8}
.deploy-plan-summary{padding:14px;border:1px solid #cfe0eb;border-radius:10px;background:#eef8fd;color:#174b68;display:grid;gap:5px}
.deploy-plan-summary strong{font-size:18px;color:#0b5b88}
.deploy-plan-summary span{font-size:12px;color:#66849a}
.deploy-specs{display:grid;grid-template-columns:auto 1fr auto 1fr;gap:5px 10px;margin-top:8px;font-size:12px}
.deploy-specs b{color:#55758a}
.deploy-note{font-size:12px;line-height:1.45;color:#6b8497}
.portal-empty{padding:18px;border:1px dashed #bcd2df;border-radius:10px;color:#55758a;background:#f8fcfe}
.portal-server-main{min-width:0}
.server-state{display:flex;align-items:center;gap:6px;white-space:nowrap}
.server-state i{width:10px;height:10px;border-radius:50%;display:inline-block}
.server-state.active{color:#078b55}.server-state.active i{background:#10b86a;box-shadow:0 0 9px #10b86a}
.server-state.standby{color:#b56b00}.server-state.standby i{background:#f5a623;box-shadow:0 0 9px #f5a623}
.server-state.stopped{color:#b12835}.server-state.stopped i{background:#e43d4d}
.server-state.unknown{color:#6c7882}.server-state.unknown i{background:#87939c}
.server-meta{grid-column:1/-1;display:flex;gap:18px;flex-wrap:wrap;font-size:12px;color:#58748a;background:#f5f9fc;padding:9px;border-radius:7px}
.server-remote{grid-column:1/-1;display:flex;align-items:center;gap:7px;flex-wrap:wrap;background:#f5f9fc;padding:9px;border-radius:7px;color:#315a73}
.server-remote code{font-size:12px;flex:1;min-width:200px}
.server-remote button,.remote-btn{border:1px solid #b8d1df;background:#fff;color:#1b5475;border-radius:6px;padding:6px 9px;cursor:pointer;font-size:12px}
.remote-btn{display:inline-block}

/* ===== Correcciones de compatibilidad del área cliente ===== */
main{width:100%;max-width:100%;overflow-x:hidden}
.home-services,.home-services-grid,.portal-section{width:100%;min-width:0}
.home-services-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.home-service-card{min-width:0!important;width:100%!important}
.portal-section{box-sizing:border-box!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.portal-copy,.portal-card{min-width:0!important;width:100%!important}
.portal-card{overflow:hidden}
.deploy-form,.deploy-form select,.deploy-plan-summary,.deploy-note,.deploy-form .btn{width:100%;max-width:100%;min-width:0}
.deploy-form select{appearance:auto!important;display:block!important}
@media(max-width:1200px){.home-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:900px){.portal-section{grid-template-columns:minmax(0,1fr)!important}}
@media(max-width:600px){.home-services-grid{grid-template-columns:minmax(0,1fr)!important}}

/* =========================================================
   CORRECCION BLOQUE "TODO LO QUE NECESITAS"
   ========================================================= */

.home-services {
  width: 100%;
  max-width: 1700px;
  margin: 0 auto;
  padding: 70px 28px 80px;
  background: #06101f;
  color: #eef6ff;
  overflow: hidden;
}

.home-services-head {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto 38px;
  padding: 0;
  text-align: left;
}

.home-services-head h2 {
  margin: 8px 0 12px;
  color: #eef6ff;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
}

.home-services-head p {
  max-width: 900px;
  margin: 0;
  color: #a9bfd4;
  line-height: 1.6;
}

/* GRID PRINCIPAL */
.home-services-grid {
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

/* TARJETAS */
.home-service-card {
  min-width: 0;
  width: 100%;
  min-height: 330px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border: 1px solid #173957;
  border-radius: 16px;
  background: linear-gradient(145deg, #0a1c30, #071525);
  color: #eef6ff;
  text-decoration: none;
  box-shadow: 0 12px 35px rgba(0,0,0,.20);
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.home-service-card:hover {
  transform: translateY(-5px);
  border-color: #00bfff;
  box-shadow: 0 18px 45px rgba(0,191,255,.15);
}

/* ICONO */
.home-service-icon {
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border: 1px solid #168dcc;
  border-radius: 12px;
  background: #092b45;
  color: #00bfff;
  font-size: 23px;
  font-weight: 800;
}

/* CATEGORIA */
.home-service-card > span {
  display: block;
  margin-bottom: 9px;
  color: #00bfff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

/* TITULO */
.home-service-card h3 {
  margin: 0 0 13px;
  color: #ffffff;
  font-size: 21px;
  line-height: 1.25;
}

/* TEXTO */
.home-service-card p {
  margin: 0 0 20px;
  color: #abc0d4;
  font-size: 14px;
  line-height: 1.6;
}

/* ENLACE */
.home-service-card b {
  display: block;
  margin-top: auto;
  color: #00bfff;
  font-size: 14px;
}

/* TARJETA DESTACADA */
.home-service-card.featured {
  border-color: #087eb5;
  background:
    radial-gradient(circle at 90% 10%, rgba(0,191,255,.22), transparent 45%),
    linear-gradient(145deg, #0b3150, #071b30);
}

.home-service-card.featured .home-service-icon {
  background: #08719f;
  border-color: #25caff;
  color: #fff;
}

.home-service-card.featured > span,
.home-service-card.featured b {
  color: #25caff;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

  .home-services {
    padding-left: 24px;
    padding-right: 24px;
  }

  .home-services-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (max-width: 700px) {

  .home-services {
    padding: 55px 16px 65px;
  }

  .home-services-head {
    margin-bottom: 28px;
  }

  .home-services-head h2 {
    font-size: 32px;
  }

  .home-services-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .home-service-card {
    min-height: auto;
  }

}



/* =========================================================
   SNAPSHOTS
   ========================================================= */

.snapshot-modal-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(8px);
}

.snapshot-modal{
  width:min(760px,100%);
  max-height:90vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.12);
  border-radius:20px;
  background:#10131a;
  box-shadow:0 30px 100px rgba(0,0,0,.55);
  color:#fff;
}

.snapshot-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.snapshot-modal-header small{
  display:block;
  margin-bottom:5px;
  color:#7f8ca3;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.5px;
}

.snapshot-modal-header h3{
  margin:0;
  font-size:22px;
}

.snapshot-close{
  width:38px;
  height:38px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}

.snapshot-close:hover{
  background:rgba(255,255,255,.14);
}

.snapshot-limit{
  margin:18px 24px 12px;
  color:#8e9ab0;
  font-size:13px;
}

.snapshot-list{
  padding:0 24px;
}

.snapshot-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.snapshot-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.snapshot-info strong{
  font-size:15px;
  word-break:break-word;
}

.snapshot-info small{
  color:#aeb8c8;
  word-break:break-word;
}

.snapshot-info span{
  color:#69768b;
  font-size:12px;
}

.snapshot-actions{
  display:flex;
  flex-shrink:0;
  gap:8px;
}

.snapshot-actions button{
  padding:9px 12px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:rgba(255,255,255,.06);
  color:#fff;
  cursor:pointer;
  font-size:12px;
}

.snapshot-actions button:hover{
  background:rgba(255,255,255,.12);
}

.snapshot-actions .snapshot-delete{
  border-color:rgba(255,80,80,.25);
  color:#ff8b8b;
}

.snapshot-actions .snapshot-delete:hover{
  background:rgba(255,80,80,.10);
}

.snapshot-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:42px 20px;
  color:#9ba7b9;
  text-align:center;
}

.snapshot-empty-icon{
  font-size:38px;
  margin-bottom:5px;
}

.snapshot-empty strong{
  color:#fff;
  font-size:16px;
}

.snapshot-create{
  margin:22px 24px 24px;
  padding:20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:15px;
  background:rgba(255,255,255,.025);
}

.snapshot-create h4{
  margin:0 0 14px;
  font-size:15px;
}

.snapshot-create input,
.snapshot-create textarea{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin-bottom:10px;
  padding:12px 13px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:9px;
  outline:none;
  background:#0b0e14;
  color:#fff;
  font:inherit;
}

.snapshot-create input:focus,
.snapshot-create textarea:focus{
  border-color:rgba(255,255,255,.25);
}

.snapshot-create textarea{
  min-height:85px;
  resize:vertical;
}

.snapshot-create-btn{
  width:100%;
  padding:12px 15px;
  border:0;
  border-radius:10px;
  background:#fff;
  color:#0b0e14;
  font-weight:700;
  cursor:pointer;
}

.snapshot-create-btn:hover{
  opacity:.9;
}

.snapshot-create-btn:disabled{
  opacity:.4;
  cursor:not-allowed;
}

.snapshot-btn{
  position:relative;
}

@media (max-width:650px){

  .snapshot-modal-backdrop{
    padding:10px;
  }

  .snapshot-modal{
    max-height:94vh;
    border-radius:16px;
  }

  .snapshot-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .snapshot-actions{
    width:100%;
  }

  .snapshot-actions button{
    flex:1;
  }

}

/* ===== METRICAS VPS ===== */

.server-metrics{
  grid-column:1/-1;
  margin-top:4px;
  padding:14px;
  border:1px solid #d7e4ec;
  border-radius:11px;
  background:linear-gradient(135deg,#f8fcff,#eef7fb);
}

.metrics-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}

.metrics-header strong{
  color:#174e6c;
  font-size:14px;
}

.metrics-header span{
  color:#7890a8;
  font-size:11px;
  font-weight:600;
}

.metrics-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.metric-card{
  min-width:0;
  padding:10px;
  border:1px solid #d8e7ef;
  border-radius:8px;
  background:#fff;
}

.metric-card small{
  display:block;
  color:#7890a8;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:4px;
}

.metric-card strong{
  display:block;
  color:#164d6b;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media(max-width:700px){

  .metrics-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}

@media(max-width:430px){

  .metrics-grid{
    grid-template-columns:1fr;
  }

}


/* ===== GRAFICAS HISTORICAS VPS ===== */
.metrics-charts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.metric-chart{
  min-width:0;
  padding:12px;
  border:1px solid #d8e7ef;
  border-radius:10px;
  background:#fff;
  overflow:hidden;
}

.metric-chart-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
  color:#174e6c;
  font-size:12px;
  font-weight:700;
}

.metric-chart-title strong{
  color:#164d6b;
  font-size:12px;
  white-space:nowrap;
}

.metric-chart-svg{
  display:block;
  width:100%;
  height:150px;
}

.chart-axis{
  stroke:#d7e4ec;
  stroke-width:1;
}

.chart-line{
  stroke:#1b83b5;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.chart-point{
  fill:#1b83b5;
  stroke:#fff;
  stroke-width:2;
}

.metric-chart-memory .chart-line,
.metric-chart-memory .chart-point{
  stroke:#7a58b5;
}

.metric-chart-memory .chart-point{
  fill:#7a58b5;
}

.metric-chart-disk .chart-line,
.metric-chart-disk .chart-point{
  stroke:#d47b28;
}

.metric-chart-disk .chart-point{
  fill:#d47b28;
}

.metric-chart-network .chart-line,
.metric-chart-network .chart-point{
  stroke:#2d936c;
}

.metric-chart-network .chart-point{
  fill:#2d936c;
}

.metric-chart-empty{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8aa0b2;
  font-size:12px;
}

@media(max-width:800px){
  .metrics-charts{
    grid-template-columns:1fr;
  }
}


/* ===== GRAFICAS COMPACTAS ===== */
.metrics-charts{
  gap:8px;
  margin-top:8px;
}

.metric-chart{
  padding:8px 10px;
  border-radius:8px;
}

.metric-chart-title{
  margin-bottom:3px;
  font-size:11px;
}

.metric-chart-title strong{
  font-size:11px;
}

.metric-chart-svg{
  height:90px;
}

.metric-chart-empty{
  height:90px;
  font-size:11px;
}


/* ===== HISTORICO DESPLEGABLE ===== */
.metrics-history-toggle{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.metrics-history-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:8px;
  padding:6px 10px;
  border:1px solid #b9d5e4;
  border-radius:7px;
  background:#fff;
  color:#17658a;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:all .2s ease;
}

.metrics-history-button:hover{
  background:#eef8fc;
  border-color:#1b83b5;
}

.metrics-history-button::after{
  content:"";
  margin-left:5px;
}

.metrics-history-toggle:checked + .metrics-history-button{
  background:#eef8fc;
  border-color:#1b83b5;
}

.metrics-history-toggle:checked + .metrics-history-button{
  font-size:0;
}

.metrics-history-toggle:checked + .metrics-history-button::before{
  content:"📉 Ocultar histórico";
  font-size:11px;
}

.metrics-charts{
  display:none;
}

.metrics-history-toggle:checked ~ .metrics-charts{
  display:grid;
}


/* ===== MODAL DETALLES SERVIDOR ===== */
.server-details-backdrop{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(10,35,50,.62);
  backdrop-filter:blur(4px);
}

.server-details-modal{
  width:min(720px,100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border:1px solid #d5e4ec;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.25);
}

.server-details-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:18px 20px;
  border-bottom:1px solid #e3edf2;
  background:linear-gradient(135deg,#f7fcff,#edf7fb);
}

.server-details-title{
  color:#164d6b;
  font-size:19px;
  font-weight:800;
}

.server-details-subtitle{
  margin-top:3px;
  color:#7890a8;
  font-size:12px;
}

.server-details-close{
  width:34px;
  height:34px;
  border:0;
  border-radius:8px;
  background:#fff;
  color:#527287;
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

.server-details-close:hover{
  background:#eaf5fa;
  color:#164d6b;
}

.server-details-body{
  padding:18px 20px;
}

.server-details-section{
  margin-bottom:18px;
  padding:15px;
  border:1px solid #dce9ef;
  border-radius:11px;
  background:#fbfdfe;
}

.server-details-section:last-child{
  margin-bottom:0;
}

.server-details-section h3{
  margin:0 0 12px;
  color:#174e6c;
  font-size:13px;
}

.server-details-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.server-details-grid > div,
.server-details-metrics > div,
.server-details-access > div{
  padding:10px;
  border:1px solid #e1ebf0;
  border-radius:8px;
  background:#fff;
}

.server-details-grid small,
.server-details-metrics small,
.server-details-access small{
  display:block;
  margin-bottom:4px;
  color:#7890a8;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
}

.server-details-grid strong,
.server-details-metrics strong,
.server-details-access strong{
  display:block;
  color:#164d6b;
  font-size:13px;
  word-break:break-word;
}

.server-details-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.server-details-footer{
  display:flex;
  justify-content:flex-end;
  padding:14px 20px;
  border-top:1px solid #e3edf2;
  background:#f8fbfc;
}

.details-btn{
  border-color:#b9d5e4;
}

.details-btn:hover{
  background:#eef8fc;
  border-color:#1b83b5;
}

@media(max-width:650px){
  .server-details-backdrop{
    padding:10px;
  }

  .server-details-modal{
    max-height:94vh;
    border-radius:12px;
  }

  .server-details-header,
  .server-details-body{
    padding:14px;
  }

  .server-details-grid{
    grid-template-columns:1fr;
  }

  .server-details-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:400px){
  .server-details-metrics{
    grid-template-columns:1fr;
  }
}


/* ===== Área cliente: menú principal ===== */
.portal-home{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.portal-menu-card{
  appearance:none;
  border:1px solid #cfe0eb;
  border-radius:14px;
  background:linear-gradient(145deg,#fff,#f2f8fc);
  color:#102238;
  padding:24px;
  text-align:left;
  cursor:pointer;
  display:grid;
  gap:7px;
  min-height:190px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.portal-menu-card:hover{
  transform:translateY(-2px);
  border-color:#159dd8;
  box-shadow:0 12px 28px #0b355522;
}
.portal-menu-icon{
  width:54px;
  height:54px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:#e4f5fc;
  font-size:27px;
  margin-bottom:5px;
}
.portal-menu-title{font-size:21px;font-weight:800;color:#12324d}
.portal-menu-text{font-size:13px;line-height:1.5;color:#5c7890}
.portal-menu-meta{font-size:12px;font-weight:800;color:#0879ae;margin-top:5px}
.portal-subview{margin-top:18px}
.portal-subview-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:15px;
}
.portal-subview-head h4{margin:2px 0 0;font-size:20px}
.portal-back{
  border:1px solid #c4d9e6;
  background:#fff;
  color:#155779;
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:700;
}
.portal-back:hover{border-color:#159dd8;background:#f2faff}
@media(max-width:600px){
  .portal-home{grid-template-columns:1fr}
  .portal-menu-card{min-height:150px}
}

/* ============================================================
   CLOUDNEX-iA · ÁREA DE CLIENTE · DISEÑO PREMIUM
   ============================================================ */

#portalLoginView {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 0 8px;
}

/* Cabecera */

#portalAuthChoice {
  padding: 12px 8px 4px;
}

#portalAuthChoice .eyebrow {
  display: inline-block;
  margin-bottom: 14px;
  color: #00aef3;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 6px;
  text-transform: uppercase;
}

#portalAuthChoice h3 {
  margin: 0;
  color: #071b34;
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -1.8px;
}

.portal-auth-intro {
  max-width: 760px;
  margin: 18px 0 38px;
  color: #64748b;
  font-size: 17px;
  line-height: 1.65;
}

/* Línea decorativa */

#portalAuthChoice::after {
  content: "";
  display: block;
  width: 58px;
  height: 4px;
  margin-top: 34px;
  margin-bottom: 28px;
  border-radius: 20px;
  background: linear-gradient(90deg, #00aeef, #0077c8);
}

/* ============================================================
   TARJETAS
   ============================================================ */

.portal-auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
  margin-top: 0;
}

.portal-auth-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  min-height: 300px;
  padding: 34px;
  overflow: hidden;

  border: 1px solid #dce5ef;
  border-radius: 20px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(0,174,239,.09),
      transparent 42%
    ),
    linear-gradient(145deg, #ffffff 0%, #f7faff 100%);

  color: #071b34;
  text-align: left;

  box-shadow:
    0 12px 30px rgba(15, 39, 70, .06),
    0 2px 5px rgba(15, 39, 70, .035);

  cursor: pointer;

  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

/* Decoración */

.portal-auth-card::before {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -100px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: rgba(0,174,239,.055);
  pointer-events: none;
}

.portal-auth-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #00aeef, #0078c8);
  opacity: 0;
  transition: opacity .22s ease;
}

/* Hover */

.portal-auth-card:hover {
  transform: translateY(-7px);
  border-color: rgba(0,174,239,.42);

  box-shadow:
    0 24px 55px rgba(15,39,70,.13),
    0 5px 15px rgba(0,174,239,.08);
}

.portal-auth-card:hover::after {
  opacity: 1;
}

/* Icono */

.portal-auth-icon {
  position: relative;
  z-index: 2;

  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 68px !important;
  height: 68px !important;

  margin: 0 0 28px !important;

  border-radius: 18px;

  background: linear-gradient(145deg, #071b34, #0c355c);

  color: #ffffff;
  font-size: 29px;

  box-shadow:
    0 10px 22px rgba(7,27,52,.20);
}

/* Título */

.portal-auth-card strong {
  position: relative;
  z-index: 2;

  display: block !important;

  margin: 0 0 8px !important;

  color: #071b34;

  font-size: 27px !important;
  font-weight: 800;

  line-height: 1.2;
}

/* Descripción */

.portal-auth-card > span:not(.portal-auth-icon) {
  position: relative;
  z-index: 2;

  display: block;

  color: #718096;

  font-size: 15px;
  line-height: 1.55;
}

/* Acción inferior */

.portal-auth-card b {
  position: relative;
  z-index: 2;

  display: flex !important;
  align-items: center;
  gap: 9px;

  margin-top: auto !important;
  padding-top: 30px;

  color: #009fe3;

  font-size: 14px;
  font-weight: 800;

  line-height: 1;
}

.portal-auth-card b::after {
  content: "→";

  font-size: 20px;
  line-height: 1;

  transition: transform .2s ease;
}

.portal-auth-card:hover b::after {
  transform: translateX(6px);
}

/* ============================================================
   PEQUEÑO TEXTO DE SEGURIDAD
   ============================================================ */

#portalAuthChoice .portal-auth-grid::after {
  content: "🔒  Acceso seguro · CLOUDNEX-iA";

  grid-column: 1 / -1;

  display: block;

  margin-top: 4px;

  color: #94a3b8;

  font-size: 12px;
  font-weight: 600;

  letter-spacing: .3px;
}

/* ============================================================
   LOGIN / REGISTRO
   ============================================================ */

#portalLoginFormView,
#portalRegisterFormView {
  max-width: 620px;
  margin: 0 auto;
  padding: 10px 8px 25px;
}

.portal-auth-back {
  display: inline-flex;
  align-items: center;

  margin: 0 0 30px;
  padding: 8px 0;

  border: 0;
  background: transparent;

  color: #64748b;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;
}

.portal-auth-back:hover {
  color: #009fe3;
}

#portalLoginFormView .eyebrow,
#portalRegisterFormView .eyebrow {
  display: inline-block;
  margin-bottom: 12px;

  color: #00aef3;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: 5px;
}

#portalLoginFormView h3,
#portalRegisterFormView h3 {
  margin: 0;

  color: #071b34;

  font-size: 38px;
  font-weight: 800;
}

#portalLoginForm,
#portalRegisterForm {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}

#portalLoginForm input,
#portalRegisterForm input {
  box-sizing: border-box;
  width: 100%;
  min-height: 54px;

  padding: 0 17px;

  border: 1px solid #d7e0ea;
  border-radius: 11px;

  background: #fbfdff;

  color: #071b34;

  font-size: 15px;

  outline: none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease;
}

#portalLoginForm input:focus,
#portalRegisterForm input:focus {
  border-color: #00aeef;

  box-shadow:
    0 0 0 4px rgba(0,174,239,.10);
}

.portal-auth-switch {
  margin-top: 22px;

  color: #718096;

  font-size: 14px;
  text-align: center;
}

.portal-auth-switch button {
  padding: 0;
  margin-left: 4px;

  border: 0;
  background: transparent;

  color: #009fe3;

  font-weight: 800;
  cursor: pointer;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {

  #portalLoginView {
    padding: 8px 0;
  }

  #portalAuthChoice {
    padding: 5px 0;
  }

  #portalAuthChoice h3 {
    font-size: 34px;
  }

  .portal-auth-intro {
    font-size: 15px;
    margin-bottom: 28px;
  }

  .portal-auth-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .portal-auth-card {
    min-height: 250px;
    padding: 27px;
  }

  #portalAuthChoice .portal-auth-grid::after {
    text-align: center;
  }
}


/* ============================================================
   CLOUDNEX-iA · AJUSTE TIPOGRÁFICO FINAL
   ============================================================ */

#portalAuthChoice h3 {
  font-size: clamp(34px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: -1px;
}

.portal-auth-intro {
  max-width: 700px;
  margin: 14px 0 30px;
  font-size: 15.5px;
  line-height: 1.55;
}

#portalAuthChoice .eyebrow {
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 4.5px;
}

.portal-auth-grid {
  gap: 20px;
}

.portal-auth-card {
  min-height: 270px;
  padding: 28px;
  border-radius: 18px;
}

.portal-auth-icon {
  width: 60px !important;
  height: 60px !important;
  margin-bottom: 22px !important;
  border-radius: 15px;
  font-size: 25px;
}

.portal-auth-card strong {
  margin-bottom: 6px !important;
  font-size: 22px !important;
}

.portal-auth-card > span:not(.portal-auth-icon) {
  font-size: 14px;
  line-height: 1.45;
}

.portal-auth-card b {
  padding-top: 24px;
  font-size: 13px;
}

.portal-auth-card b::after {
  font-size: 17px;
}

/* Evita la flecha duplicada que había quedado en el texto */
.portal-auth-card b {
  font-size: 0;
}

.portal-auth-card b::before {
  font-size: 13px;
}

.portal-auth-card:first-child b::before {
  content: "Iniciar sesión";
}

.portal-auth-card:last-child b::before {
  content: "Crear cuenta";
}

#portalAuthChoice .portal-auth-grid::after {
  margin-top: 0;
  font-size: 11px;
}

/* Panel de login y registro más elegante */
#portalLoginFormView h3,
#portalRegisterFormView h3 {
  font-size: 34px;
  letter-spacing: -0.7px;
}

#portalLoginFormView .eyebrow,
#portalRegisterFormView .eyebrow {
  font-size: 11px;
  letter-spacing: 4px;
}

@media (max-width: 760px) {

  #portalAuthChoice h3 {
    font-size: 32px;
  }

  .portal-auth-intro {
    font-size: 15px;
  }

  .portal-auth-card {
    min-height: 235px;
    padding: 25px;
  }
}


/* =========================================================
   CLOUDNEX - TARJETA VPS CON CONSOLA CENTRAL
   ========================================================= */

.portal-server{
  display:grid !important;

  grid-template-columns:
    minmax(180px,0.85fr)
    minmax(300px,1.45fr)
    minmax(180px,0.85fr);

  grid-template-areas:
    "header header header"
    "state state state"
    "ip console specs"
    "details console specs"
    "metrics metrics metrics"
    "ssh ssh ssh"
    "remote remote remote"
    "actions actions actions"
    "admin admin admin";

  gap:14px;

  align-items:start;
}


/* Cabecera */

.portal-server-header{
  grid-area:header;
}

.server-state-text{
  grid-area:state;
}


/* Izquierda */

.server-ip-box{
  grid-area:ip;
}

.server-details{
  grid-area:details;

  display:flex;
  flex-direction:column;

  gap:10px;
}


/* Derecha */

.server-specs{
  grid-area:specs;

  display:flex;
  flex-direction:column;

  gap:12px;
}

.server-spec{
  padding:2px 0;
}


/* Rendimiento */

.server-metrics{
  grid-area:metrics;
}


/* SSH */

.remote-connection{
  grid-area:ssh;
}


/* Acciones */

.server-remote-actions{
  grid-area:remote;
}

.server-actions{
  grid-area:actions;
}


/* =========================================================
   PREVISUALIZACIÓN
   ========================================================= */

.vm-console-embedded{
  grid-area:console;

  position:relative !important;

  width:100% !important;
  height:245px !important;

  margin:0 !important;

  box-sizing:border-box;

  overflow:hidden;

  border:2px solid #e31e24;
  border-radius:12px;

  background:#050505;

  cursor:pointer;

  box-shadow:
    0 3px 12px rgba(0,0,0,.12);

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.vm-console-embedded:hover{
  transform:translateY(-2px);

  box-shadow:
    0 8px 25px rgba(0,0,0,.20);
}


/* Fondo de la previsualización */

.vm-console-preview{
  position:absolute;

  inset:0;

  display:flex;

  align-items:center;
  justify-content:center;

  flex-direction:column;

  gap:7px;

  color:#fff;

  text-align:center;

  background:
    radial-gradient(
      circle at center,
      #202a32 0%,
      #080808 60%,
      #000 100%
    );

  z-index:10;
}

.vm-console-os-icon{
  font-size:62px;

  line-height:1;

  margin-bottom:4px;
}

.vm-console-preview strong{
  font-size:23px;

  letter-spacing:1.5px;
}

.vm-console-preview span{
  font-size:14px;

  opacity:.9;
}

.vm-console-preview small{
  margin-top:8px;

  font-size:12px;

  opacity:.65;
}


/* =========================================================
   CONSOLA AMPLIADA
   ========================================================= */

.vm-console-embedded.expanded{
  position:fixed !important;

  top:15px !important;
  left:15px !important;
  right:15px !important;
  bottom:15px !important;

  width:auto !important;
  height:auto !important;

  margin:0 !important;

  z-index:999999 !important;

  border-radius:12px;

  background:#000;

  box-shadow:
    0 20px 80px rgba(0,0,0,.75);

  transform:none !important;
}


/* Al conectarse WMKS, ocultamos la preview */

.vm-console-embedded.expanded .vm-console-preview{
  display:none;
}


/* Botón cerrar */

.vm-console-close{
  position:absolute;

  top:10px;
  right:10px;

  z-index:1000000;

  display:none;

  padding:8px 14px;

  border:0;
  border-radius:7px;

  background:#e31e24;

  color:#fff;

  font-size:14px;
  font-weight:700;

  cursor:pointer;
}

.vm-console-embedded.expanded .vm-console-close{
  display:block;
}

.vm-console-close:hover{
  background:#ff3038;
}


/* WMKS */

.vm-console-embedded.expanded canvas{
  width:100% !important;
  height:100% !important;

  object-fit:contain;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width:900px){

  .portal-server{
    grid-template-columns:1fr;

    grid-template-areas:
      "header"
      "state"
      "ip"
      "console"
      "specs"
      "details"
      "metrics"
      "ssh"
      "remote"
      "actions"
      "admin";
  }

  .vm-console-embedded{
    height:240px !important;
  }
}


.vm-console-wmks{
  position:absolute;

  inset:0;

  background:#000;

  overflow:hidden;

  z-index:20;
}

.vm-console-embedded.expanded .vm-console-wmks{
  top:0;
  left:0;
  right:0;
  bottom:0;
}

.vm-console-embedded.expanded .vm-console-wmks canvas{
  width:100% !important;
  height:100% !important;

  object-fit:contain;
}


/* ===== PANEL DE SERVIDORES A TODO EL ANCHO ===== */

.portal-section:has(#portalDashboard:not(.hidden)){
  grid-template-columns:1fr !important;
  align-items:start !important;
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-card{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
}

.portal-section:has(#portalDashboard:not(.hidden)) #portalDashboard{
  width:100%;
}


/* =========================================================
   CLOUDNEX-iA — FUTURISTIC SERVER DASHBOARD
   ========================================================= */

.portal-section:has(#portalDashboard:not(.hidden)){
  background:
    radial-gradient(circle at 15% 10%, rgba(0,191,255,.12), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(0,120,255,.10), transparent 30%),
    linear-gradient(135deg,#03111f 0%,#061b2d 45%,#03101c 100%) !important;
  color:#eaf8ff !important;
  position:relative;
  overflow:hidden;
}

.portal-section:has(#portalDashboard:not(.hidden))::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(0,191,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,191,255,.025) 1px,transparent 1px);
  background-size:35px 35px;
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-card{
  position:relative;
  z-index:1;
  background:rgba(5,25,42,.88) !important;
  color:#eaf8ff !important;
  border:1px solid rgba(0,191,255,.28) !important;
  box-shadow:
    0 20px 70px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 35px rgba(0,191,255,.04);
  backdrop-filter:blur(12px);
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-top h3{
  color:#f2fbff;
  letter-spacing:.3px;
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-subview-head h4{
  color:#f2fbff;
  font-size:22px;
  letter-spacing:.4px;
}

.portal-section:has(#portalDashboard:not(.hidden)) .eyebrow{
  color:#00c8ff;
  letter-spacing:4px;
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-back{
  background:rgba(0,191,255,.06);
  border:1px solid rgba(0,191,255,.30);
  color:#8ee7ff;
  border-radius:8px;
  padding:9px 14px;
  transition:.2s ease;
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-back:hover{
  background:rgba(0,191,255,.14);
  border-color:#00c8ff;
  color:#fff;
  box-shadow:0 0 18px rgba(0,191,255,.18);
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-status{
  background:linear-gradient(
    90deg,
    rgba(0,191,255,.10),
    rgba(0,130,255,.05)
  );
  border:1px solid rgba(0,191,255,.16);
  color:#9edcf0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}

/* TARJETA DE SERVIDOR */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-server{
  background:
    linear-gradient(145deg,rgba(8,35,56,.96),rgba(3,18,31,.98)) !important;
  border:1px solid rgba(0,191,255,.22) !important;
  border-radius:16px;
  padding:20px;
  box-shadow:
    0 12px 35px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.035);
  position:relative;
  overflow:hidden;
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-server::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(
    180deg,
    #00d9ff,
    #007bff,
    transparent
  );
  box-shadow:0 0 18px rgba(0,191,255,.55);
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-server:hover{
  border-color:rgba(0,200,255,.45) !important;
  box-shadow:
    0 18px 45px rgba(0,0,0,.38),
    0 0 30px rgba(0,191,255,.07);
}

/* NOMBRE DE LA VM */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-server strong{
  color:#f4fcff;
  font-size:17px;
  letter-spacing:.2px;
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-server small{
  color:#7193a8;
}

/* ESTADO */

.portal-section:has(#portalDashboard:not(.hidden)) .server-state.active{
  color:#22e6a7;
  text-shadow:0 0 12px rgba(34,230,167,.35);
}

.portal-section:has(#portalDashboard:not(.hidden)) .server-state.active i{
  background:#20e6a7;
  box-shadow:
    0 0 7px #20e6a7,
    0 0 16px rgba(32,230,167,.65);
}

/* DATOS IP / SSH / META */

.portal-section:has(#portalDashboard:not(.hidden)) .server-ip,
.portal-section:has(#portalDashboard:not(.hidden)) .server-ssh,
.portal-section:has(#portalDashboard:not(.hidden)) .server-meta,
.portal-section:has(#portalDashboard:not(.hidden)) .server-remote{
  background:rgba(1,18,31,.72);
  border:1px solid rgba(0,191,255,.10);
  color:#9cc7d9;
}

.portal-section:has(#portalDashboard:not(.hidden)) .server-ip button,
.portal-section:has(#portalDashboard:not(.hidden)) .server-ssh button,
.portal-section:has(#portalDashboard:not(.hidden)) .server-remote button{
  background:rgba(0,191,255,.07);
  border:1px solid rgba(0,191,255,.28);
  color:#8fe6ff;
  transition:.2s ease;
}

.portal-section:has(#portalDashboard:not(.hidden)) .server-ip button:hover,
.portal-section:has(#portalDashboard:not(.hidden)) .server-ssh button:hover,
.portal-section:has(#portalDashboard:not(.hidden)) .server-remote button:hover{
  background:rgba(0,191,255,.16);
  border-color:#00c8ff;
  color:#fff;
  box-shadow:0 0 14px rgba(0,191,255,.15);
}

/* ESPECIFICACIONES */

.portal-section:has(#portalDashboard:not(.hidden)) .server-spec{
  color:#7697aa;
}

.portal-section:has(#portalDashboard:not(.hidden)) .server-spec strong,
.portal-section:has(#portalDashboard:not(.hidden)) .server-spec b{
  color:#ecfaff;
}

/* RENDIMIENTO */

.portal-section:has(#portalDashboard:not(.hidden)) .server-metrics{
  background:
    linear-gradient(145deg,rgba(4,28,45,.92),rgba(2,17,29,.96));
  border:1px solid rgba(0,191,255,.15);
  border-radius:13px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.portal-section:has(#portalDashboard:not(.hidden)) .server-metrics > *{
  color:#b9d9e8;
}

.portal-section:has(#portalDashboard:not(.hidden)) .server-metrics .metric,
.portal-section:has(#portalDashboard:not(.hidden)) .server-metrics [class*="metric"]{
  background:rgba(0,0,0,.16);
  border-color:rgba(0,191,255,.10);
}

/* CONSOLA */

.portal-section:has(#portalDashboard:not(.hidden)) .vm-console-embedded{
  border-color:#00c8ff !important;
  box-shadow:
    0 0 0 1px rgba(0,200,255,.18),
    0 0 28px rgba(0,191,255,.14),
    0 12px 35px rgba(0,0,0,.45);
}

.portal-section:has(#portalDashboard:not(.hidden)) .vm-console-preview{
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(0,150,210,.16),
      transparent 35%
    ),
    linear-gradient(145deg,#02070b,#07151f 55%,#010509);
}

.portal-section:has(#portalDashboard:not(.hidden)) .vm-console-preview strong{
  color:#e9fbff;
  text-shadow:0 0 14px rgba(0,200,255,.25);
}

.portal-section:has(#portalDashboard:not(.hidden)) .vm-console-preview span{
  color:#8fb9ca;
}

/* BOTONES */

.portal-section:has(#portalDashboard:not(.hidden)) .server-actions button{
  background:linear-gradient(
    180deg,
    rgba(8,42,64,.95),
    rgba(4,25,41,.95)
  );
  border:1px solid rgba(0,191,255,.28);
  color:#a9eaff;
  border-radius:8px;
  padding:9px 13px;
  font-weight:600;
  transition:.2s ease;
}

.portal-section:has(#portalDashboard:not(.hidden)) .server-actions button:hover{
  transform:translateY(-1px);
  border-color:#00c8ff;
  color:#fff;
  box-shadow:0 0 18px rgba(0,191,255,.18);
}

.portal-section:has(#portalDashboard:not(.hidden)) .outline-btn{
  background:rgba(0,191,255,.06);
  border-color:rgba(0,191,255,.35);
  color:#8ee7ff;
}

.portal-section:has(#portalDashboard:not(.hidden)) .outline-btn:hover{
  background:rgba(0,191,255,.14);
  color:#fff;
  box-shadow:0 0 18px rgba(0,191,255,.16);
}

/* ADMINISTRACIÓN */

.portal-section:has(#portalDashboard:not(.hidden)) .server-admin{
  border-top:1px solid rgba(0,191,255,.10);
  padding-top:14px;
  color:#83a7b9;
}

/* LÍNEA SUPERIOR DECORATIVA */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-top{
  position:relative;
  padding-bottom:15px;
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-top::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    #00c8ff,
    rgba(0,200,255,.15),
    transparent
  );
}

/* MÓVIL */

@media(max-width:900px){
  .portal-section:has(#portalDashboard:not(.hidden)){
    padding-top:35px;
  }

  .portal-section:has(#portalDashboard:not(.hidden)) .portal-server{
    padding:15px;
  }
}


/* =========================================================
   CLOUDNEX-iA — FUTURISTIC CREATE MACHINE
   ========================================================= */

.portal-section:has(#portalCreateView:not(.hidden)){
  background:
    radial-gradient(circle at 18% 15%,rgba(0,200,255,.12),transparent 30%),
    radial-gradient(circle at 82% 25%,rgba(0,110,255,.10),transparent 32%),
    linear-gradient(135deg,#03111f 0%,#061b2d 48%,#03101c 100%) !important;
  color:#eaf8ff !important;
  position:relative;
  overflow:hidden;
}

.portal-section:has(#portalCreateView:not(.hidden))::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(rgba(0,191,255,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,191,255,.025) 1px,transparent 1px);
  background-size:35px 35px;
}

.portal-section:has(#portalCreateView:not(.hidden)) #portalCreateView{
  position:relative;
  z-index:1;
  width:100%;
}

.portal-section:has(#portalCreateView:not(.hidden)) .portal-subview-head{
  display:flex;
  align-items:center;
  gap:20px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(0,200,255,.18);
}

.portal-section:has(#portalCreateView:not(.hidden)) .portal-subview-head h4{
  color:#f2fbff;
  font-size:25px;
  margin:5px 0 0;
  letter-spacing:.4px;
}

.portal-section:has(#portalCreateView:not(.hidden)) .portal-subview-head .eyebrow{
  color:#00c8ff;
  letter-spacing:4px;
}

.portal-section:has(#portalCreateView:not(.hidden)) .portal-back{
  background:rgba(0,191,255,.06);
  border:1px solid rgba(0,191,255,.30);
  color:#8ee7ff;
  border-radius:8px;
  padding:9px 15px;
  cursor:pointer;
  transition:.2s ease;
}

.portal-section:has(#portalCreateView:not(.hidden)) .portal-back:hover{
  background:rgba(0,191,255,.14);
  border-color:#00c8ff;
  color:#fff;
  box-shadow:0 0 18px rgba(0,191,255,.18);
}

/* FORMULARIO PRINCIPAL */

.portal-section:has(#portalCreateView:not(.hidden)) #deployForm{
  max-width:1050px;
  margin:30px auto 0;
  padding:30px;
  display:grid;
  gap:15px;
  background:
    linear-gradient(145deg,rgba(7,35,55,.94),rgba(3,18,31,.97));
  border:1px solid rgba(0,191,255,.25);
  border-radius:18px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 35px rgba(0,191,255,.05);
  position:relative;
  overflow:hidden;
}

.portal-section:has(#portalCreateView:not(.hidden)) #deployForm::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(
    180deg,
    #00d9ff,
    #007bff,
    transparent
  );
  box-shadow:0 0 20px rgba(0,191,255,.55);
}

.portal-section:has(#portalCreateView:not(.hidden)) #deployForm h4{
  margin:0 0 8px;
  color:#f3fcff;
  font-size:21px;
  letter-spacing:.3px;
}

/* ETIQUETAS */

.portal-section:has(#portalCreateView:not(.hidden)) .deploy-label{
  color:#78cde8;
  font-size:12px;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
  margin-top:5px;
}

/* INPUTS Y SELECTS */

.portal-section:has(#portalCreateView:not(.hidden)) #deployForm input,
.portal-section:has(#portalCreateView:not(.hidden)) #deployForm select{
  width:100%;
  box-sizing:border-box;
  padding:14px 16px;
  border-radius:9px;
  border:1px solid rgba(0,191,255,.20);
  background:rgba(1,15,27,.82);
  color:#eafaff;
  outline:none;
  font-size:14px;
  transition:.2s ease;
}

.portal-section:has(#portalCreateView:not(.hidden)) #deployForm input::placeholder{
  color:#58798b;
}

.portal-section:has(#portalCreateView:not(.hidden)) #deployForm input:focus,
.portal-section:has(#portalCreateView:not(.hidden)) #deployForm select:focus{
  border-color:#00c8ff;
  box-shadow:
    0 0 0 3px rgba(0,191,255,.08),
    0 0 18px rgba(0,191,255,.08);
  background:rgba(2,22,37,.95);
}

.portal-section:has(#portalCreateView:not(.hidden)) #deployForm select{
  appearance:auto;
}

/* RESUMEN DEL PLAN */

.portal-section:has(#portalCreateView:not(.hidden)) .deploy-plan-summary{
  min-height:75px;
  padding:18px;
  box-sizing:border-box;
  display:grid;
  gap:7px;
  background:
    linear-gradient(145deg,rgba(0,126,180,.12),rgba(0,40,70,.16));
  border:1px solid rgba(0,191,255,.20);
  border-radius:11px;
  color:#9bd9eb;
}

.portal-section:has(#portalCreateView:not(.hidden)) .deploy-plan-summary strong{
  color:#ecfbff;
  font-size:19px;
  text-shadow:0 0 12px rgba(0,191,255,.12);
}

.portal-section:has(#portalCreateView:not(.hidden)) .deploy-plan-summary span{
  color:#75aabd;
}

/* NOTA */

.portal-section:has(#portalCreateView:not(.hidden)) .deploy-note{
  padding:14px 16px;
  background:rgba(0,0,0,.16);
  border-left:2px solid rgba(0,191,255,.45);
  border-radius:6px;
  color:#7fa9bb;
  line-height:1.55;
}

/* BOTÓN DESPLEGAR */

.portal-section:has(#portalCreateView:not(.hidden)) #deployForm > .btn{
  width:100%;
  margin-top:8px;
  padding:14px 20px;
  border:1px solid #00c8ff;
  border-radius:9px;
  background:
    linear-gradient(
      135deg,
      rgba(0,170,220,.22),
      rgba(0,90,170,.28)
    );
  color:#dffaff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.3px;
  cursor:pointer;
  transition:.2s ease;
  box-shadow:
    0 0 18px rgba(0,191,255,.07),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.portal-section:has(#portalCreateView:not(.hidden)) #deployForm > .btn:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(
      135deg,
      rgba(0,200,255,.32),
      rgba(0,100,190,.38)
    );
  border-color:#35ddff;
  color:#fff;
  box-shadow:
    0 0 25px rgba(0,191,255,.20),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* RESULTADO DEL DESPLIEGUE */

.portal-section:has(#portalCreateView:not(.hidden)) #deployResult{
  color:#9edbed;
  min-height:20px;
}

.portal-section:has(#portalCreateView:not(.hidden)) .deploy-progress{
  background:
    linear-gradient(145deg,rgba(5,35,53,.96),rgba(2,18,30,.98));
  border:1px solid rgba(0,191,255,.22);
  color:#a8d6e5;
  border-radius:11px;
}

.portal-section:has(#portalCreateView:not(.hidden)) .deploy-progress-top{
  color:#e8faff;
}

.portal-section:has(#portalCreateView:not(.hidden)) .progress-track{
  background:#061522;
  border:1px solid rgba(0,191,255,.12);
}

.portal-section:has(#portalCreateView:not(.hidden)) .progress-bar{
  background:linear-gradient(90deg,#007bff,#00d9ff);
  box-shadow:0 0 12px rgba(0,191,255,.35);
}

.portal-section:has(#portalCreateView:not(.hidden)) .progress-ip{
  background:rgba(0,191,255,.08);
  color:#8ee7ff;
  border:1px solid rgba(0,191,255,.12);
}

/* PRECIO / ESPECIFICACIONES */

.portal-section:has(#portalCreateView:not(.hidden)) .deploy-specs{
  color:#87adbd;
}

.portal-section:has(#portalCreateView:not(.hidden)) .deploy-specs b{
  color:#6fc8e4;
}

/* RESPONSIVE */

@media(max-width:700px){
  .portal-section:has(#portalCreateView:not(.hidden)) #deployForm{
    padding:20px;
    margin-top:20px;
  }

  .portal-section:has(#portalCreateView:not(.hidden)) .portal-subview-head{
    align-items:flex-start;
  }
}


/* =========================================================
   CLOUDNEX-iA — FUTURISTIC PORTAL HOME
   ========================================================= */

.portal-section:has(#portalDashboard:not(.hidden)){
  position:relative;
}

/* CABECERA DEL PANEL */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-top{
  position:relative;
  z-index:2;
  padding-bottom:20px;
  margin-bottom:28px;
  border-bottom:1px solid rgba(0,200,255,.18);
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-top::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:240px;
  height:2px;
  background:linear-gradient(
    90deg,
    #00d9ff,
    rgba(0,217,255,0)
  );
  box-shadow:0 0 12px rgba(0,217,255,.45);
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-top h3{
  margin:5px 0 0;
  color:#f2fbff;
  font-size:28px;
  letter-spacing:.3px;
}

.portal-section:has(#portalDashboard:not(.hidden)) .portal-top .eyebrow{
  color:#00c8ff;
  letter-spacing:4px;
}

/* BOTÓN CERRAR SESIÓN */

.portal-section:has(#portalDashboard:not(.hidden)) #portalLogout{
  background:rgba(0,191,255,.06);
  border:1px solid rgba(0,191,255,.32);
  color:#8ee7ff;
  border-radius:9px;
  padding:10px 17px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.portal-section:has(#portalDashboard:not(.hidden)) #portalLogout:hover{
  background:rgba(0,191,255,.14);
  border-color:#00c8ff;
  color:#fff;
  box-shadow:0 0 20px rgba(0,191,255,.16);
}

/* =========================================================
   TARJETAS PRINCIPALES
   ========================================================= */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-home{
  position:relative;
  z-index:1;

  display:grid !important;
  grid-template-columns:
    repeat(2,minmax(0,1fr)) !important;

  gap:22px;

  width:100%;
  max-width:1150px;

  margin:0 auto;
}

/* TARJETA */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-card{
  position:relative;

  min-height:280px;
  width:100%;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;

  padding:30px;

  border:1px solid rgba(0,191,255,.22);
  border-radius:17px;

  background:
    linear-gradient(
      145deg,
      rgba(7,39,61,.96),
      rgba(3,19,32,.98)
    );

  color:#eaf8ff;

  box-shadow:
    0 18px 50px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.035);

  cursor:pointer;
  text-align:left;

  overflow:hidden;

  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

/* BARRA LATERAL */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-card::before{
  content:"";

  position:absolute;
  left:0;
  top:0;
  bottom:0;

  width:3px;

  background:
    linear-gradient(
      180deg,
      #00d9ff,
      #007bff,
      transparent
    );

  box-shadow:0 0 18px rgba(0,191,255,.50);
}

/* BRILLO SUPERIOR */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-card::after{
  content:"";

  position:absolute;

  width:240px;
  height:240px;

  top:-130px;
  right:-100px;

  border-radius:50%;

  background:rgba(0,191,255,.07);

  filter:blur(25px);

  pointer-events:none;
}

/* HOVER */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-card:hover{
  transform:translateY(-5px);

  border-color:rgba(0,210,255,.58);

  background:
    linear-gradient(
      145deg,
      rgba(8,48,73,.98),
      rgba(3,22,37,.99)
    );

  box-shadow:
    0 24px 55px rgba(0,0,0,.42),
    0 0 30px rgba(0,191,255,.09),
    inset 0 1px 0 rgba(255,255,255,.05);
}

/* ICONO */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-icon{
  width:68px;
  height:68px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:24px;

  border:1px solid rgba(0,191,255,.25);
  border-radius:14px;

  background:
    radial-gradient(
      circle at center,
      rgba(0,191,255,.15),
      rgba(0,60,100,.10)
    );

  font-size:34px;

  box-shadow:
    0 0 22px rgba(0,191,255,.08),
    inset 0 1px 0 rgba(255,255,255,.04);
}

/* TÍTULO */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-title{
  position:relative;
  z-index:1;

  color:#f2fbff;

  font-size:22px;
  font-weight:800;

  letter-spacing:.3px;

  margin-bottom:10px;
}

/* DESCRIPCIÓN */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-text{
  position:relative;
  z-index:1;

  max-width:500px;

  color:#86aabd;

  font-size:14px;
  line-height:1.6;
}

/* META */

.portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-meta{
  position:relative;
  z-index:1;

  margin-top:auto;
  padding-top:25px;

  color:#61d8f5;

  font-size:13px;
  font-weight:800;

  letter-spacing:.3px;
}

/* =========================================================
   TARJETA ADMINISTRACIÓN
   ========================================================= */

.portal-section:has(#portalDashboard:not(.hidden)) #portalAdminCard{
  border-color:rgba(164,116,255,.24);
}

.portal-section:has(#portalDashboard:not(.hidden)) #portalAdminCard::before{
  background:
    linear-gradient(
      180deg,
      #b47cff,
      #7040d8,
      transparent
    );

  box-shadow:0 0 18px rgba(164,116,255,.45);
}

.portal-section:has(#portalDashboard:not(.hidden)) #portalAdminCard:hover{
  border-color:rgba(180,125,255,.60);

  box-shadow:
    0 24px 55px rgba(0,0,0,.42),
    0 0 30px rgba(164,116,255,.10);
}

.portal-section:has(#portalDashboard:not(.hidden)) #portalAdminCard .portal-menu-icon{
  border-color:rgba(164,116,255,.28);

  background:
    radial-gradient(
      circle at center,
      rgba(164,116,255,.16),
      rgba(70,30,120,.10)
    );
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:850px){

  .portal-section:has(#portalDashboard:not(.hidden)) .portal-home{
    grid-template-columns:1fr !important;
  }

  .portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-card{
    min-height:240px;
  }

}

@media(max-width:600px){

  .portal-section:has(#portalDashboard:not(.hidden)) .portal-top h3{
    font-size:23px;
  }

  .portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-card{
    padding:24px;
  }

  .portal-section:has(#portalDashboard:not(.hidden)) .portal-menu-icon{
    width:58px;
    height:58px;
    font-size:29px;
  }

}


/* ============================================================
   CLOUDNEX-iA - ASISTENTE IA
   ============================================================ */

.portal-section:has(#portalAiView:not(.hidden)) .portal-ai-chat{
  width:100%;
  max-width:1100px;
  min-height:620px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(0,191,255,.24);
  border-radius:18px;
  background:
    linear-gradient(145deg,rgba(7,39,61,.97),rgba(3,18,31,.99));
  box-shadow:
    0 22px 60px rgba(0,0,0,.42),
    0 0 35px rgba(0,191,255,.07),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.portal-ai-header{
  min-height:82px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:16px 22px;
  border-bottom:1px solid rgba(0,191,255,.16);
  background:linear-gradient(
    90deg,
    rgba(0,191,255,.08),
    rgba(0,80,130,.04),
    transparent
  );
}

.portal-ai-avatar{
  width:50px;
  height:50px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,217,255,.35);
  border-radius:13px;
  background:radial-gradient(
    circle at center,
    rgba(0,217,255,.17),
    rgba(0,60,100,.08)
  );
  font-size:27px;
  box-shadow:
    0 0 20px rgba(0,191,255,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.portal-ai-header strong{
  display:block;
  color:#f2fbff;
  font-size:17px;
  letter-spacing:.3px;
}

.portal-ai-header span{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:4px;
  color:#6d9caf;
  font-size:12px;
}

.portal-ai-header span i{
  width:7px;
  height:7px;
  display:inline-block;
  border-radius:50%;
  background:#20e38a;
  box-shadow:0 0 10px rgba(32,227,138,.65);
}

.portal-ai-messages{
  flex:1;
  min-height:450px;
  padding:28px;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:20px;
  background:
    radial-gradient(
      circle at 80% 10%,
      rgba(0,191,255,.055),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(2,19,31,.72),
      rgba(1,13,23,.88)
    );
}

.portal-ai-message{
  display:flex;
  align-items:flex-start;
  gap:11px;
  max-width:82%;
}

.portal-ai-message-avatar{
  width:34px;
  height:34px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(0,191,255,.22);
  border-radius:10px;
  background:rgba(0,191,255,.07);
  font-size:18px;
}

.portal-ai-bubble{
  padding:14px 17px;
  border:1px solid rgba(0,191,255,.16);
  border-radius:4px 15px 15px 15px;
  background:rgba(6,38,59,.82);
  color:#c6dce5;
  font-size:14px;
  line-height:1.65;
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.portal-ai-bubble strong{
  color:#63ddff;
}

.portal-ai-message-user{
  align-self:flex-end;
  flex-direction:row-reverse;
}

.portal-ai-message-user .portal-ai-message-avatar{
  border-color:rgba(0,217,255,.30);
  background:rgba(0,217,255,.10);
}

.portal-ai-message-user .portal-ai-bubble{
  border-color:rgba(0,191,255,.28);
  border-radius:15px 4px 15px 15px;
  background:linear-gradient(
    135deg,
    rgba(0,111,160,.50),
    rgba(0,55,88,.72)
  );
  color:#e5faff;
}

.portal-ai-input{
  display:flex;
  gap:11px;
  padding:18px;
  border-top:1px solid rgba(0,191,255,.15);
  background:rgba(2,20,33,.96);
}

.portal-ai-input input{
  flex:1;
  min-width:0;
  height:50px;
  box-sizing:border-box;
  padding:0 16px;
  border:1px solid rgba(0,191,255,.22);
  border-radius:10px;
  outline:none;
  background:rgba(1,12,21,.88);
  color:#eafaff;
  font-size:14px;
  transition:.2s ease;
}

.portal-ai-input input::placeholder{
  color:#53788a;
}

.portal-ai-input input:focus{
  border-color:#00c8ff;
  box-shadow:
    0 0 0 2px rgba(0,200,255,.08),
    0 0 18px rgba(0,191,255,.08);
}

.portal-ai-input button{
  height:50px;
  min-width:112px;
  padding:0 17px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(0,217,255,.65);
  border-radius:10px;
  background:linear-gradient(
    135deg,
    #00b9e8,
    #0078b8
  );
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    0 8px 24px rgba(0,125,190,.20),
    inset 0 1px 0 rgba(255,255,255,.15);
  transition:.2s ease;
}

.portal-ai-input button:hover{
  transform:translateY(-1px);
  border-color:#52e4ff;
  box-shadow:
    0 10px 28px rgba(0,145,210,.28),
    0 0 18px rgba(0,191,255,.12);
}

.portal-ai-input button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

@media(max-width:700px){
  .portal-section:has(#portalAiView:not(.hidden)) .portal-ai-chat{
    min-height:540px;
    border-radius:13px;
  }

  .portal-ai-messages{
    min-height:390px;
    padding:18px;
  }

  .portal-ai-message{
    max-width:94%;
  }

  .portal-ai-input{
    padding:12px;
  }

  .portal-ai-input button{
    min-width:52px;
  }

  .portal-ai-input button span:first-child{
    display:none;
  }
}


/* ============================================================
   CLOUDNEX-iA - SELECTOR DE IP PÚBLICA
   ============================================================ */

.portal-ip-modal-overlay{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  box-sizing:border-box;
  background:rgba(0,8,16,.78);
  backdrop-filter:blur(8px);
}

.portal-ip-modal{
  width:100%;
  max-width:560px;
  box-sizing:border-box;
  overflow:hidden;
  border:1px solid rgba(0,200,255,.34);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(7,39,61,.98),
      rgba(2,17,29,.99)
    );
  box-shadow:
    0 30px 80px rgba(0,0,0,.60),
    0 0 40px rgba(0,191,255,.10),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.portal-ip-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:22px 24px;
  border-bottom:1px solid rgba(0,191,255,.16);
  background:linear-gradient(
    90deg,
    rgba(0,191,255,.08),
    transparent
  );
}

.portal-ip-modal-header .eyebrow{
  color:#00c8ff;
  letter-spacing:3px;
  font-size:11px;
}

.portal-ip-modal-header h3{
  margin:5px 0 0;
  color:#f2fbff;
  font-size:21px;
}

.portal-ip-modal-close{
  width:38px;
  height:38px;
  flex:none;
  border:1px solid rgba(0,191,255,.22);
  border-radius:9px;
  background:rgba(0,191,255,.06);
  color:#8edff5;
  font-size:16px;
  cursor:pointer;
  transition:.2s ease;
}

.portal-ip-modal-close:hover{
  border-color:#00c8ff;
  background:rgba(0,191,255,.14);
  color:#fff;
  box-shadow:0 0 18px rgba(0,191,255,.12);
}

.portal-ip-current{
  margin:20px 24px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border:1px solid rgba(0,191,255,.14);
  border-radius:11px;
  background:rgba(1,17,29,.78);
}

.portal-ip-current span{
  color:#668b9c;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:1px;
}

.portal-ip-current strong{
  color:#67ddff;
  font-family:monospace;
  font-size:15px;
}

.portal-ip-modal-label{
  padding:0 24px 11px;
  color:#b9d7e2;
  font-size:13px;
  font-weight:700;
}

.portal-ip-options{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:0 24px 22px;
}

.portal-ip-option{
  position:relative;
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 17px;
  border:1px solid rgba(0,191,255,.17);
  border-radius:11px;
  background:rgba(3,27,44,.72);
  color:#d9f5ff;
  cursor:pointer;
  transition:.2s ease;
}

.portal-ip-option:hover{
  border-color:rgba(0,200,255,.48);
  background:rgba(5,42,65,.88);
  box-shadow:0 0 18px rgba(0,191,255,.07);
}

.portal-ip-option input{
  width:17px;
  height:17px;
  accent-color:#00c8ff;
  cursor:pointer;
}

.portal-ip-option span{
  font-family:monospace;
  font-size:15px;
  letter-spacing:.4px;
}

.portal-ip-option:has(input:checked){
  border-color:#00c8ff;
  background:
    linear-gradient(
      90deg,
      rgba(0,191,255,.15),
      rgba(0,80,120,.20)
    );
  box-shadow:
    0 0 22px rgba(0,191,255,.10),
    inset 0 0 18px rgba(0,191,255,.035);
}

.portal-ip-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:17px 24px 21px;
  border-top:1px solid rgba(0,191,255,.13);
  background:rgba(1,13,23,.72);
}

.portal-ip-cancel,
.portal-ip-confirm{
  min-height:44px;
  padding:0 18px;
  border-radius:9px;
  font-weight:800;
  cursor:pointer;
  transition:.2s ease;
}

.portal-ip-cancel{
  border:1px solid rgba(0,191,255,.20);
  background:rgba(0,191,255,.05);
  color:#8eb8c8;
}

.portal-ip-cancel:hover{
  border-color:rgba(0,191,255,.40);
  color:#e8faff;
  background:rgba(0,191,255,.10);
}

.portal-ip-confirm{
  border:1px solid rgba(0,217,255,.65);
  background:linear-gradient(
    135deg,
    #00b9e8,
    #0078b8
  );
  color:#fff;
  box-shadow:
    0 8px 22px rgba(0,125,190,.20),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.portal-ip-confirm:hover{
  border-color:#52e4ff;
  box-shadow:
    0 10px 28px rgba(0,145,210,.28),
    0 0 18px rgba(0,191,255,.12);
  transform:translateY(-1px);
}

.portal-ip-confirm:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

@media(max-width:600px){
  .portal-ip-modal-overlay{
    padding:12px;
  }

  .portal-ip-modal-header{
    padding:18px;
  }

  .portal-ip-current{
    margin:16px 18px;
  }

  .portal-ip-modal-label{
    padding-left:18px;
    padding-right:18px;
  }

  .portal-ip-options{
    padding-left:18px;
    padding-right:18px;
  }

  .portal-ip-modal-actions{
    padding-left:18px;
    padding-right:18px;
  }
}


/* =========================================================
   CLOUDNEX-iA SECURITY RADAR V2
   ========================================================= */

.security-radar{
  width:100%;
  padding:0 28px 38px;
  background:#020b18;
  box-sizing:border-box;
}

.security-radar-shell{
  width:100%;
  max-width:1700px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid #00bfff;
  border-radius:16px;
  background:
    radial-gradient(
      circle at 70% 35%,
      #073b67 0%,
      #06182b 38%,
      #020b18 78%
    );
  box-shadow:
    0 0 35px rgba(0,191,255,.14),
    inset 0 0 35px rgba(0,120,200,.05);
}

.security-radar-header{
  min-height:104px;
  box-sizing:border-box;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:24px 26px 20px;
  border-bottom:1px solid rgba(0,191,255,.18);
}

.security-radar-header h2{
  margin:7px 0 4px;
  color:#f4f9ff;
  font-size:38px;
  line-height:1;
  letter-spacing:-.7px;
}

.security-radar-header p{
  margin:0;
  color:#c2d4e6;
  font-size:15px;
}

.security-live{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border:1px solid #1bcf86;
  border-radius:999px;
  color:#8ff3c7;
  background:#062519;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.3px;
  white-space:nowrap;
  box-shadow:0 0 15px rgba(27,229,141,.12);
}

.security-live small{
  margin-left:5px;
  color:#7d9baf;
  font-size:8px;
  font-weight:600;
  letter-spacing:0;
}

.security-live-dot{
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#1be58d;
  box-shadow:0 0 10px #1be58d;
}

.security-radar-content{
  display:grid;
  grid-template-columns:minmax(330px,.43fr) minmax(0,1.57fr);
  min-height:355px;
}

.security-radar-info{
  padding:25px 24px 22px;
  box-sizing:border-box;
  background:
    linear-gradient(
      180deg,
      rgba(3,20,37,.92),
      rgba(2,11,24,.76)
    );
  border-right:1px solid rgba(0,191,255,.14);
}

.security-radar-intro{
  margin-bottom:20px;
}

.security-info-icon{
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:12px;
  border:1px solid #126da0;
  border-radius:10px;
  color:#00c8ff;
  background:#06223a;
  font-size:23px;
  box-shadow:0 0 20px rgba(0,191,255,.1);
}

.security-radar-info h3{
  margin:0 0 8px;
  color:#fff;
  font-size:22px;
}

.security-radar-info > p{
  margin:0;
  color:#9fb6ca;
  line-height:1.5;
  font-size:12px;
  max-width:430px;
}

.security-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.security-stat{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #123b5a;
  border-radius:9px;
  background:
    linear-gradient(
      145deg,
      rgba(8,34,57,.92),
      rgba(5,24,41,.92)
    );
}

.security-stat-icon{
  width:31px;
  height:31px;
  flex:0 0 31px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #087eaf;
  border-radius:7px;
  color:#00bfff;
  background:#062b45;
  font-size:16px;
}

.security-stat span{
  display:block;
  color:#62c8ef;
  font-size:7px;
  font-weight:800;
  letter-spacing:.8px;
}

.security-stat strong{
  display:block;
  margin-top:2px;
  color:#f1f7fc;
  font-size:12px;
  line-height:1.15;
}

.security-stat small{
  display:block;
  margin-top:2px;
  color:#708ba2;
  font-size:7px;
  line-height:1.2;
}

.security-radar-map{
  position:relative;
  min-width:0;
  min-height:355px;
  overflow:hidden;
  background:#000;
}

.security-radar-map iframe{
  display:block;
  width:100%;
  height:355px;
  border:0;
  background:#000;
}

.security-radar-footer{
  min-height:32px;
  box-sizing:border-box;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:8px 16px;
  border-top:1px solid rgba(0,191,255,.13);
  color:#708da5;
  font-size:9px;
}

.security-radar-footer span:first-child{
  display:flex;
  align-items:center;
  gap:7px;
  color:#72dcb0;
  font-weight:800;
  letter-spacing:1px;
}

.security-radar-footer span:first-child i{
  width:6px;
  height:6px;
  display:inline-block;
  border-radius:50%;
  background:#1be58d;
  box-shadow:0 0 8px #1be58d;
}

/* RESPONSIVE */

@media(max-width:1000px){

  .security-radar-content{
    grid-template-columns:1fr;
  }

  .security-radar-info{
    border-right:0;
    border-bottom:1px solid rgba(0,191,255,.14);
  }

  .security-radar-map{
    min-height:420px;
  }

  .security-radar-map iframe{
    height:420px;
  }

}

@media(max-width:700px){

  .security-radar{
    padding:0 16px 35px;
  }

  .security-radar-header{
    padding:21px 18px 18px;
    align-items:flex-start;
    flex-direction:column;
  }

  .security-radar-header h2{
    font-size:31px;
  }

  .security-live{
    align-self:flex-start;
  }

  .security-stats{
    grid-template-columns:1fr;
  }

  .security-radar-map{
    min-height:360px;
  }

  .security-radar-map iframe{
    height:360px;
  }

  .security-radar-footer{
    align-items:flex-start;
    flex-direction:column;
  }

}

/* =========================================================
   CLOUDNEX-iA — WHATSAPP + CHAT SOPORTE
   ========================================================= */

.header-support{
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  text-decoration:none;
  padding:7px 11px;
  border:1px solid rgba(37,211,102,.28);
  border-radius:10px;
  background:rgba(37,211,102,.05);
  transition:.2s ease;
}

.header-support:hover{
  border-color:#25d366;
  background:rgba(37,211,102,.10);
  box-shadow:0 0 18px rgba(37,211,102,.13);
}

.header-support .whatsapp-icon{
  width:28px;
  height:28px;
}

.header-support .whatsapp-icon svg,
.footer-support .whatsapp-icon svg,
.whatsapp-float .whatsapp-icon svg{
  width:100%;
  height:100%;
  display:block;
  fill:currentColor;
}

.header-support strong{
  display:block;
  color:#fff;
  font-size:13px;
  line-height:1.1;
}

.header-support small{
  display:block;
  margin-top:2px;
  color:#76e6a1;
  font-size:9px;
  letter-spacing:.4px;
}

.footer-support{
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  text-decoration:none;
  padding:6px 10px;
  border:1px solid rgba(37,211,102,.25);
  border-radius:9px;
  background:rgba(37,211,102,.04);
}

.footer-support .whatsapp-icon{
  width:23px;
  height:23px;
  color:#25d366;
}

.footer-support strong{
  color:#fff;
  font-size:12px;
}

.footer-support small{
  display:block;
  color:#72d99a;
  font-size:9px;
}

/* WhatsApp flotante */

.whatsapp-float{
  right:22px !important;
  bottom:22px !important;
  width:58px !important;
  height:58px !important;
  padding:0 !important;
  border-radius:50% !important;
  background:#18c964 !important;
  display:grid !important;
  place-items:center !important;
  color:#fff !important;
  z-index:1000 !important;
  box-shadow:0 8px 25px rgba(0,0,0,.35),0 0 18px rgba(37,211,102,.18);
}

.whatsapp-float .whatsapp-icon{
  width:29px;
  height:29px;
}

/* =========================================================
   BOTÓN CHAT
   ========================================================= */

.support-chat-launcher{
  position:fixed;
  right:22px;
  bottom:92px;
  z-index:1001;
  height:54px;
  min-width:54px;
  padding:0 17px;
  border:1px solid rgba(0,191,255,.55);
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  cursor:pointer;
  color:#fff;
  background:linear-gradient(135deg,#06243b,#073454);
  box-shadow:
    0 8px 26px rgba(0,0,0,.35),
    0 0 22px rgba(0,191,255,.18);
  transition:.2s ease;
}

.support-chat-launcher:hover{
  transform:translateY(-3px);
  border-color:#00c8ff;
  box-shadow:
    0 12px 30px rgba(0,0,0,.38),
    0 0 28px rgba(0,191,255,.30);
}

.support-chat-launcher.chat-open{
  border-color:#00d9ff;
  background:#062b46;
}

.support-chat-launcher-icon{
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  font-size:20px;
}

.support-chat-launcher-text{
  color:#dff8ff;
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
}

.support-chat-notification{
  position:absolute;
  top:-5px;
  right:-3px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#00d9ff;
  color:#001522;
  font-size:10px;
  font-weight:900;
  box-shadow:0 0 12px rgba(0,217,255,.6);
}

/* =========================================================
   PANEL CHAT
   ========================================================= */

.support-chat-panel{
  position:fixed;
  right:22px;
  bottom:158px;
  z-index:1002;
  width:min(390px,calc(100vw - 32px));
  height:min(600px,calc(100vh - 190px));
  min-height:420px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #00bfff;
  border-radius:17px;
  background:
    radial-gradient(circle at 90% 0%,rgba(0,191,255,.12),transparent 34%),
    linear-gradient(145deg,#061c2e,#020d18 75%);
  box-shadow:
    0 18px 60px rgba(0,0,0,.55),
    0 0 35px rgba(0,191,255,.14);
}

.support-chat-header{
  min-height:72px;
  padding:13px 15px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid rgba(0,191,255,.18);
  background:rgba(3,18,31,.92);
}

.support-chat-identity{
  display:flex;
  align-items:center;
  gap:10px;
}

.support-chat-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid #087fac;
  border-radius:11px;
  background:#062b45;
  font-size:22px;
  box-shadow:0 0 16px rgba(0,191,255,.12);
}

.support-chat-identity strong{
  display:block;
  color:#f1fbff;
  font-size:14px;
}

.support-chat-identity span{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:3px;
  color:#7da9bf;
  font-size:9px;
}

.support-chat-identity span i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#1be58d;
  box-shadow:0 0 8px #1be58d;
}

.support-chat-close{
  width:34px;
  height:34px;
  border:1px solid rgba(0,191,255,.18);
  border-radius:9px;
  background:transparent;
  color:#8fb8cc;
  font-size:23px;
  cursor:pointer;
}

.support-chat-close:hover{
  color:#fff;
  border-color:#00bfff;
  background:rgba(0,191,255,.08);
}

.support-chat-messages{
  flex:1;
  overflow-y:auto;
  padding:17px 14px;
  display:flex;
  flex-direction:column;
  gap:12px;
  scrollbar-width:thin;
  scrollbar-color:#075d81 transparent;
}

.support-chat-message{
  display:flex;
  gap:8px;
  max-width:92%;
}

.support-chat-message.user{
  align-self:flex-end;
  justify-content:flex-end;
}

.support-chat-message-avatar{
  width:28px;
  height:28px;
  flex:0 0 28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#062b45;
  border:1px solid #087fac;
  font-size:14px;
}

.support-chat-bubble{
  padding:10px 12px;
  border-radius:11px;
  color:#dceef7;
  background:#082238;
  border:1px solid #123e59;
  font-size:12px;
  line-height:1.5;
  white-space:pre-wrap;
}

.support-chat-message.user .support-chat-bubble{
  color:#eaffff;
  background:linear-gradient(135deg,#075278,#063c59);
  border-color:#087fae;
  border-bottom-right-radius:4px;
}

.support-chat-message.bot .support-chat-bubble{
  border-bottom-left-radius:4px;
}

.support-chat-input{
  display:flex;
  gap:8px;
  padding:11px;
  border-top:1px solid rgba(0,191,255,.15);
  background:#031321;
}

.support-chat-input input{
  flex:1;
  min-width:0;
  padding:12px 13px;
  border:1px solid #17445f;
  border-radius:9px;
  outline:none;
  color:#eafaff;
  background:#061a2b;
  font-size:12px;
}

.support-chat-input input:focus{
  border-color:#00bfff;
  box-shadow:0 0 12px rgba(0,191,255,.10);
}

.support-chat-input button{
  width:43px;
  flex:0 0 43px;
  border:1px solid #00aee6;
  border-radius:9px;
  color:#fff;
  background:#007fae;
  cursor:pointer;
  font-size:17px;
}

.support-chat-input button:hover{
  background:#009dd2;
}

.support-chat-footer{
  padding:6px 12px 8px;
  text-align:center;
  color:#53788d;
  background:#020d18;
  font-size:8px;
  letter-spacing:.5px;
}

@media(max-width:600px){
  .header-support{
    padding:6px 8px;
  }

  .header-support small{
    display:none;
  }

  .header-support strong{
    font-size:11px;
  }

  .header-support .whatsapp-icon{
    width:24px;
    height:24px;
  }

  .footer-support{
    width:100%;
    justify-content:center;
  }

  .support-chat-launcher{
    right:16px;
    bottom:82px;
    height:52px;
  }

  .support-chat-launcher-text{
    display:none;
  }

  .support-chat-panel{
    right:16px;
    bottom:145px;
    width:calc(100vw - 32px);
    height:min(590px,calc(100vh - 175px));
    min-height:400px;
  }

  .whatsapp-float{
    right:16px !important;
    bottom:16px !important;
  }
}


/* =========================================================
   WHATSAPP SOPORTE — CABECERA
   ========================================================= */

.header-support{
  display:flex;
  align-items:center;
  gap:9px;
  color:#fff;
  text-decoration:none;
  padding:7px 10px;
  border-radius:10px;
  transition:all .2s ease;
}

.header-support:hover{
  background:rgba(37,211,102,.08);
  transform:translateY(-1px);
}

.header-support .whatsapp-icon{
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}

.header-support .whatsapp-icon svg{
  width:100%;
  height:100%;
  display:block;
  fill:#25D366;
}

.header-support-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
}

.header-support-text strong{
  font-size:15px;
  font-weight:800;
  color:#fff;
}

.header-support-text small{
  margin-top:4px;
  font-size:10px;
  color:#8fa9bd;
}

@media(max-width:900px){
  .header-support{
    display:none;
  }
}

/* =========================================================
   CLOUDNEX-iA — CONVERSACIÓN DE SOPORTE
   ========================================================= */

.portal-support-conversation{
  width:100%;
  margin-top:18px;
  padding:24px;
  box-sizing:border-box;
  border:1px solid rgba(36,211,255,.22);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(5,35,55,.96),
      rgba(3,20,34,.98)
    );
  box-shadow:
    0 12px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.portal-support-conversation-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:20px;
}

.portal-support-conversation-title{
  flex:1;
}

.portal-support-conversation-title h4{
  margin:4px 0 0;
  font-size:24px;
}

.portal-support-conversation-status{
  padding:9px 14px;
  border-radius:999px;
  font-weight:800;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);
}

.portal-support-conversation-status.open{
  background:rgba(239,68,68,.10);
  color:#ff7180;
}

.portal-support-conversation-status.in-progress{
  background:rgba(255,145,65,.10);
  color:#ff9b62;
}

.portal-support-conversation-status.closed{
  background:rgba(74,222,128,.10);
  color:#68e79a;
}

.portal-support-conversation-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:20px;
}

.portal-support-conversation-info > div{
  padding:14px 16px;
  border-radius:12px;
  background:rgba(0,0,0,.16);
  border:1px solid rgba(36,211,255,.10);
}

.portal-support-conversation-info span{
  display:block;
  margin-bottom:5px;
  color:#7f9daf;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.portal-support-conversation-info strong{
  color:#d9edf7;
  line-height:1.4;
}

.portal-support-messages{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:180px;
  max-height:520px;
  overflow-y:auto;
  padding:18px;
  border-radius:14px;
  background:rgba(1,10,18,.55);
  border:1px solid rgba(36,211,255,.10);
}

.portal-support-message{
  max-width:78%;
}

.portal-support-message.customer{
  align-self:flex-start;
}

.portal-support-message.technician{
  align-self:flex-end;
}

.portal-support-message-label{
  margin-bottom:6px;
  color:#8fa9bd;
  font-size:12px;
  font-weight:700;
}

.portal-support-message-bubble{
  padding:12px 15px;
  border-radius:14px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
}

.portal-support-message.customer .portal-support-message-bubble{
  background:rgba(20,75,105,.55);
  border:1px solid rgba(36,211,255,.16);
}

.portal-support-message.technician .portal-support-message-bubble{
  background:rgba(0,157,215,.16);
  border:1px solid rgba(36,211,255,.24);
}

.portal-support-message small{
  display:block;
  margin-top:5px;
  color:#668093;
  font-size:10px;
}

.portal-support-message.technician small{
  text-align:right;
}

.portal-support-reply{
  margin-top:18px;
}

.portal-support-reply textarea{
  width:100%;
  min-height:110px;
  resize:vertical;
  box-sizing:border-box;
  padding:14px 16px;
  border-radius:13px;
  border:1px solid rgba(36,211,255,.18);
  background:#03131f;
  color:#e8f7ff;
  outline:none;
  font:inherit;
}

.portal-support-reply textarea:focus{
  border-color:rgba(36,211,255,.55);
  box-shadow:0 0 0 3px rgba(36,211,255,.07);
}

.portal-support-reply-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-top:10px;
  color:#718d9f;
  font-size:12px;
}

.portal-support-closed-notice{
  margin-top:18px;
  padding:14px 16px;
  border-radius:12px;
  color:#68e79a;
  background:rgba(74,222,128,.06);
  border:1px solid rgba(74,222,128,.16);
}

@media(max-width:700px){
  .portal-support-conversation{
    padding:16px;
  }

  .portal-support-conversation-head{
    align-items:flex-start;
    flex-wrap:wrap;
  }

  .portal-support-conversation-status{
    width:100%;
    text-align:center;
  }

  .portal-support-conversation-info{
    grid-template-columns:1fr;
  }

  .portal-support-message{
    max-width:92%;
  }

  .portal-support-reply-actions{
    flex-direction:column;
    align-items:stretch;
  }
}


/* =========================================================
   CLOUDNEX-iA — SOPORTE TÉCNICO CLIENTE
   ========================================================= */

.portal-support-client-empty{
  width:100%;
  box-sizing:border-box;
  padding:42px 28px;
  margin-top:18px;
  text-align:center;
  border:1px solid rgba(36,211,255,.20);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(5,35,55,.96),
      rgba(3,20,34,.98)
    );
  box-shadow:
    0 12px 40px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.portal-support-client-empty-icon{
  font-size:48px;
  margin-bottom:12px;
}

.portal-support-client-empty h4{
  margin:0 0 10px;
  font-size:24px;
}

.portal-support-client-empty p{
  max-width:620px;
  margin:0 auto 22px;
  color:#8fa9bd;
  line-height:1.6;
}

.portal-support-client-card{
  width:100%;
  box-sizing:border-box;
  margin-top:14px;
  padding:20px;
  border:1px solid rgba(36,211,255,.18);
  border-radius:16px;
  background:
    linear-gradient(
      145deg,
      rgba(5,35,55,.94),
      rgba(3,20,34,.98)
    );
  box-shadow:
    0 8px 28px rgba(0,0,0,.16);
}

.portal-support-client-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}

.portal-support-client-card h4{
  margin:4px 0 0;
  font-size:20px;
}

.portal-support-client-card p{
  margin:16px 0;
  color:#9bb1c2;
  line-height:1.55;
}

.portal-support-client-meta{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
  margin-bottom:16px;
  color:#718da1;
  font-size:13px;
}

.portal-support-client-conversation{
  width:100%;
  box-sizing:border-box;
  margin-top:18px;
  padding:24px;
  border:1px solid rgba(36,211,255,.22);
  border-radius:18px;
  background:
    linear-gradient(
      145deg,
      rgba(5,35,55,.96),
      rgba(3,20,34,.98)
    );
  box-shadow:
    0 12px 40px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.portal-support-client-conversation-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:20px;
}

.portal-support-client-conversation-head > div{
  flex:1;
}

.portal-support-client-conversation-head h4{
  margin:4px 0 0;
  font-size:23px;
}

.portal-support-client-messages{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-height:180px;
  max-height:520px;
  overflow-y:auto;
  padding:8px 4px 18px;
}

.portal-support-client-message{
  max-width:78%;
}

.portal-support-client-message.customer{
  align-self:flex-end;
  text-align:right;
}

.portal-support-client-message.technician{
  align-self:flex-start;
  text-align:left;
}

.portal-support-client-message-bubble{
  padding:13px 16px;
  border-radius:14px;
  line-height:1.5;
  word-break:break-word;
}

.portal-support-client-message.customer
.portal-support-message-bubble{
  background:rgba(36,211,255,.12);
  border:1px solid rgba(36,211,255,.20);
}

.portal-support-client-message.technician
.portal-support-message-bubble{
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.09);
}

.portal-support-client-message small{
  display:block;
  margin-top:5px;
  color:#607b8d;
  font-size:11px;
}

@media(max-width:700px){

  .portal-support-client-card-head,
  .portal-support-client-conversation-head{
    flex-direction:column;
    align-items:flex-start;
  }

  .portal-support-client-message{
    max-width:92%;
  }

  .portal-support-client-conversation{
    padding:16px;
  }

}