/* =====================================================================
   estilos.css — bibliotecadeprompt
   Estética de enciclopedia libre: fondo blanco, títulos con serifa,
   enlaces azules, ficha lateral (infobox) y pestañas de artículo.
   ===================================================================== */
:root {
  --fondo: #ffffff;
  --fondo-suave: #f8f9fa;
  --fondo-lateral: #f6f6f6;
  --texto: #202122;
  --texto-suave: #54595d;
  --borde: #a2a9b1;
  --borde-suave: #c8ccd1;
  --enlace: #3366cc;
  --enlace-visitado: #795cb2;
  --enlace-nuevo: #d73333;
  --acento: #36c;
  --ok: #0e755f;      /* contraste ≥ 4,5:1 sobre blanco y gris claro (WCAG 1.4.3) */
  --peligro: #b32424;
  --aviso: #fef6e7;
  --aviso-borde: #fc3;
  --var-fondo: #eaf3ff;
  --var-texto: #2a4b8d;
  --serif: 'Linux Libertine', 'Georgia', 'Times New Roman', Times, serif;
  --sans: -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --mono: 'Menlo', 'Consolas', 'Liberation Mono', 'Courier New', monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #101418; --fondo-suave: #1a1f24; --fondo-lateral: #14181d;
    --texto: #eaecf0; --texto-suave: #a2a9b1; --borde: #54595d; --borde-suave: #3a3f44;
    --enlace: #88a3e8; --enlace-visitado: #a799cd; --enlace-nuevo: #fd7865; --acento: #88a3e8;
    --ok: #3ac29a; --peligro: #fd7865; --aviso: #2b2410; --aviso-borde: #8a6d1a;
    --var-fondo: #1d2a44; --var-texto: #b5cbfa;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--sans); line-height: 1.6; }
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--enlace-visitado); }
a.nuevo { color: var(--enlace-nuevo); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
/* El título recibe el foco al cambiar de página (para lectores de pantalla); no necesita marco */
h1[tabindex="-1"]:focus { outline: none; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: -999px; top: 0; background: var(--fondo); padding: 8px; z-index: 100; }
.saltar:focus { left: 8px; }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 24px; border-bottom: 1px solid var(--borde-suave); background: var(--fondo);
}
.boton-menu { display: none; background: none; border: 1px solid var(--borde-suave); border-radius: 2px; font-size: 1.1rem; padding: 4px 10px; color: var(--texto); cursor: pointer; }
.marca { display: flex; align-items: center; gap: 10px; color: var(--texto) !important; text-decoration: none !important; min-width: 0; }
.marca img { flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-nombre { font-family: var(--serif); font-size: 1.35rem; letter-spacing: 0.01em; }
.marca-lema { font-family: var(--serif); font-size: 0.78rem; color: var(--texto-suave); }

.buscador { position: relative; display: flex; flex: 1 1 320px; max-width: 520px; margin-left: 12px; }
.buscador input {
  flex: 1; min-width: 0; padding: 7px 10px; font: inherit; font-size: 0.95rem; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--borde); border-right: 0; border-radius: 2px 0 0 2px;
}
.buscador button { padding: 6px 14px; font: inherit; font-size: 0.9rem; font-weight: 600; border: 1px solid var(--borde); border-radius: 0 2px 2px 0; background: var(--fondo-suave); color: var(--texto); cursor: pointer; }
.buscador button:hover { background: var(--fondo-lateral); }
.sugerencias {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; list-style: none; margin: 2px 0 0; padding: 0;
  background: var(--fondo); border: 1px solid var(--borde); box-shadow: 0 2px 6px rgba(0,0,0,.15); max-height: 360px; overflow-y: auto;
}
.sugerencias li a { display: block; padding: 6px 10px; color: var(--texto); }
.sugerencias li a small { display: block; color: var(--texto-suave); font-size: 0.8rem; }
.sugerencias li a:hover, .sugerencias li[aria-selected="true"] a { background: var(--fondo-suave); text-decoration: none; }

.usuario-menu { margin-left: auto; display: flex; gap: 14px; align-items: center; font-size: 0.85rem; flex-wrap: wrap; }
.usuario-menu .yo { font-weight: 600; }
.enlace-boton { background: none; border: 0; padding: 2px 4px; min-height: 24px; font: inherit; color: var(--enlace); cursor: pointer; } /* objetivo táctil ≥ 24 px (WCAG 2.5.8) */
.enlace-boton:hover { text-decoration: underline; }

.aviso-modo { background: var(--aviso); border-bottom: 1px solid var(--aviso-borde); padding: 6px 24px; font-size: 0.85rem; }

/* ---------- Estructura ---------- */
/* Ocupa todo el ancho de la ventana (sin franjas vacías a los lados) */
.pagina { display: flex; align-items: flex-start; width: 100%; }
.lateral { flex: 0 0 176px; padding: 16px 12px 24px 24px; font-size: 0.85rem; }
.lateral-titulo { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; color: var(--texto-suave); margin: 18px 0 6px; padding-bottom: 4px; border-bottom: 1px solid var(--borde-suave); text-transform: none; }
.lateral-titulo:first-child { margin-top: 0; }
.lateral ul { list-style: none; margin: 0; padding: 0; }
.lateral li { margin: 3px 0; }
.lateral li a.activo { font-weight: 600; color: var(--texto); }
.contenido { flex: 1; min-width: 0; padding: 18px 28px 48px; outline: none; }

/* ---------- Pestañas del artículo ---------- */
.pestanas { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--borde); margin-bottom: 4px; font-size: 0.85rem; }
.pestanas ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 2px; flex-wrap: wrap; }
.pestanas li a, .pestanas li button {
  display: inline-block; padding: 6px 10px 5px; margin-bottom: -1px; color: var(--enlace); background: none; border: 0;
  border-bottom: 2px solid transparent; font: inherit; cursor: pointer;
}
.pestanas li a.activa { color: var(--texto); border-bottom-color: var(--texto); font-weight: 600; }
.pestanas li button:disabled { color: var(--texto-suave); cursor: default; }
.contador { display: inline-block; min-width: 1.4em; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--fondo-suave); border: 1px solid var(--borde-suave); font-size: 0.75rem; text-align: center; color: var(--texto-suave); }

/* ---------- Tipografía de artículo ---------- */
h1.titulo { font-family: var(--serif); font-weight: normal; font-size: 1.9rem; line-height: 1.3; margin: 0 0 2px; padding-bottom: 4px; border-bottom: 1px solid var(--borde); }
.subtitulo { font-size: 0.85rem; color: var(--texto-suave); margin: 4px 0 14px; }
.contenido h2 { font-family: var(--serif); font-weight: normal; font-size: 1.45rem; margin: 22px 0 8px; padding-bottom: 3px; border-bottom: 1px solid var(--borde); }
.contenido h3 { font-size: 1.05rem; margin: 18px 0 6px; }
.contenido p { margin: 6px 0 10px; }
.hatnote { font-style: italic; color: var(--texto-suave); padding-left: 1.6em; margin: 4px 0 10px; font-size: 0.92rem; }

/* ---------- Ficha lateral (infobox) ---------- */
.ficha { float: right; clear: right; width: 290px; margin: 4px 0 16px 20px; border: 1px solid var(--borde); background: var(--fondo-suave); font-size: 0.85rem; border-collapse: collapse; }
.ficha caption { font-family: var(--serif); font-size: 1.1rem; font-weight: bold; padding: 6px; }
.ficha th, .ficha td { padding: 5px 8px; vertical-align: top; text-align: left; border-top: 1px solid var(--borde-suave); }
.ficha th { width: 42%; }
.ficha .ficha-cabecera { text-align: center; background: var(--var-fondo); font-weight: bold; }

/* ---------- Caja del prompt ---------- */
.caja-prompt { position: relative; display: flow-root; /* no se mete debajo de la ficha flotante */ background: var(--fondo-suave); border: 1px solid var(--borde-suave); padding: 12px 14px; font-family: var(--mono); font-size: 0.86rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.variable { background: var(--var-fondo); color: var(--var-texto); border-radius: 2px; padding: 0 2px; font-weight: 600; }
.variable.rellena { background: #d5fdf4; color: #0a5c4a; }
@media (prefers-color-scheme: dark) { .variable.rellena { background: #123c33; color: #9ef0d6; } }

/* ---------- Botones y formularios ---------- */
.boton { display: inline-block; padding: 6px 12px; font: inherit; font-size: 0.9rem; font-weight: 600; border: 1px solid var(--borde); border-radius: 2px; background: var(--fondo-suave); color: var(--texto); cursor: pointer; }
.boton:hover { background: var(--fondo-lateral); text-decoration: none; }
.boton.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.boton.primario:hover { filter: brightness(1.08); }
.boton.peligro { color: var(--peligro); }
.boton:disabled { opacity: 0.55; cursor: default; }
.botonera { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; align-items: center; }
.formulario { max-width: 760px; }
.formulario .campo { margin-bottom: 14px; }
.formulario label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 3px; }
.formulario .ayuda { font-size: 0.8rem; color: var(--texto-suave); margin: 2px 0 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"]:not(#busqueda), select, textarea {
  width: 100%; padding: 7px 9px; font: inherit; font-size: 0.95rem; color: var(--texto); background: var(--fondo);
  border: 1px solid var(--borde); border-radius: 2px;
}
textarea { min-height: 110px; resize: vertical; }
textarea.codigo { font-family: var(--mono); font-size: 0.86rem; min-height: 220px; }
.casilla { display: flex; align-items: flex-start; gap: 8px; }
.casilla input { margin-top: 5px; flex: none; }
.formulario .casilla label { font-weight: normal; }
fieldset.campo { border: 1px solid var(--borde-suave); padding: 8px 12px 10px; }
fieldset.campo legend { font-weight: 600; font-size: 0.9rem; padding: 0 4px; }
.idiomas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 14px; }
.idiomas legend { grid-column: 1 / -1; }
.idioma label { font-weight: normal !important; font-size: 0.85rem; }
.error { color: var(--peligro); font-size: 0.9rem; margin: 6px 0; }
.caja-aviso { background: var(--aviso); border: 1px solid var(--aviso-borde); padding: 8px 12px; margin: 10px 0; font-size: 0.9rem; }

/* ---------- Usar con variables ---------- */
.usar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; border: 1px solid var(--borde-suave); padding: 14px; margin: 8px 0 16px; }
.usar .campo { margin-bottom: 10px; }

/* ---------- Portada ---------- */
.bienvenida { border: 1px solid var(--borde-suave); background: var(--fondo-suave); padding: 14px 18px; text-align: center; margin-bottom: 16px; }
.bienvenida h1 { font-family: var(--serif); font-weight: normal; font-size: 1.8rem; margin: 0; border: 0; }
.bienvenida p { margin: 4px 0; }
.columnas { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.bloque { border: 1px solid var(--borde-suave); margin-bottom: 16px; }
.bloque > h2 { margin: 0 !important; padding: 4px 10px !important; font-family: var(--sans) !important; font-size: 1rem !important; font-weight: 600; background: var(--var-fondo); border-bottom: 1px solid var(--borde-suave) !important; }
.bloque > div { padding: 8px 12px 10px; }
.rejilla-apartados { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 16px; list-style: none; padding: 0; margin: 0; }
.rejilla-apartados li { padding: 3px 0; }
.rejilla-apartados small { color: var(--texto-suave); }

/* ---------- Listas de resultados ---------- */
.resultados { list-style: none; padding: 0; margin: 0; }
.resultados li { margin: 0 0 14px; }
.resultados .r-titulo { font-size: 1.05rem; }
.resultados .r-extracto { font-size: 0.88rem; margin: 2px 0; }
.resultados .r-meta { font-size: 0.8rem; color: var(--texto-suave); }
mark { background: #fef6b7; color: inherit; padding: 0; }
@media (prefers-color-scheme: dark) { mark { background: #5c4d00; } }
.etiqueta { display: inline-block; font-size: 0.75rem; padding: 0 6px; margin: 0 4px 2px 0; border: 1px solid var(--borde-suave); border-radius: 2px; color: var(--texto-suave); }

/* ---------- Tablas (historial, miembros) ---------- */
.tabla { border-collapse: collapse; width: 100%; font-size: 0.88rem; margin: 8px 0 16px; }
.tabla th, .tabla td { border: 1px solid var(--borde-suave); padding: 6px 8px; text-align: left; vertical-align: top; }
.tabla th { background: var(--fondo-suave); }

/* ---------- Discusión (chat) ---------- */
.chat { border: 1px solid var(--borde-suave); }
.chat-mensajes { list-style: none; margin: 0; padding: 10px 14px; max-height: 460px; overflow-y: auto; }
.chat-mensajes li { padding: 6px 0; border-bottom: 1px dotted var(--borde-suave); }
.chat-mensajes li:last-child { border-bottom: 0; }
.chat-autor { font-weight: 600; font-size: 0.88rem; }
.chat-fecha { font-size: 0.75rem; color: var(--texto-suave); margin-left: 6px; }
.chat-texto { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.93rem; }
.chat-form { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--borde-suave); background: var(--fondo-suave); }
.chat-form textarea { min-height: 44px; height: 44px; }

/* ---------- Diferencias entre versiones ---------- */
.diff { font-family: var(--mono); font-size: 0.82rem; border: 1px solid var(--borde-suave); margin: 6px 0 10px; }
.diff div { padding: 1px 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.diff .mas { background: #d8ecff; } .diff .menos { background: #feeec8; text-decoration: line-through; }
@media (prefers-color-scheme: dark) { .diff .mas { background: #17304f; } .diff .menos { background: #4a3a10; } }
.estado { font-size: 0.75rem; font-weight: 700; padding: 1px 6px; border-radius: 2px; border: 1px solid; }
.estado.abierta { color: var(--ok); } .estado.aceptada { color: var(--acento); } .estado.rechazada { color: var(--peligro); }

/* ---------- Perfil ---------- */
.perfil-cab { display: flex; gap: 16px; align-items: center; margin-bottom: 8px; }
.avatar { flex: none; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-family: var(--serif); font-size: 2rem; color: #fff; }
.avatar.peq { width: 22px; height: 22px; font-size: 0.75rem; display: inline-grid; vertical-align: middle; margin-right: 4px; font-family: var(--sans); }

/* ---------- Perfil de la comunidad (estilo Steam) ---------- */
/* Banda oscura con el tono del avatar: se lee igual en tema claro y oscuro */
.perfil-banda {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center;
  padding: 18px 20px; margin-bottom: 10px; color: #eef1f5; border-radius: 3px;
  background: linear-gradient(135deg, hsl(var(--tono) 38% 24%), hsl(calc(var(--tono) + 40) 30% 13%));
}
.perfil-banda .avatar { width: 96px; height: 96px; font-size: 2.6rem; border-radius: 4px; box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.banda-nombre { font-family: var(--serif); font-weight: normal; font-size: 1.9rem; line-height: 1.2; margin: 0 0 2px; color: #fff; overflow-wrap: anywhere; }
.banda-sub { font-size: 0.85rem; color: #c9d1db; }
.banda-sub .bandera { width: 20px; height: 15px; margin-right: 5px; vertical-align: -2px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); object-fit: cover; }
.banda-bio { margin: 8px 0 0; font-size: 0.92rem; color: #eef1f5; overflow-wrap: anywhere; }
.banda-nivel { min-width: 190px; background: rgba(0,0,0,.25); padding: 10px 12px; border-radius: 3px; font-size: 0.8rem; color: #c9d1db; }
.banda-nivel-fila { display: flex; align-items: center; justify-content: space-between; font-size: 1.05rem; color: #fff; margin-bottom: 6px; }
.banda-xp { margin-top: 6px; }
.banda-xp summary { cursor: pointer; color: #dbe4ff; }
.banda-xp ul { margin: 4px 0 0; padding-left: 16px; }

/* Apoyo voluntario: temas de la banda (todos oscuros para que el texto blanco se lea) */
.perfil-banda.tema-oceano { background: linear-gradient(135deg, #0b4a6e, #061f33); }
.perfil-banda.tema-bosque { background: linear-gradient(135deg, #24572f, #0d2414); }
.perfil-banda.tema-atardecer { background: linear-gradient(135deg, #8a3420, #2b1033); }
.perfil-banda.tema-lavanda { background: linear-gradient(135deg, #54428a, #1e1838); }
.perfil-banda.tema-ambar { background: linear-gradient(135deg, #7d5612, #2a1c05); }
.perfil-banda.tema-grafito { background: linear-gradient(135deg, #353a42, #111316); }
.perfil-banda.tema-carmesi { background: linear-gradient(135deg, #771836, #240812); }
.perfil-banda.tema-aurora { background: linear-gradient(135deg, #0d4a46, #2a1b5c 55%, #5a1550); }
/* Marcos del avatar */
.perfil-banda .avatar.marco-oro { box-shadow: 0 0 0 3px #d4a017, 0 0 0 6px rgba(212,160,23,.35); }
.perfil-banda .avatar.marco-plata { box-shadow: 0 0 0 3px #c9d1d9, 0 0 0 6px rgba(201,209,217,.3); }
.perfil-banda .avatar.marco-neon { box-shadow: 0 0 0 2px #67c1f5, 0 0 14px 3px rgba(103,193,245,.75); }
.perfil-banda .avatar.marco-arcoiris { box-shadow: 0 0 0 2px #e74c3c, 0 0 0 4px #f1c40f, 0 0 0 6px #2ecc71, 0 0 0 8px #3498db; }
.banda-lema { font-style: italic; color: #dbe4ff; margin: -2px 0 4px; overflow-wrap: anywhere; }
.insignia-mecenas { display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 1px 8px; border-radius: 10px; margin: 2px 0 4px; border: 1px solid; }
.insignia-mecenas small { font-weight: normal; }
.perfil-banda .insignia-mecenas { background: rgba(0,0,0,.25); }
.insignia-mecenas.grado-1 { border-color: #b87333; color: #e7a46a; }
.insignia-mecenas.grado-2 { border-color: #9aa4ad; color: #cfd6dc; }
.insignia-mecenas.grado-3 { border-color: #d4a017; color: #f0c64a; }
.ficha .insignia-mecenas { color: var(--texto); }
.marca-mecenas { color: #b32424; }
@media (prefers-color-scheme: dark) { .marca-mecenas { color: #ff7b6b; } }
.personalizacion[disabled] { opacity: 0.6; }
.ayuda { font-size: 0.8rem; color: var(--texto-suave); }
.filtros-seguridad { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.filtros-seguridad input { width: auto; flex: 1 1 160px; }
.zona-datos { margin-top: 28px; }
.zona-peligro { margin-top: 28px; padding: 4px 16px 12px; border: 1px solid var(--peligro); border-radius: 3px; }
.zona-peligro h2 { color: var(--peligro); border-bottom-color: var(--peligro) !important; }
.zona-peligro input { max-width: 320px; }
.boton.peligro:disabled { opacity: 0.5; cursor: not-allowed; }
.info-basica { font-size: 0.8rem; margin-top: 14px; }
.info-basica caption { text-align: left; font-weight: 600; padding: 4px 0; }
.info-basica th { width: 30%; }
.apoyo-columnas ul { padding-left: 18px; }

.nivel-insignia {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 50%;
  border: 2px solid #9aa4ad; font-weight: 700; font-size: 0.8rem; color: var(--texto); background: var(--fondo); vertical-align: middle;
}
.nivel-insignia.grande { min-width: 40px; height: 40px; font-size: 1.05rem; border-width: 3px; color: #fff; background: rgba(0,0,0,.3); }
.nivel-insignia.nv-1 { border-color: #c02942; } .nivel-insignia.nv-2 { border-color: #d95b43; }
.nivel-insignia.nv-3 { border-color: #c5a028; } .nivel-insignia.nv-4 { border-color: #467a3c; }
.nivel-insignia.nv-5 { border-color: #4e8ddb; } .nivel-insignia.nv-6 { border-color: #7652c9; }

.barra { height: 8px; background: var(--fondo-suave); border: 1px solid var(--borde-suave); border-radius: 4px; overflow: hidden; margin: 4px 0; }
.barra > span { display: block; height: 100%; background: var(--acento); }
.barra.clara { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.25); }
.barra.clara > span { background: #67c1f5; }

.perfil-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 22px; align-items: start; }
.perfil-lado .ficha { float: none; width: 100%; margin: 8px 0 0; }

/* Logros */
.logros { list-style: none; padding: 0; margin: 8px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.logro { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--borde-suave); background: var(--fondo-suave); padding: 10px; }
.logro.bloqueado { opacity: 0.75; }
.logro-texto { flex: 1; min-width: 0; }
.logro-nombre { font-weight: 600; }
.logro-nombre small { font-weight: normal; color: var(--texto-suave); }
.logro-desc { font-size: 0.85rem; }
.logro-fecha { font-size: 0.75rem; color: var(--texto-suave); }
.logro-icono {
  flex: none; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem;
  background: var(--fondo); border: 3px solid var(--borde-suave);
}
.logro-icono.bronce { border-color: #b87333; } .logro-icono.plata { border-color: #9aa4ad; }
.logro-icono.oro { border-color: #d4a017; } .logro-icono.unico { border-color: var(--acento); }
.logro-icono.bloqueado { filter: grayscale(1); opacity: 0.55; border-style: dashed; }
.vitrina { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 12px; }
.vitrina li { width: 92px; text-align: center; font-size: 0.75rem; line-height: 1.25; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Actividad reciente */
.actividad { list-style: none; padding: 0; margin: 6px 0; }
.actividad li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; border-bottom: 1px dotted var(--borde-suave); font-size: 0.9rem; }
.act-fecha { font-size: 0.78rem; color: var(--texto-suave); white-space: nowrap; }
.borrado { color: var(--texto-suave); font-style: italic; }

/* Muro de comentarios */
.comentario-form { margin: 6px 0 12px; }
.comentario-form .botonera { margin-top: 6px; }
.comentario-form .ayuda { font-size: 0.8rem; color: var(--texto-suave); margin: 2px 0 0; }
.comentarios-lista { list-style: none; padding: 0; margin: 0; }
.comentarios-lista li { display: flex; gap: 8px; padding: 8px 0; border-bottom: 1px dotted var(--borde-suave); }
.comentarios-lista li.vacio { color: var(--texto-suave); }
.comentario-cuerpo { flex: 1; min-width: 0; }
.borrar-comentario { margin-left: 10px; font-size: 0.78rem; }
.comentario-acciones { margin-left: 10px; font-size: 0.78rem; display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.comentario-acciones .enlace-boton { font-size: 0.78rem; }
.denunciado { color: var(--texto-suave); font-style: italic; }
.denuncia-panel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; padding: 8px; background: var(--fondo-suave); border: 1px solid var(--borde-suave); }
.denuncia-panel[hidden] { display: none; }
.denuncia-panel select { width: auto; max-width: 100%; }
.bloqueados { margin: 0; padding-left: 18px; font-size: 0.9rem; }

@media (max-width: 900px) {
  .perfil-banda { grid-template-columns: auto minmax(0, 1fr); }
  .banda-nivel { grid-column: 1 / -1; }
  .perfil-rejilla { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .perfil-banda { padding: 14px; gap: 12px; }
  .perfil-banda .avatar { width: 64px; height: 64px; font-size: 1.8rem; }
  .banda-nombre { font-size: 1.5rem; }
}

/* ---------- Anuncios no invasivos ---------- */
.anuncio { clear: both; margin: 22px 0; padding-top: 4px; border-top: 1px solid var(--borde-suave); min-height: 120px; }
.anuncio-etiqueta { display: block; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 4px; }
.anuncio .adsbygoogle { display: block; min-height: 100px; }
.anuncio-lateral { margin: 22px 0 0; min-height: 250px; }
.anuncio-hueco { display: flex; flex-direction: column; }
.anuncio-hueco > span:last-child { flex: 1; display: grid; place-items: center; min-height: 100px; border: 1px dashed var(--borde); color: var(--texto-suave); font-size: 0.8rem; background: var(--fondo-suave); }
.anuncio-lateral.anuncio-hueco > span:last-child { min-height: 230px; }
@media (max-width: 900px) { .anuncio-lateral { display: none; } }

/* ---------- Notificación ---------- */
.notificacion:empty { display: none; }
.notificacion { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--texto); color: var(--fondo); padding: 9px 16px; border-radius: 2px; font-size: 0.9rem; z-index: 50; max-width: calc(100% - 32px); }

/* ---------- Pie ---------- */
.pie { border-top: 1px solid var(--borde-suave); padding: 14px 24px 24px 212px; font-size: 0.78rem; color: var(--texto-suave); }
.pie p { margin: 4px 0; }

/* ---------- Móvil ---------- */
@media (max-width: 900px) {
  .boton-menu { display: inline-block; }
  .lateral { display: none; position: absolute; z-index: 20; top: 64px; left: 0; width: 240px; background: var(--fondo); border: 1px solid var(--borde-suave); box-shadow: 0 2px 8px rgba(0,0,0,.2); }
  .lateral.abierta { display: block; }
  .contenido { padding: 14px 16px 40px; }
  .ficha { float: none; width: 100%; margin: 6px 0 14px; }
  .columnas, .usar { grid-template-columns: minmax(0, 1fr); }
  .pie { padding-left: 16px; }
  .marca-lema { display: none; }
  .buscador { order: 3; flex-basis: 100%; max-width: none; margin-left: 0; }
  .cabecera { padding: 8px 16px; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }

/* ---------- Revisión de prompts ---------- */
.marca-revision { display: inline-block; margin-left: 8px; padding: 0 6px; font-size: 0.75rem; font-family: var(--sans); border: 1px solid var(--aviso-borde); background: var(--aviso); color: var(--texto); border-radius: 2px; vertical-align: middle; }
.caja-revision .botonera { margin-top: 8px; }
.denuncia-prompt { margin: 16px 0; font-size: 0.9rem; }
.denuncia-prompt summary { cursor: pointer; color: var(--texto-suave); }
.denuncia-prompt select { max-width: 100%; }
code.patron { white-space: pre-wrap; word-break: break-all; font-size: 0.8rem; }
tr.inactivo td { opacity: 0.6; }
.formulario-patron { margin-top: 16px; max-width: 640px; }
.formulario-patron input { width: 100%; box-sizing: border-box; }

.autor-eliminado { color: var(--texto-suave); font-style: italic; }

/* ---------- Fotos de perfil ---------- */
img.avatar.foto { display: block; object-fit: cover; background: var(--fondo-suave); }
img.avatar.foto.peq { display: inline-block; }
.fotos-estado { display: flex; gap: 16px; flex-wrap: wrap; margin: 10px 0; }
.foto-mini { margin: 0; text-align: center; font-size: 0.8rem; color: var(--texto-suave); }
.foto-mini img, .foto-mini .avatar { width: 96px; height: 96px; border-radius: 4px; object-fit: cover; display: grid; margin-bottom: 4px; }
.fotos-revision { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fotos-revision li { border: 1px solid var(--borde-suave); padding: 10px; display: grid; gap: 8px; }
.fotos-revision img { width: 128px; height: 128px; object-fit: cover; border-radius: 4px; }
.fotos-revision select { max-width: 100%; }
.zona-foto { margin-top: 24px; }
.quitar-foto { justify-content: flex-end; }
.quitar-foto select { width: auto; flex: 0 1 280px; }

/* ---------- Rechazar / retirar con motivo ---------- */
.control-rechazo { display: inline-block; vertical-align: top; }
.control-rechazo > summary { list-style: none; cursor: pointer; display: inline-block; }
.control-rechazo > summary::-webkit-details-marker { display: none; }
.control-rechazo[open] { display: block; width: 100%; max-width: 520px; border: 1px solid var(--borde-suave); padding: 10px; margin-top: 8px; background: var(--fondo); }
.control-rechazo select, .control-rechazo textarea { width: 100%; box-sizing: border-box; }

/* ---------- Entrar con Google ---------- */
.separador-o { display: flex; align-items: center; gap: 10px; color: var(--texto-suave); font-size: 0.85rem; margin: 14px 0 6px; }
.separador-o::before, .separador-o::after { content: ''; flex: 1; border-top: 1px solid var(--borde-suave); }
.boton-google { display: inline-flex; align-items: center; gap: 10px; background: #fff; color: #1f1f1f; border: 1px solid #747775; font-weight: 500; }
.boton-google:hover { background: #f2f2f2; }
.g-logo { font-family: Arial, sans-serif; font-weight: 700; font-size: 1.05rem; color: #4285f4; }

/* ---------- Repositorio personal ---------- */
.migas { font-size: 0.85rem; color: var(--texto-suave); margin: 0 0 10px; }
.repo { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 20px; margin-top: 12px; }
.repo-arbol { border-right: 1px solid var(--borde-suave); padding-right: 12px; font-size: 0.9rem; overflow-wrap: anywhere; }
.repo-arbol a.activa, .arbol a.activa { font-weight: 700; color: var(--texto); }
.arbol { list-style: none; margin: 4px 0 0; padding-left: 14px; }
.arbol-raiz { padding-left: 0; }
.arbol li { margin: 3px 0; }
.repo-lista { list-style: none; margin: 0; padding: 0; }
.repo-lista li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--borde-suave); }
.repo-lista small { color: var(--texto-suave); white-space: nowrap; }
.repo-acciones .botonera input { flex: 1 1 200px; min-width: 0; }
.repo-carpeta-opciones { margin: 10px 0; max-width: 520px; }
.repo-carpeta-opciones select, .repo-carpeta-opciones input { width: 100%; box-sizing: border-box; }
.documento-texto { white-space: pre-wrap; font-family: var(--sans); font-size: 0.95rem; }
@media (max-width: 720px) { .repo { grid-template-columns: 1fr; } .repo-arbol { border-right: 0; border-bottom: 1px solid var(--borde-suave); padding: 0 0 10px; } }

/* ---------- Foro ---------- */
.foro-tabla td:nth-child(n+2), .foro-tabla th:nth-child(n+2) { white-space: nowrap; }
.foro-tabla tr.fijado { background: var(--fondo-suave); }
.marca-foro { font-size: 0.8rem; margin-right: 6px; }
.paginacion { margin: 12px 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: 0.9rem; }
.post { display: grid; grid-template-columns: 140px 1fr; border: 1px solid var(--borde-suave); margin: 10px 0; background: var(--fondo); }
.post-revision { border-color: var(--aviso-borde); background: var(--aviso); }
.post-autor { padding: 10px; background: var(--fondo-suave); border-right: 1px solid var(--borde-suave); font-size: 0.85rem; overflow-wrap: anywhere; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.post-autor .avatar { width: 56px; height: 56px; font-size: 1.5rem; }
.post-cuerpo { padding: 10px 14px; min-width: 0; }
.post-cabecera { display: flex; gap: 10px; justify-content: space-between; font-size: 0.8rem; color: var(--texto-suave); margin-bottom: 6px; flex-wrap: wrap; }
.post-numero { text-decoration: none; }
.post-texto { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.post-texto textarea { width: 100%; box-sizing: border-box; }
.post-cita { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--borde); background: var(--fondo-suave); white-space: pre-wrap; font-size: 0.9rem; }
.post-acciones { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 0.85rem; }
.post-acciones details { display: inline-block; margin: 0; }
.respuesta-foro textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 720px) { .post { grid-template-columns: 1fr; } .post-autor { flex-direction: row; align-items: center; border-right: 0; border-bottom: 1px solid var(--borde-suave); } .post-autor .avatar { width: 32px; height: 32px; font-size: 1rem; } }

/* ---------- Humanizador ---------- */
.humanizador-opciones { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end; }
.humanizador-opciones .campo { margin: 0; }
#hu-texto { width: 100%; box-sizing: border-box; }
tr.senal-alerta td { background: var(--aviso); }
mark { background: #fde68a; color: #202122; padding: 0 2px; }

/* ---------- Mensajes privados ---------- */
.contador-mp { display: inline-block; min-width: 1.3em; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--peligro); color: #fff; font-size: 0.72rem; font-weight: bold; text-align: center; line-height: 1.5; }
.contador-mp[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .contador-mp { color: #101418; } }
.lista-conversaciones { list-style: none; margin: 12px 0; padding: 0; border-top: 1px solid var(--borde-suave); }
.lista-conversaciones li { border-bottom: 1px solid var(--borde-suave); }
.lista-conversaciones li.sin-leer { background: var(--var-fondo); }
.conv-enlace { display: flex; gap: 10px; align-items: center; padding: 10px 8px; color: var(--texto); text-decoration: none; }
.conv-enlace:hover, .conv-enlace:focus-visible { background: var(--fondo-suave); }
.conv-datos { min-width: 0; flex: 1; }
.conv-cabecera { display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.conv-cabecera .chat-fecha { margin-left: auto; }
.conv-ultimo { color: var(--texto-suave); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avatar-grupo { background: var(--fondo-suave); border: 1px solid var(--borde-suave); font-family: var(--sans); }
div.conv-enlace:hover { background: none; }
.conv-datos .botonera { margin-top: 6px; }
.miembros-grupo { margin-top: 12px; }
.miembros-grupo summary { cursor: pointer; font-weight: bold; }
.lista-miembros-grupo { list-style: none; padding: 0; margin: 8px 0; }
.lista-miembros-grupo li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--borde-suave); }
.lista-miembros-grupo .enlace-boton { margin-left: auto; }
.conversacion { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; padding: 12px; margin: 12px 0; border: 1px solid var(--borde-suave); background: var(--fondo-suave); }
.mp { max-width: min(80%, 560px); padding: 8px 12px; border-radius: 12px; border: 1px solid var(--borde-suave); background: var(--fondo); }
.mp-mio { align-self: flex-end; background: var(--var-fondo); border-color: var(--var-fondo); border-bottom-right-radius: 4px; }
.mp-otro { align-self: flex-start; border-bottom-left-radius: 4px; }
.mp-texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.mp-pie { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.mp-pie .chat-fecha { margin-left: 0; }
.mp-acciones { display: flex; gap: 8px; align-items: center; font-size: 0.8rem; }
.mp-acciones .denuncia-prompt { margin: 0; font-size: 0.8rem; }
.mp-formulario textarea { width: 100%; box-sizing: border-box; }
.mp-formulario .botonera { align-items: center; }
.emojis { position: relative; }
.emojis summary { cursor: pointer; list-style: none; padding: 4px 8px; border: 1px solid var(--borde-suave); border-radius: 4px; background: var(--fondo); }
.emojis summary::-webkit-details-marker { display: none; }
.emojis-rejilla { position: absolute; bottom: calc(100% + 4px); left: 0; z-index: 5; display: grid; grid-template-columns: repeat(8, 2.2em); gap: 2px; padding: 6px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.15); }
.emoji { font-size: 1.2rem; line-height: 1; padding: 4px; border: 0; background: none; cursor: pointer; border-radius: 4px; }
.emoji:hover, .emoji:focus-visible { background: var(--fondo-suave); }
.mp-opciones { margin-top: 8px; font-size: 0.9rem; }
@media (max-width: 520px) { .mp { max-width: 92%; } .emojis-rejilla { grid-template-columns: repeat(6, 2.2em); } }
/* Foro en móvil: la última columna («Último…») se oculta para que la tabla quepa sin desbordar */
@media (max-width: 520px) { .foro-tabla th:last-child, .foro-tabla td:last-child { display: none; } }
.mp-borrado { opacity: .75; }
.mp-borrado .mp-texto { color: var(--texto-suave); }