*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#eef2f7;color:#0f172a}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.app-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid #dbe3ee;padding:12px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}#spa-nav{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}.brand{display:flex;align-items:center;gap:10px}.brand-logo{width:42px;height:42px;border-radius:16px;background:linear-gradient(135deg,#0f766e,#2563eb);color:white;display:grid;place-items:center;font-weight:1000}.brand strong{display:block}.brand span{display:block;font-size:12px;color:#64748b}.top-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.top-nav a,.inline-form button{border:0;background:#f1f5f9;border-radius:999px;padding:9px 12px;font-weight:800;color:#334155;cursor:pointer}.top-nav a:hover,.inline-form button:hover{background:#e2e8f0}.inline-form{margin:0}.socket-pill{display:flex;align-items:center;gap:8px;white-space:nowrap;background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;border-radius:999px;padding:8px 12px;font-size:13px;font-weight:900}.socket-pill span{width:10px;height:10px;border-radius:50%;background:#f97316}.socket-pill.online{background:#ecfdf5;border-color:#bbf7d0;color:#166534}.socket-pill.online span{background:#22c55e}.socket-pill.offline{background:#fef2f2;border-color:#fecaca;color:#991b1b}.socket-pill.offline span{background:#ef4444}.spa-root{max-width:1180px;margin:24px auto;padding:0 16px}.loading-card,.empty-card,.panel-card,.auth-card,.side-card,.composer,.post-card,.profile-card{background:white;border:1px solid #e2e8f0;border-radius:28px;box-shadow:0 24px 70px -45px rgba(15,23,42,.45)}.loading-card,.empty-card{padding:25px;text-align:center;color:#64748b}.auth-card{max-width:460px;margin:40px auto;padding:28px}.auth-card.wide{max-width:760px}.auth-card h1,.panel-card h1{margin-top:0}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}label{display:block;font-weight:850;margin-bottom:14px}input,textarea,select{width:100%;margin-top:7px;border:1px solid #cbd5e1;border-radius:16px;padding:12px 13px;background:#fff;color:#0f172a}textarea{min-height:105px;resize:vertical}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;background:#0f766e;color:white;border-radius:999px;padding:11px 17px;font-weight:950;cursor:pointer}.btn:hover{filter:brightness(.96)}.btn.full{width:100%;margin-top:10px}.btn.ghost{background:#eef2ff;color:#3730a3}.plain-btn,.vote-btn,.reaction-grid button{border:1px solid #dbe3ee;background:#f8fafc;border-radius:999px;padding:9px 12px;font-weight:900;cursor:pointer}.plain-btn.active,.vote-btn.active{background:#dcfce7;border-color:#86efac;color:#166534}.vote-btn.danger.active{background:#fee2e2;border-color:#fca5a5;color:#991b1b}.check-row{display:flex;gap:10px;align-items:flex-start}.check-row input{width:auto;margin-top:4px}.form-links{text-align:center;color:#2563eb;font-weight:800}.feed-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:18px}.side-card{padding:22px;height:max-content;position:sticky;top:92px}.status-badge{display:inline-flex;border-radius:999px;padding:7px 10px;background:#f1f5f9;color:#475569;font-weight:900;font-size:12px}.status-badge.verified{background:#dcfce7;color:#166534}.status-badge.pending{background:#fef9c3;color:#854d0e}.status-badge.rejected{background:#fee2e2;color:#991b1b}.feed-main{display:grid;gap:16px}.composer{padding:18px}.composer-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.composer textarea{min-height:130px}.posts-list{display:grid;gap:16px}.post-card{padding:18px}.post-head{display:flex;align-items:center;gap:12px}.avatar{border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 18px rgba(15,23,42,.16);background:#e2e8f0}.post-meta{min-width:0;flex:1}.post-meta strong{display:block}.post-meta span,.muted,.side-card p{color:#64748b;font-size:13px}.post-delete button{border:0;background:#fee2e2;color:#991b1b;border-radius:999px;padding:8px 10px;font-weight:900;cursor:pointer}.post-content{font-size:16px;line-height:1.55;margin:15px 0}.file-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;margin:14px 0}.file-grid.small{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}.file-tile{border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;background:#f8fafc}.file-tile img,.file-tile video{width:100%;height:170px;object-fit:cover;display:block}.file-grid.small .file-tile img,.file-grid.small .file-tile video{height:120px}.doc-link{display:flex;gap:10px;align-items:center;min-height:92px;padding:14px}.doc-link span{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#e0f2fe;color:#075985;font-weight:1000}.community-box{margin-top:14px;border:1px solid #dbe3ee;border-radius:22px;background:#f8fafc;padding:13px}.vote-row{display:flex;gap:10px;flex-wrap:wrap}.resolution-editor{margin-top:12px}.resolution-editor summary{cursor:pointer;font-weight:950}.resolution-box{margin-top:12px;background:white;border:1px solid #e2e8f0;border-radius:20px;padding:15px}.resolution-box h4{margin:0 0 8px}.reaction-grid{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.comments{border-top:1px solid #e2e8f0;margin-top:14px;padding-top:12px}.comment{display:flex;gap:9px;padding:8px 0}.comment p{margin:3px 0 0}.comment-form{display:flex;gap:8px;margin-top:8px}.comment-form input{margin:0}.actions-row{display:flex;gap:10px}.profile-card{overflow:hidden}.cover{height:150px;background:linear-gradient(135deg,#0f766e,#38bdf8,#818cf8)}.profile-main{display:flex;align-items:center;gap:18px;padding:0 24px 22px;transform:translateY(-35px);margin-bottom:-35px}.profile-main .avatar{width:96px;height:96px}.profile-main div{flex:1}.profile-info{padding:0 24px 24px}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.panel-card{padding:24px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:14px}.notif-list,.admin-list{display:grid;gap:10px}.notif-item,.admin-row{border:1px solid #e2e8f0;border-radius:18px;padding:14px;background:#f8fafc}.notif-item.unread{background:#eff6ff;border-color:#bfdbfe}.notif-item span{display:block;color:#64748b;font-size:12px;margin-top:5px}.admin-row{display:grid;grid-template-columns:1fr minmax(300px,420px);gap:14px}.toast{position:fixed;right:20px;bottom:20px;z-index:90;background:#0f172a;color:white;border-radius:18px;padding:14px 18px;box-shadow:0 20px 60px rgba(15,23,42,.35);font-weight:850;max-width:360px}.toast.error{background:#991b1b}.toast.success{background:#166534}.legal{line-height:1.65}@media(max-width:820px){.app-header{align-items:flex-start;flex-direction:column}.socket-pill{align-self:flex-end}.feed-layout,.settings-grid,.admin-row{grid-template-columns:1fr}.side-card{position:static}.form-grid,.composer-row{grid-template-columns:1fr}.profile-main{align-items:flex-start;flex-direction:column}.top-nav{width:100%}.top-nav a,.inline-form button{font-size:13px;padding:8px 10px}}

/* ===== SPA modular con header fijo y menú lateral ===== */
.spa-shell-body{padding-top:76px;min-height:100vh}.fixed-header{position:fixed!important;top:0;left:0;right:0;z-index:1000;height:76px;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;padding:10px 18px!important}.header-brand{display:flex;align-items:center;gap:10px;min-width:0}.header-brand strong{display:block;line-height:1.05}.header-brand span{display:block;font-size:12px;color:#64748b}.menu-toggle{width:46px;height:46px;border:0;border-radius:16px;background:#0f172a;display:grid;place-items:center;gap:0;padding:10px;cursor:pointer;box-shadow:0 16px 35px -25px rgba(15,23,42,.7)}.menu-toggle span{display:block;width:22px;height:2px;background:white;border-radius:99px}.menu-toggle:hover{filter:brightness(1.08)}.drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:1100;opacity:0;transition:opacity .18s ease}.drawer-backdrop.show{opacity:1}.side-drawer{position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);background:rgba(255,255,255,.98);backdrop-filter:blur(18px);z-index:1200;transform:translateX(-104%);transition:transform .22s ease;box-shadow:34px 0 80px -45px rgba(15,23,42,.75);border-right:1px solid #e2e8f0;display:flex;flex-direction:column}.side-drawer.open{transform:translateX(0)}.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px;border-bottom:1px solid #e2e8f0}.brand.compact .brand-logo{width:38px;height:38px;border-radius:14px}.drawer-close{width:42px;height:42px;border:0;border-radius:999px;background:#f1f5f9;color:#0f172a;font-size:28px;line-height:1;cursor:pointer}.drawer-close:hover{background:#e2e8f0}.drawer-nav-wrap{padding:14px;overflow-y:auto}.side-nav{display:grid;gap:9px}.menu-user-card{display:flex;align-items:center;gap:12px;border:1px solid #e2e8f0;background:#f8fafc;border-radius:22px;padding:12px;margin-bottom:8px}.menu-user-card strong{display:block}.menu-user-card span{display:block;color:#64748b;font-size:13px;margin-top:2px}.side-nav a{display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:18px;padding:13px 14px;background:#f8fafc;color:#26364f;font-weight:950}.side-nav a:hover,.side-nav a.active{background:#e0f2fe;border-color:#bae6fd;color:#075985}.side-nav a b{margin-left:auto;min-width:26px;height:24px;padding:0 7px;border-radius:999px;background:#ef4444;color:white;display:inline-grid;place-items:center;font-size:12px}.side-logout{margin-top:10px}.side-logout button{width:100%;border:0;border-radius:18px;padding:13px 14px;background:#fee2e2;color:#991b1b;font-weight:950;cursor:pointer}.side-logout button:hover{filter:brightness(.98)}.spa-root{margin-top:22px!important}.drawer-open{overflow:hidden}@media(max-width:820px){.fixed-header{height:70px;padding:8px 12px!important;grid-template-columns:auto minmax(0,1fr) auto}.spa-shell-body{padding-top:70px}.header-brand span{display:none}.socket-pill{font-size:12px;padding:7px 10px}.socket-pill b{max-width:92px;overflow:hidden;text-overflow:ellipsis}.app-header{flex-direction:unset!important;align-items:center!important}.spa-root{margin:16px auto!important}.menu-toggle{width:42px;height:42px}.header-brand .brand-logo{width:38px;height:38px}}

.post-card .comments .comments-scroll{display:block;max-height:clamp(160px,28vh,220px);min-height:0;overflow-y:auto!important;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin}.post-card .comments .comments-scroll:empty{display:none}
.mototaxi-gate {
    display: grid;
    gap: 16px;
}

.mototaxi-status-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mototaxi-status-strip span {
    border: 1px solid #d1fae5;
    background: #ecfdf5;
    color: #047857;
    border-radius: 999px;
    padding: 7px 10px;
    font-weight: 800;
    font-size: 13px;
}

.mototaxi-driver-request {
    display: grid;
    gap: 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px;
    background: #f8fafc;
}

.mototaxi-map-shell {
    min-height: 620px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: #e5e7eb;
}

.mototaxi-map-shell iframe {
    display: block;
    width: 100%;
    height: min(72vh, 760px);
    min-height: 620px;
    border: 0;
}

@media (max-width: 720px) {
    .mototaxi-map-shell,
    .mototaxi-map-shell iframe {
        min-height: 70vh;
    }
}