/* ==========================================================================
   Simulador Matriz de Harris · estilos
   ========================================================================== */
:root {
  --fondo: #f1ece2;
  --tarjeta: #fffdf8;
  --tarjeta-2: #f8f3ea;
  --tinta: #2b2118;
  --tinta-2: #6d5a47;
  --tinta-3: #9a8876;
  --borde: #e3d9c7;
  --borde-2: #cdbfa8;
  --acento: #9a5b25;
  --acento-2: #7c4518;
  --acento-suave: #f4e6d4;
  --azul: #1e6ef0;
  --ok: #2e7d32;
  --ok-f: #e8f5e9;
  --medio: #b7791f;
  --medio-f: #fff4d6;
  --error: #c62828;
  --error-f: #fdecea;
  --falta: #8e24aa;
  --dep: #9a6b14;
  --con: #35598f;
  --int: #c62828;
  --sombra: 0 1px 2px rgba(60, 40, 20, .06), 0 4px 14px rgba(60, 40, 20, .07);
  --radio: 12px;
  --fuente: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
  overflow-x: hidden;
}
body.cargando { cursor: progress; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
a { color: var(--acento-2); }
kbd {
  font: 600 11px var(--fuente);
  background: #fff; border: 1px solid var(--borde-2); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 4px;
}
[hidden] { display: none !important; }

/* ---------------- botones ---------------- */
.btn {
  font: 600 13px var(--fuente);
  color: var(--tinta);
  background: #fff;
  border: 1px solid var(--borde-2);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--acento-suave); border-color: var(--acento); }
.btn:focus-visible, .seg:focus-visible, .tarj-dif:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { background: var(--acento); border-color: var(--acento-2); color: #fff; }
.btn.primario:hover:not(:disabled) { background: var(--acento-2); }
.btn.peligro { color: var(--error); }
.btn.peligro:hover:not(:disabled) { background: var(--error-f); border-color: var(--error); }
.btn.activo, .btn-ico.activo { background: #2b2118; border-color: #2b2118; color: #fff; }
.btn.activo:hover { background: #3d3025; color: #fff; }
.btn-link { background: none; border: none; color: var(--acento-2); padding: 4px 0; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover:not(:disabled) { background: none; color: var(--tinta); }
.btn-ico {
  font: 700 16px var(--fuente); line-height: 1;
  width: 30px; height: 30px; padding: 0;
  display: inline-grid; place-items: center;
  border: 1px solid var(--borde-2); border-radius: 8px; background: #fff; cursor: pointer; color: var(--tinta);
}
.btn-ico:hover { background: var(--acento-suave); }
.btn-x {
  border: none; background: none; color: var(--tinta-3); font-size: 18px; line-height: 1;
  cursor: pointer; padding: 0 4px; border-radius: 4px;
}
.btn-x:hover { color: var(--error); background: var(--error-f); }

/* ---------------- cabecera ---------------- */
.barra {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 20px;
  background: #2b2118;
  color: #f6efe3;
  border-bottom: 3px solid var(--acento);
}
.marca { display: flex; align-items: center; gap: 10px; }
.logo { width: 36px; height: 36px; background: #f6efe3; border-radius: 8px; padding: 3px; }
.marca h1 { font-size: 18px; letter-spacing: .2px; }
.marca p { margin: 0; font-size: 12px; color: #cdbfa8; }
.info-yac { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; color: #e8dccb; flex: 1; }
.info-yac .sep { color: #8d7a66; }
.etq-dif { font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: 3px 8px; border-radius: 20px; background: #4a3b2e; color: #fff; }
.etq-dif.dif-facil { background: #2e7d32; }
.etq-dif.dif-medio { background: #b7791f; }
.etq-dif.dif-dificil { background: #c62828; }
.acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.barra .btn:not(.primario) { background: transparent; color: #f6efe3; border-color: #6d5a47; }
.barra .btn:not(.primario):hover { background: #3d3025; }
.selector-idioma { display: inline-flex; border: 1px solid #6d5a47; border-radius: 8px; overflow: hidden; }
.selector-idioma button {
  font: 700 12px var(--fuente); letter-spacing: .5px;
  background: transparent; color: #cdbfa8; border: none; padding: 7px 10px; cursor: pointer;
}
.selector-idioma button + button { border-left: 1px solid #6d5a47; }
.selector-idioma button.activo { background: #f6efe3; color: #2b2118; }
.selector-idioma button:hover:not(.activo) { background: #3d3025; color: #fff; }
.selector-idioma button:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }
.pestanas button em, .leyenda-zonas em { font-style: normal; }

/* ---------------- disposición ---------------- */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  gap: 16px;
  padding: 16px;
  max-width: 1720px;
  margin: 0 auto;
  align-items: start;
}
.col-izq { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col-der {
  position: sticky; top: 12px;
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  display: flex; flex-direction: column;
  max-height: calc(100vh - 24px);
  min-width: 0;
}
.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
  min-width: 0;
}

/* ---------------- perfil ---------------- */
.barra-herr {
  display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--borde); background: var(--tarjeta-2);
}
.grupo-herr { display: flex; gap: 6px; flex-wrap: wrap; }
.btn-herr { font-size: 12.5px; padding: 6px 10px; }
.leyenda-zonas { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--tinta-2); }
.leyenda-zonas span { display: inline-flex; align-items: center; gap: 6px; }
.lz { display: inline-block; width: 22px; height: 0; border-top: 3px solid; }
.lz.corte { border-color: #c62828; }
.lz.horiz { border-color: #1976d2; }
.lz.vert { border-color: #2e7d32; }
.lz.sup { border-color: #5a5a5a; }
.perfil-caja { position: relative; padding: 6px; display: flex; justify-content: center; background: #fbf8f1; }
#perfil { display: block; width: 100%; height: auto; border-radius: 6px; touch-action: manipulation; }
body[data-tab="matriz"] #perfil { width: auto; max-width: 100%; height: 36vh; min-height: 220px; }
#perfil.modo-buscar { cursor: crosshair !important; }
.tooltip {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(34, 25, 17, .94); color: #fbf5ea;
  font-size: 12.5px; line-height: 1.4;
  padding: 7px 10px; border-radius: 8px; max-width: 260px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
}
.tooltip small { color: #d8c8b2; }
.tooltip .tip-zona { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, .15); }
.aviso-herr {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  background: #2b2118; color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 6px 12px; border-radius: 20px; box-shadow: 0 3px 12px rgba(0, 0, 0, .2);
  max-width: 90%; text-align: center; pointer-events: none;
}

/* ---------------- zona inferior ---------------- */
.inferior { padding: 0; }
.inf-cab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px 8px;
}
.inf-cab h2 { font-size: 15px; }
.nota { color: var(--tinta-2); font-size: 12.5px; margin: 4px 0; }
.tabla-host { max-height: 440px; overflow: auto; border-top: 1px solid var(--borde); }
.tabla-datos { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-datos th {
  position: sticky; top: 0; z-index: 1;
  background: var(--tarjeta-2); text-align: left; font-weight: 700; font-size: 12px;
  color: var(--tinta-2); padding: 7px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla-datos td { padding: 6px 10px; border-bottom: 1px solid #efe7da; vertical-align: top; }
.tabla-datos tr[data-id] { cursor: pointer; }
.tabla-datos tr[data-id]:hover td { background: #faf4ea; }
.tabla-datos tr.sel td { background: #e7f0ff; }
.tabla-datos td.num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--tinta-2); }
.tabla-rel td:not(:first-child) { color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.gris { color: var(--tinta-3); }
.pastilla { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 8px; border-radius: 12px; border: 1px solid; }
.pastilla.cat-deposito { color: var(--dep); background: #fff4d6; }
.pastilla.cat-construccion { color: var(--con); background: #e3ecf7; }
.pastilla.cat-interfaz { color: var(--int); background: var(--error-f); border-style: dashed; }
.st-pill { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 12px; }
.st-pill.st-ok { background: var(--ok-f); color: var(--ok); }
.st-pill.st-medio { background: var(--medio-f); color: var(--medio); }
.st-pill.st-error { background: var(--error-f); color: var(--error); }
.st-pill.st-vacio { background: #eee; color: #777; }
.st-txt { font-weight: 700; padding: 0 2px; border-radius: 3px; }
.st-txt.st-ok { color: var(--ok); }
.st-txt.st-tipo { color: var(--medio); }
.st-txt.st-invertida, .st-txt.st-indirecta, .st-txt.st-error { color: var(--error); text-decoration: line-through; }

/* editor de matriz */
.zoom-btns { display: flex; gap: 6px; }
.paleta {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 8px 14px; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  background: var(--tarjeta-2); min-height: 46px;
}
.paleta-titulo { font-size: 12px; font-weight: 700; color: var(--tinta-2); margin-right: 4px; }
.paleta-vacia { font-size: 12.5px; color: var(--ok); font-weight: 600; }
.chip-ue {
  font: 700 12.5px var(--fuente);
  min-width: 40px; padding: 5px 9px;
  border: 1.5px solid #6d4c2f; border-radius: 5px; background: #fffaf0; cursor: grab; color: var(--tinta);
  touch-action: none;
}
.chip-ue:hover { box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
.chip-ue.cat-construccion { border-color: var(--con); background: #eef3fa; }
.chip-ue.cat-interfaz { border-color: var(--int); border-style: dashed; background: #fff; }
.fantasma-ue {
  position: fixed; z-index: 100; pointer-events: none;
  width: 60px; height: 34px; display: flex; align-items: center; justify-content: center;
  font: 700 13px var(--fuente); background: #fffaf0; border: 1.5px solid #6d4c2f; border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25); opacity: .92;
}
.editor-host { position: relative; height: max(520px, 64vh); background: #fffdf8; }
.hm-editor-svg { width: 100%; height: 100%; display: block; cursor: grab; outline: none; touch-action: none; }
.hm-editor-svg.arrastrando { cursor: grabbing; }
.eje-tiempo {
  display: flex; justify-content: space-between; padding: 4px 14px 8px; font-size: 11.5px; color: var(--tinta-3);
  border-top: 1px dashed var(--borde);
}
.eje-tiempo span::before { content: '▲ '; }
.eje-tiempo span:last-child::before { content: '▼ '; }

/* cajas SVG (editor y solución) */
.hm-caja { fill: #fffaf0; stroke: #6d4c2f; stroke-width: 1.4; }
.hm-caja.cat-construccion { fill: #eef3fa; stroke: #35598f; stroke-width: 1.6; }
.hm-caja-int { fill: none; stroke: #35598f; stroke-width: .8; pointer-events: none; }
.hm-caja.cat-interfaz { fill: #fff; stroke: #c62828; stroke-dasharray: 5 3; stroke-width: 1.6; }
.hm-num { font: 700 13px var(--fuente); text-anchor: middle; dominant-baseline: middle; fill: #1d140c; pointer-events: none; }
.hm-sub { font: 9.5px var(--fuente); text-anchor: middle; dominant-baseline: middle; fill: #6d5a47; pointer-events: none; }
.hm-nodo { cursor: move; }
.hm-nodo:hover .hm-caja { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.hm-nodo.sel .hm-caja { stroke: var(--azul); stroke-width: 2.6; }
.hm-nodo.destino .hm-caja { stroke: var(--falta); stroke-width: 3; }
.hm-nodo.ev-error .hm-caja { stroke: var(--error); stroke-width: 2.6; fill: var(--error-f); }
.hm-asa { fill: #fff; stroke: #2b1d12; stroke-width: 1.4; cursor: crosshair; opacity: 0; transition: opacity .12s; }
.hm-asa-eq { cursor: crosshair; opacity: 0; transition: opacity .12s; }
.hm-asa-eq rect { fill: #fff; stroke: #2b1d12; stroke-width: 1.2; }
.hm-asa-eq text { font: 700 12px var(--fuente); text-anchor: middle; dominant-baseline: middle; fill: #2b1d12; pointer-events: none; }
.hm-nodo:hover .hm-asa, .hm-nodo.sel .hm-asa, .hm-nodo:hover .hm-asa-eq, .hm-nodo.sel .hm-asa-eq { opacity: 1; }
.hm-asa:hover { fill: var(--azul); stroke: var(--azul); }
.hm-asa-eq:hover rect { fill: #e7f0ff; stroke: var(--azul); }
.hm-ar { cursor: pointer; }
.hm-ar-hit { fill: none; stroke: transparent; stroke-width: 12; }
.hm-ar-linea { fill: none; stroke: #2b1d12; stroke-width: 1.5; }
.hm-ar:hover .hm-ar-linea { stroke-width: 2.4; }
.hm-ar.sel .hm-ar-linea, .hm-eq.sel .hm-igual { stroke: var(--azul); stroke-width: 2.6; }
.hm-ar.invertida .hm-ar-linea { stroke: var(--error); stroke-dasharray: 6 4; }
.hm-igual { stroke: #2b1d12; stroke-width: 1.4; }
.hm-eq { cursor: pointer; }
.ev-ok .hm-ar-linea, .ev-ok .hm-igual { stroke: var(--ok); stroke-width: 2; }
.ev-redundante .hm-ar-linea { stroke: #e08a00; stroke-dasharray: 6 3; stroke-width: 2; }
.ev-error .hm-ar-linea, .ev-error .hm-igual { stroke: var(--error); stroke-width: 2; }
.hm-faltante { stroke: var(--falta); stroke-dasharray: 4 4; stroke-width: 1.8; pointer-events: none; }
.hm-temp { stroke: var(--azul); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }
.hm-temp.igual { stroke: var(--falta); }
.sol-host { overflow: auto; max-height: 720px; border-top: 1px solid var(--borde); background: #fffdf8; }
.hm-svg-sol { display: block; margin: 0 auto; }
.hm-banda.impar { fill: #f6f0e4; }
.hm-banda.par { fill: #fbf7ef; }
.hm-fase { font: 700 14px var(--fuente); fill: #3d2f22; }
.hm-fase-sub { font: 11px var(--fuente); fill: #6d5a47; }
.hm-arista { fill: none; stroke: #2b1d12; stroke-width: 1.4; }
.hm-nodo-sol { cursor: pointer; }
.hm-nodo-sol:hover .hm-caja { stroke-width: 2.4; }
.hm-nodo-sol.sel .hm-caja { stroke: var(--azul); stroke-width: 3; }

/* ---------------- panel lateral ---------------- */
.pestanas { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--borde); }
.pestanas button {
  font: 600 12.5px var(--fuente); color: var(--tinta-2);
  background: none; border: none; border-bottom: 3px solid transparent;
  padding: 12px 4px 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.pestanas button span {
  width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tarjeta-2); border: 1px solid var(--borde-2); font-size: 11.5px; font-weight: 700;
}
.pestanas button:hover { color: var(--tinta); background: var(--tarjeta-2); }
.pestanas button.activa { color: var(--acento-2); border-bottom-color: var(--acento); }
.pestanas button.activa span { background: var(--acento); border-color: var(--acento); color: #fff; }
.panel { padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.pie-panel { border-top: 1px solid var(--borde); padding: 6px 14px; text-align: right; }
.pie-panel .btn-link { font-size: 12px; color: var(--tinta-3); }
.intro { font-size: 13px; color: var(--tinta-2); background: var(--tarjeta-2); border-radius: 8px; padding: 9px 11px; border-left: 3px solid var(--acento); }
.progreso-txt { font-size: 12px; font-weight: 600; color: var(--tinta-2); margin-bottom: 4px; }
.barra-prog { height: 7px; background: #ece3d4; border-radius: 6px; overflow: hidden; }
.barra-prog div { height: 100%; background: linear-gradient(90deg, #b07a3f, #9a5b25); border-radius: 6px; transition: width .3s; }
.caja-buscar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff7ec; border: 1px dashed var(--acento); border-radius: 8px; padding: 9px 11px; font-size: 13px;
}
.vacio { text-align: center; color: var(--tinta-3); padding: 18px 10px; border: 1px dashed var(--borde-2); border-radius: 10px; }
.vacio-ico { font-size: 30px; line-height: 1; margin-bottom: 6px; }
.vacio p { margin: 0; }
.ficha { border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: #fff; }
.ficha-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; background: var(--tarjeta-2); border-bottom: 1px solid var(--borde); }
.ficha-cab h3 { font-size: 15px; }
.ficha-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ficha-tabla th { text-align: left; color: var(--tinta-2); font-weight: 600; padding: 5px 10px; width: 38%; vertical-align: top; }
.ficha-tabla td { padding: 5px 10px 5px 0; }
.ficha-tabla tr + tr th, .ficha-tabla tr + tr td { border-top: 1px solid #f1eadf; }
.ficha-plegable summary { cursor: pointer; padding: 7px 10px; font-size: 12.5px; font-weight: 600; color: var(--acento-2); }
.clasif { display: flex; flex-direction: column; gap: 8px; }
.clasif-tit, .sub-tit { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tinta-2); }
.sub-tit { padding: 8px 10px 2px; }
.segmentado { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.seg {
  font: 700 12.5px var(--fuente); padding: 9px 4px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--borde-2); background: #fff; color: var(--tinta-2);
}
.seg.cat-deposito.activo { background: #fff4d6; border-color: var(--dep); color: var(--dep); }
.seg.cat-construccion.activo { background: #e3ecf7; border-color: var(--con); color: var(--con); }
.seg.cat-interfaz { border-style: dashed; }
.seg.cat-interfaz.activo { background: var(--error-f); border-color: var(--int); color: var(--int); }
.seg:hover { border-color: var(--tinta-2); }
.ayuda-cat { font-size: 12px; color: var(--tinta-2); }
select, input[type=number] {
  font: 13px var(--fuente); color: var(--tinta);
  padding: 7px 8px; border: 1px solid var(--borde-2); border-radius: 8px; background: #fff; min-width: 0;
}
select:disabled { background: #f4f0e8; color: var(--tinta-3); }
.sel-interp { width: 100%; }
.estado-linea { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px; }
.estado-linea.st-ok { background: var(--ok-f); color: var(--ok); }
.estado-linea.st-medio { background: var(--medio-f); color: var(--medio); }
.estado-linea.st-error { background: var(--error-f); color: var(--error); }
.acciones-panel { display: flex; gap: 8px; }
.acciones-panel .btn { flex: 1; padding: 10px; }
.resultado {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center;
  border: 1px solid var(--borde); border-radius: 10px; padding: 12px; background: #fff;
}
.resultado > :nth-child(n+3) { grid-column: 1 / -1; }
.nota-grande { display: flex; align-items: baseline; gap: 2px; }
.nota-grande span { font-size: 38px; font-weight: 800; line-height: 1; }
.nota-grande small { color: var(--tinta-3); font-weight: 600; }
.alta { color: var(--ok); }
.media { color: var(--medio); }
.baja { color: var(--error); }
.res-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px 10px; font-size: 12.5px; }
.res-lista li::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: #bbb; }
.res-lista li.st-ok::before { background: var(--ok); }
.res-lista li.st-medio::before { background: var(--medio); }
.res-lista li.st-error::before { background: var(--error); }
.res-lista li.st-vacio::before { background: var(--falta); }
.aviso-err { color: var(--error); font-weight: 600; font-size: 12.5px; margin: 4px 0; }
.aviso-med { color: var(--medio); font-weight: 600; font-size: 12.5px; margin: 4px 0; }
.lista-rel { list-style: none; margin: 0; padding: 4px 10px 8px; display: flex; flex-direction: column; gap: 4px; }
.lista-rel li { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 4px 8px; border-radius: 6px; background: var(--tarjeta-2); }
.lista-rel li.vacia { background: none; color: var(--tinta-3); font-style: italic; }
.lista-rel .rel-txt { flex: 1; }
.lista-rel li.st-ok { background: var(--ok-f); }
.lista-rel li.st-tipo { background: var(--medio-f); }
.lista-rel li.st-invertida, .lista-rel li.st-indirecta, .lista-rel li.st-error { background: var(--error-f); }
.rel-est { font-weight: 800; }
.st-ok .rel-est { color: var(--ok); }
.st-tipo .rel-est { color: var(--medio); }
.st-invertida .rel-est, .st-indirecta .rel-est, .st-error .rel-est { color: var(--error); }
.form-rel { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 10px; border-top: 1px solid var(--borde); background: var(--tarjeta-2); }
.form-suj { font-weight: 700; font-size: 13px; }
.form-rel .sel-op { flex: 1 1 110px; }
.form-rel .sel-dest { flex: 0 1 90px; }
.leyenda-simbolos { font-size: 11.5px; }
.botonera { display: flex; flex-wrap: wrap; gap: 6px; }
.botonera.fin { justify-content: flex-end; }
.botonera .btn { font-size: 12.5px; padding: 6px 10px; }
.sel-info { border: 1px solid var(--borde); border-radius: 10px; padding: 10px; background: #fff; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.guia-editor ul { margin: 6px 0 0; padding-left: 18px; color: var(--tinta-2); font-size: 12.5px; }
.guia-editor li { margin: 3px 0; }
.asa-muestra { display: inline-block; width: 11px; height: 11px; border: 1.5px solid #2b1d12; border-radius: 50%; vertical-align: -1px; background: #fff; }
.check { display: flex; gap: 6px; align-items: center; font-size: 12.5px; cursor: pointer; }
.leyenda-mat { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--tinta-2); }
.leyenda-mat span { display: inline-flex; align-items: center; gap: 6px; }
.cj { width: 22px; height: 13px; display: inline-block; border: 1.5px solid; border-radius: 2px; }
.cj.dep { border-color: #6d4c2f; background: #fffaf0; }
.cj.con { border-color: var(--con); background: #eef3fa; box-shadow: inset 0 0 0 2px #eef3fa, inset 0 0 0 3px var(--con); }
.cj.int { border-color: var(--int); border-style: dashed; background: #fff; }
.cj.sin { border-color: #6d4c2f; background: #fffaf0; opacity: .6; }
.marcador { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 6px; }
.caja-numerar {
  display: flex; flex-direction: column; gap: 6px;
  border: 1.5px solid #b48ad0; background: #faf5fd; border-radius: 10px; padding: 10px;
}
.caja-numerar .clasif-tit { color: #5b2c7a; }
.fila-num { display: flex; gap: 6px; align-items: center; }
.inp-num {
  flex: 1; min-width: 0; font: 700 14px var(--fuente); color: #4a1f66;
  padding: 7px 9px; border: 1px solid #b48ad0; border-radius: 8px; background: #fff;
}
.inp-num:focus { outline: 2px solid #7b3fa0; outline-offset: 1px; }
.nota.pad { padding: 8px 12px; margin: 0; }
.marc-item { text-align: center; border: 1px solid var(--borde); border-radius: 10px; padding: 8px 4px; background: #fff; display: flex; flex-direction: column; }
.marc-item.total { background: #2b2118; color: #fff; border-color: #2b2118; }
.marc-n { font-size: 24px; font-weight: 800; line-height: 1.1; }
.marc-item small { font-size: 11px; color: var(--tinta-2); }
.marc-item.total small { color: #d8c8b2; }
.opciones-sol { display: flex; flex-direction: column; gap: 7px; }
.sol-ue { padding: 8px 10px; font-size: 13px; }
.historia h3 { font-size: 15px; margin-bottom: 6px; }
.hist-fase { font-size: 12.5px; margin-top: 8px; padding: 3px 0 3px 8px; border-left: 4px solid; color: var(--tinta-2); }
.hist-lista { margin: 4px 0 0; padding-left: 22px; font-size: 12.5px; }
.hist-lista li { margin: 3px 0; }
.enlace-ue { font-weight: 700; color: var(--acento-2); text-decoration: none; border-bottom: 1px dotted; }

/* ---------------- menú, modal, toast ---------------- */
.menu-rel {
  position: fixed; z-index: 60; width: 250px;
  background: #fff; border: 1px solid var(--borde-2); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(40, 25, 10, .25); padding: 6px; display: flex; flex-direction: column;
}
.menu-rel .menu-tit { font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: var(--tinta-3); padding: 4px 8px 6px; }
.menu-rel button { font: 13px var(--fuente); text-align: left; border: none; background: none; padding: 6px 8px; border-radius: 6px; cursor: pointer; color: var(--tinta); }
.menu-rel button:hover { background: var(--acento-suave); }
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(30, 20, 12, .55); display: grid; place-items: center; padding: 16px; }
.modal-caja {
  position: relative; width: min(900px, 100%); max-height: 90vh; overflow: hidden;
  background: var(--tarjeta); border-radius: 14px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); display: flex;
}
.modal-cuerpo { overflow-y: auto; padding: 26px 30px; width: 100%; }
.modal-cerrar {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--borde-2); background: #fff;
  font-size: 22px; line-height: 1; cursor: pointer; color: var(--tinta-2);
}
.modal-cerrar:hover { background: var(--error-f); color: var(--error); }
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 20px); z-index: 90;
  background: #2b2118; color: #fff; font-weight: 600; font-size: 13.5px;
  padding: 10px 16px; border-radius: 10px; box-shadow: 0 8px 26px rgba(0, 0, 0, .3);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; max-width: min(560px, 92vw); text-align: center;
}
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.toast.ok { background: var(--ok); }
.toast.error { background: var(--error); }

/* formulario nuevo yacimiento */
.form-nuevo h2 { font-size: 22px; margin-bottom: 4px; }
.tarjetas-dif { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0; }
.tarj-dif {
  text-align: left; font: 13px var(--fuente); color: var(--tinta-2);
  border: 2px solid var(--borde); border-radius: 12px; padding: 12px; background: #fff; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; border-top-width: 5px;
}
.tarj-dif strong { font-size: 15px; color: var(--tinta); }
.tarj-dif.dif-facil { border-top-color: var(--ok); }
.tarj-dif.dif-medio { border-top-color: var(--medio); }
.tarj-dif.dif-dificil { border-top-color: var(--error); }
.tarj-dif.activa { border-color: var(--acento); background: var(--acento-suave); box-shadow: 0 0 0 2px var(--acento) inset; }
.fila-semilla { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.fila-semilla label { font-weight: 600; }
.inp-semilla { width: 120px; }
.lista-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
.opcion { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--borde); border-radius: 10px; padding: 10px; cursor: pointer; background: #fff; }
.opcion input { margin-top: 3px; }
.opcion strong { display: block; font-size: 13.5px; }
.opcion small { color: var(--tinta-2); font-size: 12px; }

/* ---------------- teoría ---------------- */
.teoria { max-width: 780px; margin: 0 auto; font-size: 14.5px; line-height: 1.6; }
.teoria h2 { font-size: 26px; margin-bottom: 10px; color: var(--acento-2); }
.teoria h3 { font-size: 17px; margin: 26px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--acento-suave); }
.teoria p { margin: 8px 0; }
.tabla-teoria { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13.5px; }
.tabla-teoria th { background: var(--tarjeta-2); text-align: left; padding: 7px 10px; border-bottom: 2px solid var(--borde-2); }
.tabla-teoria td { padding: 7px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.muestra { display: inline-block; width: 14px; height: 10px; margin-right: 6px; border: 1.5px solid; vertical-align: 0; }
.muestra.dep { border-color: #6d4c2f; background: #fffaf0; }
.muestra.con { border-color: var(--con); background: #eef3fa; }
.muestra.int { border-color: var(--int); border-style: dashed; }
.clave { background: #fff4d6; border-left: 4px solid var(--medio); padding: 10px 14px; border-radius: 8px; margin: 12px 0; }
.leyes li { margin: 8px 0; }
.glosario { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; }
.glosario dt { font-weight: 700; }
.glosario dd { margin: 0; color: var(--tinta-2); }
.ejemplo-svg { width: 100%; height: auto; background: #fff; border: 1px solid var(--borde); border-radius: 10px; margin: 8px 0; }
.ej-tit { font: 700 13px var(--fuente); fill: var(--tinta-2); }
.ej-etq rect { fill: #fffdf7; stroke: #2b1d12; }
.ej-etq text, .ej-mat text { font: 700 12px var(--fuente); text-anchor: middle; dominant-baseline: middle; fill: #1d140c; }
.ej-mat rect { fill: #fffaf0; stroke: #6d4c2f; stroke-width: 1.4; }
.ej-mat rect.ej-int { fill: #fff; stroke: #c62828; stroke-dasharray: 5 3; }
.ej-mat line { stroke: #2b1d12; stroke-width: 1.5; }
.ej-mat .ej-red { fill: none; stroke: #b0a090; stroke-width: 1.4; stroke-dasharray: 3 4; }
.ej-mat .ej-nota { font: 11px var(--fuente); text-anchor: start; fill: #8a7766; }
.pasos { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.paso { display: flex; gap: 12px; align-items: flex-start; background: var(--tarjeta-2); border-radius: 10px; padding: 12px; }
.paso > span { flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--acento); color: #fff; font-weight: 800; display: grid; place-items: center; }
.leyenda-lista { list-style: none; padding: 0; }
.leyenda-lista li { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.lin { width: 34px; height: 0; border-top: 3px solid; flex: 0 0 34px; }
.lin.ok { border-color: var(--ok); }
.lin.red { border-color: #e08a00; border-top-style: dashed; }
.lin.err { border-color: var(--error); }
.lin.falt { border-color: var(--falta); border-top-style: dotted; }

/* ---------------- adaptable ---------------- */
@media (max-width: 1180px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .col-izq { display: contents; }
  .col-izq > .tarjeta:first-child { order: 1; }
  .col-der { position: static; max-height: none; order: 2; }
  .col-izq > .inferior { order: 3; }
  .panel { max-height: 75vh; }
  body[data-tab="matriz"] #perfil { height: auto; width: 100%; }
}
@media (max-width: 640px) {
  .app { padding: 10px; gap: 10px; }
  .barra { padding: 10px 12px; }
  .info-yac { order: 3; flex-basis: 100%; }
  .tarjetas-dif, .lista-opciones { grid-template-columns: 1fr; }
  .modal-cuerpo { padding: 20px 16px; }
  .editor-host { height: 460px; }
  .res-lista { grid-template-columns: 1fr; }
  .marcador { grid-template-columns: repeat(2, 1fr); }
}