/* ===== Estilos base ===== */
:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --border-color: #d0d0d0;
  --tab-bg: #f4f4f4;
  --tab-active-bg: #ffffff;
  --tab-text: #000000;
  --scroll-color: #666666;
  --shadow-light: #e0e0e0;
}

/* ===== Modo oscuro ===== */
.dark-mode {
  --bg-color: #181818;
  --text-color: #e4e4e4;
  --border-color: #333333;
  --tab-bg: #282828;
  --tab-active-bg: #1f1f1f;
  --tab-text: #e4e4e4;
  --scroll-color: #999999;
  --shadow-light: #2a2a2a;
}

/* ===== Aplicar variables ===== */
body, html, frameset, frame {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: "Segoe UI", Arial, sans-serif;
}

table, td, th {
  border-color: var(--border-color);
  color: var(--text-color);
}

/* ===== Tabs y marcos ===== */
.clTab {
  background-color: var(--tab-bg);
  color: var(--tab-text);
  border: 1px solid var(--border-color);
  border-radius: 4px;
  padding: 4px 8px;
}

.clTab a {
  color: var(--tab-text);
  text-decoration: none;
}

.clTab:hover {
  background-color: var(--shadow-light);
}

.clTab.active {
  background-color: var(--tab-active-bg);
  border-bottom: 2px solid var(--text-color);
}

/* ===== Scroll de pestañas ===== */
.clScroll, .clScroll2 {
  color: var(--scroll-color);
  cursor: pointer;
}

body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== Texto y encabezados ===== */
h1, h2, h3, h4 {
  color: var(--text-color);
}

a {
  color: var(--text-color);
}

a:hover {
  opacity: 0.7;
}