/* Panel de Clio. Tokens y criterios en web/DESIGN.md (paleta morado, oro y negro) */
:root {
  --fondo: #f5f2fa;
  --superficie: #fcfbfe;
  --piedra: #dcd3ea;
  --piedra-suave: #eae4f3;
  --tinta: #1e1430;
  --tinta-suave: #5b4c75;
  --violeta: #6b3fc4;
  --oro: #a5802a;
  --oro-texto: #735712;
  --bermellon: #b2402e;
  --primario: #4a2a85;
  --primario-hover: #5e3aa3;
  --primario-texto: #f5f2fa;
  --foco: #7a4fd6;
  --barra: #1e1430;
  --barra-texto: #f5f2fa;
  --sombra: rgba(30, 20, 48, 0.22);
  --campo: #f5f2fa;
  --actual: #ebe3f8;
  --serif: 'Marcellus', Georgia, 'Times New Roman', serif;
  --sans: 'Public Sans', system-ui, -apple-system, sans-serif;
  --radio: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #120b1e;
    --superficie: #1b1230;
    --piedra: #3a2b55;
    --piedra-suave: #261b3d;
    --tinta: #efe9f7;
    --tinta-suave: #b6a9cc;
    --violeta: #b38bff;
    --oro: #d9b65e;
    --oro-texto: #d9b65e;
    --bermellon: #f08a76;
    --primario: #d9b65e;
    --primario-hover: #eacb7e;
    --primario-texto: #1a1028;
    --foco: #c2a3ff;
    --barra: #2a1d45;
    --barra-texto: #efe9f7;
    --sombra: rgba(0, 0, 0, 0.45);
    --campo: #150d24;
    --actual: #2c1e4a;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--tinta);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
h1, h2 { font-family: var(--serif); font-weight: 400; margin: 0; letter-spacing: 0.01em; }
h1 { font-size: clamp(32px, 3.2vw, 40px); line-height: 1.15; }
h2 { font-size: 28px; line-height: 1.2; }
h3 { font-size: 16px; font-weight: 600; margin: 0; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; border-radius: 4px; }
.sutil { color: var(--tinta-suave); font-size: 14px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 15px/1 var(--sans); min-height: 44px; padding: 0 18px; border-radius: var(--radio);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
}
.boton-principal { background: var(--primario); color: var(--primario-texto); }
.boton-principal:hover { background: var(--primario-hover); }
.boton-secundario { background: transparent; color: var(--tinta); border-color: var(--tinta-suave); }
.boton-secundario:hover { background: var(--piedra-suave); }
.boton-texto { background: none; border: 0; padding: 6px 0; color: var(--tinta-suave); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; }

/* Portada (sin sesión) */
.portada { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.portada-contenido { max-width: 520px; }
.portada .marca { width: 64px; height: 64px; margin-bottom: 28px; border-radius: 50%; }
@media (prefers-color-scheme: dark) { .portada .marca, .icono-servidor { box-shadow: 0 0 0 1px var(--piedra); } }
.portada h1 { font-size: 56px; }
.portada .lema { font-family: var(--serif); font-size: 22px; color: var(--tinta-suave); margin: 4px 0 24px; }
.portada .explicacion { margin-bottom: 32px; max-width: 46ch; }
.portada .aviso { margin-top: 24px; }

/* Selector de servidores */
.selector { max-width: 760px; margin: 0 auto; padding: 56px 16px; }
.selector header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
.lista-servidores { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--piedra); }
.lista-servidores li { display: flex; align-items: center; gap: 14px; padding: 14px 8px; border-bottom: 1px solid var(--piedra); }
.lista-servidores li:hover { background: var(--superficie); }
.lista-servidores .nombre { flex: 1; font-weight: 500; }
.icono-servidor {
  width: 40px; height: 40px; border-radius: 12px; flex: none; object-fit: cover;
  display: grid; place-items: center; background: var(--tinta); color: var(--fondo); font-family: var(--serif); font-size: 18px;
}

/* Panel de un servidor */
/* Columnas: lateral, contenido (todo el ancho libre) y vista previa a la derecha. En ultrapanorámicos el contenido
   gana columnas de tarjetas en vez de dejar hueco. */
.panel { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: 100vh; }
.panel.con-vista { grid-template-columns: 264px minmax(0, 1fr) 440px; }
.lateral {
  background: var(--superficie); border-right: 1px solid var(--piedra); padding: 24px 14px; display: flex; flex-direction: column; gap: 28px;
  position: sticky; top: 0; height: 100vh;
}
.lateral .servidor-actual { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lateral .servidor-actual span { font-weight: 600; line-height: 1.25; }
.lateral nav ul { list-style: none; margin: 0; padding: 0; }
.lateral .servidor-actual { padding: 0 6px; }
.lateral nav ul { display: grid; gap: 2px; }
/* Enlaces: Public Sans en tinta, con icono y 40 px de alto. Los títulos de grupo van en otro estilo (abajo) y no se clican. */
.lateral nav a {
  display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: var(--radio);
  text-decoration: none; color: var(--tinta); font: 500 15px/1.25 var(--sans);
}
.lateral nav a svg { flex: none; color: var(--tinta-suave); }
.lateral nav a:hover { background: var(--piedra-suave); }
.lateral nav a:hover svg { color: var(--tinta); }
.lateral nav a[aria-current='page'] { background: var(--actual); font-weight: 600; box-shadow: inset 3px 0 0 var(--violeta); }
.lateral nav a[aria-current='page'] svg { color: var(--violeta); }
.lateral nav a:focus-visible { outline-offset: 1px; border-radius: var(--radio); }
.lateral-pie { margin-top: auto; display: grid; gap: 14px; }
.lateral .usuario { display: flex; align-items: center; gap: 10px; font-size: 14px; min-width: 0; }
.lateral .usuario span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Idioma de la interfaz: un select pequeño (abajo en la barra lateral, en la portada y en el selector de servidores). */
.selector-idioma select { width: auto; min-height: 36px; padding: 4px 32px 4px 10px; font-size: 14px; }
.selector-acciones { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: flex-end; }
.lateral .usuario img { width: 28px; height: 28px; border-radius: 50%; }
.lateral .usuario form { margin-left: auto; }

.contenido { padding: 40px 48px 120px; container-type: inline-size; min-width: 0; }
.contenido > header { margin-bottom: 28px; max-width: 920px; }
.contenido > header p { margin-top: 8px; max-width: 60ch; color: var(--tinta-suave); }

/* Cada bloque es una tarjeta: se ve dónde empieza y acaba. Una columna de hasta 920 px; con sitio (contenido de 1000 px
   o más: desde monitores de 1920), tantas columnas de 460 px o más como quepan, hasta tres (2 en 1920, 3 en ultrapanorámicos).
   Listas, tablas y formularios ocupan todo el ancho. */
.bloques { display: grid; gap: 20px; max-width: 920px; align-items: start; }
@container (min-width: 1000px) {
  /* Columnas de 460 px como mínimo y tres como máximo; con solo dos bloques no se estiran más de 900 px cada uno. */
  .bloques { grid-template-columns: repeat(auto-fit, minmax(max(460px, calc((100% - 40px) / 3)), 1fr)); max-width: none; }
  .bloques:not(:has(> :nth-child(3))) { max-width: 1840px; }
  .bloques > :not(.bloque), .bloques > .bloque:only-child, .bloque:has(table, .objetos, .formulario) { grid-column: 1 / -1; }
  .bloques:has(> .bloque:only-child) { max-width: 1280px; }
  .bloque:has(> #ranking) { grid-column: auto; } /* 4 columnas cortas: estirada a todo el ancho no se lee */
}
.bloque { background: var(--superficie); border: 1px solid var(--piedra); border-radius: 12px; padding: 22px 24px 24px; min-width: 0; }
.bloque.apagado { background: transparent; border-style: dashed; }
.bloque-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.bloque-cabecera h3, .bloque > h3 { font: 400 21px/1.25 var(--serif); letter-spacing: 0.01em; }
.bloque-cabecera p { margin-top: 6px; color: var(--tinta-suave); font-size: 14px; max-width: 58ch; }
.bloque-cuerpo { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--piedra-suave); display: grid; gap: 18px; }
.bloque.apagado .bloque-cuerpo { display: none; }
/* La línea de la cabecera ya separa: sin doble raya encima de la primera fila de una lista. */
.bloque-cuerpo > .objetos:first-child, .bloque-cuerpo > :first-child > .elemento:first-of-type { border-top: 0; }

/* Interruptor */
.interruptor { position: relative; flex: none; width: 44px; height: 26px; }
.interruptor input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.interruptor span { position: absolute; inset: 0; border-radius: 13px; background: var(--piedra); transition: background 0.15s; pointer-events: none; }
.interruptor span::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; transition: transform 0.15s;
}
.interruptor input:checked + span { background: var(--violeta); }
.interruptor input:checked + span::after { transform: translateX(18px); }
.interruptor input:focus-visible + span { outline: 2px solid var(--foco); outline-offset: 2px; }

/* Campos */
.campo { display: grid; gap: 6px; }
.campo > label, .campo > .etiqueta { font-weight: 500; font-size: 14px; }
select, textarea, input[type='number'], input[type='search'], input[type='text'] {
  font: inherit; color: var(--tinta); background: var(--campo);
  border: 1px solid var(--piedra); border-radius: var(--radio); padding: 10px 12px; width: 100%;
}
select:focus-visible, textarea:focus-visible, input:focus-visible { border-color: var(--foco); outline-offset: 0; }
textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
input[type='number'] { width: 120px; }
input[type='color'] { width: 100%; height: 46px; padding: 4px; border: 1px solid var(--piedra); border-radius: var(--radio); background: var(--campo); cursor: pointer; }
select:hover, textarea:hover, input:hover { border-color: var(--tinta-suave); }
.variables { display: flex; flex-wrap: wrap; gap: 6px; }
.variables button {
  font: 500 13px/1 var(--sans); padding: 6px 9px; border-radius: 6px; cursor: pointer;
  border: 1px dashed var(--piedra); background: transparent; color: var(--tinta-suave);
}
.variables button:hover { border-style: solid; color: var(--tinta); }
.variables button.insertar { border-style: solid; }
.variables button[aria-expanded='true'] { border-color: var(--violeta); color: var(--tinta); }
/* Lista para insertar canal, rol o emoji (js/insertar.js) */
.selector-insertar { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--piedra); border-radius: var(--radio); background: var(--campo); }
.selector-insertar input { padding: 8px 10px; }
.selector-insertar ul { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.selector-insertar li { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 8px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.selector-insertar li[aria-selected='true'] { background: var(--piedra); }
.selector-insertar li.sutil { cursor: default; }
.selector-insertar .motivo { margin-left: auto; font-size: 12px; color: var(--tinta-suave); }
.selector-insertar img.emoji { width: 22px; height: 22px; object-fit: contain; }
.aviso { display: flex; gap: 8px; font-size: 14px; color: var(--bermellon); }
.aviso-ok { color: var(--violeta); }

/* Editor de embed (reutilizable) */
.embed-editor { border: 1px solid var(--piedra); border-radius: var(--radio); padding: 14px 16px; }
.embed-editor.activo { border-left: 3px solid var(--violeta); }
.embed-editor-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.embed-editor-cabecera label { font-weight: 500; font-size: 14px; }
.embed-campos { display: grid; gap: 16px; margin-top: 16px; }
.embed-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: end; }
.embed-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.embed-mas { border-top: 1px solid var(--piedra-suave); padding-top: 12px; }
.embed-mas summary { cursor: pointer; font-weight: 500; font-size: 14px; color: var(--tinta-suave); }
.embed-mas summary:hover { color: var(--tinta); }
.casilla { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.casilla input { accent-color: var(--violeta); width: 16px; height: 16px; }

/* Lista de roles con casillas */
.roles { display: grid; gap: 2px; max-height: 320px; overflow: auto; border: 1px solid var(--piedra); border-radius: 8px; padding: 6px; background: var(--campo); }
.roles label { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; cursor: pointer; }
.roles label:hover { background: var(--piedra-suave); }
.roles label.no-asignable { cursor: not-allowed; opacity: 0.55; }
.roles input { accent-color: var(--violeta); width: 16px; height: 16px; }
.punto-rol { width: 10px; height: 10px; border-radius: 50%; background: var(--piedra); flex: none; }
.roles .motivo { margin-left: auto; font-size: 12px; color: var(--tinta-suave); }

/* Tabla de logs y ranking */
.filas { display: grid; gap: 0; }
.fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 260px); gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--piedra); }
.fila:first-child { border-top: 0; }
.fila p { font-size: 14px; color: var(--tinta-suave); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; font-weight: 500; color: var(--tinta-suave); font-size: 14px; padding: 8px 8px 8px 0; border-bottom: 1px solid var(--piedra); }
td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--piedra-suave); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

/* Vista previa: un mensaje de Discord fiel, siempre en su oscuro */
.vista { padding: 40px 28px; border-left: 1px solid var(--piedra); border-right: 1px solid var(--piedra); position: sticky; top: 0; height: 100vh; overflow: auto; }
.vista h2 { font-size: 22px; margin-bottom: 4px; }
.vista > p { margin-bottom: 20px; }
.discord {
  background: #313338; color: #dbdee1; border: 1px solid #3f4147; border-radius: var(--radio); padding: 14px 16px 16px;
  font: 400 15px/1.375 'gg sans', 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
}
.discord + .discord { margin-top: 16px; }
.discord .canal { color: #949ba4; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.mensaje { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
.avatar-clio { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #2e1b55; color: #d4b15a; font-family: var(--serif); font-size: 20px; }
.autor { display: flex; align-items: baseline; gap: 6px; }
.autor strong { color: #f2f3f5; font-weight: 500; }
.autor .app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; }
.autor time { color: #949ba4; font-size: 12px; }
.texto { white-space: pre-wrap; overflow-wrap: anywhere; }
.texto .mencion { background: rgba(88, 101, 242, 0.3); color: #c9cdfb; border-radius: 3px; padding: 0 2px; font-weight: 500; }
.texto code { background: #2b2d31; border-radius: 4px; padding: 0 4px; font-size: 13px; }
/* Markdown de Discord (js/markdown.js) */
.texto .md-h1, .texto .md-h2, .texto .md-h3 { color: #f2f3f5; font-weight: 700; line-height: 1.375; margin: 8px 0 0; }
.texto .md-h1 { font-size: 24px; }
.texto .md-h2 { font-size: 20px; }
.texto .md-h3 { font-size: 16px; }
.texto > :first-child:is(.md-h1, .md-h2, .md-h3) { margin-top: 0; }
.texto .md-sub { color: #949ba4; font-size: 13px; }
.texto .md-lista { margin: 4px 0 4px 16px; padding-left: 16px; white-space: normal; }
.texto ul.md-lista { list-style: disc; }
.texto ul.md-lista ul.md-lista { list-style: circle; }
.texto ol.md-lista { list-style: decimal; }
.texto .md-lista li { white-space: pre-wrap; }
.texto .md-cita { margin: 0; padding: 0 8px 0 12px; border-left: 4px solid #4e5058; border-radius: 2px; }
.texto .md-codigo { margin: 6px 0; padding: 7px; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 4px; white-space: pre-wrap; }
.texto .md-codigo code { background: none; padding: 0; }
.texto .md-spoiler { background: #1e1f22; border-radius: 3px; padding: 0 2px; }
.texto a { color: #00a8fc; text-decoration: none; }
.texto a:hover { text-decoration: underline; }
.discord .vacio { color: #949ba4; font-style: italic; }

/* Embed de Discord */
.discord .subtexto { color: #949ba4; font-size: 12px; margin-top: 4px; }
.embed-discord {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start;
  max-width: 432px; margin-top: 6px; padding: 0 16px 16px 12px; background: #2b2d31; border-left: 4px solid #1e1f22; border-radius: 4px;
}
.embed-discord > * { grid-column: 1; margin-top: 8px; min-width: 0; }
.embed-discord .e-autor { display: flex; align-items: center; gap: 8px; color: #f2f3f5; font-size: 14px; font-weight: 600; }
.embed-discord .e-titulo { color: #f2f3f5; font-weight: 600; overflow-wrap: anywhere; }
.embed-discord .e-titulo a { color: #00a8fc; text-decoration: none; }
.embed-discord .e-titulo a:hover { text-decoration: underline; }
.embed-discord .e-desc { font-size: 14px; }
.embed-discord .e-miniatura { grid-column: 2; grid-row: 1 / span 4; width: 80px; height: 80px; object-fit: cover; border-radius: 4px; }
.embed-discord .e-imagen { grid-column: 1 / -1; max-width: 100%; max-height: 300px; margin-top: 16px; border-radius: 4px; }
.embed-discord .e-pie { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; color: #b5bac1; font-size: 12px; white-space: pre-wrap; }
.embed-discord .e-icono { width: 24px; height: 24px; border-radius: 50%; flex: none; }
.embed-discord .e-pie .e-icono { width: 20px; height: 20px; }

/* Barra de guardado: aparece solo con cambios */
.barra-guardar {
  position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 0);
  display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 18px;
  background: var(--barra); color: var(--barra-texto); border-radius: 10px; width: min(640px, calc(100vw - 32px));
  box-shadow: 0 8px 24px var(--sombra);
}
.barra-guardar p { flex: 1; font-size: 15px; }
.barra-guardar .boton-texto { color: var(--barra-texto); }
.barra-guardar .boton { background: var(--primario); color: var(--primario-texto); }
.barra-guardar.error p { color: #f3b6a8; }
@media (prefers-reduced-motion: no-preference) {
  .barra-guardar { animation: subir 0.18s ease-out; }
  @keyframes subir { from { transform: translate(-50%, 12px); opacity: 0; } }
}
.nota { position: fixed; right: 20px; bottom: 20px; background: var(--violeta); color: var(--primario-texto); padding: 10px 16px; border-radius: var(--radio); font-size: 15px; box-shadow: 0 8px 24px var(--sombra); }

.cargando { padding: 64px 16px; text-align: center; color: var(--tinta-suave); }

/* Navegación agrupada */
.lateral nav { display: grid; gap: 26px; overflow-y: auto; align-content: start; }
/* Título de grupo: Marcellus en oro con una línea fina que lo cierra a la derecha. Es texto, no botón: sin hover ni puntero. */
.grupo-nombre {
  display: flex; align-items: center; gap: 10px; padding: 0 12px 8px;
  font: 400 15px/1.2 var(--serif); letter-spacing: 0.02em; color: var(--oro-texto); cursor: default; user-select: none;
}
.grupo-nombre::after { content: ''; flex: 1; height: 1px; background: var(--piedra); }

/* Etiqueta Premium (la misma píldora que la web pública) */
.premium {
  display: inline-block; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--oro-texto);
  border: 1px solid var(--oro); border-radius: 999px; padding: 1px 9px; white-space: nowrap; vertical-align: 1px;
}
.limite { font-size: 14px; color: var(--tinta-suave); }

/* Listas de objetos (paneles, mensajes, sorteos…) y su formulario de edición */
.objetos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--piedra); }
.objetos li { display: flex; align-items: center; gap: 16px; padding: 14px 12px; border-bottom: 1px solid var(--piedra); }
.objetos li.activo { background: var(--superficie); box-shadow: inset 3px 0 0 var(--violeta); }
.objeto-texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
.objeto-titulo { font-weight: 600; overflow-wrap: anywhere; display: flex; align-items: center; gap: 6px; }
.objeto-meta { font-size: 14px; color: var(--tinta-suave); overflow-wrap: anywhere; }
.objeto-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }
.publicado { color: var(--violeta); font-weight: 500; }
.con-error { color: var(--bermellon); font-weight: 500; }
.id { font: 13px/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--tinta-suave); }
.contenido code, .vista-paso code { font: 13px/1.4 ui-monospace, 'Cascadia Mono', Consolas, monospace; background: var(--piedra-suave); border-radius: 4px; padding: 1px 5px; }
.boton-pequeno { min-height: 36px; padding: 0 12px; font-size: 14px; }
.boton:disabled { opacity: 0.6; cursor: progress; }
.boton-texto-peligro, .boton.boton-texto-peligro {
  background: none; border: 0; padding: 0 4px; min-height: 36px; color: var(--bermellon); text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px;
}
.formulario { margin: 20px 0 0; padding: 20px; border: 1px solid var(--piedra); border-left: 3px solid var(--violeta); border-radius: var(--radio); background: var(--superficie); }
.formulario > h3 { font-family: var(--serif); font-weight: 400; font-size: 22px; }
.formulario > .aviso { margin-top: 16px; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.con-unidad { display: flex; align-items: center; gap: 10px; color: var(--tinta-suave); font-size: 14px; }
.etiqueta { font-weight: 500; font-size: 14px; }

/* Elegir entre pocas opciones y listas que se editan (preguntas, roles, sanciones…) */
.opciones, .lista-editable { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 8px; }
.opciones legend, .lista-editable legend { font-weight: 500; font-size: 14px; padding: 0; margin-bottom: 8px; }
.opcion { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--piedra); border-radius: var(--radio); cursor: pointer; }
.opcion:hover { border-color: var(--tinta-suave); }
.opcion:has(input:checked) { border-color: var(--violeta); background: var(--superficie); box-shadow: inset 0 0 0 1px var(--violeta); }
.opcion input { accent-color: var(--violeta); margin: 3px 0 0; width: 16px; height: 16px; flex: none; }
.opcion b { font-weight: 500; font-size: 15px; }
.opcion > span > span { display: block; font-size: 14px; color: var(--tinta-suave); }
.lista-editable > .boton { justify-self: start; }
.fila-interruptor { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.fila-interruptor .sutil { margin: 2px 0 0; }
.lista-editable + .lista-editable { margin-top: 8px; }
.elemento {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end;
  padding: 14px 0; border-top: 1px solid var(--piedra-suave);
}
.elemento input[type='number'] { width: 100%; max-width: 120px; }
.elemento-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; min-height: 46px; }
.elemento-quitar { display: flex; align-items: center; min-height: 46px; }
.avanzado { border-top: 1px solid var(--piedra-suave); padding-top: 14px; }
.avanzado summary { cursor: pointer; font-weight: 500; font-size: 15px; }
.avanzado summary .premium { margin-left: 8px; }
.avanzado > .bloque-cuerpo { margin-top: 16px; }
.publicar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding-top: 4px; }
.publicar .campo { flex: 1 1 240px; }
.filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filtros .campo { flex: 1 1 180px; }
.segmentos { display: inline-flex; justify-self: start; border: 1px solid var(--piedra); border-radius: var(--radio); padding: 3px; gap: 3px; margin-bottom: 12px; }
.segmento { font: 500 14px/1 var(--sans); padding: 8px 14px; border: 0; border-radius: 6px; background: none; color: var(--tinta-suave); cursor: pointer; }
.segmento[aria-pressed='true'] { background: var(--piedra-suave); color: var(--tinta); box-shadow: inset 0 -2px 0 var(--violeta); }
.reroll { display: inline-flex; align-items: center; gap: 6px; }
.reroll input[type='number'] { width: 64px; padding: 7px 8px; }
.tabla { overflow-x: auto; min-width: 0; position: relative; }
.bloque-cuerpo > * { min-width: 0; }
.bloque-cabecera > .boton { flex: none; white-space: nowrap; }
.tabla td { vertical-align: top; }
input[type='datetime-local'] { font: inherit; color: var(--tinta); background: var(--campo); border: 1px solid var(--piedra); border-radius: var(--radio); padding: 10px 12px; max-width: 280px; }
.nota-error { background: var(--bermellon); }
.vista-paso { margin-bottom: 12px; }

/* Componentes de Discord en la vista previa */
.d-fila { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.d-boton { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 2px 16px; border-radius: 8px; color: #fff; font-size: 14px; font-weight: 500; }
.d-primario { background: #5865f2; }
.d-secundario { background: #4e5058; }
.d-exito { background: #248046; }
.d-peligro { background: #da373c; }
.d-menu { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 400px; min-height: 40px; padding: 0 12px; background: #1e1f22; border-radius: 8px; color: #949ba4; font-size: 14px; }
.d-flecha { width: 8px; height: 8px; border-right: 2px solid #b5bac1; border-bottom: 2px solid #b5bac1; transform: rotate(45deg) translateY(-3px); }
.d-reacciones { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.d-reaccion { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: 8px; background: #2b2d31; border: 1px solid #3f4147; color: #dbdee1; font-size: 14px; font-weight: 600; }
.discord img.emoji { width: 20px; height: 20px; object-fit: contain; vertical-align: -4px; }
.objeto-titulo img.emoji, .roles img.emoji { width: 18px; height: 18px; object-fit: contain; }
.embed-discord .e-campo { font-size: 14px; }
.embed-discord .e-campo-nombre { color: #f2f3f5; font-weight: 600; margin-bottom: 2px; }
img.avatar-clio { object-fit: cover; }
.avatar-otro { background: #4e5058; color: #fff; font-family: var(--sans); font-size: 18px; }
.d-modal { padding: 20px; }
.d-modal-titulo { color: #f2f3f5; font-size: 20px; font-weight: 600; margin-bottom: 16px; }
.d-modal-campo { margin-bottom: 16px; }
.d-modal-etiqueta { color: #dbdee1; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.d-obligatorio { color: #f23f42; margin-left: 4px; }
.d-modal-entrada { height: 40px; background: #1e1f22; border-radius: 8px; }
.d-modal-entrada.larga { height: 88px; }
.d-modal-pie { display: flex; justify-content: flex-end; }

/* Móvil y tablet */
@media (max-width: 1100px) {
  .panel, .panel.con-vista { grid-template-columns: 232px minmax(0, 1fr); }
  .panel.con-vista .vista { grid-column: 2; position: static; height: auto; border: 0; padding: 0 48px 120px; max-width: 1016px; }
}
@media (max-width: 760px) {
  .panel, .panel.con-vista { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--piedra); padding: 16px; gap: 12px; }
  .lateral nav { display: flex; gap: 4px; overflow-x: auto; }
  .lateral nav .grupo, .lateral nav ul { display: contents; }
  .grupo-nombre { display: none; }
  .lateral nav a { white-space: nowrap; min-height: 44px; }
  .bloque { padding: 18px 16px 20px; }
  .lateral-pie { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
  .contenido { padding: 24px 16px 120px; }
  .panel.con-vista .vista { grid-column: 1; padding: 0 16px 120px; }
  .fila { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .embed-par { grid-template-columns: minmax(0, 1fr); }
  .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .objetos li { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 4px; }
  .objeto-acciones { justify-content: flex-start; }
  .formulario { padding: 16px; }
  h1 { font-size: 32px; }
  .portada h1 { font-size: 44px; }
}

/* Ayuda: lista de comandos con buscador y guías */
.ayuda-filtros { display: grid; gap: 12px; margin-bottom: 8px; }
.ayuda-filtros .segmentos { flex-wrap: wrap; margin-bottom: 0; }
.comandos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--piedra); }
.comando { padding: 14px 4px; border-bottom: 1px solid var(--piedra); display: grid; gap: 6px; }
.comando p { margin: 0; color: var(--tinta-suave); }
.comando-cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.comando-cabecera > strong { font-weight: 500; }
.comando code, .comando-subs code { font-size: 14px; background: var(--piedra-suave); border-radius: 4px; padding: 1px 6px; }
.comando-opciones { display: inline-flex; flex-wrap: wrap; gap: 4px; vertical-align: 1px; }
.comando-opciones code { background: none; border: 1px solid var(--piedra); color: var(--tinta-suave); font-size: 13px; cursor: help; }
.comando-etiquetas { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.comando-cat, .comando-permiso { font-size: 13px; line-height: 1.3; border-radius: 999px; padding: 1px 9px; white-space: nowrap; }
.comando-cat { color: var(--violeta); border: 1px solid var(--violeta); }
.comando-permiso { color: var(--tinta-suave); border: 1px solid var(--piedra); }
.comando-subs { list-style: none; margin: 2px 0 0; padding: 0 0 0 12px; border-left: 2px solid var(--piedra-suave); display: grid; gap: 6px; font-size: 14px; }
.guias { display: grid; gap: 8px; }
.guia { border: 1px solid var(--piedra); border-radius: var(--radio); padding: 0 14px; }
.guia summary { cursor: pointer; padding: 12px 0; font-weight: 500; }
.guia p { margin: 0 0 12px; color: var(--tinta-suave); line-height: 1.5; }