:root{
  --black:#05080f;
  --navy:#07152f;
  --navy-2:#0b2553;
  --blue:#123f8f;
  --blue-2:#1f55b6;
  --white:#fff;
  --bg:#f3f5f8;
  --panel:#fff;
  --ink:#111827;
  --muted:#667085;
  --line:#d9e0ea;
  --soft:#eef2f7;
  --danger:#b42318;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--ink);
}
button,input,select,textarea{font:inherit}
button{touch-action:manipulation}
.topbar{
  height:72px;
  padding:0 max(18px,calc((100vw - 1240px)/2));
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--black);
  color:white;
}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:42px;height:42px;border-radius:12px;
  display:grid;place-items:center;
  font-weight:900;letter-spacing:.04em;
  background:linear-gradient(135deg,var(--blue),var(--blue-2));
}
.brand strong{display:block;font-size:.97rem}
.brand span{display:block;color:#99a4b6;font-size:.78rem;margin-top:2px}
.hero{
  background:
    radial-gradient(circle at 80% 10%,rgba(31,85,182,.35),transparent 32%),
    linear-gradient(135deg,#05080f 0%,#07152f 50%,#0b2553 100%);
  color:white;
  padding:48px 20px 76px;
}
.hero-content{max-width:900px;margin:auto;text-align:center}
.pill,.mini-pill{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.pill{
  padding:7px 11px;
  color:#dbe8ff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
  font-size:.7rem;
}
.hero h1{
  margin:12px auto 14px;
  max-width:820px;
  font-size:clamp(2rem,5vw,3.55rem);
  line-height:1.03;
  letter-spacing:-.035em;
}
.hero p{
  max-width:760px;
  margin:auto;
  color:#c6cfdd;
  line-height:1.65;
  font-size:1.04rem;
}
.shell{
  width:min(1240px,calc(100% - 28px));
  margin:-38px auto 54px;
}
.tabs{
  display:flex;
  gap:7px;
  overflow:auto;
  padding:9px;
  border-radius:17px;
  background:white;
  box-shadow:0 12px 35px rgba(7,21,47,.12);
  position:relative;
  z-index:5;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:0 0 auto;
  border:0;
  padding:11px 15px;
  border-radius:11px;
  background:white;
  color:#475467;
  font-weight:780;
  cursor:pointer;
}
.tab:hover{background:#f3f6fa}
.tab.active{background:var(--navy);color:white}
.workspace{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);
  gap:20px;
  align-items:start;
  margin-top:18px;
}
.panel{
  background:var(--panel);
  border:1px solid rgba(7,21,47,.08);
  border-radius:20px;
  padding:24px;
  box-shadow:0 14px 40px rgba(7,21,47,.08);
}
.panel-title{margin-bottom:21px}
.panel-title h2,.result-head h2{
  margin:5px 0 5px;
  font-size:1.38rem;
  letter-spacing:-.015em;
}
.panel-title p{margin:0;color:var(--muted);line-height:1.5}
.mini-pill{
  background:#eaf0fb;
  color:var(--blue);
  padding:5px 8px;
  font-size:.63rem;
}
.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{margin-bottom:17px}
.field label{
  display:block;
  margin-bottom:7px;
  font-weight:750;
  font-size:.92rem;
}
input,select,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:11px;
  padding:12px 13px;
  color:var(--ink);
  background:white;
  outline:none;
  transition:border .18s,box-shadow .18s;
}
textarea{resize:vertical;line-height:1.48}
input:focus,select:focus,textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(18,63,143,.09);
}
.module-fields{animation:fade .18s ease}
.hidden{display:none!important}
@keyframes fade{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
.upload-box{
  border:1.5px dashed #b8c4d5;
  border-radius:14px;
  margin:2px 0 17px;
  overflow:hidden;
  background:#f8fafc;
}
.upload-button{
  width:100%;
  border:0;
  background:transparent;
  padding:28px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  cursor:pointer;
  color:var(--navy);
}
.upload-button:hover{background:#f1f5fa}
.upload-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--navy);
  color:white;
  border-radius:11px;
  font-size:1.45rem;
  margin-bottom:3px;
}
.upload-button small{color:var(--muted)}
.image-preview-wrap{padding:12px}
.image-preview-wrap img{
  width:100%;
  max-height:330px;
  object-fit:contain;
  border-radius:10px;
  background:#e9edf3;
}
.image-info{
  display:flex;justify-content:space-between;gap:12px;
  align-items:center;margin-top:10px;font-size:.88rem
}
.image-info strong{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%
}
.text-btn{
  border:0;background:transparent;color:var(--danger);
  font-weight:750;cursor:pointer;padding:4px
}
.notice{
  border-left:3px solid var(--blue);
  background:#f1f5fb;
  padding:11px 12px;
  border-radius:8px;
  color:#43506a;
  line-height:1.45;
  font-size:.87rem;
  margin-bottom:17px;
}
.switches{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 12px;
  margin:3px 0 20px;
}
.switch-row{
  display:flex;
  align-items:center;
  gap:9px;
  background:#f8fafc;
  border:1px solid #edf1f5;
  border-radius:10px;
  padding:10px 11px;
  font-size:.88rem;
  font-weight:650;
  cursor:pointer;
}
.switch-row input{width:auto;margin:0;accent-color:var(--navy)}
.btn{
  border:0;border-radius:11px;padding:12px 16px;
  font-weight:820;cursor:pointer;transition:.16s ease;
}
.btn:hover{transform:translateY(-1px)}
.primary{background:var(--navy);color:white}
.primary:hover{background:var(--navy-2)}
.secondary{background:#eef2f7;color:var(--navy)}
.ghost{
  background:transparent;color:white;border:1px solid #354153
}
.danger{
  color:var(--danger);
  background:#fff3f2;
  border:1px solid #ffd5d2;
}
.full{width:100%}
.small{padding:9px 12px;font-size:.86rem}
.result-panel{
  position:sticky;
  top:18px;
  min-height:420px;
}
.empty-state{
  min-height:370px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:var(--muted);
}
.empty-icon{
  width:54px;height:54px;border-radius:17px;
  display:grid;place-items:center;
  font-size:1.65rem;color:white;
  background:linear-gradient(135deg,var(--navy),var(--blue-2));
  margin-bottom:12px;
}
.empty-state h3{color:var(--ink);margin:0 0 7px}
.empty-state p{max-width:370px;line-height:1.5;margin:0}
.result-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.actions{display:flex;gap:7px}
.output{
  min-height:430px;
  background:#f8fafc;
  font-size:.89rem;
}
.ai-section{
  margin:18px 0;
  padding-top:16px;
  border-top:1px solid #edf0f4;
}
.ai-section h3{margin:0;font-size:.98rem}
.ai-section p{margin:4px 0 12px;color:var(--muted);font-size:.82rem}
.ai-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ai-btn{
  border:1px solid var(--line);
  background:white;
  color:var(--navy);
  border-radius:10px;
  padding:10px 9px;
  font-weight:780;
  cursor:pointer;
}
.ai-btn:hover{border-color:#91a4c0;background:#f8fafc}
.ai-dot{
  width:7px;height:7px;border-radius:99px;
  display:inline-block;background:var(--blue);margin-right:5px;
}
.toast{
  position:fixed;left:50%;bottom:24px;
  transform:translateX(-50%) translateY(12px);
  background:#09111f;color:white;
  padding:11px 17px;border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
  opacity:0;pointer-events:none;transition:.2s;z-index:50;
  font-size:.88rem;font-weight:650;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:980px){
  .workspace{grid-template-columns:1fr}
  .result-panel{position:static}
}
@media(max-width:640px){
  .topbar{height:64px;padding:0 14px}
  .brand span{display:none}
  .hero{padding:38px 15px 66px}
  .hero h1{font-size:2.12rem}
  .shell{width:min(100% - 16px,1240px)}
  .tabs{border-radius:14px;padding:7px}
  .tab{padding:10px 12px;font-size:.86rem}
  .panel{padding:17px;border-radius:16px}
  .grid.two,.switches{grid-template-columns:1fr}
  .result-head{align-items:flex-start;flex-direction:column}
  .actions{width:100%}
  .actions .btn{flex:1}
  .ai-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}


/* ==========================================================
   BOTONES GRANDES, MODERNOS Y LLAMATIVOS
   ========================================================== */

.tabs{
  gap:12px;
  padding:13px;
  border-radius:22px;
  background:rgba(255,255,255,.99);
  box-shadow:0 18px 45px rgba(7,21,47,.18);
}

.tab{
  min-height:64px;
  padding:16px 22px;
  border-radius:15px;
  font-size:1rem;
  font-weight:850;
  letter-spacing:-.01em;
  color:#263650;
  border:1px solid #dce4ef;
  background:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);
  box-shadow:0 5px 13px rgba(7,21,47,.06);
  transition:transform .18s ease, box-shadow .18s ease,
             border-color .18s ease, background .18s ease, color .18s ease;
}

.tab:hover{
  transform:translateY(-3px);
  border-color:#8eade1;
  color:#0a3479;
  background:linear-gradient(180deg,#f8fbff 0%,#edf4ff 100%);
  box-shadow:0 11px 24px rgba(18,63,143,.16);
}

.tab.active{
  color:#fff;
  border-color:#2568df;
  background:linear-gradient(135deg,#06152f 0%,#0d3b87 54%,#1768e8 100%);
  box-shadow:
    0 13px 28px rgba(20,80,190,.34),
    inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateY(-2px);
}

.tab.active::after{
  content:"";
  display:block;
  height:3px;
  margin-top:7px;
  border-radius:99px;
  background:linear-gradient(90deg,#5fc7ff,#ffffff,#5fc7ff);
  box-shadow:0 0 8px rgba(95,199,255,.75);
}

.btn{
  min-height:49px;
  padding:13px 19px;
  border-radius:13px;
  font-weight:850;
}

.btn.primary{
  min-height:60px;
  font-size:1.06rem;
  letter-spacing:.01em;
  color:#fff;
  background:linear-gradient(135deg,#06152f 0%,#0e3d8c 55%,#1769ea 100%);
  box-shadow:0 13px 28px rgba(18,63,143,.26);
}

.btn.primary:hover{
  transform:translateY(-2px) scale(1.006);
  box-shadow:0 17px 34px rgba(18,63,143,.34);
}

.btn.secondary{
  min-height:47px;
  padding:11px 17px;
  font-size:.94rem;
  color:#0b3378;
  border:1px solid #c7d5e9;
  background:linear-gradient(180deg,#f9fbff 0%,#e9f0fa 100%);
}

.btn.secondary:hover{
  border-color:#78a1e4;
  background:#e8f1ff;
}

.btn.danger{
  min-height:53px;
  font-size:.97rem;
  margin-top:5px;
}

.ai-grid{
  gap:11px;
}

.ai-btn{
  min-height:56px;
  padding:13px 12px;
  border-radius:13px;
  font-size:.94rem;
  font-weight:850;
  border:1px solid #ccd7e6;
  background:linear-gradient(180deg,#fff 0%,#f6f8fb 100%);
  box-shadow:0 5px 12px rgba(7,21,47,.06);
  transition:.18s ease;
}

.ai-btn:hover{
  transform:translateY(-2px);
  color:#0a3c91;
  border-color:#72a0e7;
  background:#eef5ff;
  box-shadow:0 10px 22px rgba(18,63,143,.15);
}

.ai-dot{
  width:9px;
  height:9px;
  box-shadow:0 0 10px rgba(23,96,211,.60);
}

.upload-button{
  min-height:155px;
}

.upload-button strong{
  font-size:1.02rem;
}

.upload-icon{
  width:50px;
  height:50px;
  border-radius:15px;
  font-size:1.7rem;
  box-shadow:0 9px 20px rgba(7,21,47,.22);
}

/* Tablet */
@media(max-width:980px){
  .tabs{gap:9px}
  .tab{
    min-height:60px;
    padding:14px 18px;
  }
}

/* Celular: módulos tipo tarjetas grandes */
@media(max-width:640px){
  .tabs{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;
    gap:9px;
    padding:10px;
  }

  .tab{
    width:100%;
    min-height:68px;
    padding:13px 10px;
    white-space:normal;
    line-height:1.2;
    font-size:.89rem;
    text-align:center;
  }

  .btn.primary{
    min-height:62px;
    font-size:1rem;
  }

  .ai-btn{
    min-height:59px;
  }
}


/* ==========================================================
   TEMA OSCURO — NEGRO + AZUL + AMARILLO
   ========================================================== */
:root{
  --black:#030712;
  --black-2:#07101f;
  --panel:#081120;
  --panel-2:#0b1730;
  --line:#19314f;
  --ink:#f8fbff;
  --muted:#a9b9d3;
  --blue:#2f7df6;
  --blue-2:#59b3ff;
  --yellow:#ffd54a;
  --yellow-2:#ffb800;
  --soft:#0d1a30;
  --bg:#02050d;
}
body{
  background:
    radial-gradient(circle at 20% 0%, rgba(47,125,246,.20), transparent 28%),
    radial-gradient(circle at 85% 10%, rgba(255,213,74,.12), transparent 22%),
    linear-gradient(180deg,#02050d 0%, #050b16 100%);
  color:var(--ink);
}
.topbar{
  background:linear-gradient(180deg,#02050d 0%, #040a14 100%);
  border-bottom:1px solid rgba(89,179,255,.12);
}
.brand strong{color:#ffffff}
.brand span{color:#8fb6ff}
.brand-mark{
  background:linear-gradient(135deg,#1145a6 0%, #2f7df6 52%, #59b3ff 100%);
  box-shadow:0 0 18px rgba(47,125,246,.35);
}
.hero{
  background:
    radial-gradient(circle at 78% 14%, rgba(89,179,255,.18), transparent 24%),
    radial-gradient(circle at 24% 18%, rgba(255,213,74,.10), transparent 20%),
    linear-gradient(135deg,#02050d 0%,#061227 45%,#0a1d3d 100%);
}
.pill{
  background:rgba(255,213,74,.10);
  color:#ffe27d;
  border:1px solid rgba(255,213,74,.28);
}
.hero h1{color:#ffffff}
.hero p{color:#c8d8f2}
.shell{position:relative}
.shell::before{
  content:"";
  position:absolute;
  inset:70px 0 auto 0;
  height:220px;
  background:radial-gradient(circle at 50% 0%, rgba(47,125,246,.10), transparent 58%);
  pointer-events:none;
}
.tabs{
  background:rgba(7,16,31,.94);
  border:1px solid rgba(89,179,255,.14);
  box-shadow:0 18px 45px rgba(0,0,0,.35);
}
.tab{
  color:#d8e6fb;
  border:1px solid rgba(89,179,255,.12);
  background:linear-gradient(180deg,#0a1730 0%, #0d1d39 100%);
  box-shadow:0 5px 13px rgba(0,0,0,.22);
}
.tab:hover{
  color:#ffffff;
  border-color:rgba(89,179,255,.45);
  background:linear-gradient(180deg,#0d2042 0%, #10264c 100%);
  box-shadow:0 11px 24px rgba(47,125,246,.15);
}
.tab.active{
  color:#061227;
  border-color:rgba(255,213,74,.75);
  background:linear-gradient(135deg,#ffd54a 0%, #ffc93a 55%, #ffb800 100%);
  box-shadow:0 13px 28px rgba(255,184,0,.22), inset 0 1px 0 rgba(255,255,255,.35);
}
.tab.active::after{
  background:linear-gradient(90deg,#ffffff,#ffe27d,#ffffff);
  box-shadow:0 0 8px rgba(255,213,74,.8);
}
.panel{
  background:linear-gradient(180deg,#06101f 0%, #081426 100%);
  border:1px solid rgba(89,179,255,.14);
  box-shadow:0 14px 40px rgba(0,0,0,.34);
}
.panel-title h2,.result-head h2,.empty-state h3,.ai-section h3,
.field label,.result-panel h2,.result-panel h3{
  color:#ffffff;
}
.panel-title p,.empty-state p,.ai-section p,.notice,.field small,.image-info{color:#b8c8e1}
.mini-pill{
  background:rgba(47,125,246,.14);
  color:#8fc4ff;
  border:1px solid rgba(89,179,255,.25);
}
input,select,textarea{
  background:#0a1730;
  color:#ffffff;
  border:1px solid rgba(89,179,255,.18);
}
input::placeholder, textarea::placeholder{color:#89a0c4}
input:focus,select:focus,textarea:focus{
  border-color:#59b3ff;
  box-shadow:0 0 0 3px rgba(89,179,255,.14);
}
select{color:#ffffff}
option{background:#081426;color:#ffffff}
.switch-row{
  background:#0a1730;
  border:1px solid rgba(89,179,255,.12);
  color:#ffffff;
}
.switch-row input{accent-color:#ffd54a}
.notice{
  border-left:3px solid #ffd54a;
  background:rgba(255,213,74,.08);
  color:#ffe9a6;
}
.upload-box{
  background:#081426;
  border:1.5px dashed rgba(89,179,255,.28);
}
.upload-button{color:#ffffff;background:transparent}
.upload-button:hover{background:rgba(47,125,246,.08)}
.upload-button small{color:#8fb6ff}
.upload-icon{
  background:linear-gradient(135deg,#1145a6 0%,#2f7df6 52%,#59b3ff 100%);
}
.text-btn{color:#ffd54a}
.image-preview-wrap img{background:#0b1730}
.btn.secondary{
  color:#ffffff;
  border:1px solid rgba(89,179,255,.22);
  background:linear-gradient(180deg,#0e2143 0%, #0a1730 100%);
}
.btn.secondary:hover{
  border-color:#59b3ff;
  background:#11264c;
}
.btn.primary{
  color:#061227;
  background:linear-gradient(135deg,#ffd54a 0%, #ffc93a 55%, #ffb800 100%);
  box-shadow:0 13px 28px rgba(255,184,0,.25);
}
.btn.primary:hover{
  box-shadow:0 17px 34px rgba(255,184,0,.34);
}
.btn.danger{
  color:#ffffff;
  background:linear-gradient(180deg,#3a1020 0%, #2c0a17 100%);
  border:1px solid rgba(255,120,120,.28);
}
.output{
  background:#081426;
  color:#ffffff;
  border:1px solid rgba(89,179,255,.14);
}
.empty-icon{
  background:linear-gradient(135deg,#1145a6 0%, #2f7df6 60%, #59b3ff 100%);
  box-shadow:0 0 20px rgba(47,125,246,.35);
}
.ai-btn{
  color:#ffffff;
  border:1px solid rgba(89,179,255,.18);
  background:linear-gradient(180deg,#0b1830 0%, #0c1b35 100%);
  box-shadow:0 5px 12px rgba(0,0,0,.22);
}
.ai-btn:hover{
  color:#061227;
  border-color:rgba(255,213,74,.65);
  background:linear-gradient(135deg,#ffd54a 0%, #ffc93a 55%, #ffb800 100%);
  box-shadow:0 10px 22px rgba(255,184,0,.18);
}
.ai-dot{
  background:#59b3ff;
  box-shadow:0 0 10px rgba(89,179,255,.65);
}
.toast{
  background:#081426;
  color:#ffffff;
  border:1px solid rgba(255,213,74,.18);
}
@media(max-width:640px){
  .tabs{background:rgba(7,16,31,.98)}
}


/* ==========================================================
   FUTURISTA + PREMIUM DASHBOARD — SIN LOGOS POLÍTICOS
   ========================================================== */

:root{
  --fp-black:#02050b;
  --fp-black2:#050b14;
  --fp-panel:#07111f;
  --fp-panel2:#0a172a;
  --fp-blue:#2186ff;
  --fp-cyan:#5cc8ff;
  --fp-yellow:#ffd54a;
  --fp-white:#f8fbff;
  --fp-muted:#91a7c7;
  --fp-line:rgba(92,200,255,.16);
}

body{
  min-height:100vh;
  background:
    radial-gradient(circle at 12% 12%, rgba(33,134,255,.12), transparent 24%),
    radial-gradient(circle at 90% 8%, rgba(255,213,74,.06), transparent 18%),
    linear-gradient(180deg,#01030a 0%,#030814 48%,#02050b 100%);
}

.topbar{
  height:78px;
  background:rgba(2,5,11,.92);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(92,200,255,.13);
  position:sticky;
  top:0;
  z-index:30;
}

.brand-mark{
  width:46px;
  height:46px;
  border-radius:15px;
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 35% 30%,#6dd5ff 0%,#2186ff 28%,#0f42a0 62%,#07172e 100%);
  border:1px solid rgba(121,213,255,.45);
  box-shadow:
    0 0 0 5px rgba(33,134,255,.06),
    0 0 24px rgba(33,134,255,.32);
}

.brand-mark::before,
.brand-mark::after{
  content:"";
  position:absolute;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
}

.brand-mark::before{
  width:58px;height:58px;
  left:-25px;top:-24px;
}

.brand-mark::after{
  width:32px;height:32px;
  right:-17px;bottom:-16px;
}

.brand-mark span{
  position:relative;
  z-index:2;
  color:#fff;
  font-size:1.25rem;
  text-shadow:0 0 12px rgba(255,255,255,.85);
}

.brand strong{
  color:#fff;
  letter-spacing:.01em;
}

.brand span{
  color:#8fb5ec;
}

.top-status{
  display:flex;
  align-items:center;
  gap:9px;
}

.status-chip{
  height:34px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border-radius:10px;
  color:#ffd970;
  background:rgba(255,213,74,.07);
  border:1px solid rgba(255,213,74,.18);
  font-size:.68rem;
  font-weight:850;
  letter-spacing:.08em;
}

.status-chip.blue{
  color:#71c8ff;
  background:rgba(33,134,255,.08);
  border-color:rgba(92,200,255,.18);
}

.status-chip i{
  width:7px;height:7px;border-radius:50%;
  background:#56e37f;
  box-shadow:0 0 10px rgba(86,227,127,.8);
}

.hero{
  min-height:390px;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  padding:62px 20px 104px;
  background:
    linear-gradient(180deg,rgba(3,9,21,.72),rgba(3,9,21,.96)),
    radial-gradient(circle at 50% 12%,rgba(33,134,255,.22),transparent 42%);
  border-bottom:1px solid rgba(92,200,255,.08);
}

.hero-grid{
  position:absolute;
  inset:0;
  opacity:.17;
  background-image:
    linear-gradient(rgba(92,200,255,.20) 1px, transparent 1px),
    linear-gradient(90deg,rgba(92,200,255,.20) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,black,transparent 85%);
}

.hero-orb{
  position:absolute;
  border-radius:50%;
  filter:blur(1px);
  pointer-events:none;
}

.orb-one{
  width:390px;height:390px;
  left:50%;
  top:-185px;
  transform:translateX(-50%);
  border:1px solid rgba(92,200,255,.13);
  box-shadow:
    0 0 80px rgba(33,134,255,.10),
    inset 0 0 70px rgba(33,134,255,.05);
}

.orb-two{
  width:210px;height:210px;
  right:7%;
  bottom:-120px;
  border:1px solid rgba(255,213,74,.10);
  box-shadow:0 0 70px rgba(255,213,74,.05);
}

.hero-content{
  position:relative;
  z-index:3;
  max-width:960px;
}

.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 12px;
  border-radius:999px;
  color:#9ed8ff;
  background:rgba(33,134,255,.08);
  border:1px solid rgba(92,200,255,.17);
  font-size:.69rem;
  font-weight:900;
  letter-spacing:.14em;
}

.live-dot{
  width:7px;height:7px;border-radius:50%;
  background:#59c8ff;
  box-shadow:0 0 12px #59c8ff;
}

.hero h1{
  max-width:900px;
  font-size:clamp(2.35rem,5vw,4.35rem);
  line-height:.98;
  margin:19px auto 18px;
  letter-spacing:-.048em;
  text-wrap:balance;
}

.hero h1 span{
  color:#71c7ff;
  text-shadow:0 0 28px rgba(33,134,255,.18);
}

.hero p{
  max-width:800px;
  font-size:1.05rem;
  color:#aebed5;
}

.hero-metrics{
  width:min(630px,100%);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:28px auto 0;
}

.hero-metrics div{
  padding:12px 14px;
  border:1px solid rgba(92,200,255,.12);
  background:rgba(5,15,29,.52);
  backdrop-filter:blur(10px);
  border-radius:13px;
}

.hero-metrics strong{
  display:block;
  color:#ffd54a;
  font-size:1.05rem;
}

.hero-metrics span{
  display:block;
  color:#8499b8;
  font-size:.72rem;
  margin-top:2px;
}

.shell{
  margin-top:-54px;
}

.tabs{
  border-radius:20px;
  padding:10px;
  gap:10px;
  background:rgba(5,12,23,.96);
  backdrop-filter:blur(18px);
  border:1px solid rgba(92,200,255,.16);
  box-shadow:
    0 18px 50px rgba(0,0,0,.44),
    0 0 0 1px rgba(255,255,255,.02) inset;
}

.tab{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:14px 18px;
  color:#d9e7f9;
  background:linear-gradient(180deg,#081529 0%,#07101f 100%);
  border:1px solid rgba(92,200,255,.12);
  border-radius:14px;
  font-size:.95rem;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.tab-icon{
  width:29px;
  height:29px;
  border-radius:9px;
  display:grid;
  place-items:center;
  color:#69c5ff;
  background:rgba(33,134,255,.12);
  border:1px solid rgba(92,200,255,.18);
  box-shadow:0 0 12px rgba(33,134,255,.08);
}

.tab:hover{
  color:white;
  border-color:rgba(92,200,255,.38);
  background:linear-gradient(180deg,#0b1e3a 0%,#09172d 100%);
  transform:translateY(-3px);
}

.tab.active{
  color:#06101f;
  background:linear-gradient(135deg,#ffe47a 0%,#ffd54a 52%,#ffbc24 100%);
  border-color:rgba(255,224,112,.9);
  box-shadow:0 12px 30px rgba(255,190,36,.20);
}

.tab.active .tab-icon{
  color:#fff;
  background:linear-gradient(135deg,#0b3f91,#2186ff);
  border-color:#5cc8ff;
  box-shadow:0 0 17px rgba(33,134,255,.35);
}

.tab.active::after{
  display:none;
}

.workspace{
  gap:22px;
  margin-top:20px;
}

.panel{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:
    linear-gradient(180deg,rgba(9,22,40,.96) 0%,rgba(5,14,28,.98) 100%);
  border:1px solid rgba(92,200,255,.13);
  box-shadow:
    0 20px 55px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.025);
}

.panel::before{
  content:"";
  position:absolute;
  left:0;top:0;right:0;
  height:2px;
  background:linear-gradient(90deg,transparent,#2186ff,#5cc8ff,transparent);
  opacity:.65;
}

.panel-title{
  padding-bottom:16px;
  margin-bottom:21px;
  border-bottom:1px solid rgba(92,200,255,.09);
}

.panel-title h2,
.result-head h2{
  color:#fff;
  font-size:1.42rem;
}

.panel-title p{
  color:#8ea5c5;
}

.mini-pill{
  color:#79cbff;
  background:rgba(33,134,255,.09);
  border-color:rgba(92,200,255,.19);
}

.field label{
  color:#eef6ff;
}

input,select,textarea{
  min-height:49px;
  background:linear-gradient(180deg,#09172b 0%,#071223 100%);
  border-color:rgba(92,200,255,.15);
  color:#f6fbff;
}

input:hover,select:hover,textarea:hover{
  border-color:rgba(92,200,255,.27);
}

input:focus,select:focus,textarea:focus{
  border-color:#49adff;
  box-shadow:
    0 0 0 3px rgba(33,134,255,.10),
    0 0 18px rgba(33,134,255,.07);
}

.switch-row{
  min-height:48px;
  background:linear-gradient(180deg,#09172b 0%,#071223 100%);
  border-color:rgba(92,200,255,.11);
}

.switch-row:hover{
  border-color:rgba(92,200,255,.26);
}

.btn.primary{
  min-height:63px;
  color:#06101d;
  background:linear-gradient(135deg,#ffe27a 0%,#ffd54a 56%,#ffbb22 100%);
  box-shadow:
    0 13px 30px rgba(255,190,34,.18),
    inset 0 1px 0 rgba(255,255,255,.42);
}

.btn.primary:hover{
  box-shadow:
    0 18px 38px rgba(255,190,34,.28),
    0 0 22px rgba(255,213,74,.08);
}

.result-panel{
  min-height:500px;
}

.empty-state{
  min-height:450px;
}

.empty-icon{
  width:62px;
  height:62px;
  border-radius:19px;
  color:#fff;
  background:
    radial-gradient(circle at 35% 30%,#68d2ff,#2186ff 35%,#0d3e91 72%,#071325);
  border:1px solid rgba(92,200,255,.4);
  box-shadow:
    0 0 0 7px rgba(33,134,255,.045),
    0 0 30px rgba(33,134,255,.24);
}

.output{
  min-height:455px;
  background:#050e1c;
  border-color:rgba(92,200,255,.13);
}

.ai-section{
  border-top-color:rgba(92,200,255,.09);
}

.ai-btn{
  min-height:58px;
  color:#e7f3ff;
  background:linear-gradient(180deg,#09182d 0%,#071222 100%);
  border-color:rgba(92,200,255,.13);
}

.ai-btn:hover{
  color:#07111f;
  background:linear-gradient(135deg,#ffe277,#ffd54a 58%,#ffbd28 100%);
  border-color:#ffe27a;
  box-shadow:0 10px 24px rgba(255,190,34,.16);
}

.ai-dot{
  background:#4fb7ff;
  box-shadow:0 0 12px rgba(79,183,255,.72);
}

.upload-box{
  background:#06101f;
  border-color:rgba(92,200,255,.24);
}

.upload-icon{
  background:linear-gradient(135deg,#0c3f91,#2186ff 62%,#5cc8ff);
  box-shadow:0 10px 25px rgba(33,134,255,.20);
}

.notice{
  color:#ffe7a0;
  background:rgba(255,213,74,.055);
  border-left-color:#ffd54a;
}

.btn.danger{
  color:#ffccd1;
  background:#1c0b13;
  border-color:rgba(255,104,119,.20);
}

@media(max-width:900px){
  .top-status .status-chip{display:none}
}

@media(max-width:640px){
  .topbar{height:68px}
  .hero{min-height:340px;padding:42px 14px 92px}
  .hero h1{font-size:2.2rem}
  .hero-metrics{gap:7px}
  .hero-metrics div{padding:10px 8px}
  .tabs{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:9px;
  }
  .tab{
    min-height:82px;
    flex-direction:column;
    gap:7px;
    font-size:.84rem;
  }
  .tab-icon{
    width:31px;height:31px;
  }
}


/* ==========================================================
   BIBLIOTECA AMPLIADA DE INTELIGENCIAS ARTIFICIALES
   ========================================================== */

.ai-section{
  margin-top:22px;
}

.ai-section h3{
  font-size:1.04rem;
  color:#fff;
}

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

.ai-btn{
  min-height:68px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:11px;
  padding:11px 13px;
  text-align:left;
  overflow:hidden;
}

.ai-btn::after{
  content:"↗";
  margin-left:auto;
  color:#5cc8ff;
  font-size:1rem;
  opacity:.65;
}

.ai-btn:hover::after{
  color:#07111f;
  opacity:1;
}

.ai-logo{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  color:#fff;
  font-weight:900;
  font-size:1rem;
  border:1px solid rgba(92,200,255,.20);
  background:
    radial-gradient(circle at 35% 28%,#6bd4ff 0%,#2186ff 34%,#0d3e91 76%,#071325 100%);
  box-shadow:
    0 0 0 4px rgba(33,134,255,.035),
    0 0 15px rgba(33,134,255,.16);
}

.ai-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
}

.ai-copy strong{
  color:#f8fbff;
  font-size:.91rem;
  white-space:nowrap;
}

.ai-copy small{
  color:#7894bb;
  font-size:.68rem;
  font-weight:650;
  white-space:nowrap;
}

.ai-btn:hover .ai-copy strong,
.ai-btn:hover .ai-copy small{
  color:#07111f;
}

.ai-btn.featured{
  border-color:rgba(92,200,255,.30);
}

.ai-btn.new-ai{
  position:relative;
}

.ai-btn.new-ai::before{
  content:"NUEVA";
  position:absolute;
  right:9px;
  top:6px;
  color:#ffd54a;
  font-size:.48rem;
  font-weight:950;
  letter-spacing:.08em;
}

.ai-btn.new-ai:hover::before{
  color:#07111f;
}

.ai-btn.featured-qwen{
  border-color:rgba(255,213,74,.30);
  box-shadow:inset 0 0 0 1px rgba(255,213,74,.04);
}

.ai-btn.featured-qwen .ai-logo{
  color:#07111f;
  background:linear-gradient(135deg,#ffe27a 0%,#ffd54a 52%,#ffbd28 100%);
  border-color:rgba(255,226,122,.80);
  box-shadow:0 0 20px rgba(255,213,74,.18);
}

.ai-btn.featured-qwen:hover .ai-logo{
  color:#fff;
  background:linear-gradient(135deg,#0c3f91,#2186ff 62%,#5cc8ff);
}

/* Variaciones sutiles de iconos, manteniendo la identidad azul */
.ai-gemini{border-radius:50% 50% 50% 16px}
.ai-deepseek{border-radius:50%}
.ai-claude{font-family:Georgia,serif}
.ai-copilot{transform:rotate(0deg)}
.ai-kimi{border-radius:50%}
.ai-qwen{font-size:1.08rem}
.ai-perplexity{border-radius:9px}
.ai-grok{border-radius:50%}
.ai-meta{font-size:1.18rem}
.ai-mistral{border-radius:8px}

@media(max-width:640px){
  .ai-grid{
    grid-template-columns:1fr;
  }

  .ai-btn{
    min-height:66px;
  }
}