/* ui/config.css — estilos de la Configuración (7367): .settings-*, .pl-*, .tpl-*, .pp-*, .pa-*, .rp-*.
   Antes inline en index.html (modal ⚙). Los carga /config y el board (el modal de sprints usa .settings-btn).
   Solo tokens de /theme.css: nada hardcodeado, respeta claro/oscuro. */
.settings-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border-red);
  background: rgba(var(--red-rgb), 0.04);
}
.settings-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.settings-tab:hover { color: var(--text); }
.settings-tab.active { color: var(--red); border-bottom-color: var(--red); }

.settings-section {
  display: none;
  padding: 16px;
}
.settings-section.active { display: block; }

.settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.settings-row:last-child { border-bottom: none; }

.settings-val {
  font-size: 11px;
  color: var(--text);
  flex: 1;
  min-width: 0;
}
.settings-label {
  font-size: 10px;
  color: var(--text-dim);
}
.settings-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(var(--overlay-rgb), 0.15);
}
.settings-archived {
  opacity: 0.38;
}
.settings-archived .settings-val { color: var(--text-faint); text-decoration: line-through; }

.settings-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.07em;
  padding: 2px 7px;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.settings-btn:hover { border-color: var(--text-dim); color: var(--text); }
.settings-btn.danger { border-color: var(--red-dim); color: var(--red); }
.settings-btn.danger:hover { background: rgba(var(--red-rgb), 0.1); }
.settings-btn.success { border-color: rgba(var(--green-rgb), 0.35); color: var(--green); }
.settings-btn.success:hover { background: rgba(var(--green-rgb), 0.07); }

.settings-add-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.settings-input {
  background: rgba(var(--overlay-rgb), 0.04);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 2px;
  outline: none;
  transition: border-color 0.15s;
  min-width: 80px;
}
.settings-input:focus { border-color: var(--red-dim); }
.settings-input::placeholder { color: var(--text-faint); }
.settings-input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 2px 3px;
  cursor: pointer;
}
.settings-error {
  font-size: 10px;
  color: var(--red);
  margin-top: 6px;
  display: none;
}
.settings-error.visible { display: block; }

.settings-edit-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Planner por proyecto (7367/T3): pestañas General/Estados/Campos/Hitos/Palabras ── */
.pl-group { margin: 0 0 14px; padding: 0; border: none; }
.pl-group > legend, .pl-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  color: var(--text-dim); text-transform: uppercase; margin: 0 0 6px; padding: 0;
}
.pl-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pl-check { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text); cursor: pointer; }
.pl-hint { font-size: 10px; color: var(--text-faint); margin: 4px 0; line-height: 1.4; }
.pl-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 4px 0; border-bottom: 1px solid var(--border); }
.pl-row:last-child { border-bottom: none; }
.pl-row .settings-input { min-width: 0; }
.pl-num { width: 64px; }
.pl-wide { flex: 1; min-width: 120px; }
.pl-grid { display: grid; grid-template-columns: auto auto auto; gap: 2px 14px; align-items: center; justify-content: start; font-size: 11px; }
.pl-grid .pl-head { font-family: var(--mono); font-size: 9px; color: var(--text-faint); text-transform: uppercase; }
.pl-save { margin-top: 10px; }
.pl-ok { font-size: 10px; color: var(--green); margin-top: 6px; }
/* Alta desde plantilla (7367/T8): reporte de la copia */
.tpl-report { margin-top: 10px; }
.tpl-sec { margin: 0 0 10px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 3px; }
.tpl-sec-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; color: var(--text-dim); text-transform: uppercase; }
.tpl-counts { font-size: 10px; color: var(--text-dim); margin: 2px 0 4px; }
.tpl-list { margin: 2px 0 6px 14px; padding: 0; font-size: 10px; line-height: 1.5; color: var(--text); }
.tpl-list.tpl-conflict { color: var(--amber); }
.tpl-list.tpl-skip { color: var(--text-faint); }
.tpl-list-title { font-size: 10px; color: var(--text-dim); margin-top: 4px; }
.pp-status { font-size: 12px; margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; }
.pp-status.live { border-color: var(--green); }
.pp-status.off { color: var(--text-faint); }
.pp-blockers { margin: 6px 0; padding-left: 18px; font-size: 11px; color: var(--red); }
.pp-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.pp-versions { width: 100%; border-collapse: collapse; font-size: 11px; margin: 6px 0 10px; }
.pp-versions th, .pp-versions td { text-align: left; padding: 3px 8px; border-bottom: 1px solid var(--border); }
.pp-preview { margin-top: 10px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; max-height: 60vh; overflow: auto; }
.pp-sub { margin: 0 0 14px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; }
.pp-sub-title { margin: 0 0 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.pp-frame { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: 6px; background: white; }
.pp-preview:has(.pp-frame) { padding: 0; border: 0; max-height: none; overflow: visible; }
.pa-frame { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: 6px; background: white; /* el correo se ve siempre sobre claro (color-scheme light only) */ margin-top: 8px; }
.pl-field { display: flex; flex-direction: column; gap: 3px; margin: 4px 8px 4px 0; }
.settings-readonly-notice {
  display: none; margin: 0; padding: 8px 16px; font-size: 10px; line-height: 1.4;
  color: var(--text-dim); background: rgba(var(--red-rgb), 0.06); border-bottom: 1px solid var(--border-red);
}
#configRoot.settings-readonly .settings-readonly-notice { display: block; }
/* Solo lectura (no project-admin): sin formularios de alta ni botones de acción; inputs inertes. */
#configRoot.settings-readonly .settings-add-form,
#configRoot.settings-readonly .settings-btn,
#configRoot.settings-readonly .pl-save { display: none; }
#configRoot.settings-readonly .settings-section input,
#configRoot.settings-readonly .settings-section select,
#configRoot.settings-readonly .settings-section textarea { pointer-events: none; opacity: 0.7; }
/* ── Réplica a cliente (7367/T5): la pestaña solo existe para project-admin / global-admin ── */
#configRoot .settings-tab[data-stab="replica"] { display: none; }
#configRoot.replica-visible .settings-tab[data-stab="replica"] { display: inline-block; }
.rp-rule { align-items: center; }
.rp-badge { font-family: var(--mono); font-size: 9px; padding: 1px 6px; border-radius: 2px; border: 1px solid var(--border); color: var(--text-dim); }
.rp-badge.rp-active { color: var(--green); border-color: rgba(var(--green-rgb), 0.35); }
.rp-badge.rp-degraded, .rp-badge.rp-paused { color: var(--red); border-color: var(--red-dim); }
.rp-detail { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border); }
.rp-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.rp-pill { font-family: var(--mono); font-size: 10px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); }
.rp-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 8px; }
.rp-table th { text-align: left; font-family: var(--mono); font-size: 9px; color: var(--text-faint); text-transform: uppercase; padding: 3px 6px; }
.rp-table td { padding: 3px 6px; border-top: 1px solid var(--border); color: var(--text); vertical-align: top; word-break: break-word; }
.rp-events { margin: 0 0 4px 12px; }

/* ── Etapas (7367 Etapas, E1): Configuración › Etapas ── */
.st-toolbar { gap: 10px; }
.st-add-btn { margin-left: auto; }
.st-scroll { overflow-x: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 6px; }
.st-table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 760px; }
.st-table th { text-align: left; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: var(--text-faint); text-transform: uppercase; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.st-table td { padding: 5px 8px; border-top: 1px solid var(--border); vertical-align: middle; }
.st-table tr:first-child td { border-top: none; }
.st-row.st-archived { opacity: 0.55; }
.st-row.st-archived .st-name { text-decoration: line-through; }
.st-col-order { width: 64px; white-space: nowrap; }
.st-order { display: inline-flex; gap: 2px; }
.st-namecell { display: flex; align-items: center; gap: 4px; min-width: 170px; }
.st-namecell.st-level-1 { padding-left: 26px; }
.st-caret { width: 22px; padding: 2px 0; text-align: center; }
.st-caret-gap { display: inline-block; width: 22px; flex: none; }
.st-name { flex: 1; min-width: 120px; }
.st-label { width: 120px; }
.st-date { width: 124px; }
.st-derived { display: inline-block; margin-left: 6px; font-size: 10px; color: var(--text-faint); white-space: nowrap; }
.st-num { text-align: right; font-family: var(--mono); color: var(--text-dim); }
.st-col-actions { min-width: 150px; }
.st-actions { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.st-badge { font-family: var(--mono); font-size: 9px; padding: 1px 6px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-faint); }
.st-extra td { padding: 6px 8px 8px; background: rgba(var(--overlay-rgb), 0.03); }
.st-panel { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.st-row-error { margin-top: 0; }
.settings-input:disabled { cursor: default; }
@media (max-width: 600px) {
  .st-table { min-width: 680px; }
}
/* ── Modo réplica (7367 D58, E14): /config › Modo réplica. Texto en --text/--text-dim (AA en claro y oscuro). ── */
.rm-panel { display: flex; flex-direction: column; gap: 10px; }
.rm-text { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.rm-status { font-size: 13px; font-weight: 700; color: var(--text); }
.rm-status.rm-on { border-left: 3px solid var(--amber); padding-left: 8px; }
.rm-list { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text); line-height: 1.5; }
.rm-list.rm-warn { color: var(--text-dim); }
.rm-block { font-size: 12px; color: var(--text); padding: 8px 10px; border: 1px solid var(--red-dim); border-radius: 3px; }
.rm-confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--red-dim); border-radius: 3px; background: rgba(var(--red-rgb), 0.05); }
.rm-confirm .settings-input { max-width: 360px; width: 100%; font-size: 16px; }
.rm-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.settings-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.settings-btn:focus-visible, .rm-confirm .settings-input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }