/* =========================================================
   FORJA::STL — style.css
   Base compartida: tokens, tipografía, botones, cabecera,
   pie de página, formularios y alertas.
   (El catálogo público vive en catalog.css; el panel en admin.css)
   ========================================================= */

/* Las fuentes se cargan con un <link> en cada página (más rápido que @import). */

:root{
  --bg-void:      #090c11;
  --bg-panel:     #111722;
  --bg-panel-2:   #161e2b;
  --bg-panel-3:   #1c2536;
  --grid-line:    rgba(0, 217, 255, .07);
  --grid-line-2:  rgba(255, 106, 43, .05);

  --text-primary: #eaf2f8;
  --text-dim:     #8695ac;
  --text-faint:   #4d5972;

  --accent-cyan:    #00d9ff;
  --accent-cyan-dim:#0a5f73;
  --accent-orange:  #ff6a2b;
  --accent-purple:  #8b5cf6;
  --accent-green:   #39ff8a;
  --accent-danger:  #ff3b5c;

  --border-soft:  1px solid rgba(0, 217, 255, .14);
  --border-mid:   1px solid rgba(0, 217, 255, .28);

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  --shadow-glow-cyan:   0 0 0 1px rgba(0,217,255,.25), 0 8px 30px -8px rgba(0,217,255,.35);
  --shadow-glow-orange: 0 0 0 1px rgba(255,106,43,.3), 0 8px 30px -8px rgba(255,106,43,.4);
  --shadow-card:        0 10px 30px -12px rgba(0,0,0,.6);

  --font-display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --font-body:    'Space Grotesk', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  --header-h: 68px;
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(0,217,255,.06), transparent 60%),
    radial-gradient(ellipse 900px 500px at 100% 10%, rgba(255,106,43,.04), transparent 55%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 42px 42px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 42px 42px,
    var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
::selection{ background:var(--accent-cyan); color:#04121a; }

:focus-visible{
  outline:2px solid var(--accent-cyan);
  outline-offset:2px;
  border-radius:4px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

@keyframes blink{ 0%,100%{opacity:1} 50%{opacity:.25} }

.container{ width:100%; max-width:1280px; margin:0 auto; padding:0 24px; }

h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:.01em; margin:0; }

.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-cyan);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:7px; height:7px;
  background:var(--accent-orange);
  box-shadow:0 0 8px var(--accent-orange);
  display:inline-block;
  animation:blink 1.6s infinite;
}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:14px; letter-spacing:.02em;
  padding:12px 22px;
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, filter .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px) scale(.99); }

.btn-primary{
  background:linear-gradient(135deg, var(--accent-cyan), #00a6c4);
  color:#03141b;
  box-shadow:var(--shadow-glow-cyan);
}
.btn-primary:hover{ filter:brightness(1.08); }

.btn-accent{
  background:linear-gradient(135deg, var(--accent-orange), #d94e18);
  color:#1a0800;
  box-shadow:var(--shadow-glow-orange);
}
.btn-accent:hover{ filter:brightness(1.08); }

.btn-ghost{
  background:rgba(255,255,255,.02);
  color:var(--text-primary);
  border:1px solid rgba(255,255,255,.14);
}
.btn-ghost:hover{ border-color:var(--accent-cyan); color:var(--accent-cyan); }

.btn-danger{
  background:rgba(255,59,92,.1);
  color:#ffb3c0;
  border:1px solid rgba(255,59,92,.4);
}
.btn-danger:hover{ background:rgba(255,59,92,.2); }

.btn-sm{ padding:8px 14px; font-size:12px; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

.icon-btn{
  flex:none; width:38px; height:38px; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.14); color:var(--text-dim);
  cursor:pointer; background:transparent; transition:all .15s;
}
.icon-btn:hover{ border-color:var(--accent-cyan); color:var(--accent-cyan); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(9,12,17,.82);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:var(--border-soft);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:20px; }

.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{
  height:36px; width:auto; max-width:52px;
  object-fit:contain;
  flex:none;
  display:block;
}
.brand-name{
  font-family:var(--font-display); font-weight:700; font-size:19px;
  letter-spacing:.03em;
}
.brand-name .accent{ color:var(--accent-orange); }
.brand-tag{
  display:none;
  font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
}
@media(min-width:640px){ .brand-tag{ display:block; } }

.header-actions{ display:flex; align-items:center; gap:10px; }

/* ---------- Footer ---------- */
.site-footer{ border-top:var(--border-soft); padding:30px 0; margin-top:0; }
.site-footer .container{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; color:var(--text-faint); font-family:var(--font-mono); font-size:12px; }
.site-footer a:hover{ color:var(--accent-cyan); }

/* ---------- Alertas / flash ---------- */
.alert{
  display:flex; align-items:center; gap:10px;
  padding:13px 16px; border-radius:var(--radius-sm); margin-bottom:16px;
  font-size:14px; border:1px solid transparent;
}
.alert-ok{ background:rgba(57,255,138,.08); border-color:rgba(57,255,138,.35); color:#a8ffcf; }
.alert-error{ background:rgba(255,59,92,.08); border-color:rgba(255,59,92,.35); color:#ffc0cb; }
.alert-info{ background:rgba(0,217,255,.08); border-color:rgba(0,217,255,.35); color:#bdf3ff; }

/* ---------- Formularios (compartido: sitio público, instalador y panel) ---------- */
.field{ margin-bottom:20px; }
.field label{
  display:block; font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--text-dim); margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%; background:var(--bg-panel-2); border:1px solid rgba(255,255,255,.14); color:var(--text-primary);
  padding:12px 14px; border-radius:var(--radius-sm); font-family:var(--font-body); font-size:14px;
  transition:border-color .15s, box-shadow .15s; line-height:1.4;
}
.field textarea{ resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:0; border-color:var(--accent-cyan); box-shadow:0 0 0 3px rgba(0,217,255,.12);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--text-faint); }
.field .hint{ font-size:12px; color:var(--text-faint); margin-top:7px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:560px){ .field-row{ grid-template-columns:1fr; } }

/* ---------- Utilidades ---------- */
.hidden{ display:none !important; }
.text-center{ text-align:center; }
.mt-24{ margin-top:24px; }
.toast-wrap{ position:fixed; bottom:20px; right:20px; z-index:200; display:flex; flex-direction:column; gap:10px; }
.toast{ font-family:var(--font-mono); font-size:13px; background:var(--bg-panel); border:var(--border-mid); border-radius:8px; padding:12px 16px; box-shadow:var(--shadow-card); animation:toast-in .2s ease; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }