* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, sans-serif; background: #f4f6f9; color: #1f2937; }
.topbar { display: flex; align-items: center; gap: 2rem; background: #111827; color: #fff; padding: .8rem 1.5rem; }
.topbar .brand { font-size: 1.25rem; font-weight: 700; }
.topbar nav a { color: #cbd5e1; text-decoration: none; margin-right: 1rem; }
.topbar nav a:hover { color: #fff; }
main { padding: 1.25rem; }

.dashboard { display: grid; grid-template-columns: 280px 1fr; gap: 1rem; }

/* Barra de filtros estilo Uber */
.filter-bar { display: flex; align-items: flex-end; gap: 1rem; background: #1f2430; color: #fff;
    padding: .9rem 1.25rem; border-radius: 12px; margin-bottom: 1rem; flex-wrap: wrap; }
.fb-field { display: flex; flex-direction: column; gap: .25rem; }
.fb-label { font-size: .72rem; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; }
.filter-bar select, .filter-bar input { background: #fff; border: none; border-radius: 6px; padding: .45rem .6rem; min-width: 150px; }
.apply-btn { background: #2563eb; color: #fff; border: none; padding: .55rem 1.1rem; border-radius: 6px; cursor: pointer; height: 38px; }

/* Pestañas */
.tabs { display: inline-flex; background: #eef0f4; border-radius: 8px; padding: 4px; margin-bottom: 1rem; }
.tab { background: transparent; border: none; padding: .45rem 1.1rem; border-radius: 6px; cursor: pointer; font-size: .9rem; color: #374151; }
.tab.active { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.12); font-weight: 600; }
.overview-title { margin: .25rem 0 1rem; font-size: 1.4rem; }

/* Layout principal: lista + mapa */
.main-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; align-items: start; }
.user-list { max-height: 72vh; overflow-y: auto; }
.u-info { display: flex; flex-direction: column; line-height: 1.2; }
.u-name { font-weight: 600; font-size: .92rem; }
.u-meta { font-size: .76rem; color: #6b7280; }
.u-locate { margin-left: auto; }
.map-wrap { padding: 0; overflow: hidden; }
.map-wrap #map { height: 72vh; border-radius: 12px; }
.user-row { transition: background .15s; padding: .5rem; border-radius: 8px; }
.user-row:hover { background: #f5f7fb; }
.panel { background: #fff; border-radius: 12px; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1rem; }
.stat-card { background: #fff; border-radius: 12px; padding: 1rem 1.25rem; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.stat-card .value { font-size: 1.9rem; font-weight: 700; }
.stat-card .label { color: #6b7280; font-size: .85rem; }
.stat-card.green .value { color: #16a34a; }
.stat-card.red .value { color: #dc2626; }
.stat-card.blue .value { color: #2563eb; }
.stat-card.amber .value { color: #d97706; }

#map { height: 70vh; border-radius: 12px; }
.filter-group { margin-bottom: 1rem; }
.filter-group label { display: block; font-size: .8rem; color: #6b7280; margin-bottom: .25rem; }
.filter-group input, .filter-group select { width: 100%; padding: .45rem; border: 1px solid #d1d5db; border-radius: 8px; }
.user-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .9rem; cursor: pointer; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot.on { background: #16a34a; } .dot.off { background: #9ca3af; }
button.primary { background: #2563eb; color: #fff; border: none; padding: .55rem 1rem; border-radius: 8px; cursor: pointer; }
button { background: #eef2ff; border: 1px solid #c7d2fe; padding: .35rem .7rem; border-radius: 6px; cursor: pointer; }

.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { text-align: left; padding: .5rem .4rem; border-bottom: 1px solid #eef0f4; font-size: .9rem; }
.grid th { color: #6b7280; font-weight: 600; }

.user-row.sel { background: #eef2ff; border-radius: 6px; }

.modal-back { position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { background: #fff; border-radius: 12px; padding: 1.5rem; width: 380px; max-width: 90vw; }
.days { display: flex; flex-wrap: wrap; gap: .5rem; }
.day { display: flex; align-items: center; gap: .25rem; font-size: .85rem; }

.chat-panel { display: flex; flex-direction: column; height: 70vh; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: .5rem; padding: .5rem 0; }
.bubble { max-width: 70%; padding: .5rem .75rem; border-radius: 12px; font-size: .9rem; }
.bubble.me { align-self: flex-end; background: #2563eb; color: #fff; }
.bubble.them { align-self: flex-start; background: #f1f5f9; }
.bubble .time { display: block; font-size: .7rem; opacity: .7; margin-top: .2rem; }
.chat-input { display: flex; gap: .5rem; }
.chat-input input { flex: 1; padding: .55rem; border: 1px solid #d1d5db; border-radius: 8px; }