/**
 * chrome.css — styles for the shared chrome components (NavRail, Settings
 * hub, Logs footer). Consumes ONLY the custom properties declared in
 * tokens.css — no Tailwind dependency, no build step. See
 * ../Readme_Styles.md for the full integration guide.
 */

/* =========================================================
   Logs footer (docs/log-specs_ES.md 6)
   ========================================================= */

#logs-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--chrome-bg-raised);
  border-top: 1px solid var(--chrome-border);
  color: var(--chrome-fg);
  font-family: var(--chrome-font-sans);
  display: flex;
  flex-direction: column;
}

#logs-footer .lf-drag-handle {
  height: 5px;
  cursor: ns-resize;
  flex-shrink: 0;
}
#logs-footer:not(.expanded) .lf-drag-handle {
  display: none;
}

#logs-footer .lf-bar {
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  gap: var(--space-5);
}

#logs-footer .lf-bar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

#logs-footer .lf-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: transparent;
  border: none;
  color: var(--chrome-fg-muted);
  font-family: var(--chrome-font-mono-stack);
  font-size: var(--chrome-text-sm);
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--chrome-radius-pill);
}
#logs-footer .lf-toggle:hover {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
}

#logs-footer .lf-pill-count {
  font-family: var(--chrome-font-mono-stack);
  font-size: var(--chrome-text-xs);
  padding: 1px var(--space-3);
  border-radius: var(--chrome-radius-pill);
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg-muted);
}
#logs-footer .lf-pill-count.has-error {
  color: var(--log-error);
  background: color-mix(in srgb, var(--log-error) 15%, transparent);
}
#logs-footer .lf-pill-count.has-warn {
  color: var(--log-warn);
  background: color-mix(in srgb, var(--log-warn) 15%, transparent);
}

#logs-footer .lf-tabs {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
#logs-footer.expanded .lf-tabs {
  display: flex;
}
#logs-footer.expanded .lf-toggle .lf-collapsed-label {
  display: none;
}

#logs-footer .lf-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid transparent;
  color: var(--chrome-fg-dim);
  font-family: var(--chrome-font-mono-stack);
  font-size: var(--chrome-text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--chrome-radius-pill);
  cursor: pointer;
}
#logs-footer .lf-tab:hover {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
}
#logs-footer .lf-tab.active {
  color: var(--chrome-accent);
  background: var(--chrome-accent-bg);
  border-color: var(--chrome-accent-border);
}
#logs-footer .lf-tab.has-error {
  color: var(--log-error);
}
#logs-footer .lf-tab.has-warn {
  color: var(--log-warn);
}
#logs-footer .lf-tab .lf-badge {
  font-size: var(--chrome-text-xs);
  padding: 0 var(--space-2);
  border-radius: var(--chrome-radius-pill);
  background: rgba(255, 255, 255, 0.1);
}

#logs-footer .lf-bar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--chrome-font-mono-stack);
  font-size: var(--chrome-text-xs);
  color: var(--chrome-fg-dim);
  flex-shrink: 0;
}

#logs-footer .lf-toolbar {
  display: none;
  align-items: center;
  gap: var(--space-2);
}
#logs-footer.expanded .lf-toolbar {
  display: flex;
}
#logs-footer .lf-icon-btn {
  background: transparent;
  border: none;
  color: var(--chrome-fg-muted);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--chrome-radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
}
#logs-footer .lf-icon-btn:hover {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
}
#logs-footer .lf-icon-btn.spinning svg {
  animation: lf-spin 0.8s linear infinite;
}
@keyframes lf-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#logs-footer .lf-body {
  display: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-3) 0;
  font-family: var(--chrome-font-mono-stack);
  font-size: var(--chrome-text-base);
}
#logs-footer.expanded .lf-body {
  display: block;
}

#logs-footer .lf-line {
  display: flex;
  gap: var(--space-4);
  padding: 1px var(--space-5);
  color: var(--log-line-fg);
  white-space: pre-wrap;
  word-break: break-word;
}
#logs-footer .lf-line .lf-line-icon {
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
#logs-footer .lf-line.sev-error {
  background: color-mix(in srgb, var(--log-error) 6%, transparent);
}
#logs-footer .lf-line.sev-error .lf-line-icon {
  color: var(--log-error);
}
#logs-footer .lf-line.sev-warn {
  background: color-mix(in srgb, var(--log-warn) 4%, transparent);
}
#logs-footer .lf-line.sev-warn .lf-line-icon {
  color: var(--log-warn);
}
#logs-footer .lf-line.sev-info .lf-line-icon {
  color: var(--log-info);
}

#logs-footer .lf-empty {
  padding: var(--space-6);
  color: var(--chrome-fg-dim);
  font-family: var(--chrome-font-sans);
  text-align: center;
}

/* =========================================================
   NavRail (docs/settings_uxui_ES.md 2)
   ========================================================= */

#nav-rail {
  position: fixed;
  top: 0;
  bottom: var(--logs-footer-height, 28px);
  z-index: 50;
  width: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-5) 0;
  background: var(--chrome-bg-raised);
  border-right: 1px solid var(--chrome-border);
}
#nav-rail.side-right {
  right: 0;
  border-right: none;
  border-left: 1px solid var(--chrome-border);
}
#nav-rail.side-left {
  left: 0;
}

#nav-rail .rail-items {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  scrollbar-width: none;
}
#nav-rail .rail-items::-webkit-scrollbar {
  display: none;
}

#nav-rail .rail-btn {
  position: relative;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--chrome-fg-dim);
  border: 1px solid transparent;
  border-radius: var(--chrome-radius-md);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
#nav-rail .rail-btn:hover {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
}
#nav-rail .rail-btn.active {
  color: var(--rail-accent, var(--chrome-accent));
  background: color-mix(in srgb, var(--rail-accent, var(--chrome-accent)) 12%, transparent);
  border-color: color-mix(in srgb, var(--rail-accent, var(--chrome-accent)) 35%, transparent);
}
#nav-rail .rail-btn.active::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 60%;
  top: 20%;
  border-radius: var(--chrome-radius-pill);
  background: var(--rail-accent, var(--chrome-accent));
  box-shadow: 0 0 8px var(--rail-accent, var(--chrome-accent));
}
#nav-rail.side-left .rail-btn.active::before { left: -8px; }
#nav-rail.side-right .rail-btn.active::before { right: -8px; }

#nav-rail .rail-btn[hidden] {
  display: none;
}

#nav-rail .rail-label {
  position: absolute;
  top: 50%;
  transform: translate(-4px, -50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: var(--chrome-bg-raised);
  border: 1px solid var(--chrome-border-strong);
  color: var(--chrome-fg);
  font-family: var(--chrome-font-sans);
  font-size: var(--chrome-text-sm);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--chrome-radius-md);
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 55;
}
#nav-rail.side-left .rail-label { left: calc(100% + 8px); }
#nav-rail.side-right .rail-label { right: calc(100% + 8px); transform: translate(4px, -50%); }
#nav-rail .rail-btn:hover .rail-label {
  opacity: 1;
  transform: translate(0, -50%);
}

#nav-rail .rail-footer {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex-shrink: 0;
}

#nav-rail .rail-flip svg {
  transition: transform 150ms ease;
}
#nav-rail.side-right .rail-flip svg {
  transform: rotate(180deg);
}

/* =========================================================
   Settings hub (docs/settings_uxui_ES.md 3-4, 6-7)
   ========================================================= */

#settings-overlay {
  position: fixed;
  top: 0;
  left: 56px;
  right: 0;
  bottom: var(--logs-footer-height, 28px);
  z-index: 55;
  background: var(--chrome-bg);
  color: var(--chrome-fg);
  font-family: var(--chrome-font-sans);
}
body.rail-side-right #settings-overlay {
  left: 0;
  right: 56px;
}

.settings-shell {
  container-type: inline-size;
  display: flex;
  height: 100%;
}

.settings-sidebar {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--chrome-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: var(--space-5);
}
.settings-nativelect-wrap,
.settings-native-select {
  display: none;
}

.settings-search-wrap {
  margin-bottom: var(--space-5);
}
.settings-search {
  width: 100%;
  background: var(--chrome-hover-bg);
  border: 1px solid var(--chrome-border);
  border-radius: var(--chrome-radius-md);
  color: var(--chrome-fg);
  font-family: var(--chrome-font-sans);
  font-size: var(--chrome-text-sm);
  padding: var(--space-4) var(--space-5);
}
.settings-search::placeholder {
  color: var(--chrome-fg-dim);
}

.settings-group-label {
  font-size: var(--chrome-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--chrome-fg-dim);
  font-family: var(--chrome-font-mono-stack);
  position: sticky;
  top: 0;
  background: var(--chrome-bg);
  padding: var(--space-4) var(--space-3) var(--space-2);
}
.settings-group-label:first-child {
  padding-top: 0;
}

.settings-cat-item {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--chrome-fg-muted);
  font-family: var(--chrome-font-sans);
  font-size: var(--chrome-text-md);
  padding: var(--space-4) var(--space-4);
  border-radius: var(--chrome-radius-md);
  cursor: pointer;
}
.settings-cat-item:hover {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
}
.settings-cat-item.active {
  color: var(--chrome-fg);
  font-weight: 700;
  box-shadow: inset 2px 0 0 var(--chrome-accent);
  background: var(--chrome-hover-bg);
}
.settings-cat-item mark {
  background: transparent;
  color: var(--chrome-accent);
  font-weight: 700;
}
.settings-cat-restart-dot {
  margin-left: auto;
  color: var(--color-warn, var(--log-warn));
  font-size: var(--chrome-text-xs);
}

.settings-empty {
  padding: var(--space-7) var(--space-4);
  text-align: center;
  color: var(--chrome-fg-dim);
  font-size: var(--chrome-text-sm);
}
.settings-clear-btn {
  margin-top: var(--space-4);
  background: var(--chrome-hover-bg);
  border: 1px solid var(--chrome-border);
  color: var(--chrome-fg);
  border-radius: var(--chrome-radius-md);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
}

.settings-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.settings-content-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-7);
  border-bottom: 1px solid var(--chrome-border);
  flex-shrink: 0;
}
.settings-content-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--chrome-radius-md);
  background: var(--chrome-accent-bg);
  color: var(--chrome-accent);
}
.settings-content-title {
  font-size: var(--chrome-text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  flex: 1;
}
.settings-close-btn {
  background: transparent;
  border: none;
  color: var(--chrome-fg-muted);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: var(--chrome-radius-pill);
}
.settings-close-btn:hover {
  background: var(--chrome-hover-bg);
  color: var(--chrome-fg);
}

.settings-content-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-7);
  max-width: 1100px;
}

.settings-badge {
  font-size: var(--chrome-text-xs);
  font-family: var(--chrome-font-mono-stack);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--chrome-radius-pill);
}
.settings-badge.tone-success {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
}
.settings-badge.tone-warn {
  color: var(--log-warn);
  background: color-mix(in srgb, var(--log-warn) 15%, transparent);
}

.settings-card {
  background: color-mix(in srgb, var(--chrome-fg) 3%, var(--chrome-bg));
  border: 1px solid var(--chrome-border);
  border-radius: var(--chrome-radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.settings-card-header {
  font-size: var(--chrome-text-lg);
  font-weight: 700;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--chrome-border);
}

.settings-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) 0;
}
.settings-row-label {
  font-size: var(--chrome-text-md);
  color: var(--chrome-fg);
}
.settings-row-sub {
  font-size: var(--chrome-text-sm);
  color: var(--chrome-fg-muted);
  margin-top: var(--space-1);
}
.settings-value-readonly {
  font-family: var(--chrome-font-mono-stack);
  color: var(--chrome-fg-muted);
}

.settings-tile-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.settings-tile {
  background: var(--chrome-hover-bg);
  border: 1px solid var(--chrome-border);
  color: var(--chrome-fg-muted);
  border-radius: var(--chrome-radius-md);
  padding: var(--space-4) var(--space-5);
  font-size: var(--chrome-text-sm);
  cursor: pointer;
}
.settings-tile.selected {
  color: var(--chrome-accent);
  border-color: var(--chrome-accent-border);
  background: var(--chrome-accent-bg);
}

.settings-action-btn {
  background: var(--chrome-accent-bg);
  border: 1px solid var(--chrome-accent-border);
  color: var(--chrome-accent);
  border-radius: var(--chrome-radius-md);
  padding: var(--space-4) var(--space-6);
  font-size: var(--chrome-text-sm);
  font-weight: 600;
  cursor: pointer;
}
.settings-action-btn:hover {
  background: color-mix(in srgb, var(--chrome-accent) 20%, transparent);
}

.settings-scale-control {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-family: var(--chrome-font-mono-stack);
  font-size: var(--chrome-text-sm);
  color: var(--chrome-fg-muted);
}

/* Colapso responsivo en un solo breakpoint (spec 3.1) — container query
   sobre el propio shell de ajustes, no @media de viewport. */
@container (max-width: 760px) {
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--chrome-border);
    max-height: 40%;
  }
  .settings-sidebar .settings-cat-list,
  .settings-sidebar .settings-empty {
    display: none;
  }
  .settings-nativelect-wrap {
    display: block;
  }
  .settings-native-select {
    display: block;
    width: 100%;
    background: var(--chrome-hover-bg);
    border: 1px solid var(--chrome-border);
    color: var(--chrome-fg);
    border-radius: var(--chrome-radius-md);
    padding: var(--space-4);
    font-family: var(--chrome-font-sans);
    font-size: var(--chrome-text-sm);
  }
  .settings-shell {
    flex-direction: column;
  }
}

/* Deja lugar al rail fijo en el contenido principal del shell */
#view-root {
  margin-left: 56px;
  min-height: 100vh;
  padding-bottom: var(--logs-footer-height, 28px);
}
#nav-rail.side-right ~ #view-root,
body.rail-side-right #view-root {
  margin-left: 0;
  margin-right: 56px;
}

/* =========================================================
   Shared scrollbar utility — optional, used by your own scrollable
   panels if you want them to match the chrome's look.
   ========================================================= */

.custom-scrollbar::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: #475569; }

.settings-input {
  background: var(--chrome-bg-raised);
  border: 1px solid var(--chrome-border-strong);
  color: var(--chrome-fg);
  border-radius: var(--chrome-radius-md);
  padding: var(--space-3) var(--space-4);
  font-family: var(--chrome-font-mono-stack);
  font-size: var(--chrome-text-sm);
  min-width: 6rem;
}
.settings-input:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.settings-actions {
  display: flex;
  justify-content: flex-end;
}