:root {
	--ar-green:  #7AFF3E;
	--ar-black:  #111111;
	--ar-white:  #ffffff;
	--ar-gray:   #f2f2f2;
	--ar-border: #e8e8e8;
	--ar-muted:  #888888;
	--ar-red:    #ff3b30;
	--ar-radius: 20px;
	--ar-radius-sm: 12px;
}
.aroda-widget,.aroda-widget *,
.aroda-activities-page,.aroda-activities-page *,
.aroda-share-body,.aroda-share-body * { box-sizing:border-box; }
.aroda-widget [hidden],.aroda-activities-page [hidden] { display:none !important; }

/* Botón apertura */
.aroda-open-btn {
	display:inline-flex; align-items:center; gap:10px;
	background:#111; color:#fff; border:none; border-radius:999px;
	padding:14px 28px; font-size:15px; font-weight:700; cursor:pointer;
}
.aroda-open-btn:hover { opacity:.85; }

/* Botones */
.aroda-btn-black {
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	background:#111; color:#fff; border:none; border-radius:999px;
	padding:16px 24px; font-size:15px; font-weight:700; cursor:pointer;
	white-space:nowrap; transition:opacity .15s;
}
.aroda-btn-black:hover { opacity:.85; }
.aroda-btn-black:disabled { opacity:.45; cursor:not-allowed; }
.aroda-btn-full { width:100%; }

.aroda-btn-outline {
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	background:#fff; color:#111; border:1.5px solid #e8e8e8; border-radius:999px;
	padding:14px 24px; font-size:15px; font-weight:600; cursor:pointer;
}
.aroda-btn-outline:hover { border-color:#aaa; }

.aroda-btn-outline-sm {
	display:inline-flex; align-items:center; justify-content:center;
	background:#fff; color:#111; border:1.5px solid #e8e8e8; border-radius:999px;
	padding:13px 20px; font-size:14px; font-weight:600; cursor:pointer; flex:1;
}
.aroda-btn-red {
	display:inline-flex; align-items:center; justify-content:center; gap:6px;
	background:rgba(255,59,48,.08); color:#ff3b30;
	border:1.5px solid rgba(255,59,48,.25); border-radius:999px;
	padding:13px 20px; font-size:14px; font-weight:700; cursor:pointer; flex:1;
}
.aroda-btn-red:hover { background:rgba(255,59,48,.15); }
.aroda-btn-ghost-sm {
	background:none; border:none; color:#888; font-size:13px; font-weight:600;
	cursor:pointer; padding:8px 12px; border-radius:8px;
}
.aroda-btn-ghost-sm:hover { color:#ff3b30; }

/* App overlay */
body.aroda-route-lock { overflow:hidden; }
.aroda-app { position:fixed; inset:0; z-index:99999; background:#f2f2f2; }

/* Mapa */
.aroda-map-full { position:absolute; inset:0; background:#e8e8e8; }

/* Header flotante */
.aroda-float-header {
	position:absolute; top:16px; left:16px; z-index:1000;
	display:flex; align-items:center; gap:10px;
}
.aroda-back-btn {
	width:42px; height:42px; border-radius:50%;
	background:#fff; border:none; display:flex; align-items:center; justify-content:center;
	cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.15); color:#111; flex-shrink:0;
}
.aroda-back-btn:hover { background:#f5f5f5; }
.aroda-float-label {
	display:flex; align-items:center; gap:8px;
	background:#fff; border-radius:999px; padding:10px 18px;
	font-size:15px; font-weight:700; color:#111;
	box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.aroda-status-dot {
	width:9px; height:9px; border-radius:50%; background:#ccc; flex-shrink:0; transition:background .3s;
}
.aroda-status-dot.recording { background:#7AFF3E; animation:aroda-pulse 1.5s infinite; }
.aroda-status-dot.paused    { background:#f5a623; }
@keyframes aroda-pulse {
	0%,100%{ box-shadow:0 0 0 0 rgba(122,255,62,.5); }
	50%     { box-shadow:0 0 0 5px rgba(122,255,62,0); }
}

/* Tarjeta inferior — z-index 1000 para estar encima de Leaflet */
.aroda-bottom-card {
	position:absolute; bottom:0; left:0; right:0; z-index:1000;
	background:#ffffff;
	border-radius:20px 20px 0 0;
	box-shadow:0 -4px 20px rgba(0,0,0,.12);
	padding:20px 20px max(20px, env(safe-area-inset-bottom));
}
.aroda-live-stats {
	display:flex; align-items:center; justify-content:space-around; margin-bottom:14px;
}
.aroda-stat-col { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.aroda-stat-col strong {
	font-size:28px; font-weight:800; color:#111; font-variant-numeric:tabular-nums; line-height:1;
}
.aroda-stat-col span {
	font-size:10px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.7px;
}
.aroda-stat-sep { width:1px; height:32px; background:#e8e8e8; flex-shrink:0; }
.aroda-ctrls { display:flex; flex-direction:column; gap:10px; }
.aroda-btn-row { display:flex; gap:10px; }

/* Panel resumen — sobre todo */
.aroda-summary-overlay {
	position:absolute; inset:0; z-index:2000;
	background:rgba(0,0,0,.3);
	display:flex; align-items:flex-end;
}
.aroda-summary-inner {
	width:100%; background:#fff;
	border-radius:20px 20px 0 0;
	padding:24px 20px max(24px,env(safe-area-inset-bottom));
	max-height:90vh; overflow-y:auto;
}
.aroda-summary-card {
	background:#fff; border:1px solid #e8e8e8;
	border-radius:12px; overflow:hidden; margin-bottom:16px;
}
.aroda-summary-brand { padding:18px 20px 12px; border-bottom:1px solid #e8e8e8; }
.aroda-summary-brand-name { font-size:22px; font-weight:900; margin:0 0 2px; color:#111; }
.aroda-summary-sub { font-size:13px; color:#888; margin:0; }
.aroda-summary-map-box {
	position:relative; background:#f2f2f2; aspect-ratio:4/3; overflow:hidden;
}
.aroda-summary-map-box canvas { width:100%; height:100%; display:block; }
.aroda-canvas-loading {
	position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-size:13px; color:#888; background:#f2f2f2;
}
.aroda-summary-stats {
	display:flex; align-items:center; justify-content:space-around;
	padding:18px 16px 10px; border-top:1px solid #e8e8e8;
}
.aroda-summary-stats > div { display:flex; flex-direction:column; align-items:center; gap:3px; flex:1; }
.aroda-summary-stats strong { font-size:22px; font-weight:800; color:#111; line-height:1; }
.aroda-summary-stats span { font-size:10px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.6px; }
.aroda-summary-site-label { text-align:center; font-size:11px; color:#bbb; margin:4px 0 14px; }
.aroda-summary-actions { display:flex; flex-direction:column; gap:10px; }

/* Login */
.aroda-login-cta { padding:20px; text-align:center; }

/* Actividades */
.aroda-activities-page { display:grid; gap:20px; color:#111; }
.aroda-acts-top { display:flex; align-items:center; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid #e8e8e8; }
.aroda-acts-count { display:flex; align-items:baseline; gap:6px; }
.aroda-acts-count strong { font-size:26px; font-weight:800; color:#111; }
.aroda-acts-count span { font-size:12px; color:#888; text-transform:uppercase; letter-spacing:.5px; }
.aroda-acts-list { display:grid; gap:16px; }

/* Tarjeta actividad */
.aroda-act-card { background:#fff; border:1px solid #e8e8e8; border-radius:12px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.05); }
.aroda-act-map-wrap { position:relative; }
.aroda-act-map { aspect-ratio:16/9; width:100%; background:#f2f2f2; min-height:180px; }
.aroda-act-date { position:absolute; top:10px; left:10px; background:rgba(255,255,255,.88); backdrop-filter:blur(8px); color:#111; font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; }
.aroda-act-body { padding:14px 16px; display:grid; gap:12px; }
.aroda-act-metrics { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.aroda-act-metrics > div { background:#f7f7f7; border-radius:10px; padding:10px 12px; display:grid; gap:2px; }
.aroda-act-metrics strong { font-size:15px; font-weight:700; color:#111; }
.aroda-act-metrics span { font-size:10px; color:#888; text-transform:uppercase; letter-spacing:.4px; }
.aroda-act-actions { display:flex; align-items:center; gap:8px; }
.aroda-card-share-btn {
	flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px;
	background:rgba(122,255,62,.1); color:#111; border:1.5px solid rgba(122,255,62,.4);
	border-radius:999px; padding:10px 16px; font-size:13px; font-weight:700; cursor:pointer;
}
.aroda-card-share-btn:hover { background:rgba(122,255,62,.2); }
.aroda-card-del-btn {
	width:38px; height:38px; border-radius:50%; flex-shrink:0;
	background:none; border:1.5px solid #e8e8e8; color:#888; cursor:pointer;
	display:flex; align-items:center; justify-content:center;
}
.aroda-card-del-btn:hover { border-color:#ff3b30; color:#ff3b30; }
.aroda-share-links { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.aroda-chip {
	display:inline-flex; align-items:center; justify-content:center;
	padding:9px 12px; border-radius:10px; background:#f7f7f7; border:1px solid #e8e8e8;
	color:#111; font-size:12px; font-weight:600; cursor:pointer; text-decoration:none;
}
.aroda-chip:hover { background:#ebebeb; color:#111; }
.aroda-empty { display:flex; flex-direction:column; align-items:center; gap:14px; padding:40px 20px; text-align:center; color:#888; }
.aroda-empty p { margin:0; font-size:15px; line-height:1.6; }

/* Página pública */
.aroda-share-body { background:#f2f2f2; margin:0; min-height:100vh; font-family:-apple-system,BlinkMacSystemFont,sans-serif; color:#111; }
.aroda-share-page { max-width:480px; margin:0 auto; padding:24px 16px; }
.aroda-share-pub-card { background:#fff; border-radius:20px; border:1px solid #e8e8e8; box-shadow:0 4px 24px rgba(0,0,0,.08); overflow:hidden; }
.aroda-share-pub-top { padding:22px 22px 14px; border-bottom:1px solid #e8e8e8; }
.aroda-share-pub-brand { display:block; font-size:24px; font-weight:900; margin:0 0 2px; color:#111; }
.aroda-share-pub-sub { font-size:13px; color:#888; }
.aroda-share-pub-map { height:280px; background:#f2f2f2; }
.aroda-share-pub-stats { display:flex; align-items:center; justify-content:space-around; padding:20px 16px 12px; border-top:1px solid #e8e8e8; }
.aroda-share-pub-stats > div { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; }
.aroda-share-pub-stats strong { font-size:20px; font-weight:800; color:#111; }
.aroda-share-pub-stats span { font-size:10px; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:.6px; }
.aroda-share-pub-footer { text-align:center; font-size:11px; color:#bbb; margin:0; padding:6px 16px 16px; }
.aroda-share-pub-btns { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; padding:0 16px 20px; }

/* Leaflet */
.leaflet-container { font-family:inherit; }

@media (min-width:600px) {
	.aroda-act-card { display:grid; grid-template-columns:260px 1fr; }
	.aroda-act-map  { aspect-ratio:auto; height:100%; min-height:220px; }
	.aroda-share-pub-stats > div + div { border-left:1px solid #e8e8e8; }
	.aroda-share-pub-btns { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:380px) {
	.aroda-stat-col strong { font-size:22px; }
}