:root{--running-blue:#2563eb;--running-blue-dark:#1d4ed8;--pastel-running:#dbeafe;--pastel-comedia:#ede9fe;--pastel-musica:#fce7f3;--pastel-social:#fef3c7;--pastel-politica:#cffafe;--pastel-deportes:#ffedd5;--pastel-corporativo:#e0e7ff;--pastel-todos:#e8e8e8}
*{box-sizing:border-box;margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,select,textarea{-webkit-user-select:text;user-select:text}
#evModal{touch-action:pan-y}
html{background:#000}
body{background:#f7f7f7;color:#111;display:flex;justify-content:center;min-height:100vh;overscroll-behavior-y:none}
.phone{width:100%;max-width:480px;background:#f7f7f7;min-height:100vh;display:flex;flex-direction:column;position:relative}
.topbar{padding:20px 16px;display:flex;justify-content:center;align-items:center;background:#000;position:sticky;top:0;z-index:10}
.topbar::before{content:'';position:absolute;top:-120px;left:0;right:0;height:120px;background:#000}
.logo{font-weight:800;font-size:27px;letter-spacing:2px;color:#fff}
.logo span{display:inline-block}
.top-sub{position:absolute;right:16px;font-size:11px;color:#0c4a6e;background:rgba(255,255,255,.6);border-radius:99px;padding:4px 10px}
main{flex:1;padding:14px 8px 110px;background:#f7f7f7;position:relative;overflow:hidden;touch-action:pan-y}
.view{display:none}.view.active{display:block;will-change:transform,opacity}
.view.animL{animation:slideL .42s cubic-bezier(.22,.9,.3,1)}
.view.animR{animation:slideR .42s cubic-bezier(.22,.9,.3,1)}
@keyframes slideL{from{opacity:0;transform:translate3d(48px,0,0) scale(.995)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes slideR{from{opacity:0;transform:translate3d(-48px,0,0) scale(.995)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
.metrics{display:flex;gap:10px;margin-bottom:14px;text-align:center}
.metric{flex:1;background:#f7f7f7;border:1px solid #e5e5e5;border-radius:12px;padding:14px 8px}
.metric.big{flex:1.4}
.metric span{font-size:24px;font-weight:800;display:block}
.metric label{font-size:11px;color:#737373;text-transform:uppercase;letter-spacing:.5px}
#map{height:260px;border-radius:12px;background:#eee;margin-bottom:14px;z-index:1;border:1px solid #e5e5e5}
/* ===== CORRER full-screen (mapa total, todo flota encima) ===== */
#view-run.active{position:fixed;inset:0;z-index:200;background:#fff;display:block;padding:0;overflow:hidden}
#view-run #map{position:absolute;inset:0;height:auto;margin:0;border:0;border-radius:0}
.runback{position:absolute;top:calc(12px + env(safe-area-inset-top));left:12px;z-index:500;background:#111;border:0;border-radius:99px;padding:10px 16px;font-size:14px;font-weight:800;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.2);cursor:pointer}
.run-right{position:absolute;right:12px;bottom:300px;z-index:500;display:flex;flex-direction:column;gap:10px}
.runfab{width:48px;height:48px;border-radius:50%;background:#fff;border:0;color:#111;box-shadow:0 4px 14px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer}
.runfab.on{background:#111;color:#fff}
.runfloat{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:500}
.runmetrics{display:flex;background:rgba(17,17,17,.68);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px 8px;color:#fff;text-align:center}
.runmetrics>div{flex:1}
.runmetrics .mid{flex:1.3}
.runmetrics span{font-weight:800;display:block;font-size:20px}
.runmetrics .mid span{font-size:32px}
.runmetrics label{font-size:11px;color:#ccc;text-transform:uppercase;letter-spacing:.5px}
.runbar{display:flex;gap:8px;padding:10px 0 0;background:none}
.runbarcol{flex:1.2;display:flex;flex-direction:column;gap:6px;min-width:0}
.runpill{flex:1;border:1px solid rgba(255,255,255,.18);background:rgba(17,17,17,.68);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:99px;padding:14px 4px;font-size:15px;font-weight:800;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.runpill.go{background:#16a34a;border-color:#16a34a;color:#fff;flex:1.2}
.runpill.side{padding:10px 4px;font-size:14px}
/* REGLA: lo destructivo es rojo sólido + letras blancas (nada de borde rojo con fondo blanco) */
.runpill.danger{background:#ef4444;border-color:#ef4444;color:#fff}
.runend{background:none;border:0;color:#ef4444;font-size:13px;font-weight:800;padding:4px;cursor:pointer}
.rundemo{background:none;border:0;color:#fff;font-size:12px;padding:8px 0 0;cursor:pointer;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.runtoast{position:absolute;left:50%;transform:translateX(-50%);bottom:290px;z-index:600;background:#111;color:#fff;border-radius:99px;padding:10px 18px;font-size:13px;font-weight:800;white-space:nowrap;display:none;box-shadow:0 4px 14px rgba(0,0,0,.3)}
/* Muvana es vertical: en horizontal chico se pide voltear (la compu no se afecta) */
@media (orientation:landscape) and (max-height:500px){#rotBlock{display:flex!important}}
.run-controls{display:flex;gap:10px}
.btn{flex:1;padding:16px;border:0;border-radius:12px;font-weight:700;font-size:15px;background:#eee;color:#111;cursor:pointer}
.btn.primary{background:#111;color:#fff}.btn.danger{background:#fff;border:1px solid #ef4444;color:#ef4444}
.btn:disabled{opacity:.35}
.link{background:none;border:0;color:#737373;margin:14px auto;display:block;cursor:pointer;font-size:13px}
.hint{font-size:12px;color:#a3a3a3;text-align:center}
h2{margin:10px 0 12px;font-size:18px;font-weight:800}h3{margin:16px 0 8px;font-size:13px;color:#737373;font-weight:600}
.cards{display:flex;flex-direction:column;gap:10px}
.card{background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:14px;box-shadow:0 4px 14px rgba(0,0,0,.06)}
#orgModal .card{border:2px solid #111}
.card b{font-size:16px;display:block;font-weight:700}
.card span{font-size:12px;color:#737373}
.card .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card small{color:#525252}
.progress{height:6px;background:#e5e5e5;border-radius:99px;margin-top:8px;overflow:hidden}
.progress i{display:block;height:100%;background:#22c55e}
.tabbar{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:448px;display:flex;background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);border:1px solid rgba(0,0,0,.08);border-radius:99px;padding:6px;box-shadow:0 8px 30px rgba(0,0,0,.15);z-index:20;touch-action:none;transition:transform .35s ease,opacity .35s ease}
.tabbar.hide{transform:translateX(-50%) translateY(120px);opacity:0;pointer-events:none}
.tabbar button{flex:1;background:none;border:0;color:#a3a3a3;font-size:19px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;border-radius:99px;padding:7px 0;transition:color .2s ease,transform .18s ease;position:relative;z-index:1}
.scrub-pill{position:absolute;top:6px;bottom:6px;left:0;width:60px;background:#111;border-radius:99px;display:block;z-index:0;box-shadow:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .38s cubic-bezier(.34,1.4,.64,1),width .38s cubic-bezier(.34,1.4,.64,1);will-change:transform,width}
.tabbar.scrubbing .scrub-pill{transition:none}
.tabbar.scrubbing button{background:none!important;box-shadow:none!important;transform:none!important;transition:none!important}
.tabbar button.active{background:none;color:#fff}
.tabbar button.hover{background:none;color:#fff;transform:none}
.tabbar button:active{transform:scale(.9)}
.tabbar small{font-size:9px;font-weight:700}
.tab-ico{display:flex;align-items:center;justify-content:center;height:22px}
.tab-ico svg{display:block}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.events-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.events-grid .card b{font-size:14px}
.events-grid .card{padding:12px}
#chart{width:100%;background:#f7f7f7;border:1px solid #e5e5e5;border-radius:12px;padding:8px}
input,select{outline:none}
input:focus,select:focus{border:1px solid #111}
.mini{border:0;border-radius:8px;padding:6px 10px;font-weight:700;cursor:pointer;background:#e5e5e5;color:#111}
.mini.green{background:#111;color:#fff}.mini.blue{background:none;color:#525252}.mini.red{background:none;color:#ef4444}
.acc{width:100%;text-align:left;background:#111;color:#fff;border:0;border-radius:12px;padding:14px;font-size:15px;font-weight:800;margin-top:12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.sqblock{background:#f7f7f7;border:1px solid #e5e5e5;border-radius:12px;padding:14px;margin-bottom:14px}
.sqblock .sqtitle{font-size:16px;font-weight:800;margin-bottom:10px;text-align:center}
.sqblock .card{background:#fff}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 16px;justify-content:center}
.chip{flex:0 0 auto;border:1px solid #e5e5e5;background:#f7f7f7;border-radius:99px;padding:8px 14px;font-size:13px;font-weight:700;cursor:pointer;color:#525252}
.chip.on{background:#111;color:#fff;border-color:#111}
.cov{height:200px;border-radius:0;display:flex;align-items:flex-end;justify-content:space-between;padding:10px;font-size:36px;background-size:cover;background-position:center}
.cov0{background:linear-gradient(135deg,#ff9a56,#ff5e78)}
.cov1{background:linear-gradient(135deg,#3b82f6,#06b6d4)}
.cov2{background:linear-gradient(135deg,#8b5cf6,#ec4899)}
.cov3{background:linear-gradient(135deg,#22c55e,#a3e635)}
.cov4{background:linear-gradient(135deg,#111,#b8860b)}
.cov5{background:linear-gradient(135deg,#f472b6,#fb7185)}
.cov .tag{background:rgba(255,255,255,.9);border-radius:99px;font-size:11px;font-weight:800;padding:4px 10px}
.evcard{padding:0;overflow:hidden}
.evcard .body{padding:6px 14px 12px;text-align:center}
.evcard .body b{font-size:17px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.5em}
.evcard .body small{font-size:14.5px;line-height:1.7}
.evcard .body .row{justify-content:center}
.evcard .loc small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.evcard .dim{color:#a3a3a3}
.evcard .price{background:#111;color:#fff;border-radius:99px;padding:4px 12px;font-size:12px;font-weight:800;white-space:nowrap}
.evcard.fullbg{position:relative;min-height:320px;border:0;padding:0;overflow:hidden;color:#fff;background-size:cover;background-position:center}
.evcard.fullbg .shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 30%,rgba(0,0,0,.82));border-radius:12px}
.evcard.fullbg .fbody{position:absolute;left:0;right:0;bottom:0;padding:14px 12px;text-align:left}
.evcard.fullbg .fbody b{font-size:17px;text-align:left;display:block}
.evcard.fullbg .fbody small{color:#fff}
.evcard.fullbg .glass{background:rgba(17,17,17,.68);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:8px 10px;display:block;width:100%}
@keyframes pop{0%{transform:scale(1)}30%{transform:scale(1.22) rotate(-3deg)}60%{transform:scale(.94)}100%{transform:scale(1)}}
@keyframes shine{from{left:-60%}to{left:130%}}
.btn-pop{background:#22c55e!important;animation:pop .6s ease;position:relative;overflow:hidden}
.btn-pop::after{content:'';position:absolute;top:0;left:-60%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent);animation:shine .6s ease}
/* ===== DETALLES v20 (mismo estilo, solo pulido) ===== */
/* iPhone con ceja: la barra y el contenido respetan la zona segura */
main{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
.tabbar{bottom:calc(14px + env(safe-area-inset-bottom))}
/* Las letras sobre la foto se leen mejor con sombrita */
.evcard.fullbg .fbody b,.evcard.fullbg .fbody small{text-shadow:0 1px 6px rgba(0,0,0,.65)}
/* Sombrita suave a las casillas para que despeguen del fondo */
.evcard.fullbg{box-shadow:0 4px 14px rgba(0,0,0,.12)}
/* Los filtros se deslizan sin barra de scroll fea */
.chips{scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
/* El iPhone no hace zoom solo al escribir (letra 16) */
input,select,textarea{font-size:16px}
/* Los botones se hunden un poquito al tocarlos */
.btn:active{transform:scale(.97)}
/* ===== PREMIUM (mismo estilo, se siente más fina) ===== */
/* Las casillas entran una tras otra al abrir la ventana */
.events-grid .evcard{animation:cardIn .45s cubic-bezier(.22,.9,.28,1) backwards}
.events-grid .evcard:nth-child(2){animation-delay:.05s}
.events-grid .evcard:nth-child(3){animation-delay:.1s}
.events-grid .evcard:nth-child(4){animation-delay:.15s}
.events-grid .evcard:nth-child(5){animation-delay:.2s}
.events-grid .evcard:nth-child(6){animation-delay:.25s}
.events-grid .evcard:nth-child(n+7){animation-delay:.3s}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Las casillas respiran al tocarlas */
.events-grid .evcard:active{transform:scale(.97)}
.events-grid .evcard{transition:transform .18s ease,box-shadow .18s ease}
/* Los filtros brincan suave al elegirlos */
.chip{transition:transform .18s ease,background .18s ease,color .18s ease}
.chip:active{transform:scale(.93)}
.chip.on{box-shadow:0 3px 10px rgba(0,0,0,.25);position:relative}
.chip.on::after{content:'';position:absolute;left:20%;right:20%;bottom:4px;height:3px;border-radius:99px;background:#22c55e}
/* Las tarjetas del Social y Top entran suave */
.sqblock .card{animation:cardIn .4s cubic-bezier(.22,.9,.28,1) backwards}
/* La entrada solo la primera vez: al cambiar de ventana no se repite */
.events-grid.done .evcard,.events-grid.done .evcard .fbody{animation:none}
#view-social.done .sqblock .card{animation:none}
/* Las fotos cargan con fundido en vez de aparecer de golpe */
.evcard.fullbg{background-color:#222}
.evcard.fullbg .fbody{animation:cardIn .5s cubic-bezier(.22,.9,.28,1) .1s backwards}
/* Cuadritos lado a lado nunca se salen de la pantalla */
.card .row>input,.card .row>select,.card .row>div{flex:1;min-width:0}
.card .row input,.card .row select{min-width:0;max-width:100%}
#orgModal input,#orgModal select,#orgModal textarea{max-width:100%}
/* Las páginas que se abren encima solo se mueven vertical, nunca de lado */
#evModal,#profileModal,#runnerModal,#orgModal,#topModal{touch-action:pan-y;overflow-x:hidden;overscroll-behavior:contain}
/* Las páginas que se abren encima suben suave */
#evModal>div,#profileModal>div,#runnerModal>div{animation:sheetUp .28s cubic-bezier(.22,.9,.28,1)}
@keyframes sheetUp{from{opacity:.4;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
/* Medalla 3D: se rota con el dedo, gira sola si no la tocas */
model-viewer.medal3d{width:100%;height:280px;background:#f7f7f7;border-radius:12px;--poster-color:#f7f7f7}
/* ===== ORDEN v149 (mismo look, menos copia: usa estas clases en lo nuevo) ===== */
.inp{width:100%;padding:12px;border-radius:10px;border:1px solid #e5e5e5;background:#fff;color:#111;font-size:16px}
.btn-dark{width:100%;background:#111;border:0;border-radius:12px;padding:15px;color:#fff;font-weight:800;font-size:16px;cursor:pointer}
.btn-green{width:100%;background:#16a34a;border:0;border-radius:12px;padding:15px;color:#fff;font-weight:800;font-size:16px;cursor:pointer}
.btn-dark14{width:100%;background:#111;border:0;border-radius:12px;padding:14px;color:#fff;font-weight:800;font-size:16px;cursor:pointer}
.btn-quiet{width:100%;margin-top:8px;background:#f2f2f2;border:1px solid #d4d4d4;border-radius:12px;padding:12px;color:#525252;font-size:14px;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.10);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn-quietb{width:100%;margin-top:8px;background:#f2f2f2;border:1px solid #d4d4d4;border-radius:12px;padding:12px;color:#525252;font-size:14px;font-weight:800;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.10);transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.btn-quiet:active,.btn-quietb:active{transform:translateY(1px) scale(.99);box-shadow:none;background:#e8e8e8}
.sheet{background:#fff;border-radius:20px 20px 0 0;padding:22px 18px 30px;max-width:480px;width:100%}
/* Editar perfil entra suave desde la izquierda */
#editProfileModal{animation:slideFromL .32s cubic-bezier(.22,.9,.28,1)}
@keyframes slideFromL{from{opacity:.3;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
/* ===== RUNNING AZUL v159 (badge de la casilla + filtro Running activo) ===== */
.badge-running{background:var(--running-blue)}
.chip-run{border-color:var(--running-blue)}
.chip-run.on{background:var(--running-blue);border-color:var(--running-blue)}
.chip-run.on::after{background:var(--running-blue)}
/* ===== REDISEÑO v161 (fondos suaves, verde de marca, sombras) ===== */
/* Top Global Puerto Rico: seccion con fondo propio, filas blancas */
#sqTop{background:#f7f7f7}
/* Barra de abajo: el icono activo va en verde de marca (la pastilla sigue negra) */
.tabbar button.active .tab-ico svg{stroke:#22c55e}
/* ===== FASE 1 DISEÑO v162 (Explorar: región, campana, burbujas y casilla boleto) ===== */
/* Selector de región del header de Explorar (visual por ahora, sin acción) */
.region-btn{display:flex;align-items:center;gap:7px;background:none;border:0;font-size:20px;font-weight:800;color:#111;cursor:pointer;padding:6px 10px;border-radius:12px}
.region-btn:active{background:#ececec}
/* Campana: punto rojo solo si hay avisos sin leer */
.campana{position:absolute;right:0;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid #e5e5e5;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.07);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.campana .punto{display:none;position:absolute;top:8px;right:9px;width:9px;height:9px;border-radius:50%;background:#ef4444;border:2px solid #fff}
.campana.tiene-notificacion .punto{display:block}
/* Burbujas de categoría: círculo pastel + texto debajo (el filtro sigue igual) */
.chip.categoria-burbuja{background:none;border:0;color:#525252;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:62px}
.chip.categoria-burbuja.on{background:none;border-color:transparent;color:#111;box-shadow:none}
.chip.categoria-burbuja.on::after{display:none}
.chip.categoria-burbuja.chip-run.on{background:none;border-color:transparent}
.burbuja-circulo{width:56px;height:56px;border-radius:50%;border:2px solid transparent;display:flex;align-items:center;justify-content:center;transition:border-color .18s ease,transform .18s ease}
.chip.categoria-burbuja:active .burbuja-circulo{transform:scale(.94)}
.chip.categoria-burbuja.on .burbuja-circulo{border-color:#111}
.chip.categoria-burbuja.chip-run.on .burbuja-circulo{border-color:var(--running-blue)}
.burbuja-lbl{font-size:11px;font-weight:700;line-height:1.1;max-width:66px;text-align:center}
.chip.categoria-burbuja.on .burbuja-lbl{font-weight:800}
.bg-todos{background:var(--pastel-todos)}
.bg-running{background:var(--pastel-running)}
.bg-comedia{background:var(--pastel-comedia)}
.bg-musica{background:var(--pastel-musica)}
.bg-social{background:var(--pastel-social)}
.bg-politica{background:var(--pastel-politica)}
.bg-deportes{background:var(--pastel-deportes)}
.bg-corporativo{background:var(--pastel-corporativo)}
/* Casilla boleto: corazón de favorito, fila de cupo y precio */
.evcard .fav-btn{position:absolute;top:8px;right:8px;z-index:2;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(17,17,17,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.evcard .fav-btn:active{transform:scale(.92)}
.evcard .frow{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:8px;color:#fff}
.evcard .frow small{margin-right:auto;display:flex;align-items:center;gap:4px;color:#fff;font-size:12px;text-shadow:0 1px 6px rgba(0,0,0,.65)}
.evcard .price{background:#fff;color:#111}
/* ===== FASE 2 DISEÑO v164 (Mis Inscripciones: pastilla Próximos/Historial + badges) ===== */
/* Cápsula con deslizador verde: el texto activo va en blanco */
.pastilla-toggle{position:relative;display:flex;background:#ececec;border:1px solid #e0e0e0;border-radius:99px;padding:4px;margin-bottom:12px}
.pastilla-toggle button{flex:1;position:relative;z-index:1;background:none;border:0;padding:11px 6px;font-size:14px;font-weight:800;color:#737373;cursor:pointer;border-radius:99px;transition:color .22s ease}
.pastilla-toggle button.on{color:#fff}
.pastilla-slider{position:absolute;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/2);background:#16a34a;border-radius:99px;transition:transform .26s cubic-bezier(.34,1.3,.64,1)}
.pastilla-toggle.hist .pastilla-slider{transform:translateX(100%)}
/* Badge de categoría arriba del título de cada inscripción */
.cat-badge{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px;color:#fff;font-size:10px;font-weight:800;letter-spacing:.6px;margin-bottom:6px}
/* En "Mis Inscripciones" el badge va más chico (etiqueta, no bloque) y la casilla es horizontal */
.tix-card .cat-badge{font-size:9px;padding:2px 7px;gap:4px;margin-bottom:3px}
.tix-card .cat-badge svg{width:11px;height:11px}
/* ===== FASE 3 DISEÑO v165 (Mi actividad: rango de 4, tarjetas y actividad reciente) ===== */
.pastilla-toggle.opts4 .pastilla-slider{width:calc((100% - 8px)/4)}
.pastilla-toggle.pos2 .pastilla-slider{transform:translateX(100%)}
.pastilla-toggle.pos3 .pastilla-slider{transform:translateX(200%)}
.pastilla-toggle.pos4 .pastilla-slider{transform:translateX(300%)}
.stat-card{padding:14px 6px}
.stat-card .ico{display:flex;justify-content:center;margin-bottom:2px}
.stat-card b{font-size:22px}
.stat-card span{font-size:11px}
.stat-row{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.stat-dot{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.stat-row>div b{font-size:15px;display:block}
.stat-row>div small{display:block;color:#737373;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ===== FASE 4 DISEÑO v166 (Ajustes: filas con ícono, subtítulo y switch verde) ===== */
.set-box{background:#fff;border:1px solid #e5e5e5;border-radius:14px;overflow:hidden;margin-bottom:12px}
.set-row{display:flex;align-items:center;gap:12px;padding:13px 12px;border-bottom:1px solid #f0f0f0}
.set-row:last-child{border-bottom:0}
.set-row[onclick]{cursor:pointer}
.set-row[onclick]:active{background:#fafafa}
.set-ico{width:38px;height:38px;border-radius:50%;background:#f2f2f2;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.set-txt{flex:1;min-width:0}
.set-txt b{display:block;font-size:15px}
.set-txt small{display:block;color:#737373;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.set-arrow{display:flex;align-items:center;flex:0 0 auto}
.switch{position:relative;width:46px;height:26px;border-radius:99px;border:1px solid #d4d4d4;background:#e5e5e5;cursor:pointer;flex:0 0 auto;transition:background .2s ease,border-color .2s ease;padding:0}
.switch::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease}
.switch.on{background:#16a34a;border-color:#16a34a}
.switch.on::after{transform:translateX(20px)}
/* ===== FASE 5 DISEÑO v169 (Mi Perfil: colina arriba + engranaje, bio, 4 stats, tarjetas y fotos) ===== */
.pf-hero{position:relative;height:132px;margin:-16px -16px 0;overflow:hidden}
.pf-hill{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
.pf-gear{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:0;background:#fff;box-shadow:0 3px 10px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.pf-avatar{position:relative;z-index:1;width:96px;height:96px;margin:16px auto 0;border-radius:50%;border:3px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.15);background:#e5e5e5;display:flex;align-items:center;justify-content:center;color:#fff;font-size:42px;overflow:hidden}
.pf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:14px 0 2px;text-align:center}
.pf-stats b{font-size:18px;display:block}
.pf-stats small{color:#737373;font-size:11px}
.pf-stats>div:not(:last-child){border-right:1px solid #e5e5e5}
.pf-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-card{background:#fff;border:1px solid #e5e5e5;border-radius:14px;padding:14px;cursor:pointer;transition:transform .15s ease}
.pf-card:active{transform:scale(.98)}
.pf-card-ico{display:flex;margin-bottom:8px}
.pf-card b{display:block;font-size:15px}
.pf-card small{display:block;color:#737373;font-size:12px;margin-top:2px}
.pf-photos-head{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px}
.pf-photos-head b{font-size:16px}
.pf-photos{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
.pf-photos::-webkit-scrollbar{display:none}
.pf-photos img{flex:0 0 auto;width:104px;height:78px;object-fit:cover;border-radius:12px;border:1px solid #e5e5e5;scroll-snap-align:start;cursor:pointer}
/* ===== FASE 6 DISEÑO v173 (Comunidades: feed con pestañas, posts, likes y comentarios) ===== */
.feed-tabs{display:flex;gap:6px;margin-bottom:12px;overflow-x:auto;scrollbar-width:none;padding:2px}
.feed-tabs::-webkit-scrollbar{display:none}
.ftab{flex:0 0 auto;border:1px solid #e5e5e5;background:#fff;border-radius:99px;padding:9px 16px;font-size:13px;font-weight:800;color:#737373;cursor:pointer}
.ftab.on{background:#16a34a;border-color:#16a34a;color:#fff}
.post-card{padding:0;overflow:hidden}
.post-head{display:flex;align-items:center;gap:10px;padding:12px 14px 0}
.post-av{width:40px;height:40px;border-radius:50%;overflow:hidden;background:#e5e5e5;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.post-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.post-who{flex:1;min-width:0}
.post-who b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post-who small{display:block;color:#737373;font-size:12px}
.post-follow{border:1px solid #e5e5e5;background:#fff;border-radius:99px;padding:6px 12px;font-size:12px;font-weight:800;color:#111;cursor:pointer;flex:0 0 auto}
.post-follow.on{background:#f0fdf4;border-color:#16a34a;color:#16a34a}
.post-txt{padding:10px 14px;font-size:15px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.post-img{width:100%;max-height:420px;object-fit:cover;display:block;cursor:pointer}
.post-foot{display:flex;align-items:center;gap:4px;padding:8px 6px 6px;border-top:1px solid #f0f0f0}
.post-act{flex:1;background:none;border:0;color:#525252;font-size:13px;font-weight:700;cursor:pointer;padding:9px 4px;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:10px}
.post-act:active{background:#f7f7f7}
.post-act.on{color:#16a34a}
.fc-row{padding:10px 2px;border-bottom:1px solid #f0f0f0;font-size:14px}
.fc-row b{font-size:13.5px}
.fc-row small{color:#737373;font-size:11px}
.fc-row div{margin-top:2px;color:#111;white-space:pre-wrap;word-break:break-word}
/* FASE 6 · Grupos (paso 4) */
.grupo-card{display:flex;align-items:center;gap:12px;padding:14px}
.grupo-ico{width:42px;height:42px;border-radius:50%;background:#f2f2f2;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.grupo-card b{display:block;font-size:15px}
.grupo-card small{display:block;color:#737373;font-size:12px;margin-top:2px}
.grupo-desc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grupo-btn{border:1px solid #111;background:#111;color:#fff;border-radius:99px;padding:8px 14px;font-size:12px;font-weight:800;cursor:pointer}
.grupo-btn.on{background:#f0fdf4;border-color:#16a34a;color:#16a34a}
.grupo-del{background:none;border:0;cursor:pointer;padding:2px;display:flex;align-items:center;justify-content:center}
/* FASE 6 · Historias (paso 5) */
.stories{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;margin-bottom:4px;scrollbar-width:none}
.stories::-webkit-scrollbar{display:none}
.story{flex:0 0 auto;width:66px;text-align:center;cursor:pointer}
.story-ring{width:62px;height:62px;border-radius:50%;padding:3px;background:#e5e5e5;margin:0 auto;display:flex;align-items:center;justify-content:center}
.story-ring.has{background:linear-gradient(135deg,var(--sc1,#166534),var(--sc2,#22c55e))}
.story-av{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;color:#16a34a;font-size:22px}
.story small{display:block;font-size:11px;color:#525252;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scdots{display:flex;gap:10px}
.scdot{width:34px;height:34px;border-radius:50%;border:2px solid transparent;cursor:pointer}
.scdot.on{border-color:#111;box-shadow:inset 0 0 0 2px #fff}
/* ↻ Deslizar hacia abajo para actualizar (Eventos, Social, Perfil) */
#pullHint{position:fixed;top:calc(8px + env(safe-area-inset-top));left:50%;z-index:30;display:flex;align-items:center;gap:7px;background:#fff;color:#111;border:1px solid #e5e5e5;border-radius:99px;padding:7px 14px;font-size:13px;font-weight:800;box-shadow:0 6px 20px rgba(0,0,0,.22);opacity:0;transform:translate(-50%,-64px);transition:transform .2s ease,opacity .2s ease;pointer-events:none;white-space:nowrap}
#pullHint.on{opacity:1}
#pullHint.spin .pull-spin{animation:pullspin .8s linear infinite}
@keyframes pullspin{to{transform:rotate(360deg)}}
/* ===== REDISEÑO v190 (Explorar: título, categorías en 4x2, casilla sin cristal y botón +) ===== */
/* Título de la app dentro de la ventana Explorar */
.muvana-head{margin:0 0 12px;text-align:center}
.muvana-title{font-size:31px;font-weight:800;color:#16a34a;letter-spacing:-.5px;line-height:1.1}
.muvana-tagline{font-size:13px;color:#737373;margin-top:3px}
/* Categorías: "Todos" chiquito arriba + 8 círculos en 2 filas de 4 */
.cat-todos-row{display:flex;justify-content:center;margin-bottom:12px}
.chip-todos{background:#fff;border-color:#e5e5e5;color:#111;font-size:12px;padding:7px 18px}
.chip-todos.on{background:#111;border-color:#111;color:#fff}
.chip-todos.on::after{display:none}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px 4px}
.cat-grid .chip.categoria-burbuja{min-width:0;width:100%}
.cat-grid .burbuja-lbl{max-width:100%}
.bg-conciertos{background:#EDE9FE}
.bg-actividades{background:#FEF3C7}
.bg-cat-politica{background:#DBEAFE}
.bg-religion{background:#FEE2E2}
.bg-carros{background:#DBEAFE}
.bg-cat-comedia{background:#DCFCE7}
.bg-cat-musica{background:#FCE7F3}
/* Casilla de evento: foto arriba y texto en fondo blanco abajo (sin cristal) */
#eventsList.events-grid{grid-template-columns:1fr;gap:12px}
.evcard.evcard-h{padding:0;overflow:hidden;min-height:0;background:#fff;color:#111;border-radius:16px}
.evcard-h .evcard-photo{position:relative;height:200px;background-size:cover;background-position:center;background-color:#222;border-radius:16px 16px 0 0}
.evcard-h .casilla-info{padding:22px 14px 14px;text-align:left}
.evcard-h .casilla-info>b{font-size:17px;line-height:1.3;display:block}
.evcard-h .info-line{display:flex;align-items:center;gap:5px;margin-top:7px;color:#737373;font-size:14px}
.evcard-h .frow{margin-top:4px}
.evcard-h .frow small{color:#525252;text-shadow:none}
.evcard-h .price{background:#111;color:#fff}
.evcard-h .fav-btn{top:10px;right:10px}
/* Botón redondo flotante para crear evento (sobre la barra de abajo) */
.org-fab-wrap{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(88px + env(safe-area-inset-bottom));width:calc(100% - 32px);max-width:448px;display:flex;justify-content:flex-end;z-index:19;pointer-events:none}
.org-fab{pointer-events:auto;width:58px;height:58px;border-radius:50%;background:#16a34a;border:0;color:#fff;font-size:30px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;padding:0 0 2px;box-shadow:0 8px 22px rgba(0,0,0,.28);cursor:pointer;transition:transform .15s ease}
.org-fab:active{transform:scale(.94)}