:root {
  --fondo: #161d26;
  --capa: #1e2733;
  --capa-2: #263243;
  --linea: #33445a;
  --texto: #ebe5d4;
  --tenue: #9aa5b5;
  --bronce: #c9973f;
  --bronce-claro: #e2b562;
  --ok: #74b464;
  --no: #d8685a;
  --espera: #d3b152;
  --titulos: "Barlow Semi Condensed", Arial, sans-serif;
  --cuerpo: "Barlow", Arial, sans-serif;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 10px; border: 3px solid var(--fondo); }
html, body { margin: 0; height: 100%; }
body { background: var(--fondo); color: var(--texto); font: 16px/1.5 var(--cuerpo); }
a { color: inherit; }
[hidden] { display: none !important; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--bronce-claro); outline-offset: 2px; }

h1 { font: 700 34px/1.1 var(--titulos); margin: 0 0 6px; letter-spacing: .01em; }
h2 { font: 600 22px/1.2 var(--titulos); margin: 0 0 14px; }
.bajada { color: var(--tenue); margin: 0 0 32px; max-width: 62ch; }
.cargando, .vacio-texto { color: var(--tenue); }

/* Estructura */
.app { display: grid; grid-template-columns: 232px 1fr; height: 100vh; }
.lateral {
  background: var(--capa); border-right: 1px solid var(--linea);
  display: flex; flex-direction: column; padding: 22px 14px 16px;
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 25px/1 var(--titulos); padding: 0 6px; }
.marca img { width: 36px; height: 36px; }
.gremio { margin: 6px 0 22px 52px; color: var(--tenue); font-size: 14px; min-height: 21px; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  padding: 9px 14px; border-radius: 0 6px 6px 0; text-decoration: none; color: var(--tenue);
  font-weight: 500; border-left: 3px solid transparent;
}
.menu a:hover { color: var(--texto); background: var(--capa-2); }
.menu a.activo { color: var(--texto); background: var(--capa-2); border-left-color: var(--bronce); }
.cuenta {
  margin-top: auto; display: flex; align-items: center; gap: 10px;
  padding: 14px 6px 0; border-top: 1px solid var(--linea); font-size: 14px; min-width: 0;
}
.cuenta img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.cuenta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cuenta a { margin-left: auto; color: var(--tenue); font-size: 13px; flex: none; }
.cuenta a:hover { color: var(--texto); }
.contenido { overflow: auto; padding: 40px 48px 80px; }
.contenido > * { max-width: 960px; }

/* Libro de guardia (inicio) */
.libro { margin: 0 0 44px; padding: 0; list-style: none; max-width: 560px; }
.libro li { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; }
.libro li::after { content: ""; order: 2; flex: 1; border-bottom: 2px dotted var(--linea); transform: translateY(-4px); }
.libro .etiqueta { order: 1; }
.libro .cifra { order: 3; font: 700 24px/1 var(--titulos); min-width: 2ch; text-align: right; }
.libro .cifra.alerta { color: var(--espera); }

/* Hilos */
.hilos { border-top: 1px solid var(--linea); }
.hilo { border-bottom: 1px solid var(--linea); }
.hilo-cabeza {
  width: 100%; display: grid; grid-template-columns: 1fr 150px 170px; align-items: center; gap: 16px;
  padding: 14px 8px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
}
.hilo-cabeza:hover { background: var(--capa); }
.hilo-cabeza[aria-expanded="true"] { background: var(--capa); }
.hilo-nombre { font-weight: 600; min-width: 0; }
.hilo-nombre small { display: block; font-weight: 400; color: var(--tenue); font-size: 14px; }
.estado { font-size: 14px; }
.estado-abierto { color: var(--bronce-claro); }
.estado-cerrado { color: var(--tenue); }
.cuentas { display: flex; gap: 14px; justify-content: flex-end; font-variant-numeric: tabular-nums; font-size: 15px; }
.c-ok { color: var(--ok); } .c-no { color: var(--no); } .c-espera { color: var(--espera); }
.hilo-detalle { padding: 4px 8px 18px; background: var(--capa); }
.fotos { list-style: none; margin: 0; padding: 0; }
.foto {
  display: grid; grid-template-columns: 180px 1fr auto; gap: 4px 16px; align-items: baseline;
  padding: 10px 12px; border-left: 3px solid var(--espera); margin-top: 8px; background: var(--capa-2); border-radius: 0 6px 6px 0;
}
.foto-rekipado { border-left-color: var(--ok); }
.foto-rechazado { border-left-color: var(--no); }
.foto-autor { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.foto-estado { color: var(--tenue); font-size: 15px; }
.foto-motivo { grid-column: 2 / 3; font-size: 15px; }
.foto a { font-size: 14px; color: var(--bronce-claro); }
.mas { margin-top: 20px; }

/* Ajustes */
.bloque { margin-bottom: 40px; }
.campo {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 24px;
  padding: 18px 0; border-top: 1px solid var(--linea); align-items: start;
}
.campo label { font-weight: 600; display: block; }
.campo p { margin: 4px 0 0; color: var(--tenue); font-size: 15px; max-width: 46ch; }
.barra-guardar {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  padding-top: 20px; border-top: 1px solid var(--linea);
}
.barra-guardar span { color: var(--espera); font-size: 15px; }

.tenue { color: var(--tenue); }

/* Killboard */
.kb-estado { margin: -16px 0 28px; color: var(--tenue); font-size: 15px; }
.kb-estado-error { color: var(--no); }
.kb-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.kb-evento {
  display: grid; grid-template-columns: 1fr 110px 150px 40px; gap: 16px; align-items: center;
  padding: 12px 8px 12px 14px; border-bottom: 1px solid var(--linea); border-left: 3px solid var(--ok);
}
.kb-muerte { border-left-color: var(--no); }
.kb-quien { min-width: 0; }
.kb-quien b { font-weight: 600; }
.kb-quien small { display: block; color: var(--tenue); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-fama { font: 700 18px/1 var(--titulos); color: var(--bronce-claro); text-align: right; font-variant-numeric: tabular-nums; }
.kb-fama small { display: block; margin-top: 4px; font: 500 13px/1 var(--cuerpo); color: var(--tenue); }
.kb-fecha { color: var(--tenue); font-size: 14px; }
.kb-evento a { color: var(--bronce-claro); font-size: 14px; }

/* Loot split */
.separado { margin-top: 44px; }
.filtro {
  width: 100%; max-width: 380px; margin-bottom: 14px; padding: 9px 12px; background: var(--capa-2); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 6px; font: inherit; font-size: 15px;
}
.filtro::placeholder, .retiro input::placeholder { color: var(--tenue); }
.saldos { border-top: 1px solid var(--linea); }
.saldo { border-bottom: 1px solid var(--linea); }
.saldo-cabeza {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 12px 8px; background: none; border: 0; color: inherit; text-align: left; cursor: pointer;
}
.saldo-cabeza:hover, .saldo-cabeza[aria-expanded="true"] { background: var(--capa); }
.saldo-nombre { font-weight: 600; }
.saldo-nombre small { display: block; font-weight: 400; color: var(--tenue); font-size: 13px; }
.saldo-monto { font: 700 20px/1 var(--titulos); font-variant-numeric: tabular-nums; }
.saldo-monto.cero { color: var(--tenue); }
.negativo { color: var(--no); }
.positivo { color: var(--ok); }
.saldo-detalle { padding: 6px 8px 18px; background: var(--capa); }
.retiro { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.retiro input {
  flex: 1 1 220px; min-width: 0; padding: 9px 12px; background: var(--capa-2); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 6px; font: inherit; font-size: 15px;
}
.movs { list-style: none; margin: 0; padding: 0; }
.movs li {
  display: grid; grid-template-columns: 1fr 130px 210px; gap: 12px; align-items: baseline;
  padding: 8px 4px; border-top: 1px solid var(--linea); font-size: 15px;
}
.movs li small { display: block; color: var(--tenue); font-size: 13px; }
.movs li > span:nth-child(2) { text-align: right; font-variant-numeric: tabular-nums; }
.movs li .tenue { font-size: 13px; text-align: right; }
.repartos { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.reparto {
  display: grid; grid-template-columns: 1fr 150px 250px; gap: 16px; align-items: center;
  padding: 12px 8px; border-bottom: 1px solid var(--linea);
}
.reparto small { display: block; color: var(--tenue); font-size: 14px; font-weight: 400; }
.reparto-nombre { font-weight: 600; }
.reparto-cifras { font: 700 18px/1.2 var(--titulos); text-align: right; font-variant-numeric: tabular-nums; }
.reparto-cifras small { font-family: var(--cuerpo); }
.reparto-accion { text-align: right; }
.reparto.anulado .reparto-nombre, .reparto.anulado .reparto-cifras { color: var(--tenue); }
.etiqueta-anulado { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 4px; background: var(--capa-2); color: var(--no); font: 500 13px/1.5 var(--cuerpo); }
.confirmar { font-size: 14px; color: var(--tenue); display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.boton.boton-chico { padding: 6px 12px; font-size: 14px; }
.boton.boton-peligro { background: var(--no); color: #1b0c09; }
.boton.boton-peligro:hover { background: #e47d70; }

/* Buscador de gremio */
.gremio-buscador { display: flex; flex-direction: column; gap: 10px; }
.gremio-busqueda { display: flex; gap: 8px; }
.gremio-busqueda input {
  flex: 1; min-width: 0; padding: 9px 12px; background: var(--capa-2); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 6px; font: inherit; font-size: 15px;
}
.gremio-busqueda input::placeholder { color: var(--tenue); }
.gremio-resultados { background: var(--capa); border-radius: 6px; }
.gremio-resultados:empty { display: none; }
.gremio-resultados .opcion small { color: var(--tenue); margin-left: auto; }
.gremio-resultados p { margin: 0; padding: 8px 10px; }

/* Botones */
.boton {
  display: inline-block; background: var(--bronce); color: #1b1407; border: 0; border-radius: 6px;
  padding: 10px 18px; font: 600 15px/1.2 var(--cuerpo); cursor: pointer; text-decoration: none;
}
.boton:hover { background: var(--bronce-claro); }
.boton[disabled] { opacity: .45; cursor: default; background: var(--bronce); }
.boton-suave { background: var(--capa-2); color: var(--texto); border: 1px solid var(--linea); }
.boton-suave:hover { background: var(--linea); }

/* Selector propio */
.selector { position: relative; width: 100%; }
.selector-boton {
  width: 100%; min-height: 42px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 6px 38px 6px 12px; background: var(--capa-2); border: 1px solid var(--linea); border-radius: 6px;
  color: var(--texto); text-align: left; cursor: pointer; position: relative;
}
.selector-boton:hover { border-color: var(--tenue); }
.selector-boton::after {
  content: ""; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--tenue); border-bottom: 2px solid var(--tenue); transform: translateY(-70%) rotate(45deg);
}
.selector-boton .vacio { color: var(--tenue); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 4px; background: var(--capa); font-size: 14px; }
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--tenue); }
.selector-menu {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--capa); border: 1px solid var(--linea); border-radius: 6px;
  box-shadow: 0 14px 34px rgba(5, 8, 12, .55); padding: 6px;
}
.selector-buscar {
  width: 100%; padding: 8px 10px; margin-bottom: 6px; background: var(--fondo); color: var(--texto);
  border: 1px solid var(--linea); border-radius: 4px; font: inherit; font-size: 15px;
}
.selector-buscar::placeholder { color: var(--tenue); }
.selector-lista { max-height: 264px; overflow: auto; }
.opcion {
  width: 100%; display: flex; gap: 9px; align-items: center; padding: 7px 10px; border-radius: 4px;
  background: none; border: 0; color: var(--texto); text-align: left; cursor: pointer; font-size: 15px;
}
.opcion:hover, .opcion:focus-visible { background: var(--capa-2); outline: none; }
.opcion[aria-selected="true"] { color: var(--bronce-claro); }
.opcion small { color: var(--no); font-size: 13px; }
.opcion .tilde { margin-left: auto; width: 1em; }
.opcion-grupo { padding: 10px 10px 4px; color: var(--tenue); font-size: 13px; }
.sin-resultados { padding: 8px 10px; margin: 0; color: var(--tenue); font-size: 15px; }

/* Pasos (número con − y +) */
.pasos { display: inline-flex; border: 1px solid var(--linea); border-radius: 6px; overflow: hidden; }
.pasos button { width: 42px; background: var(--capa-2); border: 0; color: var(--texto); font-size: 19px; cursor: pointer; }
.pasos button:hover:not([disabled]) { background: var(--linea); }
.pasos button[disabled] { color: var(--linea); cursor: default; }
.pasos output { min-width: 110px; text-align: center; padding: 9px 12px; background: var(--capa); font-variant-numeric: tabular-nums; }

/* Avisos flotantes */
.avisos { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 50; }
.aviso {
  padding: 11px 16px; border-radius: 6px; background: var(--capa-2); border-left: 3px solid var(--ok);
  box-shadow: 0 10px 26px rgba(5, 8, 12, .5); animation: entra .18s ease-out;
}
.aviso-error { border-left-color: var(--no); }
.aviso.saliendo { animation: sale .35s ease-in forwards; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
@keyframes sale { to { opacity: 0; transform: translateX(40px); } }

/* Entrar */
.pagina-entrar { display: grid; place-items: center; min-height: 100vh; }
.entrar { text-align: center; padding: 32px 24px; max-width: 380px; }
.entrar-escudo { width: 84px; height: 84px; }
.entrar h1 { font-size: 44px; margin: 14px 0 8px; }
.entrar p { color: var(--tenue); margin: 0 0 26px; }
.entrar .entrar-error { color: var(--no); }
.boton-discord { padding: 12px 26px; font-size: 16px; }

/* Pantallas chicas */
@media (max-width: 820px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; min-height: 100vh; }
  .lateral { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-right: 0; border-bottom: 1px solid var(--linea); }
  .gremio { display: none; }
  .menu { flex-direction: row; order: 3; width: 100%; overflow-x: auto; }
  .menu a { border-left: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; }
  .menu a.activo { border-bottom-color: var(--bronce); }
  .cuenta { margin: 0 0 0 auto; border: 0; padding: 0; }
  .cuenta span { display: none; }
  .contenido { padding: 26px 18px 60px; overflow: visible; }
  .hilo-cabeza { grid-template-columns: 1fr auto; }
  .hilo-cabeza .estado { grid-column: 1; grid-row: 2; }
  .campo { grid-template-columns: 1fr; gap: 12px; }
  .foto { grid-template-columns: 1fr auto; }
  .kb-evento { grid-template-columns: 1fr auto; }
  .movs li { grid-template-columns: 1fr auto; }
  .movs li .tenue { grid-column: 1 / -1; text-align: left; }
  .reparto { grid-template-columns: 1fr auto; }
  .reparto-accion { grid-column: 1 / -1; text-align: left; }
  .kb-fecha { grid-column: 1; }
  .foto-estado, .foto-motivo { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .aviso, .aviso.saliendo { animation: none; }
}