/* Tema claro */
body.light {
  background-color: #ffffff;
  color: #111111;
}

body.light a { color: #111111; }
body.light footer .small { color: #666666; }
body.light hr { border-top: 1px solid #e5e5e5; }

/* Tema oscuro */
body.dark {
  background-color: #0b0b0b;
  color: #f2f2f2;
}

body.dark a { color: #f2f2f2; }
body.dark footer .small { color: #a0a0a0; }
body.dark hr { border-top: 1px solid #2a2a2a; }

/* Base */
html, body {
  margin:0; padding:0; min-height:100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:16px; line-height:1.5;
  display:flex; flex-direction:column;
}

h1, h3 { font-weight:500; font-family:inherit; }
h1 a { color:inherit; text-decoration:none; }
h1 a:hover { text-decoration:none; }

a { text-decoration:none; border-bottom:1px solid transparent; }
a:hover, a:focus { border-bottom-color:currentColor; outline:none; }

.wrap { flex:1; max-width:760px; margin:0 auto; padding:18px; width:100%; }

header { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.top-bar { display:flex; align-items:center; justify-content:space-between; width:100%; flex-wrap:wrap; }
h1 { margin:16px 0 0; font-size:32px; letter-spacing:-0.01em; }
nav a { margin-right:14px; }

.theme-buttons { display:flex; gap:6px; }
.theme-buttons button { padding:2px 6px; border:none; background:transparent; cursor:pointer; font-size:0.75rem; }

.section { margin-top:22px; }
h3 { margin:8px 0 10px; font-size:1.05rem; font-weight:600; }
.list { display:flex; flex-wrap:wrap; gap:8px 18px; }
.list a { display:inline-block; padding:2px 0; }
.list a::before { content:"■ "; }

hr { border:0; margin:26px 0; }

footer { padding:18px; max-width:760px; margin:0 auto; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:0.95rem; }

@media (max-width:700px){
  .wrap{ padding:14px; }
  header{ align-items:flex-start; }
  .top-bar{ flex-direction:column; align-items:flex-start; gap:8px; }
  h1{ font-size:1.4rem; margin-top:12px; }
  nav{ display:flex; gap:12px; }
  nav a{ font-size:0.95rem; }
  .list{ flex-direction:column; gap:8px; }
  .theme-buttons button{ padding:8px 12px; font-size:1rem; }
  footer{ flex-direction:column; align-items:flex-start; gap:6px; }
}