/* base.css — Tema "Windows clásico" (estilo Windows 95/98).
   Define la paleta, los relieves 3D (biseles), la tipografía y los controles básicos.
   Sin estilos en línea (CSP): todo se resuelve desde las hojas de estilo. */
:root {
  color-scheme: light;

  /* Paleta del sistema */
  --bg: #008080;          /* escritorio */
  --panel: #c0c0c0;       /* superficie de ventanas y botones (3D face) */
  --texto: #000;
  --acento: #000080;      /* selección / barra de título */
  --error: #c00000;
  --barra-tit: linear-gradient(90deg, #000080, #1084d0);

  /* Tipografía */
  --fuente: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
  --mono: "Fixedsys", "Lucida Console", "Courier New", monospace;

  --pad: 12px;

  /* Biseles: relieve (botones, ventanas), presionado y hundido (campos de texto) */
  --sal:      inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --sal-pres: inset -1px -1px #fff, inset 1px 1px #000, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --hund:     inset -1px -1px #fff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #000;
  --grabado:  0 0 0 1px #808080, 1px 1px 0 1px #fff, inset 1px 1px 0 #fff;
}

*, *::before, *::after { box-sizing: border-box; }
::selection { background: #000080; color: #fff; }

body {
  margin: 0;
  font: 13px/1.35 var(--fuente);
  background: var(--bg);
  color: var(--texto);
}
h1, h2, h3 { font-family: var(--fuente); }

/* Barra superior: estilo barra de tareas */
.barra {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 4px 8px;
  background: var(--panel);
  box-shadow: inset 0 1px #dfdfdf, inset 0 2px #fff, inset 0 -1px #808080;
}
.barra > span { display: inline-flex; align-items: center; gap: 8px; }

main { max-width: 1200px; margin: 0 auto; padding: 12px; }

/* Ventana de la aplicación (se agrega una barra de título con ::before) */
main#app {
  width: calc(100% - 24px);
  margin: 12px auto;
  padding: 3px;
  background: var(--panel);
  box-shadow: var(--sal);
}
main#app::before {
  content: "Simulador de filtros activos Sallen-Key — Teoría de Circuitos II";
  display: block;
  margin-bottom: 8px;
  padding: 3px 6px;
  background: var(--barra-tit);
  color: #fff;
  font-weight: 700;
}

/* Ventana de inicio de sesión (cuadro de diálogo) */
.login {
  width: calc(100% - 24px);
  max-width: 340px;
  margin: 12vh auto;
  padding: 3px;
  background: var(--panel);
  box-shadow: var(--sal);
}
.login h1 {
  margin: 0;
  padding: 3px 6px;
  background: var(--barra-tit);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.login form { display: grid; gap: 12px; padding: 14px 12px 12px; }

label { display: grid; gap: 4px; font-size: 13px; }

/* Campos de texto: hundidos, fondo blanco */
button, input, select { font: inherit; }
input:not([type="range"]):not([type="radio"]):not([type="checkbox"]) {
  padding: 4px 5px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #000;
  box-shadow: var(--hund);
}
input:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* Botones: relieve; al presionar se hunden */
button {
  padding: 5px 14px;
  min-height: 24px;
  border: 0;
  border-radius: 0;
  background: var(--panel);
  color: #000;
  box-shadow: var(--sal);
  cursor: default;
}
button:not(.pestana):active:not(:disabled) {
  box-shadow: var(--sal-pres);
  padding: 6px 13px 4px 15px;
}
button:focus-visible { outline: 1px dotted #000; outline-offset: -5px; }
button:disabled { color: #808080; text-shadow: 1px 1px #fff; }

/* Botón predeterminado del diálogo: marco negro extra */
.login button[type="submit"] { box-shadow: 0 0 0 1px #000, var(--sal); }
.login button[type="submit"]:active:not(:disabled) { box-shadow: 0 0 0 1px #000, var(--sal-pres); }

.error { color: var(--error); margin: 0; }

/* Barras de desplazamiento clásicas (navegadores WebKit/Blink) */
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track {
  background: #c0c0c0 repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%) 0 0 / 2px 2px;
}
::-webkit-scrollbar-thumb { background: var(--panel); box-shadow: var(--sal); }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-corner { background: var(--panel); }

/* Pantallas táctiles: áreas de toque más cómodas */
@media (pointer: coarse) {
  button { min-height: 36px; }
}