:root {
  --fondo: #f6f7f9;
  --superficie: #ffffff;
  --texto: #1d2127;
  --suave: #5f6773;
  --borde: #d5d9e0;
  --codigo: #eef0f3;
  --app: #2a2350;
  --app-2: #1a1536;
  --acento: #f0a23b;
  --enlace: #1565c0;
  --dato-fondo: #eeebfa;
  --dato-borde: #b6aee3;
  --primario: #4a3f8f;
  --primario-hover: #3b3175;
  --rojo: #c0392b;
  --verde: #2e9d57;
  --amarillo: #b07b10;
  --aviso-fondo: #fff4d6;
  --aviso-borde: #e5c36a;
  --error-fondo: #fde4e2;
  --error-borde: #e09a93;
  --ok-fondo: #e3f4e8;
  --ok-borde: #8cc9a0;
  --sombra: 0 1px 2px rgba(0, 0, 0, .06);
  /* Colores del YAML */
  --yaml-clave: #1d5f9e;
  --yaml-texto: #2e7d32;
  --yaml-palabra: #8a3fb5;
  --yaml-numero: #b35c00;
  --yaml-comentario: #7a8290;
  --yaml-seleccion: #cfe0f5;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #16191d;
    --superficie: #1f2329;
    --texto: #e6e8eb;
    --suave: #9aa2ad;
    --borde: #353b44;
    --codigo: #2a2f36;
    --app: #1c1838;
    --app-2: #100d22;
    --enlace: #7fb0e8;
    --dato-fondo: #2a2650;
    --dato-borde: #4f478f;
    --primario: #6c5fc7;
    --primario-hover: #7d71d4;
    --rojo: #e0645a;
    --verde: #3fb36b;
    --amarillo: #e0b040;
    --aviso-fondo: #3a3220;
    --aviso-borde: #7a6630;
    --error-fondo: #3d2423;
    --error-borde: #80443f;
    --ok-fondo: #1f3a29;
    --ok-borde: #3f7a56;
    --yaml-clave: #7fb0e8;
    --yaml-texto: #8fd19e;
    --yaml-palabra: #d3a4f5;
    --yaml-numero: #f0b070;
    --yaml-comentario: #7d8794;
    --yaml-seleccion: #2d4363;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  background: var(--fondo); color: var(--texto);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--enlace); }
code { padding: 1px 5px; border-radius: 4px; background: var(--codigo); font: 12px ui-monospace, monospace; font-weight: normal; }
h3 { margin: 18px 0 8px; font-size: 14px; }

/* Barra superior */
.cabecera-app { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 20px;
  background: linear-gradient(120deg, var(--app) 0%, var(--app-2) 100%); color: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.marca { display: inline-flex; align-items: center; gap: 9px; font-size: 18px; letter-spacing: .02em; }
.marca b { color: var(--acento); }
.logo { width: 26px; height: 26px; fill: none; stroke: var(--acento); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.logo .relleno { fill: var(--acento); }
.lema { color: rgba(255, 255, 255, .7); font-size: 13px; }
.lema a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.lema a:hover { color: #fff; }
button.grande { padding: 10px 18px; font-size: 15px; }
.entradas { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 14px; }
#b-tutorial[aria-pressed=true] { background: var(--acento); border-color: var(--acento); color: var(--app-2); font-weight: 600; }
.acciones-app { display: flex; gap: 5px; margin-left: auto; }
.acciones-app button { padding: 5px 10px; border: 1px solid rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; }
.acciones-app button:hover { background: rgba(255, 255, 255, .18); }

/* Interruptor Básico | Avanzado */
.nivel { display: inline-flex; margin-left: auto; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; overflow: hidden; }
.nivel button { padding: 5px 10px; border: 0; border-radius: 0; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .75); }
.nivel button + button { border-left: 1px solid rgba(255, 255, 255, .25); }
.nivel button:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.nivel button[aria-pressed=true] { background: var(--acento); color: var(--app-2); font-weight: 600; }
.nivel + .acciones-app { margin-left: 0; }

/* Botones y controles */
button { padding: 6px 14px; border: 1px solid var(--primario); border-radius: 6px; background: var(--primario); color: #fff;
  font: inherit; cursor: pointer; }
button:hover { background: var(--primario-hover); }
button.secundario { border-color: var(--borde); background: var(--superficie); color: var(--texto); }
button.secundario:hover { background: var(--codigo); }
button.peligro { border-color: var(--rojo); background: var(--rojo); }
input, select, textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--borde); border-radius: 6px;
  background: var(--superficie); color: var(--texto); font: inherit; font-weight: normal; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--primario); outline-offset: -1px; }
textarea { resize: vertical; }
/* Lo que tiene datos, con un fondo suave */
input.con-dato, select.con-dato, textarea.con-dato { background: var(--dato-fondo); border-color: var(--dato-borde); }
label.casilla.con-dato { background: var(--dato-fondo); border-radius: 6px; box-shadow: 0 0 0 3px var(--dato-fondo); }
input:not([type=checkbox]), select { height: 34px; }   /* cajas y desplegables, de la misma altura */
input:disabled, select:disabled, textarea:disabled, button:disabled { opacity: .55; cursor: not-allowed; }
.mono, textarea[data-tipo=lineas] { font: 12.5px/1.5 ui-monospace, "DejaVu Sans Mono", monospace; }
label { display: block; margin: 0 0 12px; font-weight: 600; font-size: 13px; }
label > code { margin-left: 4px; }
label > input, label > select, label > textarea { display: block; margin-top: 4px; }
label small { display: block; margin-top: 3px; color: var(--suave); font-weight: normal; }
label.casilla { margin-bottom: 8px; font-weight: normal; }
label.casilla > input { display: inline; width: auto; margin: 0 6px 0 0; vertical-align: -2px; }
.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 14px; }
.rejilla .ancho { grid-column: 1 / -1; }
/* En una fila de la rejilla, los campos quedan a la misma altura aunque una etiqueta ocupe dos líneas */
.rejilla > label:not(.casilla):not([hidden]) { display: flex; flex-direction: column; }
.titulo-campo { display: block; margin-bottom: 4px; }
.rejilla > label > .titulo-campo + :is(input, select, textarea, .con-boton) { margin-top: auto; }

/* Dos paneles: formulario | YAML */
main.dos-paneles { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding: 16px 20px; }
.panel { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--superficie); box-shadow: var(--sombra); overflow: hidden; }
.pestanas { display: flex; flex-wrap: wrap; gap: 2px; padding: 6px 8px 0;
  box-shadow: inset 0 -1px 0 var(--borde); background: var(--fondo); }
.pestanas button { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border: 1px solid transparent; border-bottom: 0;
  border-radius: 8px 8px 0 0; background: none; color: var(--suave); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.pestanas button:hover { background: var(--codigo); color: var(--texto); }
.pestanas button.activa { border-color: var(--borde); background: var(--superficie); color: var(--texto); }
.cuenta:empty { display: none; }
.cuenta { min-width: 18px; padding: 0 5px; border-radius: 9px; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.cuenta.error { background: var(--rojo); }
.cuenta.aviso { background: var(--amarillo); }
.contenido-pestana { flex: 1; overflow: auto; padding: 14px 16px; }
.explica { margin: 0 0 14px; color: var(--suave); }
.pista { display: block; margin-top: 2px; font-size: 12.5px; }
kbd { padding: 0 5px; border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 4px; background: var(--superficie);
  font: 11.5px ui-monospace, monospace; }
.con-boton { display: flex; gap: 6px; margin-top: 4px; }
.con-boton > input { flex: 1; min-width: 0; }
.con-boton > button { padding: 4px 10px; }
.acciones-lista { display: flex; gap: 8px; flex-wrap: wrap; }
button.pequeño { padding: 3px 10px; font-size: 12.5px; }
.acciones-elemento { display: inline-flex; align-items: center; gap: 6px; }
.contenido-binario { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; padding: 8px 12px; }
.contenido-binario[hidden] { display: none; }
.contenido-texto[hidden] { display: none; }
select.plantillas { width: auto; }
.etiqueta { margin: 0 0 6px; font-weight: 600; font-size: 13px; }
label.casilla.en-linea { display: inline-block; margin-right: 16px; }
.bloque { display: block; margin-bottom: 12px; }
.casilla.margen { margin-top: 4px; }
.reglas-sudo[hidden], .solo-fija[hidden] { display: none; }
.nivel-basico option.avanzado:not(:checked) { display: none; }
.nota { margin: 0 0 10px; color: var(--suave); font-size: 12.5px; }
.seccion > h3 { margin-top: 18px; }

/* Tarjetas de usuarios y ficheros */
.lista { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.tarjeta { padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); box-shadow: var(--sombra); }
.elemento { background: var(--fondo); }
.cabecera-elemento { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.quitar { padding: 0 9px; border: 0; background: none; color: var(--suave); font-size: 20px; line-height: 1.3; }
.quitar:hover { background: var(--error-fondo); color: var(--rojo); }

/* Opciones avanzadas en el nivel Básico: ocultas, salvo que tengan valor o se hayan pedido (un error, un aviso) */
.nivel-basico .avanzado:not(.con-valor, .mostrado) { display: none !important; }
.nivel-basico label.avanzado, .nivel-basico .seccion.avanzado { border-left: 3px solid var(--acento); padding-left: 8px; }
.nivel-basico .pestanas button.avanzado { font-style: italic; }
.resaltado { animation: resaltar 1.6s ease-out; }
@keyframes resaltar { from { background: var(--aviso-fondo); } to { background: transparent; } }

/* Panel del YAML */
.cabecera-panel { display: flex; align-items: baseline; gap: 8px; padding: 9px 14px; border-bottom: 1px solid var(--borde); background: var(--fondo); }
.estado { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--suave); }
.estado.ok { color: var(--verde); }
.estado.aviso { color: var(--amarillo); }
.estado.error { color: var(--rojo); }
.codigo { flex: 1; min-height: 0; }
.codigo .CodeMirror { height: 100%; background: var(--superficie); color: var(--texto);
  font: 13px/1.5 ui-monospace, "DejaVu Sans Mono", "Liberation Mono", monospace; }
.codigo .CodeMirror-gutters { background: var(--fondo); border-right: 1px solid var(--borde); }
.codigo .CodeMirror-linenumber { color: var(--suave); }
.codigo .CodeMirror-cursor { display: none; }
.codigo .CodeMirror-selected, .codigo .CodeMirror-focused .CodeMirror-selected { background: var(--yaml-seleccion); }
.codigo .cm-atom { color: var(--yaml-clave); }
.codigo .cm-string { color: var(--yaml-texto); }
.codigo .cm-keyword { color: var(--yaml-palabra); }
.codigo .cm-number { color: var(--yaml-numero); }
.codigo .cm-comment { color: var(--yaml-comentario); font-style: italic; }
.codigo .cm-meta, .codigo .cm-def, .codigo .cm-variable-2 { color: var(--yaml-palabra); }

.problemas { max-height: 40%; overflow: auto; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--borde); }
.problemas:empty { display: none; }
.problemas li { display: block; padding: 6px 14px 6px 38px; border-bottom: 1px solid var(--borde); position: relative; font-size: 13px; }
.problemas li:last-child { border-bottom: 0; }
.problemas li.error { background: var(--error-fondo); }
.problemas li.aviso { background: var(--aviso-fondo); }
.problemas li.enlazado { cursor: pointer; }
.problemas li.enlazado:hover { filter: brightness(.97); }
.problemas .icono { position: absolute; left: 12px; top: 6px; width: 18px; height: 18px; border-radius: 50%; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.problemas .error .icono { background: var(--rojo); }
.problemas .aviso .icono { background: var(--amarillo); }

/* Tutorial: panel de ayuda bajo el YAML */
.separador { flex: none; height: 7px; cursor: row-resize; border-top: 1px solid var(--borde); background: var(--fondo);
  touch-action: none; position: relative; }
.separador::after { content: ""; position: absolute; left: 50%; top: 2px; width: 36px; height: 3px; margin-left: -18px;
  border-radius: 2px; background: var(--borde); }
.separador:hover::after { background: var(--suave); }
.ayuda { flex: none; display: flex; flex-direction: column; min-height: 0; border-top: 1px solid var(--borde); }
.ayuda[hidden], .separador[hidden] { display: none; }
.cabecera-ayuda { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; background: var(--fondo);
  border-bottom: 1px solid var(--borde); }
.cabecera-ayuda b { flex: 1; font-size: 14px; }
.cabecera-ayuda button:disabled { opacity: .4; }
.cuerpo-ayuda { flex: 1; overflow: auto; padding: 4px 16px 14px; font-size: 13.5px; line-height: 1.55; }
.cuerpo-ayuda h2 { display: none; }   /* el título ya está en la cabecera */
.cuerpo-ayuda h3 { margin: 14px 0 6px; font-size: 14px; }
.cuerpo-ayuda h4 { margin: 12px 0 4px; font-size: 13.5px; }
.cuerpo-ayuda p, .cuerpo-ayuda ul, .cuerpo-ayuda ol { margin: 8px 0; }
.cuerpo-ayuda ul, .cuerpo-ayuda ol { padding-left: 22px; }
.cuerpo-ayuda li { margin: 3px 0; }
.cuerpo-ayuda img { display: block; max-width: 100%; height: auto; margin: 10px 0; border: 1px solid var(--borde); border-radius: 6px; }
.cuerpo-ayuda pre { margin: 8px 0; padding: 8px 10px; overflow-x: auto; border-radius: 6px; background: var(--codigo);
  font: 12px/1.5 ui-monospace, monospace; }
.plataforma { margin: 10px 0; padding: 2px 12px; border-left: 3px solid var(--primario); background: var(--fondo); border-radius: 0 6px 6px 0; }
.nombre-plataforma { display: block; margin-top: 6px; color: var(--primario); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.vista-red-caja { margin-top: 16px; }
.vista-red { margin: 6px 0; padding: 8px 10px; overflow-x: auto; border-radius: 6px; background: var(--codigo);
  font: 12px/1.5 ui-monospace, monospace; }
.clave { white-space: nowrap; }
label > .clave { margin-left: 4px; }
button.ayuda-campo { width: 17px; height: 17px; margin-left: 5px; padding: 0; border: 1px solid var(--borde); border-radius: 50%;
  background: var(--superficie); color: var(--suave); font-size: 11px; font-weight: 700; line-height: 15px; vertical-align: 1px; }
button.ayuda-campo:hover { border-color: var(--primario); background: var(--primario); color: #fff; }
.tutorial [data-ayuda]:focus-within > .clave > code { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Guía con pasos */
.paso { margin: 10px 0 12px; padding: 10px 14px; border: 1px solid var(--acento); border-radius: 8px; background: var(--aviso-fondo); }
.paso h3 { margin: 0 0 6px; font-size: 15px; }
.orden { position: relative; }
.orden pre { padding-right: 70px; }
.orden .copiar { position: absolute; top: 12px; right: 6px; }
.paso p { margin: 4px 0 0; }
.paso .acciones { margin-top: 10px; }
.volver-paso { margin: 8px 0 0; }
.destacado { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: 6px; animation: latido 1.4s ease-in-out 2; }
@keyframes latido { 50% { outline-color: transparent; } }

/* Mensajes */
.mensaje { padding: 8px 40px 8px 14px; border: 1px solid; border-radius: 6px; position: relative; }
.mensaje ul { margin: 4px 0 0; padding-left: 18px; }
.mensaje.error { background: var(--error-fondo); border-color: var(--error-borde); }
.mensaje.aviso { background: var(--aviso-fondo); border-color: var(--aviso-borde); }
.mensaje.ok { background: var(--ok-fondo); border-color: var(--ok-borde); }
.aviso-app { margin: 12px 20px 0; }
.quitar-aviso { position: absolute; top: 4px; right: 8px; padding: 0 8px; border: 0; background: none; color: var(--suave); font-size: 20px; line-height: 1.4; }
.quitar-aviso:hover { background: rgba(0, 0, 0, .1); color: var(--texto); }

/* Diálogo */
dialog { padding: 0; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); color: var(--texto); box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
dialog::backdrop { background: rgba(0, 0, 0, .4); }
dialog .tarjeta { border: 0; box-shadow: none; width: min(26rem, 90vw); padding: 16px 18px; }
dialog h2 { margin: 0 0 8px; font-size: 16px; }
.tarjeta.ancha { width: min(36rem, 92vw); }
.ejemplos { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.ejemplos button { display: block; width: 100%; text-align: left; border-color: var(--borde); background: var(--fondo); color: var(--texto); }
.ejemplos button:hover { background: var(--codigo); }
.ejemplos button .suave { display: block; margin-top: 2px; }
.destino { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 auto; color: rgba(255, 255, 255, .75); font-weight: normal; }
.destino select { width: auto; padding: 4px 6px; border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .08); color: #fff; }
.destino select option { color: var(--texto); background: var(--superficie); }
.destino + .nivel { margin-left: 0; }
[data-destino][hidden] { display: none !important; }
.tarjeta.ancha.guia { width: min(50rem, 94vw); max-height: 85vh; overflow: auto; }
.guia h3 { margin-top: 14px; }
.guia pre { margin: 6px 0; padding: 8px 10px; overflow-x: auto; border-radius: 6px; background: var(--codigo); font: 12px/1.5 ui-monospace, monospace; }
.guia p { margin: 6px 0; }
.suave { color: var(--suave); font-weight: normal; font-size: 13px; }
.acciones { display: flex; gap: 8px; margin-top: 14px; }

footer { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 8px 20px; border-top: 1px solid var(--borde);
  background: var(--superficie); color: var(--suave); font-size: 12.5px; }

/* Pantallas estrechas: un panel debajo del otro */
@media (max-width: 900px) {
  main.dos-paneles { grid-template-columns: 1fr; padding: 12px; }
  .panel { min-height: 60vh; }
  .acciones-app { margin-left: 0; flex-wrap: wrap; }
  .lema { display: none; }
}