/* ==========================================================================
   theme.css — Paleta oscura y ajustes de Semantic UI para fondo oscuro.
   Todos los colores de la app salen de estas variables.
   ========================================================================== */

:root {
  --bg: #15171c;
  --bg-elevated: #1c1f26;
  --bg-panel: #20242c;
  --bg-input: #171a20;
  --bg-hover: #2a2f39;
  --bg-selected: #23395a;
  --border: #2f3541;
  --border-strong: #3d4453;
  --text: #d8dce3;
  --text-muted: #8a93a3;
  --text-faint: #5f6878;
  --accent: #4f9dff;
  --accent-soft: rgba(79, 157, 255, 0.15);
  --success: #3fb950;
  --warning: #d29922;
  --danger: #f05d5e;
  --radius: 6px;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: dark;
}

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Lato, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}

::selection { background: var(--accent-soft); }

/* Scrollbars discretos */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; border: 2px solid var(--bg); }

/* ---- Semantic UI: inputs ---- */
.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="search"],
.ui.form input[type="password"],
.ui.form textarea {
  background: var(--bg-input) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus { border-color: var(--accent) !important; }
.ui.input > input::placeholder,
.ui.form input::placeholder,
.ui.form textarea::placeholder { color: var(--text-faint) !important; }
.ui.form .field > label { color: var(--text-muted) !important; }
.ui.icon.input > i.icon { color: var(--text-muted); }

/* ---- Semantic UI: botones ---- */
.ui.basic.inverted.button,
.ui.basic.inverted.buttons .button { box-shadow: 0 0 0 1px var(--border-strong) inset !important; color: var(--text) !important; }
.ui.basic.inverted.button:hover { background: var(--bg-hover) !important; color: #fff !important; }

/* ---- Semantic UI: modales ---- */
.ui.dimmer { background: rgba(5, 7, 10, 0.75); }
.ui.modal { background: var(--bg-panel); border: 1px solid var(--border); }
.ui.modal > .header,
.ui.modal > .content,
.ui.modal > .actions {
  background: var(--bg-panel) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.ui.modal > .actions { background: var(--bg-elevated) !important; }
.ui.basic.modal { background: transparent; border: none; }

/* ---- Semantic UI: dropdowns (selección y tags) ---- */
.ui.selection.dropdown,
.ui.selection.active.dropdown,
.ui.selection.dropdown:hover {
  background: var(--bg-input);
  color: var(--text);
  border-color: var(--border);
}
.ui.selection.active.dropdown,
.ui.selection.active.dropdown .menu,
.ui.selection.dropdown:focus { border-color: var(--accent) !important; }
.ui.dropdown .menu,
.ui.selection.dropdown .menu { background: var(--bg-panel); border-color: var(--border); }
.ui.dropdown .menu > .item { color: var(--text) !important; border-top-color: var(--border) !important; }
.ui.dropdown .menu > .item:hover,
.ui.dropdown .menu .selected.item { background: var(--bg-hover) !important; }
.ui.dropdown .menu > .message { color: var(--text-muted); }
.ui.search.dropdown > input.search,
.ui.search.dropdown > .text { color: var(--text); }
.ui.dropdown:not(.button) > .default.text { color: var(--text-faint); }
.ui.multiple.dropdown > .label {
  background: var(--accent-soft);
  color: #a9cdff;
  box-shadow: 0 0 0 1px rgba(79, 157, 255, 0.35) inset;
}
.ui.dropdown .menu .addition.item { color: var(--accent) !important; }

/* ---- Semantic UI: etiquetas ---- */
.ui.label { background: var(--bg-hover); color: var(--text); }