:root{color-scheme:light;--violet-50:#f5f3ff;--violet-100:#ede9fe;--violet-200:#ddd6fe;--violet-600:#7c3aed;--violet-700:#6d28d9;--ink:#171717}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:#ececec;line-height:1.6}
.wrap{max-width:1152px;margin:0 auto;padding:0 24px}
a{color:var(--violet-700);text-decoration:none}
a:hover{text-decoration:underline}

.site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid #d4d4d4;background:#ececec}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:24px}
.brand{display:flex;align-items:center;gap:6px;font-weight:600;font-size:16px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand-icon{color:var(--violet-600);flex-shrink:0}
.header-nav{display:none;align-items:center;gap:24px;font-size:14px;font-weight:500;color:#525252}
.header-nav a{color:#525252;padding-bottom:4px}
.header-nav a:hover{color:var(--ink);text-decoration:none}
.header-nav a.active{color:var(--ink);border-bottom:2px solid var(--violet-600)}
.header-actions{display:flex;align-items:center;gap:12px}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:1px solid #e5e5e5;background:#fff;font-size:14px;cursor:pointer;line-height:1}
.theme-toggle:hover{background:#fafafa}
.btn-outline{display:none;align-items:center;height:36px;border:1px solid #e5e5e5;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink) !important}
.btn-outline:hover{background:#fafafa;text-decoration:none}
.btn-primary{display:inline-flex;align-items:center;height:36px;background:var(--violet-600);color:#fff !important;padding:0 16px;border-radius:999px;font-weight:500;font-size:14px}
.btn-primary:hover{background:var(--violet-700);text-decoration:none}
.auth-only{display:none}
html.is-authed .guest-only{display:none}
html.is-authed .auth-only{display:inline-flex}

.trust-bar{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 32px;padding:20px 24px 40px;font-size:13px;color:#737373}

.site-footer{border-top:1px solid #e5e5e5;padding:48px 0 0;margin-top:24px}
.footer-grid{display:grid;grid-template-columns:1fr;gap:32px;padding-bottom:32px}
.footer-brand-col .footer-brand{font-weight:600;font-size:16px;color:var(--ink)}
.footer-tagline{margin:12px 0 0;max-width:32ch;font-size:14px;color:#737373}
.footer-col-title{margin:0 0 12px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:#a3a3a3}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}
.footer-col a{color:#525252}
.footer-col a:hover{color:var(--violet-700);text-decoration:none}
.footer-col-cta{color:var(--violet-600) !important;font-weight:500}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;border-top:1px solid #f0f0f0;padding:20px 0;font-size:12px;color:#a3a3a3}
@media(min-width:640px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(min-width:1024px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}
}

@media(min-width:640px){
  .btn-outline{display:inline-flex}
}
@media(min-width:768px){
  .header-nav{display:flex}
}

/* Dark mode — mirrors the React app's Tailwind neutral/violet dark palette
   (see web/src/index.css + store/themeStore.ts) so static pages match every
   other page instead of staying stuck in light mode. */
html.dark{color-scheme:dark}
html.dark body{background:#0a0a0a;color:#f5f5f5}
html.dark a{color:#a78bfa}
html.dark .site-header{background:#0a0a0a;border-color:#262626}
html.dark .brand{color:#f5f5f5}
html.dark .brand-icon{color:#a78bfa}
html.dark .header-nav a{color:#a3a3a3}
html.dark .header-nav a:hover{color:#f5f5f5}
html.dark .header-nav a.active{color:#f5f5f5}
html.dark .theme-toggle{border-color:#404040;background:#171717;color:#d4d4d4}
html.dark .theme-toggle:hover{background:#262626}
html.dark .btn-outline{border-color:#404040;color:#f5f5f5 !important}
html.dark .btn-outline:hover{background:#262626}
html.dark .trust-bar{color:#a3a3a3}
html.dark .site-footer{border-color:#262626}
html.dark .footer-brand-col .footer-brand{color:#f5f5f5}
html.dark .footer-tagline{color:#a3a3a3}
html.dark .footer-col-title{color:#737373}
html.dark .footer-col a{color:#a3a3a3}
html.dark .footer-col a:hover{color:#a78bfa}
html.dark .footer-col-cta{color:#a78bfa !important}
html.dark .footer-bottom{border-color:#262626;color:#737373}
.oposicion-page{padding-top:32px;padding-bottom:64px;max-width:820px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13px;color:#737373;margin-bottom:20px}
.breadcrumbs a{color:#737373}
.breadcrumbs a:hover{color:var(--violet-700)}
.crumb-sep{color:#d4d4d4}

.eyebrow-pill{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--violet-200);color:var(--violet-700);font-size:12px;font-weight:600;padding:6px 14px;border-radius:999px;margin:0 0 16px}
.oposicion-page h1{font-size:30px;font-weight:700;margin:0 0 12px;line-height:1.25}
.oposicion-intro{color:#404040;font-size:16px;margin:0 0 24px}
.article-meta{color:#737373;font-size:13px;margin:0 0 24px}

.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:28px}
.stat-box{border:1px solid #e5e5e5;border-radius:12px;padding:16px;text-align:center}
.stat-box strong{display:block;font-size:24px;font-weight:700;color:var(--violet-700)}
.stat-box span{font-size:12px;color:#737373}

.oposicion-cta{display:flex;flex-direction:column;gap:16px;align-items:flex-start;background:var(--violet-50);border-radius:16px;padding:24px;margin:28px 0}
.cta-title{font-weight:600;font-size:16px;margin:0 0 4px}
.cta-text{color:#525252;font-size:14px;margin:0}

.oposicion-links-row{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:32px}
.link-card{display:block;border:1px solid #e5e5e5;border-radius:16px;padding:20px;color:inherit}
.link-card:hover{border-color:#d4d4d4;text-decoration:none}
.link-card h2{font-size:17px;font-weight:600;margin:0 0 6px}
.link-card p{font-size:14px;color:#525252;margin:0}

.section-title-lg{font-size:20px;font-weight:600;margin:36px 0 16px}
.tema-grid{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
.tema-card{border:1px solid #e5e5e5;border-radius:12px;overflow:hidden}
.tema-card a{display:block;padding:14px 16px;color:inherit}
.tema-card a:hover{border-color:#d4d4d4;text-decoration:none;background:#fafafa}
.tema-num{font-size:11px;font-weight:600;color:var(--violet-700);text-transform:uppercase;letter-spacing:.02em}
.tema-card h3{font-size:15px;font-weight:500;margin:4px 0 0;line-height:1.35}

.concept-list{margin:0 0 28px;padding-left:22px;font-size:15px;color:#262626}
.concept-list li{margin:0 0 8px}

.example-note{color:#737373;font-size:13px;margin:0 0 16px}
.example-list{display:flex;flex-direction:column;gap:14px;margin-bottom:28px}
.example-card{border:1px solid #e5e5e5;border-radius:12px;padding:16px 18px;background:#fafafa}
.example-q{font-weight:600;font-size:14px;margin:0 0 8px}
.example-a{font-size:14px;color:#404040;margin:0}

.info-list{display:flex;flex-direction:column;gap:16px;margin-bottom:8px}
.info-item strong{display:block;font-size:14px;margin-bottom:4px}
.info-item p{font-size:14px;color:#525252;margin:0}

.tema-nav{display:flex;flex-direction:column;gap:10px;margin:32px 0;padding-top:24px;border-top:1px solid #e5e5e5}
.tema-nav-link{font-size:14px;font-weight:500;color:var(--violet-700)}
.tema-nav-prev{text-align:left}
.tema-nav-next{text-align:right}

.back-link{font-size:14px;color:#525252;margin:16px 0 32px}

.related-posts{margin-top:40px;padding-top:24px;border-top:1px solid #e5e5e5}
.section-title{font-size:14px;font-weight:600;margin:0 0 12px}
.related-posts-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:14px}

.oposiciones-hub-grid{list-style:none;margin:0 0 24px;padding:0;display:grid;grid-template-columns:1fr;gap:16px}
.oposiciones-hub-card{display:block;border:1px solid #e5e5e5;border-radius:16px;padding:20px;color:inherit}
.oposiciones-hub-card:hover{border-color:#d4d4d4;text-decoration:none}
.oposiciones-hub-card h2{font-size:18px;font-weight:600;margin:0 0 6px}
.oposiciones-hub-card p{font-size:14px;color:#525252;margin:0 0 10px}
.oposiciones-hub-card .hub-stats{font-size:12px;color:#737373}

@media(min-width:640px){
  .oposicion-cta{flex-direction:row;align-items:center;justify-content:space-between}
  .oposicion-links-row{grid-template-columns:1fr 1fr}
  .tema-grid{grid-template-columns:1fr 1fr}
  .tema-nav{flex-direction:row;justify-content:space-between}
  .tema-nav-next{text-align:right}
  .oposiciones-hub-grid{grid-template-columns:1fr 1fr}
}

/* Dark mode — oposiciones-specific rules only; header/footer/buttons/trust-bar
   dark rules live in site-shell.mjs's BASE_CSS. */
html.dark .eyebrow-pill{background:#171717;border-color:#5b21b6;color:#c4b5fd}
html.dark .oposicion-intro{color:#d4d4d4}
html.dark .article-meta{color:#a3a3a3}
html.dark .stat-box{border-color:#262626}
html.dark .oposicion-cta{background:rgba(124,58,237,.15)}
html.dark .cta-text{color:#a3a3a3}
html.dark .link-card{border-color:#262626}
html.dark .link-card:hover{border-color:#404040}
html.dark .link-card p{color:#a3a3a3}
html.dark .tema-card{border-color:#262626}
html.dark .tema-card a:hover{background:#171717;border-color:#404040}
html.dark .concept-list{color:#d4d4d4}
html.dark .example-note{color:#a3a3a3}
html.dark .example-card{border-color:#262626;background:#171717}
html.dark .example-a{color:#d4d4d4}
html.dark .info-item p{color:#a3a3a3}
html.dark .tema-nav{border-color:#262626}
html.dark .back-link{color:#a3a3a3}
html.dark .related-posts{border-color:#262626}
html.dark .breadcrumbs{color:#a3a3a3}
html.dark .breadcrumbs a{color:#a3a3a3}
html.dark .oposiciones-hub-card{border-color:#262626}
html.dark .oposiciones-hub-card:hover{border-color:#404040}
html.dark .oposiciones-hub-card p{color:#a3a3a3}
html.dark .oposiciones-hub-card .hub-stats{color:#737373}