:root {
  color-scheme: light dark;
  /* Paleta "transparente y ecologica" (05/09/2026) - ver
     atlas_inicio_especificacion.md, seccion ESTETICA Y UX. */
  --bg: #eef3ee;
  --fg: #1c2b22;
  --muted: #5b6b60;
  --border: rgba(30, 60, 40, 0.16);
  --card-bg: rgba(255, 255, 255, 0.55);
  --accent: #2f8f5c;
  --accent-contrast: #ffffff;
  --warn-bg: #fff4e5;
  --warn-fg: #7a4a00;
  --ok: #1f8a3c;
  --ok-bg: #eaf7ee;
  --bad: #a85c52;
  --bad-bg: #fbebe9;
  --shadow: 0 8px 28px rgba(30, 60, 40, 0.12);
  --glass-blur: 16px;
  --marca-mono-opacidad: 0.05;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* "Invernadero al anochecer" - el mismo ecosistema, de noche. */
    --bg: #0c1712;
    --fg: #eaf3ec;
    --muted: #9db3a4;
    --border: rgba(140, 255, 180, 0.18);
    --card-bg: rgba(20, 40, 30, 0.55);
    --accent: #6fe3a0;
    --accent-contrast: #08130d;
    --warn-bg: #2b230f;
    --warn-fg: #e2b464;
    --ok: #4fce76;
    --ok-bg: #17281c;
    --bad: #d98b82;
    --bad-bg: #2b1a18;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
    --marca-mono-opacidad: 0.09;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(60rem 30rem at 15% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent),
    radial-gradient(50rem 30rem at 110% 10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent),
    var(--bg);
  color: var(--fg);
  line-height: 1.45;
}

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

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow);
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.9rem 1.25rem;
  gap: 1rem;
  flex-wrap: wrap;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.brand {
  font-weight: 700;
  font-size: 1.1rem;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 1rem;
  overflow-x: auto;
}

.tab-button {
  font: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.8rem;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}

.tab-button.is-active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.admin-subtab-button.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

main {
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.tab-panel[hidden] {
  display: none;
}

h1 {
  font-size: 1.3rem;
  margin: 0 0 1rem;
}

h2 {
  font-size: 1.05rem;
  margin: 1.75rem 0 0.75rem;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  margin-bottom: 1rem;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow);
}

.muted {
  color: var(--muted);
}

.btn {
  font: inherit;
  padding: 0.55rem 1.1rem;
  border-radius: 0.8rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}

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

.btn-primary {
  background: var(--accent);
  color: var(--accent-contrast);
  border-color: var(--accent);
}

.btn-danger {
  color: var(--bad);
  border-color: var(--bad);
  background: var(--bg);
}

/* 13/09/2026 (pedido de Javi): el nombre de una organización, en la
   tabla "Organizaciones", se ve y se comporta como un enlace -- lleva a
   sus "Datos de la organización" al pulsarlo. */
.btn-link {
  font: inherit;
  padding: 0;
  border: none;
  background: none;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.btn-small {
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}

label {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.6rem 0 0.25rem;
}

input[type="text"],
input[type="email"],
select {
  font: inherit;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 0.6rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--fg);
}

form {
  margin: 0;
}

.form-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: flex-end;
}

.form-row > div {
  flex: 1 1 12rem;
}

.checkbox-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin: 0.4rem 0;
}

.checkbox-list label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--fg);
  font-size: 0.9rem;
  margin: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

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

th {
  color: var(--muted);
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 1rem;
  font-size: 0.78rem;
  background: var(--border);
}

.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-bad { background: var(--bad-bg); color: var(--bad); }
.badge-warn { background: var(--warn-bg); color: var(--warn-fg); }

.alert {
  padding: 0.7rem 0.9rem;
  border-radius: 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.92rem;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}

.alert-ok { background: var(--ok-bg); color: var(--ok); }
.alert-bad { background: var(--bad-bg); color: var(--bad); }

.menu-tree {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-tree .aplicacion > summary {
  font-weight: 700;
  font-size: 1.02rem;
  cursor: pointer;
  padding: 0.4rem 0;
}

/* "Tu menú" simplificado (09/09/2026): ahora es una lista plana de
   nombres de aplicación, sin <details>/<summary> -- ver renderMenu() en
   app.js. Las reglas .opcion/.subopciones de arriba quedan para el árbol
   de Administración → Permisos, que sigue mostrando todo el detalle. */
.menu-tree li.aplicacion {
  font-weight: 700;
  font-size: 1.02rem;
  padding: 0.4rem 0;
  list-style: none;
}

.menu-tree li.aplicacion a {
  color: inherit;
  text-decoration: underline;
}

/* Grupo "Conocimiento" en "Tu menú" (25/09/2026) — mismo título visual
   que una aplicación normal, pero sin enlace propio; sus aplicaciones
   van debajo, con sangría. */
.menu-tree li.aplicacion-grupo {
  list-style: none;
  padding: 0.4rem 0;
}

.aplicacion-grupo-titulo {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--muted, #666);
}

.menu-tree-anidado {
  margin: 0.3rem 0 0 1rem;
  padding: 0;
}

.menu-tree-anidado li.aplicacion {
  padding: 0.3rem 0;
}

.menu-tree .opcion {
  margin: 0.4rem 0 0.4rem 1rem;
}

.menu-tree .opcion-nombre {
  font-weight: 600;
  color: var(--muted);
  margin: 0.3rem 0 0.15rem;
}

.menu-tree .subopciones {
  list-style: none;
  padding: 0;
  margin: 0 0 0 1rem;
}

.menu-tree .subopciones li {
  padding: 0.2rem 0;
}

.admin-subtabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.login-shell {
  max-width: 24rem;
  margin: 5rem auto;
  padding: 0 1.25rem;
  text-align: center;
}

.login-shell .brand {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 1.5rem;
}

/* Selector de idioma (03/09/2026, multi-idioma) — el <select> genérico de
   arriba es width:100% para los formularios normales, pero aquí vive
   dentro de una fila flex (la barra superior de app.html, o la cabecera
   de login.html) y no debe estirarse a ocuparla entera. */
.topbar-right select,
.lang-switcher select {
  width: auto;
}

.lang-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.lang-switcher label {
  margin: 0;
}


/* ---------- Marca de agua (05/09/2026) - el anagrama de Javi, en
   monocromo, fijo detras de todo el contenido - ver
   atlas_inicio_especificacion.md. ---------- */
.marca-agua-capa {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.marca-agua-capa svg {
  width: min(70vw, 56rem);
  height: auto;
}

.marca-agua-capa path,
.marca-agua-capa ellipse {
  stroke: var(--fg);
  opacity: var(--marca-mono-opacidad);
}

/* Isotipo pequeno junto al nombre "Atlas" en las cabeceras. */
.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.marca-mini {
  width: 1.15rem;
  height: auto;
  flex: none;
}

.marca-mini path,
.marca-mini ellipse {
  stroke: var(--accent);
}

/* Transicion "se abre la puerta" al cambiar de pestana - no hace falta
   tocar app.js: se dispara sola en cuanto un panel deja de tener el
   atributo hidden. */
@keyframes puerta {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.99);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

.tab-panel:not([hidden]),
[data-admin-panel]:not([hidden]) {
  animation: puerta 0.4s ease;
}

/* Cabecera de cada tabla dentro de "Etiquetas y notas" — antes era un
   <h3> de solo texto (schema-domain-heading); ahora es un input para
   poder editar el nombre de la tabla igual que el de cada columna, pero
   conserva el aspecto de cabecera (letra más grande, sin caja visible
   hasta que se toca). */
.editor-table-label-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0.6rem 0 0.3rem;
  padding: 0.2rem 0.3rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  color: var(--fg);
  font-size: 0.95rem;
  font-weight: 700;
  font-family: inherit;
}

/* Mapa de la app (13/09/2026, pedido de Javi, pestaña "Herramientas"):
   árbol de menú de una aplicación dibujado como un organigrama sencillo
   -- listas anidadas con líneas verticales/horizontales de conexión, sin
   necesidad de canvas ni arrastrar nada (es de solo consulta). */
.mapa-app-arbol {
  overflow-x: auto;
  padding: 0.5rem 0 1.5rem;
}

.mapa-arbol-lista {
  list-style: none;
  margin: 0;
  padding-left: 1.6rem;
  position: relative;
}

.mapa-arbol-lista > li {
  position: relative;
  padding: 0.35rem 0 0.35rem 1rem;
}

.mapa-arbol-lista > li::before {
  content: '';
  position: absolute;
  left: -0.6rem;
  top: 0;
  bottom: 0;
  border-left: 2px solid var(--border);
}

.mapa-arbol-lista > li::after {
  content: '';
  position: absolute;
  left: -0.6rem;
  top: 1.1rem;
  width: 0.9rem;
  border-top: 2px solid var(--border);
}

.mapa-arbol-lista > li:last-child::before {
  bottom: auto;
  height: 1.1rem;
}

.mapa-arbol-raiz {
  padding-left: 0;
}

.mapa-arbol-raiz > li::before,
.mapa-arbol-raiz > li::after {
  content: none;
}

.mapa-arbol-nodo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--card-bg);
  font-size: 0.92rem;
}

.mapa-arbol-nodo-clicable {
  cursor: pointer;
}

.mapa-arbol-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
}

.mapa-arbol-espaciador {
  display: inline-block;
  width: 1.2rem;
}

.mapa-arbol-nombre {
  font-weight: 500;
}
/* 27/09/2026: cabecera en una sola línea, como en Atlas Núcleo. */
.topbar { flex-wrap: nowrap; }
.topbar-left { min-width: 0; flex: 1 1 auto; white-space: nowrap; }
#bd-cabecera { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-right { flex-shrink: 0; white-space: nowrap; }