/* Paleta: noche de Noria, piedra de Lorencia, oro del Jewel of Bless */
:root {
  --noche: #0d0618;
  --piedra: #1a1030;
  --borde: #5a3f8c;
  --texto: #efe6ff;
  --tenue: #b3a0d6;
  --oro: #e8c15a;
  --soul: #c9a4ff;
  --vida: #e0577a;
  --ok: #8dce82;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --cuerpo: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { background: var(--noche); }
body {
  margin: 0; color: var(--texto); font: 400 1.0625rem/1.6 var(--cuerpo);
  background:
    radial-gradient(900px 500px at 25% -5%, rgba(122,60,192,.45) 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 10%, rgba(232,193,90,.12) 0%, transparent 55%),
    linear-gradient(170deg, #160828 0%, var(--noche) 70%);
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: var(--soul); text-underline-offset: 3px; }
a:hover { color: var(--texto); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.saltar { position: absolute; left: -999px; }
.saltar:focus { left: 1rem; top: 1rem; background: var(--oro); color: var(--noche); padding: .5rem 1rem; z-index: 10; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.2; letter-spacing: .02em; }
h1 { font-size: clamp(2rem, 4vw, 2.6rem); margin: 0 0 .75rem; }
h2 { font-size: 1.35rem; margin: 2.25rem 0 .9rem; color: var(--oro); }
h3 { font-size: 1.1rem; margin: 0; }
code { background: var(--piedra); padding: .1em .35em; border-radius: 3px; }

/* Barra superior */
.barra {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(13,6,24,.96), rgba(13,6,24,.72));
  border-bottom: 1px solid rgba(232,193,90,.35);
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  position: sticky; top: 0; z-index: 50; backdrop-filter: blur(6px);
}
.marca { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: var(--oro); text-decoration: none; letter-spacing: 1px; text-shadow: 0 0 20px rgba(232,193,90,.4); }
.barra nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.barra nav a { color: var(--tenue); text-decoration: none; padding: .45rem .9rem; border-radius: 8px; text-transform: uppercase; font-size: .9rem; font-weight: 600; letter-spacing: .5px; transition: .15s; }
.barra nav a:hover { color: var(--oro); background: rgba(232,193,90,.12); }
.barra nav a[aria-current="page"] { color: var(--oro); background: rgba(232,193,90,.2); }

main { max-width: 1120px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 4rem; }

/* Portada */
.portada {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 2.5rem; align-items: center;
  padding: 1rem 0 2.5rem; border-bottom: 1px solid var(--borde);
}
.portada h1 {
  font-size: clamp(2.8rem, 8vw, 5.2rem); letter-spacing: .06em; margin: 0;
  color: #F3E7C4; text-shadow: 0 2px 0 #0E1220, 0 0 34px rgba(122, 60, 192, .6), 0 0 18px rgba(232,193,90,.25);
}
.lema { color: var(--tenue); font-size: 1.2rem; margin: .4rem 0 1.5rem; max-width: 52ch; }
.estado { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; font-weight: 500; margin: 0 0 1.75rem; }
.estado .luz { width: .7rem; height: .7rem; border-radius: 50%; background: var(--vida); box-shadow: 0 0 10px var(--vida); }
.estado.ok .luz { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
.estado .jugadores { color: var(--tenue); font-weight: 400; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

.boton {
  display: inline-block; background: linear-gradient(180deg, #f5d98a, var(--oro)); color: #2a1800; font-weight: 700; text-decoration: none;
  padding: .8rem 1.6rem; border: 0; border-radius: 9px; font: 700 1rem var(--cuerpo); cursor: pointer;
  text-transform: uppercase; letter-spacing: .5px; box-shadow: 0 4px 16px rgba(232,193,90,.35); transition: .15s;
}
.boton:hover { filter: brightness(1.08); transform: translateY(-2px); color: #2a1800; }
.boton.secundario { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1px var(--borde); }
.boton.secundario:hover { box-shadow: inset 0 0 0 1px var(--oro); }

/* Placa de la proxima invasion: el elemento principal */
.invasion {
  text-align: center; padding: 1.75rem 1.5rem;
  background: linear-gradient(180deg, #241240, #1a1030);
  border: 1px solid var(--oro); outline: 1px solid rgba(232, 193, 90, .35); outline-offset: 5px;
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.inv-titulo { margin: 0; color: var(--tenue); }
.inv-nombre { font-family: var(--display); font-size: 1.9rem; font-weight: 700; color: var(--oro); margin: .2rem 0; }
.inv-reloj { font-size: 1.6rem; font-variant-numeric: tabular-nums; margin: .2rem 0; }
.inv-hora { margin: 0; color: var(--tenue); font-size: .95rem; }

/* Columnas de portada */
.columnas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 3rem; }
.noticia { padding: 1rem 0; border-bottom: 1px solid var(--borde); }
.noticia time { color: var(--tenue); font-size: .9rem; }
.noticia p { margin: .4rem 0 0; max-width: 65ch; }
.top { padding-left: 1.4rem; margin: 0 0 1rem; }
.top li { padding: .35rem 0; }
.top .nombre { font-weight: 700; }
.top .detalle { display: block; color: var(--tenue); font-size: .95rem; }
.rates { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1.5rem; margin: 0; }
.rates dt { color: var(--tenue); }
.rates dd { margin: 0; font-weight: 500; }
.vacio { color: var(--tenue); }

/* Paginas interiores */
.angosta { max-width: 720px; }
.pestanas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.pestanas a { padding: .4rem .9rem; border: 1px solid var(--borde); border-radius: 4px; color: var(--tenue); text-decoration: none; }
.pestanas a[aria-current="page"] { border-color: var(--oro); color: var(--texto); }
.tabla { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--borde); white-space: nowrap; }
th { color: var(--tenue); font-weight: 500; }
tbody tr:nth-child(-n+3) td:nth-child(2) { color: var(--oro); font-weight: 700; }
.pasos { padding-left: 1.4rem; }
.pasos li { margin: .4rem 0; max-width: 65ch; }
.ayuda { color: var(--tenue); font-size: .95rem; }

/* Formulario */
.formulario { display: grid; gap: .5rem; max-width: 420px; }
.formulario label { display: grid; gap: .3rem; font-weight: 500; margin-top: .6rem; }
.formulario input {
  font: inherit; color: var(--texto); background: var(--piedra); border: 1px solid var(--borde);
  border-radius: 4px; padding: .65rem .8rem;
}
.formulario input:focus { border-color: var(--oro); outline: none; box-shadow: 0 0 0 2px rgba(217, 180, 92, .3); }
.formulario .ayuda { margin: 0; }
.formulario .boton { margin-top: 1rem; justify-self: start; }
.aviso { padding: 1rem 1.25rem; border-left: 3px solid var(--soul); background: var(--piedra); margin: 0 0 1.5rem; }
.aviso.error { border-color: var(--vida); }
.aviso.ok { border-color: var(--ok); }
.aviso ul { margin: 0; padding-left: 1.2rem; }
.aviso p { margin: .25rem 0; }

.pie { border-top: 1px solid var(--borde); color: var(--tenue); font-size: .9rem; text-align: center; padding: 1.5rem 1rem 2.5rem; }
.pie p { margin: .3rem 0; }

@media (max-width: 760px) {
  .portada, .columnas { grid-template-columns: 1fr; }
  .portada { gap: 1.75rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

/* Panel de administracion */
.buscar { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin: 0 0 1.5rem; }
.buscar label { display: grid; gap: .3rem; font-weight: 500; }
.buscar input, .formulario select, .formulario textarea {
  font: inherit; color: var(--texto); background: var(--piedra); border: 1px solid var(--borde);
  border-radius: 4px; padding: .65rem .8rem;
}
.formulario textarea { resize: vertical; }
.formulario.ancho { max-width: 640px; }
.formulario h2, .formulario h3 { margin: 1.25rem 0 0; }
.formulario .check { display: flex; align-items: center; gap: .6rem; font-weight: 400; }
.lista-simple { list-style: none; padding: 0; margin: 0 0 1rem; }
.lista-simple li { padding: .4rem 0; border-bottom: 1px solid var(--borde); }
.acciones-linea { display: flex; gap: 1.25rem; align-items: center; margin-top: .5rem; }
.enlace-peligro { background: none; border: 0; padding: 0; font: inherit; color: var(--vida); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
td.largo { white-space: normal; min-width: 280px; }

/* Antihack: acciones en linea dentro de la tabla */
.accion-mini { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .5rem .3rem 0; }
.accion-mini .enlace-peligro { font-size: .85rem; }
.acciones-col { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.acciones-col form { margin: 0; }
.enlace-suave { background: none; border: 0; padding: 0; font: inherit; color: var(--tenue); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Banner, logo y selector de color (panel Apariencia) */
.marca-logo { height: 40px; width: auto; display: block; }
.portada.con-banner {
  background-size: cover; background-position: center;
  border-radius: 6px; padding: 2.5rem clamp(1.5rem, 4vw, 3rem); margin-bottom: 1.5rem;
}
.colores { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: .5rem 0 1rem; }
.color-opcion { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border: 1px solid var(--borde); border-radius: 4px; cursor: pointer; font-weight: 400; }
.color-opcion .muestra { width: 1.2rem; height: 1.2rem; border-radius: 3px; border: 1px solid rgba(255,255,255,.2); }
.formulario input[type="file"] { padding: .5rem; background: var(--piedra); border: 1px dashed var(--borde); border-radius: 4px; }

/* Miniaturas en la portada (estilo tarjetas) */
.miniaturas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1rem; margin: 0 0 2.5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--borde);
}
.mini-card {
  background: linear-gradient(180deg, #1d1030, #140a22); border: 1px solid var(--borde); border-radius: 12px; overflow: hidden;
  transition: transform .15s, border-color .15s; box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.mini-card:hover { transform: translateY(-3px); border-color: var(--oro); }
.mini-img {
  position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  background-color: var(--noche);
}
.mini-badge {
  position: absolute; top: .5rem; left: .5rem; background: var(--oro); color: #1a1606;
  font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 3px; text-transform: uppercase;
}
.mini-cuerpo { padding: .75rem .85rem 1rem; }
.mini-cuerpo h3 { font-size: 1.05rem; margin: 0 0 .25rem; color: var(--oro); }
.mini-cuerpo p { margin: 0; font-size: .9rem; color: var(--tenue); }

/* Lista de miniaturas en el panel */
.mini-lista { display: grid; gap: .75rem; }
.mini-fila { display: flex; gap: 1rem; align-items: center; padding: .6rem; border: 1px solid var(--borde); border-radius: 6px; }
.mini-fila img { width: 80px; height: 60px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.mini-info { flex: 1; min-width: 0; }
.mini-tag { display: inline-block; background: var(--oro); color: #1a1606; font-size: .7rem; font-weight: 700; padding: .1rem .4rem; border-radius: 3px; margin-left: .5rem; }
.mini-acciones { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.mini-acciones form { margin: 0; }


/* ===== Portada HERO grande (estilo DmNCMS) ===== */
.hero {
  position: relative;
  min-height: 420px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2rem;
  background-size: cover; background-position: center right;
  border-radius: 14px; overflow: hidden;
  padding: 3rem clamp(1.5rem, 4vw, 3.5rem);
  margin: 0 0 2rem;
  border: 1px solid rgba(232,193,90,.3);
  box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 0 120px rgba(122,60,192,.2);
}
.hero-contenido { max-width: 560px; position: relative; z-index: 2; }
.hero-contenido h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem); margin: 0 0 .5rem; color: #F3E7C4;
  text-shadow: 0 2px 0 #0E1220, 0 0 40px rgba(122,60,192,.8), 0 0 20px rgba(232,193,90,.3);
}
.hero-contenido .lema { color: var(--texto); font-size: 1.25rem; margin: 0 0 1.5rem; max-width: 46ch; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.hero .estado { margin-bottom: 1.75rem; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.hero .invasion { position: relative; z-index: 2; min-width: 240px; }

@media (max-width: 760px) {
  .hero { flex-direction: column; align-items: flex-start; min-height: auto; background-position: center; }
  .hero .invasion { width: 100%; }
}