/* Plataforma de pruebas de HDN: los 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,.72); --texto-tenue: rgba(234,223,202,.55);
  --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;
  --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: .06em; color: var(--texto-fuerte); margin: 0 0 .5em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.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); }
.marca small { display: block; font-size: .62rem; letter-spacing: .3em; color: var(--texto-tenue); }
.nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.nav button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer;
  font-family: var(--letra-titulo); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--texto-apagado); }
.nav button:hover { color: var(--texto-fuerte); }
.nav button[aria-current="page"] { color: var(--oro-suave); border-bottom-color: var(--oro); }
.nav .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; }
.cuenta img { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--borde-fuerte); }

.vista { max-width: 1180px; margin: 0 auto; padding: 24px 20px 64px; }
.cargando, .vacio { color: var(--texto-tenue); font-style: italic; }
.subnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; }
.subnav button { background: var(--elev); border: 1px solid var(--borde-tenue); border-radius: var(--radio); padding: 6px 12px; cursor: pointer; color: var(--texto-apagado); font-size: .9rem; }
.subnav button[aria-current="page"] { border-color: var(--oro); color: var(--oro-suave); }

.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: 18px 20px; margin-bottom: 14px; }
.panel.destacado { border-color: var(--borde-fuerte); }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.pila { display: grid; gap: 10px; }
.rejilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); align-items: start; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-bottom: 18px; }
.kpi { display: flex; flex-direction: column; justify-content: flex-start; background: var(--elev); border: 1px solid var(--borde-tenue); border-radius: var(--radio); padding: 12px 14px; cursor: pointer; text-align: left; }
.kpi b { display: block; font: 700 1.7rem/1.1 var(--letra-titulo); color: var(--oro-suave); }
.kpi span { font-size: .85rem; color: var(--texto-apagado); }
.kpi.alerta b { color: var(--mal); }

.chip { display: inline-block; padding: 1px 8px; border: 1px solid var(--borde); border-radius: 10px; font-size: .78rem; color: var(--texto-apagado); white-space: nowrap; }
.chip.alta { border-color: rgba(190,96,86,.6); color: #e2a59c; }
.chip.media { border-color: var(--borde-fuerte); color: var(--oro); }
.chip.ok { border-color: rgba(182,199,154,.6); color: var(--ok); }
.chip.mal { border-color: rgba(190,96,86,.7); color: #e2a59c; }
.chip.neutro { color: var(--neutro); }
.estado { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; }
.estado.pendiente { background: rgba(154,163,173,.18); color: #c9cfd6; }
.estado.en_progreso { background: rgba(217,166,91,.2); color: var(--aviso); }
.estado.probar_de_nuevo { background: rgba(208,182,125,.25); color: var(--oro-suave); }
.estado.resuelto { background: rgba(182,199,154,.2); color: var(--ok); }
.estado.cerrado { background: rgba(255,255,255,.07); color: var(--texto-tenue); }
.chip.cat { border-color: rgba(208,182,125,.35); color: var(--texto); background: rgba(208,182,125,.06); }
.barra-orden { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.barra-orden input[type=search] { flex: 1 1 220px; width: auto; min-width: 160px; padding: 7px 9px; background: var(--fondo-medio); border: 1px solid var(--borde); border-radius: var(--radio); }
.barra-orden select { width: auto; }
.grupo-titulo { font-size: 1rem; color: var(--oro); margin: 18px 0 8px; }
tr.grupo-fila td { font: 500 .78rem/1.4 var(--letra-titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--oro); padding-top: 14px; }
.chip.ticket { border-color: var(--borde-fuerte); color: var(--oro-suave); font-variant-numeric: tabular-nums; }
.chip.fase-reparto { border-color: var(--oro); color: var(--oro-suave); }
.chip.fase-retirada { color: var(--texto-tenue); }
ul.historial { margin: .4em 0; padding-left: 1.1em; font-size: .9rem; }
ul.historial li { margin: .25em 0; }
.barra-acciones { margin-bottom: 12px; position: sticky; top: 58px; z-index: 2; background: rgba(5,6,8,.9); padding: 8px 0; }
details summary { cursor: pointer; margin: 6px 0; }
.meta { color: var(--texto-tenue); font-size: .85rem; }
.que { color: var(--texto-apagado); margin: .2em 0 .6em; }
ol.pasos { margin: .4em 0 .8em 1.2em; padding: 0; color: var(--texto); }
ol.pasos li { margin: .2em 0; }
.cita { border-left: 2px solid var(--borde-fuerte); padding: 4px 10px; margin: 6px 0; color: var(--texto); white-space: pre-wrap; overflow-wrap: anywhere; }
.nota-equipo { border-left: 2px solid var(--oro); background: rgba(208,182,125,.06); padding: 6px 10px; margin-top: 8px; }

.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; }
.btn:hover { border-color: var(--oro); }
.btn.principal { background: linear-gradient(180deg, #2a2418, #1a160f); border-color: var(--oro); color: var(--oro-suave); }
.btn.peligro { border-color: rgba(190,96,86,.7); }
.btn:disabled { opacity: .5; cursor: default; }
.resultados { display: flex; gap: 6px; flex-wrap: wrap; }
.resultados button { flex: 1 1 120px; padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--elev); cursor: pointer; color: var(--texto-apagado); }
.resultados button[aria-pressed="true"].ok { border-color: var(--ok); color: var(--ok); background: rgba(182,199,154,.1); }
.resultados button[aria-pressed="true"].mal { border-color: var(--mal); color: #e2a59c; background: rgba(190,96,86,.12); }
.resultados button[aria-pressed="true"].neutro { border-color: var(--neutro); color: #dfe3e8; background: rgba(154,163,173,.12); }
label.campo { display: grid; gap: 4px; font-size: .88rem; color: var(--texto-apagado); }
input[type=text], input[type=url], input[type=number], select, textarea {
  width: 100%; padding: 7px 9px; background: var(--fondo-medio); border: 1px solid var(--borde); border-radius: var(--radio); }
textarea { min-height: 80px; resize: vertical; }
.fila > select, .fila > input[type=number] { width: auto; }
input:focus, select:focus, textarea:focus, button: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; }

.progreso { height: 6px; background: var(--fuerte); border-radius: 3px; overflow: hidden; margin: 8px 0 14px; }
.progreso i { display: block; height: 100%; background: linear-gradient(90deg, var(--oro-hondo), var(--oro)); }

table.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; font: 500 .74rem/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 tr:hover td { background: rgba(208,182,125,.04); }
.tabla-envoltorio { overflow-x: auto; }
.tabla .btn { white-space: nowrap; }
.avatar { width: 22px; height: 22px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }

.entrada { max-width: 480px; margin: 12vh auto; text-align: center; }
.entrada p { color: var(--texto-apagado); }
dialog { background: var(--elev); color: var(--texto); border: 1px solid var(--borde-fuerte); border-radius: var(--radio); max-width: 640px; width: calc(100% - 32px); padding: 20px; }
dialog::backdrop { background: rgba(0,0,0,.6); }

@media (max-width: 640px) {
  .cabecera { padding: 8px 12px; }
  .vista { padding: 16px 12px 48px; }
  .rejilla { grid-template-columns: 1fr; }
  .tabla .ocultable { display: none; }
}