/* GadesPlant · Diagrama de cultivo */
:root {
  --fondo: #e9eee8;
  --papel: #ffffff;
  --papel-2: #f6f8f5;
  --tinta: #1d2a23;
  --tinta-2: #55625b;
  --linea: #cdd6cc;
  --clorofila: #2f6b3a;
  --clorofila-2: #e3efe3;
  --azul: #3a5c7a;
  --ambar: #b87400;
  --ambar-2: #fff5df;
  --violeta: #6a4fb3;
  --rojo: #b23a3a;
  --foco: #1f7ae0;
  --fuente: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #151b17;
    --papel: #1e2621;
    --papel-2: #232d27;
    --tinta: #e4ece6;
    --tinta-2: #9fb0a5;
    --linea: #34423a;
    --clorofila: #6fbf7e;
    --clorofila-2: #22362a;
    --azul: #8fb3d6;
    --ambar: #e6a93a;
    --ambar-2: #33291a;
    --violeta: #b4a0ec;
    --rojo: #ec8a8a;
    --foco: #6fb0ff;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 14px/1.45 var(--fuente);
  color: var(--tinta);
  background: var(--fondo);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* ---------- barra superior ---------- */
.barra {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--papel);
  border-bottom: 3px solid var(--clorofila);
}
.meta { flex: 1 1 360px; display: flex; flex-direction: column; min-width: 0; }
.meta input {
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  padding: 1px 6px;
  width: 100%;
}
.meta input:hover, .meta input:focus { border-color: var(--linea); background: var(--papel-2); }
#m-titulo { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
#m-subtitulo { font-size: 13px; color: var(--tinta-2); }
.grupo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vistas .bt[aria-pressed="true"] { background: var(--clorofila); border-color: var(--clorofila); color: #fff; }

.bt {
  border: 1px solid var(--linea);
  background: var(--papel);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
}
.bt:hover:not(:disabled) { border-color: var(--clorofila); }
.bt:disabled { opacity: .45; cursor: default; }
.bt.primario { background: var(--clorofila); border-color: var(--clorofila); color: #fff; font-weight: 600; }
.bt.peligro:hover { border-color: var(--rojo); color: var(--rojo); }

.estado { font-size: 12.5px; padding: 3px 8px; border-radius: 10px; }
.estado[data-tipo="ok"] { color: var(--clorofila); }
.estado[data-tipo="sucio"] { color: var(--ambar); background: var(--ambar-2); font-weight: 600; }

/* ---------- área principal ---------- */
.area { flex: 1; display: grid; grid-template-columns: minmax(420px, 46%) 1fr; min-height: 0; }
body[data-vista="editor"] .area { grid-template-columns: 1fr; }
body[data-vista="editor"] .diagrama { display: none; }
body[data-vista="diagrama"] .area { grid-template-columns: 1fr; }
body[data-vista="diagrama"] .editor { display: none; }

.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.editor { border-right: 1px solid var(--linea); }
.herramientas {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--linea);
}
.herramientas select { border: 1px solid var(--linea); border-radius: 6px; padding: 4px 6px; background: var(--papel); max-width: 260px; }
.sep { width: 1px; height: 20px; background: var(--linea); margin: 0 4px; }
.chk { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }

/* ---------- árbol ---------- */
.arbol { flex: 1; overflow: auto; padding: 14px 14px 80px; }
body[data-vista="editor"] .arbol > * { max-width: 980px; margin-left: auto; margin-right: auto; }

.nodo {
  --c: var(--azul);
  position: relative;
  min-width: 0;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--c);
  border-radius: 6px;
  margin: 6px 0;
}
.nodo.t-fase { --c: var(--clorofila); margin: 0 0 14px; border-radius: 8px; box-shadow: 0 1px 0 var(--linea); }
.nodo.t-decision { --c: var(--ambar); }
.nodo.t-rama { --c: var(--tinta-2); background: var(--papel-2); border-style: dashed; border-left-style: solid; }
.nodo.t-material { --c: #5b7fa6; }
.nodo.t-nota { --c: #a89500; }
.nodo.t-salto { --c: var(--violeta); }
.nodo.t-fin { --c: var(--rojo); }

.cab { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 4px; }
.t-fase > .cab { background: var(--clorofila-2); border-radius: 0 7px 0 0; padding: 7px 8px 7px 4px; }
.cab .plegar { border: 0; background: transparent; padding: 2px 4px; width: 24px; color: var(--tinta-2); }
.num { font-size: 11.5px; color: var(--tinta-2); min-width: 2.2em; font-variant-numeric: tabular-nums; }
.tipo {
  font-size: 11.5px; font-weight: 600; color: var(--c);
  border: 1px solid var(--linea); border-radius: 4px; padding: 2px 4px; background: var(--papel);
}
span.tipo { padding: 2px 6px; }
.cab .titulo {
  flex: 1; min-width: 0;
  border: 1px solid transparent; border-radius: 4px; background: transparent;
  padding: 3px 6px; font-weight: 600;
}
.t-fase > .cab .titulo { font-size: 15.5px; font-weight: 700; }
.cab .titulo:hover, .cab .titulo:focus { border-color: var(--linea); background: var(--papel); }
select.titulo { font-weight: 600; color: var(--violeta); }
.acc { display: flex; gap: 2px; opacity: .35; transition: opacity .12s; }
.nodo:hover > .cab .acc, .nodo:focus-within > .cab .acc { opacity: 1; }
.acc .bt { padding: 2px 7px; font-size: 12px; }

.cuerpo { padding: 0 8px 8px 16px; }
.plegado > .cuerpo { display: none; }
.texto {
  width: 100%; resize: none; overflow: hidden; min-height: 30px;
  border: 1px solid transparent; border-radius: 4px; background: var(--papel-2);
  padding: 5px 8px; line-height: 1.45; color: var(--tinta);
}
.texto:hover, .texto:focus { border-color: var(--linea); }
.t-material .texto { font-size: 13px; }
.hijos { border-left: 1px dotted var(--linea); padding-left: 8px; margin-top: 6px; min-width: 0; }
.t-decision > .cuerpo > .hijos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; border-left-color: var(--ambar); }

.anadir { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 6px; font-size: 12px; color: var(--tinta-2); }
.anadir > span { margin-right: 2px; }
.anadir .bt { padding: 2px 7px; font-size: 12px; border-style: dashed; }
.t-paso > .cuerpo > .anadir { display: none; }
.t-paso:focus-within > .cuerpo > .anadir { display: flex; }
.anadir.raiz { margin-top: 4px; }
.anadir.raiz .bt { padding: 6px 14px; font-size: 13px; }

@keyframes destello { from { box-shadow: 0 0 0 3px var(--foco); } to { box-shadow: 0 0 0 3px transparent; } }
.nodo.destello { animation: destello 1.4s ease-out; }

/* ---------- lienzo ---------- */
.lienzo {
  flex: 1; position: relative; overflow: hidden; cursor: grab;
  background:
    radial-gradient(circle, var(--linea) 1px, transparent 1.2px) 0 0 / 18px 18px,
    var(--fondo);
  touch-action: none;
}
.lienzo.arrastrando { cursor: grabbing; }
.capa { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.capa svg { display: block; box-shadow: 0 2px 12px rgba(20, 40, 25, .18); border-radius: 4px; }
.capa .dc-n:hover rect, .capa .dc-n:hover polygon, .capa .dc-n:hover path { filter: brightness(.96); }
@keyframes resalte { 0%, 60% { stroke: #1f7ae0; stroke-width: 5; } 100% { stroke-width: 1.8; } }
.capa .dc-resalte { animation: resalte 1.6s ease-out; }
.zoom { min-width: 64px; }
.leyenda { margin: 0; padding: 5px 12px; font-size: 12px; color: var(--tinta-2); background: var(--papel-2); border-top: 1px solid var(--linea); }

/* ---------- diálogo y avisos ---------- */
.dialogo { border: 1px solid var(--linea); border-radius: 10px; padding: 18px 20px; width: min(560px, 92vw); background: var(--papel); color: var(--tinta); }
.dialogo::backdrop { background: rgba(10, 20, 14, .45); }
.dialogo h2 { margin: 0 0 6px; font-size: 17px; }
.dialogo p { margin: 0 0 12px; color: var(--tinta-2); font-size: 13px; }
.versiones { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; border-top: 1px solid var(--linea); }
.versiones li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--linea); font-size: 13px; font-variant-numeric: tabular-nums; }
.versiones li.vacio { color: var(--tinta-2); }
.pie { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 4px 0 12px; }
.campos label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.campos select { border: 1px solid var(--linea); border-radius: 6px; padding: 6px; background: var(--papel); font-weight: 400; }
.dialogo p.nota-impr { font-size: 12.5px; margin-bottom: 0; }
.chk-impr { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 0 0 10px; cursor: pointer; }
.chk-impr input { margin-top: 3px; }

.aviso {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  max-width: min(640px, 92vw);
  padding: 10px 16px; border-radius: 8px;
  background: var(--tinta); color: var(--papel);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .25);
  z-index: 10;
}
.aviso[data-tipo="error"] { background: var(--rojo); color: #fff; }
.aviso[data-tipo="ok"] { background: var(--clorofila); color: #fff; }

/* ---------- móvil ---------- */
@media (max-width: 1099px) {
  .area { grid-template-columns: 1fr; }
  body[data-vista="dividida"] .area { grid-template-rows: 55% 45%; }
  body[data-vista="dividida"] .editor { border-right: 0; border-bottom: 1px solid var(--linea); }
}
@media (max-width: 640px) {
  .barra { gap: 8px; padding: 8px 10px; }
  .cuerpo { padding-left: 12px; }
  .acc { opacity: 1; margin-left: auto; }
  .cab { flex-wrap: wrap; }
  .cab .titulo { order: 5; flex-basis: 100%; }
  .hijos { padding-left: 6px; }
  .num { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}