:root{
  --verde:#0e9f6e; --verde-osc:#0a7a54; --verde-prof:#064e3b;
  --menta:#e3f5ec; --menta-claro:#f2fbf7; --menta-borde:#c6ecdb;
  --tinta:#0f2119; --gris:#526b5c; --linea:#dce7e0;
  --ambar:#b45309; --rojo:#b91c1c;
  --radio:11px;
  --sombra:0 1px 2px rgba(6,78,59,.05),0 8px 24px rgba(6,78,59,.06);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:#f2f7f4;color:var(--tinta);
  font:14px/1.6 system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  display:flex;flex-direction:column;overflow:hidden;
}

/* ---------- cabecera ---------- */
.cab{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:9px 16px;background:#0b1f17;color:#fff;flex:none}
.cab__izq{display:flex;align-items:center;gap:14px;min-width:0}
.logo{display:flex;align-items:center;gap:8px;color:#fff;text-decoration:none;font-weight:800;font-size:15px}
.logo__m{background:linear-gradient(135deg,var(--verde),var(--verde-prof));padding:3px 8px;border-radius:6px;font-size:13px;letter-spacing:.5px}
.cab__sep{color:#3d6353}
.cab__aqui{color:#cfe8dc;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab__der{display:flex;gap:8px;flex:none}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid var(--linea);background:#fff;color:var(--tinta);
  padding:8px 14px;border-radius:9px;cursor:pointer;font:inherit;font-weight:600;
  text-decoration:none;white-space:nowrap;transition:.14s;
}
.btn:hover:not(:disabled){border-color:#a9c9b8;background:#f7fbf9}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn--pri{background:var(--verde-osc);border-color:var(--verde-osc);color:#fff}
.btn--pri:hover:not(:disabled){background:var(--verde-prof);border-color:var(--verde-prof)}
.btn--fantasma{background:transparent;border-color:#2c5546;color:#cfe8dc}
.btn--fantasma:hover{background:#153026;border-color:#3d6353}
.btn--bloque{width:100%}
.btn--mini{padding:4px 10px;font-size:12.5px;font-weight:500}

/* ---------- estructura ---------- */
.taller{flex:1;display:flex;flex-direction:column;min-height:0}
.taller__cuerpo{flex:1;display:flex;min-height:0}
.herr{flex:1;display:flex;min-height:0}
.panel{
  width:330px;flex:none;background:#fff;border-right:1px solid var(--linea);
  overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;
}
.panel h1{font-size:18px;margin:0 0 5px;letter-spacing:-.015em}
.panel .lead{color:var(--gris);font-size:12.8px;margin:0;line-height:1.5}
.panel .lead strong{color:var(--tinta)}

.zona{
  border:2px dashed #b9d6c7;border-radius:var(--radio);padding:14px 12px;text-align:center;
  color:var(--gris);font-size:13px;cursor:pointer;transition:.15s;background:var(--menta-claro);
}
/* Con imagen cargada la caja grande ya no aporta: se queda en una linea */
.zona.cargada{
  display:flex;align-items:center;gap:8px;text-align:left;padding:8px 11px;
  border-style:solid;border-color:var(--menta-borde);
}
.zona.cargada b{margin:0;font-size:13px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zona.cargada .zona__cambiar{font-size:11.5px;color:var(--verde-osc);font-weight:600;flex:none}
.zona:hover,.zona.encima{border-color:var(--verde);background:var(--menta);color:var(--verde-prof)}
.zona b{display:block;color:var(--tinta);font-size:14.5px;margin-bottom:3px}

.bloque{border-top:1px solid var(--linea);padding-top:12px}
.bloque > h2{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--gris);margin:0 0 10px}

.ctrl{margin-bottom:15px}
.ctrl:last-child{margin-bottom:0}
.ctrl__cab{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:5px}
.ctrl label{font-size:13px;font-weight:600;color:var(--tinta)}
.ctrl__val{font-size:12.5px;color:var(--verde-osc);font-weight:700;font-variant-numeric:tabular-nums}
.ctrl__ayuda{font-size:11.8px;color:var(--gris);margin:5px 0 0;line-height:1.5}
.ctrl input[type=range]{width:100%;accent-color:var(--verde-osc);margin:2px 0}
.ctrl select,.ctrl input[type=number],.ctrl input[type=color],.ctrl input[type=text]{
  width:100%;padding:7px 9px;border:1px solid var(--linea);border-radius:8px;font:inherit;background:#fff;color:var(--tinta)
}
.ctrl input[type=color]{height:36px;padding:3px}
/* La caja de la explicacion pide el 100% de ancho. Sin permitir salto
   de linea se quedaba en la misma fila y aplastaba a la etiqueta, que
   salia partida en tres lineas dentro de una columna estrechisima. */
.ctrl--check{display:flex;align-items:flex-start;gap:9px;flex-wrap:wrap}
.ctrl--check > label{flex:1 1 0;min-width:0}
.ctrl--check input{margin-top:3px;accent-color:var(--verde-osc)}

.ficha{background:var(--menta-claro);border:1px solid var(--menta-borde);border-radius:var(--radio);padding:8px 11px;font-size:12px}
.ficha__linea{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.ficha__dato{white-space:nowrap;color:var(--gris)}
.ficha__dato b{color:var(--verde-prof);font-variant-numeric:tabular-nums}
.ficha__fila{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.ficha__fila b{font-variant-numeric:tabular-nums;color:var(--verde-prof)}
.marcas{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.marca{font-size:10.5px;padding:2px 8px;border-radius:99px;border:1px solid;font-weight:600}
.marca--ok{color:#15803d;border-color:#bce6cd;background:#f1fbf5}
.marca--avi{color:var(--ambar);border-color:#f2ddb0;background:#fffaef}
.marca--mal{color:var(--rojo);border-color:#f3c4c4;background:#fdf3f3}

.acciones{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:16px;border-top:1px solid var(--linea)}

/* ---------- vista ---------- */
.vista{flex:1;display:flex;flex-direction:column;min-width:0;background:#e9f0ec}
.vista__barra{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:9px 16px;background:#fff;border-bottom:1px solid var(--linea);flex:none;
}
.grupo{display:flex;align-items:center;gap:7px}
.grupo__tit{font-size:11.5px;color:var(--gris);font-weight:600}
.fondos{display:flex;gap:4px}
.fondo{width:26px;height:26px;border-radius:7px;border:2px solid var(--linea);cursor:pointer;padding:0}
.fondo.activo{border-color:var(--verde-osc);box-shadow:0 0 0 2px var(--menta)}
.fondo--cuadros{background-image:linear-gradient(45deg,#dde5e0 25%,transparent 25%,transparent 75%,#dde5e0 75%),linear-gradient(45deg,#dde5e0 25%,#fff 25%,#fff 75%,#dde5e0 75%);background-size:10px 10px;background-position:0 0,5px 5px}
.vista__barra .crece{flex:1}

.lienzos{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linea);min-height:0}
.lienzos.solo{grid-template-columns:1fr}
.marco{position:relative;overflow:hidden;display:flex;flex-direction:column;background:#e9f0ec;min-width:0}
.marco__tit{
  position:absolute;top:9px;left:9px;z-index:2;background:rgba(11,31,23,.78);color:#fff;
  font-size:11px;font-weight:700;padding:3px 9px;border-radius:99px;letter-spacing:.04em;text-transform:uppercase;
}
.marco canvas{flex:1;width:100%;height:100%;display:block;cursor:grab}
.marco canvas:active{cursor:grabbing}
.vacio{flex:1;display:flex;align-items:center;justify-content:center;color:var(--gris);font-size:14px;text-align:center;padding:26px}

/* ---------- progreso y avisos ---------- */
.barra{height:6px;background:var(--menta);border-radius:99px;overflow:hidden;margin-top:9px}
.barra i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--verde),var(--verde-prof));transition:width .15s}
.nota{font-size:12px;color:var(--gris);margin:6px 0 0;min-height:1.4em}
.aviso{
  background:#fffaef;border:1px solid #f2ddb0;color:#7c4a03;border-radius:var(--radio);
  padding:11px 13px;font-size:12.5px;line-height:1.55;
}
.aviso b{color:#5c3703}

.toast{
  position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;
  background:#0b1f17;color:#fff;padding:9px 17px;border-radius:99px;font-size:13px;
  box-shadow:0 8px 24px rgba(6,78,59,.28);
}
.toast.mal{background:#8f1d1d}

@media (max-width:880px){
  body{overflow:auto}
  .herr{flex-direction:column}
  .panel{width:auto;border-right:0;border-bottom:1px solid var(--linea)}
  .lienzos{grid-template-columns:1fr;min-height:60vh}
}

/* Estado de sesion en la cabecera */
.auth-caja{display:inline-flex;align-items:center}
.auth-admin,.auth-plan{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:99px;margin-left:6px}
.auth-admin{background:#0b1f17;color:#6ee7b7}
.auth-plan{background:#d1fae5;color:#064e3b}

/* ---------- menu de herramientas ---------- */
.menuh{background:#fff;border-bottom:1px solid var(--linea);flex:none;overflow-x:auto}
.menuh__tira{display:flex;gap:4px;padding:8px 12px;min-width:max-content}
.menuh__op{
  display:flex;align-items:center;gap:8px;border:1px solid transparent;background:transparent;
  padding:9px 15px;border-radius:10px;cursor:pointer;font:inherit;font-size:14px;font-weight:600;
  color:var(--gris);white-space:nowrap;transition:.14s;
}
.menuh__op:hover{background:var(--menta-claro);color:var(--verde-prof)}
.menuh__op.activa{background:var(--verde-osc);color:#fff;border-color:var(--verde-osc)}
.menuh__ico{font-size:17px;line-height:1}
@media (max-width:880px){
  .menuh__txt{display:none}
  .menuh__op{padding:10px 14px}
  .menuh__ico{font-size:20px}
  .taller__cuerpo{flex-direction:column}
}

/* ---------- tamaño de impresion ---------- */
.tam__fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tam__fila label{font-size:12px;font-weight:600;color:var(--tinta)}
.tam__fila input{width:100%;margin-top:4px;padding:7px 9px;border:1px solid var(--linea);border-radius:8px;font:inherit;background:#fff;color:var(--tinta)}
.tam__fila input:focus{outline:2px solid var(--menta-borde);border-color:var(--verde)}
.tam__ppp{margin:10px 0 0;font-size:12.5px;padding:7px 10px;border-radius:8px;border:1px solid}
.tam__ppp--ok{background:#f1fbf5;border-color:#bce6cd;color:#15803d}
.tam__ppp--avi{background:#fffaef;border-color:#f2ddb0;color:#7c4a03}
.tam__ppp--mal{background:#fdf3f3;border-color:#f3c4c4;color:#8f1d1d}

/* ---------- colores elegidos ---------- */
.muestras{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px;min-height:28px;align-items:center}
.muestra{
  width:28px;height:28px;border-radius:7px;border:2px solid var(--linea);cursor:pointer;padding:0;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.muestra:hover{border-color:var(--rojo)}
.muestras__vacio{font-size:12px;color:var(--gris)}

/* ---------- avisos calculados ---------- */
.avanzado{margin-top:18px;border-top:1px solid var(--linea);padding-top:12px}
.avanzado>summary{cursor:pointer;list-style:none;font-weight:600;font-size:14px;color:var(--verde-osc);padding:4px 0;user-select:none}
.avanzado>summary::-webkit-details-marker{display:none}
.avanzado>summary::before{content:'▸ '}
.avanzado[open]>summary::before{content:'▾ '}
.avanzado>summary:hover{text-decoration:underline}
.nota-viva{margin-top:12px}
.nota-viva__caja{font-size:12.5px;line-height:1.55;padding:9px 11px;border-radius:8px;border:1px solid}
.nota-viva__caja--ok{background:#f1fbf5;border-color:#bce6cd;color:#15803d}
.nota-viva__caja--avi{background:#fffaef;border-color:#f2ddb0;color:#7c4a03}
.nota-viva__caja--mal{background:#fdf3f3;border-color:#f3c4c4;color:#8f1d1d}
.hexfila{display:flex;gap:6px;margin-top:8px}
.hexfila input{flex:1;padding:6px 9px;border:1px solid var(--linea);border-radius:8px;font:inherit;font-size:13px}
.hexfila input:focus{outline:2px solid var(--menta-borde);border-color:var(--verde)}

/* ---------- escoger color en la imagen ---------- */
.pincha{
  width:100%;justify-content:center;gap:8px;margin-bottom:9px;
  background:var(--menta-claro);border-color:var(--menta-borde);color:var(--verde-prof);
}
.pincha:hover{background:var(--menta);border-color:var(--verde)}
.pincha.activo{background:var(--verde-osc);border-color:var(--verde-osc);color:#fff}
.pincha.activo:hover{background:var(--verde-prof)}
.marco.pinchando{outline:3px solid var(--verde-osc);outline-offset:-3px}
.marco__pista{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
  background:var(--verde-osc);color:#fff;font-size:12px;font-weight:600;
  padding:6px 14px;border-radius:99px;white-space:nowrap;pointer-events:none;
  box-shadow:0 4px 14px rgba(6,78,59,.3);
}

/* ---------- ayuda plegable ---------- */
.ayuda-btn{
  width:16px;height:16px;flex:none;margin-left:6px;padding:0;border-radius:50%;
  border:1px solid var(--menta-borde);background:var(--menta-claro);color:var(--verde-osc);
  font:600 11px/1 system-ui;cursor:pointer;vertical-align:middle;
}
.ayuda-btn:hover{background:var(--menta);border-color:var(--verde)}
.ayuda-btn.abierto{background:var(--verde-osc);border-color:var(--verde-osc);color:#fff}
.ctrl__ayuda{margin:6px 0 0;padding:7px 9px;background:var(--menta-claro);border-radius:7px}

/* ---------- informe del Scanner ---------- */
.revision{display:flex;flex-direction:column;gap:7px}
.revision__fila{display:grid;grid-template-columns:18px 1fr auto;gap:6px 8px;align-items:baseline;padding:8px 10px;border-radius:9px;border:1px solid;font-size:12.5px}
.revision__fila--ok{background:#f1fbf5;border-color:#bce6cd;color:#14532d}
.revision__fila--avi{background:#fffaef;border-color:#f2ddb0;color:#7c4a03}
.revision__fila--mal{background:#fdf3f3;border-color:#f3c4c4;color:#8f1d1d}
.revision__marca{font-weight:800;text-align:center}
.revision__nombre{font-weight:600}
.revision__valor{font-variant-numeric:tabular-nums;white-space:nowrap}
.revision__consejo{grid-column:2/4;margin:4px 0 0;font-size:11.8px;line-height:1.5;opacity:.9;font-weight:400}
.revision__nota{display:flex;align-items:baseline;gap:10px;padding:11px 12px;border-radius:9px;border:1px solid;margin-top:3px}
.revision__nota b{font-size:19px;letter-spacing:-.02em}
.revision__nota span{font-size:12.5px;line-height:1.4}
.revision__nota--ok{background:#e8f7ee;border-color:#a7dcbd;color:#14532d}
.revision__nota--avi{background:#fff6e3;border-color:#eccf94;color:#7c4a03}
.revision__nota--mal{background:#fceaea;border-color:#eaadad;color:#8f1d1d}

/* ---------- "para que sirve": la explicacion larga, plegada ---------- */
/* Varias herramientas hacen algo correcto que no se entiende sin saber
   como imprime una DTF. El texto va escondido tras un boton para no
   empujar los controles fuera de la pantalla. */
.explica__btn{
  display:block;width:100%;margin:0 0 12px;padding:8px 12px;
  background:var(--menta);border:1px solid var(--linea);border-radius:var(--radio);
  color:var(--verde-osc);font-size:12.5px;font-weight:700;text-align:left;cursor:pointer;
}
.explica__btn::after{content:'  ▾';font-weight:400}
.explica__btn.abierto::after{content:'  ▴'}
.explica__btn:hover{background:#dff0e6}
.explica{
  margin:-6px 0 14px;padding:2px 13px 10px;
  background:#f6faf7;border:1px solid var(--linea);border-radius:var(--radio);
  font-size:12.5px;line-height:1.6;color:var(--tinta);
}
.explica h3{margin:12px 0 4px;font-size:12px;color:var(--verde-osc);text-transform:uppercase;letter-spacing:.03em}
.explica p{margin:0}
.btn--lupa{white-space:nowrap}

/* La pista del recorte va abajo, para no taparse con la de escoger color. */
.marco__pista--rec{top:auto;bottom:10px}

/* ---------- candado de las herramientas de pago ---------- */
/* Ver el resultado se deja; llevarselo no. El cartel explica por que,
   porque un boton apagado sin motivo solo produce clientes enfadados. */
.candado{
  margin-top:10px;padding:12px 13px;
  background:var(--menta-claro);border:1px solid var(--menta-borde);
  border-radius:var(--radio);font-size:12.5px;line-height:1.5;
}
.candado b{color:var(--verde-prof)}
.candado span{display:block;margin:5px 0 9px;color:var(--gris)}
.candado .btn{margin-top:6px}

/* Los errores del servidor hay que poder leerlos y copiarlos enteros. */
.nota--mal{
  color:#7f1d1d;background:#fef2f2;border:1px solid #fecaca;
  border-radius:var(--radio);padding:9px 11px;user-select:text;
  white-space:pre-wrap;word-break:break-word;
}