: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;
  /* 27/09/2026 (Javi): cabecera en UNA sola línea. */
  flex-wrap: nowrap;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex: 1 1 auto;
  white-space: nowrap;
}

/* Si no cabe, se recorta con "…" en vez de saltar de línea. */
#org-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.topbar-right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  white-space: nowrap;
  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"],
input[type="tel"],
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;
}
/* 25/10/2026: el administrador, arriba en la ficha de la organización */
.orgdet-admin {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 0.6rem 0.8rem;
  margin-bottom: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  background: var(--bg);
}
.orgdet-admin-titulo {
  font-weight: 600;
}
.orgdet-admin-lista {
  flex: 1 1 20rem;
}
.orgdet-admin-fila {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.15rem 0;
}
.orgdet-admin-panel {
  flex-basis: 100%;
  max-width: 36rem;
}

/* 26/10/2026: «Tu menú» en dos columnas: el menú a la izquierda y, a la derecha, qué es Atlas y sus fases */
/* 26/10/2026: la página de «Tu menú» usa toda la pantalla */
main:has(> .tab-panel[data-tab-panel="menu"]:not([hidden])) { max-width: 110rem; }
.menu-dos-columnas { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.4fr); gap: 2rem; align-items: start; }
@media (max-width: 1000px) { .menu-dos-columnas { grid-template-columns: 1fr; } .menu-caja { order: -1; } }
.atlas-fases, .menu-caja { background: rgba(255,255,255,0.82); border: 1px solid #e3e6ea; border-radius: 14px; padding: 1.1rem 1.3rem; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.menu-caja h1 { margin: 0 0 0.8rem; font-size: 1.5rem; }
/* 26/10/2026 (Javi): el triángulo de «¿Qué es Atlas?» como los demás (delante y del mismo tamaño) */
.fa-todo > summary.fa-titulo { cursor: pointer; font-size: 1.35rem; font-weight: 700; }
.fa-todo > summary.fa-titulo::marker { font-size: 0.8em; }
.fa-cupula { display: inline-block; vertical-align: -0.15em; color: #3f8f5a; margin: 0 0.1rem; }
.fa-cupula svg { width: 1.4em; height: 1em; }
.fa-cupula:hover { color: #1f6b3a; }
/* Tarjetas de aplicaciones */
.menu-caja .menu-tree { list-style: none; padding: 0; margin: 0; }
.menu-caja li.aplicacion-grupo { margin: 0 0 1.1rem; }
.menu-caja .aplicacion-grupo-titulo { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: #6b7280; font-weight: 700; margin-bottom: 0.45rem; }
.menu-caja .menu-tree-anidado { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.7rem; padding: 0; margin: 0; }
.menu-caja li.aplicacion { margin: 0; padding: 0; list-style: none; }
.menu-caja a.app-tarjeta { display: flex; gap: 0.75rem; align-items: center; height: 100%; box-sizing: border-box; padding: 0.75rem 0.9rem; border: 1px solid #e3e6ea; border-radius: 12px; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
.menu-caja a.app-tarjeta:hover { border-color: var(--accent, #2f7d5b); box-shadow: 0 4px 14px rgba(0,0,0,0.08); transform: translateY(-1px); }
.app-icono { font-size: 1.6rem; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: #f2f4f6; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.app-texto { display: flex; flex-direction: column; line-height: 1.25; }
.app-texto strong { font-size: 1rem; }
.app-texto small { color: #6b7280; font-size: 0.82rem; margin-top: 0.15rem; }
.atlas-fases { background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 14px; padding: 1rem 1.2rem; backdrop-filter: blur(2px); }
.fa-titulo { margin: 0 0 0.4rem; }
.fa-sub { margin: 1rem 0 0.5rem; }
.fa-hint { font-weight: 400; font-size: 0.8em; opacity: 0.7; }
.fa-objetivos summary { cursor: pointer; font-weight: 600; }
.fa-cadena { display: flex; flex-direction: column; align-items: stretch; }
.fa-fase { border: 1.5px solid var(--fa); background: color-mix(in srgb, var(--fa) 14%, white); border-radius: 10px; padding: 0.45rem 0.7rem; }
.fa-fase.fa-fuera { border-style: dashed; opacity: 0.85; }
.fa-fase summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem; }
.fa-fase summary::-webkit-details-marker { display: none; }
.fa-num { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--fa); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex: 0 0 auto; }
.fa-nom { display: flex; flex-direction: column; line-height: 1.2; }
.fa-nom small { opacity: 0.75; }
.fa-obras { margin-left: auto; font-size: 0.8em; opacity: 0.8; }
.fa-fase p { margin: 0.5rem 0 0.4rem; }
.fa-enlaces { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fa-enlace { font-size: 0.85em; padding: 0.15rem 0.55rem; border-radius: 999px; border: 1px solid var(--fa); text-decoration: none; color: inherit; background: #fff; }
.fa-enlace:hover { background: var(--fa); color: #fff; }
.fa-sin { opacity: 0.5; cursor: default; }
.fa-flecha { text-align: center; color: #888; line-height: 1.4; }
.fa-vuelta { font-size: 0.85em; font-style: italic; }
/* 26/10/2026: sin subrayado en las tarjetas del menú (ganaba la regla antigua de .menu-tree li.aplicacion a) */
.menu-caja .menu-tree li.aplicacion a.app-tarjeta, .menu-caja .menu-tree li.aplicacion a.app-tarjeta * { text-decoration: none; }
.menu-caja .menu-tree li.aplicacion a.app-tarjeta { font-weight: 400; }
/* 26/10/2026: al cerrar «¿Qué es Atlas?» se esconde todo su contenido (otra regla lo dejaba visible) */
.fa-todo:not([open]) > :not(summary) { display: none !important; }
/* 26/10/2026: «Desde» y «Elementos» en dos columnas; Herramientas debajo, a lo ancho */
.menu-caja .menu-columnas { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
.menu-caja .menu-columnas > .menu-ancho { grid-column: 1 / -1; }
.menu-caja .menu-columnas > .menu-col .menu-tree-anidado { grid-template-columns: 1fr; }
.menu-caja .menu-columnas > .menu-ancho .menu-tree-anidado { grid-template-columns: 1fr 1fr; column-gap: 1.2rem; }
@media (max-width: 600px) { .menu-caja .menu-columnas, .menu-caja .menu-columnas > .menu-ancho .menu-tree-anidado { grid-template-columns: 1fr; } }
/* 26/10/2026 (Javi): las tarjetas del menú, todas de la misma altura para que las filas queden alineadas */
.menu-caja a.app-tarjeta { min-height: 6.2rem; }

/* 🏛 Página inicial «Atlas»: dimensiones (27/10/2026) */
.menu-una-columna { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; }
.ir-atlas { display: flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.82); border: 1px solid #e3e6ea; border-radius: 12px; padding: 0.7rem 1rem; text-decoration: none; color: inherit; box-shadow: 0 2px 10px rgba(0,0,0,0.04); }
.ir-atlas span { color: #6b7280; }
.ir-atlas:hover { border-color: #3f8f5a; }
#atlas-dimensiones h1 { margin: 0 0 0.8rem; font-size: 1.5rem; }
.dim-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; align-items: start; }
.dim { border: 1.5px solid var(--fa); background: color-mix(in srgb, var(--fa) 10%, white); border-radius: 12px; padding: 0.6rem 0.8rem; }
.dim.dim-obras { border-style: dashed; }
.dim summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem; }
.dim summary::-webkit-details-marker { display: none; }
.dim-icono { font-size: 1.6rem; width: 2.2rem; text-align: center; flex: none; }
.dim-texto { display: flex; flex-direction: column; line-height: 1.2; }
.dim-texto small { color: #6b7280; font-size: 0.8rem; }
.dim p { margin: 0.5rem 0 0.4rem; font-size: 0.92rem; }
.dim-transversal { margin-top: 0.9rem; font-size: 0.9rem; color: #4b5563; border-top: 1px dashed #d1d5db; padding-top: 0.7rem; }
@media (min-width: 1500px) { .dim-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 600px) { .dim-rejilla { grid-template-columns: 1fr; } }

/* 🧭 Mantenimiento de dimensiones (27/10/2026) */
#dimed h1 { margin-top: 0; }
.dimed-ayuda { margin: 0 0 0.8rem; } .dimed-ayuda summary { cursor: pointer; font-weight: 600; }
.dimed-aviso { background: #fff8e1; border: 1px solid #f0d58a; border-radius: 8px; padding: 0.5rem 0.8rem; }
.dimed-botones { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.dimed-lista { display: flex; flex-direction: column; gap: 0.6rem; }
.dimed-fila { border: 1.5px solid var(--fa); border-left-width: 6px; background: #fff; border-radius: 10px; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; }
.dimed-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dimed-cab input[type=text], .dimed-cab input:not([type]) { padding: 0.3rem 0.5rem; border: 1px solid #d1d5db; border-radius: 6px; }
.dimed-icono { width: 3rem; text-align: center; } .dimed-nombre { width: 14rem; font-weight: 600; } .dimed-pregunta { width: 14rem; }
.dimed-cab label { font-size: 0.85rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.dimed-mover { margin-left: auto; display: inline-flex; gap: 0.25rem; }
.dimed-fila textarea { width: 100%; box-sizing: border-box; border: 1px solid #d1d5db; border-radius: 6px; padding: 0.35rem 0.5rem; font: inherit; font-size: 0.9rem; }
.dimed-enlaces { font-family: ui-monospace, monospace; font-size: 0.8rem !important; color: #4b5563; }
#dimed .btn:disabled, #dimed input:disabled, #dimed textarea:disabled { opacity: 0.55; cursor: default; }

/* ⚡ Cables fases ↔ dimensiones (27/10/2026) */
.fa-dos-vistas { background: #f4f7fb; border-radius: 8px; padding: 0.5rem 0.7rem; font-size: 0.93rem; }
svg.dim-cables { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 2; }
.dim-cable { fill: none; stroke-width: 3; stroke-linecap: round; opacity: 0.85; }
.dim-puntos { margin-left: auto; display: inline-flex; gap: 3px; align-self: flex-start; }
.dim-puntos i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dim.dim-apagada, .fa-fase.dim-apagada { opacity: 0.35; transition: opacity .2s; }
.dim.dim-encendida { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa) 35%, transparent); }
.fa-fase.dim-encendida { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa) 35%, transparent); }
.dimed-fases { display: flex; flex-wrap: wrap; gap: 0.6rem; font-size: 0.82rem; color: #4b5563; align-items: center; }
.dimed-fases label { display: inline-flex; align-items: center; gap: 0.2rem; }
.dimed-fnum { color: #fff; border-radius: 50%; width: 1.1rem; height: 1.1rem; display: inline-flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 700; }
/* Habitaciones y cimientos (27/10/2026) */
.dim-sub { margin: 0.9rem 0 0.45rem; font-size: 1rem; }
.dim-cimientos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.45rem; align-items: start; border-top: 3px solid #c9ced6; padding-top: 0.6rem; }
.dim-cim { padding: 0.35rem 0.55rem; border-radius: 8px; }
.dim-cim .dim-icono { font-size: 1.2rem; width: 1.6rem; }
.dim-cim .dim-texto strong { font-size: 0.88rem; }
.dim-cim .dim-texto small { font-size: 0.72rem; }
.dim-cim p { font-size: 0.85rem; }