/* Shared look of every Desnivel page: design tokens, reset, and the header /
   footer chrome (logo, nav links, upload and login buttons, avatar chip,
   mini footer). Pages load this first and add only what is specific to them,
   so a change here changes the whole site. */
:root {
  --bg: #f4f2ee; --s1: #ffffff; --s2: #ffffff; --s3: #ece8e0;
  --border: #e1ddd2; --border2: #cfc9ba;
  --orange: #e8650a; --orange2: #ff7c2a;
  /* the brand orange is too light for small text or white-on-orange labels (3.3:1);
     these darker shades reach WCAG AA (4.5:1): text, button fills, button hover */
  --orange-ink: #b84e08; --orange-btn: #c25409; --orange-btn-hover: #a94a07;
  --text: #1a1a1a; --muted: #6b6558; --muted2: #6d6759;
  --up1: #d9480f; --up2: #c0392b; --mid: #c67c0e; --flat: #2f9e44; --down1: #0284c7; --down2: #0d47a1;
  --r: 12px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{min-height:100%;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;line-height:1.5;}
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;background:var(--s1);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:900;backdrop-filter:blur(12px);
}
.logo{display:flex;align-items:center;gap:10px;}
.logo-text{font-size:17px;font-weight:800;letter-spacing:-.4px;color:var(--text);}
.logo-text span{color:var(--orange);}
.nav-link{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;}
.nav-link svg{flex-shrink:0;}
.nav-link.active{color:var(--orange-ink);font-weight:700;}
.header-nav{display:flex;align-items:center;gap:22px;}
.mini-footer{text-align:center;padding:28px 24px 36px;}
.mini-footer a{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--muted2);}
.mini-footer a:hover{color:var(--orange-ink);}
.mini-lang{margin-bottom:10px;font-size:11.5px;color:var(--muted2);}
.upload-btn{
  display:flex;align-items:center;gap:7px;background:var(--orange-btn);color:#fff;border:none;
  padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;
}
.upload-btn:hover{background:var(--orange-btn-hover);}
.login-btn{
  background:#fff;border:1px solid var(--border2);color:var(--text);
  font-size:13px;font-weight:600;padding:8px 16px;border-radius:8px;cursor:pointer;
}
.login-btn:hover{border-color:var(--orange);color:var(--orange-ink);}
.auth-chip{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:20px;border:1px solid var(--border2);}
.auth-avatar{
  width:26px;height:26px;border-radius:50%;background:var(--orange-btn);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
#auth-email{font-size:12.5px;font-weight:600;color:var(--text);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.logout-btn{
  background:none;border:1px solid var(--border2);color:var(--muted);
  font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;
}
.logout-btn:hover{border-color:var(--up2);color:var(--up2);}
@media(max-width:640px){
  header{padding:12px 16px;gap:8px;}
  .logo-text{font-size:15px;}
  .header-nav{gap:6px;}
  .nav-link{font-size:12px;}
  .nav-link .btn-label{display:none;}
  .upload-btn .btn-label{display:none;}
  .upload-btn{padding:9px 10px;}
  .login-btn{padding:8px 10px;font-size:12px;white-space:nowrap;}
  .auth-chip{padding:4px 8px 4px 4px;}
  #auth-email{max-width:60px;}
  .logout-btn{padding:8px 10px;font-size:11.5px;}
}

/* ── loading / empty / error states, shared ─────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.state{max-width:440px;margin:40px auto;padding:30px 22px;text-align:center;background:var(--s1);border:1px dashed var(--border2);border-radius:16px;}
.state-ic{display:block;font-size:30px;margin-bottom:8px;}
.state h2{font-size:17px;font-weight:800;margin-bottom:6px;letter-spacing:-.2px;}
.state p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:18px;}
.state-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.state-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid var(--border2);background:#fff;color:var(--text);}
.state-btn:hover{border-color:var(--orange);color:var(--orange-ink);}
.state-btn.primary{background:var(--orange-btn);border-color:var(--orange-btn);color:#fff;}
.state-btn.primary:hover{background:var(--orange-btn-hover);border-color:var(--orange-btn-hover);color:#fff;}
.skel{background:linear-gradient(90deg,#ece8e0 25%,#f6f3ee 37%,#ece8e0 63%);background-size:400% 100%;animation:skel 1.4s ease infinite;border-radius:8px;}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.skel{animation:none;}}

/* ── accessibility ──────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--orange-ink);outline-offset:2px;border-radius:4px;}
.skip-link{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--text);color:#fff;padding:10px 16px;border-radius:8px;font-size:13px;font-weight:700;}
.skip-link:focus{top:12px;}
@media(pointer:coarse){
  /* comfortable thumb targets (44px) on touch screens */
  .btn-official,.btn-secondary,.btn-more,.state-btn,.cr-chip,.cr-view,.cr-toggle,.cr-clear,.home-example,.cr-fb-row button{min-height:44px;}
  .login-btn,.logout-btn,.upload-btn{min-height:40px;}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important;}
}