/* ========== Base ========== */
:root{
  --bg-0:#0a0f1c;
  --bg-1:#0d1424;
  --panel:#0f172a;
  --panel-2:#0b1220;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#60a5fa;   /* azul */
  --brand-2:#93c5fd; /* azul claro */
  --tech:#f59e0b;    /* naranja TECH */
  --border:#1f2937;
  --ring:#1f3a8a;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, #1e293b33 0%, transparent 50%),
    radial-gradient(1000px 700px at 100% 10%, #1d4ed81a 0%, transparent 55%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1));
  font: 14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}
.muted{ color: var(--muted); }

/* ========== Layout ========== */
.container{ max-width:1100px; margin:0 auto; padding:24px; }

.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:linear-gradient(180deg, #0b1220, #0a0f1c);
  border:1px solid var(--border); border-radius:16px; padding:12px 14px;
  box-shadow:var(--shadow);
}

.brand{ display:inline-flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.2px; font-size:18px; }
.brand svg{ width:24px; height:24px; }

.hero{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:24px; margin:26px 0 18px; align-items:center;
}
.hero .badge{ margin-bottom:10px; }

/* Título del hero con el mismo formato del footer */
.title-home{ margin:8px 0 10px; line-height:1.1; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.title-foro{ color:#fff; font-size:28px; font-weight:800; letter-spacing:.2px; }
.title-brand{ font-size:28px; letter-spacing:.3px; }
.title-brand em{ font-style: italic; font-weight: 800; letter-spacing:.3px; }

.hero p{ color:var(--muted); margin:0 0 16px; }

/* ========== Chips & Botones ========== */
.badge{
  display:inline-block; font-size:12px; color:#c7d2fe;
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25);
  padding:6px 10px; border-radius:999px;
}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  color:#0b1220; background: linear-gradient(180deg,#60a5fa,#3b82f6);
  border:none; border-radius:12px; padding:10px 14px; font-weight:600; text-decoration:none;
  box-shadow:0 8px 20px rgba(59,130,246,.35);
  transition: transform .15s ease, box-shadow .2s ease, opacity .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow:0 10px 26px rgba(59,130,246,.45); }
.btn:active{ transform: translateY(0); opacity:.9; }

/* Botón sutil (para "Salir") */
.btn--muted{
  color:#e5e7eb; background: linear-gradient(180deg, #101828, #0b1220);
  border:1px solid #1f2937; box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.btn--muted:hover{ filter: brightness(1.08); box-shadow: 0 8px 18px rgba(0,0,0,.3); border-color:#263245; }
.btn--muted:active{ opacity:.95; }

/* ========== Grids & Cards ========== */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 860px){ .hero{ grid-template-columns: 1fr; } .grid-2{ grid-template-columns:1fr; } }

.cards{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 900px){ .cards{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px){ .cards{ grid-template-columns: 1fr; } }

.card{
  position:relative; background: radial-gradient(120% 120% at 0% 0%, #0b1220 0%, #0a0f1c 70%);
  border:1px solid var(--border); border-radius:16px; padding:16px; text-decoration:none; color:var(--text);
  overflow:hidden; box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, background .25s ease;
}
.card:hover{ transform: translateY(-2px); border-color:#263245; background: radial-gradient(120% 120% at 0% 0%, #0c1627 0%, #0a0f1c 70%); }
.card h3{ margin:0; font-size:16px; }
.card p{ margin:8px 0 0; color:var(--muted); }

/* Glow opcional */
.card .glow{
  position:absolute; inset:-30%;
  background: radial-gradient(600px 300px at 0% 0%, rgba(96,165,250,.14), transparent 60%),
              radial-gradient(400px 200px at 100% 0%, rgba(147,197,253,.1), transparent 60%);
  filter: blur(26px); z-index:0; pointer-events:none;
}
.card > *{ position:relative; z-index:1; }

/* Formularios dentro de cards */
.card input[type="text"],
.card input[type="search"],
.card textarea,
.card select{
  width:100%; padding:10px 12px; color:var(--text);
  background:var(--panel-2); border:1px solid var(--border); border-radius:10px; outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.card textarea{ resize:vertical; min-height:140px; }
.card input:focus, .card textarea:focus, .card select:focus{
  border-color:#1d4ed8; box-shadow:0 0 0 3px rgba(37,99,235,.25);
}

/* ========== Footer ========== */
.footer{
  margin:26px 0 0; border:1px solid var(--border); border-radius:16px;
  background: linear-gradient(180deg, #0b1220, #0a0f1c); box-shadow: var(--shadow); padding:14px 16px;
}
.footer-content{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.footer-text{ font-size:13px; line-height:1.25; color: var(--text); }
.tech-orange{ color: var(--tech); }
.footer-note{ margin-top:8px; color:var(--muted); text-align:center; font-size:12px; }

/* Íconos sociales */
.social-icons{ display:flex; align-items:center; gap:10px; }
.ico{ --size: 36px; position:relative; width:var(--size); height:var(--size); display:inline-flex; align-items:center; justify-content:center; color:#d1d5db; text-decoration:none; transition: transform .15s ease, color .15s ease; }
.ico:hover{ transform: translateY(-1px); color:#fff; }
.ico:active{ transform: translateY(0); opacity:.92; }
.ico__plate{
  position:absolute; inset:0; border-radius:999px;
  background: radial-gradient(60% 60% at 30% 30%, rgba(255,255,255,.08), transparent 60%), linear-gradient(180deg,#0f172a,#0b1220);
  border:1px solid #1f2937; box-shadow: 0 6px 16px rgba(0,0,0,.25) inset, 0 4px 10px rgba(0,0,0,.25);
  transition: filter .2s ease, box-shadow .2s ease, background .2s ease;
}
.ico:hover .ico__plate{ filter: brightness(1.15); box-shadow: 0 6px 16px rgba(0,0,0,.2) inset, 0 6px 14px rgba(59,130,246,.35); }
.ico__svg{ width:18px; height:18px; display:block; }
.ico__mask{ width:18px; height:18px; display:block; background: currentColor; -webkit-mask: var(--si) center/contain no-repeat; mask: var(--si) center/contain no-repeat; }
#share-btn.copied .ico__plate{
  background: radial-gradient(60% 60% at 30% 30%, rgba(34,197,94,.18), transparent 60%), linear-gradient(180deg,#0f172a,#0b1220);
  box-shadow: 0 0 0 2px rgba(34,197,94,.25), 0 6px 14px rgba(34,197,94,.35);
}

/* Links genéricos */
a{ color: var(--brand-2); }
a:hover{ color:#bfdbfe; text-decoration:none; }
.link{ color:#93c5fd; text-decoration:none; border:0; background:none; padding:0; cursor:pointer; font:inherit; }
.link:hover{ color:#bfdbfe; }
.link-danger{ color:#f87171; }
.link-danger:hover{ color:#fecaca; }

/* ========== Efectos brillo ========== */
.btn--shine{ position: relative; overflow: hidden; isolation: isolate; }
.btn--shine::after{
  content: ""; position: absolute; top: -120%; left: -40%; width: 30%; height: 340%; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 48%, rgba(255,255,255,0) 100%);
  transform: rotate(20deg) translateX(-160%); animation: btnShine 2.4s cubic-bezier(.25,.46,.45,.94) infinite;
  mix-blend-mode: screen; opacity:.9; z-index: 1;
}
.btn--shine:hover::after, .btn--shine:focus-visible::after{ animation-duration: 1.2s; }
@keyframes btnShine{ 0%{ transform: rotate(20deg) translateX(-160%);} 100%{ transform: rotate(20deg) translateX(220%);} }

.card::before{
  content: ""; position: absolute; top: -60%; left: -80%; width: 55%; height: 220%; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(25deg) translateX(-160%); opacity: 0; z-index: 1;
}
.card > *{ position:relative; z-index:2; }
.card:hover::before, .card:focus-within::before{ opacity: .95; animation: cardSweep 1.1s linear 1; }
@keyframes cardSweep{ 0%{ transform: rotate(25deg) translateX(-160%);} 100%{ transform: rotate(25deg) translateX(220%);} }

/* ========== Topic mini-cards ========== */
.topic-header .muted{ color:var(--muted); }
.topic-cards{ margin:10px 0 14px; display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.topic-card{
  display:flex; align-items:center; justify-content:flex-start; padding:12px; border-radius:14px; text-decoration:none; color:var(--text);
  background: radial-gradient(120% 120% at 0% 0%, #0b1220, #0a0f1c 70%); border:1px solid var(--border);
  transition: transform .15s ease, border-color .18s ease, background .25s ease, box-shadow .2s ease; box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.topic-card:hover{ transform: translateY(-1px); border-color:#263245; background: radial-gradient(120% 120% at 0% 0%, #0c1627, #0a0f1c 70%); box-shadow: 0 10px 22px rgba(0,0,0,.3); }
.topic-card.is-active{ border-color:#1d4ed8; box-shadow: 0 0 0 2px rgba(37,99,235,.25), 0 8px 20px rgba(59,130,246,.25); }
.topic-card__title{ font-size:14px; font-weight:600; }

/* ========== Threads (lista) ========== */
.threads{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:6px; }
@media (max-width: 860px){ .threads{ grid-template-columns: 1fr; } }

.thread-card{
  padding:14px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  background: linear-gradient(180deg, #0b1220, #0a0f1c);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease, background .25s ease;
  cursor: pointer; /* mano en el card */
}

/* Aseguramos que todo lo de adentro también muestre la mano, 
   excepto los links/botones que ya tienen su propio cursor */
.thread-card *{
  cursor: pointer;
}

.thread-card .thread-actions a,
.thread-card .thread-actions button,
.thread-card .thread-actions form *{
  cursor: auto; /* dejamos el comportamiento normal en Editar/Eliminar */
}


.thread-card:hover{ transform: translateY(-1px); border-color:#263245; background: linear-gradient(180deg, #0c1627, #0a0f1c); }
.thread-title{ display:inline-block; margin:0 0 6px; font-size:15px; color:#fff; text-decoration:none; }
.thread-excerpt{ margin:0; color:var(--muted); font-size:13px; }
.thread-meta{ margin-top:8px; display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* ========== Editor / Vista de post ========== */
.editor-card{ padding:16px; }
.form-row{ display:grid; gap:8px; margin-bottom:12px; }
.form-row label{ font-size:13px; color:#cbd5e1; }
.actions{ display:flex; gap:8px; align-items:center; }

.post-content{ margin-top:12px; line-height:1.6; color:var(--text); }
.post-content pre{ background: #0b1220; border:1px solid var(--border); border-radius:10px; padding:12px; overflow:auto; }
.post-content code{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; font-size:12.5px; }

/* ========== Hero Art FX (imagen derecha) ========== */
.hero-art{
  position: relative; border-radius:20px; overflow:hidden; min-height: 260px;
  background: radial-gradient(140% 120% at 100% 0%, #1e293b33, transparent 55%), linear-gradient(180deg, #0b1220, #0a0f1c);
  box-shadow: var(--shadow);
}
.hero-art__img{
  display:block; width:100%; height:auto; border-radius:20px; opacity:.95;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(var(--tx, 0px), var(--ty, 0px)) translateY(var(--floatY, 0px));
  transition: transform .18s ease, opacity .2s ease; animation: heroFloat 10s ease-in-out infinite;
}
/* Overlay útil (buscador + etiquetas) */
.hero-overlay{ position:absolute; left:14px; right:14px; bottom:14px; display:flex; flex-direction:column; gap:8px; }
.hero-search{
  display:flex; gap:8px; align-items:center; background: rgba(11,18,32,.55);
  border:1px solid rgba(255,255,255,.06); border-radius:14px; padding:8px; backdrop-filter: blur(6px);
}
.hero-search input{
  flex:1; padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none; color:var(--text); background: var(--panel-2);
}
.hero-search input:focus{ border-color:#1d4ed8; box-shadow:0 0 0 3px rgba(37,99,235,.25); }
.hero-tags{ display:flex; gap:8px; flex-wrap:wrap; }
.tag{
  display:inline-flex; align-items:center; padding:6px 10px; font-size:12px; color:#c7d2fe;
  background:rgba(99,102,241,.12); border:1px solid rgba(99,102,241,.25); border-radius:999px; text-decoration:none;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.tag:hover{ transform: translateY(-1px); background:rgba(99,102,241,.18); border-color:#4f46e5; }

/* Líneas y destello del hero */
.hero-art::before{
  content:""; position:absolute; inset:-40% -120%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 48%, transparent 100%);
  transform: translateX(-60%) rotate(15deg); pointer-events:none; mix-blend-mode: screen; opacity:0;
  animation: heroSheen 7s ease-in-out infinite;
}
.hero-art::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.35;
  background-image: radial-gradient(120% 130% at 100% 100%, rgba(96,165,250,.08), transparent 60%),
                    repeating-linear-gradient( 0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 14px );
  background-repeat: no-repeat, repeat; background-size: cover, 100% 100%; background-position: center, 0 0;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  animation: heroLines 22s linear infinite;
}
@keyframes heroFloat{ 0%{ --floatY: 0px; } 50%{ --floatY: -8px; } 100%{ --floatY: 0px; } }
@keyframes heroSheen{ 0%,70%{ transform: translateX(-60%) rotate(15deg); opacity:0; } 78%{ opacity:1; } 100%{ transform: translateX(80%) rotate(15deg); opacity:0; } }
@keyframes heroLines{ from{ background-position: center, 0 0; } to{ background-position: center, -600px 0; } }

@media (prefers-reduced-motion: reduce){
  .btn--shine::after{ animation: none; transform: rotate(20deg) translateX(140%); }
  .card:hover::before, .card:focus-within::before{ animation: none; opacity: .6; transform: rotate(25deg) translateX(140%); }
  .hero-art__img{ animation: none; transform: none !important; }
  .hero-art::before, .hero-art::after{ animation: none; }
}