/* Account preferences first. A right drawer on PC, a full-height sheet on phones. */
.settings-panel { position:fixed; inset:0 0 0 auto; width:min(420px, 100vw); max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:0; border:0; border-left:1px solid #dfe8e2; background:#fff; color:var(--ink); box-shadow:-18px 0 50px #0c1f1829; overflow:hidden; }
.settings-panel[open] { display:flex; flex-direction:column; animation:settings-in-right .26s cubic-bezier(.2,.8,.2,1); }
.settings-panel::backdrop { background:#0c1f1866; backdrop-filter:blur(2px); }
.settings-panel-head { flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:60px; padding:8px 12px 8px 20px; border-bottom:1px solid #e5ede7; }
.settings-panel-head h2 { margin:0; font-size:18px; color:#12231b; }
.settings-panel-head h2:focus { outline:none; }
.settings-close { width:44px; height:44px; flex:none; display:grid; place-items:center; border:0; border-radius:12px; background:#eef4ef; color:#28463a; font:inherit; font-size:24px; line-height:1; cursor:pointer; }
.settings-close:hover { background:#e2ece4; }
.settings-panel-body { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:16px 20px max(24px, env(safe-area-inset-bottom)); display:grid; align-content:start; gap:18px; }
.settings-panel-body > :is(section, div) { min-width:0; }
.settings-panel-body h3 { margin:0 0 10px; font-size:15px; color:#1d4532; }
.settings-account, .settings-help { padding-top:16px; border-top:1px solid #e5ede7; }
.settings-account:first-child { padding-top:0; border-top:0; }
.settings-streak #accountMotivation { margin:10px 0 0; }
.settings-streak .account-points-detail { margin-top:8px; }
.settings-streak .account-status { margin-top:8px; }
.settings-account .account-preferences { margin-top:0; }
.settings-account .profile-verify-email { display:flex; align-items:center; min-height:44px; margin:0 0 8px; color:#8a5a12; font-size:14px; font-weight:650; text-decoration:none; }
.settings-account .reward-preferences { margin-top:16px; }
.settings-account .reward-preferences label { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; }
#settingsPanel .reward-preferences input { flex:none; width:24px; height:24px; min-height:24px; margin:0; accent-color:#267b4e; }
.settings-account .account-data { margin-top:8px; border-top:1px solid #dbe7de; }
.settings-account .account-data > summary { min-height:48px; display:flex; align-items:center; justify-content:space-between; font-size:14px; color:#385d47; cursor:pointer; list-style:none; }
.settings-account .account-data > summary::-webkit-details-marker { display:none; }
.settings-account .account-data > summary::after { content:'+'; font-size:18px; color:#52715c; }
.settings-account .account-data[open] > summary::after { content:'−'; }
.settings-account .profile-privacy { margin:4px 0 12px; font-size:12.5px; line-height:1.55; color:#536b60; }
.settings-links { list-style:none; margin:0; padding:0; display:grid; }
.settings-links a { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #edf2ee; color:#1d4532; font-size:15px; font-weight:600; text-decoration:none; }
.settings-links li:last-child a { border-bottom:0; }
.settings-links a::after { content:'›'; font-size:20px; font-weight:400; color:#7a9483; }
.settings-links a:hover { color:#1f6a43; }
.settings-logout { width:100%; min-height:48px; border:1px solid #e3d3d1; border-radius:13px; background:#fff; color:#8a3b37; font:inherit; font-size:15px; font-weight:700; cursor:pointer; }
.settings-logout:hover { background:#fbf3f2; }
:is(.settings-close, .settings-links a, .settings-logout):focus-visible { outline:3px solid #298355; outline-offset:2px; }
html:has(.settings-panel[open]) { overflow:hidden; }
/* Phones: the same panel as a sheet from the bottom, the whole height. */
@media (max-width:767px) {
  .settings-panel { inset:auto 0 0 0; width:100vw; border-left:0; border-radius:20px 20px 0 0; box-shadow:0 -16px 40px #0c1f1829; height:calc(100dvh - 10px); max-height:calc(100dvh - 10px); }
  .settings-panel[open] { animation-name:settings-in-up; }
  .settings-panel-head { padding-left:16px; }
  .settings-panel-body { padding-inline:16px; }
}
@keyframes settings-in-right { from { transform:translateX(100%); } to { transform:none; } }
@keyframes settings-in-up { from { transform:translateY(100%); } to { transform:none; } }
@media (prefers-reduced-motion:reduce) { .settings-panel[open] { animation:none; } }
/* The chip opens Configuración: a small gear where the chevron was (PC; phones keep the chip as it is). */
.app-chrome .profile-gear { width:15px; height:15px; }
/* Private footer: one line at 375 px, then «Hecho por Datomático». */
.private-footer-line { display:block; white-space:nowrap; }