
/* JMC CONNECT PRO 1.0 — capa de identidad. No altera layout funcional. */
:root{--jmc-pro-glow:color-mix(in srgb,var(--accent,#d755a5) 42%,transparent)}
.brand{letter-spacing:.025em}
.brand b,.brand strong,.brand em{font-style:normal;text-shadow:0 0 16px var(--jmc-pro-glow)}
.topbar,.admin-topbar{box-shadow:0 10px 32px #00000026,inset 0 -1px #ffffff10}
.chat,.admin-main,.panel{filter:none}
.live-label{box-shadow:0 0 16px var(--jmc-pro-glow)}
.pro-edition-badge{display:inline-flex;align-items:center;gap:5px;margin-left:7px;padding:3px 7px;border:1px solid color-mix(in srgb,var(--accent,#d755a5) 45%,transparent);border-radius:999px;background:color-mix(in srgb,var(--accent,#d755a5) 10%,transparent);font-size:9px;font-weight:900;letter-spacing:.12em;vertical-align:middle}

/* PRO 1.2 · Perfiles sociales */
.user-card-bio{margin:14px 0;padding:13px 15px;border:1px solid color-mix(in srgb,var(--accent,#d755a5) 24%,transparent);border-radius:14px;background:#ffffff08}
.user-card-bio>span{display:block;font-size:10px;font-weight:900;letter-spacing:.11em;text-transform:uppercase;opacity:.65;margin-bottom:6px}
.user-card-bio p{margin:0;white-space:pre-wrap;line-height:1.5}
#profileBio{min-height:88px;resize:vertical}

/* PRO 1.3 · Amigos */
.friend-row{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;margin:6px 0;padding:9px 10px;text-align:left;border-radius:11px}
.friend-row small{opacity:.65}
#userCardFriend{font-weight:850}

/* PRO 1.4 · VIP & Social Gifts */
.gift-dialog{max-width:560px}
.gift-showcase{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
.gift-showcase button{min-height:105px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border-radius:18px}
.gift-showcase b{font-size:2.15rem;filter:drop-shadow(0 0 10px rgba(255,255,255,.24))}
.gift-showcase span{font-weight:800}
.user-card-gifts{margin:10px 0;padding:11px 13px;border:1px solid rgba(220,117,190,.22);border-radius:13px;background:rgba(255,255,255,.035)}
.user-card-gifts>div{display:flex;gap:9px;flex-wrap:wrap;margin-top:7px;font-size:1.05rem}
.vip-chip{display:inline-flex;align-items:center;gap:5px}
@media(max-width:560px){.gift-showcase{grid-template-columns:repeat(2,1fr)}}

/* PRO 1.5 · Muro Social */
.wall-dialog{width:min(760px,94vw);max-height:88vh}
.wall-composer{display:grid;grid-template-columns:1fr auto;gap:10px;margin:14px 0 20px}
.wall-composer textarea{min-height:78px;resize:vertical}
.wall-feed{display:grid;gap:14px;max-height:60vh;overflow:auto;padding-right:5px}
.wall-post{padding:15px;border:1px solid rgba(221,111,196,.22);border-radius:16px;background:rgba(255,255,255,.035)}
.wall-post header{display:flex;justify-content:space-between;gap:12px}.wall-post time{opacity:.55;font-size:.82rem}
.wall-post>p{white-space:normal;line-height:1.5}.wall-actions{display:flex;gap:14px;align-items:center;border-top:1px solid rgba(255,255,255,.07);padding-top:9px}
.wall-actions button{background:transparent;border:0;padding:4px}.wall-comments{display:grid;gap:5px;margin:9px 0;font-size:.9rem}.wall-comments div{padding:6px 9px;border-radius:9px;background:rgba(255,255,255,.035)}
.wall-comment{display:grid;grid-template-columns:1fr auto;gap:7px}.wall-comment input{min-width:0}
@media(max-width:560px){.wall-composer{grid-template-columns:1fr}.wall-comment{grid-template-columns:1fr}}
.wall-actions .wall-delete{margin-left:auto;color:#ffb2c9!important;border:1px solid rgba(255,112,155,.25)!important;border-radius:9px!important;padding:5px 9px!important}.wall-actions .wall-delete:hover{background:rgba(255,90,140,.1)!important}
/* PRO 1.6 · Muro Multimedia */
.wall-image-pick{display:flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;border:1px solid rgba(221,111,196,.28);border-radius:11px;cursor:pointer;font-weight:800}
.wall-image-pick input{display:none}
.wall-photo{display:block;width:100%;padding:0!important;margin:10px 0;border:0!important;background:transparent!important;overflow:hidden;border-radius:14px}
.wall-photo img{display:block;width:100%;max-height:460px;object-fit:cover;border-radius:14px}
.wall-photo-viewer{width:min(1000px,95vw);max-height:92vh;padding:14px;background:#0d0911;border:1px solid rgba(225,112,203,.45);border-radius:18px}
.wall-photo-viewer img{display:block;max-width:100%;max-height:82vh;margin:auto;object-fit:contain}
.wall-photo-viewer .close{position:absolute;right:18px;top:16px;z-index:2}


/* ==========================================================
   JMC CONNECT PRO v1.7 · 3D EXPERIENCE PRO
   Capa visual segura: no altera WebRTC, API ni lógica del chat.
   ========================================================== */
:root{
 --jmc3d-edge:color-mix(in srgb,var(--accent,#d755a5) 38%,#ffffff 8%);
 --jmc3d-glow:color-mix(in srgb,var(--accent,#d755a5) 24%,transparent);
 --jmc3d-deep:#00000055;
}
.chat-body{perspective:1600px}
.topbar{
 position:relative;
 transform:translateZ(0);
 border-bottom:1px solid var(--jmc3d-edge);
 box-shadow:0 15px 40px #0008,0 2px 0 #ffffff08,inset 0 -1px 0 var(--jmc3d-edge);
}
.topbar:after{
 content:"";position:absolute;left:8%;right:8%;bottom:-1px;height:1px;
 background:linear-gradient(90deg,transparent,var(--jmc3d-edge),transparent);
 filter:drop-shadow(0 0 7px var(--jmc3d-glow));pointer-events:none
}
.layout{perspective:1500px}
.chat,.profile-card,.room-tabs-shell,.pinned-message{
 transform-style:preserve-3d;
 backface-visibility:hidden;
}
.chat{
 position:relative;
 box-shadow:0 24px 55px #0007,inset 0 1px #ffffff0d,inset 0 -1px #0008;
 border-color:var(--jmc3d-edge);
}
.chat:before{
 content:"";position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;
 background:linear-gradient(135deg,#ffffff08 0%,transparent 20%,transparent 72%,var(--jmc3d-glow) 100%);
}
.room-title,.messages,.composer-tools,.composer{position:relative;z-index:1}
.room-title{
 box-shadow:0 12px 28px #0005,inset 0 1px #ffffff12;
 transform:translateZ(8px);
}
.room-tabs-shell{
 transform:translateZ(11px);
 box-shadow:0 10px 24px #0005,inset 0 1px #ffffff0d;
}
.profile-card{
 position:relative;
 transform:translateZ(12px);
 border-color:var(--jmc3d-edge)!important;
 box-shadow:0 22px 45px #0007,inset 0 1px #ffffff12,inset 0 -1px #0007;
 overflow:hidden;
}
.profile-card:before{
 content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(135deg,#ffffff0c,transparent 27%,transparent 72%,var(--jmc3d-glow));
}
.avatar,.current-room-logo{
 box-shadow:0 9px 20px #0007,0 0 22px var(--jmc3d-glow),inset 0 1px #ffffff35;
 transform:translateZ(16px);
}
.composer{
 box-shadow:0 -12px 30px #0004,inset 0 1px #ffffff0d;
 transform:translateZ(7px);
}
.composer-tools button,.topbar button,.topbar .nav-pill,.room-tab,.room-tab-add,
.profile-card button,.composer button,.wall-image-pick{
 transform:translateZ(0);
 transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease;
 box-shadow:0 5px 12px #0004,inset 0 1px #ffffff10;
}
@media (hover:hover) and (pointer:fine){
 .composer-tools button:hover,.topbar button:hover,.topbar .nav-pill:hover,.room-tab:hover,.room-tab-add:hover,
 .profile-card button:hover,.composer button:hover,.wall-image-pick:hover{
  transform:translateY(-2px) translateZ(12px);
  box-shadow:0 10px 22px #0007,0 0 14px var(--jmc3d-glow),inset 0 1px #ffffff20;
  filter:brightness(1.08);
 }
 .profile-card:hover{transform:translateY(-2px) translateZ(18px)}
}
.message,.notice,.chat-notice{
 box-shadow:0 7px 18px #0003,inset 0 1px #ffffff0a;
}
.private-window{
 transform-style:preserve-3d;
 box-shadow:0 28px 65px #000a,0 0 28px var(--jmc3d-glow),inset 0 1px #ffffff12!important;
 border-color:var(--jmc3d-edge)!important;
}
.private-window-bar{
 box-shadow:0 7px 18px #0005,inset 0 1px #ffffff12;
}
dialog{
 box-shadow:0 35px 90px #000c,0 0 34px var(--jmc3d-glow),inset 0 1px #ffffff14!important;
}
.live-label,.connection-status.is-online{
 filter:drop-shadow(0 0 6px var(--jmc3d-glow));
}
@media (prefers-reduced-motion:reduce){
 .composer-tools button,.topbar button,.topbar .nav-pill,.room-tab,.room-tab-add,
 .profile-card,.profile-card button,.composer button,.wall-image-pick{transition:none!important}
}
@media (max-width:900px){
 .chat-body,.layout{perspective:none}
 .chat,.profile-card,.room-tabs-shell,.room-title,.composer{transform:none}
}

/* v1.8 Security Shield */
.security-shield-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin-top:16px}
.security-shield-grid>div{padding:15px;border:1px solid color-mix(in srgb,var(--accent,#d755a5) 24%,transparent);border-radius:14px;background:#ffffff08;box-shadow:inset 0 1px #ffffff0b,0 8px 22px #0003}
.security-shield-grid strong,.security-shield-grid span{display:block}.security-shield-grid span{margin-top:5px;opacity:.72;font-size:.9rem}

/* v1.8.1 · Gestión de rangos */
.rank-search{display:flex;gap:10px;align-items:center;margin:18px 0 22px}
.rank-search input{flex:1;min-width:180px}
.rank-results{display:grid;gap:10px}
.rank-user-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(170px,240px) auto;gap:12px;align-items:center;padding:13px;border:1px solid color-mix(in srgb,var(--accent,#d755a5) 22%,transparent);border-radius:14px;background:#ffffff07}
.rank-user-data strong,.rank-user-data small{display:block}.rank-user-data small{opacity:.65;margin-top:3px}
@media(max-width:760px){.rank-search{align-items:stretch;flex-direction:column}.rank-user-row{grid-template-columns:1fr}.rank-user-row button,.rank-user-row select{width:100%}}
