/* PartyAdmin V4 — base visual.
   Oscuro, denso, con acento neon. Pensado para tablas largas y para
   que entren 20 filas en pantalla sin scroll. */

:root {
  --acento-texto: #0b0f18;
  --fondo: #0b0f18;
  --fondo-2: #111827;
  --panel: #141c2b;
  --panel-alto: #1b2537;
  --borde: #22304a;
  --texto: #e7edf7;
  --texto-suave: #8fa1bd;
  /* El acento es blanco y no se cambia. Los colores que quedan son
     semanticos: dicen algo (rol, estado), no decoran. */
  --acento: #ffffff;
  --acento-tenue: rgba(255, 255, 255, 0.09);
  --acento-borde: rgba(255, 255, 255, 0.35);
  --acento-2: #4aa8ff;
  --ok: #35e0a1;
  --alerta: #ff5f6d;
  --dorado: #f2c14e;

  --rail: 56px;
  --radio: 8px;
  --sombra: 0 8px 28px rgba(0, 0, 0, 0.45);
  --fuente: Arial, "Helvetica Neue", Helvetica, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

/* Barras de scroll propias, nunca las blancas del navegador */
* { scrollbar-width: thin; scrollbar-color: var(--borde) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--borde);
  border-radius: 6px;
  border: 2px solid var(--fondo);
}
*::-webkit-scrollbar-thumb:hover { background: #2f4368; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Barra lateral de iconos ---------- */

.rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail);
  background: var(--fondo-2);
  border-right: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
  z-index: 30;
}

.rail-marca {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--panel-alto);
  color: var(--texto);
  font-weight: 700;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--borde);
  transition: border-color 0.12s ease;
}
.rail-marca:hover { border-color: var(--acento); }
.rail-marca img { width: 100%; height: 100%; object-fit: cover; }

.rail-boton {
  position: relative;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--radio);
  color: var(--texto-suave);
  transition: background 0.12s ease, color 0.12s ease;
}
.rail-boton:hover { background: var(--panel-alto); color: var(--texto); }
.rail-boton.activo { color: var(--acento); background: var(--acento-tenue); }
.rail-boton.activo::before {
  content: "";
  position: absolute; left: -10px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--acento);
}
.rail-boton svg { width: 19px; height: 19px; }
.rail-abajo { margin-top: auto; }

/* Descripcion propia al pasar el cursor, nada nativo */
.rail-boton::after, .rail-marca::after {
  content: attr(data-tip);
  position: absolute; left: calc(100% + 10px);
  white-space: nowrap;
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  color: var(--texto);
  padding: 5px 9px;
  border-radius: 6px;
  font-size: 12px;
  opacity: 0; pointer-events: none;
  transform: translateX(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  box-shadow: var(--sombra);
}
.rail-boton:hover::after, .rail-marca:hover::after { opacity: 1; transform: translateX(0); }

/* ---------- Descripciones al pasar el cursor ---------- */

[data-tip] { position: relative; }
[data-tip]:not(.rail-boton):not(.rail-marca)::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translate(-50%, 3px);
  width: max-content; max-width: 220px;
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  border-radius: 6px;
  padding: 6px 9px;
  color: var(--texto);
  font-size: 11px; font-weight: 400; line-height: 1.4;
  text-align: center; white-space: normal; letter-spacing: 0;
  text-transform: none;
  box-shadow: var(--sombra);
  opacity: 0; pointer-events: none;
  transition: opacity 0.12s ease 0.25s, transform 0.12s ease 0.25s;
  z-index: 45;
}
[data-tip]:hover::after { opacity: 1; transform: translate(-50%, 0); }
[data-tip]:disabled::after { display: none; }

/* En el header caen hacia abajo y no se cortan */
.acciones-header [data-tip]::after { top: calc(100% + 9px); }

/* ---------- Estructura ---------- */

.con-rail { padding-left: var(--rail); }

.encabezado {
  position: sticky; top: 0; z-index: 20;
  height: 52px;
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px;
  background: rgba(11, 15, 24, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--borde);
}
.encabezado .titulo { font-size: 15px; font-weight: 600; }
.encabezado .derecha { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.icono-gremio {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--panel-alto);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--texto-suave);
  overflow: hidden;
}
.icono-gremio img { width: 100%; height: 100%; object-fit: cover; }

.contenido { padding: 22px; }

/* ---------- Piezas ---------- */

.panel {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
}

.boton {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel-alto);
  color: var(--texto);
  font-family: var(--fuente); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.boton:hover { border-color: var(--acento); }
.boton.principal {
  background: var(--acento); border-color: var(--acento);
  color: var(--acento-texto, #0b0f18);
}
.boton.principal:hover { filter: brightness(1.1); }
.boton.discord { background: #5865f2; border-color: #5865f2; color: #fff; }
.boton:disabled { opacity: 0.45; cursor: not-allowed; }

.rango {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--borde); color: var(--texto-suave);
}
.rango.leader { color: var(--dorado); border-color: rgba(242, 193, 78, 0.45); }
.rango.officier { color: var(--acento-2); border-color: rgba(74, 168, 255, 0.45); }

.estado { font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.estado::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--texto-suave);
}
.estado.activa { color: var(--ok); }
.estado.activa::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.estado.vencida, .estado.sin_suscripcion { color: var(--alerta); }
.estado.vencida::before, .estado.sin_suscripcion::before { background: var(--alerta); }

.suave { color: var(--texto-suave); }
.centrado { display: grid; place-items: center; min-height: 100vh; padding: 24px; }

/* ---------- Landing ---------- */

.landing { max-width: 560px; text-align: center; }
.landing h1 { font-size: 34px; margin-bottom: 12px; letter-spacing: -0.02em; }
.landing p { color: var(--texto-suave); line-height: 1.6; margin: 0 0 22px; }
.landing .marca {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 26px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; font-size: 12px; color: var(--texto);
}
.landing .precio {
  margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--borde);
  color: var(--texto-suave); font-size: 13px;
}

/* ---------- Lista de gremios ---------- */

.gremios { width: 100%; max-width: 620px; }
.gremios h1 { font-size: 22px; margin-bottom: 4px; }
.gremios .ayuda { color: var(--texto-suave); margin: 0 0 20px; font-size: 13px; }

.tarjeta-gremio {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.tarjeta-gremio:hover { border-color: var(--acento); transform: translateY(-1px); }
.tarjeta-gremio .icono-gremio { width: 38px; height: 38px; border-radius: 9px; font-size: 14px; }
.tarjeta-gremio .nombre { font-weight: 600; }
.tarjeta-gremio .meta { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.tarjeta-gremio .flecha { margin-left: auto; color: var(--texto-suave); }

.vacio {
  padding: 34px; text-align: center;
  border: 1px dashed var(--borde); border-radius: var(--radio);
  color: var(--texto-suave); line-height: 1.6;
}

/* ---------- Muro de pago ---------- */

.pago { width: 100%; max-width: 460px; text-align: center; }
.pago .icono-gremio { width: 52px; height: 52px; border-radius: 12px; margin: 0 auto 16px; font-size: 20px; }
.pago h1 { font-size: 21px; margin-bottom: 10px; }
.pago p { color: var(--texto-suave); line-height: 1.6; margin: 0 0 20px; }
.pago .cuanto {
  font-size: 30px; font-weight: 700; margin: 18px 0 4px;
}
.pago .cuanto span { font-size: 14px; font-weight: 400; color: var(--texto-suave); }

/* ---------- Pendiente ---------- */

.pendiente { padding: 60px 20px; text-align: center; color: var(--texto-suave); }
.pendiente h2 { color: var(--texto); font-size: 18px; margin-bottom: 8px; }

/* ---------- Avisos flotantes ---------- */

.avisos {
  position: fixed; right: 18px; bottom: 18px;
  display: flex; flex-direction: column; gap: 8px; z-index: 60;
}
.aviso {
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: 11px 15px; font-size: 13px;
  box-shadow: var(--sombra);
  animation: entra-aviso 0.2s ease;
}
.aviso.error { border-left-color: var(--alerta); }
.aviso.saliendo { animation: sale-aviso 0.3s ease forwards; }

@keyframes entra-aviso {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes sale-aviso {
  to { opacity: 0; transform: translateX(30px); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@media (max-width: 640px) {
  .contenido { padding: 14px; }
  .encabezado { padding: 0 12px; }
}

/* ---------- Panel de administracion ---------- */

.admin { max-width: 1080px; margin: 0 auto; padding: 26px 20px 40px; }

.admin-cabecera {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.admin-cabecera h1 { font-size: 21px; }
.admin-cabecera p { margin: 4px 0 0; font-size: 13px; }
.admin-cabecera .buscador { margin-left: auto; }

.buscador {
  height: 34px; width: 240px; padding: 0 12px;
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio);
  font-family: var(--fuente); font-size: 13px;
}
.buscador:focus { outline: none; border-color: var(--acento); }
.buscador::placeholder { color: var(--texto-suave); }

.tabla-admin {
  width: 100%; border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}
.tabla-admin th {
  text-align: left; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texto-suave);
  padding: 11px 14px;
  background: var(--fondo-2);
  border-bottom: 1px solid var(--borde);
}
.tabla-admin td { padding: 11px 14px; border-bottom: 1px solid var(--borde); }
.tabla-admin tr:last-child td { border-bottom: none; }
.tabla-admin tbody tr:hover { background: var(--panel-alto); }
.tabla-admin .derecha { text-align: right; }

.celda-gremio { display: flex; align-items: center; gap: 11px; }
.celda-gremio .nombre { font-weight: 600; }
.chico { font-size: 12px; }

.acciones { display: inline-flex; gap: 5px; }
.boton.chico { height: 27px; padding: 0 10px; font-size: 12px; }
.boton.peligro { color: var(--alerta); }
.boton.peligro:hover { border-color: var(--alerta); }

@media (max-width: 760px) {
  .tabla-admin thead { display: none; }
  .tabla-admin tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--borde); }
  .tabla-admin td { display: flex; justify-content: space-between; border: none; padding: 5px 14px; }
  .tabla-admin .derecha { text-align: left; }
  .admin-cabecera .buscador { margin-left: 0; width: 100%; }
}

/* ---------- Editor de composiciones ---------- */

.builds-barra {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.builds-barra select { height: 34px; }

.tabla-envoltura {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: auto;
  background: var(--panel);
}

.tabla-compo { width: 100%; border-collapse: collapse; white-space: nowrap; }
.tabla-compo th {
  position: sticky; top: 0; z-index: 2;
  background: var(--fondo-2);
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--texto-suave);
  text-align: left;
  padding: 9px 8px;
  border-bottom: 1px solid var(--borde);
}
.tabla-compo td { padding: 4px 8px; border-bottom: 1px solid var(--borde); }
.tabla-compo tr:last-child td { border-bottom: none; }
.tabla-compo tbody tr:hover { background: var(--panel-alto); }

.tabla-compo .num {
  width: 46px; color: var(--texto-suave); font-size: 12px;
  position: relative; padding-left: 14px;
}
.tabla-compo .num .barra {
  position: absolute; left: 5px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 2px; background: var(--texto-suave);
}
.barra.caller { background: #a78bfa; }
.barra.tanque { background: var(--acento-2); }
.barra.dps { background: var(--alerta); }
.barra.healer { background: var(--ok); }
.barra.support { background: var(--dorado); }

.tabla-compo .rol { min-width: 200px; }
.tabla-compo .tipo { width: 110px; }
.tabla-compo .equipo { width: 46px; text-align: center; padding: 4px; }
.tabla-compo .acciones-rol { width: 62px; text-align: right; }

.campo-rol {
  width: 100%; height: 30px; padding: 0 8px;
  background: transparent; color: var(--texto);
  border: 1px solid transparent; border-radius: 6px;
  font-family: var(--fuente); font-size: 13px; font-weight: 600;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.campo-rol:hover:not(:disabled) { border-color: var(--borde); }
.campo-rol:focus { outline: none; border-color: var(--acento); background: var(--fondo-2); }

.campo-tipo {
  height: 26px; padding: 0 6px;
  background: transparent; border: 1px solid transparent; border-radius: 6px;
  font-family: var(--fuente); font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  color: var(--texto-suave);
}
.campo-tipo:hover:not(:disabled) { border-color: var(--borde); }
.campo-tipo.caller { color: #a78bfa; }
.campo-tipo.tanque { color: var(--acento-2); }
.campo-tipo.dps { color: var(--alerta); }
.campo-tipo.healer { color: var(--ok); }
.campo-tipo.support { color: var(--dorado); }

.ranura {
  position: relative;
  width: 46px; height: 46px; padding: 0;
  display: grid; place-items: center;
  background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 6px;
  cursor: pointer; color: var(--texto-suave);
  transition: border-color 0.12s ease;
}
.ranura:hover { border-color: var(--acento); }
.ranura img { width: 42px; height: 42px; }
.ranura.vacia { font-size: 16px; line-height: 1; }
.ranura .punto {
  position: absolute; right: 2px; bottom: 2px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 5px var(--acento);
}

.icono {
  width: 24px; height: 24px; padding: 0;
  background: transparent; border: none; border-radius: 5px;
  color: var(--texto-suave); cursor: pointer; font-size: 14px;
}
.icono:hover { background: var(--borde); color: var(--texto); }

.agregar-rol { margin-top: 12px; }

/* ---------- Ventanas ---------- */

.cortina {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 7, 13, 0.72);
  display: grid; place-items: center;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.cortina[hidden] { display: none; }

.ventana-items, .ventana-item {
  position: relative;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}
.ventana-items { max-width: 620px; padding: 18px; }
.ventana-item { max-width: 480px; padding: 20px; }

.ventana-items header { display: flex; align-items: center; margin-bottom: 12px; }
.ventana-items header h3 { font-size: 16px; }
.ventana-items .buscador { width: 100%; margin-bottom: 12px; }

.cerrar {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--texto-suave); font-size: 20px; line-height: 1; cursor: pointer;
}
.cerrar:hover { background: var(--panel-alto); color: var(--texto); }

.rejilla-items {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
  gap: 6px; max-height: 54vh; overflow-y: auto;
}
.item-opcion {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 8px;
  color: var(--texto); cursor: pointer;
  font-family: var(--fuente); font-size: 10px; line-height: 1.25; text-align: center;
}
.item-opcion:hover { border-color: var(--acento); }
.item-opcion img { width: 52px; height: 52px; }

/* Ventana de item, al estilo de la del juego */

.item-cabecera { display: flex; gap: 14px; margin-bottom: 16px; }
.item-cabecera h3 { font-size: 17px; margin-bottom: 3px; }

.item-retrato {
  position: relative; flex-shrink: 0;
  width: 90px; height: 90px;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(74,168,255,0.18), transparent 70%), var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 10px;
}
.item-retrato img { width: 78px; height: 78px; }
.item-tier {
  position: absolute; left: 4px; top: 4px;
  font-size: 10px; font-weight: 700; color: var(--dorado);
}

.item-controles { display: flex; gap: 12px; margin-top: 10px; }
.item-controles select {
  display: block; margin-top: 3px; height: 28px;
  background: var(--fondo-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 6px;
  font-family: var(--fuente); font-size: 12px; padding: 0 6px;
}

.item-hechizos {
  border-top: 1px solid var(--borde);
  padding-top: 14px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: 46vh; overflow-y: auto;
}
.fila-hechizos { display: flex; align-items: center; gap: 10px; }
.etiqueta-hueco {
  width: 62px; flex-shrink: 0;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--texto-suave);
}
.circulos { display: flex; flex-wrap: wrap; gap: 6px; }

.hechizo {
  width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center;
  background: var(--fondo-2);
  border: 2px solid var(--borde); border-radius: 50%;
  cursor: pointer; overflow: hidden;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.hechizo img { width: 44px; height: 44px; }
.hechizo:hover { border-color: var(--texto-suave); transform: translateY(-1px); }
.hechizo.elegido {
  border-color: var(--dorado);
  box-shadow: 0 0 0 1px var(--dorado), 0 0 12px rgba(242, 193, 78, 0.4);
}

.item-pie {
  display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid var(--borde);
  margin-top: 16px; padding-top: 14px;
}

@media (max-width: 640px) {
  .item-cabecera { flex-direction: column; }
  .etiqueta-hueco { width: 52px; }
}

/* ---------- Tablero de eventos ---------- */

.tablero { display: flex; gap: 14px; align-items: flex-start; }

.parties {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-content: flex-start;
  padding-bottom: 8px;
  flex: 1; min-width: 0;
}

.party {
  flex: 0 0 auto;
  width: 430px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  /* Las reglas de abajo miden el ancho de la party, no el de la
     ventana: asi se adapta igual al hacer zoom o al partir en tres. */
  container-type: inline-size;
}

.party-cabecera {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--fondo-2);
  border-bottom: 2px solid var(--acento);
}
.campo-party {
  flex: 1; height: 28px; padding: 0 8px;
  background: transparent; color: var(--texto);
  border: 1px solid transparent; border-radius: 6px;
  font-family: var(--fuente); font-size: 13px; font-weight: 600;
}
.campo-party:hover:not(:disabled) { border-color: var(--borde); }
.campo-party:focus { outline: none; border-color: var(--acento); background: var(--panel); }

.contador {
  font-size: 11px; font-weight: 700; color: var(--texto-suave);
  background: var(--panel-alto);
  border-radius: 999px; padding: 3px 9px;
}

.tabla-party { width: 100%; border-collapse: collapse; }
.tabla-party { table-layout: fixed; }

/* La fila mide siempre lo mismo. height en una celda es solo un minimo,
   asi que la altura se fija en el contenido: cada celda tiene su caja
   de 28 pixeles y lo que va adentro no puede estirarla. */
.tabla-party td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--borde);
  vertical-align: middle;
  overflow: hidden;
  line-height: 0;
}
.tabla-party td > * { vertical-align: middle; }
.tabla-party .num,
.tabla-party .rol-hueco { line-height: 28px; }
.tabla-party .equipo-mini,
.tabla-party .hechizos-mini,
.tabla-party .jugador {
  height: 34px;
}
.tabla-party .mini { flex: none; }
.tabla-party tr:last-child td { border-bottom: none; }
.tabla-party tr:hover { background: var(--panel-alto); }
.tabla-party .num { width: 30px; color: var(--texto-suave); font-size: 11px; text-align: right; }
.tabla-party .equipo-mini { width: 236px; }
.tabla-party .hechizos-mini { width: 196px; }
/* Columnas de ancho fijo: la tabla nunca se pasa del ancho de la party,
   asi que la ultima columna no se puede cortar. */
.tabla-party { table-layout: fixed; width: 100%; }
.tabla-party .jugador { white-space: nowrap; width: 178px; }

.rol-hueco {
  width: 128px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--texto-suave);
}
.rol-hueco.caller { color: #a78bfa; }
.rol-hueco.tanque { color: var(--acento-2); }
.rol-hueco.dps { color: var(--alerta); }
.rol-hueco.healer { color: var(--ok); }
.rol-hueco.support { color: var(--dorado); }

/* El nombre se queda con el espacio sobrante; set, habilidades,
   jugador y X quedan pegados a la derecha y siempre en el mismo lugar. */
.tabla-party .rol-hueco {
  width: auto;
  max-width: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.equipo-mini {
  white-space: nowrap;
  text-align: right;
  width: 232px;
  font-size: 0;
}
.equipo-mini .mini { margin-right: 3px; }
.equipo-mini .mini:last-child { margin-right: 0; }
.mini {
  display: inline-block; width: 25px; height: 25px;
  vertical-align: middle; margin-right: 1px;
}
.mini img { width: 25px; height: 25px; }
.mini.vacia { visibility: hidden; }
/* En el editor de builds el hueco vacio si se ve, que ahi se toca */
.tabla-compo .mini.vacia {
  visibility: visible;
  border: 1px solid var(--borde); border-radius: 4px;
  width: 23px; height: 23px; opacity: 0.4;
}

.jugador { width: 170px; }
.celda-jugador { display: flex; align-items: center; gap: 4px; }
.celda-jugador .chapa { flex: 1; min-width: 0; }
.icono.sacar { flex-shrink: 0; }
.icono.invisible { visibility: hidden; pointer-events: none; }
.chapa {
  width: 100%; height: 26px; padding: 0 8px;
  display: flex; align-items: center; gap: 6px;
  background: transparent; color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: 5px;
  font-family: var(--fuente); font-size: 12px;
  cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chapa:hover:not(:disabled) { border-color: var(--acento); }
.chapa.puesto { color: var(--texto); font-weight: 600; }
/* El marco dice si esta en coms: verde adentro, rojo si se fue. */
.chapa.puesto.en-voz {
  border-color: var(--ok);
  background: rgba(53, 224, 161, 0.08);
}
.chapa.puesto.fuera {
  border-color: var(--alerta);
  background: rgba(255, 95, 109, 0.09);
}
.chapa:disabled { cursor: default; }

.punto-voz {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok); box-shadow: 0 0 6px var(--ok);
}

/* Columna lateral */

.panel-voz {
  flex: 0 0 260px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px;
  position: sticky; top: 66px;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
}
.voz-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.voz-cabecera h3 { font-size: 15px; flex: 1; }
.panel-voz .buscador { width: 100%; margin-top: 8px; }
.lista-voz { margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }

.persona {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 8px;
  background: var(--fondo-2);
  border: 1px solid transparent; border-radius: 6px;
  font-size: 12px;
}
.persona .nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona.ubicada { opacity: 0.45; }
.persona.elegible { cursor: pointer; }
.persona.elegible:hover { border-color: var(--acento); }

.marca {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--texto-suave);
}
.marca.confirmado { background: var(--ok); box-shadow: 0 0 6px var(--ok); }

@media (max-width: 900px) {
  .tablero { flex-direction: column; }
  .panel-voz { flex: 1 1 auto; width: 100%; position: static; max-height: none; }
  .parties .party { width: 100%; min-width: 0; }
}

/* ---------- Ajustes ---------- */

.ajustes { max-width: 720px; }

.lista-roles { display: flex; flex-direction: column; gap: 4px; }

.agregar-rango { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.agregar-rango select {
  height: 32px; padding: 0 9px; flex: 1; min-width: 150px;
  background: var(--fondo-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 7px;
  font-family: var(--fuente); font-size: 13px;
}
.agregar-rango select:focus { outline: none; border-color: var(--acento); }

.bloque-rangos { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-rango {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 9px;
  background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.chip-rango i { width: 8px; height: 8px; border-radius: 50%; }
.chip-rango b {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--texto-suave);
}
.chip-rango.officier b { color: var(--acento-2); }
.chip-rango button {
  width: 16px; height: 16px; padding: 0;
  background: transparent; border: none; border-radius: 4px;
  color: var(--texto-suave); font-size: 13px; line-height: 1; cursor: pointer;
}
.chip-rango button:hover { background: var(--borde); color: var(--alerta); }
.fila-rol {
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px;
  background: var(--fondo-2);
  border: 1px solid transparent; border-radius: 6px;
}
.fila-rol:hover { border-color: var(--borde); }
.chip-rol { flex: 1; font-size: 13px; font-weight: 600; }
.fila-rol select {
  height: 28px; padding: 0 8px;
  background: var(--panel); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 6px;
  font-family: var(--fuente); font-size: 12px;
}

.agregar-lider { position: relative; margin-top: 12px; }
.agregar-lider .buscador { width: 100%; }
#resultados-miembros {
  position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 4px; padding: 4px;
  background: var(--panel-alto);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra);
  max-height: 240px; overflow-y: auto;
  z-index: 5;
}

/* ---------- Pestanas de voz y anotados ---------- */

.pestanas {
  display: flex; gap: 6px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 10px;
}
.pestana {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 32px; padding: 0 10px;
  background: transparent;
  border: 1px solid transparent; border-radius: 7px;
  color: var(--texto-suave);
  font-family: var(--fuente); font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.pestana:hover { color: var(--texto); }
.pestana.activa {
  background: rgba(242, 193, 78, 0.1);
  border-color: rgba(242, 193, 78, 0.45);
  color: var(--dorado);
}
.pestana .contador { padding: 2px 7px; font-size: 10px; }
.pestana.activa .contador { background: rgba(242, 193, 78, 0.18); color: var(--dorado); }

#hoja-voz .buscador { margin-bottom: 8px; }
#hoja-voz #sin-ubicar { margin-bottom: 4px; }

/* ---------- Modos de vista del tablero ---------- */

.modos {
  display: flex; gap: 3px;
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 3px;
}
.modo {
  height: 28px; padding: 0 12px;
  background: transparent;
  border: 1px solid transparent; border-radius: 6px;
  color: var(--texto-suave);
  font-family: var(--fuente); font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.modo:hover { color: var(--texto); }
.modo.activa {
  background: var(--acento-tenue);
  border-color: var(--acento-borde);
  color: var(--acento);
}

/* Compacto: dos por fila. Las demas quedan abajo. */
.parties.modo-compacto .party { width: calc(50% - 6px); min-width: 300px; }
.parties.modo-compacto .hechizos-mini { display: none; }

/* Completo: una por fila, con sets y habilidades */
.parties.modo-completo .party { width: 100%; }

/* Solo rol: tres por fila, nombre, arma y persona */
.parties.modo-rol .party { width: calc(33.333% - 8px); min-width: 240px; }
.parties.modo-rol .hechizos-mini { display: none; }
.parties.modo-rol .equipo-mini .mini:not(.arma) { display: none; }
.parties.modo-rol .rol-hueco { max-width: none; }

/* Las seis habilidades ocupan siempre el mismo bloque, pegado a la
   columna del jugador. Asi no se corren segun cuantas tenga cargadas
   cada rol y todas las filas quedan alineadas. */
.hechizos-mini {
  white-space: nowrap;
  width: 192px;
  text-align: right;
  font-size: 0;
}
.circulo:last-child { margin-right: 0; }
/* Todo lo del circulo vive adentro de sus 26 pixeles: si la letra
   sobresale, empuja la fila y las alturas dejan de coincidir. */
.circulo {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  /* Con minimo y maximo ademas del alto y ancho, ninguna otra regla ni
     el contenido pueden estirarlo. */
  width: 26px; min-width: 26px; max-width: 26px;
  height: 26px; min-height: 26px; max-height: 26px;
  flex: 0 0 26px;
  margin-right: 5px; vertical-align: middle;
  border: 1px solid var(--borde); border-radius: 50%;
  overflow: hidden;
}
.circulo img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* La tecla con la que se llama, como en el juego */
.circulo i {
  position: absolute; right: 0; bottom: 0;
  font-style: normal; font-size: 8px; font-weight: 700;
  line-height: 1; color: var(--texto);
  background: rgba(8, 12, 20, 0.75);
  border-radius: 4px 0 0 0;
  padding: 1px 2px;
}
/* Ojo con el nombre: la clase .vacio ya existe para las cajas de "no
   hay nada", con 34 pixeles de relleno. Usarla aca inflaba el circulo
   hasta ocupar la fila entera. Por eso esta se llama distinto. */
.circulo.sin-hechizo {
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.03);
  opacity: 1;
}
/* Sin habilidad, la letra va centrada y no hace falta la chapita */
.circulo.sin-hechizo i {
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  text-align: center;
  background: transparent;
  border-radius: 0;
  font-size: 10px; line-height: 1; padding: 0;
  color: var(--texto-suave);
  opacity: 0.8;
}

/* Aviso de que dejo el canal de voz */
.flecha-fuera {
  color: var(--alerta);
  font-size: 12px; line-height: 1;
  flex-shrink: 0;
}

/* Arrastrar y soltar */
.chapa.puesto[draggable="true"], .persona[draggable="true"] { cursor: grab; }
.arrastrando { opacity: 0.4; }
.tabla-party tr.encima {
  background: var(--acento-tenue);
  box-shadow: inset 0 0 0 1px var(--acento);
}

/* Anotados en una sola linea */
.persona.compacta { padding: 5px 8px; }
.persona.compacta .nombre {
  font-size: 12px;
  max-width: 118px;
}
.persona.compacta .canal { max-width: 70px; overflow: hidden; text-overflow: ellipsis; }
.armas { display: flex; gap: 2px; flex-shrink: 0; }
.armas .mini { width: 24px; height: 24px; }
.armas .mini img { width: 24px; height: 24px; }
.armas .mini.vacia { width: 22px; height: 22px; }

/* ---------- Nota al caller ---------- */

.lapiz {
  position: relative;
  flex-shrink: 0;
  color: var(--dorado);
  font-size: 12px; line-height: 1;
  cursor: help;
}
.lapiz::after {
  content: attr(data-nota);
  position: absolute; bottom: calc(100% + 7px); right: -6px;
  width: max-content; max-width: 230px;
  background: var(--panel-alto);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--dorado);
  border-radius: 6px;
  padding: 7px 10px;
  color: var(--texto);
  font-size: 12px; line-height: 1.45;
  text-align: left; white-space: normal;
  box-shadow: var(--sombra);
  opacity: 0; pointer-events: none;
  transform: translateY(3px);
  transition: opacity 0.12s ease, transform 0.12s ease;
  z-index: 40;
}
.lapiz:hover::after { opacity: 1; transform: translateY(0); }

.area-codigo {
  width: 100%; height: auto; padding: 10px 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 11px; line-height: 1.5;
  resize: vertical;
}

/* ---------- Acciones en el header ---------- */

.acciones-header {
  display: flex; align-items: center; gap: 7px; flex-wrap: nowrap;
  flex: 1; min-width: 0; margin-left: 10px;
}
/* Los modos quedan siempre pegados al borde derecho */
.modos.a-la-derecha { margin-left: auto; flex-shrink: 0; }
.acciones-header::-webkit-scrollbar { height: 0; }
.boton.chico, .buscador.chico { height: 28px; font-size: 12px; }
.buscador.chico { padding: 0 8px; }

/* ---------- Formulario de evento ---------- */

.ventana-form {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  box-shadow: var(--sombra);
}
.ventana-form header {
  display: flex; align-items: center;
  padding: 16px 18px; border-bottom: 1px solid var(--borde);
}
.ventana-form header h3 { font-size: 16px; }

.form-cuerpo { padding: 16px 18px; overflow-y: auto; }
.form-pie {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 13px 18px; border-top: 1px solid var(--borde);
}

.campo { display: block; margin-bottom: 14px; }
.campo > span {
  display: block; margin-bottom: 5px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--texto-suave);
}
.campo small { display: block; margin-top: 5px; font-size: 11px; color: var(--texto-suave); }
.campo input[type="text"], .campo input[type="date"], .campo textarea, .campo select {
  width: 100%; padding: 9px 11px;
  background: var(--fondo-2); color: var(--texto);
  border: 1px solid var(--borde); border-radius: 7px;
  font-family: var(--fuente); font-size: 13px;
}
.campo textarea { resize: vertical; line-height: 1.5; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: none; border-color: var(--acento);
}
.campo input::placeholder, .campo textarea::placeholder { color: #5d6d87; }

.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.marca-campo {
  display: flex; align-items: flex-start; gap: 9px;
  margin-bottom: 12px; font-size: 13px; line-height: 1.45;
  color: var(--texto-suave);
}
.marca-campo input { margin-top: 2px; accent-color: var(--acento); }

/* Reloj UTC */
.reloj { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rueda {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 56px;
  background: var(--panel);
  border: 1px solid var(--borde); border-radius: 8px;
  padding: 0 4px;
}
.rueda:hover { border-color: var(--acento-borde); }
.rueda .valor {
  font-size: 19px; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  min-width: 34px; text-align: center;
}
.paso {
  width: 26px; height: 16px; padding: 0;
  background: transparent; border: none;
  color: var(--texto-suave); font-size: 9px; line-height: 1; cursor: pointer;
}
.paso:hover { color: var(--acento); }
.dos-puntos { font-size: 19px; font-weight: 700; color: var(--texto-suave); }

.minutos-rapidos { display: flex; gap: 4px; margin-left: 6px; }
.minutos-rapidos button {
  height: 30px; padding: 0 10px;
  background: var(--fondo-2); color: var(--texto-suave);
  border: 1px solid var(--borde); border-radius: 6px;
  font-family: var(--fuente); font-size: 12px; cursor: pointer;
}
.minutos-rapidos button:hover { color: var(--texto); }
.minutos-rapidos button.activa {
  background: var(--acento-tenue);
  border-color: var(--acento-borde);
  color: var(--acento);
}

@media (max-width: 560px) {
  .campo-par { grid-template-columns: 1fr; }
}

.resto-items {
  grid-column: 1 / -1;
  padding: 10px; text-align: center;
  font-size: 11px; color: var(--texto-suave);
}

/* Corte entre parties dentro de una composicion */
.tabla-compo tr.corte-party td {
  padding: 7px 10px;
  background: var(--fondo-2);
  border-top: 1px solid var(--acento-borde);
  border-bottom: 1px solid var(--borde);
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto);
}
.tabla-compo tr.corte-party:hover td { background: var(--fondo-2); }

/* Hueco con build cambiada dentro del evento */
.tabla-party tr.build-propia .equipo-mini { position: relative; }
.tabla-party tr.build-propia .equipo-mini::after {
  content: ""; position: absolute; left: -4px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 2px;
  background: var(--dorado);
}
.tabla-party .mini[data-editar-item] { cursor: pointer; border-radius: 4px; }
.tabla-party .mini[data-editar-item]:hover { outline: 1px solid var(--acento); }

/* ---------- Dialogos propios ---------- */

.ventana-dialogo {
  width: 100%; max-width: 420px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 20px;
  box-shadow: var(--sombra);
}
.ventana-dialogo h3 { font-size: 16px; margin-bottom: 8px; }
.ventana-dialogo p { margin: 0 0 14px; line-height: 1.5; }
.ventana-dialogo .buscador { width: 100%; }
.ventana-dialogo textarea.buscador { height: auto; }
.dialogo-pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* Orden de la fila: rol · set · habilidades · usuario · X */
.tabla-party .hechizos-mini { text-align: left; padding: 3px 8px; }

/* Nombre de rol clickeable para cambiarlo */
.rol-hueco.cambiable { cursor: pointer; }
.rol-hueco.cambiable:hover { text-decoration: underline dotted; }

/* Huecos que la persona marcada eligio */
.tabla-party tr.sugerido {
  background: rgba(53, 224, 161, 0.14);
  box-shadow: inset 2px 0 0 var(--ok);
}
.persona.marcada {
  border-color: var(--ok);
  background: rgba(53, 224, 161, 0.08);
}

/* Lista para elegir dentro de un dialogo */
.lista-elegir {
  display: flex; flex-direction: column; gap: 3px;
  max-height: 46vh; overflow-y: auto; min-height: 0; margin-top: 10px;
}
.opcion-lista {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  background: var(--fondo-2); color: var(--texto);
  border: 1px solid transparent; border-radius: 7px;
  font-family: var(--fuente); font-size: 13px; text-align: left;
  cursor: pointer;
}
.opcion-lista:hover { border-color: var(--acento); }
.opcion-lista .nombre { flex: 1; font-weight: 600; }

/* Reordenar roles arrastrando */
.tabla-compo tr[draggable="true"] { cursor: grab; }
.tabla-compo tr.encima { box-shadow: inset 0 2px 0 var(--acento); }

/* ==================================================================
   Paginas publicas: landing, ayuda, terminos, privacidad
   ================================================================== */

.publica { max-width: 940px; margin: 0 auto; padding: 0 20px 40px; }

.publica-barra {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 0; margin-bottom: 12px;
}
.marca-publica {
  font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  font-size: 13px; color: var(--texto);
}
.publica-barra nav { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.publica-barra nav a { font-size: 13px; color: var(--texto-suave); }
.publica-barra nav a:hover { color: var(--texto); }
.publica-barra nav a.boton { color: var(--texto); }

.heroe { padding: 40px 0 34px; max-width: 640px; }
.heroe h1 {
  font-size: 40px; line-height: 1.12; letter-spacing: -0.025em;
  margin-bottom: 16px;
}
.heroe p { color: var(--texto-suave); line-height: 1.65; font-size: 15px; margin: 0 0 24px; }
.heroe-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.heroe .boton { height: 40px; padding: 0 18px; font-size: 14px; }

.tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px; margin: 20px 0 44px;
}
.tarjetas article {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
}
.tarjetas h3 { font-size: 14px; margin-bottom: 7px; color: var(--texto); }
.tarjetas p { margin: 0; color: var(--texto-suave); font-size: 13px; line-height: 1.6; }

.pasos { margin-bottom: 46px; }
.pasos h2 { font-size: 22px; margin-bottom: 16px; }
.pasos ol { margin: 0 0 22px; padding-left: 20px; color: var(--texto-suave); line-height: 2; }
.pasos li { padding-left: 4px; }

.texto { max-width: 720px; padding-bottom: 20px; }
.texto h1 { font-size: 30px; margin-bottom: 6px; letter-spacing: -0.02em; }
.texto h2 {
  font-size: 19px; margin: 32px 0 10px;
  padding-top: 20px; border-top: 1px solid var(--borde);
}
.texto h3 { font-size: 14px; margin: 20px 0 6px; color: var(--texto); }
.texto p, .texto li { color: var(--texto-suave); line-height: 1.7; font-size: 14px; }
.texto p { margin: 0 0 12px; }
.texto ul { margin: 0 0 14px; padding-left: 20px; }
.texto li { margin-bottom: 6px; }
.texto a { color: var(--texto); text-decoration: underline; text-underline-offset: 2px; }
.texto code {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 4px; padding: 1px 5px; font-size: 12px;
}

.pie-publico {
  border-top: 1px solid var(--borde);
  padding: 24px 0 10px;
  display: flex; flex-direction: column; gap: 12px;
}
.pie-publico div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pie-publico nav { display: flex; gap: 16px; flex-wrap: wrap; }
.pie-publico nav a { font-size: 13px; color: var(--texto-suave); }
.pie-publico nav a:hover { color: var(--texto); }
.pie-publico p { margin: 0; max-width: 560px; line-height: 1.6; }

/* ==================================================================
   Telefono y tablet
   ================================================================== */

/* Tablet: la barra lateral se mantiene, el resto se acomoda */
@media (max-width: 1024px) {
  .party { width: 100%; }
  .parties.modo-compacto .party,
  .parties.modo-rol .party { width: 100%; min-width: 0; }
  .panel-voz { flex: 0 0 230px; }
  .heroe h1 { font-size: 32px; }
}

/* Telefono: la barra de iconos pasa abajo */
@media (max-width: 760px) {
  .rail {
    top: auto; right: 0; bottom: 0; left: 0;
    width: auto; height: 56px;
    flex-direction: row; justify-content: space-around;
    padding: 0 6px;
    border-right: none; border-top: 1px solid var(--borde);
    /* Encima del teclado y del borde inferior del telefono */
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .rail-marca { display: none; }
  .rail-boton { width: 44px; height: 44px; }
  .rail-boton.activo::before {
    left: 8px; right: 8px; top: -6px; bottom: auto;
    width: auto; height: 3px; border-radius: 0 0 3px 3px;
  }
  /* La descripcion sale hacia arriba, que abajo no hay lugar */
  .rail-boton::after {
    left: 50%; bottom: calc(100% + 8px);
    transform: translate(-50%, 4px);
  }
  .rail-boton:hover::after { transform: translate(-50%, 0); }
  .rail-abajo { margin-top: 0; }

  .con-rail { padding-left: 0; padding-bottom: 62px; }

  /* El encabezado se apoya en el borde de arriba del telefono y en la
     muesca, si la hay, y deja la fila de botones abajo del titulo. */
  .encabezado {
    position: sticky; top: 0;
    height: auto; flex-wrap: wrap;
    padding: 10px 14px 8px;
    padding-top: calc(10px + env(safe-area-inset-top, 0px));
    gap: 8px 10px;
    row-gap: 8px;
  }
  .encabezado .titulo {
    font-size: 15px; font-weight: 600;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .encabezado .rango { flex-shrink: 0; }
  .encabezado .derecha { display: none; }
  .acciones-header {
    order: 3; width: 100%; margin-left: 0;
    overflow-x: auto; padding: 2px 0 4px;
    -webkit-overflow-scrolling: touch;
  }
  .acciones-header .boton.chico,
  .acciones-header .buscador.chico,
  .acciones-header .modo { height: 32px; flex-shrink: 0; }
  .acciones-header::-webkit-scrollbar { height: 0; }
  .modos.a-la-derecha { margin-left: 0; }
  /* Las descripciones estorban con el dedo */
  [data-tip]:not(.rail-boton)::after { display: none; }

  .contenido { padding: 12px; }

  /* Tablero: parties completas y el panel de gente abajo */
  .party { width: 100%; }
  .tabla-party .equipo-mini,
  .tabla-party .hechizos-mini { display: none; }
  .parties.modo-completo .hechizos-mini { display: none; }
  .rol-hueco { width: auto; white-space: normal; }
  .jugador { width: 42%; }
  .panel-voz { position: static; max-height: none; }

  /* Builds: la tabla se desliza y el rol queda fijo a la izquierda */
  .tabla-compo .rol { min-width: 150px; }
  .tabla-compo th.num, .tabla-compo td.num { position: sticky; left: 0; z-index: 3; background: var(--panel); }
  .tabla-compo tbody tr:hover td.num { background: var(--panel-alto); }

  /* Ventanas al ancho completo */
  .cortina { padding: 10px; align-items: flex-end; }
  .ventana-items, .ventana-item, .ventana-form, .ventana-dialogo { max-width: 100%; }
  .ventana-form { max-height: 92vh; }
  .rejilla-items { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
  .item-pie, .dialogo-pie, .form-pie { flex-wrap: wrap; }
  .item-pie .boton, .form-pie .boton { flex: 1; justify-content: center; }

  /* Formularios comodos de tocar */
  .campo input, .campo textarea, .campo select { font-size: 16px; padding: 11px; }
  .rueda .valor { font-size: 22px; min-width: 40px; }
  .paso { height: 22px; }

  .heroe { padding: 20px 0; }
  .heroe h1 { font-size: 27px; }
  .heroe .boton { width: 100%; justify-content: center; }
  .publica { padding: 0 14px 30px; }
  .publica-barra nav { gap: 12px; }
  .texto h1 { font-size: 24px; }

  .admin { padding: 14px 0 30px; }
}

/* Pantallas chicas de verdad */
@media (max-width: 380px) {
  .encabezado .titulo { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pestana { font-size: 11px; padding: 0 6px; }
}

/* ---------- Pie, en todas las pantallas ---------- */

.pie {
  display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap;
  margin-top: 28px; padding: 16px 0 4px;
  border-top: 1px solid var(--borde);
  font-size: 12px;
}
.pie-marca {
  font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; font-size: 11px;
}
.pie nav { display: flex; gap: 16px; flex-wrap: wrap; }
.pie nav a { color: var(--texto-suave); }
.pie nav a:hover { color: var(--texto); }
.pie-nota { margin-left: auto; }

/* Landing mas compacta */
.heroe { padding: 26px 0 30px; max-width: 580px; }
.heroe h1 { font-size: 33px; line-height: 1.15; margin-bottom: 12px; }
.heroe p { font-size: 14px; margin-bottom: 18px; }
.tarjetas { gap: 10px; margin: 0 0 30px; }
.tarjetas article { padding: 15px; }
.pasos ol { line-height: 1.9; font-size: 14px; }
.pasos ol b { color: var(--texto); font-weight: 600; }

@media (max-width: 760px) {
  .pie { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pie-nota { margin-left: 0; }
  .con-rail .pie { margin-bottom: 8px; }
}

/* Atajos del resumen */
.atajos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-top: 12px;
}
.atajos a {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px;
  background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.atajos a:hover { border-color: var(--acento-borde); }
.atajos b { font-size: 14px; }
.atajos span { line-height: 1.5; }

/* Soltar a alguien en la columna lo saca del roster */
.panel-voz.soltar-aca {
  border-color: var(--acento-borde);
  box-shadow: inset 0 0 0 1px var(--acento-borde);
}

/* ---------- Calidad del item ---------- */
/* Normal, buena, sobresaliente, excelente y obra maestra, con los
   colores del juego. La normal no lleva marca. */

.cal-2 { box-shadow: inset 0 0 0 1px #4ade80; }
.cal-3 { box-shadow: inset 0 0 0 1px #38bdf8; }
.cal-4 { box-shadow: inset 0 0 0 1px #c084fc; }
.cal-5 { box-shadow: inset 0 0 0 1px #fbbf24; }

.mini.cal-2, .mini.cal-3, .mini.cal-4, .mini.cal-5 { border-radius: 4px; }

.item-retrato.cal-2 { border-color: #4ade80; }
.item-retrato.cal-3 { border-color: #38bdf8; }
.item-retrato.cal-4 { border-color: #c084fc; }
.item-retrato.cal-5 { border-color: #fbbf24; }

/* ---------- Listas dentro de una ventana ---------- */
/* Tenian tope de alto pero no desplazamiento: con muchos nombres el
   contenido se salia por debajo de la ventana. */

.ventana-items, .ventana-item {
  display: flex; flex-direction: column;
  max-height: 86vh;
}
.lista-desplazable {
  overflow-y: auto;
  min-height: 0;
  max-height: 52vh;
}
.rejilla-items { min-height: 0; }
.ventana-items header, .ventana-items > .buscador { flex-shrink: 0; }

@media (max-width: 760px) {
  .ventana-items, .ventana-item { max-height: 82vh; }
  .lista-desplazable { max-height: 58vh; }
}

/* ---------- La fila se adapta al ancho de la party ---------- */
/* Cuando no entra todo, lo primero que se va son las habilidades y
   despues las armaduras. El nombre, el arma, el jugador y la X quedan
   siempre, que es lo que se usa para armar el roster. */

.tabla-party { width: 100%; }
.tabla-party .rol-hueco { max-width: 160px; }

/* Cuando la party se angosta, lo que se va es la build, nunca el
   jugador ni la X. Primero las habilidades, despues las armaduras y al
   final el arma. Vale igual en los tres modos, porque mide la party. */
@container (max-width: 740px) {
  .tabla-party .hechizos-mini { display: none; }
}
@container (max-width: 560px) {
  .tabla-party .equipo-mini .mini:not(.arma) { display: none; }
  .tabla-party .equipo-mini { width: 34px; }
}
@container (max-width: 430px) {
  .tabla-party .equipo-mini { display: none; }
}

/* Si aun asi no entra, la party se desliza en vez de cortar la X */
.tabla-envoltura-party { overflow-x: auto; }

/* Revision de Stripe en el panel */
.revision {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 10px; margin-bottom: 4px;
  background: var(--fondo-2);
  border-left: 3px solid var(--texto-suave);
  border-radius: 6px;
  font-size: 12px;
}
.revision b { min-width: 150px; color: var(--texto); }
.revision.bien { border-left-color: var(--ok); }
.revision.mal { border-left-color: var(--alerta); }

.buscador.dias { width: 62px; text-align: center; padding: 0 4px; }

/* ---------- Elegir colores ---------- */

.fila-color { display: flex; align-items: center; gap: 10px; }
.fila-color input[type="color"] {
  width: 40px; height: 34px; padding: 2px;
  background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 8px;
  cursor: pointer; flex-shrink: 0;
}
.muestras { display: flex; gap: 8px; }
.muestra {
  width: 30px; height: 30px; padding: 0;
  border: 2px solid transparent; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.muestra:hover { transform: scale(1.1); }
.muestra.activa { border-color: var(--texto); }

.campo input[type="range"] { accent-color: var(--acento); }

/* ---------- Ajustes ---------- */

.grupos {
  display: inline-flex; gap: 3px; margin-bottom: 16px;
  background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 9px; padding: 3px;
}
.grupo {
  height: 30px; padding: 0 16px;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--texto-suave);
  font-family: var(--fuente); font-size: 12px; font-weight: 600; cursor: pointer;
}
.grupo:hover { color: var(--texto); }
.grupo.activo {
  background: var(--acento-tenue);
  border-color: var(--acento-borde);
  color: var(--acento);
}

.modulo { padding: 0; margin-bottom: 14px; }
.modulo > header {
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--borde);
}
.modulo > header h3 { font-size: 15px; margin-bottom: 5px; }
.modulo > header p { margin: 0; line-height: 1.5; }
.modulo > .campo,
.modulo > .campo-par,
.modulo > .campo-trio { margin: 16px 18px; }
.modulo .acciones-modulo {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 13px 18px;
  border-top: 1px solid var(--borde);
}
.modulo .agregar-rango,
.modulo .bloque-rangos,
.modulo #lista-lideres,
.modulo .agregar-lider { margin: 14px 18px; }

.campo-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.campo input[type="range"] { width: 100%; }

.fila-imagen { display: flex; gap: 8px; }
.fila-imagen input { flex: 1; }

/* Tus fondos guardados */
.mis-fondos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.fondo-guardado {
  position: relative;
  width: 104px; height: 62px;
  background-size: cover; background-position: center;
  border: 1px solid var(--borde); border-radius: 8px;
  overflow: hidden;
}
.fondo-guardado > [data-usar] {
  position: absolute; inset: 0;
  background: transparent; border: none; cursor: pointer;
}
.fondo-guardado:hover { border-color: var(--acento); }
.quitar-fondo {
  position: absolute; top: 3px; right: 3px;
  width: 20px; height: 20px; padding: 0;
  background: rgba(8, 12, 20, 0.8); color: var(--texto);
  border: none; border-radius: 5px;
  font-size: 13px; line-height: 1; cursor: pointer;
}
.quitar-fondo:hover { color: var(--alerta); }

@media (max-width: 640px) {
  .campo-trio { grid-template-columns: 1fr; }
  .fila-imagen { flex-direction: column; }
}

/* ---------- Ajustes en modulos ---------- */

.ajustes { max-width: 760px; }
.pestanas-ajustes { max-width: 280px; margin-bottom: 16px; }

.aviso-hoja {
  margin: 0 0 14px;
  padding: 10px 13px;
  background: var(--fondo-2);
  border-left: 3px solid var(--acento-borde);
  border-radius: 0 7px 7px 0;
  font-size: 12px; color: var(--texto-suave); line-height: 1.5;
}

.modulo {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 12px;
}
.modulo > header { margin-bottom: 16px; }
.modulo h3 { font-size: 15px; margin-bottom: 5px; }
.modulo > header p { margin: 0; line-height: 1.55; }
.modulo .campo:last-child { margin-bottom: 0; }

.fila-selectores { display: flex; gap: 12px; flex-wrap: wrap; }
.fila-selectores .campo { flex: 1; min-width: 130px; margin-bottom: 0; }
.fila-selectores select { width: 100%; }

.campo input[type="range"] { width: 100%; }

.pie-acciones {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 4px;
}

/* Con imagen de fondo, los paneles se despegan un poco */
body.con-imagen .modulo,
body.con-imagen .panel,
body.con-imagen .party,
body.con-imagen .panel-voz,
body.con-imagen .encabezado,
body.con-imagen .rail { backdrop-filter: blur(6px); }

@media (max-width: 560px) {
  .fila-selectores .campo { min-width: 100%; }
  .pie-acciones .boton { flex: 1; justify-content: center; }
}

/* Estado de la conexion, al lado del nombre del gremio */
.marca-vivo {
  display: inline-flex; align-items: center; gap: 5px;
  flex-shrink: 0;
}
.marca-vivo::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 6px var(--ok);
}
.marca-vivo.caida::before { background: var(--alerta); box-shadow: none; }

/* ---------- Menu de acciones poco usadas ---------- */

.menu-mas { position: relative; }
.menu-desplegado {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 160px; padding: 4px;
  background: var(--panel-alto);
  border: 1px solid var(--borde); border-radius: 8px;
  box-shadow: var(--sombra);
  z-index: 40;
}
.menu-desplegado button {
  display: block; width: 100%;
  padding: 8px 10px;
  background: transparent; border: none; border-radius: 6px;
  color: var(--texto); text-align: left;
  font-family: var(--fuente); font-size: 13px; cursor: pointer;
}
.menu-desplegado button:hover { background: var(--fondo-2); }
.menu-desplegado button.peligro { color: var(--alerta); }

/* ---------- Formulario de evento ---------- */

.ventana-form header { align-items: flex-start; gap: 10px; }
.ventana-form header p { margin: 3px 0 0; line-height: 1.4; }

.tira-presets {
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto;
  padding-bottom: 14px; margin-bottom: 16px;
  border-bottom: 1px solid var(--borde);
}
.tira-presets::-webkit-scrollbar { height: 0; }
.tira-presets > span { flex-shrink: 0; }
.tira-presets .ficha-preset { flex-shrink: 0; }
/* Cada preset es una ficha con su nombre y sus dos acciones chicas.
   Las acciones ocupan su lugar desde el principio y solo cambian de
   opacidad: si aparecieran al pasar el cursor, la ficha creceria y
   empujaria a las demas a otra linea. */
.ficha-preset {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0 6px 0 12px;
  background: var(--fondo-2);
  border: 1px solid var(--borde); border-radius: 999px;
}
.ficha-preset:hover { border-color: var(--acento-borde); }
.ficha-preset button {
  background: transparent; border: none;
  color: var(--texto);
  font-family: var(--fuente); font-size: 12px;
  cursor: pointer;
}
.ficha-preset [data-usar] {
  padding: 7px 4px 7px 0;
  font-weight: 600;
  max-width: 170px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ficha-preset [data-renombrar],
.ficha-preset [data-borrar] {
  flex-shrink: 0;
  width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 11px; line-height: 1;
  color: var(--texto-suave);
  opacity: 0.35;
  transition: opacity 0.12s ease, background 0.12s ease;
}
.ficha-preset:hover [data-renombrar],
.ficha-preset:hover [data-borrar] { opacity: 1; }
.ficha-preset [data-renombrar]:hover { background: var(--panel-alto); color: var(--texto); }
.ficha-preset [data-borrar]:hover { background: var(--panel-alto); color: var(--alerta); }
.ficha-preset.activa {
  background: var(--acento-tenue);
  border-color: var(--acento-borde);
}
.ficha-preset.activa [data-usar] { color: var(--acento); }

.bloque-form {
  padding: 14px;
  margin-bottom: 14px;
  background: var(--fondo-2);
  border-radius: 9px;
}
.bloque-titulo {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--texto-suave);
  margin-bottom: 12px;
}
.bloque-form .campo:last-of-type { margin-bottom: 0; }
.bloque-form .marca-campo { margin: 12px 0 0; }
.bloque-form .campo input, .bloque-form .campo select, .bloque-form .campo textarea {
  background: var(--panel);
}

.fila-cuando { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* El campo de fecha viene con el estilo del navegador, que en oscuro
   queda blanco. color-scheme le avisa que estamos en oscuro y el filtro
   le da vuelta el iconito del calendario. */
.fila-cuando input[type="date"] {
  width: auto;
  height: 56px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--borde); border-radius: 8px;
  color: var(--texto);
  color-scheme: dark;
  font-family: var(--fuente); font-size: 15px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fila-cuando input[type="date"]:hover { border-color: var(--acento-borde); }
.fila-cuando input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
  opacity: 0.6;
}
.fila-cuando input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

.opcional {
  font-style: normal; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  color: var(--texto-suave); opacity: 0.7;
}