.dbPage{ margin-top: -74px; padding: 130px 0 110px; background: radial-gradient(closest-side, rgba(212,207,242,.85), rgba(212,207,242,0)) 50% 0 / 1100px 520px no-repeat, radial-gradient(rgba(123,63,228,.16) 1.2px, transparent 1.3px) 0 0 / 22px 22px, var(--bg); }
.dbWrap{ max-width: 1120px; }
.dbHero{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px; align-items: end; margin-bottom: 22px; }
.dbTitle{ margin: 10px 0 6px; font-family: var(--font-display); font-weight: 800; font-size: clamp(34px, 4.6vw, 56px); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.dbLead{ margin: 0; color: var(--ink-2); }

/* buscador */
.dbSearch{ position: relative; display: flex; align-items: center; gap: 10px; padding: 0 16px; min-height: 54px; border-radius: 18px; background: #fff; border: 1px solid var(--line-2); box-shadow: 0 6px 0 var(--lav-100); }
.dbSearch:focus-within{ border-color: var(--lav-500); box-shadow: 0 0 0 4px var(--lav-100); }
.dbSearch > i{ color: var(--lav-600); }
.dbSearch input{ flex: 1; min-width: 0; height: 52px; border: 0; outline: none; background: transparent; color: var(--ink); font: 600 16px/1 var(--font-body, inherit); }
.dbResults{ position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); max-height: 360px; overflow: auto; padding: 6px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(44,27,84,.18); scrollbar-width: thin; scrollbar-color: var(--lav-400) transparent; }
.dbResults[hidden]{ display: none; }
.dbRes{ display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.dbRes:hover{ background: var(--lav-50); }
.dbRes > span:nth-child(2){ display: grid; flex: 1; min-width: 0; }
.dbRes b, .dbRes small{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbRes small{ color: var(--muted); }
.dbRes > i{ color: var(--lav-400); font-size: 12px; }
.dbResAv{ flex: none; width: 38px; height: 38px; border-radius: 12px; overflow: hidden; }
.dbResAv img, .dbResAv span{ display: grid; place-items: center; width: 100%; height: 100%; object-fit: cover; background: var(--lav-200); color: var(--lav-800); font-weight: 800; }
.dbResEmpty{ margin: 0; padding: 14px; text-align: center; color: var(--muted); font-size: 14px; }

/* resumen */
.dbMeCard{ display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 20px; align-items: center; padding: 18px 22px; border-radius: 28px; background: linear-gradient(135deg, #2C1B54, #6435BE 60%, #7B3FE4); color: #fff; text-decoration: none; box-shadow: 0 20px 44px rgba(44,27,84,.25); }
.dbMeCard.isLoading{ min-height: 112px; opacity: .5; }
.dbMeAv{ width: 76px; height: 76px; border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.15); border: 3px solid rgba(255,255,255,.7); }
.dbMeAv img{ width: 100%; height: 100%; object-fit: cover; }
.dbMeMain{ display: grid; gap: 8px; min-width: 0; }
.dbMeTop{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-weight: 700; color: rgba(255,255,255,.85); }
.dbMeTop b{ font: 800 30px/1 var(--font-display); color: #fff; }
.dbMeTop em{ font-style: normal; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; }
.dbMeHearts i{ color: #FF8DB1; }
.dbBar{ height: 12px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.dbBar span{ display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #C9A7FF, #fff); }
.dbMeMain small{ color: rgba(255,255,255,.75); font-weight: 600; }
.dbMeStats{ display: grid; grid-template-columns: repeat(2, auto); gap: 8px 18px; }
.dbMeStats span{ display: flex; align-items: center; gap: 8px; }
.dbMeStats img{ width: 24px; height: 24px; object-fit: contain; }
.dbMeStats i{ width: 24px; text-align: center; color: #FFB36B; }
.dbMeStats b{ font: 800 17px/1 var(--font-display); }
.dbGuest{ display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 24px; border-radius: 28px; background: linear-gradient(135deg, #2C1B54, #6435BE 60%, #7B3FE4); color: #fff; }
.dbGuest b{ font: 800 20px/1.2 var(--font-display); }
.dbGuest p{ margin: 6px 0 0; color: rgba(255,255,255,.8); max-width: 520px; }
.dbGuest .btn{ background: #fff !important; color: #2C1B54 !important; border-color: #fff !important; box-shadow: 0 5px 0 #B9A7F5 !important; }
.dbGuest .fa-discord{ color: #5865F2; }

/* accesos */
.dbSection{ margin: 30px 0 12px; font: 800 13px/1 var(--font-body, inherit); letter-spacing: .1em; text-transform: uppercase; color: var(--lav-700); }
.dbTiles{ display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.dbTile{ position: relative; display: grid; gap: 3px; padding: 18px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: 0 5px 0 var(--lav-100); text-decoration: none; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease; }
.dbTile:hover{ transform: translateY(-3px); box-shadow: 0 8px 0 var(--lav-200); }
.dbTile b{ font: 800 18px/1.1 var(--font-display); letter-spacing: -.02em; }
.dbTile small{ color: var(--ink-2); font-size: 13px; }
.dbTileIcon{ display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 8px; border-radius: 14px; font-size: 17px; }
.t1 .dbTileIcon{ background: var(--lav-100); color: #7B3FE4; }
.t2 .dbTileIcon{ background: #DCEBFF; color: #2F5FB7; }
.t3 .dbTileIcon{ background: #E6F6FF; color: #1D7AD8; }
.t4 .dbTileIcon{ background: #FFDDEB; color: #C2406F; }
.t5 .dbTileIcon{ background: #DDF1EA; color: #2C8A69; }
.t6 .dbTileIcon{ background: #FFE3EC; color: #E0558A; }
.t7 .dbTileIcon{ background: #FFF1C2; color: #B88700; }
.t8 .dbTileIcon{ background: #EEF0F5; color: #4C5266; }
.t9 .dbTileIcon{ background: #F1E9FF; color: #8A4FF0; }
.dbTile.isLocked{ opacity: .85; }
.dbLock{ position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--lav-50); color: var(--lav-600); font-size: 11px; }
.dbBadge{ position: absolute; top: 14px; right: 14px; padding: 4px 9px; border-radius: 999px; background: #F0436B; color: #fff; font-size: 11px; font-weight: 800; }

/* paneles */
.dbCols{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 26px; }
.dbPanel{ padding: 18px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 0 var(--lav-100); }
.dbPanelHead{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.dbPanelHead h2{ margin: 0; font: 800 18px/1.2 var(--font-display); color: var(--ink); }
.dbPanelHead a{ color: #7B3FE4; font-size: 13px; font-weight: 800; text-decoration: none; }
.dbMini{ display: grid; gap: 8px; }
.dbMiniItem{ display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.dbMiniItem:hover{ background: var(--lav-50); }
.dbMiniItem img{ flex: none; width: 40px; aspect-ratio: 3 / 4; object-fit: contain; }
.dbMiniItem span{ display: grid; min-width: 0; }
.dbMiniItem b, .dbMiniItem small{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbMiniItem em{ font-style: normal; color: var(--muted); font-weight: 600; }
.dbMiniItem small{ color: var(--muted); }
.dbEmpty{ margin: 0; padding: 18px 6px; color: var(--ink-2); font-weight: 600; line-height: 1.5; }
.dbEmpty a{ color: #7B3FE4; }

@media (max-width: 860px){
  .dbHero{ grid-template-columns: 1fr; }
  .dbCols{ grid-template-columns: 1fr; }
  .dbMeCard{ grid-template-columns: 60px minmax(0, 1fr); }
  .dbMeAv{ width: 60px; height: 60px; border-radius: 18px; }
  .dbMeStats{ grid-column: 1 / -1; grid-template-columns: repeat(4, auto); justify-content: space-between; }
}
@media (max-width: 560px){
  .dbPage{ padding-top: 110px; }
  .dbTiles{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dbTile{ padding: 14px; }
  .dbMeCard{ padding: 16px; gap: 14px; }
  .dbMeTop b{ font-size: 24px; }
  .dbMeStats b{ font-size: 14px; }
}

/* amigos conectados */
.dbFriends{ margin-top: 26px; padding: 16px; border-radius: 26px; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 0 var(--lav-100); }
.dbFriendsHead{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.dbFriendsHead h2{ margin: 0; font: 800 18px/1.2 var(--font-display); color: var(--ink); }
.dbOnlineCount{ display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #2C8A69; }
.dbOnlineCount:not(:empty)::before{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3BC47E; box-shadow: 0 0 0 3px rgba(59,196,126,.2); }
.dbFriendsList{ display: grid; gap: 2px; max-height: 420px; overflow: auto; scrollbar-width: thin; scrollbar-color: var(--lav-400) transparent; }
.dbFriendsGroup{ margin: 10px 4px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dbFriend{ display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.dbFriend:hover{ background: var(--lav-50); }
.dbFriend:not(.isOn){ opacity: .62; }
.dbFriendAv{ position: relative; flex: none; width: 38px; height: 38px; }
.dbFriendAv img, .dbFriendAv span{ display: grid; place-items: center; width: 100%; height: 100%; border-radius: 12px; object-fit: cover; background: var(--lav-200); color: var(--lav-800); font-weight: 800; }
.dbDot{ position: absolute; right: -3px; bottom: -3px; width: 13px; height: 13px; border-radius: 50%; background: #B9B3D6; border: 3px solid #fff; }
.dbFriend.isOn .dbDot{ background: #3BC47E; }
.dbFriendText{ display: grid; min-width: 0; }
.dbFriendText b, .dbFriendText small{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbFriendText b{ font-size: 14px; }
.dbFriendText small{ font-size: 12px; color: var(--muted); }
.dbFriend.isOn .dbFriendText small{ color: #2C8A69; font-weight: 700; }
.dbFriendsMore{ display: block; margin-top: 10px; text-align: center; color: #7B3FE4; font-size: 13px; font-weight: 800; text-decoration: none; }

/* en computadora: columna a la derecha que se queda fija al bajar */
@media (min-width: 1200px){
  .dbWrap{ max-width: min(1460px, calc(100vw - 240px)); display: grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 26px; align-items: start; }
  .dbWrap > *{ grid-column: 1; }
  .dbWrap > .dbFriends{ grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 100px; margin-top: 0; max-height: calc(100vh - 130px); display: flex; flex-direction: column; }
  .dbFriendsList{ flex: 1; max-height: none; }
}

.dbFriend.is-idle .dbDot{ background: #F5B83D; }
.dbFriend.is-dnd .dbDot{ background: #F0436B; }
.dbFriend.is-idle .dbFriendText small{ color: #B7861D; }
.dbFriend.is-dnd .dbFriendText small{ color: #D23B5E; }

/* móvil: solo se muestra un amigo (el primero, que es el que está en línea si hay); "ver todos" lleva al resto */
@media (max-width: 700px){
  .dbFriendsList .dbFriend ~ .dbFriend,
  .dbFriendsList .dbFriend ~ .dbFriendsGroup{ display: none; }
  .dbFriendsList{ max-height: none; overflow: visible; }
}

/* feed de amigos con reacciones */
.dbFeedItem{ display: grid; gap: 4px; }
.dbFeedItem:hover{ background: transparent; }
.dbFeedLink{ display: flex; align-items: center; gap: 12px; padding: 4px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.dbFeedLink:hover{ background: var(--lav-50); }
.dbFeedLink img{ flex: none; width: 40px; aspect-ratio: 3 / 4; object-fit: contain; }
.dbFeedLink span{ display: grid; min-width: 0; }
.dbFeedItem .rxBar{ margin: 0 0 6px 56px; }
.dbFeedItem .rxBtn{ height: 28px; min-width: 34px; padding: 0 8px; }

/* botón recap */
.dbRecap{ display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 18px; border-radius: 22px; background: linear-gradient(115deg, #2C1B54, #5B3FB8 60%, #8A4FF0); color: #fff; text-decoration: none; box-shadow: 0 6px 0 #180E30; transition: transform .15s ease; }
.dbRecap:active{ transform: translateY(3px); box-shadow: 0 3px 0 #180E30; }
@media (hover: hover) and (pointer: fine){ .dbRecap:hover{ transform: translateY(-2px); } }
.dbRecapIcon{ display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: rgba(255,255,255,.16); color: #E2CCFF; font-size: 20px; }
.dbRecapText{ display: grid; flex: 1; min-width: 0; }
.dbRecapText b{ font: 800 19px/1.2 var(--font-display); }
.dbRecapText small{ color: #D9C6FF; font-size: 13.5px; }

/* recap semanal: turquesa y solo los domingos (ya está lista la semana completa) */
.dbRecap[hidden]{ display: none; }
.dbRecap{ background: linear-gradient(115deg, #0F5E5A, #0F8F86 55%, #22C1B0); box-shadow: 0 6px 0 #0A4744, 0 18px 34px -16px rgba(15,143,134,.6); }
.dbRecap:active{ box-shadow: 0 3px 0 #0A4744; }
.dbRecapIcon{ background: rgba(255,255,255,.18); color: #CFFBF4; }
.dbRecapText small{ color: #C6F5EE; }