/* Mesa narrativa de HDN: colores y letras del tema del juego (hdn-cliente/fuente/tema/tokens.css). */
:root {
  --fondo: #050608; --fondo-medio: #0a0c10; --elev: #12151b; --fuerte: #1a1e25;
  --oro: #d0b67d; --oro-suave: #efe2c9; --oro-hondo: #a48a55; --oro-tenue: rgba(199,170,112,.55);
  --texto: #eadfca; --texto-fuerte: #f2dfb4; --texto-apagado: rgba(234,223,202,.74); --texto-tenue: rgba(234,223,202,.56);
  --borde: rgba(199,170,112,.2); --borde-tenue: rgba(199,170,112,.12); --borde-fuerte: rgba(199,170,112,.45);
  --ok: #b6c79a; --mal: #be6056; --neutro: #9aa3ad; --aviso: #d9a65b; --acero: #5d9fa8; --gm: #a99bd6;
  --letra-titulo: Cinzel, Georgia, serif; --letra: Georgia, 'Times New Roman', serif;
  --radio: 3px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.5 var(--letra); }
body { min-height: 100vh; background:
  radial-gradient(ellipse 120% 60% at 50% 0%, rgba(31,35,43,.62), transparent 70%),
  linear-gradient(180deg, var(--fondo-medio), var(--fondo)); background-attachment: fixed; }
a { color: var(--oro); }
a:hover { color: var(--oro-suave); }
h1, h2, h3 { font-family: var(--letra-titulo); font-weight: 500; letter-spacing: .05em; color: var(--texto-fuerte); margin: 0 0 .5em; }
h1 { font-size: 1.6rem; line-height: 1.25; } h2 { font-size: 1.15rem; } h3 { font-size: .95rem; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ---- cabecera */
.cabecera { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px; background: rgba(5,6,8,.92); border-bottom: 1px solid var(--borde); backdrop-filter: blur(6px); }
.marca { display: flex; align-items: center; gap: 10px; font-family: var(--letra-titulo); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fuerte); text-decoration: none; }
.marca small { display: block; font-size: .62rem; letter-spacing: .3em; color: var(--texto-tenue); }
.nav { display: flex; gap: 2px; flex-wrap: wrap; flex: 1; align-items: center; }
.nav > a:not(.btn) { border-bottom: 2px solid transparent; padding: 8px 12px; text-decoration: none;
  font-family: var(--letra-titulo); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-apagado); }
.nav > a:not(.btn):hover { color: var(--texto-fuerte); }
.nav > a[aria-current="page"] { color: var(--oro-suave); border-bottom-color: var(--oro); }
.nav .nueva { margin-left: auto; }
.contador { margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--mal); color: #fff; font: 600 .7rem/1.5 var(--letra); }
.cuenta { display: flex; align-items: center; gap: 10px; color: var(--texto-apagado); font-size: .9rem; }

.vista { max-width: 1320px; margin: 0 auto; padding: 24px 20px 64px; }
.cargando, .vacio { color: var(--texto-tenue); font-style: italic; margin: .3em 0; }
.vacio-grande { text-align: center; padding: 24px 0; color: var(--texto-apagado); }
.titular { margin-bottom: 14px; align-items: baseline; }
.titular h1 { margin: 0; }
.meta { color: var(--texto-tenue); font-size: .85rem; }
.id { font-variant-numeric: tabular-nums; color: var(--texto-tenue); font-size: .85rem; }

/* ---- piezas */
.panel { background: linear-gradient(180deg, rgba(14,17,22,.72), rgba(4,5,8,.82)); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; margin-bottom: 14px; }
.panel.destacado { border-color: var(--borde-fuerte); }
.fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.pila { display: grid; gap: 8px; }
.chips { gap: 5px; }
.chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--borde); border-radius: 10px; font-size: .76rem; color: var(--texto-apagado); white-space: nowrap; }
.chip.tipo { border-color: var(--borde-fuerte); color: var(--oro-suave); background: rgba(208,182,125,.07); }
.chip.ambito { color: var(--texto); }
.chip.cuando { border-color: rgba(93,159,168,.55); color: #a9d0d5; }
.chip.etiqueta { border-style: dashed; }

.estado { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: .76rem; font-weight: 600; letter-spacing: .02em; white-space: nowrap; }
.e-propuesta { background: rgba(154,163,173,.18); color: #cfd5dc; }
.e-conversando { background: rgba(217,166,91,.2); color: var(--aviso); }
.e-aprobada { background: rgba(182,199,154,.2); color: var(--ok); }
.e-preparacion { background: rgba(93,159,168,.22); color: #a9d0d5; }
.e-en_curso { background: rgba(208,182,125,.26); color: var(--oro-suave); }
.e-pausa { background: rgba(255,255,255,.06); color: var(--neutro); }
.e-finalizada { background: rgba(143,167,122,.16); color: #b9caa6; }
.e-descartada { background: rgba(190,96,86,.16); color: #e2a59c; }

.insignia { display: inline-block; padding: 0 7px; border-radius: 9px; font: 600 .66rem/1.6 var(--letra); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.i-gm { background: linear-gradient(180deg, #3b3160, #241d3d); color: #ddd5fa; border: 1px solid var(--gm); box-shadow: 0 0 6px rgba(169,155,214,.35); }
.i-equipo { color: #a9d0d5; border: 1px solid rgba(93,159,168,.6); }
.i-maestre { color: var(--oro-suave); border: 1px solid var(--borde-fuerte); }
.quien { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.quien .nombre { color: var(--texto-fuerte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quien.es-gm .nombre { color: #ddd5fa; }
.avatar { border-radius: 50%; border: 1px solid var(--borde-fuerte); flex: none; object-fit: cover; }
.avatar.sin { display: inline-flex; align-items: center; justify-content: center; background: var(--fuerte); color: var(--oro); font: 600 .75rem var(--letra-titulo); }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1px solid var(--borde-fuerte); border-radius: var(--radio);
  background: var(--fuerte); color: var(--texto-fuerte); cursor: pointer; text-decoration: none; font-size: .92rem; white-space: nowrap; }
.btn:hover { border-color: var(--oro); color: var(--oro-suave); }
.btn.principal { background: linear-gradient(180deg, #2a2418, #1a160f); border-color: var(--oro); color: var(--oro-suave); }
.btn.fino { padding: 4px 10px; font-size: .84rem; background: transparent; }
.btn.peligro { border-color: rgba(190,96,86,.7); color: #e2a59c; }
.btn:disabled { opacity: .5; cursor: default; }
.enlace-btn { background: none; border: 0; padding: 0; color: var(--texto-tenue); cursor: pointer; font-size: .82rem; }
.enlace-btn:hover { color: var(--oro); text-decoration: underline; }
.enlace-btn.peligro:hover { color: #e2a59c; }
.nuevo { display: inline-block; padding: 0 7px; border-radius: 9px; background: rgba(190,96,86,.22); color: #f0b8b0; font-size: .74rem; font-weight: 600; white-space: nowrap; }

input[type=text], input[type=url], input[type=search], input[type=date], input[type=time], select, textarea {
  width: 100%; padding: 7px 9px; background: var(--fondo-medio); border: 1px solid var(--borde); border-radius: var(--radio); color-scheme: dark; }
textarea { min-height: 60px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--oro-tenue); outline-offset: 1px; }
.error { color: #e2a59c; font-size: .9rem; }
.ok-msg { color: var(--ok); font-size: .9rem; }
.con-error { border-color: var(--mal) !important; outline: 1px solid var(--mal); }
.nota-campo { margin-top: 4px; }
.aviso-version { position: sticky; top: 0; z-index: 10; display: flex; gap: 12px; align-items: center; justify-content: center; padding: 8px 12px;
  background: #2a2418; border-bottom: 1px solid var(--oro); color: var(--oro-suave); }

/* ---- texto con formato */
.rico p { margin: 0 0 .7em; }
.rico ul, .rico ol { margin: 0 0 .7em; padding-left: 1.3em; }
.rico li { margin: .15em 0; }
.rico h4 { font: 500 .95rem var(--letra-titulo); letter-spacing: .05em; color: var(--oro-suave); margin: .9em 0 .4em; }
.rico blockquote, .cita-resp { margin: 0 0 .7em; border-left: 2px solid var(--borde-fuerte); padding: 2px 10px; color: var(--texto-apagado); }
.rico > :last-child { margin-bottom: 0; }
.rico, .resumen, .resumen-grande, .extracto { overflow-wrap: anywhere; }

/* ---- entrada */
.entrada { max-width: 500px; margin: 12vh auto; text-align: center; }
.entrada p { color: var(--texto-apagado); }

/* ---- inicio */
.kpis { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 16px; }
.kpi { display: block; background: var(--elev); border: 1px solid var(--borde-tenue); border-top: 2px solid var(--borde-fuerte); border-radius: var(--radio); padding: 10px 14px; text-decoration: none; }
.kpi:hover { border-color: var(--borde-fuerte); }
.kpi b { display: block; font: 700 1.6rem/1.1 var(--letra); color: var(--oro-suave); }
.kpi span { font-size: .85rem; color: var(--texto-apagado); }
.k-conversando { border-top-color: var(--aviso); } .k-aprobada { border-top-color: var(--ok); } .k-preparacion { border-top-color: var(--acero); }
.k-en_curso { border-top-color: var(--oro); } .k-finalizada { border-top-color: #8fa77a; }
.rejilla-inicio { display: grid; gap: 14px; grid-template-columns: 1.4fr 1fr; align-items: start; }
.rejilla-inicio > .panel { margin-bottom: 0; }
.rejilla-inicio + .panel { margin-top: 14px; }
.sub { margin-top: 1.2em; font-size: .85rem; color: var(--texto-apagado); }
.fila-prop { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--borde-tenue); border-radius: var(--radio); background: rgba(18,21,27,.6); text-decoration: none; color: var(--texto); }
.fila-prop:hover { border-color: var(--borde-fuerte); }
.fila-titulo { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-fuerte); }
.cuando { color: #a9d0d5; font-size: .85rem; white-space: nowrap; }
ul.actividad { list-style: none; margin: 0; padding: 0; }
ul.actividad li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--borde-tenue); font-size: .92rem; }
ul.actividad li:last-child { border-bottom: 0; }
ul.actividad li.es-nuevo { box-shadow: inset 2px 0 0 var(--mal); padding-left: 8px; }
.extracto { color: var(--texto-apagado); font-size: .86rem; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---- filtros */
.barra-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.barra-filtros input[type=search] { flex: 1 1 260px; width: auto; }
.barra-filtros select { width: auto; max-width: 200px; }
.casilla { display: inline-flex; gap: 6px; align-items: center; font-size: .9rem; color: var(--texto-apagado); cursor: pointer; }

/* ---- tablero */
.tablero { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.columna { background: rgba(10,12,16,.7); border: 1px solid var(--borde-tenue); border-top: 2px solid var(--borde-fuerte); border-radius: var(--radio); min-height: 140px; transition: border-color .15s, background .15s; }
.columna.c-conversando { border-top-color: var(--aviso); } .columna.c-aprobada { border-top-color: var(--ok); } .columna.c-preparacion { border-top-color: var(--acero); }
.columna.c-en_curso { border-top-color: var(--oro); } .columna.c-finalizada { border-top-color: #8fa77a; } .columna.c-descartada { border-top-color: var(--mal); } .columna.c-pausa { border-top-color: var(--neutro); }
.columna.encima { border-color: var(--oro); background: rgba(208,182,125,.06); }
.columna.foco { box-shadow: 0 0 0 1px var(--oro-tenue); }
.columna > header { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; font: 500 .78rem/1.3 var(--letra-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fuerte); cursor: help; }
.cuenta-col { font: 600 .78rem var(--letra); color: var(--texto-tenue); }
.tarjetas { display: grid; gap: 8px; padding: 0 8px 10px; }
.col-vacia { padding: 4px 6px; font-size: .85rem; }
.tarjeta { display: block; padding: 10px 11px; background: var(--elev); border: 1px solid var(--borde-tenue); border-radius: var(--radio); text-decoration: none; color: var(--texto); cursor: grab; }
.tarjeta:hover { border-color: var(--borde-fuerte); }
.tarjeta.con-nuevo { box-shadow: inset 2px 0 0 var(--mal); }
.tarjeta.arrastrando { opacity: .45; }
.tarjeta h3 { font: 600 .98rem/1.3 var(--letra); letter-spacing: 0; margin: 6px 0 4px; color: var(--texto-fuerte); overflow-wrap: anywhere; }
.tarjeta .resumen { margin: 0 0 8px; font-size: .86rem; color: var(--texto-apagado); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pie-tarjeta { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.gente { display: inline-flex; }
.gente .avatar + .avatar { margin-left: -6px; }
.cifras { display: inline-flex; gap: 8px; align-items: center; font-size: .78rem; color: var(--texto-tenue); white-space: nowrap; }
.cifra.favor { color: var(--ok); } .cifra.reparos { color: #e2a59c; }
details.cerradas { margin-top: 16px; }
details.cerradas > summary { cursor: pointer; color: var(--texto-apagado); font: 500 .85rem var(--letra-titulo); letter-spacing: .08em; margin-bottom: 10px; }
.tablero.bajo { grid-auto-columns: minmax(220px, 1fr); }
.solo-movil { display: none; }

/* ---- lista */
.tabla-envoltorio { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; font: 500 .72rem/1.4 var(--letra-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); padding: 8px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 8px; border-bottom: 1px solid var(--borde-tenue); vertical-align: top; }
.tabla td .chips { margin-top: 4px; }
.tabla tr:hover td { background: rgba(208,182,125,.04); }
.tabla tr.con-nuevo td:first-child { box-shadow: inset 2px 0 0 var(--mal); }

/* ---- propuesta */
.volver { display: inline-block; margin-bottom: 10px; font-size: .9rem; text-decoration: none; }
.cabeza-prop { margin-bottom: 16px; }
.cabeza-prop h1 { margin: 8px 0 6px; font-size: 1.75rem; }
.cabeza-prop .meta { font-size: .88rem; }
.acciones { margin-top: 10px; }
.detalle { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.lateral { position: sticky; top: 72px; }
.lateral .panel { padding: 14px 16px; }
.lateral h3 { margin-bottom: .6em; }
.responsable { display: flex; gap: 8px; align-items: center; }
.responsable .nombre { color: var(--texto-fuerte); line-height: 1.2; margin-bottom: 2px; overflow-wrap: anywhere; }
.resumen-grande { font-size: 1.08rem; color: var(--texto-fuerte); margin: 0 0 1em; }
.principal .panel h3 { margin-top: 1.2em; color: var(--oro); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; }
.necesidades { border-left: 2px solid var(--acero); padding-left: 10px; }
ul.enlaces { margin: 0; padding-left: 1.2em; }
.estado-actual { display: flex; gap: 8px; align-items: center; }
.pasos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; align-items: center; }
.paso { padding: 3px 9px; border-radius: 10px; border: 1px solid var(--borde-tenue); cursor: pointer; font-size: .78rem; font-weight: 600; opacity: .8; }
.paso:hover, .paso[aria-pressed="true"] { opacity: 1; border-color: currentColor; }
.confirmar { margin-top: 10px; display: grid; gap: 8px; }
.opiniones { gap: 6px; }
.opinion { flex: 1 1 auto; white-space: nowrap; display: inline-flex; justify-content: space-between; gap: 8px; padding: 6px 10px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--elev); cursor: pointer; font-size: .88rem; color: var(--texto-apagado); }
.opinion b { color: var(--texto-fuerte); }
.opinion.o-a_favor[aria-pressed="true"] { border-color: var(--ok); color: var(--ok); background: rgba(182,199,154,.1); }
.opinion.o-reparos[aria-pressed="true"] { border-color: var(--mal); color: #e2a59c; background: rgba(190,96,86,.1); }

.hilo { margin-top: 6px; }
.hilo > .fila { margin: 18px 0 10px; }
.hilo h2 { margin: 0; }
.comentario { background: var(--elev); border: 1px solid var(--borde-tenue); border-radius: var(--radio); padding: 12px 14px; margin-bottom: 10px; }
.comentario.es-nuevo { border-left: 2px solid var(--mal); }
.comentario.de-gm { border-color: rgba(169,155,214,.35); background: linear-gradient(180deg, rgba(41,35,66,.35), var(--elev)); }
.comentario.retirado { background: transparent; border-style: dashed; padding: 6px 12px; }
.comentario.retirado p { margin: 0; }
.cab-com { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.cita-resp { font-size: .86rem; }
.acciones-com { display: flex; gap: 14px; margin-top: 6px; }
.evento { display: flex; gap: 10px; align-items: flex-start; padding: 4px 4px 12px 10px; font-size: .86rem; color: var(--texto-apagado); }
.evento .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--borde-fuerte); margin-top: 6px; flex: none; }
.evento.ev-estado .punto { background: var(--oro); }
.evento strong { color: var(--texto); font-weight: 600; }
.nota-evento { margin: 6px 0 0; border-left: 2px solid var(--oro-tenue); padding: 2px 10px; color: var(--texto); }
.redactor { margin-top: 12px; }
.redactor .fila:first-of-type { align-items: flex-start; flex-wrap: nowrap; }
.redactor textarea { flex: 1; }
.redactor .fila + .fila { margin-top: 8px; }
.respondiendo { display: flex; justify-content: space-between; gap: 10px; font-size: .85rem; color: var(--texto-apagado); border-left: 2px solid var(--oro); padding: 2px 10px; margin-bottom: 10px; }
.respondiendo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- formulario */
.formulario { display: grid; gap: 16px; max-width: 860px; }
.campo { display: grid; gap: 6px; font-size: .9rem; color: var(--texto-apagado); }
.campo > span:first-child { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.campo em { font-style: normal; }
.contador-txt { font-size: .76rem; color: var(--texto-tenue); font-variant-numeric: tabular-nums; }
.contador-txt.cerca { color: var(--aviso); }
.opciones, .responsables { display: flex; flex-wrap: wrap; gap: 6px; }
.opcion { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--borde); border-radius: 14px; cursor: pointer; color: var(--texto); background: var(--fondo-medio); }
.opcion:has(input:checked) { border-color: var(--oro); background: rgba(208,182,125,.1); color: var(--oro-suave); }
.opcion input { accent-color: var(--oro); margin: 0; }
.opcion.persona { padding: 3px 10px 3px 6px; }
.campos-fecha { align-items: end; }
.campos-fecha .campo { width: 200px; }
.enlace-fila { flex-wrap: nowrap; }
.enlace-fila .url { flex: 2; } .enlace-fila .txt { flex: 1; }

/* ---- equipo y guía */
.rejilla-equipo { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ficha h3 { margin: 0 0 4px; font: 600 1.05rem var(--letra); letter-spacing: 0; }
.ficha.de-gm { border-color: rgba(169,155,214,.55); background: linear-gradient(180deg, rgba(41,35,66,.5), rgba(4,5,8,.82)); }
.cifras-ficha { display: flex; gap: 14px; flex-wrap: wrap; font-size: .85rem; color: var(--texto-apagado); }
.cifras-ficha b { color: var(--oro-suave); font: 700 1rem var(--letra); }
dl.leyenda { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: baseline; margin: 0 0 12px; }
dl.leyenda dd { margin: 0; color: var(--texto-apagado); font-size: .92rem; }
ul.pasos { margin: 0 0 1em; padding-left: 1.2em; display: block; }
ul.pasos li { margin: .35em 0; color: var(--texto); }

@media (max-width: 980px) {
  .detalle { grid-template-columns: 1fr; }
  .lateral { position: static; }
  .rejilla-inicio { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cabecera { padding: 8px 12px; gap: 8px; }
  .nav { order: 3; flex: 1 1 100%; overflow-x: auto; flex-wrap: nowrap; }
  .cuenta { margin-left: auto; }
  .solo-escritorio { display: none; } .solo-movil { display: inline; }
  .nav > a:not(.btn) { padding: 6px 8px; font-size: .74rem; }
  .cuenta .nombre, .cuenta .insignia { display: none; }
  .vista { padding: 16px 16px 48px; }
  .tablero { grid-auto-columns: minmax(78vw, 1fr); }
  .tabla .ocultable { display: none; }
  .cabeza-prop h1 { font-size: 1.4rem; }
  .enlace-fila { flex-wrap: wrap; }
  .campos-fecha .campo { width: auto; flex: 1; }
}