/* base.css
   Fundaciones tipográficas, variables y resets ligeros.
   Mantiene tokens de color originales. */
:root {
  --primary-color:#1f7971;
  --secondary-color:#d14715;
  --accent-color:#e97932;
  --bg-light:#f5f8fd;
  --text-color:#413e66;
  --gray-100:#eeeeee;
  --focus-ring: 0 0 0 3px rgba(31,121,113,.45);
}
html { box-sizing:border-box; font-size:100%; scroll-behavior:smooth; }
*,*::before,*::after { box-sizing:inherit; }
body { margin:0; font-family: 'Droid Sans', Arial, sans-serif; line-height:1.5; color:var(--text-color); background:var(--bg-light); -webkit-font-smoothing:antialiased; }
body { font-size: calc(1rem * var(--a11y-scale, 1)); }
img { max-width:100%; height:auto; display:block; }
/* img[loading="lazy"] { background:linear-gradient(90deg,#eee,#f5f5f5,#eee); } */
a { color:var(--primary-color); text-decoration:none; }
a:focus-visible, button:focus-visible { outline:2px solid var(--secondary-color); outline-offset:2px; }
:focus-visible { box-shadow:var(--focus-ring); }
.visually-hidden { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:0; top:0; width:auto; height:auto; background:#000; color:#fff; padding:.75rem 1rem; z-index:10000; }
html.contrast-alt { filter: invert(1) hue-rotate(180deg); }
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition: none !important; }
/* Panel accesibilidad */
.a11y-floating { position:fixed; bottom:1rem; right:1rem; z-index:950; display:flex; flex-direction:column; gap:.5rem; }
.a11y-panel { background:#222; color:#fff; padding:1rem; border-radius:.75rem; box-shadow:0 4px 18px -4px rgba(0,0,0,.4); width:220px; }
.a11y-panel button { background:#444; color:#fff; border:0; padding:.35rem .6rem; cursor:pointer; border-radius:.35rem; }
.a11y-panel button:focus-visible { outline:2px solid var(--secondary-color); }
.a11y-group { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; gap:.5rem; }
.btn-group { display:inline-flex; gap:.25rem; }
/* Tipografía fluida */
h1,h2,h3,h4 { font-weight:600; line-height:1.2; }
:root { --scale-min:1.125rem; --scale-max:2.75rem; }
h1 { font-size:clamp(1.75rem, 4vw, var(--scale-max)); }
h2 { font-size:clamp(1.5rem,3vw,2rem); }
h3 { font-size:clamp(1.25rem,2.5vw,1.5rem); }

/* ===== MODO OSCURO ===== */
body.theme-dark {
  --primary-color: #26a69a;
  --secondary-color: #ff7043;
  --accent-color: #80cbc4;
  --bg-light: #121212;
  --text-color: #e0e0e0;
  --gray-100: #2e2e2e;
  --focus-ring: 0 0 0 3px rgba(38,166,154,.45);
  background: var(--bg-light);
  color: var(--text-color);
}

body.theme-dark a {
  color: var(--primary-color);
}

body.theme-dark .a11y-panel {
  background: #333;
  color: #fff;
}

body.theme-dark .a11y-panel button {
  background: #555;
  color: #fff;
}

/* Mejoras para el header en modo oscuro */
body.theme-dark header,
body.theme-dark nav {
  background: #1e1e1e;
  color: var(--text-color);
}

/* Botones y controles en modo oscuro */
body.theme-dark button,
body.theme-dark input,
body.theme-dark select,
body.theme-dark textarea {
  background: #2e2e2e;
  color: var(--text-color);
  border-color: #444;
}

/* Cards y contenedores en modo oscuro */
body.theme-dark .card,
body.theme-dark .section {
  background: #1e1e1e;
  color: var(--text-color);
}