/* =====================================================================
   PCMasterTech — Estilos globales
   Diseño: oscuro premium de tecnología, glassmorphism azul
   ===================================================================== */

:root {
    --fondo-1: #050B18;
    --fondo-2: #0E1B33;
    --azul: #2E6FED;
    --cian: #38BDF8;
    --violeta: #6C5CE7;
    --texto: #F1F5F9;
    --texto-2: #94A3B8;
    --exito: #2FA36B;
    --aviso: #C9922E;
    --peligro: #C0453E;
    --vidrio: rgba(255, 255, 255, 0.04);
    --vidrio-2: rgba(255, 255, 255, 0.07);
    --borde: rgba(255, 255, 255, 0.08);
    --radio: 18px;
    --sombra: 0 8px 32px rgba(2, 8, 20, 0.55);
    --brillo: 0 0 0 1px rgba(46, 111, 237, 0.35), 0 0 24px rgba(46, 111, 237, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, sans-serif;
    background: linear-gradient(160deg, var(--fondo-1) 0%, var(--fondo-2) 100%) fixed;
    color: var(--texto);
    min-height: 100vh;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .logo span { font-family: 'Space Grotesk', 'Inter', sans-serif; letter-spacing: -0.01em; }

a { color: var(--cian); text-decoration: none; transition: color .15s; }
a:hover { color: #7dd7ff; }

img { max-width: 100%; }

::selection { background: rgba(46, 111, 237, .45); }

/* Halos de luz de fondo */
.halo { position: fixed; border-radius: 50%; filter: blur(120px); z-index: -1; opacity: .35; pointer-events: none; }
.halo-1 { width: 560px; height: 560px; background: rgba(46, 111, 237, .35); top: -180px; right: -120px; }
.halo-2 { width: 480px; height: 480px; background: rgba(108, 92, 231, .22); bottom: -200px; left: -150px; }

/* ============================= BARRA SUPERIOR ======================= */
.topbar {
    position: sticky; top: 0; z-index: 100;
    background: rgba(8, 15, 32, 0.75);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borde);
}
.topbar-inner {
    max-width: 1200px; margin: auto; padding: 10px 16px;
    display: flex; align-items: center; gap: 16px;
}
.logo { display: flex; align-items: center; gap: 10px; color: var(--texto); font-weight: 700; font-size: 1.15rem; white-space: nowrap; }
.logo img { width: 34px; height: 34px; }
.logo b { color: var(--cian); font-weight: 700; }

.buscador { position: relative; flex: 1; max-width: 460px; margin: auto; }
.buscador i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--texto-2); }
.buscador input {
    width: 100%; padding: 9px 14px 9px 38px;
    background: var(--vidrio); border: 1px solid var(--borde); border-radius: 12px;
    color: var(--texto); font: inherit; font-size: .92rem; outline: none; transition: .2s;
}
.buscador input:focus { border-color: rgba(46, 111, 237, .6); box-shadow: var(--brillo); background: rgba(255,255,255,.06); }
.buscador-resultados {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: rgba(14, 27, 51, .97); backdrop-filter: blur(14px);
    border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra);
    max-height: 420px; overflow-y: auto; padding: 6px;
}
.buscador-resultados.abierto { display: block; }
.buscador-resultados a { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; color: var(--texto); font-size: .9rem; }
.buscador-resultados a:hover { background: var(--vidrio-2); }
.buscador-resultados .tipo { font-size: .7rem; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; }
.buscador-grupo { padding: 8px 10px 2px; font-size: .72rem; color: var(--cian); text-transform: uppercase; letter-spacing: .08em; }

.topbar-acciones { display: flex; align-items: center; gap: 10px; margin-left: auto; position: relative; }

.campana {
    position: relative; background: var(--vidrio); border: 1px solid var(--borde);
    color: var(--texto); width: 40px; height: 40px; border-radius: 12px;
    font-size: 1.1rem; cursor: pointer; transition: .2s;
}
.campana:hover { box-shadow: var(--brillo); }
.campana-contador {
    position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px;
    background: var(--peligro); color: #fff; font-size: .68rem; font-weight: 700;
    border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.oculto { display: none !important; }

.panel-notif {
    display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 340px;
    background: rgba(14, 27, 51, .97); backdrop-filter: blur(14px);
    border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden;
}
.panel-notif.abierto { display: block; }
.panel-notif-cab { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--borde); font-size: .9rem; }
.notif-item { display: block; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.04); color: var(--texto); font-size: .86rem; }
.notif-item:hover { background: var(--vidrio-2); }
.notif-item.no-leida { background: rgba(46, 111, 237, .10); }
.notif-item time { display: block; color: var(--texto-2); font-size: .74rem; margin-top: 2px; }

.menu-usuario-btn { background: none; border: none; cursor: pointer; padding: 0; }
.menu-desplegable {
    display: none; position: absolute; top: calc(100% + 10px); right: 0; width: 250px;
    background: rgba(14, 27, 51, .97); backdrop-filter: blur(14px);
    border: 1px solid var(--borde); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden;
}
.menu-desplegable.abierto { display: block; }
.menu-desp-cab { padding: 14px 16px; border-bottom: 1px solid var(--borde); display: flex; flex-direction: column; }
.menu-desp-cab span { color: var(--texto-2); font-size: .78rem; margin-top: 2px; }
.menu-desplegable a { display: flex; align-items: center; gap: 10px; padding: 11px 16px; color: var(--texto); font-size: .9rem; }
.menu-desplegable a:hover { background: var(--vidrio-2); }
.menu-desplegable a.peligro { color: #f0968f; border-top: 1px solid var(--borde); }
.menu-desplegable a.enlace-admin { color: var(--cian); }

/* ============================= PESTAÑAS ============================= */
.pestanas { border-top: 1px solid rgba(255,255,255,.04); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas-inner { max-width: 1200px; margin: auto; padding: 0 10px; display: flex; gap: 2px; }
.pestana {
    display: flex; align-items: center; gap: 7px; padding: 11px 15px;
    color: var(--texto-2); font-size: .92rem; font-weight: 500; white-space: nowrap;
    border-bottom: 2px solid transparent; transition: .2s;
}
.pestana:hover { color: var(--texto); }
.pestana.activa { color: var(--cian); border-bottom-color: var(--cian); text-shadow: 0 0 18px rgba(56,189,248,.6); }

/* ============================= LAYOUT =============================== */
.contenido { max-width: 1200px; margin: 24px auto 40px; padding: 0 16px; min-height: 60vh; }
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 22px; align-items: start; }
.col-derecha { position: sticky; top: 130px; display: flex; flex-direction: column; gap: 18px; }

.pie { text-align: center; color: var(--texto-2); font-size: .82rem; padding: 26px 16px; border-top: 1px solid rgba(255,255,255,.04); }

/* ============================= TARJETAS VIDRIO ====================== */
.tarjeta {
    background: var(--vidrio);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 20px;
    transition: border-color .2s, box-shadow .2s;
}
.tarjeta:hover { border-color: rgba(255,255,255,.13); }
.tarjeta h2, .tarjeta h3 { margin-bottom: 12px; }
.tarjeta + .tarjeta { margin-top: 18px; }

/* ============================= BOTONES ============================== */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 10px 18px; border-radius: 12px; border: 1px solid transparent;
    font: inherit; font-size: .92rem; font-weight: 600; cursor: pointer; transition: .2s;
    text-decoration: none;
}
.boton-primario { background: linear-gradient(135deg, var(--azul), #1e5ad4); color: #fff; box-shadow: 0 4px 18px rgba(46,111,237,.35); }
.boton-primario:hover { box-shadow: 0 4px 26px rgba(46,111,237,.6); transform: translateY(-1px); color: #fff; }
.boton-fantasma { background: var(--vidrio); border-color: var(--borde); color: var(--texto); }
.boton-fantasma:hover { border-color: rgba(46,111,237,.5); box-shadow: var(--brillo); color: var(--texto); }
.boton-violeta { background: linear-gradient(135deg, var(--violeta), #5342d6); color: #fff; }
.boton-violeta:hover { box-shadow: 0 4px 24px rgba(108,92,231,.55); color: #fff; }
.boton-peligro { background: rgba(192,69,62,.15); border-color: rgba(192,69,62,.4); color: #f0968f; }
.boton-peligro:hover { background: rgba(192,69,62,.3); color: #fff; }
.boton-exito { background: rgba(47,163,107,.16); border-color: rgba(47,163,107,.45); color: #6fd3a3; }
.boton-exito:hover { background: rgba(47,163,107,.3); color: #fff; }
.boton-mini { padding: 5px 11px; font-size: .8rem; border-radius: 9px; }
.boton:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ============================= FORMULARIOS ========================== */
label { display: block; font-size: .86rem; font-weight: 600; margin: 14px 0 6px; color: var(--texto); }
label small { color: var(--texto-2); font-weight: 400; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=url], input[type=date], input[type=time],
input[type=datetime-local], select, textarea {
    width: 100%; padding: 10px 13px;
    background: rgba(5, 11, 24, .5); border: 1px solid var(--borde); border-radius: 12px;
    color: var(--texto); font: inherit; font-size: .93rem; outline: none; transition: .2s;
}
input:focus, select:focus, textarea:focus { border-color: rgba(46,111,237,.6); box-shadow: var(--brillo); }
textarea { resize: vertical; min-height: 90px; }
select option { background: var(--fondo-2); }
.campo-error { color: #f0968f; font-size: .82rem; margin-top: 4px; }
.form-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.aviso-caja { border-radius: 12px; padding: 12px 15px; font-size: .9rem; margin: 12px 0; border: 1px solid; }
.aviso-caja.error { background: rgba(192,69,62,.12); border-color: rgba(192,69,62,.4); color: #f5b3ad; }
.aviso-caja.ok { background: rgba(47,163,107,.12); border-color: rgba(47,163,107,.4); color: #9fe0c0; }
.aviso-caja.info { background: rgba(56,189,248,.1); border-color: rgba(56,189,248,.35); color: #a8e2fb; }

/* ============================= AVATARES Y NIVELES =================== */
.avatar {
    position: relative; display: inline-flex; flex-shrink: 0;
    border-radius: 50%; padding: 2px;
    background: conic-gradient(var(--violeta), var(--cian), var(--azul), var(--violeta));
}
.avatar img, .avatar-letras {
    width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--fondo-1);
}
.avatar-letras {
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: .85em;
}
.nivel-chip {
    position: absolute; bottom: -4px; right: -4px;
    background: linear-gradient(135deg, var(--violeta), #8b7cf0); color: #fff;
    font-size: .6rem; font-weight: 800; min-width: 17px; height: 17px; padding: 0 3px;
    border-radius: 9px; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--fondo-1); box-shadow: 0 0 10px rgba(108,92,231,.6);
}

.insignia-mini { font-size: .95rem; margin-left: 3px; cursor: default; }

/* ============================= FEED COMUNIDAD ======================= */
.caja-publicar { display: flex; gap: 12px; align-items: center; cursor: pointer; }
.caja-publicar .falso-input {
    flex: 1; padding: 11px 16px; background: rgba(5,11,24,.5);
    border: 1px solid var(--borde); border-radius: 14px; color: var(--texto-2); font-size: .93rem;
}
.caja-publicar:hover .falso-input { border-color: rgba(46,111,237,.5); box-shadow: var(--brillo); }

.pildoras { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.pildora {
    padding: 7px 14px; border-radius: 999px; font-size: .85rem; font-weight: 500;
    background: var(--vidrio); border: 1px solid var(--borde); color: var(--texto-2); transition: .2s;
}
.pildora:hover { color: var(--texto); border-color: rgba(46,111,237,.5); }
.pildora.activa { background: rgba(46,111,237,.2); border-color: rgba(46,111,237,.65); color: #cfe1ff; box-shadow: var(--brillo); }

.orden-feed { display: flex; gap: 6px; margin-left: auto; }

.post { margin-bottom: 18px; }
.post-cab { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.post-cab .datos { display: flex; flex-direction: column; min-width: 0; }
.post-cab .nombre { font-weight: 600; font-size: .94rem; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.post-cab .meta { color: var(--texto-2); font-size: .78rem; }
.post-fijado { color: var(--cian); font-size: .76rem; font-weight: 600; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; text-transform: uppercase; }
.post h3 a { color: var(--texto); }
.post h3 a:hover { color: var(--cian); }
.post-cuerpo { color: #d6deea; font-size: .94rem; margin-top: 6px; overflow-wrap: break-word; }
.post-cuerpo ul { margin: 8px 0 8px 22px; }
.post-imagen { margin-top: 12px; border-radius: 14px; max-height: 420px; object-fit: cover; width: 100%; }
.post-pie { display: flex; align-items: center; gap: 16px; margin-top: 14px; color: var(--texto-2); font-size: .88rem; }
.post-accion { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--texto-2); font: inherit; font-size: .88rem; cursor: pointer; transition: .15s; }
.post-accion:hover { color: var(--cian); }
.post-accion.activo { color: var(--cian); }
.post-accion.activo i { text-shadow: 0 0 12px rgba(56,189,248,.8); }
.etiqueta-cat { font-size: .76rem; background: var(--vidrio-2); padding: 3px 10px; border-radius: 999px; color: var(--texto-2); }
.mencion { color: var(--violeta); font-weight: 600; }

.video-marco { position: relative; padding-top: 56.25%; border-radius: 14px; overflow: hidden; margin-top: 12px; background: #000; }
.video-marco iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Comentarios */
.comentario { display: flex; gap: 10px; margin-top: 14px; }
.comentario .burbuja { flex: 1; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05); border-radius: 14px; padding: 10px 14px; }
.comentario .burbuja .nombre { font-weight: 600; font-size: .87rem; }
.comentario .burbuja .texto { font-size: .9rem; color: #d6deea; margin-top: 2px; overflow-wrap: break-word; }
.comentario .acciones { display: flex; gap: 12px; margin-top: 5px; font-size: .78rem; color: var(--texto-2); }
.comentario .acciones button { background: none; border: none; color: var(--texto-2); font-size: .78rem; cursor: pointer; }
.comentario .acciones button:hover { color: var(--cian); }
.respuestas { margin-left: 42px; }

/* Banner clase en vivo */
.banner-clase {
    background: linear-gradient(120deg, rgba(46,111,237,.28), rgba(108,92,231,.22));
    border: 1px solid rgba(46,111,237,.4);
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.banner-clase .icono-vivo { font-size: 1.9rem; color: var(--cian); text-shadow: 0 0 20px rgba(56,189,248,.8); }
.banner-clase .info { flex: 1; min-width: 200px; }
.banner-clase .info strong { font-size: 1.02rem; }
.banner-clase .info span { display: block; color: var(--texto-2); font-size: .84rem; }
.cuenta-regresiva { font-family: 'Space Grotesk', monospace; font-weight: 700; color: var(--cian); font-size: 1.05rem; }

/* ============================= SIDEBAR COMUNIDAD ==================== */
.tarjeta-comunidad { padding: 0; overflow: hidden; }
.tarjeta-comunidad .banner { height: 110px; background: url('../img/banner.svg') center/cover; }
.tarjeta-comunidad .cuerpo-tc { padding: 18px 20px 20px; }
.contadores { display: flex; text-align: center; margin: 14px 0; border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; }
.contadores div { flex: 1; padding: 10px 4px; }
.contadores div + div { border-left: 1px solid var(--borde); }
.contadores strong { display: block; font-size: 1.15rem; font-family: 'Space Grotesk'; }
.contadores span { font-size: .74rem; color: var(--texto-2); }
.contadores .en-linea strong { color: var(--exito); }
.avatares-apilados { display: flex; margin: 6px 0 14px; }
.avatares-apilados .avatar { margin-left: -9px; }
.avatares-apilados .avatar:first-child { margin-left: 0; }

.fila-lb { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); font-size: .9rem; }
.fila-lb:last-child { border-bottom: none; }
.fila-lb .pos { width: 26px; text-align: center; font-weight: 700; color: var(--texto-2); }
.fila-lb .medalla { font-size: 1.15rem; }
.fila-lb .nombre-lb { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-lb .pts { color: var(--violeta); font-weight: 700; font-size: .86rem; }
.fila-lb.yo { background: rgba(108,92,231,.12); border-radius: 10px; padding: 8px; }

/* Onboarding */
.onboarding-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: .89rem; }
.onboarding-item i { font-size: 1.05rem; color: var(--texto-2); }
.onboarding-item.hecho { color: var(--texto-2); text-decoration: line-through; }
.onboarding-item.hecho i { color: var(--exito); }
.barra-progreso { height: 8px; background: rgba(255,255,255,.07); border-radius: 99px; overflow: hidden; margin: 10px 0; }
.barra-progreso div { height: 100%; background: linear-gradient(90deg, var(--azul), var(--cian)); border-radius: 99px; box-shadow: 0 0 12px rgba(56,189,248,.6); transition: width .5s; }

/* ============================= CURSOS =============================== */
.parrilla-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 18px; }
.curso-tarjeta { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.curso-tarjeta .portada { height: 140px; background: linear-gradient(135deg, rgba(46,111,237,.5), rgba(108,92,231,.45)); display: flex; align-items: center; justify-content: center; font-size: 2.6rem; }
.curso-tarjeta .cuerpo { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.curso-tarjeta h3 { font-size: 1.02rem; margin: 0; }
.curso-tarjeta p { color: var(--texto-2); font-size: .85rem; flex: 1; }
.curso-bloqueado .portada, .curso-bloqueado .cuerpo { filter: blur(0px); opacity: .45; }
.candado-curso {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; background: rgba(5,11,24,.55); backdrop-filter: blur(3px); border-radius: var(--radio);
    color: var(--texto); font-weight: 600; font-size: .9rem; z-index: 2; text-align: center; padding: 10px;
}
.candado-curso i { font-size: 1.8rem; color: var(--aviso); }
.etiqueta-premium { position: absolute; top: 10px; right: 10px; z-index: 3; background: linear-gradient(135deg, #b8860b, #ffd700); color: #1a1a1a; font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 99px; }
.etiqueta-nivel { font-size: .74rem; background: rgba(108,92,231,.2); border: 1px solid rgba(108,92,231,.45); color: #c4bbf5; padding: 2px 10px; border-radius: 99px; align-self: flex-start; }

.lista-modulos details { border: 1px solid var(--borde); border-radius: 14px; margin-bottom: 10px; overflow: hidden; background: var(--vidrio); }
.lista-modulos summary { padding: 13px 17px; cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.lista-modulos summary::-webkit-details-marker { display: none; }
.lista-modulos summary:hover { background: var(--vidrio-2); }
.leccion-fila { display: flex; align-items: center; gap: 10px; padding: 10px 17px; border-top: 1px solid rgba(255,255,255,.04); color: var(--texto); font-size: .9rem; }
.leccion-fila:hover { background: var(--vidrio-2); }
.leccion-fila i.completada { color: var(--exito); }
.leccion-fila i.pendiente { color: var(--texto-2); }
.leccion-fila .dur { margin-left: auto; color: var(--texto-2); font-size: .78rem; }

/* ============================= CALENDARIO =========================== */
.cal-mes { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-mes th { padding: 8px 4px; color: var(--texto-2); font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; }
.cal-mes td { border: 1px solid rgba(255,255,255,.05); height: 84px; vertical-align: top; padding: 5px; font-size: .8rem; }
.cal-mes td.otro-mes { opacity: .3; }
.cal-mes td.hoy { background: rgba(46,111,237,.12); border-color: rgba(46,111,237,.4); }
.cal-evento { display: block; background: rgba(56,189,248,.18); border: 1px solid rgba(56,189,248,.4); color: #a8e2fb; border-radius: 7px; padding: 2px 6px; font-size: .72rem; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evento-fila { display: flex; gap: 14px; align-items: center; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.05); }
.evento-fila:last-child { border-bottom: none; }
.evento-fecha { text-align: center; background: var(--vidrio-2); border-radius: 12px; padding: 8px 12px; min-width: 64px; }
.evento-fecha strong { display: block; font-size: 1.25rem; font-family: 'Space Grotesk'; color: var(--cian); }
.evento-fecha span { font-size: .72rem; color: var(--texto-2); text-transform: uppercase; }
.evento-info { flex: 1; min-width: 0; }
.evento-info strong { font-size: .96rem; }
.evento-info span { display: block; color: var(--texto-2); font-size: .82rem; }

/* ============================= MIEMBROS ============================= */
.parrilla-miembros { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.miembro-tarjeta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.miembro-tarjeta .nombre-m { font-weight: 600; font-size: .95rem; }
.miembro-tarjeta .meta-m { color: var(--texto-2); font-size: .8rem; }
.punto-linea { display: inline-block; width: 8px; height: 8px; background: var(--exito); border-radius: 50%; box-shadow: 0 0 8px var(--exito); margin-right: 5px; }

#mapa-miembros, #mapa-perfil { height: 520px; border-radius: var(--radio); border: 1px solid var(--borde); z-index: 1; }
#mapa-perfil { height: 300px; }
.leaflet-container { background: #0a1526 !important; }

/* ============================= LEADERBOARD ========================== */
.tabla-lb { width: 100%; border-collapse: collapse; }
.tabla-lb th { text-align: left; color: var(--texto-2); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px; }
.tabla-lb td { padding: 11px 10px; border-top: 1px solid rgba(255,255,255,.05); font-size: .92rem; }
.tabla-lb tr.top-1 td { background: rgba(255,215,0,.07); }
.tabla-lb tr.top-2 td { background: rgba(192,192,192,.06); }
.tabla-lb tr.top-3 td { background: rgba(205,127,50,.06); }
.tabla-lb tr.yo td { background: rgba(108,92,231,.14); }

/* ============================= PERFIL =============================== */
.perfil-cab { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.perfil-cab .datos-p { flex: 1; min-width: 220px; }
.perfil-cab h1 { font-size: 1.5rem; }
.perfil-cab .usuario-p { color: var(--texto-2); }
.perfil-stats { display: flex; gap: 22px; margin-top: 10px; flex-wrap: wrap; }
.perfil-stats div strong { font-family: 'Space Grotesk'; font-size: 1.2rem; display: block; }
.perfil-stats div span { color: var(--texto-2); font-size: .8rem; }
.insignias-lista { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.insignia-grande { background: var(--vidrio-2); border: 1px solid var(--borde); border-radius: 14px; padding: 8px 14px; font-size: .88rem; display: flex; align-items: center; gap: 8px; }

/* ============================= HERRAMIENTAS ========================= */
.tabs-herr { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.fila-componente { display: grid; grid-template-columns: 1fr 110px 40px; gap: 10px; margin-bottom: 10px; align-items: center; }
.total-grande { font-family: 'Space Grotesk'; font-size: 2rem; color: var(--cian); text-shadow: 0 0 24px rgba(56,189,248,.5); }
.resultado-fuente { text-align: center; padding: 20px; }
.enlaces-parrilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.enlace-util { display: flex; gap: 13px; align-items: flex-start; color: var(--texto); }
.enlace-util i { font-size: 1.5rem; color: var(--cian); }
.enlace-util strong { display: block; }
.enlace-util span { color: var(--texto-2); font-size: .83rem; }

/* ============================= ADMIN ================================ */
.admin-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 22px; align-items: start; }
.admin-menu { display: flex; flex-direction: column; gap: 3px; position: sticky; top: 130px; }
.admin-menu a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 11px; color: var(--texto-2); font-size: .9rem; }
.admin-menu a:hover { background: var(--vidrio-2); color: var(--texto); }
.admin-menu a.activo { background: rgba(46,111,237,.18); color: #cfe1ff; }
.tabla-admin { width: 100%; border-collapse: collapse; font-size: .89rem; }
.tabla-admin th { text-align: left; color: var(--texto-2); font-size: .76rem; text-transform: uppercase; padding: 9px 10px; letter-spacing: .05em; }
.tabla-admin td { padding: 10px; border-top: 1px solid rgba(255,255,255,.05); vertical-align: middle; }
.tabla-admin tr:hover td { background: rgba(255,255,255,.02); }
.stats-parrilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-tarjeta strong { display: block; font-family: 'Space Grotesk'; font-size: 1.7rem; }
.stat-tarjeta span { color: var(--texto-2); font-size: .82rem; }
.stat-tarjeta i { float: right; font-size: 1.4rem; color: var(--cian); opacity: .7; }
.graficas-parrilla { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }

/* ============================= LANDING ============================== */
.hero { text-align: center; padding: 70px 16px 50px; max-width: 820px; margin: auto; }
.hero h1 { font-size: clamp(1.9rem, 5vw, 3.1rem); line-height: 1.15; margin-bottom: 18px; }
.hero h1 .brillo-texto { background: linear-gradient(90deg, var(--cian), var(--azul), var(--violeta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { color: var(--texto-2); font-size: 1.08rem; max-width: 640px; margin: 0 auto 26px; }
.cinta-oferta { display: inline-block; background: rgba(108,92,231,.18); border: 1px solid rgba(108,92,231,.5); color: #c4bbf5; padding: 6px 18px; border-radius: 99px; font-size: .86rem; font-weight: 600; margin-bottom: 22px; }
.seccion { max-width: 1000px; margin: 50px auto; padding: 0 16px; }
.seccion h2 { text-align: center; font-size: 1.7rem; margin-bottom: 28px; }
.beneficios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.beneficio i { font-size: 1.7rem; color: var(--cian); }
.beneficio h3 { font-size: 1.02rem; margin: 10px 0 6px; }
.beneficio p { color: var(--texto-2); font-size: .88rem; }
.faq details { border: 1px solid var(--borde); border-radius: 14px; margin-bottom: 10px; background: var(--vidrio); }
.faq summary { padding: 15px 18px; cursor: pointer; font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .faq-cuerpo { padding: 0 18px 15px; color: var(--texto-2); font-size: .92rem; }

/* ============================= LOGIN / SOLICITUD ==================== */
.caja-acceso { max-width: 440px; margin: 6vh auto; }
.caja-acceso.ancha { max-width: 560px; }
.caja-acceso .logo-acceso { display: flex; justify-content: center; margin-bottom: 18px; }
.caja-acceso .logo-acceso img { width: 60px; }
.caja-acceso h1 { text-align: center; font-size: 1.4rem; margin-bottom: 4px; }
.caja-acceso .sub-acceso { text-align: center; color: var(--texto-2); font-size: .9rem; margin-bottom: 10px; }

/* ============================= TOASTS =============================== */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 300; display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 40px)); }
.toast {
    background: rgba(14,27,51,.97); backdrop-filter: blur(14px);
    border: 1px solid var(--borde); border-left: 4px solid var(--cian);
    border-radius: 13px; padding: 13px 17px; font-size: .9rem; box-shadow: var(--sombra);
    animation: toast-entra .3s ease; display: flex; gap: 10px; align-items: center;
}
.toast.exito { border-left-color: var(--exito); }
.toast.error { border-left-color: var(--peligro); }
.toast.aviso { border-left-color: var(--aviso); }
.toast.saliendo { animation: toast-sale .3s ease forwards; }
@keyframes toast-entra { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }
@keyframes toast-sale { to { opacity: 0; transform: translateX(30px); } }

/* ============================= SKELETONS ============================ */
.skeleton {
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.09) 50%, rgba(255,255,255,.04) 75%);
    background-size: 200% 100%; animation: brillo-skeleton 1.4s infinite;
}
@keyframes brillo-skeleton { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ============================= MODALES ============================== */
.modal-fondo { display: none; position: fixed; inset: 0; background: rgba(2,6,14,.7); backdrop-filter: blur(4px); z-index: 200; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto; }
.modal-fondo.abierto { display: flex; }
.modal { width: 100%; max-width: 560px; background: rgba(14,27,51,.98); border: 1px solid var(--borde); border-radius: 20px; box-shadow: var(--sombra); padding: 24px; animation: toast-entra .25s ease; }
.modal-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.modal-cerrar { background: none; border: none; color: var(--texto-2); font-size: 1.4rem; cursor: pointer; }
.modal-cerrar:hover { color: var(--texto); }

/* Barra de herramientas del editor */
.editor-barra { display: flex; gap: 6px; margin-bottom: 6px; }
.editor-barra button { background: var(--vidrio); border: 1px solid var(--borde); color: var(--texto-2); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; }
.editor-barra button:hover { color: var(--cian); border-color: rgba(46,111,237,.5); }

/* ============================= CERTIFICADO (pantalla) =============== */
.certificado-vista { background: #f8fafc; color: #10203c; border-radius: 20px; padding: 50px; text-align: center; border: 10px solid #16305e; }

/* ============================= UTILIDADES =========================== */
.fila { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.separar { justify-content: space-between; }
.texto-2 { color: var(--texto-2); }
.texto-centro { text-align: center; }
.mt { margin-top: 16px; }
.mb { margin-bottom: 16px; }
.badge-estado { font-size: .74rem; padding: 3px 10px; border-radius: 99px; font-weight: 600; }
.badge-estado.pendiente { background: rgba(201,146,46,.18); color: #e8bd6d; }
.badge-estado.activo { background: rgba(47,163,107,.18); color: #6fd3a3; }
.badge-estado.suspendido, .badge-estado.rechazado, .badge-estado.oculto { background: rgba(192,69,62,.18); color: #f0968f; }
.badge-estado.premium { background: rgba(255,215,0,.15); color: #ffd700; }
.paginacion { display: flex; gap: 6px; justify-content: center; margin-top: 22px; }
.paginacion a, .paginacion span { padding: 7px 13px; border-radius: 10px; background: var(--vidrio); border: 1px solid var(--borde); color: var(--texto-2); font-size: .88rem; }
.paginacion a:hover { border-color: rgba(46,111,237,.5); color: var(--texto); }
.paginacion .actual { background: rgba(46,111,237,.25); color: #cfe1ff; border-color: rgba(46,111,237,.6); }

/* ============================= RESPONSIVO =========================== */
@media (max-width: 960px) {
    .dos-columnas { grid-template-columns: 1fr; }
    .col-derecha { position: static; order: 2; }
    .admin-layout { grid-template-columns: 1fr; }
    .admin-menu { position: static; flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
    .admin-menu a { white-space: nowrap; }
    .graficas-parrilla { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .buscador { display: none; }
    .topbar-inner { padding: 8px 12px; }
    .contenido { margin-top: 16px; padding: 0 10px; }
    .tarjeta { padding: 16px; border-radius: 15px; }
    .form-fila { grid-template-columns: 1fr; }
    .pestana span { display: none; }
    .pestana { padding: 11px 13px; font-size: 1.05rem; }
    .panel-notif { position: fixed; top: 62px; left: 10px; right: 10px; width: auto; }
    .cal-mes td { height: 58px; font-size: .7rem; }
    .cal-evento { font-size: .6rem; padding: 1px 3px; }
    .hero { padding: 44px 14px 30px; }
    .certificado-vista { padding: 24px; }
}

/* ============================= IMPRESIÓN (certificados) ============= */
@media print {
    body { background: #fff !important; }
    .topbar, .pie, .halo, .toasts, .no-imprimir { display: none !important; }
    .contenido { margin: 0; max-width: none; }
    .certificado-vista { border-radius: 0; }
}