:root {
  --sidebar-bg: #1D3341;
  --sidebar-width: 250px;
  --accent: #2B84A2;
  --accent-hover: #256f89;
  --body-bg: #F5F7FA;
  --panel: #ffffff;
  --fg: #1a2535;
  --muted: #6b7280;
  --border: #e8ecf0;
  --ok: #16a34a;
  --warn: #d97706;
  --bad: #dc2626;
  --card-shadow: 0 1px 4px rgba(0,0,0,.10);
  --font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
  --body-bg: #0f1419;
  --panel: #1a2129;
  --fg: #e6edf3;
  --muted: #8b949e;
  --border: #30363d;
  --card-shadow: 0 4px 16px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: .925rem;
  background: var(--body-bg);
  color: var(--fg);
}

/* Sidebar */
.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--sidebar-bg);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transition: transform .25s ease;
}

.sidebar-brand {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}

.sidebar-brand img {
  height: 70px;
  vertical-align: middle;
}

.nav-scroll {
  flex: 1;
  overflow-y: auto;
  padding-bottom: .5rem;
}

.nav-section-label {
  display: block;
  padding: .75rem 1.25rem .25rem;
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.35);
}

.sidebar .nav-link {
  color: rgba(255,255,255,.75);
  padding: .55rem 1.25rem;
  border-radius: 6px;
  margin: 1px .5rem;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .875rem;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
  background: var(--accent);
  color: #fff;
}

.sidebar .nav-link .bi {
  font-size: 1rem;
  opacity: .85;
  flex-shrink: 0;
}

.sidebar-footer {
  flex-shrink: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: .75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.sidebar-user-name {
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: .82rem;
  line-height: 1.3;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-user-meta {
  color: rgba(255,255,255,.4);
  font-size: .72rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Notif badge */
.notif-badge {
  display: inline-block;
  background: var(--bad);
  color: #fff;
  border-radius: 10px;
  padding: 0 6px;
  font-size: 11px;
  margin-left: auto;
}

/* Main wrapper */
.main-wrapper {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Topbar */
.topbar {
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  padding: .65rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 900;
  flex-shrink: 0;
}

.topbar-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
}

.topbar-user {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  color: var(--muted);
}

.role-badge {
  background: var(--accent);
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

.btn-logout {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: .875rem;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.btn-logout:hover {
  color: var(--bad);
  border-color: var(--bad);
}

.hamburger {
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  display: none;
}

/* Page content */
.page-content {
  padding: 1.75rem 2rem;
  flex: 1;
}

h1 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
}

/* Links */
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  font-size: .9rem;
}

th, td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

th {
  font-weight: 600;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #6b7280;
  border-top: none;
}

tr:last-child td { border-bottom: none; }

/* Badges & tags */
.badge {
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--body-bg);
  border: 1px solid var(--border);
  color: var(--muted);
}
.badge-ok { background: rgba(22,163,74,.15); color: var(--ok); border-color: transparent; }
.badge-warn { background: rgba(217,119,6,.15); color: var(--warn); border-color: transparent; }
.badge-bad { background: rgba(220,38,38,.15); color: var(--bad); border-color: transparent; }

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tag-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: .75rem;
  font-weight: 500;
  background: var(--body-bg);
  border: 1px solid var(--border);
  color: var(--muted);
}

.tag-critical { background: rgba(220,38,38,.15); color: var(--bad); }
.tag-high { background: rgba(217,119,6,.15); color: var(--warn); }
.tag-medium { background: rgba(43,132,162,.15); color: var(--accent); }
.tag-low { background: rgba(107,114,128,.15); color: var(--muted); }
.tag-info { background: rgba(22,163,74,.15); color: var(--ok); }
.tag-open { background: rgba(43,132,162,.15); color: var(--accent); }
.tag-resolved { background: rgba(22,163,74,.15); color: var(--ok); }

.state-online { background: rgba(22,163,74,.15); color: var(--ok); }
.state-offline { background: rgba(107,114,128,.15); color: var(--muted); }
.state-disabled { background: rgba(217,119,6,.15); color: var(--warn); }
.state-decommissioned { background: rgba(220,38,38,.15); color: var(--bad); }
.state-bad { background: rgba(220,38,38,.15); color: var(--bad); }

/* Cards */
.card, form.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  box-shadow: var(--card-shadow);
  margin-bottom: 1.5rem;
}

/* Vertical card forms: cap the width so inputs aren't page-wide, and lift the
   trailing submit off the field (it used to sit glued under a full-width input)
   and align it to the form's bottom-right. Inline max-width on a form overrides
   the cap, so intentionally-wide forms are unaffected. */
form.card:not(.toolbar) {
  max-width: 600px;
}
form.card:not(.toolbar) > button[type="submit"],
form.card:not(.toolbar) > button.btn:last-child,
form.card:not(.toolbar) > input[type="submit"] {
  display: flex;
  width: fit-content;
  margin: 22px 0 0 auto;
}

/* Form fields shouldn't sprawl even inside a wide container. */
.card input[type=text],
.card input[type=email],
.card input[type=password],
.card input[type=search],
.card select,
.card textarea {
  max-width: 560px;
}

/* Small icon-only action button for list rows (Ver / Editar). */
.btn-sm {
  padding: 5px 9px;
  font-size: .8rem;
  line-height: 1;
}
.btn-icon {
  padding: 5px 9px;
}
td .btn-sm + .btn-sm,
td .btn-icon + .btn-icon { margin-left: 6px; }
code.copyable { cursor: pointer; }
code.copyable:hover { text-decoration: underline; }

/* Help / info cards: an always-visible explainer (not collapsible). */
.help-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  margin: 0 0 20px;
  padding: 14px 18px;
  font-size: .9rem;
  line-height: 1.55;
}
.help-card .help-title {
  font-weight: 600;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.help-card h4 { margin: 14px 0 4px; font-size: .92rem; }
.help-card p { margin: 0 0 8px; }
.help-card p:last-child { margin-bottom: 0; }
.help-card ul { margin: 0 0 8px; padding-left: 20px; }
.help-card code { font-size: .85em; }
.help-card .impact { color: var(--warn); }

/* Two-column layout: a (capped) form on the left, its help card on the right.
   Collapses to a single column on narrow screens. */
.with-help { display: grid; grid-template-columns: minmax(0, 600px) 1fr; gap: 20px; align-items: start; }
.with-help > .help-card { margin: 0; }
@media (max-width: 860px) { .with-help { grid-template-columns: 1fr; } }

/* Tabbed sections (reusable): a sticky section nav + one panel at a time.
   Progressive enhancement - without JS every panel is shown stacked; app.js adds
   .js-tabbed to the container, which switches on the single-panel behaviour. */
.tabbed { display: grid; grid-template-columns: 240px 1fr; gap: 24px; align-items: start; }
.tabbed-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 16px; }
.tabbed-tab {
  display: block;
  padding: 9px 12px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: .9rem;
  border-left: 2px solid transparent;
}
.tabbed-tab:hover { background: var(--panel); color: var(--fg); }
.tabbed-tab.is-active {
  background: var(--panel);
  color: var(--fg);
  font-weight: 600;
  border-left-color: var(--accent);
}
.tabbed-panel > h2:first-child { margin-top: 0; }
.tabbed.js-tabbed .tabbed-panel { display: none; }
.tabbed.js-tabbed .tabbed-panel.is-active { display: block; }
@media (max-width: 860px) {
  .tabbed { grid-template-columns: 1fr; }
  .tabbed-nav { flex-direction: row; flex-wrap: wrap; position: static; }
  .tabbed-tab { border-left: none; border-bottom: 2px solid transparent; }
  .tabbed-tab.is-active { border-left: none; border-bottom-color: var(--accent); }
}

/* Glossary (Ayuda page). */
.glossary dt { font-weight: 600; margin-top: 14px; }
.glossary dd { margin: 2px 0 0; color: var(--muted); }

/* Dashboard: clickable stat cards + two-column layout. */
a.stat-card { text-decoration: none; color: inherit; display: block; transition: border-color .15s; }
a.stat-card:hover { border-color: var(--accent); }
.dashboard-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .dashboard-cols { grid-template-columns: 1fr; } }

/* Collapsible version groups (downloads). */
.version-group {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  background: var(--panel);
}
.version-group > summary {
  cursor: pointer;
  font-size: 1rem;
  list-style: none;
}
.version-group > summary::-webkit-details-marker { display: none; }
.version-group > summary::before { content: "▸ "; color: var(--muted); }
.version-group[open] > summary::before { content: "▾ "; }

/* Password field with show/hide + actions. */
.password-field { position: relative; display: flex; align-items: stretch; gap: 6px; max-width: 560px; }
.password-field input { flex: 1; }
.password-actions { display: flex; gap: 6px; margin-top: 6px; }

/* Forms */
label {
  display: block;
  color: var(--muted);
  margin: 12px 0 4px;
  font-weight: 500;
  font-size: .875rem;
}

input[type=text],
input[type=email],
input[type=password],
input[type=search],
select,
textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--body-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  font-family: var(--font-family);
  font-size: .875rem;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(43,132,162,.2);
}

button {
  font-family: var(--font-family);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: 9px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  font-size: .875rem;
  text-decoration: none;
  transition: background .15s;
}

.btn:hover { background: var(--accent-hover); color: #fff; }

.btn-secondary {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
}

.btn-secondary:hover { background: var(--border); color: var(--fg); }

.btn-link {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: .875rem;
  padding: 0;
  text-decoration: none;
}
.btn-link:hover { color: var(--accent-hover); text-decoration: underline; }

/* Spacing primitives so controls never sit flush against each other.
   Adjacent buttons, and the inline action forms used in table cells
   (delete / restore / toggle), keep a consistent horizontal gap. */
.btn + .btn,
.btn + .btn-secondary,
.btn-secondary + .btn,
.btn + .btn-link,
.btn-link + .btn { margin-left: 8px; }

td form { display: inline-block; vertical-align: middle; margin: 0; }
td form + form,
td form + .btn,
td .btn + form,
td a.btn + form,
td form + a.btn,
td .btn-link + form,
td form + .btn-link { margin-left: 6px; }

/* Inline filter / quick-action forms (those carrying the .toolbar class) lay
   their label + input + button out in a row with even gaps, and their inputs
   size to content instead of stretching to 100%. */
/* A filter <form> reuses .toolbar for its flexbox, but unlike a page-header
   toolbar (title left / actions right) its controls should pack left with even
   gaps, not spread edge-to-edge. */
form.toolbar { flex-wrap: wrap; justify-content: flex-start; }
form.toolbar label { margin: 0; align-self: center; white-space: nowrap; }
form.toolbar input[type=text],
form.toolbar input[type=search],
form.toolbar input[type=email],
form.toolbar select { width: auto; }
.toolbar .btn + .btn { margin-left: 0; } /* the flex gap already spaces these */

/* Reserve breathing room around placeholder text and improve its contrast. */
::placeholder { color: var(--muted); opacity: .8; }

/* List pagination */
.pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
}
.pagination-range { font-size: .82rem; }
.btn.is-disabled {
  opacity: .45;
  pointer-events: none;
  cursor: default;
}

/* Toolbar */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 16px;
}

/* Error */
.error { color: var(--bad); margin: 8px 0; }
.field-error { display: block; color: var(--bad); font-size: .85em; margin: 4px 0 8px; }
.muted { color: var(--muted); }

/* Table helpers */
.cell-truncate {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-detail {
  width: 100%;
  border-collapse: collapse;
}
.table-detail td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.detail-label {
  font-weight: 600;
  color: var(--muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
  width: 140px;
}

/* Notes */
.note {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: .75rem;
  font-size: .9rem;
  line-height: 1.5;
}
.notes {
  margin-top: 1rem;
}

/* Code */
code, pre {
  background: var(--body-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

code { padding: 2px 6px; }
pre { padding: 14px; overflow: auto; }

/* Busy state */
button.is-busy { opacity: .7; cursor: progress; }
button.is-busy::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 8px;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: spin .6s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Toasts */
#toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  max-width: 360px;
}

.toast {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--fg);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: opacity .35s;
}

.toast-success { border-left: 3px solid var(--ok); }
.toast-info { border-left: 3px solid var(--accent); }
.toast-error { border-left: 3px solid var(--bad); }
.toast-hide { opacity: 0; }

/* Footer */
.backoffice-footer {
  padding: .65rem 1.5rem;
  text-align: center;
  background: var(--panel);
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .78rem;
  flex-shrink: 0;
}
.footer-version {
  font-variant-numeric: tabular-nums;
  opacity: .75;
}

/* Checkbox + label row (forms) */
.check-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 400;
}
.check-row input[type="checkbox"] { width: auto; margin: 0; }

/* Topbar account link */
.topbar-account {
  color: inherit;
  text-decoration: none;
}
.topbar-account:hover { color: var(--accent); text-decoration: underline; }

/* Profile definition grid */
.profile-grid {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .5rem 1.25rem;
  margin: 0;
}
.profile-grid dt { color: var(--muted); font-size: .85rem; }
.profile-grid dd { margin: 0; }

/* Layout helpers */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.gap-2 { gap: .5rem; }
.text-center { text-align: center; }
.d-inline { display: inline; }
.mb-3 { margin-bottom: 1rem; }

/* Login page */
.login-page {
  min-height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  /* The login card is an intentionally light, branded surface shown before any
     session exists. Pin the light palette here so its text stays legible even when
     the FOUC script applied data-theme="dark" to <html> from a stored preference. */
  --body-bg: #F5F7FA;
  --panel: #ffffff;
  --fg: #1a2535;
  --muted: #6b7280;
  --border: #e8ecf0;
  color: var(--fg);
  width: 100%;
  max-width: 400px;
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
  padding: 2rem;
  margin: 0 1rem;
}

.login-version {
  position: fixed;
  bottom: 1rem;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0;
  font-size: .72rem;
  color: rgba(255,255,255,.3);
}

.login-card h1 {
  font-size: 1.1rem;
  margin: 0 0 .25rem;
  text-align: center;
}

.login-card .subtitle {
  color: var(--muted);
  font-size: .85rem;
  text-align: center;
  margin: 0 0 1.5rem;
}

/* Input groups join an icon prefix, the field, and (optionally) a trailing button
   into one control. Every child shares the same border; inner seams are collapsed and
   only the two ends are rounded, so the layout is correct whether the row has 2 children
   (email / 2FA) or 3 (password + show-hide toggle). */
.login-card .input-group {
  display: flex;
  align-items: stretch;
  margin-bottom: 1rem;
}

.login-card .input-group > * {
  border: 1px solid var(--border);
  border-radius: 0;
  margin: 0;
}

.login-card .input-group > * + * { border-left: none; }
.login-card .input-group > :first-child { border-radius: 6px 0 0 6px; }
.login-card .input-group > :last-child { border-radius: 0 6px 6px 0; }

.login-card .input-group-text {
  display: flex;
  align-items: center;
  padding: 9px 12px;
  background: var(--body-bg);
  color: var(--muted);
}

/* The show/hide toggle is a <button> styled as a trailing addon, not a full-width
   action — scope the 100% width to the actual submit button below. */
.login-card .input-group button.input-group-text {
  cursor: pointer;
}

.login-card .input-group input {
  flex: 1;
  min-width: 0;
}

.login-card button.btn {
  width: 100%;
}

/* Neutralize the browser autofill yellow so prefilled fields match the form palette. */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--body-bg) inset;
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.show {
    transform: translateX(0);
  }
  .main-wrapper {
    margin-left: 0;
  }
  .page-content {
    padding: 1rem;
  }
  .hamburger {
    display: inline-flex;
    align-items: center;
  }
  .topbar-user .role-badge,
  .topbar-user > span:first-child {
    display: none;
  }
}

/* System health (diagnostics) */
/* Health cards are narrow (min 260px) and carry long labels like
   "Pool (en uso / abiertas / máx)"; the global .detail-label is nowrap/140px,
   which overflows the card and clips the value column. Scope a fluid layout:
   labels wrap, values break, the table never exceeds the card. */
.health-table { table-layout: fixed; }
.health-table .detail-label {
  white-space: normal;
  width: 52%;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: top;
}
.health-table td { word-break: break-word; }
.health-bar {
  height: 6px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}
.health-bar > span {
  display: block;
  height: 100%;
  background: var(--ok);
  border-radius: 3px;
  transition: width .3s ease;
}
.health-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  margin: 0 2px;
}
.health-dot.ok { background: var(--ok); }
.health-dot.err { background: var(--bad); }
.health-dot.muted-dot { background: var(--muted); }