/* === Tokens básicos === */
:root{
  color-scheme: dark;
  --font: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  --bg: #0b1020;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --border: #1f2937;
  --card: #0f172a;
  --primary: #38bdf8;
  --link: #60a5fa;
  --link-hover: #93c5fd;
  --hdr-h: 56px;
}
html.theme-light{
  color-scheme: light;
  --bg: #ffffff;
  --text: #0f172a;
  --muted: #475569;
  --border: #e2e8f0;
  --card: #f8fafc;
  --primary: #0ea5e9;
  --link: #2563eb;
  --link-hover: #1d4ed8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);}
a{color:var(--link);}
a:hover,a:focus{color:var(--link-hover);}
a:visited{color:var(--link);}

/* Breadcrumbs */
.breadcrumbs{font-size:13px;color:var(--muted);margin:10px 0}
.breadcrumbs__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.breadcrumbs__item{display:flex;align-items:center}
.breadcrumbs__item + .breadcrumbs__item::before{content:"›";opacity:.6;margin:0 6px}
.breadcrumbs__link{color:var(--muted);text-decoration:none}
.breadcrumbs__link:hover{color:var(--text);text-decoration:underline}
.breadcrumbs__current{color:var(--text)}

/* === Header fijo === */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border);min-height:var(--hdr-h);padding:8px 0;}
.hdr-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;gap:8px;padding:0 12px;flex-wrap:wrap;width:100%;}
.logo{display:inline-flex;align-items:center;height:100%;order:1;flex:0 0 auto;}
.logo img{display:block;height:50px;width:auto}

.hdr-search{flex:1 1 100%;display:flex;gap:6px;align-items:center;order:4;min-width:220px}
.hdr-search input[type="search"]{flex:1;appearance:none;border:1px solid var(--border);background:var(--card);color:var(--text);
padding:10px 12px;border-radius:10px;font-size:16px;outline:none}
.hdr-search input[type="search"]:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%, transparent)}
.btn-search{border:1px solid var(--border);background:var(--bg);padding:10px 12px;border-radius:10px;font-size:14px;cursor:pointer}
.btn-search:focus{outline:2px solid var(--primary);outline-offset:2px}

.hdr-lang{order:3;flex:0 0 auto;display:flex;align-items:center;margin-top:0}
.lang-dropdown{position:relative;display:block;width:auto}
.lang-toggle{display:flex;align-items:center;gap:8px;padding:8px 12px;min-height:40px;border-radius:999px;border:1px solid var(--border);
background:var(--bg);color:var(--text);cursor:pointer;font-size:15px;font-weight:500;line-height:1;white-space:nowrap;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;min-width:0;max-width:100%}
.lang-toggle::-webkit-details-marker{display:none}
.lang-toggle:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 45%, transparent);outline-offset:2px}
.lang-dropdown[open] .lang-toggle{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%, transparent)}
.lang-caret{margin-left:auto;font-size:14px;line-height:1;color:var(--muted);transition:transform .2s ease,color .2s ease}
.lang-dropdown[open] .lang-caret{transform:rotate(180deg);color:var(--text)}
.lang-menu{list-style:none;margin:8px 0 0;padding:8px;display:flex;flex-direction:column;gap:4px;position:absolute;left:50%;right:auto;top:100%;transform:translateX(-50%);
background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 40px rgba(15, 23, 42, 0.25);z-index:20;max-height:320px;overflow-y:auto;overflow-x:hidden;width:min(320px,calc(100vw - 24px));max-width:calc(100vw - 24px)}
.lang-dropdown:not([open]) .lang-menu{display:none}
.lang-item{flex:1 1 auto;min-width:0}
.lang-option{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--muted);
font-size:15px;font-weight:500;line-height:1;background:transparent;border:1px solid transparent;transition:background-color .2s ease,color .2s ease,border-color .2s ease;width:100%;min-width:0}
.lang-option:hover{color:var(--text);background:color-mix(in srgb,var(--card) 70%, transparent)}
.lang-option:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.lang-option.is-active{background:var(--bg);border-color:var(--primary);color:var(--text)}
.lang-option.is-disabled{cursor:not-allowed;opacity:.6;border-style:dashed;border-color:var(--border)}
.lang-flag{display:inline-flex;align-items:center;justify-content:center;width:28px;height:20px;border-radius:6px;box-shadow:0 0 0 1px color-mix(in srgb,var(--border) 60%, rgba(255,255,255,.15));background:color-mix(in srgb,var(--bg) 60%, var(--card) 40%);overflow:hidden}
.lang-flag svg{width:24px;height:16px;display:block}
.lang-name{display:flex;align-items:center;gap:4px;flex-wrap:wrap;min-width:0}
.lang-code{font-size:12px;color:var(--muted);font-weight:600}

.theme-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--bg);color:var(--text);padding:6px 10px;border-radius:999px;cursor:pointer;transition:background-color .2s ease,color .2s ease,border-color .2s ease;order:2;flex:0 0 auto;margin-left:auto}
.theme-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.theme-toggle__icon{display:inline-flex;font-size:16px;line-height:1}

/* Accesibilidad util */
.visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;border:0;padding:0;margin:-1px}

/* Mobile tweaks */
@media (max-width:767px){
  .hdr-inner{align-items:center;gap:10px}
  .logo img{height:42px}
  .theme-toggle{padding:6px 10px}
  .hdr-lang{margin-left:4px}
  .lang-toggle{padding:8px 10px;font-size:14px}
  .lang-toggle .lang-name{display:none}
  .hdr-search{order:4;margin-top:10px}
}

/* Desktop */
@media (min-width:768px){
  :root{ --hdr-h: 64px; }
  .site-header{padding:5px 0 5px 0}
  .hdr-inner{gap:12px;padding:0 16px;flex-wrap:nowrap;align-items:center}
  .logo img{height:50px}
  .hdr-search{flex:1 1 auto;order:2;margin-top:0}
  .hdr-lang{order:3;flex:0 0 auto;margin-left:auto}
  .theme-toggle{order:4;margin-left:12px;padding:8px 12px}
  .lang-dropdown{width:auto;min-width:220px}
  .lang-toggle .lang-name{display:inline-flex}
  .lang-menu{left:0;right:auto;transform:none;width:auto;max-width:none}
  .lang-option{font-size:14px}
}

@media (min-width:768px) and (max-width:1023px){
  .hdr-inner{flex-wrap:wrap;align-items:flex-start}
  .hdr-search{order:5;flex:1 1 100%;margin-top:8px}
  .hdr-lang{order:3;margin-left:12px}
  .theme-toggle{order:4;margin-left:auto}
}