:root {
  --bg: #0b1020;
  --card: #121a33;
  --muted: #9aa4c7;
  --accent: #5b7cff;
  --accent-2: #7a9dff;
  --error: #ff6b6b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(1200px 600px at 70% -10%, #1c2446 0%, transparent 60%), var(--bg);
  color: #e8ecff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}

.card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  border-radius: 16px;
  padding: 26px;
  box-shadow: 0 10px 35px rgba(0,0,0,0.4);
}

h1 {
  margin: 0 0 6px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .3px;
}

.sub {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 13px;
}

label {
  font-size: 13px;
  color: #dfe6ff;
  display: block;
  margin: 12px 0 6px;
}

.input {
  width: 100%;
  background: #0f1630;
  color: #e8ecff;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 12px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(91,124,255,.15);
}

.btn {
  margin-top: 18px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  border: 0;
  color: white;
  font-weight: 700;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .04s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

.row {
  display: flex;
  gap: 10px;
}

.helper {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.alert {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  background: rgba(255, 107, 107, .1);
  border: 1px solid rgba(255, 107, 107, .35);
  color: #ffd8d8;
}

 
    .wrap { max-width: 1100px; margin: 0 auto; }
    .topbar { display:flex; justify-content: space-between; align-items:center; margin-bottom: 16px; }
    a.logout { color:#ffb0b0; text-decoration:none; font-size:14px; }
    .sub{ color:#cfd6ff; opacity:.9 }
    body {
      background:
        radial-gradient(1200px 800px at 80% -10%, rgba(91,124,255,.18), transparent 60%),
        radial-gradient(800px 600px at 10% 110%, rgba(0,168,89,.14), transparent 60%),
        radial-gradient(1px 1px at 0 0, rgba(255,255,255,.06) 1px, transparent 0) 0 0/20px 20px,
        linear-gradient(transparent 19px, rgba(255,255,255,.05) 20px) 0 0/20px 20px,
        linear-gradient(90deg, transparent 19px, rgba(255,255,255,.05) 20px) 0 0/20px 20px,
        #0b1020;
      color:#e8ecff; min-height: 100dvh;
    }
    .account-actions { display:flex; gap:10px; align-items:center; }
    .btn-ghost { background:transparent; border:1px solid rgba(255,255,255,.12); color:#e8ecff; padding:8px 10px; border-radius:10px; cursor:pointer; font-weight:700; }
    .btn-primary { background:linear-gradient(90deg, #5b7cff, color-mix(in hsl, #5b7cff 70%, #8aa0ff)); border:0; color:#fff; padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:800; }
    .muted { color:#9aa4c7; font-size:13px; }
    .notice{ background:#13204d; border:1px solid #22336d; padding:10px 12px; border-radius:10px; margin:8px 0 0; color:#dfe6ff; display:none }

    .telco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
    .telco-card { background:#0f1630; border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; }
    .telco-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
    .telco-name { font-weight:800; letter-spacing:.4px; font-size:16px; }
    .badge { font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); color:#cfd6ff; }

    .multiop { --accent: #5b7cff; }
    .voz { --accent: #8a63ff; }
    .ruta { --accent: #00a859; }
    .foro { --accent: #00b0ff; }
    .filtro { --accent: #ff9f43; }
    .graficador { --accent: #ff5b7c; }

    .telco-name::after { content:""; display:inline-block; width:10px; height:10px; border-radius:999px; margin-left:8px; background:var(--accent); box-shadow: 0 0 18px var(--accent); vertical-align:middle; }

    .pill-row { display:flex; flex-wrap:wrap; gap:10px; }
    .pill { flex:1 1 110px; background:linear-gradient(90deg, var(--accent), color-mix(in hsl, var(--accent) 70%, #8aa0ff));
      border:0; color:#fff; font-weight:800; border-radius:12px; padding:12px 14px; cursor:pointer; letter-spacing:.3px;
      transition: transform .05s ease, filter .2s ease; }
    .pill:hover { filter:brightness(1.05); }
    .pill:active { transform: translateY(1px); }

    #modal-backdrop.modal-backdrop, #account-modal.modal-backdrop {
      position:fixed; inset:0; background:rgba(5,8,20,.55); backdrop-filter: blur(4px);
      display:none; align-items:center; justify-content:center; z-index:9900;
    }
    #modal-backdrop.open, #account-modal.open { display:flex; }
    #modal-backdrop .modal, #account-modal .modal {
      width:min(99%, 99vw); background:#0f1630; border:1px solid rgba(255,255,255,.09);
      border-radius:16px; padding:18px; box-shadow: 0 20px 60px rgba(0,0,0,.45);
    }
    #modal-backdrop .modal-top, #account-modal  .modal-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
    #modal-backdrop .modal-title, #account-modal  .modal-title { font-weight:800; font-size:18px; letter-spacing:.3px; }
    #modal-backdrop .modal-close, #account-modal  .modal-close { background:transparent; border:0; color:#cfd6ff; font-size:20px; cursor:pointer; }
    #modal-backdrop .mode-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:12px; margin: 10px 0 6px; }
    #modal-backdrop .mode-tile { background:#121a33; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:14px; cursor:pointer; min-height:88px; transition:border-color .2s, box-shadow .2s, transform .05s; }
    #modal-backdrop .mode-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent); }
    #modal-backdrop .mode-title { font-weight:800; margin:0 0 6px; }
    #modal-backdrop .mode-desc { color:#9aa4c7; font-size:13px; margin:0; }
    #modal-backdrop .actions, #account-modal  .actions { display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }

    #wm-overlay { position:fixed; inset:0; background:rgba(5,8,20,.55); backdrop-filter: blur(3px); z-index:950; display:none; }
    #wm-overlay.visible { display:block; }
    #wm-area { position:fixed; inset:0; z-index:1000; pointer-events:none; }
    .workbench-window {
      position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
      width:99vw; height:99vh; background:#0f1630; border:1px solid rgba(255,255,255,.09);
      border-radius:16px; box-shadow: 0 25px 80px rgba(0,0,0,.55);
      display:flex; flex-direction:column; overflow:hidden; pointer-events:auto;
    }
    .workbench-topbar { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.08); }
    .workbench-title { font-weight:800; letter-spacing:.3px; }
    .workbench-actions { display:flex; gap:8px; }
    .btn-min, .btn-close { background:#121a33; color:#e8ecff; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:8px 10px; cursor:pointer; }
    .workbench-body { position:relative; flex:1; overflow:hidden; }
    .workbench-iframe { position:absolute; inset:0; width:100%; height:100%; border:0; background:#0b1020; display:block; }
    .loading { position:absolute; inset:0; display:grid; place-items:center; color:#cfd6ff; font-size:13px; }

    .mini-chip {
      position:fixed; bottom:12px; left:12px;
      display:inline-flex; align-items:center; gap:8px;
      background:linear-gradient(90deg, var(--accent, #5b7cff), color-mix(in hsl, var(--accent, #5b7cff) 70%, #8aa0ff));
      border:0; color:#fff; border-radius:10px; padding:8px 10px; cursor:grab; font-weight:700;
      box-shadow: 0 6px 18px rgba(0,0,0,.35); z-index: 1200; user-select:none; touch-action:none;
    }
    .mini-chip:active { cursor:grabbing; }
    .mini-chip .label { white-space:nowrap; max-width: 38ch; overflow:hidden; text-overflow:ellipsis; }
    .mini-chip .close { background:rgba(0,0,0,.25); border:0; color:#fff; border-radius:8px; padding:4px 6px; cursor:pointer; font-weight:800; }

    .telco-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
    .telco-card { display: flex; flex-direction: column; padding: 16px; border-radius: 8px; }
    .telco-card p { flex: 0 0 auto; }
    .telco-card .pill-row { margin-top: auto; display: flex; justify-content: center; }

    .suggest-bar{ display:flex; gap:12px; align-items:center; justify-content:space-between;
      background:#13204d; border:1px solid #22336d; color:#dfe6ff;
      padding:10px 12px; border-radius:12px; margin:0 0 16px;
    }
    .suggest-bar .msg{ margin:0; font-size:14px; }
    .btn-small{ padding:8px 10px; font-weight:800; border-radius:10px; cursor:pointer; }
    .btn-primary.small{ padding:8px 12px; }

    #feedback-modal.modal-backdrop { position:fixed; inset:0; background:rgba(5,8,20,.55); backdrop-filter: blur(4px); display:none; align-items:center; justify-content:center; z-index:9000; }
    #feedback-modal.open{ display:flex; }
    #feedback-modal .modal { width:min(680px, 96vw); background:#0f1630; border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:18px; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
    #feedback-modal .modal-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
    #feedback-modal .modal-title { font-weight:800; font-size:18px; letter-spacing:.3px; }
    #feedback-modal .modal-close { background:transparent; border:0; color:#cfd6ff; font-size:20px; cursor:pointer; }
    #feedback-modal .muted { color:#9aa4c7; font-size:13px; }
    #feedback-modal .input, #feedback-modal textarea { width:100%; background:#121a33; color:#e8ecff; border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:10px; }
    #feedback-modal textarea{ min-height:140px; resize:vertical; }
    #feedback-modal .row{ display:flex; gap:10px; flex-wrap:wrap; }
    #feedback-modal .actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:12px; }
    #feedback-modal .file-note{ color:#9aa4c7; font-size:12px; margin-top:6px; }
    
    
    
    /* ===== SIDEBAR ===== */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 240px;
  background: #0f1630;
  border-right: 1px solid rgba(255,255,255,.08);
  display: flex;
  flex-direction: column;
  transition: width .3s ease;
  z-index: 999;
  overflow: hidden;
}
.sidebar.collapsed { width: 68px; }

/* ===== BOTÓN HAMBURGUESA ===== */
/* ===== BOTÓN HAMBURGUESA ===== */
.sidebar-toggle {
  position: fixed;
  top: 14px;
  left: 14px;
  background: #0f1630;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  color: #e8ecff;
  font-size: 22px;
  padding: 8px 12px;
  cursor: pointer;
  z-index: 1001;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  transition: all .3s ease;
}

/* En escritorio: mantener visible el botón pero moverlo un poco a la derecha */
@media (min-width: 769px) {
  .sidebar-toggle {
    left: 60px; /* queda al lado del menú abierto */
  }
  .sidebar.collapsed + .sidebar-toggle {
    left: 80px; /* se ajusta cuando el menú está colapsado */
  }
}


.sidebar-menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  flex: 1;
}
.sidebar-menu li { margin: 4px 0; }

.sidebar-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  color: #cfd6ff;
  text-decoration: none;
  font-weight: 600;
  border-radius: 10px;
  transition: background .2s;
}
.sidebar-menu a:hover,
.sidebar-menu a.active {
  background: rgba(91,124,255,.15);
  color: #fff;
}
.sidebar.collapsed .sidebar-menu a b { display: none; }
.sidebar.collapsed .sidebar-menu a span {
  margin: 0 auto;
  font-size: 20px;
}
.main-content {
  margin-left: 240px;
  transition: margin-left .3s ease;
  padding: 20px;
}
.sidebar.collapsed ~ .main-content { margin-left: 68px; }

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); position: fixed; }
  .sidebar.open { transform: translateX(0); }
  .sidebar.collapsed { width: 240px; } /* no colapsa en móvil */
  .main-content { margin-left: 0; }
}
 #imeiModal{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.6);
  z-index:9999; justify-content:center; align-items:center; padding:16px;
  font-family:"Inter",system-ui,sans-serif;
}
#imeiModal .modal-box{
  background:#fff; color:#111; border-radius:14px;
  max-width:480px; width:100%; padding:24px;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  display:flex; flex-direction:column; gap:18px; position:relative;
}
#imeiModal h2{ margin:0; text-align:center; font-size:1.2rem; font-weight:800; }
#imeiModal .close{
  position:absolute; top:10px; right:10px;
  border:none; background:transparent; font-size:20px;
  cursor:pointer; color:#555;
}
#imeiModal select, #imeiModal input{
  width:100%; padding:10px; border:1px solid #ccc;
  border-radius:8px; font-size:1rem;
}
#imeiModal button.query{
  padding:10px 14px; border:none; border-radius:8px;
  background:#007bff; color:#fff; font-weight:700; cursor:pointer;
}
#imeiModal .result{
  background:#f8f9fa; border-radius:8px; padding:12px;
  font-size:.9rem; max-height:320px; overflow:auto;
}
.result .nores{ color:#c00; font-weight:600; }
.result img{ max-width:140px; display:block; margin:10px auto; }
.result table{ width:100%; border-collapse:collapse; margin-top:6px; }
.result th, .result td{ padding:6px 8px; text-align:left; }
.result th{ background:#e9ecef; border-bottom:1px solid #ccc; width:40%; }
.result td{ border-bottom:1px solid #eee; }
@media(max-width:600px){
  #imeiModal .modal-box{ max-width:95vw; }
}