:root{
  --maxw: 1600px;
  --bd: rgba(219, 189, 189, 0.08);
  --ink: #e5e7eb;
  --muted: #9ca3af;
  --primary: #22c55e;
  --accent: #60a5fa;


  
  
  --bg-elev:        #0b1020;      /* superficie elevada */
  --bg-elev-2:      #0f1528;      /* variante para hover */
  --bd:             rgba(148,163,184,0.16); /* borde sutil */
  --shadow:         0 8px 24px rgba(0,0,0,.25);

  --primary:        #8b5cf6;      /* violeta/indigo */
  --primary-2:      rgba(139,92,246,.18);
  --primary-3:      rgba(139,92,246,.32);
  --ring:           rgba(139,92,246,.45);

  --radii:          14px;
  --pad-card:       16px;
  --gap-card:       12px;
  --h-btn:          40px;
  --fw-semibold:    600;
}

/* Asegura que cualquier [hidden] quede realmente oculto */
[hidden] { display: none !important; }

html, body{
  height:100%;
  margin:0;
  color: var(--ink);
  background: radial-gradient(1200px 900px at 50% 10%, #0b1220 0%, #050a11 40%, #02060c 100%);
  background-color:#050a11;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, Noto Sans;
}

/* ===== Fondo con frases ===== */
#bg-phrases{
  position:fixed;
  left:0; top:0; width:100vw; height:100vh;
  z-index:0;
  pointer-events:none;
  opacity:.10;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:15%;
  overflow:hidden;
}
.bg-row{
  white-space:nowrap;
  font-size:clamp(35px,2.2vw,28px);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:lowercase;
  color:#9CA3AF;
}
.bg-row .bg-marquee{
  display:inline-block;
  padding-right:4rem;
  animation:marquee 30s linear infinite;
  will-change:transform;
}
.bg-row.reverse .bg-marquee{ animation-direction: reverse; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{   transform:translateX(-30%); }
}

/* ===== HERO / HEADER ===== */
.topbar{
  position:relative;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  transition:all .25s ease;
  z-index:1;
}
.topbar__inner{
  width:min(96vw, var(--maxw));
  display:flex; flex-direction:column; align-items:center; gap:18px;
}
.logo{
  margin:0; font-weight:900; letter-spacing:-0.02em;
  font-size:clamp(46px, 9vw, 80px);
  background: linear-gradient(180deg, #e5e7eb 0%, #9ca3af 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.search{ width:min(96vw, 780px); display:flex; gap:10px; }
.search input{
  flex:1; padding:14px 16px; border:1px solid var(--bd); border-radius:14px;
  background: rgba(255,255,255,.04); color:var(--ink); outline:none;
}
.search input:focus{ box-shadow:0 0 0 3px rgba(96,165,250,.25); border-color: rgba(96,165,250,.35); }

.search select{
  padding:14px 16px; border:1px solid var(--bd); border-radius:14px;
  background: rgba(255,255,255,.04); color:var(--ink); outline:none;
}
.search select:focus{ box-shadow:0 0 0 3px rgba(96,165,250,.25); border-color: rgba(96,165,250,.35); }

.search button{
  padding:12px 18px; border-radius:12px; border:1px solid var(--bd);
  background: linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%); color:#fff; cursor:pointer;
}
.search button:hover{ filter:brightness(1.1); }

/* Sticky tras buscar */
body.has-search .topbar{
  position:sticky; top:0; min-height:68px; padding-block:10px;
  background:rgba(2,6,12,.70); backdrop-filter: blur(10px);
  border-bottom:1px solid var(--bd); z-index:10;
}
body.has-search .topbar__inner{
  flex-direction:row; justify-content:space-between; align-items:center;
}
/* En sticky, el botón login se irá a la derecha */
body.has-search .auth-row{ align-self:center; }

/* ===== Contenido ===== */
.content{
  width:min(96vw, var(--maxw));
  margin:0 auto; padding:24px;
  position:relative; z-index:1;
}

.grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width: 900px){  .grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px){ .grid{ grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1600px){ .grid{ grid-template-columns: repeat(4, 1fr); } }

/* Tarjetas/tabla */
.result-card,.card{
  background: rgba(5,10,17, .95);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.result-card{ padding:16px; }
.result-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.result-header h2{ margin:0; font-size:20px; letter-spacing:.3px; }
.meta{ display:flex; align-items:center; gap:10px; color:#cbd5e1; }

.result-card .since {
  margin-left: .5rem;
  opacity: .85;
  font-variant-numeric: tabular-nums;
}

.col{ padding:12px; }
.col h3{ margin:0 0 8px 0; font-size:14px; color:#cbd5e1; }
.col .count{ margin-left:6px; font-weight:700; color: var(--accent); }
.col ul{ list-style:none; padding:0; margin:0; }
.col li{ display:flex; align-items:center; justify-content:space-between; padding:6px 0; border-top:1px dashed rgba(255,255,255,.06); }
.col li:first-child{ border-top:none; }
.muted{ color:#6b7280; }
.who a{ color:#e5e7eb; text-decoration:none; }
.who a:hover{ color:#fff; text-decoration:underline; }
.actions{ display:flex; align-items:center; gap:8px; color:#a1a1aa; }
.lvl{ color:#a3e635; }
.copy-btn{ border:1px solid var(--bd); background:rgba(255,255,255,.03); color:#cbd5e1; padding:4px 8px; border-radius:8px; cursor:pointer; }
.copy-btn:hover{ border-color:#22c55e; color:#fff; }
.copy-btn.success{ border-color:#22c55e; color:#22c55e; }

.spacer-xxl{ height:80px; }

/* ===== Auth UI ===== */
.auth-row{
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.btn-login,
.btn-primary,
.btn-muted{
  border:1px solid var(--bd);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
}
.btn-primary{
  background: linear-gradient(180deg, #16a34a 0%, #15803d 100%);
  color:#fff;
  border:0;
}
.btn-muted:hover,
.btn-login:hover{ filter:brightness(1.1); }


/*User badge */
.user-badge{
  margin-right: 3%;
  position:fixed;
  top:10px;
  right:10px;          /* ⬅️ lo movemos a la derecha */
  left:auto;           /* ⬅️ anulamos el left */
  z-index:15;
  background:rgba(5,10,17,.9);
  border:1px solid var(--bd);
  border-radius:999px;
  padding:6px 12px;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow:var(--shadow);
  font-size:13px;
}

/* bolita verde a la izquierda del nombre */
.user-badge::before{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.45);
  animation:ping 1.8s ease-out infinite;
}
@keyframes ping {
  0%   { box-shadow:0 0 0 0 rgba(34,197,94,.45); }
  70%  { box-shadow:0 0 0 6px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0 rgba(34,197,94,0); }
}
.user-badge .logout{ margin-left:4px; cursor:pointer; opacity:.8; }
.user-badge .logout:hover{ opacity:1; }

/* Modal (se mostrará sólo cuando NO tenga [hidden]) */
.login-modal{
  position:fixed; inset:0; z-index:30;
  background: rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.login-modal[hidden]{ display:none !important; } /* clave para ocultar de verdad */

.login-card{
  width:min(92vw, 400px);
  background:rgba(5,10,17,.96);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:18px;
  box-shadow:var(--shadow);
}
.login-card h3{ margin:0 0 12px 0; }
.login-card label{ display:block; font-size:13px; color:#cbd5e1; margin:5px 0 6px; }
.login-card input{
  width:100%; padding:10px 0;
  border:1px solid var(--bd); border-radius:10px;
  background: rgba(255,255,255,.05); color:var(--ink);
}
.login-actions{ margin-top:12px; display:flex; gap:10px; }
.login-error{ color:#ef4444; margin-top:8px; }

.error-modal{
  position:fixed; inset:0; z-index:35;
  background: rgba(0,0,0,.45);
  display:none; align-items:center; justify-content:center;
}

.error-card{
  width:min(92vw, 360px);
  background:rgba(5,10,17,.96);
  border:1px solid var(--bd);
  border-radius:12px;
  padding:20px;
  box-shadow:var(--shadow);
  text-align:center;
}
.error-card h3{ margin:0 0 10px; }
.error-card p{ margin:0 0 18px; }
.error-card .btn-primary{ width:100%; }

/* Botón tipo enlace (para "Crear cuenta") */
.btn-link{
  background: none;
  border: 0;
  color: var(--accent);
  cursor: pointer;
  padding: 0;
  font: inherit;
}
.btn-link:hover{ text-decoration: underline; }

.result-header .actions .close-btn{
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #f87171;
  padding: 2px 6px;
  border-radius: 6px;
}
.result-header .actions .close-btn:hover{
  background: rgba(248,113,113,.12);
}

/* ===== Select "search-type" (Guild / Character) ===== */
#search-type{
  /* reset nativo */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  /* tamaño y espaciado para alinear con tu input */
  height: 44px;                 /* mismo alto aproximado que .search input */
  padding: 10px 36px 10px 12px; /* hueco a la derecha para la flecha */
  border-radius: 12px;
  border: 1px solid var(--bd);

  /* tema oscuro de tu UI */
  background: rgba(255,255,255,.06);
  color: var(--ink);
  box-shadow: none;
  outline: none;

  /* flecha personalizada (SVG inline) */
  background-image:
    url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;

  /* que el menú nativo intente usar paleta oscura */
  color-scheme: dark;

  /* transición sutil */
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

#search-type:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}

#search-type:focus{
  border-color: rgba(96,165,250,.35);
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}

/* estado deshabilitado */
#search-type:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* quita la flecha vieja en IE/Edge heredados (no rompe navegadores modernos) */
#search-type::-ms-expand{
  display: none;
}

/* (opcional) estiliza las opciones en navegadores que lo permiten */
#search-type option{
  background: #0b1220;   /* fondo del menú */
  color: var(--ink);     /* texto de la opción */
}

/* Alinea con los elementos del form */
.search{
  gap: 10px;             /* ya lo tienes, lo dejamos por si acaso */
}

/* ====== Character card (solo personajes) ====== */
.char-card {
  /* ya hereda fondo/borde/sombra de .result-card */
  padding: 16px 18px;
}

/* Header del personaje */
.char-card .result-header {
  border-bottom: 1px solid var(--bd);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.char-card .result-header h2 {
  margin: 0;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: .2px;
  line-height: 1.2;
  font-weight: 800;
}

.char-card .result-header h2 a {
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(180deg, #e5e7eb 0%, #cdd2d8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;              /* gradient text */
  transition: filter .15s ease, text-shadow .15s ease;
}
.char-card .result-header h2 a:hover {
  filter: brightness(1.04);
  text-shadow: 0 0 12px rgba(96,165,250,.18);
}

.char-card .meta {
  gap: 12px;
}
.char-card .meta .meta-text {
  color: #cbd5e1;                  /* similar a .meta global */
  font-size: .96rem;
}
.char-card .lvl { color: var(--primary); font-weight: 700; }

/* Botón copiar integrado al header */
.char-card .meta .actions .copy-btn {
  background: rgba(255,255,255,.05);
  border-color: var(--bd);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 10px;
}
.char-card .meta .actions .copy-btn:hover {
  border-color: var(--primary);
}

/* Secciones */
.char-card .section { margin-top: 16px; }
.char-card .section > h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: .2px;
  border-bottom: 1px dashed var(--bd);
  padding-bottom: 6px;
}

/* Filas clave:valor */
.char-card .rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.char-card .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(255,255,255,.06);
}
.char-card .row .k {
  color: var(--muted);
  font-weight: 600;
}
.char-card .row .v {
  color: var(--ink);
  font-weight: 600;
}

/* Tablas (casas) */
.char-card .table.dense {
  width: 100%;
  border-collapse: collapse;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--bd);
  border-radius: 12px;
  overflow: hidden;
}
.char-card .table.dense th,
.char-card .table.dense td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.char-card .table.dense thead th {
  background: rgba(255,255,255,.04);
  color: var(--accent);
  font-weight: 700;
}
.char-card .table.dense tbody tr:hover {
  background: rgba(255,255,255,.04);
}

/* Lista (muertes) */
.char-card .list {
  padding-left: 1.1rem;
  color: #cbd5e1;
}
.char-card .list li { margin-bottom: .9rem; }
.char-card .list strong { color: #fda4af; } /* rojo suave */
.char-card .muted { opacity: .7; }

/* Enlaces */
.char-card a { color: var(--accent); }
.char-card a:hover { filter: brightness(1.1); text-decoration: underline; }

/* Responsive tweaks */
@media (min-width: 900px) {
  /* dos columnas para el bloque de datos si quieres compactar */
  .char-card .section .rows {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

.char-card .status{
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  border: 1px solid var(--bd);
  vertical-align: middle;
}
.char-card .status.on{
  color: var(--primary);
  background: rgba(34,197,94,.12);
  border-color: rgba(34,197,94,.35);
}
.char-card .status.off{
  color: #f87171;
  background: rgba(248,113,113,.12);
  border-color: rgba(248,113,113,.35);
}

/* lista en mosaico responsivo */
.result-card .list-wrap { margin-top: .5rem; }

.result-card .all-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); /* 1..N col */
  gap: 8px;
}

/* cada item = pill compacto en una línea */
.result-card .all-list > li{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}

/* nombre ocupa lo que queda y trunca si es largo */
.result-card .all-list .who{
  flex: 1 1 auto;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* nivel como chip pegado al nombre */
.result-card .all-list .lvl{
  margin-left: 6px;
  opacity: .9;
  color: #a7ff7a;
}

/* reloj + tiempo alineado a la derecha */
.result-card .all-list .actions{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.result-card .all-list .since{
  opacity: .8;
  font-variant-numeric: tabular-nums; /* columnas de números estables */
}

/* botón copiar pequeño y sólo visible al pasar el mouse */
.result-card .all-list .copy-btn{
  padding: .25rem .5rem;
  font-size: .8rem;
  opacity: .0;
  transition: opacity .15s ease;
}
.result-card .all-list > li:hover .copy-btn{ opacity: 1; }

/* pills de filtros, un pelín más “chip” */
.result-card .filters .filt{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem .6rem;
  margin: 0 .25rem .25rem 0;
  border: 1px solid var(--line, rgba(255,255,255,.12));
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.result-card .filters .chip{
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
  padding: 0 .4em;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-variant-numeric: tabular-nums;
  opacity: .9;
}
/* ──────────────────────────────────────────────────────────────
   Ajustes visuales del panel ⚙ y controles (checkbox, select,
   range y botón "Probar") para que encaje con el tema.
   ────────────────────────────────────────────────────────────── */

/* Contenedor del panel de ajustes */
.settings-panel{
  margin: 0;
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  overflow: hidden;
}

.settings-panel__summary{
  padding:10px 14px;
}

.settings-panel__content{
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Cada fila del panel */
.settings-row{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Etiquetas y texto del panel */
.settings-row label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #cbd5e1;
  font-size: .95rem;
}

/* Checkbox con acento del tema */
.settings-row input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

/* Select (Tono) con el mismo estilo que el select de búsqueda */
.settings-row select{
  padding: 8px 34px 8px 10px;
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: var(--ink);
  outline: none;
  background-image:
    url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  color-scheme: dark;
}
.settings-row select:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}
.settings-row select:focus{
  border-color: rgba(96,165,250,.35);
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}

/* Botón "Probar" */
.settings-row .test-sound-btn{
  border: 1px solid var(--bd);
  background: rgba(255,255,255,.06);
  color: var(--ink);
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.settings-row .test-sound-btn:hover{ filter: brightness(1.1); }

/* Slider (Volumen) acorde al tema */
.settings-row input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  width: 180px;
  height: 6px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  outline: none;
}
.settings-row input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
  cursor: pointer;
}
.settings-row input[type="range"]::-moz-range-thumb{
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  cursor: pointer;
}

/* Chips de filtros: sutiles y consistentes */
.result-card .filters{
  margin-top: 0;
}
.result-card .filters .filt{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .28rem .7rem;
  margin: 0 .35rem .35rem 0;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  cursor: pointer;
}
.result-card .filters .chip{
  min-width: 1.6em;
  padding: 0 .5em;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  font-variant-numeric: tabular-nums;
}

.card-controls{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.card-controls > *{
  flex:1 1 220px;
  max-width:260px;
}
.card-controls > *.is-expanded{
  flex-basis:100%;
  max-width:none;
}
.card-controls .settings-panel,
.card-controls .filters{
  width:100%;
  margin:0;
}
.card-controls .filters__panel{
  width:100%;
}

.card-controls details{
  border:1px solid rgba(114,118,182,0.35);
  border-radius:12px;
  background:rgba(32,33,68,0.55);
  box-shadow:0 4px 12px rgba(8,10,24,0.25);
  backdrop-filter:blur(4px);
  overflow:hidden;
  padding:0;
}
.card-controls details summary{
  list-style:none;
  cursor:pointer;
  padding:10px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-weight:600;
  letter-spacing:.02em;
  color:#d9d3ff;
}
.card-controls details summary::-webkit-details-marker,
.card-controls details summary::marker{ display:none; }
.card-controls details summary::after{
  content:"▾";
  font-size:0.8rem;
  transition:transform .2s ease;
  opacity:0.7;
}
.card-controls details[open] summary::after{ transform:rotate(180deg); }
.card-controls details[open] summary{ color:var(--accent); }
.card-controls .filters__content,
.card-controls .settings-panel__content{
  padding:0 14px 14px;
  margin-top:10px;
}

/* Lista de personajes en mosaico: bordes y hover más suaves */
.result-card .all-list{
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 10px;
}
.result-card .all-list > li{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.result-card .all-list > li:hover{
  border-color: rgba(96,165,250,.28);
  background: rgba(96,165,250,.08);
}

/* Reloj/tiempo: tono y tamaño */
.result-card .all-list .since{
  opacity: .85;
  font-size: .92rem;
}

/* Botón Copiar: discreto, visible al hover */
.result-card .all-list .copy-btn{
  border: 1px solid var(--bd);
  background: rgba(255,255,255,.06);
  color: #cbd5e1;
  padding: .28rem .55rem;
  border-radius: 10px;
  opacity: 0;
  transition: opacity .15s ease, border-color .15s ease;
}
.result-card .all-list > li:hover .copy-btn{ opacity: 1; }
.result-card .all-list .copy-btn:hover{
  border-color: var(--primary);
  color: var(--ink);
}


/* === Select del panel de ajustes (Tono) === */
.settings-panel .inp-sound-name{
  /* quita UI nativa (flecha) para no verla doble */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  padding: 8px 34px 8px 10px;      /* hueco para la flecha SVG */
  border: 1px solid var(--bd);
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  color: var(--ink);
  outline: none;

  /* flecha SVG del tema */
  background-image:
    url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;

  /* pide paleta oscura al menú del sistema (Chromium/Firefox modernos) */
  color-scheme: dark;
}
/* IE/Edge heredado: oculta la flecha antigua */
.settings-panel .inp-sound-name::-ms-expand{ display:none; }

/* Opciones del desplegable en modo oscuro (donde el navegador lo permite) */
.settings-panel .inp-sound-name option{
  background: #0b1220;
  color: var(--ink);
}

/* estados */
.settings-panel .inp-sound-name:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.10);
}
.settings-panel .inp-sound-name:focus{
  border-color: rgba(96,165,250,.35);
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}

/***********************************/
/* ==== Base útil para móvil ==== */
/*********************************/
*,
*::before,
*::after { box-sizing: border-box; }

:root{
  --pad: 12px; /* padding base móvil */
}

/* Contenido a ancho completo en móvil */
@media (max-width: 640px){
  .content{
    width: 100%;
    padding: var(--pad);
  }
  .result-card{
    width: 100%;
    margin: 0;
    padding: 12px;
    border-radius: 14px;
  }
}

/* Topbar sticky: respeta notch/safe-areas */
@supports (padding: max(0px)){
  body.has-search .topbar{
    padding-top: max(10px, env(safe-area-inset-top));
  }
  .content{
    padding-left: max(var(--pad), env(safe-area-inset-left));
    padding-right:max(var(--pad), env(safe-area-inset-right));
  }
}

/* ===== Header de la tarjeta en móvil ===== */
@media (max-width: 640px){
  .result-header{
    align-items: flex-start;
    gap: 8px;
  }
  .result-header h2{
    font-size: 18px;
    line-height: 1.2;
  }
  .result-header .meta{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
  }
  .result-header .actions{
    margin-left: auto;
    display: inline-flex;
    gap: 6px;
  }
}

/* ===== Panel ⚙ ajustes legible en móvil ===== */
@media (max-width: 640px){
  .settings-panel{
    margin-bottom: 0;
  }
  .settings-panel__summary{
    padding: 12px;
  }
  .settings-panel__content{
    padding: 0 12px 12px;
  }
  .settings-panel .settings-row{
    display: block;
    margin-bottom: 10px;
  }
  .settings-panel label{
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .settings-panel .inp-threshold,
  .settings-panel .inp-sound-vol{
    width: 100%;
  }
  .settings-panel .inp-sound-name{
    width: 100%;
    /* quita flecha nativa y aplica flecha SVG del tema */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 8px 34px 8px 10px;
    border: 1px solid var(--bd);
    border-radius: 10px;
    background: rgba(255,255,255,.06);
    color: var(--ink);
    outline: none;
    background-image:
      url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
    color-scheme: dark; /* pide menú oscuro */
  }
  .settings-panel .inp-sound-name::-ms-expand{ display:none; }
  .settings-panel .test-sound-btn{
    width: 100%;
    margin-top: 6px;
  }
}

/* ===== Chips de filtros (wrap/cómodo) ===== */
.result-card .filters{ margin-bottom: 6px; }
.result-card .filters__panel{
  border: 1px solid var(--bd);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  padding: .55rem .75rem;
}
.result-card .filters__summary{
  cursor: pointer;
  list-style: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-weight: 600;
  letter-spacing: .02em;
  padding:10px 14px;
}
.result-card .filters__summary::-webkit-details-marker{ display:none; }
.result-card .filters__summary::after{
  content: "▾";
  font-size: .8rem;
  transform-origin: center;
  transition: transform .2s ease;
}
.result-card .filters__panel[open] .filters__summary::after{ transform: rotate(180deg); }
.result-card .filters__panel[open] .filters__summary{
  color: var(--accent);
}
.result-card .filters__content{
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.result-card .filters__section{
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.result-card .filters__section legend{
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
}
.result-card .filters__wrap{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.result-card .filters__sort{
  gap: .5rem;
}
.result-card .filters .filt--radio{
  border-radius: 10px;
  width: 100%;
  margin: 0;
  justify-content: flex-start;
}
.result-card .filters .filt--radio input{
  margin-left: 0;
}
.result-card .filters .filt--radio span{
  flex: 1;
}
.result-card .filters__wrap .filt{ margin: 0; }
@media (max-width: 640px){
  .result-card .filters .filt{
    padding: .3rem .6rem;
    border-radius: 999px;
  }
}

/* ===== Lista responsiva y compacta ===== */
.result-card .all-list{
  /* en desktop: varias columnas auto */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
}
@media (max-width: 800px){
  .result-card .all-list{
    grid-template-columns: 1fr; /* 1 columna en tablet/móvil */
    gap: 8px;
  }
  .result-card .all-list > li{
    padding: 10px 12px;
  }
  .result-card .all-list .since{
    font-size: .95rem;
  }
}

/* Botón copiar solo al hover/óptimo en táctil */
.result-card .all-list .copy-btn{
  padding: .3rem .6rem;
  font-size: .85rem;
}
@media (hover: hover){
  .result-card .all-list .copy-btn{ opacity: 0; transition: opacity .15s; }
  .result-card .all-list > li:hover .copy-btn{ opacity: 1; }
}

/* ===== Inputs rango más “tocables” ===== */
input[type="range"]{
  touch-action: pan-y;
}
@media (max-width: 640px){
  input[type="range"]{
    height: 28px;
  }
}


/* Grupos */
.groups-bar{ display:flex; align-items:center; justify-content:space-between; margin-top: 10px; }
.groups__wrap{ display:flex; gap:8px; flex-wrap:wrap; }

.chip{
  padding:.35rem .7rem; border-radius:999px;
  border:1px solid var(--bd); background: rgba(255,255,255,.04);
  color: var(--ink); cursor:pointer;
}
.chip.active{ border-color: var(--accent); box-shadow:0 0 0 2px rgba(96,165,250,.15) inset; }
.chip .chip-count{ margin-left:.35rem; opacity:.85; }

.groups-list-wrap .group-list{ list-style:none; padding:0; margin:6px 0 0; }
.groups-list-wrap .group-list > li{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:8px 10px; border:1px solid rgba(255,255,255,.12);
  border-radius:12px; background:rgba(255,255,255,.02); margin-top:6px;
}

/* Botón mini (➕/✖) */
.btn-mini{
  padding:.25rem .5rem; font-size:.82rem; line-height:1;
  border:1px solid var(--bd); border-radius:8px;
  background:rgba(255,255,255,.03); color:var(--ink); cursor:pointer;
}
.btn-mini:hover{ border-color: var(--accent); }
.btn-mini.danger{ border-color:#ef4444; color:#ef4444; }

.groups-bar, .groups-list-wrap { margin-bottom: 10px; }

/* Botón de logout dentro del badge de usuario */
.user-badge .logout{
  /* tonos rojo/danger para dark mode */
  --danger-bg: hsl(0 80% 45% / .18);
  --danger-bg-hover: hsl(0 80% 45% / .28);
  --danger-ring: hsl(0 75% 60% / .55);
  --danger-ring-hover: hsl(0 85% 65% / .75);
  --danger-fg: hsl(0 90% 85%);

  margin-left: .5rem;
  padding: .25rem .7rem;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger-fg);
  border: 1px solid var(--danger-ring);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
}

.user-badge .logout:hover{
  background: var(--danger-bg-hover);
  border-color: var(--danger-ring-hover);
}

.user-badge .logout:active{
  transform: translateY(1px);
}

.user-badge .logout:focus-visible{
  outline: 2px solid var(--danger-ring-hover);
  outline-offset: 2px;
}

/* =========
   Tarjeta con 3 filas claras (nombre / botón / footer)
   ========= */
.all-list .player-card{
  display: grid;
  grid-template-rows: auto auto auto;
  gap: var(--gap-card);
  padding: calc(var(--pad-card) + 2px) var(--pad-card);
  min-height: 50px;
  border-radius: var(--radii);
  border: 1px solid var(--bd);
  background: linear-gradient(180deg, var(--bg-elev) 0%, rgba(15,21,40,.92) 100%);
  transition: border-color .15s ease, background .15s ease, transform .06s ease, box-shadow .15s ease;
  will-change: transform;
}
.all-list .player-card:hover{
  border-color: var(--primary-3);
  background: var(--bg-elev-2);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

/* =========
   Nombre
   ========= */
.all-list .player-card .player-name{
  font-weight: var(--fw-semibold);
  line-height: 1.25;
  color: var(--ink);
}
.all-list .player-card .player-name a{
  color: inherit;
  text-decoration: none;
}
.all-list .player-card .player-name a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =========
   Botón "Agregar grupo" (centro)
   ========= */
.all-list .player-card .player-add{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--h-btn);
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--primary-3);
  background: var(--primary-2);
  color: #ede9fe;
  font-weight: var(--fw-semibold);
  letter-spacing: .2px;
  cursor: pointer;
  user-select: none;
  transition: background .15s ease, border-color .15s ease, transform .02s ease, box-shadow .15s ease, color .15s ease;
}
.all-list .player-card .player-add .plus{
  font-weight: 800;
  font-size: 16px;
  line-height: 1;
}
.all-list .player-card .player-add .label{ font-size: 14px; }

.all-list .player-card .player-add:hover{
  background: rgba(139,92,246,.26);
  border-color: rgba(139,92,246,.55);
  box-shadow: 0 0 0 2px rgba(139,92,246,.15) inset;
}
.all-list .player-card .player-add:active{ transform: translateY(1px); }

/* Accesibilidad: ring al foco con teclado */
.all-list .player-card .player-add:focus{
  outline: none;
  box-shadow: 0 0 0 3px var(--ring), 0 0 0 1px rgba(255,255,255,.12) inset;
}

/* =========
   Footer (tiempo a la izq / copiar a la der)
   ========= */
.all-list .player-card .player-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 2px;
}

.all-list .player-card .player-since{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13.5px;
  min-height: 20px;
}
.all-list .player-card .player-since .time{
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2px;
}
.all-list .player-card .player-since .clock{ opacity: .9; }

/* Botón copiar: discreto, aparece en hover de la tarjeta */
.all-list .player-card .copy-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--bd);
  background: rgba(255,255,255,.05);
  color: #cbd5e1;
  font-size: 13px;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.all-list .player-card:hover .copy-btn{
  opacity: 1;
  transform: translateY(0);
}
.all-list .player-card .copy-btn:hover{
  border-color: var(--primary-3);
  background: rgba(255,255,255,.07);
  color: var(--ink);
}

/* =========
   Detalles responsivos y motion
   ========= */
@media (max-width: 520px){
  .all-list .player-card{
    padding: 14px;
    min-height: 150px;
  }
  .all-list .player-card .player-add{ height: 38px; }
}

@media (prefers-reduced-motion: reduce){
  .all-list .player-card,
  .all-list .player-card .player-add,
  .all-list .player-card .copy-btn{
    transition: none;
  }
}

/* === Layout de la tarjeta con áreas === */
.all-list .player-card{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));         /* texto a la izq, acciones a la der */
  gap: 8px;
  grid-template-areas:
    "title add"     /* fila 1: nombre (y lvl) ocupa todo */
    "add  add"       /* fila 2: botón agregar grupo ocupa todo */
    "copy  time";     /* fila 3: copiar abajo del nombre, tiempo abajo del botón */
  row-gap: 12px;
  column-gap: 12px;   /* si ya lo tienes como --gap-card, úsalo */
}

/* Mapea cada elemento a su área */
.all-list .player-card .player-name{ grid-area: title; }
.all-list .player-card .player-add { grid-area: add;   }

/* Truco: deja que los hijos del footer “suban” al grid del padre */
.all-list .player-card .player-footer{ display: contents; }

/* Copiar abajo del nombre, alineado a la izquierda */
.all-list .player-card .copy-btn{
  grid-area: copy;
  justify-self: start;
  /* opcional: hazlo visible siempre o solo en hover */
  /* opacity: 1; transform: none; */
}

/* Tiempo (reloj) abajo del botón; elige alineación */
.all-list .player-card .player-since{
  grid-area: time;
  justify-self: start;    /* o 'end' si lo quieres pegado a la derecha */
}

/* Ajustes finos de separación vertical entre filas 2 y 3 */
.all-list .player-card .copy-btn,
.all-list .player-card .player-since{ margin-top: 2px; }

/* Responsive: en pantallas pequeñas todo en una sola columna si quieres */
@media (max-width: 480px){
  .all-list .player-card{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "add"
      "copy"
      "time";
  }
  .all-list .player-card .player-since{ justify-self: start; }
}

/* Usa grid en el <li> real de la lista */
.result-card .all-list > li{
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title title"   /* fila 1: nombre (lvl) */
    "add   add"     /* fila 2: agregar */
    "copy  time";   /* fila 3: copiar bajo título, tiempo bajo botón */
  row-gap: 10px;
  column-gap: 12px;
}

/* Mapea cada pieza a su área */
.result-card .all-list .who{ grid-area: title; }       /* name (lvl) */
.result-card .all-list .player-add{                     /* tu botón morado */
  grid-area: add;
  justify-self: start;
  width: 100%;
}

/* Deja que los hijos de .actions participen en el grid del <li> */
.result-card .all-list .actions{ display: contents; }

/* Copiar debajo del nombre */
.result-card .all-list .copy-btn{
  grid-area: copy;
  justify-self: start;
}

/* Tiempo debajo del botón */
.result-card .all-list .since{
  grid-area: time;
  justify-self: start; /* o end si lo quieres a la derecha */
}

/* Opcional: en móvil, una sola columna */
@media (max-width: 480px){
  .result-card .all-list > li{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "add"
      "copy"
      "time";
  }
}

/* 1) Define aquí el ancho mínimo de cada ficha (↓ ajústalo) */
:root{ --card-min: 200px; }  /* prueba 260, 240, etc. */

/* 2) El grid contenedor: controla cuántas columnas caben */
.result-card .all-list{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)) !important;
  gap: 10px;
}

/* 3) Asegura que la tarjeta NO cree columnas internas por error */
.all-list .player-card{
  grid-template-columns: 1fr auto !important;  /* título a la izq, acciones a la der */
}

.group-pick {
  display: flex;
  flex-wrap: wrap;    /* permite que los botones salten a la siguiente línea */
  gap: 0.25rem;       /* separación entre botones */
}


.group-btn {
  white-space: nowrap; /* evita que el texto se parta en varias líneas */
}

/* 1) Coloca el contenedor correcto en el área del grid */
.all-list .player-card .add-wrap{
  grid-area: add;           /* <- antes mapeabas .player-add, ahora es .add-wrap */
  width: 100%;
}

/* 2) Botonera: dos columnas flexibles que hacen wrap, texto completo */
.all-list .player-card .group-pick{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  width: 100%;
}

/* 3) Cada botón ocupa ~la mitad del ancho y no se corta el texto */
.all-list .player-card .group-pick .add-to-group,
.all-list .player-card .group-pick .group-btn,
.all-list .player-card .group-pick .btn-mini{
  flex: 1 1 calc(50% - 8px);  /* dos por fila, hace wrap si no cabe */
  max-width: 100%;
  box-sizing: border-box;
  white-space: nowrap;         /* no partir palabras dentro del botón */
  overflow: visible;           /* nada de recortes */
}

/* 4) El nombre largo puede partirse sin empujar la botonera */
.all-list .player-card .player-name,
.all-list .player-card .player-name a{
  overflow-wrap: anywhere;     /* o word-break: break-word; */
}

/* Oculta ambos botones en toda la app */
.refresh-btn,
.gear-btn {
  display: none !important;
}


/* --- Grilla general de tarjetas --- */
#tables {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 16px;
}

/* La expandida ocupa el ancho completo */
.guild-card.card--expanded {
  grid-column: 1 / -1;
}
/******************************/
/* --- Tarjeta minimizada --- */
/*****************************/
.guild-card.card--mini {
  position: relative;
  padding: 12px 12px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  outline: 1px solid rgba(255,255,255,0.06);
}

.guild-card.card--mini .mini-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.guild-card.card--mini .mini-head .name { font-weight: 650; font-size: 15px; }
.guild-card.card--mini .mini-head .world { opacity: .7; font-size: 12px; }

.guild-card.card--mini .mini-stats {
  display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.guild-card.card--mini .chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; border-radius: 999px; font-size: 12px;
  background: rgba(255,255,255,0.06);
}
.guild-card.card--mini .chip b { font-variant-numeric: tabular-nums; }

.guild-card.card--mini .mini-total {
  font-size: 12px; opacity: .85;
}

/* Oculta el contenido de la tarjeta grande cuando está en modo mini */
.guild-card.card--mini .card-body,
.guild-card.card--mini .card-toolbar,
.guild-card.card--mini .groups,
.guild-card.card--mini .filters,
.guild-card.card--mini .lists,
.guild-card.card--mini .topline {
  display: none !important;
}

/* Botón de cambiar tamaño */
.guild-card .mode-toggle {
  position: absolute; top: 8px; right: 8px;
  font-size: 12px; opacity: .8; background: transparent; border: none; cursor: pointer;
}

/* Mostrar mini solo cuando la tarjeta está minimizada */
.guild-card.card--expanded .mini { display: none; }
.guild-card.card--mini .mini { display: block; }

/* Mostrar sólo la mini cuando está minimizada */
.guild-card.card--expanded .mini { display: none; }
.guild-card.card--mini .mini     { display: block; }

/* Oculta todo lo pesado en mini */
.guild-card.card--mini .result-header,
.guild-card.card--mini .settings-panel,
.guild-card.card--mini .groups-bar,
.guild-card.card--mini .groups-list-wrap,
.guild-card.card--mini .filters,
.guild-card.card--mini .list-wrap {
  display: none !important;
}

/* Contenedor mini */
.guild-card.card--mini {
  position: relative;
  padding: 12px;
  border-radius: 12px;
}

/* Cabecera de la mini con botones a la derecha */
.guild-card.card--mini .mini-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:6px;
}
.guild-card.card--mini .mini-head .lh{
  display:flex; flex-direction:column; gap:2px;
}
.guild-card.card--mini .mini-head .name{
  font-weight:700; font-size:15px;
}
.guild-card.card--mini .mini-head .world{
  opacity:.75; font-size:12px;
}
.guild-card.card--mini .mini-head .rh{
  display:inline-flex; gap:6px;
}
.guild-card.card--mini .mini-head .rh button{
  border:1px solid var(--bd);
  background:rgba(255,255,255,.06);
  color:var(--ink);
  padding:4px 8px; border-radius:8px; cursor:pointer; font-size:12px;
}

/* Línea Total */
.guild-card.card--mini .mini-total{
  font-size:13px; opacity:.9;
}

/* Si dejaste el viejo botón de modo, ocúltalo */
.guild-card .mode-toggle { display: none !important; }

.result-header .actions .minimize-btn{
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: #cbd5e1;
  padding: 2px 6px;
  border-radius: 6px;
}
.result-header .actions .minimize-btn:hover{
  background: rgba(148,163,184,.12);
}

/* Contenedor de acciones (separación uniforme) */
.result-header .actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Botón base de icono */
.icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  line-height: 0;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: #cbd5e1;                     /* color neutral por defecto */
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease;
}
.icon-btn .icon{ pointer-events: none; }

.icon-btn:hover{
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.28);
}
.icon-btn:active{ transform: translateY(1px); }
.icon-btn:focus-visible{
  outline: 2px solid rgba(96,165,250,.55);
  outline-offset: 2px;
}

/* Semánticas por botón */
.refresh-btn { color:#d1d5db; }
.refresh-btn:hover { color:#e5e7eb; }

.gear-btn { color:#d1d5db; }
.gear-btn:hover { color:#e5e7eb; }

/* Minimizar: acento suave para indicar “acción secundaria” */
.minimize-btn{
  color:#93c5fd;                      /* azul suave */
  border-color: rgba(96,165,250,.22);
}
.minimize-btn:hover{
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.38);
  color:#bfdbfe;
}

/* Cerrar: estilo “peligro” coherente */
.close-btn{
  color:#fca5a5;
  border-color: rgba(248,113,113,.28);
}
.close-btn:hover{
  background: rgba(248,113,113,.14);
  border-color: rgba(248,113,113,.45);
  color:#fecaca;
}

/* Contenedor de acciones */
.result-header .actions{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Botón base */
.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px; height:28px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:#cbd5e1;
  cursor:pointer;
  line-height:0;
  transition: background .15s, border-color .15s, color .15s, transform .05s;
  position: relative;
}

/* El icono lo pone CSS */
.icon-btn::before{
  content:"";                 /* lo definimos por botón abajo */
  font-size:14px;
  line-height:1;
  display:block;
  transform: translateY(0);   /* ajustamos caso a caso */
}

/* Estados */
.icon-btn:hover{
  background: rgba(148,163,184,.12);
  border-color: rgba(148,163,184,.28);
}
.icon-btn:active{ transform: translateY(1px); }
.icon-btn:focus-visible{
  outline:2px solid rgba(96,165,250,.55);
  outline-offset:2px;
}

/* ── Iconos (unicode) y semánticas de color ───────────── */
.refresh-btn::before{ content:"⟳"; }
.gear-btn::before{ content:"⚙"; }

/* Minimizar: línea baja más gruesa para que “se lea” como minimizar */
.minimize-btn{
  color:#93c5fd;
  border-color: rgba(96,165,250,.22);
}
.minimize-btn:hover{
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.38);
  color:#bfdbfe;
}
/* .minimize-btn::before */
.minimize-btn::before{
  content: "";
  display: block;
  width: 14px;              /* ancho de la barrita */
  height: 2px;              /* grosor */
  background-color: currentColor;
  border-radius: 2px;       /* esquinas suaves */
  /* Al usar inline-flex + justify/align center del botón,
     esto queda centrado perfecto sin hacks */
}

/* (opcional) un tono azul y estados ya definidos */
.minimize-btn{
  color:#93c5fd;
  border-color: rgba(96,165,250,.22);
}
.minimize-btn:hover{
  background: rgba(96,165,250,.12);
  border-color: rgba(96,165,250,.38);
  color:#bfdbfe;
}

/* Cerrar: “peligro” */
.close-btn{
  color:#fca5a5;
  border-color: rgba(248,113,113,.28);
}
.close-btn:hover{
  background: rgba(248,113,113,.14);
  border-color: rgba(248,113,113,.45);
  color:#fecaca;
}
.close-btn::before{ content:"✕"; }   /* ✖ o ✕ según te guste */

/* Header de tarjetas de guild: dos filas con áreas nombradas */
.guild-card .result-header{
  display: grid !important;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title actions"
    "meta  meta";
  align-items: start;     /* todo pegado arriba */
  row-gap: 4px;           /* controla el espacio entre título y meta */
  margin: 0;              /* evita huecos extra del contenedor */
  padding: 0;
}

/* Título (izquierda, sin márgenes nativos del h2) */
.guild-card .result-header h2{
  grid-area: title;
  margin: 0;
  line-height: 1.1;
}

/* Botonera (esquina superior derecha) */
.guild-card .result-header .actions{
  grid-area: actions;
  justify-self: end;
  align-self: start;      /* arriba del todo */
  gap: 8px;
}

/* Línea de “Mundo • Online • Actualizado” centrada y sin márgenes extra */
.guild-card .result-header .meta{
  grid-area: meta;
  margin: 0;              /* quita el espacio indeseado */
  padding: 0;
  text-align: center;
}

/* Si aún ves mucho hueco tras el header, reduce el margen del primer bloque */
.guild-card .groups-bar{ margin-top: 6px; }   /* antes lo tenías en 10px */


.guild-card.card--mini .mini-groups{
  display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:6px;
}
.guild-card.card--mini .mini-groups .chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:999px;
  border:1px solid var(--bd); background:rgba(255,255,255,.06);
  font-size:12px; line-height:1;
}
.guild-card.card--mini .mini-groups .chip .chip-count{
  min-width:1.4em; text-align:center; font-variant-numeric:tabular-nums; opacity:.9;
}
.guild-card.card--mini .mini-groups .chip.active{
  outline:2px solid rgba(96,165,250,.25);
  border-color: rgba(96,165,250,.35);
}

/* Estado por defecto: TODO oculto en .mini */
.guild-card .mini { display: none; }

/* Solo en modo mini se muestra la vista mini */
.guild-card.card--mini .mini { display: block !important; }

/* En modo expandido, la mini NUNCA debe verse */
.guild-card.card--expanded .mini { display: none !important; }

/* En modo mini, oculta la UI grande */
.guild-card.card--mini .result-header,
.guild-card.card--mini .groups-bar,
.guild-card.card--mini .groups-list-wrap,
.guild-card.card--mini .filters,
.guild-card.card--mini .list-wrap,
.guild-card.card--mini .settings-panel {
  display: none !important;
}

/* 1) Por defecto la mini no se muestra; solo en modo mini */
.guild-card .mini { display: none; }
.guild-card.card--mini .mini { display: block !important; }
.guild-card.card--expanded .mini { display: none !important; }

/* 2) En modo mini ocultamos la UI grande */
.guild-card.card--mini .result-header,
.guild-card.card--mini .groups-bar,
.guild-card.card--mini .groups-list-wrap,
.guild-card.card--mini .filters,
.guild-card.card--mini .list-wrap,
.guild-card.card--mini .settings-panel {
  display: none !important;
}



/* 4) EXPANDIDA – que ocupe TODA la fila, sin límites de ancho */
#tables .guild-card.card--expanded {
  /* si el contenedor es GRID */
  grid-column: 1 / -1;

  /* y, de paso, que no herede límites de las reglas de mini */
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  /* fallback si el contenedor fuese FLEX */
  flex: 1 1 100%;
}

/* (opcional) si usas order para traerla arriba en flex layout*/
#tables .guild-card.card--expanded { order: -1; } 

/*************/
/* Botón (i) */
/*************/
.info-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.35rem;
  height:1.35rem;
  line-height:1.35rem;
  margin-left:.4rem;
  font:700 0.85rem/1 ui-sans-serif, system-ui, -apple-system, "Segoe UI";
  background:#0b1220;
  color:#93c5fd;
  border:1px solid #475569;
  border-radius:999px;
  cursor:pointer;
  user-select:none;
  z-index: 200;
}
.info-btn:hover{
  background:#0a0f1a;
}
.info-btn:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
}

/* Burbuja */
.info-btn::after{
  content: attr(data-info);
  position:absolute;
  z-index:500;
  pointer-events:none;
  opacity:0;
  transition:opacity .14s ease;
  min-width:220px;
  max-width:320px;
  padding:.6rem .7rem;
  border-radius:.55rem;
  background:#0b1220;
  color:#e5e7eb;
  border:1px solid #334155;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  left:50%;
  transform:translate(-50%, -8px);
  bottom:calc(100% + 10px);
  white-space:normal;
  font-size:.9rem;
}
.info-btn::before{
  content:"";
  position:absolute;
  z-index:501;
  opacity:0;
  transition:opacity .14s ease;
  left:50%;
  transform:translateX(-50%);
  bottom:calc(100% + 4px);
  border:6px solid transparent;
  border-top-color:#334155;
}
.info-btn[data-placement="right"]::after{
  left:calc(100% + 10px);
  bottom:auto;
  top:50%;
  transform:translate(0,-50%);
}
.info-btn[data-placement="right"]::before{
  left:calc(100% + 4px);
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-right-color:#334155;
}
.info-btn[data-placement="left"]::after{
  right:calc(100% + 10px);
  left:auto;
  top:50%;
  bottom:auto;
  transform:translate(0,-50%);
}
.info-btn[data-placement="left"]::before{
  right:calc(100% + 4px);
  left:auto;
  top:50%;
  bottom:auto;
  transform:translateY(-50%);
  border:6px solid transparent;
  border-left-color:#334155;
}
.info-btn[data-placement="bottom"]::after{
  top:calc(100% + 10px);
  bottom:auto;
  transform:translate(-50%, 8px);
}
.info-btn[data-placement="bottom"]::before{
  top:calc(100% + 4px);
  bottom:auto;
  border:6px solid transparent;
  border-bottom-color:#334155;
}
.info-btn.show::after,
.info-btn:focus-visible::after,
.info-btn:hover::after{
  opacity:1;
}
.info-btn.show::before,
.info-btn:focus-visible::before,
.info-btn:hover::before{
  opacity:1;
}

/* Ajustes para móvil: burbuja siempre arriba */
@media (max-width: 640px){
  .info-btn::after{
    left:50%;
    bottom:calc(100% + 10px);
    top:auto;
    transform:translate(-50%, -8px);
  }
  .info-btn::before{
    left:50%;
    bottom:calc(100% + 4px);
    top:auto;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:#334155;
  }
}

/* styles.css */
.groups__wrap{
  display:flex;
  align-items:center;
  gap:.5rem; /* espacio entre chips y el (i) */
  flex-wrap:wrap;
}

/* Fondo oscuro que cubre toda la pantalla */
.modal{
  display: none; /* Oculto por defecto */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6); /* Fondo semi-transparente */
  justify-content: center;
  align-items: center;
}

/* Contenido del modal */
.modal-content{
  position: relative;
  background: #1e1e1e;
  color: white;
  padding: 20px 40px 20px 20px;
  border-radius: 12px;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.5);
  animation: fadeIn 0.3s ease-in-out;
}

/* Botón cerrar (X) */
.close{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 22px;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  transition: color 0.2s;
}
.close:hover{
  color: #d63c3c;
}

/* Animación */
@keyframes fadeIn{
  from{
    transform: scale(0.8);
    opacity: 0;
  }
  to{
    transform: scale(1);
    opacity: 1;
  }
}

.group-row{
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.group-row__head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.group-row__title{
  font-weight: 600;
  margin: 0;
}
.group-row__count{
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}
.group-row__list{
  list-style: none;
  padding: 0;
  margin: 0;
}
.group-row__list li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 0;
}
.group-row__list .who{
  display:flex;
  gap:8px;
  align-items:center;
}
.group-row__list .actions{
  display:flex;
  gap:10px;
  align-items:center;
}
.group-row__list .since{
  opacity:.9;
}

.groups-stack{
  display:block;
}
.group-row{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.group-row__head{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:6px;
}
.group-row__title{
  margin:0;
  font-weight:600;
}
.group-row__list{
  list-style:none;
  margin:0;
  padding:0;
}
.group-row__list li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:4px 0;
}
.group-row__list .who{
  display:flex;
  gap:8px;
  align-items:center;
}
.group-row__list .actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Contenedor de columnas de grupos */
.groups-columns{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 320px));
  gap:20px;
  align-items:start;
  align-content:start;
  justify-content:center;
  margin:0 auto;
  width:100%;
  max-width:1280px;
}

.groups-headline{
  text-align:center;
  margin:24px 0 16px;
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:0.015em;
  color:rgba(220,224,255,0.88);
}

.guild-card.card--mini .groups-headline{
  display:none !important;
}

/* Columna de un grupo */
.group-col{
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:4px 0;
  width:100%;
  max-width:320px;
  margin:0 auto;
}
.group-col__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:8px;
  font-weight:600;
}
.group-col__title{
  margin:0;
}
.group-col__count{
  font-size:12px;
  padding:2px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}

/* Lista vertical dentro de cada columna */
.group-col__list{
  list-style:none;
  margin:0;
  padding:0;
}
.group-col__list li{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:6px 10px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.group-col__list .who{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 180px;
  min-width:0;
}
.group-col__list .lvl{
  opacity:.9;
}
.group-col__list .actions{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.group-col__list .actions .since{
  order:-1;
  flex:0 1 auto;
  opacity:.9;
}
.group-col__list .since{
  opacity:.9;
}

.group-sound{
  width:100%;
  background:rgba(32,33,68,0.55);
  border:1px solid rgba(114,118,182,0.35);
  border-radius:12px;
  padding:10px 14px;
  margin:8px 0 12px;
  box-shadow:0 4px 12px rgba(8,10,24,0.25);
  backdrop-filter:blur(4px);
  font-size:0.85rem;
  max-width:none;
}
.group-sound__summary{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  list-style:none;
  font-weight:600;
  color:#d9d3ff;
}
.group-sound__summary::-webkit-details-marker,
.group-sound__summary::marker{
  display:none;
}
.group-sound__summary::after{
  content:"▾";
  font-size:0.75rem;
  opacity:0.6;
  transition:transform .2s ease;
}
.group-sound[open] .group-sound__summary::after{
  transform:rotate(180deg);
}
.group-sound__content{
  margin-top:12px;
  display:grid;
  gap:12px;
}
.group-sound--disabled{
  opacity:0.65;
}
.group-sound__toggle{
  display:flex;
  align-items:center;
  gap:6px;
  font-weight:600;
}
.group-sound__field{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:0.78rem;
  color:rgba(216,215,255,0.85);
  align-items:flex-start;
}
.group-sound__field span{
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:0.7rem;
  opacity:0.65;
}
.group-sound__toggle input{
  accent-color:#7b6dff;
}
.group-sound__select{
  appearance:none;
  background:rgba(15,17,32,0.78);
  border:1px solid rgba(114,118,182,0.35);
  border-radius:8px;
  color:#f5f5ff;
  padding:6px 30px 6px 12px;
  height:32px;
  line-height:1.2;
  width:auto;
  max-width:100%;
  font-size:0.82rem;
  outline:none;
  transition:border-color .2s ease;
  display:inline-block;
}
.group-sound__select:focus{
  border-color:#9c90ff;
}
.group-sound__select{
  min-width:120px;
  flex:0 0 auto;
  align-self:flex-start;
  background-image:linear-gradient(45deg, transparent 50%, rgba(235,231,255,0.7) 50%),
                     linear-gradient(135deg, rgba(235,231,255,0.7) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat;
}
.group-sound__vol{
  display:flex;
  align-items:center;
  gap:6px;
}
.group-sound__vol input[type="range"]{
  background:rgba(15,17,32,0.78);
  border:1px solid rgba(114,118,182,0.35);
  border-radius:999px;
  width:140px;
  outline:none;
}
.group-sound__volval{
  font-size:0.75rem;
  font-variant-numeric:tabular-nums;
  color:rgba(182,188,255,0.85);
}
.group-sound__test{
  flex:0 0 auto;
  padding:4px 10px;
  background:rgba(123,109,255,0.2);
  border:1px solid rgba(123,109,255,0.35);
  border-radius:8px;
  color:#d9d3ff;
  transition:background .2s ease;
}
.group-sound__test:hover{
  background:rgba(123,109,255,0.35);
}

.group-filters{
  width:100%;
  background:rgba(32,33,68,0.55);
  border:1px solid rgba(114,118,182,0.35);
  border-radius:12px;
  padding:10px 14px;
  margin:8px 0 12px;
  box-shadow:0 4px 12px rgba(8,10,24,0.25);
  backdrop-filter:blur(4px);
  font-size:0.8rem;
}
.group-filters__summary{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  list-style:none;
  font-weight:600;
  color:#d9d3ff;
}
.group-filters__summary::-webkit-details-marker,
.group-filters__summary::marker{
  display:none;
}
.group-filters__summary::after{
  content:"▾";
  font-size:0.75rem;
  opacity:0.6;
  transition:transform .2s ease;
}
.group-filters[open] .group-filters__summary::after{
  transform:rotate(180deg);
}
.group-filters__content{
  margin-top:10px;
  display:grid;
  gap:12px;
}
.group-filters__section{
  border:0;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.group-filters__section legend{
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  opacity:0.58;
}
.group-filters__wrap{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.group-filt{
  display:flex;
  align-items:center;
  gap:6px;
  background:rgba(20,23,45,0.8);
  border:1px solid rgba(114,118,182,0.4);
  padding:6px 10px;
  border-radius:999px;
  transition:border-color .2s ease, background .2s ease;
}
.group-filt input{
  margin:0;
  accent-color:#7b6dff;
}
.group-filt .chip{
  font-size:0.68rem;
  padding:1px 6px;
  border-radius:999px;
  background:rgba(123,109,255,0.25);
  color:#d9d3ff;
}
.group-filt--radio{
  background:rgba(20,23,45,0.6);
  border-radius:10px;
  padding:6px 10px;
}
.group-filt--radio span{
  line-height:1.2;
  font-weight:500;
}

/* ===========================
   MOBILE FIXES (añadir al final)
   =========================== */

/* evita scroll horizontal accidental */
html, body{
  overflow-x: hidden;
}

/* menos ruido visual en móviles */
@media (max-width: 640px){
  #bg-phrases{
    display:none;
  }
  .logo{
    font-size: clamp(34px, 10vw, 52px);
  }
}

/* Topbar + búsqueda: apilar y full-width */
@media (max-width: 680px){
  .topbar{
    padding: 14px;
    min-height: unset;
  }
  .topbar__inner{
    gap: 12px;
  }
  .search{
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
  }
  .search > *{
    flex: 1 1 100%;
    min-width: 0;
  }
  .group-sound{
    flex-direction:column;
    align-items:flex-start;
  }
  .group-sound__select{
    width:100%;
    flex:1 1 100%;
  }
  .group-sound__vol{
    width:100%;
  }
  .group-sound__vol input[type="range"]{
    width:100%;
  }
  .group-filters__content{
    display:flex;
    flex-direction:column;
  }
  .group-filters__wrap{
    width:100%;
    gap:6px;
  }
  .group-filt{
    width:100%;
    justify-content:space-between;
  }
  .group-filt--radio{
    width:auto;
  }
  .card-controls > *{
    flex:1 1 100%;
    max-width:none;
  }
  #search-type,
  .search input,
  .search select,
  .search button{
    width: 100%;
  }
  body.has-search .topbar__inner{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
}

/* badge de usuario: más pequeño y respetando notch */
@media (max-width: 680px){
  .group-sound{
    max-width:100%;
  }
  .user-badge{
    right: max(10px, env(safe-area-inset-right));
    transform: scale(.94);
  }
}

/* Cards y encabezados más compactos */
@media (max-width: 640px){
  .content{
    padding: 12px;
  }
  .result-card{
    padding: 12px;
    border-radius: 12px;
  }
  .result-header{
    grid-template-columns: 1fr auto;
    grid-template-areas: "title actions" "meta meta";
    row-gap: 4px;
  }
  .result-header h2{
    font-size: 18px;
    line-height: 1.2;
    margin:0;
  }
  .result-header .meta{
    font-size: 13px;
    gap: 4px;
  }
  .result-header .actions{
    gap: 6px;
  }
}

/* === LISTA DE JUGADORES: 1 columna y sin cortes raros === */
:root{
  --card-min: 220px;
} /* baja el mínimo para caber en móvil */

.result-card .all-list{
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)) !important;
}
@media (max-width: 800px){
  .result-card .all-list{
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px){
  /* el <li> usa una sola columna clara */
  .result-card .all-list > li{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "title"
      "add"
      "copy"
      "time";
    row-gap: 8px;
  }
  .result-card .all-list .who{
    min-width: 0;
  }
  .result-card .all-list .who,
  .result-card .all-list .who a{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .result-card .all-list .copy-btn{
    opacity: 1;
    transform: none;
  } /* en táctil no hay hover */
}

/* Botonera de grupos: dos por fila y wrap correcto */
@media (max-width: 640px){
  .group-pick{
    display:flex;
    flex-wrap:wrap;
    gap: 6px 8px;
  }
  .group-pick .add-to-group,
  .group-pick .group-btn,
  .group-pick .btn-mini{
    flex: 1 1 calc(50% - 8px);
    max-width: 100%;
    white-space: nowrap;
  }
}

/* Columnas de grupos → 1 columna en móvil */
@media (max-width: 900px){
  .groups-columns{
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    max-width: 880px;
  }
  .group-col{
    max-width: none;
  }
  .group-col__list .actions{
    justify-content: flex-start;
  }
  .group-col__list .actions .since{
    flex: 1 1 100%;
    text-align: left;
  }
}
@media (max-width: 640px){
  .groups-columns{
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .group-col{
    max-width: none;
  }
  .group-col__list li{
    gap: 8px;
  }
  .group-col__list .actions{
    gap: 6px;
  }
}

/* Tarjetas de guild: mini-grid más legible en móvil */
@media (max-width: 640px){
  #tables{
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .guild-card .result-header{
    grid-template-columns: 1fr auto;
    grid-template-areas: "title actions" "meta meta";
    row-gap: 4px;
  }
  .guild-card.card--expanded{
    grid-column: 1 / -1;
  }
}

/* Evita que chips y textos empujen el layout */
@media (max-width: 640px){
  .groups__wrap,
  .filters__wrap{
    gap: 6px;
  }
  .chip{
    padding: .25rem .55rem;
    font-size: 12px;
  }
  .result-card .filters .filt{
    padding: .26rem .55rem;
  }
}

/* Sliders y botones tocables */
@media (max-width: 640px){
  .settings-panel{
    padding: 10px;
  }
  .settings-row{
    display: block;
  }
  .settings-row input[type="range"]{
    width: 100%;
    height: 28px;
  }
  .settings-row .test-sound-btn{
    width: 100%;
  }
}

/* En sticky, respeta safe areas en iOS */
@supports (padding: max(0px)){
  body.has-search .topbar{
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
}

/* =============================
   DESKTOP – Vista MINI mejorada
   (no afecta a .card--expanded)
   ============================= */
@media (min-width: 1024px){
  /* 2 columnas anchas y centradas */
  #tables{
    display: grid;
    grid-template-columns: repeat(2, minmax(520px, 1fr)) !important;
    gap: 18px;
    justify-content: center; /* centra las 2 columnas */
    align-content: start;
  }

  /* Las tarjetas EXPANDIDAS siguen ocupando toda la fila */
  #tables .guild-card.card--expanded{
    grid-column: 1 / -1;
  }

  /* --- Tarjeta mini más grande/legible --- */
  .guild-card.card--mini{
    padding: 16px 16px 12px;
    border-radius: 14px;
    outline: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
  }
  .guild-card.card--mini .mini-head{
    margin-bottom: 10px;
    gap: 10px;
  }
  .guild-card.card--mini .mini-head .name{
    font-size: 18px; /* antes 15px */
    font-weight: 750;
    letter-spacing: .2px;
  }
  .guild-card.card--mini .mini-head .world{
    font-size: 13px; /* +1px */
    opacity: .8;
  }
  .guild-card.card--mini .mini-stats{
    gap: 10px;
    margin-bottom: 10px;
  }
  .guild-card.card--mini .chip{
    padding: 6px 10px; /* +2px */
    font-size: 13px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.06);
  }
  .guild-card.card--mini .mini-total{
    font-size: 13.5px; /* +1.5px */
    opacity: .95;
  }

  /* filas internas un poco más aireadas */
  .groups-list-wrap .group-list > li{
    padding: 10px 12px;
  }
}

/* Ultra-wide (opcional): mantenemos 2 columnas y aumentamos el ancho mínimo */
@media (min-width: 1440px){
  #tables{
    grid-template-columns: repeat(2, minmax(600px, 1fr)) !important;
    gap: 20px;
  }
}

/* Tablet/portátiles pequeños: aún 2 columnas pero algo más estrechas */
@media (min-width: 900px) and (max-width: 1023px){
  #tables{
    grid-template-columns: repeat(2, minmax(460px, 1fr)) !important;
  }
}

/* ============================
   EXPANDED CARD – Polished UI
   ============================ */

/* Piel general de la tarjeta abierta */
.guild-card.card--expanded.result-card{
  padding: 18px 18px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(11,16,32,.96) 0%, rgba(8,12,24,.96) 100%);
  box-shadow: 0 12px 34px rgba(0,0,0,.35);
}

/* Encabezado compacto + jerarquía clara */
.guild-card.card--expanded .result-header h2{
  font-size: 22px;
  letter-spacing: .2px;
}
.guild-card.card--expanded .result-header{
  position: relative;
  z-index: 600;
}
.guild-card.card--expanded .result-header .meta{
  gap: 12px;
  opacity: .95;
}

/* ===== Columnas (Main / Bombas / KS / other) ===== */
.guild-card.card--expanded .col{
  padding: 10px 10px 4px;
  border: 1px solid rgba(148,163,184,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.02);
}
.guild-card.card--expanded .col h3{
  display:flex;
  align-items:center;
  gap:8px;
  font-weight: 700;
  font-size: 15px;
  color:#e5e7eb;
  margin-bottom: 8px;
}
.guild-card.card--expanded .col .count{
  background: rgba(96,165,250,.16);
  color:#bfdbfe;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* ===== Filas de jugador: layout + hover ===== */
.guild-card.card--expanded .col li{
  /* grid consistente: nombre | acciones | tiempo */
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "who actions since";
  align-items: center;
  gap: 10px 12px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.guild-card.card--expanded .col li:hover{
  background: rgba(96,165,250,.06);
  border-color: rgba(96,165,250,.25);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.20);
}
.guild-card.card--expanded .col .who{
  grid-area: who;
  min-width: 0;
}
.guild-card.card--expanded .col .actions{
  grid-area: actions;
}
.guild-card.card--expanded .col .since{
  grid-area: since;
}

/* Nombre + lvl más legibles, con chip */
.guild-card.card--expanded .col .who a{
  color:#e5e7eb;
  text-decoration: none;
  font-weight: 650;
}
.guild-card.card--expanded .col .lvl{
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 700;
  color: #052e16;
  background: #86efac; /* verde suave */
  box-shadow: 0 0 0 1px rgba(34,197,94,.25) inset;
}

/* Tiempo estable, mismo ancho para alinear todo */
.guild-card.card--expanded .col .since{
  opacity: .9;
  font-variant-numeric: tabular-nums;
  min-width: 84px; /* alinea verticalmente todos los tiempos */
  text-align: right;
}

/* Botones: “Copiar” ghost agradable + eliminar rojo discreto */
.guild-card.card--expanded .copy-btn{
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(255,255,255,.05);
  color: #e5e7eb;
  font-weight: 600;
}
.guild-card.card--expanded .copy-btn:hover{
  border-color: rgba(139,92,246,.45);
  background: rgba(139,92,246,.18);
  color: #fff;
}
.guild-card.card--expanded .btn-mini.danger{
  border-color: rgba(248,113,113,.35);
  color: #fecaca;
  background: rgba(248,113,113,.10);
}
.guild-card.card--expanded .btn-mini.danger:hover{
  background: rgba(248,113,113,.18);
}

/* Icono de reloj ligeramente atenuado (si lo usas) */
.guild-card.card--expanded .actions .clock{
  opacity:.8;
}

/* ===== Panel de ajustes: “card” clara y ordenado ===== */
.guild-card.card--expanded .settings-panel{
  backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.03));
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 12px;
  padding: 12px;
  gap: 10px;
  overflow: visible; /* permite que los tooltips salgan del panel */
}
.guild-card.card--expanded .settings-row{
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto;
  align-items: center;
  gap: 10px 12px;
}
.guild-card.card--expanded .settings-row label{
  color:#d1d5db;
  font-weight: 600;
}

/* Sliders con carril más visible */
.guild-card.card--expanded .settings-row input[type="range"]{
  height: 8px;
  background: rgba(148,163,184,.20);
}
.guild-card.card--expanded .settings-row input[type="range"]::-webkit-slider-thumb{
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 3px rgba(139,92,246,.25);
}
.guild-card.card--expanded .settings-row input[type="range"]::-moz-range-thumb{
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 3px rgba(139,92,246,.25);
}

/* Botón “Probar” como pill primario sutil */
.guild-card.card--expanded .settings-row .test-sound-btn{
  border-color: rgba(139,92,246,.35);
  background: rgba(139,92,246,.18);
  color:#ede9fe;
  font-weight: 700;
}
.guild-card.card--expanded .settings-row .test-sound-btn:hover{
  background: rgba(139,92,246,.26);
  border-color: rgba(139,92,246,.55);
}

/* ===== Chips de vocaciones: look “tag” cohesivo ===== */
.guild-card.card--expanded .groups__wrap .chip{
  padding: .35rem .7rem;
  border-radius: 999px;
  border-color: rgba(148,163,184,.22);
  background: rgba(255,255,255,.04);
  font-weight: 600;
}
.guild-card.card--expanded .groups__wrap .chip.active{
  background: rgba(96,165,250,.16);
  border-color: rgba(96,165,250,.45);
  color:#dbeafe;
  box-shadow: 0 0 0 2px rgba(96,165,250,.12) inset;
}

/* ===== Responsivo interno de la tarjeta expandida ===== */
@media (max-width: 1100px){
  .guild-card.card--expanded .settings-row{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 820px){
  .guild-card.card--expanded .col li{
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "who actions"
      "since since";
  }
  .guild-card.card--expanded .col .since{
    justify-self: start;
    text-align: left;
    margin-left: 2px;
    min-width: 0;
  }
}

/* ──────────────────────────────────────────────
   1) INFO (i) — tamaño, posición y accesibilidad
   ────────────────────────────────────────────── */
.guild-card.card--expanded .settings-row{
  position: relative;
  padding-right: 42px; /* deja hueco al (i) a la derecha */
}

/* botón (i) consistente */
.guild-card.card--expanded .settings-row .info-btn{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px; /* tamaño uniforme */
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid #475569;
  background:#0b1220;
  color:#93c5fd;
}
.guild-card.card--expanded .settings-row .info-btn:hover{
  background:#0a0f1a;
  border-color:#5b6b7e;
}
.guild-card.card--expanded .settings-row .info-btn:focus-visible{
  outline:2px solid #60a5fa;
  outline-offset:2px;
}

/* tooltips un poco más legibles dentro del panel */
.guild-card.card--expanded .settings-row .info-btn::after{
  max-width: 360px;
  font-size: .92rem;
  z-index: 520;
}
.guild-card.card--expanded .settings-row .info-btn::before{
  z-index: 521;
}

.meta-tools {
  position: relative;
}
.meta-tools .info-btn{
  margin-left: 0.6rem;
}

/* ──────────────────────────────────────────────
   2) SONIDO / TONO — espaciado y alineación
   ────────────────────────────────────────────── */
/* filas del panel con look de “sub-card” y grid claro */
.guild-card.card--expanded .settings-panel{
  gap: 12px;
}
.guild-card.card--expanded .settings-row{
  display: grid;
  grid-template-columns: minmax(220px,1fr) auto auto;
  align-items: center;
  column-gap: 12px;
  padding: 2px 8px;
  background: rgba(255,255,255,.02);
  border-radius: 10px;
}

/* quita márgenes “fantasma” entre controles */
.guild-card.card--expanded .settings-row > *{
  margin: 0 !important;
}

/* checkbox + label “Sonido” en línea, sin saltos */
.guild-card.card--expanded .settings-row label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color:#d1d5db;
}

/* select Tono y botón Probar compactos */
.guild-card.card--expanded .settings-row select{
  height: 36px;
  padding: 6px 34px 6px 10px;
}
.guild-card.card--expanded .settings-row .test-sound-btn{
  height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

/* responsive interno: cuando no quepa, que haga wrap limpio */
@media (max-width: 980px){
  .guild-card.card--expanded .settings-row{
    grid-template-columns: 1fr 1fr;
    row-gap: 10px;
  }
}

/* ──────────────────────────────────────────────
   3) COLUMNAS — fondo con tinte por sección
   ────────────────────────────────────────────── */
/* base de la “tarjeta columna” */
.guild-card.card--expanded .col{
  padding: 10px 10px 4px;
  border-radius: 12px;
  border: 1px solid var(--col-bd, rgba(148,163,184,.12));
  background: var(--col-bg, rgba(255,255,255,.02));
}

/* 1=Main (indigo) */
.guild-card.card--expanded .col:nth-of-type(1){
  --col-bg: rgba(139,92,246,.07);
  --col-bd: rgba(139,92,246,.22);
}
/* 2=Bombas (sky) */
.guild-card.card--expanded .col:nth-of-type(2){
  --col-bg: rgba(56,189,248,.08);
  --col-bd: rgba(56,189,248,.25);
}
/* 3=KS (amber) */
.guild-card.card--expanded .col:nth-of-type(3){
  --col-bg: rgba(234,179,8,.08);
  --col-bd: rgba(234,179,8,.25);
}
/* 4=other (emerald) */
.guild-card.card--expanded .col:nth-of-type(4){
  --col-bg: rgba(16,185,129,.08);
  --col-bd: rgba(16,185,129,.24);
}

/* encabezados y chips de cantidad combinados con el tinte */
.guild-card.card--expanded .col h3{
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  color:#e5e7eb;
  display:flex;
  align-items:center;
  gap:8px;
}
.guild-card.card--expanded .col .count{
  background: rgba(255,255,255,.14);
  color:#f1f5f9;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}

/* filas “pill” dentro de cada columna */
.guild-card.card--expanded .col li{
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas: "who actions since";
  align-items: center;
  gap: 10px 12px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
}
.guild-card.card--expanded .col li + li{
  margin-top: 6px;
}
.guild-card.card--expanded .col li:hover{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.18);
}
.guild-card.card--expanded .col .who{
  grid-area: who;
  min-width: 0;
}
.guild-card.card--expanded .col .actions{
  grid-area: actions;
}
.guild-card.card--expanded .col .since{
  grid-area: since;
  opacity:.9;
  font-variant-numeric: tabular-nums;
  min-width: 84px; /* alinea verticalmente los tiempos */
  text-align: right;
}

/* lvl como chip suave (se mantiene tu verde) */
.guild-card.card--expanded .col .lvl{
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #d9f99d;
  color: #052e16;
  font-weight: 700;
  box-shadow: 0 0 0 1px rgba(132,204,22,.25) inset;
}

/* ===============================
   SETTINGS ROW (sonido / tono / i)
   =============================== */

/* Estructura general */
.guild-card.card--expanded .settings-row{
  display: grid;
  grid-template-columns: auto 1fr auto auto; /* label | select | button | info */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 10px;
  position: relative;
}

/* Label con checkbox (Sonido) */
.guild-card.card--expanded .settings-row label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color:#d1d5db;
  white-space: nowrap;
  margin: 0;
}

/* Select (Tono) */
.guild-card.card--expanded .settings-row select{
  height: 34px;
  padding: 4px 30px 4px 10px;
  margin: 0;
}

/* Botón Probar */
.guild-card.card--expanded .settings-row .test-sound-btn{
  height: 34px;
  padding: 0 12px;
  margin: 0;
  white-space: nowrap;
}

/* Botón (i) al final */
.guild-card.card--expanded .settings-row .info-btn{
  margin-left: auto; /* empuja al final */
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid #475569;
  background:#0b1220;
  color:#93c5fd;
  font-size: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.guild-card.card--expanded .settings-row .info-btn:hover{
  background:#0a0f1a;
  border-color:#5b6b7e;
}

/* Responsive: si no cabe, apila en 2 filas limpias */
@media (max-width: 800px){
  .guild-card.card--expanded .settings-row{
    grid-template-columns: 1fr 1fr auto auto;
    row-gap: 8px;
  }
}

/* --- Reset: que el (i) no sea absoluto en ninguna fila --- */
.guild-card.card--expanded .settings-row .info-btn{
  position: static !important;
  transform: none !important;
}

/* --- Fila específica de sonido (la que tiene el botón Probar) --- */
.guild-card.card--expanded .settings-row:has(.test-sound-btn){
  display: flex !important; /* una sola línea fluida */
  align-items: center;
  gap: 10px; /* separaciones cortas */
  padding: 10px 12px;
}

/* Sonido (checkbox + label) compacto */
.guild-card.card--expanded .settings-row:has(.test-sound-btn) label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  white-space: nowrap;
}

/* “Tono” y su select */
.guild-card.card--expanded .settings-row:has(.test-sound-btn) select{
  height: 34px;
  padding: 4px 30px 4px 10px;
  margin: 0;
  max-width: 240px; /* evita que se coma todo el ancho */
}

/* Botón Probar visible y alineado */
.guild-card.card--expanded .settings-row:has(.test-sound-btn) .test-sound-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 12px;
  margin: 0;
  white-space: nowrap;
}

/* (i) siempre al extremo derecho */
.guild-card.card--expanded .settings-row:has(.test-sound-btn) .info-btn{
  margin-left: auto; /* empuja al final */
  width: 22px;
  height: 22px;
}

/* Responsive: si no cabe, se parte en 2 filas limpias */
@media (max-width: 800px){
  .guild-card.card--expanded .settings-row:has(.test-sound-btn){
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .guild-card.card--expanded .settings-row:has(.test-sound-btn) .info-btn{
    margin-left: 0;
    order: 99; /* aún queda al final */
  }
}

/* === Tooltips (i) anclados al propio botón === */
.guild-card.card--expanded .settings-row .info-btn{
  position: relative !important; /* <- clave: el ::after/::before se referencian a este botón */
  margin-left: auto; /* sigue quedando al final de la fila */
  z-index: 2; /* por si hay superposiciones */
}

/* Opcional: si quieres que por defecto salga ARRIBA y centrado del botón */
.guild-card.card--expanded .settings-row .info-btn::after{
  left: 50% !important;
  right: auto !important;
  bottom: calc(100% + 10px) !important;
  top: auto !important;
  transform: translate(-50%, -8px) !important;
}
.guild-card.card--expanded .settings-row .info-btn::before{
  left: 50% !important;
  right: auto !important;
  bottom: calc(100% + 4px) !important;
  top: auto !important;
  transform: translateX(-50%) !important;
  border: 6px solid transparent !important;
  border-top-color:#334155 !important;
}

/* === Fila de Sonido / Tono / Probar: una sola línea, centrada === */
.guild-card.card--expanded .settings-row:has(.test-sound-btn){
  display: flex !important;
  align-items: center; /* centra verticalmente todo */
  flex-wrap: nowrap;   /* evita que algo salte abajo */
  gap: 8px;           /* menos espacio entre items */
}

/* que nada “empuje” al resto */
.guild-card.card--expanded .settings-row:has(.test-sound-btn) label{
  flex: 0 0 auto; /* tamaño natural del label+checkbox */
  white-space: nowrap;
}
.guild-card.card--expanded .settings-row:has(.test-sound-btn) select{
  flex: 0 1 220px; /* puede encoger hasta 220px */
  min-width: 160px; /* pero no menos de esto */
  height: 34px;
  padding: 4px 30px 4px 10px;
}
.guild-card.card--expanded .settings-row:has(.test-sound-btn) .test-sound-btn{
  flex: 0 0 auto;
  height: 34px;
  padding: 0 12px;
  white-space: nowrap;
}

/* empuja el (i) al extremo derecho sin que caiga */
.guild-card.card--expanded .settings-row:has(.test-sound-btn) .info-btn{
  flex: 0 0 auto;   /* no se estira ni se encoge */
  align-self: center; /* por si acaso */
  margin-left: auto;  /* lo manda al final de la fila */
  width: 22px;
  height: 22px;
  line-height: 22px; /* ayuda a que no "baje" ópticamente */
}

/* Si la pantalla es muy estrecha, permitimos un wrap elegante */
@media (max-width: 900px){
  .guild-card.card--expanded .settings-row:has(.test-sound-btn){
    flex-wrap: wrap;
  }
  .guild-card.card--expanded .settings-row:has(.test-sound-btn) .info-btn{
    margin-left: 0;
    order: 99; /* seguirá quedando al final visualmente */
  }
}

/* Centra verticalmente TODOS los (i) dentro de filas del panel */
.guild-card.card--expanded .settings-row{
  align-items: center; /* garantizamos centrado vertical */
}
.guild-card.card--expanded .settings-row .info-btn{
  display: inline-flex; /* caja exacta del icono */
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  line-height: 1; /* evita que “empuje” hacia abajo */
  padding: 0;
  border-radius: 999px;
  /* micro-ajuste óptico para pantallas/ fuentes que lo “bajan” */
  transform: translateY(-1px); /* súbelo 1px; quítalo si no hace falta */
}

/* En la fila SONIDO, que el (i) vaya al final sin caer */
.guild-card.card--expanded .settings-row:has(.test-sound-btn){
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}
.guild-card.card--expanded .settings-row:has(.test-sound-btn) .info-btn{
  margin-left: auto; /* lo empuja al extremo derecho */
  align-self: center; /* asegura centrado vertical */
}

/* Por si algún (i) llevaba line-height heredado de estilos previos */
.guild-card.card--expanded .settings-row .info-btn *,
.guild-card.card--expanded .settings-row .info-btn::before{
  line-height: 1 !important;
}

.guild-card.card--expanded .settings-row .info-btn{
  position: sticky !important;
}
.group-sound__summary:hover,
.group-filters__summary:hover{
  color:#ebe7ff;
}


/* ========== Language switcher ========== */

.lang-bar{
  position: relative;
}
.lang-switcher {
  position: absolute;   /* relativo al body */
  top: 8vh;             /* distancia desde arriba */
  right: 5%;            /* margen derecho */
  display: inline-flex;
  align-items: center;
  z-index: 100;
}





/* Botón “globo” */
#lang-btn {
  --btn-bg: rgba(255,255,255,0.06);
  --btn-bg-hover: rgba(255,255,255,0.12);
  --btn-bg-active: rgba(255,255,255,0.16);
  --btn-border: rgba(255,255,255,0.08);
  --btn-shadow: 0 2px 10px rgba(0,0,0,0.25);
  --ring: 0 0 0 3px rgba(80, 170, 255, 0.35);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 34px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  cursor: pointer;
  transition: background .15s ease, transform .06s ease, border-color .15s ease;
  outline: none;
  user-select: none;
}

/* Icono dentro del botón (si usas <svg> o emoji) */
#lang-btn > svg {
  width: 18px;
  height: 18px;
  opacity: .9;
}

/* Estados */
#lang-btn:hover { background: var(--btn-bg-hover); }
#lang-btn:active { background: var(--btn-bg-active); transform: translateY(1px); }
#lang-btn:focus-visible { box-shadow: var(--ring); }

/* Menú desplegable */
.lang-menu {
  --menu-bg: #111827;           /* gris muy oscuro */
  --menu-border: rgba(255,255,255,0.08);
  --menu-shadow: 0 12px 30px rgba(0,0,0,0.35);
  --menu-item: rgba(255,255,255,0.85);
  --menu-item-muted: rgba(255,255,255,0.65);
  --menu-hover: rgba(255,255,255,0.06);
  --menu-active: rgba(255,255,255,0.10);

  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 180px;
  padding: 6px;
  margin: 0;
  list-style: none;
  background: var(--menu-bg);
  border: 1px solid var(--menu-border);
  border-radius: 12px;
  box-shadow: var(--menu-shadow);
  z-index: 1000;
  backdrop-filter: saturate(140%) blur(6px);
  transform-origin: top right;
  /* Animación de aparición */
  opacity: 0;
  transform: scale(.98) translateY(-4px);
  transition: opacity .12s ease, transform .12s ease;
}

/* Mostrar (cuando el elemento NO está hidden) */
.lang-menu:not([hidden]) {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Items */
.lang-menu [role="option"] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--menu-item);
  cursor: pointer;
  white-space: nowrap;
  outline: none;
  transition: background .12s ease, color .12s ease;
}

.lang-menu [role="option"] + [role="option"] {
  margin-top: 4px;
}

.lang-menu [role="option"]:hover { background: var(--menu-hover); }
.lang-menu [role="option"]:active { background: var(--menu-active); }
.lang-menu [role="option"]:focus-visible {
  box-shadow: 0 0 0 3px rgba(80,170,255,0.35) inset;
}

/* Etiqueta del idioma actual (opcional, si la añades con un data-attr) */
.lang-menu [role="option"][aria-selected="true"] {
  color: #9bd1ff;
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  #lang-btn, .lang-menu, .lang-menu [role="option"] {
    transition: none !important;
  }
}

/* Alineación en el topbar */
.topbar { margin-left: auto; } /* si quieres empujarlo a la derecha */


/* ===== Footer mejorado: 1/4 pantalla + barra © sticky ===== */
:root{
  --footer-bg: #0f1115;
  --footer-fg: #e7e9ee;
  --footer-muted: #b7becc;
  --footer-border: rgba(255,255,255,.08);
  --footer-link: #a9c7ff;         /* acento enlaces */
  --footer-bar-h: 48px;            /* alto de la barra © */
}

.site-footer{
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--footer-border);
  margin-top: 3rem;
  min-height: 25vh;                /* “ocupar” 1/4 de pantalla al llegar */
}

.site-footer__inner{
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: 1.3fr 1fr 1fr;   /* 1ª columna un poco más ancha */
  padding: 2rem 1rem;
  padding-bottom: calc(2rem + var(--footer-bar-h) + 8px); /* que no tape la barra sticky */
  max-width: 1200px;
  margin: 0 auto;
}

/* Barra inferior © fija */
.site-footer__bar{
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15,17,21,0) 0%, rgba(15,17,21,.85) 25%, var(--footer-bg) 70%);
  border-top: 1px solid var(--footer-border);
  height: var(--footer-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  text-align: center;
  color: var(--footer-muted);
}

/* Tipografía y ritmo vertical */
.footer-col{ display:flex; flex-direction:column; gap:.55rem; }
.footer-col p{ margin:0 0 .75rem; }
.site-footer .footer-title{
  font-size: 1rem; font-weight: 700; letter-spacing:.02em; margin:0 0 .5rem;
  color:#fff;
}
.site-footer .footer-subtitle{
  font-size:.9rem; font-weight:600; margin:1rem 0 .35rem; color:#c8d2e0;
}

/* Listas limpias (sin viñetas nativas) con marcador sutil */
.site-footer ul{ 
  list-style:none; padding-left:0; margin:0; display:grid; gap:.35rem;
}
.site-footer ul li{
  display:flex; gap:.5rem; align-items:baseline;
}
.site-footer ul li::before{
  content:"•"; opacity:.35; transform:translateY(-1px);
}

/* Enlaces coherentes con el tema oscuro */
.site-footer a,
.site-footer a:link,
.site-footer a:visited{
  color: var(--footer-link);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Utilidades */
.small{ font-size:.92rem; line-height:1.55; color:#d6dae3; }
.tiny{ font-size:.8rem; line-height:1.3; color:var(--footer-muted); }
.muted{ color:var(--footer-muted); }

.btn-privacy{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .75rem; border-radius:.5rem;
  border:1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color:#e7e9ee; cursor:pointer;
}
.btn-privacy:hover{ background: rgba(255,255,255,.12); }

/* 1ª columna más legible en párrafos largos */
.site-footer .footer-col:first-child{ max-width: 60ch; }

/* Responsive */
@media (max-width: 1100px){
  .site-footer__inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 800px){
  .site-footer__inner{ grid-template-columns: 1fr; }
  .site-footer ul li::before{ content: none; } /* sin marcadores en móvil */
}

/* ===== Footer: barra © visible siempre al cargar + contenido aparece al scrollear ===== */
:root{
  --footer-bg: #0f1115;
  --footer-fg: #e7e9ee;
  --footer-muted: #b7becc;
  --footer-border: rgba(255,255,255,.08);
  --footer-link: #a9c7ff;

  /* Altura mínima cómoda para que quepa el texto de © (ajusta si usas tipografía más grande) */
  --footer-bar-h: 56px;

  /* Empuja el inicio del footer más abajo. Sube/baja este valor hasta que NO se vea el bloque superior al cargar. */
  --footer-offset: clamp(12rem, 22vh, 40rem);
}

.site-footer{
  background: var(--footer-bg);
  color: var(--footer-fg);
  border-top: 1px solid var(--footer-border);

  /* Empuja el footer para que, al entrar en viewport, solo veas la barra © */
  margin-top: var(--footer-offset);
}

.site-footer__inner{
  display: grid;
  gap: 2rem 3rem;
  grid-template-columns: 1.3fr 1fr 1fr;
  padding: 2rem 1rem;

  /* Evita que la barra sticky tape el contenido cuando haces scroll dentro del footer */
  padding-bottom: calc(2rem + var(--footer-bar-h) + 8px);
  max-width: 1200px;
  margin: 0 auto;
}

/* Barra inferior © sticky y con alto suficiente para el texto */
.site-footer__bar{
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(15,17,21,0) 0%, rgba(15,17,21,.85) 25%, var(--footer-bg) 70%);
  border-top: 1px solid var(--footer-border);
  min-height: var(--footer-bar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem 1rem;            /* espacio para que no se corte en ninguna resolución */
  text-align: center;
  color: var(--footer-muted);
}

/* ===========================
   Estilos globales para páginas legales / docs
   (privacy.html, cookies.html, earning.html, legal.html)
   =========================== */

:root{
  --doc-fg: #e7e9ee;
  --doc-muted: #c3c9d6;
  --doc-soft: rgba(255,255,255,.08);
  --doc-softer: rgba(255,255,255,.05);
  --doc-accent: #a9c7ff;
}

/* Quita subrayado morado del logo en header de páginas de texto */
.topbar .logo a{
  color: inherit;
  text-decoration: none;
}
.topbar .logo a:hover{ opacity: .9; }

/* Contenedor principal de las páginas legales
   (tus HTML ya usan <main class="content">) */
main.content{
  max-width: 900px;       /* refuerza el ancho para docs */
  margin: 2.25rem auto;
  padding: 0 1rem;
}

/* Tipografía y jerarquía */
main.content h1{
  font-size: clamp(1.9rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  font-weight: 800;
  margin: .25rem 0 1rem;
  letter-spacing: .2px;
}
main.content h2{
  font-size: clamp(1.2rem, 1.4vw, 1.45rem);
  line-height: 1.35;
  font-weight: 700;
  margin: 2rem 0 .75rem;
  padding-bottom: .35rem;
  border-bottom: 1px dashed var(--doc-soft);
}
main.content h3{
  font-size: clamp(1.05rem, 1.2vw, 1.15rem);
  font-weight: 650;
  margin: 1.25rem 0 .5rem;
}

main.content p,
main.content li{
  color: var(--doc-fg);
  line-height: 1.7;
}
main.content .small{ color: var(--doc-muted); }

main.content ul,
main.content ol{
  padding-left: 1.2rem;
  margin: .5rem 0 1rem;
}
main.content li{ margin: .3rem 0; }

/* Enlaces en docs */
main.content a{
  color: var(--doc-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(169,199,255,.45);
}
main.content a:hover{
  text-decoration-color: currentColor;
}

/* Tablas (cookies) */
main.content table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: .95rem;
}
main.content table th,
main.content table td{
  border: 1px solid var(--doc-soft);
  padding: .6rem .75rem;
  vertical-align: top;
}
main.content table thead th{
  background: var(--doc-softer);
  text-align: left;
  font-weight: 700;
}
main.content table tbody tr:nth-child(even){
  background: rgba(255,255,255,.03);
}
/* Scroll horizontal en móvil si la tabla desborda */
@media (max-width: 720px){
  main.content table{ display: block; overflow-x: auto; white-space: nowrap; }
}

/* Separadores y notas */
main.content hr{
  border: 0;
  height: 1px;
  background: var(--doc-soft);
  margin: 2rem 0 1rem;
}

/* Botón de preferencias (reutiliza tu estilo si ya existe) */
main.content .btn-privacy{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem .85rem;
  border-radius: .6rem;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: #e7e9ee;
  cursor: pointer;
}
main.content .btn-privacy:hover{ background: rgba(255,255,255,.12); }

/* Que los anclajes no queden ocultos si usas header sticky */
main.content h2,
main.content h3{ scroll-margin-top: 96px; }

/* Impresión limpia */
@media print{
  .topbar, .site-footer__bar { display: none !important; }
  main.content{
    max-width: none; margin: 0; padding: 0;
    color: #000;
  }
  main.content a{ color: #000; text-decoration: underline; }
  body{ background: #fff; }
}

/* Flecha de retorno fija arriba-izquierda */
.back-arrow{
  position: fixed;
  top: 14px;          /* baja/sube esta cifra si quieres */
  left: 14px;
  z-index: 1000;      /* por encima del header */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #e7e9ee;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: transform .15s ease, background .15s ease, box-shadow .2s;
}
.back-arrow:hover{ background: rgba(255,255,255,.14); transform: translateY(-1px); }
.back-arrow:active{ transform: translateY(0); }
.back-arrow:focus-visible{ outline: 2px solid #a9c7ff; outline-offset: 2px; }
.back-arrow svg{ display:block; }

/* Ajuste en pantallas pequeñas */
@media (max-width: 640px){
  .back-arrow{ top: 10px; left: 10px; width: 36px; height: 36px; }
}

/* Si tu header tiene fondo muy claro, puedes reforzar el contraste así: */
/* .topbar--static ~ .back-arrow{ box-shadow: 0 2px 10px rgba(0,0,0,.35); } */

/* Respeta preferencias de reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .back-arrow{ transition: none; }
}

.banner-left, .banner-right {
  position: fixed;
  top: 100px;
  width: 160px;
  height: 600px;
}
.banner-left {
  left: 10px;
}
.banner-right {
  right: 10px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.cookie-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 1.5rem;
  z-index: 4000;
  display: flex;
  justify-content: center;
  pointer-events: none;
  padding: 0 1rem;
}

.cookie-consent__box {
  background: rgba(22, 27, 34, 0.95);
  color: #fff;
  border-radius: 12px;
  max-width: 560px;
  width: 100%;
  padding: 1.5rem;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  pointer-events: auto;
}

.cookie-consent__box h2 {
  font-size: 1.25rem;
  margin: 0 0 0.75rem;
}

.cookie-consent__box p {
  margin: 0 0 1rem;
  line-height: 1.5;
}

.cookie-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cookie-consent__actions .btn-primary,
.cookie-consent__actions .btn-muted {
  flex: 1 1 auto;
  min-width: 140px;
}

.cookie-preferences {
  position: fixed;
  inset: 0;
  background: rgba(5, 7, 10, 0.72);
  z-index: 4500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.cookie-preferences__box {
  max-width: 720px;
  width: 100%;
  background: #0e1016;
  color: #f6f8fa;
  border-radius: 16px;
  padding: 2rem;
  position: relative;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.cookie-preferences__box h2 {
  margin-top: 0;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.cookie-preferences__box p {
  margin-top: 0;
  line-height: 1.6;
}

.cookie-preferences__form {
  margin: 1.5rem 0;
}

.cookie-preferences__form fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookie-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.cookie-toggle__title {
  font-weight: 600;
  display: block;
  margin-bottom: 0.35rem;
}

.cookie-toggle__desc {
  font-size: 0.9rem;
  color: #c9d1d9;
  line-height: 1.4;
}

.cookie-toggle input[type="checkbox"] {
  width: 2.5rem;
  height: 1.3rem;
  accent-color: #3ba55c;
}

.cookie-preferences__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cookie-preferences__footer-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cookie-preferences__legal {
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: #9ba3af;
}

.cookie-preferences__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #9ba3af;
  font-size: 1.5rem;
  cursor: pointer;
}

@media (max-width: 640px) {
  .cookie-consent__box {
    padding: 1.25rem;
  }
  .cookie-consent__actions {
    flex-direction: column;
  }
  .cookie-preferences {
    padding: 0.75rem;
  }
  .cookie-preferences__box {
    padding: 1.5rem;
  }
  .cookie-toggle {
    flex-direction: column;
    align-items: flex-start;
  }
  .cookie-toggle input[type="checkbox"] {
    align-self: flex-end;
  }
  .cookie-preferences__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-preferences__footer-buttons {
    width: 100%;
    flex-direction: column;
  }
  .cookie-preferences__footer-buttons button {
    width: 100%;
  }
}