/* Tokens de tema claro. El oscuro es el :root de cada layout. */
html[data-theme="light"]{
  color-scheme:light;
  --ink:#F3F6F8;
  --ink-2:#FFFFFF;
  --ink-3:#E7EEF3;
  --ink-4:#D4DEE6;
  --line:#C5D0D9;
  --line-soft:#D8E1E8;
  --paper:#0B1014;
  --muted:#4A5C6B;
  --muted-2:#3F5363;
  --shadow:0 1px 0 rgba(255,255,255,.75) inset, 0 8px 24px rgba(15,23,32,.08);
  --topbar-bg:rgba(243,246,248,.94);
  --on-accent:#0B1014;
  --bg:#F3F6F8;
  --panel:#FFFFFF;
  --text:#0B1014;
  --green:#1aa37a;
}
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .brand-mark,
html[data-theme="light"] .plan-tag,
html[data-theme="light"] .sent-bar>div{
  color:#0B1014;
}
html[data-theme="light"] .topbar,
html[data-theme="light"] .nav,
html[data-theme="light"] .gd-nav{
  background:var(--topbar-bg)!important;
}
html[data-theme="light"] .leaflet-container{
  background:#E8EDF0!important;
}

.theme-btn{
  width:32px;height:32px;border:1px solid var(--line, #2E3B47)!important;
  border-radius:6px;display:grid;place-items:center;
  background:var(--ink-2, var(--panel, #131A21))!important;
  color:var(--paper, var(--text, #F2F5F7))!important;
  cursor:pointer;flex:0 0 32px;padding:0!important;font-weight:400!important;
}
.theme-btn:hover{border-color:var(--cian-dim, #0596A6)}
.theme-btn svg{width:16px;height:16px;display:block}
html[data-theme="light"] .theme-icon-sun{display:none}
html:not([data-theme="light"]) .theme-icon-moon{display:none}