/* Revolucion Online: el espiritu de mu-revo.com (2006) con un acabado actual.
   Se conserva: fondo negro, logo rojo en serif con sombra blanca, dorado del "v.97", cajas con encabezado guinda,
   noticias en rojo serif y menu en mayusculas. Se moderniza: contenedor mas ancho con sombra, esquinas suaves,
   letra mas legible, menu con la pagina actual resaltada, tablas cebra y botones con foco visible.
   Sin fuentes ni imagenes externas (la CSP solo permite recursos del propio sitio). */
:root {
    --fondo: #050507;
    --pergamino: #f4efe4;
    --panel: #fffdf8;
    --texto: #1d1a17;
    --texto-suave: #6b625a;
    --link: #0a74c4;
    --link-hover: #e07b00;
    --noticia: #d40000;
    --guinda: #7a1a0a;
    --guinda-osc: #3d0b04;
    --dorado: #e8b923;
    --dorado-suave: #f6e7b4;
    --linea: #e2d6bf;
    --linea-fuerte: #c9b48c;
    --verde: #1f7a1f;
    --rojo: #b80000;
    --radio: 6px;
    --sombra: 0 1px 2px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
html { background: var(--fondo); }
body {
    margin: 0; color: var(--texto); min-height: 100vh;
    font-family: Verdana, Tahoma, "Segoe UI", sans-serif; font-size: 12px; line-height: 1.5;
    background:
        radial-gradient(ellipse at 50% -10%, rgba(140,30,10,.35), transparent 55%),
        radial-gradient(ellipse at 50% 120%, rgba(60,20,90,.25), transparent 60%),
        var(--fondo);
}
a { color: var(--link); text-decoration: none; font-weight: bold; }
a:hover, a:focus-visible { color: var(--link-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--dorado); outline-offset: 2px; }
.sitio { width: 960px; max-width: 100%; margin: 0 auto; padding: 16px 0 0; }

/* ---------- Encabezado ---------- */
.header {
    height: 190px; position: relative; overflow: hidden; border-radius: var(--radio) var(--radio) 0 0;
    border: 1px solid rgba(232,185,35,.35); border-bottom: 0;
    background:
        radial-gradient(ellipse at 78% 135%, rgba(255,110,0,.6), transparent 58%),
        radial-gradient(ellipse at 15% -20%, rgba(110,150,255,.32), transparent 55%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 8px),
        linear-gradient(#17172a, #3a1b10 72%, #120806);
    box-shadow: inset 0 -40px 60px rgba(0,0,0,.45);
}
.logo {
    position: absolute; left: 32px; top: 34px;
    font-family: "Times New Roman", Georgia, serif; font-size: 58px; font-weight: bold; line-height: 1;
    color: #e01010; letter-spacing: 1px;
    text-shadow: 3px 3px 0 #ffffff, 5px 6px 10px rgba(0,0,0,.85), 0 0 30px rgba(255,40,0,.35);
}
.logo:hover, .logo:focus-visible { color: #ff2a2a; text-decoration: none; }
.logo small {
    display: block; margin-top: 10px; font-size: 15px; color: #fff; letter-spacing: 6px;
    font-family: Verdana, Tahoma, sans-serif; text-shadow: 2px 2px 3px #000;
}
.version {
    position: absolute; right: 30px; bottom: 26px;
    font-family: Georgia, serif; font-weight: bold; font-size: 22px; color: #ffd400;
    text-shadow: 2px 2px 0 #7a0000, 0 0 12px rgba(0,0,0,.9);
}

/* ---------- Menu ---------- */
.menu {
    display: flex; flex-wrap: wrap; justify-content: center;
    background: linear-gradient(#24120c, #0d0605);
    border: 1px solid rgba(232,185,35,.35); border-top: 1px solid rgba(232,185,35,.6);
    box-shadow: 0 2px 0 #000;
}
.menu a, .menu .pronto {
    position: relative; padding: 11px 15px; font-size: 11px; letter-spacing: 1.5px; font-weight: bold;
    color: #f1e9d6; text-decoration: none;
}
.menu a::after {
    content: ""; position: absolute; left: 15px; right: 15px; bottom: 6px; height: 2px;
    background: var(--dorado); transform: scaleX(0); transition: transform .2s ease;
}
.menu a:hover, .menu a:focus-visible { color: var(--dorado); text-decoration: none; }
.menu a:hover::after, .menu a:focus-visible::after, .menu a.activo::after { transform: scaleX(1); }
.menu a.activo { color: var(--dorado); }
.menu .pronto { color: #6f665c; cursor: default; }

/* Beta cerrada (039): franja bajo el menu y nota en el registro */
.aviso-beta {
    padding: 8px 16px; text-align: center; font-size: 13px; line-height: 1.5; color: var(--dorado-suave);
    background: repeating-linear-gradient(135deg, #2a1206 0 14px, #331708 14px 28px);
    border: 1px solid rgba(232,185,35,.35); border-top: 0;
}
.aviso-beta b { color: var(--dorado); letter-spacing: 1px; }
.aviso-beta-texto { padding: 10px 12px; border-left: 3px solid var(--dorado); background: rgba(232,185,35,.08); }

/* ---------- Cuerpo ---------- */
.cuerpo {
    display: flex; gap: 14px; padding: 14px; background: var(--pergamino);
    border: 1px solid rgba(232,185,35,.35); border-top: 0;
}
.izq { width: 240px; flex: none; }
.der { flex: 1; min-width: 0; }

.caja {
    background: var(--panel); border: 1px solid var(--linea); border-radius: var(--radio);
    margin-bottom: 14px; box-shadow: var(--sombra); overflow: hidden;
}
.caja h2 {
    margin: 0; padding: 7px 12px; font-size: 13px; color: #fff; letter-spacing: 1.5px; font-weight: bold;
    font-family: Georgia, "Times New Roman", serif;
    background: linear-gradient(#8a2210, var(--guinda-osc));
    border-bottom: 2px solid var(--dorado);
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
}
.caja .c { padding: 10px 12px; }
.estado { border-collapse: collapse; width: 100%; }
.estado td { padding: 3px 0; font-size: 11px; border-bottom: 1px dotted var(--linea); }
.estado tr:last-child td { border-bottom: 0; }
.online { color: var(--verde); font-weight: bold; }
.offline { color: var(--rojo); font-weight: bold; }
.dato { font-variant-numeric: tabular-nums; }

/* Noticias: rojo serif centrado, como el original */
.noticias { min-height: 200px; text-align: center; padding: 12px 14px; }
.noticias .fecha { color: var(--noticia); font-weight: bold; font-family: "Times New Roman", serif; font-size: 15px; margin-top: 6px; }
.noticias p { color: var(--noticia); font-weight: bold; font-family: "Times New Roman", serif; font-size: 15px; margin: 4px 0; line-height: 1.35; }
.noticia { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px dashed var(--linea-fuerte); }
.noticia:last-of-type { border-bottom: 0; }
.noticia h3 { margin: 2px 0 6px; font-family: "Times New Roman", serif; font-size: 19px; }
.noticia h3 a { color: var(--noticia); }
.noticias .todas { font-family: inherit; font-weight: normal; font-size: 12px; color: inherit; margin-top: 10px; }
.paginas { display: flex; justify-content: center; gap: 14px; font-size: 12px; margin-top: 10px; }

.info { display: flex; gap: 14px; }
.info .caja { flex: 1; }
.lema {
    min-height: 64px; display: flex; align-items: center; justify-content: center; text-align: center;
    font-family: Georgia, serif; font-weight: bold; font-size: 14px; color: var(--guinda);
}
.nota { color: var(--texto-suave); font-size: 11px; }

/* ---------- Pie ---------- */
.pie {
    text-align: center; color: #a89f92; font-size: 11px; padding: 14px 16px; margin-bottom: 20px;
    background: linear-gradient(#120806, #050303); border: 1px solid rgba(232,185,35,.35); border-top: 2px solid var(--dorado);
    border-radius: 0 0 var(--radio) var(--radio);
}
.pie a { color: var(--dorado); }

/* ---------- Botones y formularios ---------- */
button, .boton {
    font: inherit; font-size: 11px; font-weight: bold; letter-spacing: .5px; cursor: pointer;
    color: #fff; padding: 6px 16px; border-radius: 4px; border: 1px solid var(--dorado);
    background: linear-gradient(#9a2a14, var(--guinda-osc));
    box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 1px 2px rgba(0,0,0,.25);
    transition: transform .1s ease, filter .15s ease;
}
button:hover, .boton:hover { filter: brightness(1.15); text-decoration: none; color: #fff; }
button:active { transform: translateY(1px); }
.boton { display: inline-block; }
.formulario { display: flex; flex-direction: column; max-width: 340px; gap: 3px; }
.formulario.ancho { max-width: 100%; }
.formulario label { font-weight: bold; margin-top: 10px; }
.formulario input, .formulario textarea, .formulario select, .repartir input, .levantar input, .en-fila select {
    font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--linea-fuerte); border-radius: 4px; background: #fff;
}
.formulario input:focus, .formulario textarea:focus, .formulario select:focus { outline: 2px solid var(--dorado); outline-offset: 0; border-color: var(--guinda); }
.formulario textarea { resize: vertical; }
.formulario small { color: var(--texto-suave); font-size: 11px; }
.formulario button, .caja form button { margin-top: 12px; align-self: flex-start; }
.formulario .cf-turnstile { margin-top: 12px; }
.formulario .casilla { font-weight: normal; display: flex; gap: 6px; align-items: center; }
.formulario fieldset.premio { border: 1px solid var(--linea-fuerte); border-radius: var(--radio); padding: 4px 10px 10px; margin: 6px 0 0; display: flex; flex-direction: column; }
.formulario fieldset.premio legend { font-weight: bold; color: var(--guinda); padding: 0 4px; }
.error { color: var(--rojo); font-size: 11px; }
.errores { color: var(--rojo); font-weight: bold; }
.errores ul { margin: 0; padding-left: 18px; }
.validation-summary-valid { display: none; }
.exito { color: var(--verde); font-weight: bold; }
p.exito, p.errores { padding: 8px 12px; border-radius: 4px; }
p.exito { background: #e9f6e9; border: 1px solid #9fd09f; }
p.errores { background: #fbeaea; border: 1px solid #e3a3a3; }
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.aviso { background: #fff6d5; border: 1px solid #d9b84a; border-left: 4px solid var(--dorado); padding: 8px 12px; font-weight: bold; border-radius: 4px; }
.peligro {
    font: inherit; font-size: 11px; color: var(--rojo); background: none; border: 0; box-shadow: none;
    cursor: pointer; text-decoration: underline; padding: 0 0 0 8px;
}
.peligro:hover { filter: none; color: #ff2a2a; }
.peligro-boton { background: linear-gradient(#c62828, #6b0000); border-color: #ffb3b3; }
code { font-family: Consolas, "Courier New", monospace; background: #efe6d2; padding: 1px 5px; border-radius: 3px; font-size: 11px; }

/* ---------- Tablas ---------- */
.tabla-desliza { overflow-x: auto; }
.ranking { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 11px; }
.ranking.corta { width: auto; min-width: 280px; }
.ranking th {
    background: #ece2cb; color: #4a3a22; text-align: left; padding: 6px 8px; white-space: nowrap;
    border-bottom: 2px solid var(--linea-fuerte); font-size: 11px;
}
.ranking th:first-child { border-top-left-radius: 4px; }
.ranking th:last-child { border-top-right-radius: 4px; }
.ranking td { padding: 5px 8px; border-bottom: 1px solid #f0e8d8; font-variant-numeric: tabular-nums; vertical-align: middle; }
.ranking tbody tr:nth-child(even) td { background: #fbf7ee; }
.ranking tbody tr:hover td { background: #fff1c9; }
.ranking tbody tr:nth-child(-n+3) td:first-child { color: #b8860b; font-weight: bold; }
.ranking.sin-podio tbody tr td:first-child { color: inherit; font-weight: normal; }
.ranking .mensaje { color: var(--texto-suave); font-style: italic; font-size: 10px; }
.ranking tr.activo td { background: #e5f5e5; }
.ranking tr.total td { font-weight: bold; border-top: 2px solid var(--linea-fuerte); }
.ranking.numeros td:not(:first-child), .ranking.numeros th:not(:first-child) { text-align: center; }
.punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2fbf2f; margin-left: 5px; box-shadow: 0 0 6px #2fbf2f; }
.emblema { display: block; border: 1px solid #ccc; background: #fff; border-radius: 2px; }
.stats { border-collapse: collapse; width: 100%; max-width: 460px; }
.stats th { text-align: left; font-weight: bold; padding: 2px 8px 2px 0; font-size: 11px; color: #4a3a22; }
.stats td { padding: 2px 12px 2px 0; font-size: 11px; font-variant-numeric: tabular-nums; }
.datos td { font-size: 12px; padding: 4px 0; }

/* ---------- Pestanas (ranking) ---------- */
.pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pestanas a {
    font-size: 11px; font-weight: bold; padding: 5px 12px; border: 1px solid var(--linea-fuerte);
    background: #fff; border-radius: 999px; color: #4a3a22;
}
.pestanas a:hover { text-decoration: none; border-color: var(--guinda); color: var(--guinda); }
.pestanas a.activa { background: linear-gradient(#9a2a14, var(--guinda-osc)); color: #fff; border-color: var(--dorado); }
.pestanas.sub a { font-weight: normal; }

/* ---------- Contenido ---------- */
.texto h3 { font-size: 13px; color: var(--guinda); margin: 14px 0 6px; font-family: Georgia, serif; }
.texto ul, .texto ol { margin: 4px 0; padding-left: 22px; }
.texto li { margin: 4px 0; }
.submenu { list-style: none; margin: 0; padding: 0; }
.submenu li { border-bottom: 1px dotted var(--linea-fuerte); }
.submenu li:last-child { border-bottom: 0; }
.submenu a { display: block; padding: 5px 4px; border-radius: 3px; }
.submenu a:hover { background: var(--dorado-suave); text-decoration: none; }
.centro { text-align: center; }
.subtitulo { font-size: 12px; color: var(--guinda); margin: 12px 0 6px; font-weight: bold; }

/* ---------- Panel de cuenta ---------- */
.personaje { border-bottom: 1px dashed var(--linea-fuerte); padding: 8px 0 12px; }
.personaje:last-child { border-bottom: 0; }
.personaje h3 { margin: 0 0 6px; font-size: 15px; color: var(--guinda); font-family: Georgia, serif; }
.personaje h3 small { color: var(--texto-suave); font-weight: normal; font-size: 11px; font-family: Verdana, sans-serif; }
.repartir { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 8px; }
.repartir label { font-size: 11px; font-weight: bold; display: flex; flex-direction: column; gap: 2px; }
.repartir input { width: 72px; }
.repartir button { margin-top: 0; }
.personaje form button { margin-top: 8px; }

/* ---------- Eventos ---------- */
.proximo {
    text-align: center; padding: 14px; margin-bottom: 12px; border-radius: var(--radio);
    border: 1px solid var(--dorado); background: radial-gradient(ellipse at 50% 0%, #fff4d0, #fffaf0 70%);
}
.proximo .titulo { font-size: 11px; font-weight: bold; letter-spacing: 3px; color: var(--guinda); }
.proximo .nombre { font-family: "Times New Roman", serif; font-size: 26px; font-weight: bold; color: var(--noticia); }
.cuenta { font-size: 20px; font-weight: bold; font-variant-numeric: tabular-nums; color: #1a3a6b; margin: 4px 0; }
.cuenta.corta { font-size: 11px; margin: 0; color: inherit; }
.nombre-evento { font-family: "Times New Roman", serif; font-size: 18px; font-weight: bold; color: var(--noticia); }
/* Foto del monstruo del dia en la portada (la de la enciclopedia); se ajusta a la columna en celular */
.mdd-foto { display: block; width: 100%; max-width: 180px; height: auto; margin: 0 auto 8px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #111; }
.en-curso { background: #e5f5e5; border: 1px solid #8fca8f; border-left: 4px solid var(--verde); padding: 8px 12px; color: #165c16; border-radius: 4px; }
.evento { border-bottom: 1px dashed var(--linea-fuerte); padding: 6px 0 12px; }
.evento:last-child { border-bottom: 0; }
.evento h3 { margin: 6px 0 4px; font-size: 15px; color: var(--guinda); font-family: Georgia, serif; }
.evento h3 small { color: var(--texto-suave); font-weight: normal; font-size: 11px; font-family: Verdana, sans-serif; }
.evento p { margin: 3px 0; }
.evento ul { margin: 3px 0; padding-left: 20px; }

/* Bracket del Rey PK: una columna por ronda; las partidas de cada ronda se reparten a lo alto para que se lea el arbol */
.semilla code { word-break: break-all; }
.bracket { display: flex; gap: 14px; min-width: max-content; padding: 4px 2px 8px; }
.bracket .ronda { display: flex; flex-direction: column; width: 170px; }
.bracket .ronda-t { text-align: center; font-weight: bold; color: var(--guinda); text-transform: uppercase; font-size: 10px; letter-spacing: .06em; margin-bottom: 6px; }
.bracket .partidas { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.bracket .partida { background: var(--panel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.bracket .partida.lista { border-color: var(--dorado); box-shadow: 0 0 0 2px var(--dorado-suave); }
.bracket .lado { display: flex; justify-content: space-between; gap: 6px; padding: 3px 8px; }
.bracket .lado + .lado { border-top: 1px solid var(--linea); }
.bracket .lado span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bracket .lado.gana { background: var(--dorado-suave); font-weight: bold; }
.bracket .lado.gana span::before { content: "\2605  "; color: var(--guinda); }
.bracket .lado.pierde { color: var(--texto-suave); }
.bracket .partida.espera .lado { color: var(--texto-suave); font-style: italic; }
.bracket .motivo { font-size: 10px; color: var(--texto-suave); padding: 1px 8px 3px; border-top: 1px dashed var(--linea); }
.bracket .ronda:last-child .partida { border-color: var(--guinda); }
.en-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.en-fila button { margin-top: 0; }

/* ---------- Administracion y sanciones ---------- */
.acciones { white-space: nowrap; }
.en-linea { display: inline; }
/* Boton que se ve como enlace (acciones de formulario dentro de un texto: "Perdi mi autenticador", avisos) */
button.enlace { background: none; border: 0; padding: 0; font: inherit; font-weight: bold; color: var(--link); cursor: pointer; }
button.enlace:hover, button.enlace:focus-visible { color: var(--link-hover); text-decoration: underline; }
.levantar { display: flex; gap: 6px; align-items: center; }
.levantar input { font-size: 11px; width: 150px; padding: 4px 6px; }

/* ---------- Tienda ---------- */
.productos { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0; }
.producto {
    flex: 1 1 170px; padding: 14px 12px; text-align: center; border-radius: var(--radio);
    border: 1px solid var(--dorado); background: linear-gradient(#fffaf0, #fff); box-shadow: var(--sombra);
    transition: transform .15s ease, box-shadow .15s ease;
}
.producto:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.producto h3 { margin: 0 0 6px; font-size: 15px; color: var(--guinda); font-family: Georgia, serif; }
.producto .precio { font-size: 22px; font-weight: bold; color: #1a3a6b; margin: 4px 0; }
.producto ul { text-align: left; font-size: 11px; padding-left: 18px; }
.pronto-caja { border: 1px dashed var(--linea-fuerte); background: #f6f2ea; color: var(--texto-suave); box-shadow: none; }
.pronto-caja:hover { transform: none; box-shadow: none; }
.estado-pagado { color: var(--verde); font-weight: bold; }
.estado-rechazado { color: var(--rojo); font-weight: bold; }
.estado-revisar { color: #b36b00; font-weight: bold; }

/* ---------- Celular ---------- */
@media (max-width: 760px) {
    .sitio { padding-top: 0; }
    .header { height: 150px; border-radius: 0; }
    .logo { font-size: 38px; left: 16px; top: 26px; }
    .logo small { font-size: 12px; letter-spacing: 4px; }
    .version { right: 16px; bottom: 14px; font-size: 16px; }
    .menu a, .menu .pronto { padding: 9px 10px; font-size: 10px; letter-spacing: 1px; }
    .cuerpo { flex-direction: column; padding: 10px; gap: 0; }
    .izq { width: auto; }
    .info { flex-direction: column; gap: 0; }
    .pie { border-radius: 0; margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ---------- Menu lateral agrupado (Servicios) ---------- */
.submenu-grupos h3 {
    margin: 12px 0 4px; padding-bottom: 3px; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--texto-suave); border-bottom: 1px solid var(--linea);
}
.submenu-grupos h3:first-child { margin-top: 0; }
.submenu-grupos .submenu li { border-bottom: 0; }
.submenu-grupos .submenu a { padding: 4px 8px; border-left: 3px solid transparent; }
.submenu-grupos .submenu a:hover { border-left-color: var(--dorado); }
.submenu-grupos .submenu a.activo { background: var(--dorado-suave); border-left-color: var(--guinda); color: var(--guinda); }

/* ---------- Servicios: resumen en tarjetas y secciones ---------- */
.caja h2 .titulo-enlace { color: inherit; text-decoration: none; }
.caja h2 .titulo-enlace:hover { color: var(--dorado); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 10px; }
.tarjeta {
    display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--radio);
    background: linear-gradient(#fffaf0, #fff); border: 1px solid var(--linea); border-top: 3px solid var(--guinda);
    color: var(--texto); font-weight: normal; box-shadow: var(--sombra);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.tarjeta:hover, .tarjeta:focus-visible { transform: translateY(-2px); border-top-color: var(--dorado); box-shadow: 0 6px 18px rgba(0,0,0,.12); text-decoration: none; color: var(--texto); }
.tarjeta-titulo { font-family: Georgia, serif; font-size: 15px; font-weight: bold; color: var(--guinda); }
.tarjeta-dato { font-size: 13px; font-weight: bold; color: #1a3a6b; }
.tarjeta-texto { font-size: 11px; color: var(--texto-suave); }
.migas { font-size: 11px; color: var(--texto-suave); margin: 0 0 8px 2px; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 10px; }
.cifras div { text-align: center; padding: 8px; border-radius: var(--radio); background: #fbf5e6; border: 1px solid var(--linea); }
.cifras b { display: block; font-size: 22px; color: var(--guinda); font-family: Georgia, serif; }
.cifras span { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--texto-suave); }
.pasos { margin: 0 0 12px; padding-left: 22px; }
.pasos li { margin: 4px 0; }
.opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 8px 0; }
.opciones > div { padding: 10px 12px; border-radius: var(--radio); background: #fbf5e6; border: 1px solid var(--linea); border-left: 3px solid var(--dorado); }
.opciones > div > b { color: var(--guinda); font-family: Georgia, serif; font-size: 14px; }
.opciones p, .opciones ul { margin: 6px 0 0; }
.opciones ul { padding-left: 18px; }
.anterior-siguiente { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin: 4px 2px 0; }

/* ---------- Logo oficial (imagen) ---------- */
/* Sustituye al logo de texto: misma posicion, el resplandor detras lo hace resaltar sobre el fondo del encabezado */
.header .logo { top: 50%; transform: translateY(-50%); left: 26px; font-size: 0; line-height: 0; text-shadow: none; }
.header .logo img { display: block; width: 520px; max-width: 100%; height: auto; filter: drop-shadow(0 4px 14px rgba(0,0,0,.65)); transition: filter .2s ease; }
.header .logo:hover img, .header .logo:focus-visible img { filter: drop-shadow(0 4px 14px rgba(0,0,0,.65)) drop-shadow(0 0 18px rgba(255,80,0,.35)); }
@media (max-width: 760px) {
    .header .logo { left: 4%; right: 4%; }
    .header .logo img { width: 100%; }
    .header .version { display: none; } /* en celular el logo ya lo dice todo y no se encima */
}

/* Fase 6.5, paso 2c: insignia VIP y titulo por hito de resets en el ranking */
.insignia-vip { display: inline-block; margin-left: 6px; padding: 0 4px; font-size: 9px; font-weight: bold; letter-spacing: 1px; color: #1a1205; background: var(--dorado); border-radius: 2px; vertical-align: middle; }
.insignia-fundador { display: inline-block; margin-left: 6px; padding: 0 4px; font-size: 9px; font-weight: bold; letter-spacing: 1px; color: var(--dorado); background: #3a0d0d; border: 1px solid var(--dorado); border-radius: 2px; vertical-align: middle; }
.titulo-reset { display: inline-block; margin-left: 6px; font-size: 10px; font-style: italic; color: var(--dorado); vertical-align: middle; }

/* Admin/Chat: analisis semanal del chat (texto con sus saltos de linea) */
.analisis { white-space: pre-wrap; }

/* Panel de admin: menu y bitacoras de texto (Admin/Estado) */
pre.bitacora { white-space: pre-wrap; word-break: break-word; font-size: 11px; max-height: 360px; overflow-y: auto; background: rgba(0,0,0,.04); padding: 8px; border-radius: 4px; }

/* Admin / Trivia */
.trv-apagada { opacity: .5; }
.trv-punto { width: 10px; height: 10px; vertical-align: middle; }
.trv-cat { display: inline-block; margin: 2px 8px 2px 0; }

/* Mi cuenta: energia de caza al estilo Tibia */
.energia { margin: 10px 0; }
.energia-cab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.energia-barra { display: block; width: 100%; height: 14px; margin: 4px 0; border: 1px solid var(--linea-fuerte); border-radius: 3px; }
.energia-vacia { fill: var(--linea); }
.energia-normal { fill: var(--dorado); }
.energia-bono { fill: #2fa82f; }
.energia-cansado { fill: var(--rojo); }
.energia-marca { stroke: var(--guinda-osc); stroke-width: .4; }
.energia-texto { margin: 2px 0 0; font-size: 11px; color: var(--texto-suave); }
.energia-verde { color: var(--verde); font-weight: bold; }
.energia-rojo { color: var(--rojo); font-weight: bold; }

/* Enciclopedia (2026-10-24): buscador predictivo de objetos, monstruos y NPCs */
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.enc-foto { float: right; max-width: min(45%, 200px); height: auto; margin: 0 0 10px 14px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #111; }
.enc-buscar { position: relative; display: flex; gap: 8px; align-items: center; }
.caja form.enc-buscar button { margin-top: 0; }
.enc-buscar input[type=search] { flex: 1; min-width: 0; padding: 8px 10px; font-size: 13px; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); }
.enc-sugerencias { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin: 4px 0 0; padding: 0; list-style: none;
    background: var(--panel); border: 1px solid var(--linea-fuerte); border-radius: var(--radio); box-shadow: var(--sombra); max-height: 420px; overflow-y: auto; }
.enc-sugerencias li a { display: flex; gap: 8px; align-items: baseline; padding: 6px 10px; color: var(--texto); text-decoration: none; }
.enc-sugerencias li a .nota { margin-left: auto; text-align: right; }
.enc-sugerencias li.elegida a, .enc-sugerencias li a:hover { background: var(--dorado-suave); }
.enc-nombre { font-weight: bold; }
.enc-tipo { font-size: 10px; padding: 1px 6px; border-radius: 10px; color: #fff; background: var(--texto-suave); white-space: nowrap; }
.enc-tipo-o { background: var(--guinda); }
.enc-tipo-m { background: var(--rojo); }
.enc-tipo-n { background: var(--verde); }
.enc-lista { padding-left: 18px; }
.enc-datos { columns: 2; padding-left: 18px; }
.enc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.enc-chips li a { display: inline-block; padding: 2px 8px; border: 1px solid var(--linea-fuerte); border-radius: 12px; background: var(--panel); }
@media (max-width: 600px) { .enc-datos { columns: 1; } .enc-sugerencias li a { flex-wrap: wrap; } .enc-sugerencias li a .nota { margin-left: 0; text-align: left; width: 100%; } }
.enc-pj { display: flex; gap: 8px; align-items: center; margin: 6px 0 10px; }
.caja form.enc-pj button { margin-top: 0; }
.veredicto { display: inline-block; padding: 1px 8px; border-radius: 10px; font-weight: bold; font-size: 11px; color: #fff; }
.ver-facil { background: var(--verde); }
.ver-bien { background: #3f8f3f; }
.ver-cuidado { background: var(--link-hover); }
.ver-peligro { background: var(--rojo); }

/* Guias (Fase 6.9): portada con tarjetas y guias con capturas del juego */
.submenu-grupos h3 a { color: inherit; }
.submenu-grupos h3 a.activo { text-decoration: underline; }
.guia-tarjetas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.guia-tarjetas a { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); overflow: hidden; background: var(--panel); color: var(--texto); }
.guia-tarjetas a:hover { text-decoration: none; border-color: var(--guinda); box-shadow: var(--sombra); }
.guia-tarjetas img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #111; }
.guia-tarjetas b { padding: 8px 10px 2px; color: var(--guinda); }
.guia-tarjetas span { padding: 0 10px 10px; font-size: 11px; color: var(--texto-suave); }
.guia h3 { clear: both; margin-top: 18px; }
.guia .ranking tbody tr:nth-child(-n+3) td:first-child { color: inherit; font-weight: normal; } /* sin podio: no es un ranking */
.guia-ruta { font-size: 11px; color: var(--texto-suave); }
.guia-img { margin: 6px 0 12px; }
.guia-img img { display: block; max-width: 100%; height: auto; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); background: #111; }
.guia-img figcaption { font-size: 11px; color: var(--texto-suave); margin-top: 4px; }
.guia-img.der { float: right; width: min(46%, 320px); margin: 4px 0 10px 14px; }
.guia-img.der.angosta { width: min(34%, 200px); }
.guia-npcs { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.guia-npcs li { display: flex; gap: 8px; align-items: flex-start; border: 1px solid var(--linea); border-radius: var(--radio); padding: 6px; background: var(--panel); }
.guia-npcs img { width: 56px; height: 56px; object-fit: cover; border-radius: 4px; flex: none; background: #111; }
.guia-pie { clear: both; display: flex; justify-content: space-between; gap: 8px; margin-top: 18px; padding-top: 10px; border-top: 1px dashed var(--linea-fuerte); font-size: 12px; }
@media (max-width: 600px) { .guia-img.der, .guia-img.der.angosta { float: none; width: auto; margin: 6px 0 12px; } .guia-img.der.angosta img { max-width: 220px; } }

/* ---------- Auditoria 2026-10-25: datos en vivo y celular ---------- */
.dato.cambio { animation: destello .8s ease-out; }
@keyframes destello { 0% { background: var(--dorado-suave); } 100% { background: transparent; } }
.v-aviso { color: var(--texto-suave); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .dato.cambio { animation: none; } }
@media (max-width: 760px) {
    /* El encabezado ocupaba un cuarto de la pantalla del celular */
    .header { height: 118px; }
    /* Tablas anchas (ranking, enciclopedia, guias): se deslizan de lado en vez de cortarse; las de datos (.estado) no */
    .caja .c > table:not(.estado), .noticias table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    table.ranking { font-size: 11px; }
    table.ranking th, table.ranking td { padding: 4px 6px; white-space: nowrap; }
}

/* Revolucion: codigo QR del 2FA (Cuenta > Seguridad); fondo blanco siempre, para que la camara lo lea */
.qr-2fa { margin: 8px 0 14px; }
.qr-2fa svg { display: block; max-width: 100%; height: auto; border: 1px solid var(--linea-fuerte); border-radius: var(--radio); }

/* Revolucion: huella SHA-256 del instalador (Descargas): que se parta en pantallas chicas */
.huella { word-break: break-all; }

/* ---------- Menu lateral de cada seccion (2026-10-27, Servicios/MenuSitio.cs) ---------- */
.menu-seccion-boton { display: none; }
.menu-seccion form .submenu-boton {
    display: block; margin: 0; font-size: inherit; font-weight: normal; border-radius: 0; width: 100%; text-align: left; padding: 4px 8px; border: 0; border-left: 3px solid transparent;
    background: none; color: var(--guinda); font: inherit; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0;
}
.menu-seccion form .submenu-boton:hover { filter: none; background: var(--dorado-suave); border-left-color: var(--dorado); }
.datos-cuenta td { width: 50%; }
@media (max-width: 760px) {
    /* En celular el menu va arriba, plegado detras de un boton que dice donde estas ("TIENDA: Mis pedidos") */
    .menu-seccion { margin-bottom: 10px; }
    .js .menu-seccion h2 { display: none; }
    .js .menu-seccion-boton {
        display: flex; align-items: center; gap: 8px; width: 100%; padding: 10px 12px; border: 0; border-radius: 0;
        background: linear-gradient(#8a2210, var(--guinda-osc)); color: #fff; font: bold 12px Georgia, serif;
        letter-spacing: 1px; text-align: left; cursor: pointer; box-shadow: none;
    }
    .js .menu-seccion-boton::after { content: "▾"; margin-left: auto; transition: transform .2s ease; }
    .js .menu-seccion.abierto .menu-seccion-boton::after { transform: rotate(180deg); }
    .js .menu-seccion:not(.abierto) .submenu-grupos { display: none; }
    .submenu-grupos .submenu a, .menu-seccion form .submenu-boton { padding: 8px 10px; }   /* mas facil de tocar con el dedo */
    .datos-cuenta td { display: block; width: auto; }
}

/* Al cambiar de pagina solo se desvanece el contenido de la derecha: el encabezado y el menu se quedan quietos
   (Chrome y Edge; los demas navegadores cargan normal) */
@view-transition { navigation: auto; }
.cuerpo > .contenido { view-transition-name: contenido; }
::view-transition-old(contenido) { animation: 90ms ease-out both salida-contenido; }
::view-transition-new(contenido) { animation: 180ms ease-out both entrada-contenido; }
@keyframes salida-contenido { to { opacity: 0; } }
@keyframes entrada-contenido { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- Historial de la cuenta (Mi cuenta, 2026-10-27) ---------- */
.historial td { vertical-align: top; }
.historial-fecha { white-space: nowrap; color: var(--texto-suave); font-variant-numeric: tabular-nums; }
.historial-tipo {
    display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 9px; font-size: 10px; font-weight: bold;
    letter-spacing: .3px; color: #fff; background: #7a6f62; vertical-align: 1px;
}
.historial-seguridad { background: #8a2210; }
.historial-juego { background: #2f6b3a; }
.historial-vip { background: #9a7400; }
.historial-eventos { background: #1a4f8a; }
@media (max-width: 760px) {
    /* En celular cada movimiento es una tarjetita: fecha arriba, texto completo y la red abajo (sin deslizar de lado) */
    .historial thead { display: none; }
    .historial, .historial tbody { display: block; }
    .historial tr { display: block; padding: 7px 4px; border-bottom: 1px dotted var(--linea-fuerte); }
    table.ranking.historial td { display: block; padding: 1px 0; border: 0; white-space: normal; }
    .historial td:nth-child(3):empty { display: none; }
    .historial td:nth-child(3)::before { content: "Red: "; color: var(--texto-suave); }
}

/* ---------- Portada (2026-10-27): bienvenida, cuenta regresiva y mini rankings ---------- */
.portada { flex: 1; min-width: 0; }
.portada-columnas { display: flex; gap: 14px; }
.hero {
    display: flex; gap: 18px; align-items: center; margin-bottom: 14px; padding: 22px 24px; border-radius: var(--radio);
    color: var(--dorado-suave); box-shadow: var(--sombra); border: 1px solid rgba(232,185,35,.45);
    background:
        radial-gradient(ellipse at 85% 50%, rgba(212,0,0,.35), transparent 60%),
        linear-gradient(135deg, var(--guinda-osc), #120806 70%);
}
.hero-texto { flex: 1; min-width: 0; }
.hero-etiqueta { margin: 0 0 4px; font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--dorado); }
.hero h1 { margin: 0 0 8px; font-family: Georgia, "Times New Roman", serif; font-size: 30px; line-height: 1.15; color: #fff; text-shadow: 2px 2px 0 #7a0000, 0 0 14px rgba(0,0,0,.8); }
.hero-sub { margin: 0 0 14px; font-size: 14px; line-height: 1.5; max-width: 520px; }
.hero-sub b { color: var(--dorado); }
.hero-botones { display: flex; flex-wrap: wrap; gap: 10px; }
.boton-hero {
    display: inline-block; padding: 11px 18px; border-radius: 4px; font-weight: bold; font-size: 13px; letter-spacing: 1px;
    color: #1a1205; background: linear-gradient(#ffd85a, var(--dorado) 55%, #b98b10); border: 1px solid #fff2b0;
    box-shadow: 0 2px 0 #5a3d00, 0 0 12px rgba(232,185,35,.35);
}
.boton-hero:hover, .boton-hero:focus-visible { color: #1a1205; text-decoration: none; filter: brightness(1.08); }
.boton-hero.secundario { color: var(--dorado-suave); background: rgba(0,0,0,.35); border-color: rgba(232,185,35,.6); box-shadow: none; }
.boton-hero.secundario:hover, .boton-hero.secundario:focus-visible { color: #fff; background: rgba(0,0,0,.55); }
.hero-nota { margin: 12px 0 0; font-size: 12px; color: var(--dorado-suave); opacity: .85; }
.hero-nota a { color: var(--dorado); }
.hero-cuenta {
    flex: none; width: 230px; padding: 14px 12px; text-align: center; border-radius: var(--radio);
    background: rgba(0,0,0,.45); border: 1px solid rgba(232,185,35,.5);
}
.hero-cuenta-titulo { font-size: 11px; letter-spacing: 3px; color: var(--dorado); font-weight: bold; }
.hero-cuenta-num { margin: 6px 0; font-family: Georgia, serif; font-size: 21px; white-space: nowrap; font-weight: bold; color: #fff; font-variant-numeric: tabular-nums; }
.hero-cuenta-fecha { font-size: 12px; }

/* Noticias de la portada: titulo rojo de siempre, resumen en texto normal y "Leer mas" */
.portada .noticias { text-align: left; }
.portada .noticias .fecha, .portada .noticia h3 { text-align: center; }
.portada .noticias p { color: var(--texto); font-weight: normal; font-family: inherit; font-size: 13px; line-height: 1.5; }
.portada .noticias .todas { text-align: center; }
.leer-mas { display: inline-block; margin-top: 2px; font-size: 12px; font-weight: bold; }

.mini-ranking { list-style: none; margin: 0; padding: 0; }
.mini-ranking li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dotted var(--linea); }
.mini-ranking li:last-child { border-bottom: 0; }
.mini-puesto { flex: none; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; font-size: 11px; font-weight: bold; color: var(--guinda); background: var(--dorado-suave); }
.mini-ranking li:first-child .mini-puesto { color: #1a1205; background: var(--dorado); }
.mini-emblema { flex: none; display: flex; }
.mini-nombre { flex: 1; min-width: 0; font-size: 13px; }
.mini-nombre small { display: block; color: var(--texto-suave); font-size: 11px; }
.mini-valor { flex: none; text-align: right; font-weight: bold; font-size: 13px; line-height: 1.2; }
.mini-valor small { font-weight: normal; color: var(--texto-suave); font-size: 11px; }
.mini-record { margin: 8px 0 0; padding: 6px 8px; font-size: 12px; background: var(--dorado-suave); border-radius: 4px; }
.mini-mas { margin: 8px 0 0; font-size: 12px; text-align: center; }
.portada .vacio { margin: 4px 0; color: var(--texto-suave); font-size: 12px; }

@media (max-width: 760px) {
    .hero { flex-direction: column; align-items: stretch; padding: 18px 16px; }
    .hero h1 { font-size: 24px; }
    .hero-cuenta { width: auto; }
    .boton-hero { flex: 1 1 100%; text-align: center; }
    /* En celular primero lo que invita a jugar: evento, noticias y rankings; el status al final */
    .portada-columnas { flex-direction: column; gap: 0; }
    .portada-columnas > .izq, .portada-columnas > .der { display: contents; }
    #v-evento { order: 1; }
    .caja-noticias { order: 2; }
    .portada .info { order: 3; }
    #v-monstruo { order: 4; }
    .caja-status { order: 5; }
}

/* ---------- Reportar un problema (044) ---------- */
.reporte { padding: 8px 0 10px; border-bottom: 1px dotted var(--linea-fuerte); }
.reporte:last-child { border-bottom: 0; }
.reporte-cabeza { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.reporte-estado { font-size: 11px; font-weight: bold; padding: 1px 8px; border-radius: 10px; background: var(--dorado-suave); color: var(--guinda); }
.reporte-estado.estado-resuelto { background: #dff2df; color: var(--verde); }
.reporte-estado.estado-descartado { background: #eee; color: var(--texto-suave); }
.reporte-texto { margin: 6px 0; white-space: pre-wrap; }
.reporte-respuesta { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--dorado); background: rgba(232,185,35,.1); white-space: pre-wrap; }