/* Header estirado de pared a pared, con el gremio y sus secciones. */

header.barra .barra-interna {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 0 18px; width: 100%;
}
.barra-izq, .barra-der { display: flex; align-items: center; gap: 10px; min-width: 0; }

/* El reparto del ancho: la izquierda se queda con lo que necesita y la derecha
   cede. Sin esto, con varios botones a la derecha la izquierda se encoge hasta
   aplastar el logo, que termina partido en dos líneas. */
.barra-izq { flex: 1 1 auto; }
.barra-der { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }

/* El logo no se encoge ni se parte nunca. */
.barra-izq .marca { flex: 0 0 auto; white-space: nowrap; }
.barra-der .chip { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Las secciones sí pueden achicarse y desplazarse si no entran. */
.secciones { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.secciones::-webkit-scrollbar { display: none; }

.gremio-actual {
  font-size: 14px; color: var(--texto); text-decoration: none;
  background: var(--panel-alto); border: 1px solid var(--borde);
  border-radius: 8px; padding: 5px 11px; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gremio-actual:hover { border-color: var(--marcado-borde); }

.secciones { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.secciones a {
  font-size: 14px; color: var(--tenue); text-decoration: none;
  border-radius: 8px; padding: 6px 11px; border: 1px solid transparent;
}
.secciones a:hover { color: var(--texto); background: var(--panel-alto); }
.secciones a.activa {
  color: var(--texto); background: var(--marcado); border-color: var(--marcado-borde);
}

@media (max-width: 900px) {
  header.barra .barra-interna { flex-wrap: wrap; gap: 8px; }
  .secciones { order: 3; width: 100%; overflow-x: auto; }
  .gremio-actual { max-width: 40vw; }
}

/* --- Pie de página, igual en todas las pantallas --- */
footer .pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; padding: 0 18px; width: 100%;
}
.pie-marca { font-weight: bold; letter-spacing: .04em; color: var(--texto); font-size: 14px; }
.pie-marca span { color: var(--acento); }
.pie-enlaces { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pie-enlaces a { color: var(--tenue); text-decoration: none; }
.pie-enlaces a:hover { color: var(--texto); }

/* El header es pegajoso: que los títulos no queden debajo al saltar con enlaces. */
h1, h2 { scroll-margin-top: 90px; }

/* El registro se puede abrir: que se note. */
.tarjeta.gremio.clicable { cursor: pointer; }
.tarjeta.gremio.clicable:hover { border-color: var(--marcado-borde); }
.grupo-registro { margin-bottom: 14px; }
.grupo-registro .etiqueta { margin-bottom: 6px; }
.dialogo.ancho { max-width: 640px; }
.renglon .rango { text-transform: capitalize; }

/* Campo de hora propio: siempre 24 horas, sin el reloj del navegador. */
.campo-hora { letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* --- Avisos flotantes, arriba a la derecha --- */
.avisos {
  position: fixed; top: 74px; right: 16px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.aviso-flotante {
  pointer-events: auto; cursor: pointer; max-width: 340px;
  background: color-mix(in srgb, var(--fondo) 72%, var(--peligro) 28%);
  border: 1px solid color-mix(in srgb, var(--fondo) 45%, var(--peligro) 55%);
  color: #f6ded9;
  border-radius: 10px; padding: 10px 14px; font-size: 13px; line-height: 1.4;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateX(24px);
  transition: opacity .18s ease, transform .22s ease;
}
.aviso-flotante.visible { opacity: 1; transform: translateX(0); }
.aviso-flotante.yendose { opacity: 0; transform: translateX(40px); }
.aviso-flotante.ok { background: var(--marcado); border-color: var(--marcado-borde); color: color-mix(in srgb, var(--texto) 70%, var(--acento) 30%); }

@media (prefers-reduced-motion: reduce) {
  .aviso-flotante { transition: opacity .18s ease; transform: none; }
  .aviso-flotante.yendose { transform: none; }
}

/* Botones en rojo, para las acciones que borran datos. Se usan también fuera
   del panel de ajustes (el borrado de eventos, por ejemplo). */
button.suave.peligro { border-color: color-mix(in srgb, var(--borde) 50%, var(--peligro) 50%); color: color-mix(in srgb, var(--texto) 60%, var(--peligro) 40%); }
button.suave.peligro:hover { border-color: var(--peligro); }

/* --- Recorrido guiado --- */
.tutorial {
  position: fixed; right: 20px; bottom: 20px; z-index: 400; width: min(360px, calc(100vw - 40px));
  background: var(--panel); border: 1px solid var(--marcado-borde); border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, .6);
}
.tutorial strong { display: block; margin-bottom: 6px; }
.tutorial p { margin: 0 0 12px; font-size: 13px; color: color-mix(in srgb, var(--texto) 75%, var(--tenue) 25%); line-height: 1.5; }
.tutorial-progreso { display: flex; gap: 4px; margin-bottom: 12px; }
.tutorial-progreso span {
  height: 3px; flex: 1; border-radius: 2px; background: var(--borde);
}
.tutorial-progreso span.hecho { background: var(--acento); }
.tutorial-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tutorial-foco {
  outline: 2px solid var(--acento); outline-offset: 6px; border-radius: 12px;
}

/* Listas de la guía. */
.guia { margin: 8px 0 0; padding-left: 18px; color: color-mix(in srgb, var(--texto) 75%, var(--tenue) 25%); font-size: 13px; line-height: 1.6; }
.guia li { margin-bottom: 4px; }

/* --- Fondo personal ---
   Es tuyo, no del gremio: lo agrega ui.js leyendo tu navegador. Fijo, quieto
   al hacer scroll, con un velo liviano para que el texto se siga leyendo
   encima de cualquier imagen sea cual sea la opacidad que elijas.

   El body pinta su propio color de fondo por encima de todo lo que esté
   detrás (un color sólido en el flujo normal siempre tapa lo que hay debajo,
   no importa el z-index). Por eso, con el fondo personal activo, el body se
   vuelve transparente: así la imagen que está detrás se llega a ver. */
body.con-fondo { background: transparent; }
.fondo-personal {
  position: fixed; inset: 0; z-index: -2;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: opacity .2s ease;
}
body.con-fondo::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--fondo) 60%, transparent);
}
/* Con imagen detrás, los paneles se hacen un poco opacos para no perder texto. */
body.con-fondo .tarjeta,
body.con-fondo .party,
body.con-fondo .rail,
body.con-fondo .lienzo,
body.con-fondo .inspector,
body.con-fondo .panel-evento,
body.con-fondo .columna-lateral {
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  backdrop-filter: blur(3px);
}

/* Aviso de suscripción vencida: se ve en todas las pantallas del gremio. */
.franja-vencida {
  background: color-mix(in srgb, var(--fondo) 75%, var(--peligro) 25%);
  border-bottom: 1px solid color-mix(in srgb, var(--fondo) 45%, var(--peligro) 55%);
  color: #f6ded9; text-align: center; font-size: 13px; padding: 8px 16px;
}
.franja-vencida a { color: #fff; }

/* --- Panel de gremios --- */
.panel-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 22px;
}

.franja-ok, .franja-neutra {
  border-radius: var(--radio); padding: 10px 14px; font-size: 13.5px;
  margin: 0 0 16px;
}
.franja-ok {
  background: var(--marcado); border: 1px solid var(--marcado-borde);
  color: color-mix(in srgb, var(--texto) 80%, var(--acento) 20%);
}
.franja-neutra {
  background: var(--panel); border: 1px solid var(--borde); color: var(--tenue);
}

.caja-nuevo { margin-bottom: 16px; }
.caja-nuevo.oculto { display: none; }
.caja-nuevo .fila { gap: 8px; flex-wrap: wrap; }
.caja-nuevo .campo { flex: 1 1 240px; }

.lista-gremios { display: flex; flex-direction: column; gap: 8px; }

/* Una fila por gremio: nombre, estado y acciones. Sin tarjetas gigantes. */
.gremio-tarjeta {
  display: grid; align-items: center; gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 14px 16px;
}
.gremio-tarjeta:hover { border-color: var(--marcado-borde); }

.gremio-nombre {
  font-size: 16px; font-weight: bold; color: var(--texto); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.gremio-nombre:hover { color: var(--acento); text-decoration: none; }

.gremio-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gremio-estado .meta { white-space: nowrap; }
.chip.apagado { color: var(--tenue); opacity: .75; }

.gremio-acciones { display: flex; align-items: center; gap: 6px; }

.vacio-gremios { max-width: 560px; }

.pie-panel {
  margin-top: 24px; font-size: 13px; color: var(--tenue); line-height: 1.6;
}

@media (max-width: 760px) {
  .gremio-tarjeta { grid-template-columns: minmax(0, 1fr) auto; }
  .gremio-estado { grid-column: 1 / -1; order: 3; }
}

/* --- Lengüeta para esconder y traer una columna ---
   Siempre en el mismo punto, a la mitad de la pared izquierda: el mismo botón
   cierra y vuelve a abrir. Va fuera del contenido para que ninguna caja de por
   medio la corra de lugar. */
.lengueta {
  position: fixed; left: 0; top: 50vh; transform: translateY(-50%);
  z-index: 40; cursor: pointer;
  width: auto; min-width: 0; flex: none;
  font-size: 15px; line-height: 1; padding: 20px 6px;
  background: var(--panel); color: var(--tenue);
  border: 1px solid var(--borde); border-left: 0;
  border-radius: 0 10px 10px 0;
}
.lengueta:hover { color: var(--texto); border-color: var(--marcado-borde); background: var(--panel-alto); }
/* button:active (en estilo.css) pone transform: translateY(1px), y eso
   REEMPLAZA por completo el translateY(-50%) que centra la lengüeta: al
   apretar, el botón saltaba casi 30px hacia abajo y el mouse quedaba fuera de
   él antes de soltar, así que el clic no se registraba. Con las dos
   traslaciones juntas en la misma declaración, se combinan en vez de pisarse. */
.lengueta:active { transform: translateY(-50%) translateY(1px); }

/* --- Vista previa y control del fondo personal --- */
.vista-fondo {
  border: 1px solid var(--borde); border-radius: 9px; overflow: hidden;
  margin-bottom: 10px; min-height: 34px; display: flex;
}
.vista-fondo .vacio { padding: 10px; }
.vista-fondo img { width: 100%; max-height: 130px; object-fit: cover; display: block; }
input[type="range"] {
  flex: 1; accent-color: var(--acento); cursor: pointer;
}
input[type="range"]:disabled { opacity: .4; cursor: default; }


/* --- Panel de ajustes: módulos parejos, en dos columnas simétricas --- */
.ajustes {
  display: grid; gap: 14px; align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .ajustes { grid-template-columns: 1fr 1fr; }
}
.ajustes-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ajustes .tarjeta { display: flex; flex-direction: column; gap: 4px; }
.ajustes .tarjeta > .etiqueta { margin: 0 0 8px; }
.ajustes .tarjeta.peligro { border-color: color-mix(in srgb, var(--borde) 50%, var(--peligro) 50%); }
.ajustes .tarjeta .fila { margin-top: 10px; flex-wrap: wrap; }
.ajustes .par { padding: 6px 0; border-top: 1px solid var(--borde); }
.ajustes .par:first-of-type { border-top: 0; }