/* macOS-inspired look */
*{box-sizing:border-box}
:root{
  --bg:#0b0c0f;
  --panel:#12141a;
  --panel-2:#1a1d25;
  --border:#2a3142;
  --text:#e9ebf0;
  --muted:#aab4c3;
  --accent:#2b6cb0; /* macOS-style blue */
  --glass:rgba(255,255,255,.06);
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --radius-lg:18px;
}
html,body{height:100%}
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text","Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  color:var(--text);
  background:radial-gradient(1200px 700px at 10% -10%,#1a2040 0%, transparent 55%), radial-gradient(900px 600px at 100% 10%,#142230 0%, transparent 50%), var(--bg);
}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.02));backdrop-filter: blur(10px);border-bottom:1px solid #1f2533; position:sticky; top:0; z-index:5}
.header .brand{font-weight:700;font-size:18px;letter-spacing:.3px}
.header .user{opacity:.9}

/* Layout */
.container{display:grid;grid-template-columns:300px 1fr;gap:18px;padding:18px}
.sidebar{background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.03));border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;box-shadow:var(--shadow)}
.sidebar h4{margin:6px 8px 12px 8px;color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.navbtn{width:100%;text-align:left;background:var(--panel);border:1px solid var(--border);color:#d9dfeb;padding:11px 12px;margin:6px 0;border-radius:12px;cursor:pointer;transition:.15s}
.navbtn:hover{transform:translateY(-1px);background:var(--panel-2)}
.navbtn.active{background:#223048;border-color:#3c4f6d}
.main{padding:4px}

/* Cards */
.card{background:linear-gradient(180deg,var(--glass),rgba(255,255,255,.02));border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:18px;box-shadow:var(--shadow)}

/* KPI and tables */
.grid{display:grid;gap:12px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.kpi{display:flex;align-items:center;justify-content:space-between;background:var(--panel);border:1px dashed var(--border);border-radius:12px;padding:12px}
.badge{font-size:12px;padding:4px 8px;border-radius:10px;background:#263249;color:#d0d7e6}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:9px 7px;text-align:left;font-size:14px}

/* Alerts, hints */
.alert{background:#3a1d29;border:1px solid #7c2944;color:#ffd7e0;padding:10px;border-radius:10px}
.hint{font-size:12px;color:var(--muted)}
.footer{padding:10px 16px;color:var(--muted);opacity:.85}

/* Inputs / buttons */
input,select,textarea{background:#0f1218;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:9px;width:100%}
label{font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
button.btn{background:var(--accent);border:0;color:#fff;padding:10px 12px;border-radius:10px;cursor:pointer;box-shadow:0 6px 16px rgba(43,108,176,.35)}
button.btn.secondary{background:#2d3447}
button.btn.tiny{padding:4px 8px;border-radius:8px;font-size:12px}

/* Login tweaks */
.login input{margin-top:6px}

/* Modules grid with image backgrounds */
.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-top:10px}
.module-card{
  position:relative;height:120px;border-radius:14px;border:1px solid var(--border);
  background:var(--panel) center/cover no-repeat;overflow:hidden;cursor:pointer;
  box-shadow:var(--shadow);transition:.15s;
}
.module-card:hover{transform:translateY(-2px)}
.module-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.55));
  display:flex;align-items:flex-end;justify-content:space-between;padding:10px 12px;
}
.module-overlay span{font-weight:600}

/* Files grid */
.files-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.file-tile{display:block;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-tile:hover{background:var(--panel-2)}
.file-tile { position: relative; padding-right: 82px; }
.file-tile .btn.tiny { position:absolute; right:8px; top:8px; }
/* --- Signature (white luminous) --- */
.signature{
  color:#fff;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.2px;
  opacity:.92;
  text-shadow:
    0 0 8px rgba(255,255,255,.45),
    0 0 16px rgba(120,170,255,.28);
  transition: .15s ease;
}
.signature:hover{
  opacity:1;
  text-shadow:
    0 0 10px rgba(255,255,255,.65),
    0 0 22px rgba(120,170,255,.45);
  transform: translateY(-1px);
}
/* === Neural-Link animated background === */
html, body { height: 100%; }

body {
  /* Quita/COMENTA cualquier background-image previo del login */
  /* background: url("login-bg.jpg") center/cover no-repeat fixed; */
  background: radial-gradient(1200px 800px at 70% 30%, #0b1020 0%, #05070d 50%, #04050a 100%) no-repeat fixed;
  background-size: cover;
}

#neuro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Asegura que la tarjeta/form quede por delante del canvas */
.login-card, .login, .auth-box, .card, .container, .signin-wrap, form {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  #neuro { opacity: .75; }
}
/* Fuerza ocultar cualquier imagen de fondo del login si existiera */
#login-bg, .login-bg, img[alt="login-bg"] { display: none !important; }
/* Login title + functional tagline — no overflow */
.auth-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;              /* allow wrapping within the card */
}

.auth-tagline {
  display: inline-block;
  font-size: 12.5px;
  line-height: 1.2;
  color: #cfe0f5;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 6px 10px;
  border-radius: 9999px;
  backdrop-filter: blur(4px);

  /* keep it inside the card */
  max-width: 100%;
  white-space: normal;          /* allow line-wrap */
  overflow-wrap: anywhere;      /* break long words if needed */
  word-break: break-word;       /* safety for very long tokens */
}

/* Slightly smaller on narrow screens */
@media (max-width: 560px) {
  .auth-tagline { font-size: 11.5px; }
}
/* =========================
   UM watermark (fondo)
   ========================= */
.um-watermark{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-weight: 900;
  letter-spacing: 0.06em;

  /* tamaño responsivo gigante */
  font-size: clamp(140px, 30vw, 560px);

  /* color y brillo */
  color: rgba(255,255,255,0.06);
  text-shadow:
    0 0 12px rgba(255,255,255,0.35),
    0 0 40px rgba(255,255,255,0.22),
    0 0 90px rgba(255,255,255,0.12);

  /* sutil transparencia y mezcla */
  opacity: 0.18;
  mix-blend-mode: screen;

  /* que no intercepte el mouse */
  pointer-events: none;

  /* z-index: por detrás de la card pero encima del canvas más profundo */
  z-index: 2;

  animation: umGlow 24s ease-in-out infinite alternate;
}

@keyframes umGlow{
  0%{
    transform: translate(-50%, -50%) scale(0.985);
    text-shadow:
      0 0 10px rgba(255,255,255,0.28),
      0 0 30px rgba(255,255,255,0.18),
      0 0 70px rgba(255,255,255,0.10);
    opacity: 0.14;
  }
  100%{
    transform: translate(-50%, -50%) scale(1.02);
    text-shadow:
      0 0 14px rgba(255,255,255,0.42),
      0 0 50px rgba(255,255,255,0.24),
      0 0 110px rgba(255,255,255,0.16);
    opacity: 0.22;
  }
}