:root{
  /* Fondo */
  --bg:#0b1220;
  --bg-elev:#0f172a;

  /* Superficies */
  --surface:#0e1628;
  --surface-2:#101b31;
  --surface-3:#0b1324;

  /* Tipografía */
  --text:#eaf5ff;
  --text-strong:#ffffff;
  --muted:#9fb1c9;
  --muted-2:#7f94b0;
  --brand-font:"Bebas Neue", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial;

  /* Bordes / sombras */
  --border:#1b2a47;
  --border-strong:#2b4170;
  --border-soft:#14233d;
  --shadow:0 14px 50px rgba(0,0,0,.28);

  /* Marca */
  --cyan:#00d5ff;
  --cyan-2:#4ee7ff;
  --cyan-glow:0 10px 32px rgba(0,213,255,.18);
  --ring:0 0 0 3px rgba(0,213,255,.25);

  /* Estados */
  --ok:#00c48c;
  --off:#334155;

  --radius:16px;

  /* Tamaños */
  --fs-xxl:24px;
  --fs-xl:20px;
  --fs-lg:16px;
  --fs-md:14px;
  --fs-sm:12px;

  /* Sistema de espaciado */
  --sp-1:8px;
  --sp-2:12px;
  --sp-3:16px;
  --sp-4:20px;
  --sp-5:28px;
  --sp-6:40px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:linear-gradient(180deg,var(--bg),var(--bg-elev) 60%);
  color:var(--text);
  font:14px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial;
}

/* Utilidades de visibilidad */
.only-mobile{ display:none; }
.only-desktop{ display:block; }

/* ===== Desktop Layout ===== */
.sidebar{
  position:fixed; inset:0 auto 0 0; width:250px;
  background:var(--surface-3);
  border-right:1px solid var(--border-soft);
  padding:18px 14px; display:flex; flex-direction:column; gap:16px;
}
.main{ margin-left:250px; min-height:100%; padding:var(--sp-3) var(--sp-3) calc(var(--sp-6) + var(--sp-3)); }

.topbar{
  display:flex; gap:14px; align-items:flex-end; margin-bottom:var(--sp-5);
  background:linear-gradient(180deg,rgba(255,255,255,.02), transparent 70%);
  padding:10px 12px; border-radius:14px; border:1px solid var(--border-soft);
}
.top-group{ display:grid; grid-template-columns: 1fr 1fr; gap:var(--sp-3); width:100%; }

/* ===== Marca ===== */
.brand{ display:flex; gap:10px; align-items:center; }
.logo{
  width:36px; height:36px; border-radius:10px;
  background: radial-gradient(120% 120% at 0 0, var(--cyan), #7de9ff);
  color:#00222e; display:grid; place-items:center; font-weight:900; box-shadow:var(--cyan-glow);
  font-family: var(--brand-font); font-size:20px; letter-spacing:.5px;
}
.brand-text{ display:flex; flex-direction:column; }
.brand-text .brand-title{
  font-family: var(--brand-font);
  letter-spacing:.5px;
  font-size: clamp(22px, 3.6vw, 30px);
  line-height:1;
}
.brand-text span{ color:var(--muted); font-size:var(--fs-sm); }

/* ===== Menú desktop ===== */
.menu{ display:flex; flex-direction:column; gap:8px; }
.menu-item{
  appearance:none; border:1px solid var(--border);
  background:linear-gradient(180deg,#0e192b,#0b1526);
  color:var(--text); border-radius:12px; padding:10px 12px; text-align:left; cursor:pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .2s ease, border-color .2s ease;
}
.menu-item:hover{ transform: translateY(-1px); border-color:#2a3f66; }
.menu-item.active{
  background: linear-gradient(180deg, #0f1f38, #0c1728);
  border-color:#335084; box-shadow:var(--cyan-glow);
}
.version-badge{
  margin-top:auto; font-size:12px; color:#8fbcd0;
  opacity:.7; user-select:none;
}

/* ===== Panels ===== */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%) , var(--surface);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:var(--sp-4);
  animation: panelIn .4s ease both;
  min-width:0; /* Fix de desbordes en grids/flex */
}
@keyframes panelIn{ from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)} }
.panel + .panel{ margin-top:var(--sp-5); }
.hidden{ display:none !important; }

/* Ritmo vertical interno en cada vista */
.view > * + *{ margin-top:var(--sp-4); }

.panel-title{
  margin:2px 0 var(--sp-3); display:flex; align-items:center; gap:10px;
  font-size:var(--fs-xl); line-height:1.2; color:var(--text-strong); font-weight:800;
  letter-spacing:.2px; position:relative; min-width:0;
}
.panel-title::after{
  content:""; position:absolute; left:0; bottom:-8px; width:88px; height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),transparent);
  opacity:.7; filter: drop-shadow(0 0 8px rgba(0,213,255,.45));
}
.badge{
  background: linear-gradient(135deg, var(--cyan), var(--cyan-2));
  color:#003341; font-weight:800; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid #aff3ff;
}
.badge.alt{ background:#0e2436; color:#86ecff; border-color:#1f3f5e; }

/* ===== Fields / Grids ===== */
.grid.two{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.grid.three{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-3); }
.land-opts{ margin-top:var(--sp-2); }

/* Evitar desbordes de hijos dentro de grids/flex */
.grid.two > *, .grid.three > *, .field, .output{ min-width:0; }

.field{ position:relative; display:flex; flex-direction:column; gap:6px; }
label{
  font-size:var(--fs-md); font-weight:700; color:var(--text);
  letter-spacing:.2px;
}
.muted{ color:var(--muted); }

.input, select{
  appearance:none; width:100%;
  border:1px solid var(--border);
  background: linear-gradient(180deg, var(--surface-2), #0d1830);
  color:var(--text);
  padding:12px 14px; border-radius:12px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .2s ease;
}
.input::placeholder{ color:var(--muted-2); }
.input:focus, select:focus{ border-color:var(--border-strong); box-shadow:var(--ring); }

select{
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="%23a5c3d8" viewBox="0 0 24 24"><path d="M7 10l5 5 5-5z"/></svg>');
  background-repeat:no-repeat; background-position: right 12px center; padding-right:40px;
}
option{ color:#e1efff; background:#0f172a; }

/* Switch */
.switch{ position:relative; width:56px; height:30px; display:inline-block; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; inset:0; background:var(--off);
  border-radius:999px; border:1px solid var(--border);
  transition: background .18s ease, box-shadow .2s ease;
}
.slider::after{
  content:""; position:absolute; top:50%; left:6px; translate:0 -50%;
  width:22px; height:22px; border-radius:50%; background:#cbd8ea; transition: left .18s ease, background .18s ease;
}
.switch input:checked + .slider{
  background: linear-gradient(135deg, #0aa3c0, var(--cyan));
  box-shadow:var(--cyan-glow);
}
.switch input:checked + .slider::after{ left:28px; background:#093644; }
.switch-row{ display:flex; align-items:center; gap:12px; margin-top:var(--sp-2); }
.switch-label{ display:flex; align-items:center; gap:8px; color:#eaf5ff; }

/* Tooltips */
.help{
  display:inline-grid; place-items:center; width:18px; height:18px;
  border-radius:6px; font-size:12px; line-height:1; cursor:default;
  background:#0c1424; color:#8ea5c1; border:1px solid #14233b;
  margin-left:6px; user-select:none; position:relative;
}
.help.soft{ background:#0a1220; color:#7f93ae; }
.help:hover::after, .help:focus::after{
  content: attr(data-tip);
  position:absolute; left:50%; bottom: calc(100% + 10px); translate:-50% 0;
  background: linear-gradient(180deg,#0f2038,#0c172b);
  color:#eaf5ff; padding:12px 14px; border-radius:12px; border:1px solid var(--border);
  width:max-content; max-width:320px; box-shadow:var(--shadow);
  font-size:13.5px; line-height:1.4; z-index:50;
}
.help:hover::before, .help:focus::before{
  content:""; position:absolute; bottom:100%; left:50%; translate:-50% 10px;
  width:10px; height:10px; background:#0c172b; border-left:1px solid #14233b; border-top:1px solid #14233b; transform: rotate(45deg);
}

/* UTM */
.utm-wrapper{ margin-top:var(--sp-3); }
.utm-grid{
  margin-top:var(--sp-2); padding:var(--sp-3);
  border:1px dashed var(--border); border-radius:14px; background:#0c162b;
}
.hidden{ display:none !important; }

/* Outputs */
.output{ margin-top:var(--sp-4); }
.output-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:var(--sp-2); gap:10px; flex-wrap:wrap; }
.actions{ display:flex; gap:var(--sp-2); }

.btn{
  appearance:none; border:1px solid #2a3f66; border-radius:12px; padding:10px 14px;
  background: linear-gradient(135deg, #0f1a2f, #0c1526); color:#e6f1ff; cursor:pointer;
  transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .2s ease;
  touch-action: manipulation;
}
.btn:hover{ transform:translateY(-1px); border-color:#3a5587; box-shadow:var(--cyan-glow); }
.btn:active{ transform:translateY(0); }
.btn.ghost{ background:#0c1626; color:#bed2e8; border-color:#243657; }

/* Salida de URLs */
.code-output{
  width:100%;
  min-height:64px;
  border:1px solid var(--border-strong);
  border-radius:16px;
  background:
    radial-gradient(120% 120% at 0 0, rgba(0,213,255,.08), transparent 40%),
    linear-gradient(180deg,#091226,#0a1222);
  color:#c7e7ff;
  padding:12px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), var(--cyan-glow);
  resize: vertical;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

/* Import */
.alert{
  margin-top:12px; padding:12px 14px; border-radius:12px;
  border:1px solid #384e7a; background: #0d1931; color:#cfe8ff;
}
.alert.error{
  border-color:#5f2f3b; background:#21111a; color:#ffd3da;
}
.import-card{
  margin-top:12px; padding:12px; border-radius:14px; border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 50%) , #0b1528;
  animation: cardIn .35s ease both;
}
@keyframes cardIn{ from{opacity:0; transform:scale(.98)} to{opacity:1; transform:scale(1)} }
.kv{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.kv span{ font-size:12px; color:#97a9c7; }
.kv strong{ font-weight:800; }

/* ====== MÓVIL: estructura dedicada ====== */
@media (max-width: 980px){
  .only-mobile{ display:block; }
  .only-desktop{ display:none; }

  /* Appbar */
  .m-appbar{
    position:fixed; top:0; left:0; right:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 12px;
    background:linear-gradient(180deg, rgba(255,255,255,.05), transparent 70%), var(--surface-3);
    border-bottom:1px solid var(--border-soft);
    z-index:60;
  }
  .m-appbar-left{ display:flex; align-items:center; gap:10px; }
  .m-appbar-right .m-chip{
    font-size:12px; color:#8fbcd0; background:#0c1a2e; border:1px solid var(--border);
    padding:4px 8px; border-radius:999px;
  }

  /* Tabs */
  .m-tabs{
    position:fixed; top:56px; left:0; right:0;
    display:flex; gap:8px; padding:8px 12px 10px;
    background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 70%), var(--surface-3);
    border-bottom:1px solid var(--border-soft);
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; z-index:55;
  }
  .m-tabs::-webkit-scrollbar{ display:none; }
  .m-tab{
    appearance:none; border:1px solid var(--border);
    background:linear-gradient(180deg,#0e192b,#0b1526);
    color:var(--text);
    border-radius:999px; padding:8px 12px; white-space:nowrap; font-size:13px;
  }
  .m-tab.is-active{ border-color:#335084; box-shadow:var(--cyan-glow); background:linear-gradient(180deg,#0f1f38,#0c1728); }

  /* Main: compensar appbar + tabs */
  .main{ margin-left:0; padding:112px 12px 72px; }

  /* TOPBAR en una sola columna para evitar saltos */
  .top-group{ grid-template-columns:1fr; gap:12px; }
  .topbar .field label{ font-size:13.5px; line-height:1.2; }
  .topbar select{ min-height:44px; }

  /* Grids y densidad */
  .grid.two, .grid.three{ grid-template-columns:1fr; gap:10px; }
  .panel{ padding:12px; border-radius:16px; overflow:hidden; }
  .panel-title{ font-size:18px; margin-bottom:10px; }

  /* Inputs tocables */
  .input, select{ min-height:44px; font-size:14px; padding:12px 14px; }
  select{ padding-right:38px; }

  /* Acciones a 100% */
  .actions{ width:100%; gap:10px; }
  .actions .btn{ flex:1 1 0; padding:12px 14px; font-size:14px; }

  /* FIX extra para Config (docs) en móvil */
  .doc, .doc-item, .steps, .code-block, .kv, .output, .field{ min-width:0; max-width:100%; }
  .doc p, .doc li, .doc code{ overflow-wrap:anywhere; word-break:break-word; }
}

/* ====== Docs (Configuración) ====== */
.doc{ margin-top:6px; display:grid; gap:12px; min-width:0; }
.doc-item{
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 60%), #0c1628;
  border-radius:14px; padding:12px; min-width:0;
}
.doc-item + .doc-item{ margin-top:6px; }
.doc-item summary{
  cursor:pointer; list-style:none; font-weight:800; color:var(--text-strong);
}
.doc-item[open] summary{ color:#b9f2ff; }
.doc-item summary::-webkit-details-marker{ display:none; }

.steps{ margin:8px 0; padding-left:18px; }
.steps li{ margin:6px 0; color:var(--text); }

/* El <pre> nunca debe estirar el layout */
.code-block{
  margin-top:8px; border-radius:14px; padding:12px 14px;
  border:1px solid var(--border-strong);
  background:
    radial-gradient(120% 120% at 0 0, rgba(0,213,255,.08), transparent 40%),
    linear-gradient(180deg,#091226,#0a1222);
  color:#c7e7ff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow:auto;                 /* scroll interno */
  max-width:100%;               /* no se sale del panel */
  box-sizing:border-box;
}