/* Rediseño compacto: social (Clan y Amigos) · prefijo cl- */

/* ---------- avatar pequeño (clan y amigos) ---------- */
.cl-av { --s: 40px; position: relative; flex: none; width: var(--s); height: var(--s); border-radius: 10px; display: grid; place-items: center; overflow: visible;
  background: linear-gradient(160deg, hsl(var(--h, 30) 45% 72%), hsl(var(--h, 30) 40% 52%)); box-shadow: inset 0 -3px 0 rgba(0,0,0,.15), 0 0 0 2px #fffaf0; }
.cl-av b { font: 900 calc(var(--s) * .46) / 1 'Nunito', sans-serif; color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.cl-av.img { background: linear-gradient(180deg, #fff3dc, #ead8b4); }
.cl-av canvas { width: 100%; height: 100%; border-radius: 10px; image-rendering: pixelated; }
.cl-av-dot { position: absolute; right: -3px; bottom: -3px; width: 12px; height: 12px; border-radius: 50%; background: #b9a27e; border: 2px solid #fffaf0; }
.cl-av-dot.on { background: #3fbf4f; }
.cl-pname { font: 900 14px/1.15 'Nunito', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; min-width: 0; text-align: left; justify-self: start; }
.cl-empty { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.cl-role { display: inline-block; flex: none; padding: 1px 7px; border-radius: 999px; font: 900 10px/1.4 'Nunito', sans-serif; font-style: normal; background: var(--paper-2); color: var(--muted); }
.cl-role.lider { background: #fff3cc; color: #7a5200; box-shadow: inset 0 0 0 1px #d4a017; }
.cl-role.oficial { background: #e3ecf7; color: #1f4f7a; box-shadow: inset 0 0 0 1px #8fb0d4; }

/* ---------- emblema del clan ---------- */
.cl-emblem { --c: #6b4526; flex: none; display: grid; place-items: center; width: 34px; height: 38px; padding-bottom: 3px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c));
  color: #fff; font: 700 12px/1 'Pixelify Sans', sans-serif; letter-spacing: .02em; text-shadow: 0 2px 0 rgba(0,0,0,.35); }
.cl-emblem.sm { width: 30px; height: 34px; font-size: 11px; }
.cl-emblem.md { width: 54px; height: 60px; font-size: 17px; }
.cl-emblem.lg { width: 70px; height: 78px; font-size: 22px; }
.cl-emblem.xl { width: 78px; height: 88px; font-size: 25px; padding-bottom: 8px; }

/* ---------- panel de clan ---------- */
#clanPanel .panel { grid-template-columns: minmax(0, 1fr); }
.cl-body { gap: 10px; }
.cl-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.cl-grid.even { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* estandarte */
.cl-banner { --c: #6b4526; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(100deg, color-mix(in srgb, var(--c) 22%, #fffaf0), #fffaf0 60%); border: 2px solid color-mix(in srgb, var(--c) 40%, var(--paper-2)); }
.cl-banner-txt { display: grid; gap: 2px; min-width: 0; justify-items: start; }
.cl-banner-name { font: 900 22px/1.1 'Nunito', sans-serif; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-motto { font-size: 13px; font-weight: 700; font-style: italic; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cl-stats { display: grid; grid-template-columns: repeat(4, minmax(64px, auto)); gap: 6px; }
.cl-stat { display: grid; justify-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(255,250,240,.85); border: 1px solid var(--paper-2); }
.cl-stat b { font: 900 18px/1.1 'Nunito', sans-serif; }
.cl-stat span, .cl-stat small { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); white-space: nowrap; }

/* miembros */
.cl-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; }
.cl-member { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; background: var(--paper-3); border: 1px solid var(--paper-2); }
.cl-member.on { border-color: rgba(63,143,58,.45); }
.cl-member.me { background: #eef9ea; }
.cl-member:not(.on) .cl-av { filter: saturate(.55); }
.cl-minfo { display: grid; gap: 2px; min-width: 0; }
.cl-mtop { display: flex; gap: 6px; align-items: center; min-width: 0; }
.cl-msub { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-mbar, .cl-gbar, .cl-rbar { display: block; height: 4px; border-radius: 3px; background: rgba(0,0,0,.08); overflow: hidden; }
.cl-mbar i, .cl-gbar i, .cl-rbar i { display: block; height: 100%; background: linear-gradient(90deg, #e8b04a, #b8842a); }
.cl-more { position: relative; }
.cl-more .cx-ib { font: 900 16px/1 'Nunito', sans-serif; }
.cl-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; display: grid; min-width: 170px; padding: 4px; border-radius: 10px; background: #fffaf0; border: 2px solid var(--edge); box-shadow: 0 8px 20px rgba(0,0,0,.2); }
.cl-menu.hidden { display: none; }
.cl-menu-it { text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none; font: 800 13px 'Nunito', sans-serif; color: var(--ink); cursor: pointer; }
.cl-menu-it:hover { background: var(--paper-2); }
.cl-menu-it.danger { color: #b33a2e; }

/* misión */
.cl-goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; align-items: center; padding: 6px 8px; border-radius: 8px; background: var(--paper-3); }
.cl-goal-l { display: grid; line-height: 1.15; min-width: 0; } .cl-goal-l b { font-size: 13px; } .cl-goal-l small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cl-goal-n { font-weight: 900; font-size: 13px; color: #2a6fa8; }
.cl-goal .cl-gbar { grid-column: 1 / -1; height: 6px; }
.cl-goal .cl-gbar i { background: linear-gradient(90deg, #5fa8e0, #2a6fa8); }
.cl-goal.done .cl-gbar i { background: linear-gradient(90deg, #7ccf6a, #2a6627); }
.cl-goal.done .cl-goal-n { color: #2a6627; font-size: 16px; }

/* territorio */
.cl-isles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cl-isle { --c: #3f8f3a; display: grid; gap: 0; padding: 6px 8px; border-radius: 8px; text-align: left; font-family: 'Nunito', sans-serif; color: var(--ink);
  background: var(--paper-3); border: 2px solid var(--paper-2); border-left: 5px solid var(--c); }
button.cl-isle { cursor: pointer; } button.cl-isle:hover:not(:disabled) { background: #fff; }
.cl-isle b { font-size: 13px; } .cl-isle small { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.cl-isle.on { background: color-mix(in srgb, var(--c) 16%, #fffaf0); border-color: var(--c); opacity: 1; }
.cl-isle.on small { color: var(--c); }

/* guerra */
.cl-war-vs { display: flex; justify-content: center; align-items: center; gap: 14px; }
.cl-war-x { font: 700 18px 'Pixelify Sans', sans-serif; color: var(--muted); }
.cl-war-score { font: 700 28px 'Pixelify Sans', sans-serif; color: var(--ink); }
.war-box .cl-mini-row .btn { white-space: nowrap; }
.cl-wh.won { border-color: #3f8f3a; background: #e3f5df; } .cl-wh.lost { border-color: #d9a39b; background: #fbeae7; }

/* gestión */
.cl-manage > summary { cursor: pointer; list-style: none; }
.cl-manage > summary::-webkit-details-marker { display: none; }
.cl-manage > summary::before { content: '▸'; font-size: 12px; transition: transform .15s; }
.cl-manage[open] > summary::before { transform: rotate(90deg); }
.cl-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.cl-mini { display: grid; gap: 4px; padding: 7px 8px; border-radius: 8px; background: var(--paper-3); border: 1px solid var(--paper-2); min-width: 0; }
.cl-mini-h { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.cl-mini-h b { font-size: 13px; } .cl-mini-h small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cl-mini-row { display: flex; gap: 6px; min-width: 0; }
.cl-mini-row input { flex: 1; min-width: 0; font: 700 14px 'Nunito', sans-serif; padding: 5px 8px; min-height: 34px; border-radius: 8px; border: 2px solid var(--edge); background: #fffaf0; color: var(--ink); }
.cl-mini-row .btn.small { min-height: 34px; padding: 4px 10px; font-size: 12px; flex: none; }
.cl-leave { margin: 0; justify-self: start; }

/* sin clan */
.cl-inv { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: #fff3cc; border: 2px solid #d4a017; }
.cl-inv-info { display: grid; min-width: 0; line-height: 1.15; } .cl-inv-info small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cl-found-prev { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: linear-gradient(100deg, #f3e5c8, #fffaf0); }
.cl-found-txt { display: grid; gap: 2px; min-width: 0; } .cl-found-txt b { font: 900 18px/1.1 'Nunito', sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-found-txt small { font-size: 12px; font-weight: 700; color: var(--muted); }
.cl-found-form { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; }
.cl-found-form label { display: grid; gap: 3px; font-weight: 800; font-size: 12px; color: var(--muted); min-width: 0; }
.cl-found-form input { font: 700 15px 'Nunito', sans-serif; min-height: 40px; padding: 6px 8px; border-radius: 8px; border: 2px solid var(--edge); background: #fffaf0; color: var(--ink); min-width: 0; }
.cl-reqs, .cl-found-form > .btn { grid-column: 1 / -1; }
.cl-reqs { display: flex; flex-wrap: wrap; gap: 6px; }
.cl-reqc { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.cl-reqc.ok { background: #e3f5df; color: #2a6627; } .cl-reqc.no { background: #fbeae7; color: #b33a2e; }

/* clasificación */
.cl-board { display: grid; gap: 6px; }
.cl-podium .mh-spot { cursor: default; }
.cl-podium .mh-spot .cl-emblem { filter: drop-shadow(0 3px 0 rgba(0,0,0,.18)); }
.cl-rlist { display: grid; gap: 3px; }
.cl-rrow { display: grid; grid-template-columns: 26px auto minmax(0, 1fr) auto; grid-template-areas: 'pos em name val' 'pos em bar bar'; gap: 1px 8px; align-items: center; padding: 4px 8px; border-radius: 8px; background: var(--paper-3); }
.cl-rrow .cx-pos { grid-area: pos; } .cl-rrow .cl-emblem { grid-area: em; }
.cl-rrow.me { background: #d9f7d4; outline: 2px solid #3f8f3a; }
.cl-rname { grid-area: name; display: flex; gap: 6px; align-items: baseline; min-width: 0; overflow: hidden; white-space: nowrap; }
.cl-rname b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; } .cl-rname small { font-size: 11px; font-weight: 700; color: var(--muted); }
.cl-rval { grid-area: val; font-weight: 900; font-size: 13px; }
.cl-rrow .cl-rbar { grid-area: bar; height: 3px; }

/* ---------- amigos ---------- */
#socialPanel .social-panel:not(.chatting) { width: min(820px, 100%); }
#socialPanel .panel { grid-template-columns: minmax(0, 1fr); }
#socialPanel .social-panel.chatting { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
@media (max-width: 720px) { #socialPanel .social-panel.chatting { grid-template-columns: minmax(0, 1fr); } }
#addFriendForm input { min-height: 40px; font-size: 15px; }
#addFriendForm .btn { min-height: 40px; }
.cl-social { display: grid; gap: 8px; min-width: 0; }
.cl-sum { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-sum .cl-stat { grid-auto-flow: column; align-items: baseline; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--paper-3); }
.cl-sum .cl-stat b { font-size: 15px; }
.cl-sum .cl-stat.on b { color: #2a6627; } .cl-sum .cl-stat.warn { background: #fff3cc; border-color: #d4a017; }
.cl-req { display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #fff3cc; border: 2px solid #d4a017; }
.cl-req > .cx-h { margin: 0; color: #7a5200; }
.cl-req .cl-fcard { background: #fffaf0; }
.cl-fhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cl-fhead .cx-h { margin: 0; }
.cl-search { width: min(200px, 50%); min-width: 0; font: 700 13px 'Nunito', sans-serif; padding: 4px 8px; min-height: 30px; border-radius: 8px; border: 2px solid var(--paper-2); background: #fffaf0; color: var(--ink); }
.cl-fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.cl-fgrid > .hidden { display: none; }
.cl-fcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 10px; background: var(--paper-3); border: 1px solid var(--paper-2); }
.cl-fcard.on { border-color: rgba(63,143,58,.45); }
.cl-fcard:not(.on) .cl-av { filter: saturate(.55); }
.cl-fcard.unread { box-shadow: inset 3px 0 0 #b33a2e; }
.cl-finfo { display: grid; gap: 1px; min-width: 0; }
.cl-finfo small { font-size: 11px; font-weight: 700; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-finfo small.cl-on { color: #2a6627; }
.cl-facts { display: flex; gap: 4px; align-items: center; }
.cl-facts .btn.small { padding: 3px 10px; min-height: 30px; font-size: 12px; }
.cl-near { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cl-ncard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 10px; background: var(--paper-3); border: 1px dashed var(--edge); cursor: pointer; font-family: 'Nunito', sans-serif; color: var(--ink); text-align: left; }
.cl-ncard:hover:not(:disabled) { background: #fff; }
.cl-ncard:disabled { opacity: .6; cursor: default; }
.cl-nname { font-weight: 900; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-nadd { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #3f8f3a; color: #fff; font-weight: 900; }
.social-panel.chatting .cl-fgrid, .social-panel.chatting .cl-near { grid-template-columns: minmax(0, 1fr); }
.social-panel.chatting .cl-search { display: none; }

/* ---------- móvil ---------- */
@media (max-width: 720px) {
  .cl-grid, .cl-grid.even { grid-template-columns: minmax(0, 1fr); }
  .cl-banner { grid-template-columns: auto minmax(0, 1fr); gap: 10px; padding: 8px 10px; }
  .cl-banner .cl-emblem.xl { width: 60px; height: 68px; font-size: 20px; }
  .cl-banner-name { font-size: 18px; }
  .cl-stats { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cl-stat { padding: 4px 2px; } .cl-stat b { font-size: 15px; }
  .cl-members, .cl-fgrid { grid-template-columns: minmax(0, 1fr); }
  .cl-mgrid { grid-template-columns: minmax(0, 1fr); }
}

/* Con el chat abierto la lista es estrecha: tarjetas y controles compactos para que nada se salga ni aparezca la
   barra de desplazamiento horizontal (antes se cortaban «Agregar», las ✕ y el botón de Discord). */
.social-panel.chatting #socialList { padding: 0 10px 12px; }
.social-panel.chatting .cl-fcard { gap: 6px; padding: 6px; }
.social-panel.chatting .cl-facts { gap: 3px; }
.social-panel.chatting .cl-facts .cx-ib { width: 26px; height: 26px; }
.social-panel.chatting .cl-pname { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.social-panel.chatting .soc-add .btn { padding: 6px 10px; min-height: 40px; font-size: 14px; }
.soc-community.compact { flex-wrap: wrap; }
.cl-finfo { min-width: 0; }