: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);
}

.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;
}

.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 "AtlasKnow" 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;
}

/* ---- Esquema (09/09/2026, portado tal cual de Ground-app, mismo diseño ---- */
/* Descripciones largas convertidas en tooltip del título (28/08/2026,
   pedido de Javi: "que esa descripción solo se vea al pasar el ratón por
   encima de la etiqueta" — antes eran un <p class="hint"> siempre
   visible debajo del título; ahora viven en su atributo title). El
   cursor de ayuda es la única pista de que ahí hay algo más que leer. */
h1[title],
h2[title],
h3[title],
.schema-detail-table[title] {
  cursor: help;
}

/* --- Esquema: mapa de tablas (28/08/2026) -------------------------------
   Tres columnas: lista de tablas a la izquierda, lienzo arrastrable en el
   centro, detalle de la tabla seleccionada a la derecha. Solo consulta —
   nada aquí escribe en la base. */

.schema-layout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.schema-sidebar {
  flex: 0 0 220px;
}

.schema-sidebar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}

.schema-sidebar-actions button {
  margin-top: 0;
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
}

.schema-entity-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 560px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

/* Cabecera de cada dominio (28/08/2026, pedido de Javi: "tres dominios...
   universos y fuentes, Aprendizaje y Consultas"). Solo texto, sin
   checkbox — agrupa visualmente las tablas de abajo, no es seleccionable
   por sí misma. */
.schema-domain-heading {
  margin: 0.4rem 0 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.2rem;
}

.schema-domain-heading:first-child {
  margin-top: 0;
}

.schema-entity-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  cursor: pointer;
}

.schema-entity-item input {
  margin: 0;
}

.schema-entity-item span:last-of-type {
  flex: 1 1 auto;
}

/* "+rel" por tabla (28/08/2026, pedido de Javi: antes era un único botón
   global "+ Relacionadas" que expandía TODO lo marcado a la vez — ahora
   cada tabla tiene el suyo, para añadir solo las relacionadas con ESA. */
.schema-entity-related-btn {
  flex-shrink: 0;
  margin-top: 0;
  font-size: 0.68rem;
  padding: 0.15rem 0.4rem;
  cursor: pointer;
}

.schema-canvas-col {
  flex: 1 1 auto;
  min-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.schema-canvas-wrap {
  /* flex: none a propósito (28/08/2026): con "flex: 1 1 auto" el propio
     flexbox se peleaba con el tirador de redimensionar en el eje
     horizontal (el ancho es el eje principal de la fila y flex-grow lo
     recalculaba por encima de lo que arrastrabas) — el vertical sí
     funcionaba porque la altura no es el eje que controla flex-grow aquí.
     Sin flex-grow/shrink, "resize" manda en los dos sentidos sin que nadie
     se lo pise. */
  flex: none;
  position: relative;
  /* Antes 900px fijos: con .schema-canvas-col ya ensanchado (ver
     main.is-wide-tab) eso dejaba un hueco enorme sin usar a la derecha
     (28/08/2026, "quedan áreas muy grandes vacías"). 100% lo hace
     arrancar ocupando todo el ancho disponible de la columna; el tirador
     de "resize" lo sigue pudiendo encoger hasta min-width. */
  width: 100%;
  height: 560px;
  min-width: 420px;
  min-height: 320px;
  /* Tope al ensanchar (28/08/2026, pedido de Javi): al ser "flex: none" el
     lienzo no participa en el reparto de flexbox, así que sin este límite
     el tirador de "resize" lo dejaba crecer por encima del ancho real que
     le queda a .schema-canvas-col y se comía el panel de "Detalle" de al
     lado. 100% aquí es 100% del contenedor (.schema-canvas-col), que sí
     respeta el sitio fijo reservado para el panel — así que el arrastre
     simplemente deja de moverse justo en ese borde, sin taparlo nunca. */
  max-width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: auto;
  background: var(--card-bg);
  resize: both;
  /* Arrastre con el botón central del ratón (09/09/2026) — el cursor de
     "mano abierta" avisa de que se puede arrastrar; ".is-panning" (puesto
     y quitado en JS mientras se mantiene pulsada la rueda) lo cambia a
     "mano cerrada" durante el propio arrastre, igual que Figma/Google
     Maps. */
  cursor: grab;
}

.schema-canvas-wrap.is-panning {
  cursor: grabbing;
  /* Evita seleccionar texto de las tarjetas sin querer mientras se
     arrastra el lienzo con el ratón. */
  user-select: none;
}

#schema-canvas {
  position: relative;
  width: 1600px;
  height: 1100px;
  transform-origin: 0 0;
}

#schema-canvas-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 1600px;
  height: 1100px;
  pointer-events: none;
  transform-origin: 0 0;
}

.schema-entity-card {
  position: absolute;
  width: 210px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  cursor: grab;
  user-select: none;
  font-size: 0.78rem;
  /* display:flex (28/08/2026, tirador de redimensionar): con altura
     automática esto se comporta igual que antes (cabecera + columnas
     apiladas, alto = suma de ambas). Solo cambia algo cuando Javi fija un
     alto a mano con el tirador — entonces "overflow: hidden" es lo que
     hace que la tarjeta no crezca por su cuenta más allá de ese alto. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.schema-entity-card.is-dragging,
.schema-entity-card.is-resizing {
  z-index: 5;
}

.schema-entity-card.is-dragging {
  cursor: grabbing;
}

.schema-entity-card.is-selected {
  outline: 2px solid var(--accent);
}

/* Tirador de la esquina inferior derecha (28/08/2026, pedido de Javi:
   "cada caja de entidad que se pueda modificar la altura y la anchura
   con un tirador"). Rayitas diagonales dibujadas con gradiente, igual de
   discreto en claro y oscuro sin depender de una imagen. */
.schema-entity-card-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 0 40%, var(--muted) 40% 55%, transparent 55% 100%),
    linear-gradient(135deg, transparent 0 65%, var(--muted) 65% 80%, transparent 80% 100%);
}

.schema-entity-card-header {
  padding: 0.4rem 0.55rem;
  border-radius: 8px 8px 0 0;
  font-weight: 600;
  color: #fff;
  /* Título a la izquierda, contador de filas a la derecha (09/09/2026,
     pedido de Javi). */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.schema-entity-card-header-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schema-entity-card-header-count {
  flex-shrink: 0;
  font-weight: 400;
  font-size: 0.78rem;
  opacity: 0.85;
}

.schema-entity-card-columns {
  padding: 0.35rem 0.55rem;
  max-height: 150px;
  overflow-y: auto;
  /* flex:1 + min-height:0 (28/08/2026, tirador de redimensionar): cuando
     la tarjeta tiene un alto fijado a mano (más que la cabecera + 150px),
     esto es lo que deja que las columnas ocupen el hueco de más en vez de
     quedarse en 150px con espacio en blanco debajo. Sin min-height:0 un
     hijo flex nunca se encoge por debajo de su contenido, y el scroll no
     llegaría a activarse cuando el alto fijado es MENOR que el contenido. */
  flex: 1 1 auto;
  min-height: 0;
}

.schema-entity-card-column {
  display: flex;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.1rem 0;
  color: var(--muted);
  white-space: nowrap;
}

.schema-entity-card-column.is-key {
  color: var(--fg);
  font-weight: 600;
}

.schema-entity-card-column-icon {
  flex-shrink: 0;
}

/* Tabla "fantasma" (28/08/2026, pedido de Javi: "ver los valores de las
   listas cerradas aunque no se puedan editar"): borde discontinuo y
   cabecera gris en vez del color por tabla, para que se note a simple
   vista que no es una tabla real de la base de datos. */
.schema-entity-card.is-ghost {
  border-style: dashed;
  border-color: var(--muted);
}

.schema-entity-card.is-ghost .schema-entity-card-header {
  background: var(--muted);
  font-style: italic;
}

#schema-canvas-svg line {
  stroke: var(--accent);
  stroke-width: 1.5;
  opacity: 0.6;
}

/* Indicadores padre/hijo en cada línea de relación (28/08/2026, pedido de
   Javi). Antes eran <marker> de SVG colocados en los extremos exactos de
   la línea — que son el CENTRO de cada tarjeta, tapado por su fondo
   opaco, así que nunca se veían. Ahora son un <circle> (padre) y un
   <polygon> (hija, con forma de flecha) que se calculan y colocan a mano
   justo donde la línea sale del borde de cada tarjeta — ver
   drawSchemaRelationLines en app.js — con su propia opacidad, sin heredar
   la de la línea (que la dejaría demasiado tenue).*/
.schema-rel-parent-marker,
.schema-rel-child-marker {
  fill: var(--accent);
}

/* Modal "diagrama de acciones" al hacer doble clic en una tarea
   (29/08/2026, pedido de Javi: "que se abra un diagrama de acciones con
   lo que se ejecuta realmente en esa tarea"). Reutiliza la misma chapa de
   modal que Esquema (.schema-modal-overlay/.schema-modal en el HTML,
   línea de flujo vertical con círculos numerados y flechas propia de
   aquí). */
.learn-flow-action-modal {
  width: 560px;
}

/* Formulario de edición (tarea/fase/conexión), dentro del modal genérico
   reutilizado de Esquema (.schema-modal). */
.learn-flow-edit-modal {
  width: 620px;
}

/* Etiqueta "X a Y" en el punto medio de cada línea (28/08/2026, pedido de
   Javi). El "stroke" del mismo color que el fondo del lienzo, dibujado
   ANTES que el relleno (paint-order), hace de halo — así el texto se lee
   igual de bien encima de una línea o cruzando otra tarjeta, sin tapar
   nada por completo como haría un <rect> de fondo. */
.schema-rel-cardinality {
  font-size: 10px;
  font-family: inherit;
  fill: var(--fg);
  stroke: var(--card-bg);
  stroke-width: 3px;
  paint-order: stroke fill;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* Antes era la tercera columna de .schema-layout, a la derecha del
   lienzo; Javi pidió que apareciera debajo de las flechas de mover en su
   lugar (28/08/2026) — ahora vive dentro de .schema-canvas-col, así que
   ya no necesita un ancho de columna fijo (flex: 0 0 260px), solo separarse
   visualmente de las flechas y no crecer sin límite si la tabla tiene
   muchas columnas. */
.schema-detail-panel {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
  max-height: 320px;
  overflow-y: auto;
}

.schema-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.schema-detail-header h2 {
  margin: 0;
  font-size: 1rem;
}

.schema-detail-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.schema-detail-header button {
  margin-top: 0;
  font-size: 0.72rem;
  padding: 0.25rem 0.5rem;
  flex-shrink: 0;
}

.schema-detail-table {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.schema-detail-columns {
  margin-top: 0.6rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
}

.schema-detail-column {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.82rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--border);
}

.schema-detail-column-type {
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
}

/* Modo "Editar nombres" del panel de Detalle (28/08/2026, pedido de
   Javi): el nombre de la tabla y el de cada columna se convierten en
   estos inputs en vez de texto suelto. Mismo tamaño de letra que el
   texto que sustituyen, para que el cambio de modo no salte visualmente. */
.schema-detail-table-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

.schema-detail-column-label-input {
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.15rem 0.35rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--fg);
  font-size: 0.82rem;
  font-family: inherit;
}

.schema-detail-edit-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* Importante: si aquí se fija "display" sin más, el
   modal se ve siempre — vacío, tapando la página entera — desde que carga,
   y el botón de cerrar tampoco sirve (bug real, visto por Javi 27/08/2026). */
.schema-modal-overlay[hidden] {
  display: none;
}

.schema-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  padding: 1.5rem;
}

.schema-modal {
  position: relative;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
  max-width: 90vw;
  max-height: 85vh;
  width: 900px;
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
}

/* Tiras invisibles en los cuatro bordes (28/08/2026, pedido de Javi):
   arrastrarlas cambia el tamaño del panel en cualquier dirección. La
   primera vez que se arrastra una, el JS pasa el panel de "centrado por
   flexbox" a posición fija con su ancho/alto exactos — a partir de ahí el
   tamaño y la posición quedan en tus manos. */
.schema-modal-resize-handle {
  position: absolute;
  z-index: 5;
}

.schema-modal-resize-handle.edge-top,
.schema-modal-resize-handle.edge-bottom {
  left: 10px;
  right: 10px;
  height: 8px;
  cursor: ns-resize;
}

.schema-modal-resize-handle.edge-top {
  top: -4px;
}

.schema-modal-resize-handle.edge-bottom {
  bottom: -4px;
}

.schema-modal-resize-handle.edge-left,
.schema-modal-resize-handle.edge-right {
  top: 10px;
  bottom: 10px;
  width: 8px;
  cursor: ew-resize;
}

.schema-modal-resize-handle.edge-left {
  left: -4px;
}

.schema-modal-resize-handle.edge-right {
  right: -4px;
}

.schema-modal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.schema-modal-toolbar .hint {
  margin: 0;
}

.schema-modal-toolbar button {
  margin-top: 0;
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
  flex-shrink: 0;
}

.schema-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.schema-modal-header h2 {
  margin: 0;
}

.schema-modal-close {
  margin-top: 0;
  background: none;
  color: var(--muted);
  border: none;
  font-size: 1.1rem;
  padding: 0.2rem 0.5rem;
}

/* Altura de las filas y anchura de las columnas, ambas arrastrables
   (28/08/2026, pedido de Javi). La altura es UNA sola tira arrastrable
   para toda la tabla (--schema-row-pad, en px) porque lo que pidió fue
   "la altura", en singular — no el alto de cada fila por separado. La
   anchura, en cambio, la pidió "de cada columna", así que cada `<th>`
   lleva su propio tirador a la derecha; para que eso funcione, la tabla
   pasa a table-layout:fixed con un <colgroup> que fija el ancho inicial
   de cada columna en JS (renderSchemaModalTable). */
.schema-modal-row-height-handle {
  height: 10px;
  margin-top: 0.5rem;
  border-radius: 4px;
  background: var(--card-bg);
  border: 1px dashed var(--border);
  cursor: ns-resize;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  user-select: none;
}

.schema-modal-body {
  overflow-x: auto;
  margin-top: 0.4rem;
}

.schema-modal-body table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.78rem;
  table-layout: fixed;
}

.schema-modal-body th,
.schema-modal-body td {
  border: 1px solid var(--border);
  padding: calc(0.3rem + var(--schema-row-pad, 0px)) 0.5rem;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
}

/* En cuanto la fila tiene algo de aire extra, aprovecharlo: el texto
   envuelve en vez de cortarse con "…" (si no, el espacio ganado con la
   altura no serviría para ver más contenido). */
.schema-modal-body.is-tall th,
.schema-modal-body.is-tall td {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  word-break: break-word;
}

.schema-modal-body th {
  background: var(--card-bg);
  position: sticky;
  top: 0;
}

.schema-col-resize-handle {
  position: absolute;
  top: 0;
  right: -3px;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 2;
}

.schema-col-resize-handle:hover,
.schema-col-resize-handle.is-resizing {
  background: var(--accent);
  opacity: 0.5;
}

/* 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;
}