/* Editor de pliegos DTF — prueba visual.
   Los colores salen de variables: la paleta define acento, mesa y cinta; el tema define superficies y tinta. */

/* Sistema visual "Taller refinado" (debate con ChatGPT, ronda 9, 2026-10-21). Contrastes verificados con la fórmula WCAG. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fuentes/figtree-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fuentes/figtree-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --fuente: "Figtree", system-ui, sans-serif;
  /* Estampalandia (paleta de Arteo, 26/10): turquesa para las acciones (blanco encima 5,16:1; texto 6,07:1),
     grafito para la estructura, amarillo flúor solo en la regla y bordó para detalles puntuales */
  --acento: #0b7a78; --acento-hover: #07605e; --acento-texto: #086e6c; --sobre-acento: #fff; --acento-suave: #e1f4f3;
  --bordo: #7a1f35;
  --mesa: #2a2e33; --cinta: #d7ff1f; --cinta-tinta: #2a2209;
  --superficie: #ffffff; --superficie-2: #f3f4f6; --superficie-3: #e7e9ee;
  --tinta: #1d2127; --tinta-suave: #5b6270; --borde: #dadde3;
  --ok: #17643a; --alerta: #895900; --error: #b42332; --info: #175ba3;
  --radio: 12px; --radio-chico: 8px; --radio-mini: 6px;
  --esp: 1;
  --sombra: 0 4px 16px rgba(20, 24, 32, .08); --sombra-alta: 0 12px 32px rgba(20, 24, 32, .16);
  --riel: 76px; --panel: 320px; --barra: 60px;
  --alto-btn: 40px; --alto-campo: 42px;
}

body[data-paleta="cian"]    { --acento: #0a7fb5; --acento-hover: #086a97; --acento-suave: #dcf0fa; --mesa: #23343d; --mesa-film: #30454f; --cinta: #f4c430; }
body[data-paleta="tinta"]   { --acento: #1d2127; --acento-hover: #000; --acento-suave: #e6e7ea; --mesa: #4a4d52; --mesa-film: #5a5d63; --cinta: #ffd23f; }
body[data-paleta="estampa"] { --acento: #1d7f52; --acento-hover: #166641; --acento-suave: #dcf2e6; --mesa: #263630; --mesa-film: #33463e; --cinta: #f2c94c; }
body[data-paleta="neon"]    { --acento: #6b3fe0; --acento-hover: #5631bd; --acento-suave: #ece5fd; --mesa: #221d33; --mesa-film: #2f2945; --cinta: #b6f24a; --cinta-tinta: #16210a; }
body[data-paleta="serigrafia"] { --acento: #e2601a; --acento-hover: #c24f12; --acento-suave: #fde8dc; --mesa: #33302d; --mesa-film: #43403c; --cinta: #f4c430; }

body[data-tema="oscuro"] {
  --acento: #3fd1c8; --acento-hover: #5fe0d8; --acento-texto: #3fd1c8; --sobre-acento: #1b1e24; --acento-suave: #12393a;
  --superficie: #1b1e24; --superficie-2: #23272e; --superficie-3: #2d323a;
  --tinta: #eef0f3; --tinta-suave: #a3aab6; --borde: #596272;
  --ok: #86d8a9; --alerta: #ffd37d; --error: #ff9e9e; --info: #8dbffa;
  --sombra: 0 4px 16px rgba(0, 0, 0, .35); --sombra-alta: 0 12px 32px rgba(0, 0, 0, .5);
}
body[data-forma="recto"] { --radio: 2px; --radio-chico: 2px; --radio-mini: 2px; }
body[data-forma="pildora"] { --radio: 16px; --radio-chico: 999px; }
body[data-densidad="compacto"] { --esp: .78; --panel: 296px; --riel: 68px; }
body[data-densidad="amplio"] { --esp: 1.22; --panel: 344px; --riel: 84px; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--fuente); font-size: 15px; line-height: 1.5; color: var(--tinta);
  background: var(--superficie); -webkit-font-smoothing: antialiased;
}
body.editor { overflow: hidden; }
body.procesando .lienzo-caja { cursor: progress; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 23px; padding: 0 6px;
  font: 600 13px/1 var(--fuente); border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 4px;
  background: var(--superficie-2); color: var(--tinta-suave); white-space: nowrap; vertical-align: middle;
}
.teclas { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.tecla-sep, .tecla-txt { font-size: 13px; color: var(--tinta-suave); }

/* Botones */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: calc(var(--alto-btn) * var(--esp)); padding: 0 calc(16px * var(--esp)); font-size: 15px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); cursor: pointer; font-weight: 600;
}
.btn:hover { background: var(--superficie-2); }
.btn.primario { background: var(--acento); border-color: var(--acento); color: var(--sobre-acento); }
.btn.primario:hover { background: var(--acento-hover); }
.btn.peligro { color: var(--error); }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-icono {
  display: inline-grid; place-items: center; width: calc(40px * var(--esp)); height: calc(40px * var(--esp));
  border: 0; border-radius: var(--radio-chico); background: transparent; cursor: pointer; color: var(--tinta-suave);
}
.btn-icono:hover { background: var(--superficie-2); color: var(--tinta); }
.btn-icono[disabled] { opacity: .35; cursor: default; }

/* Barra superior */
.barra {
  height: var(--barra); display: flex; align-items: center; gap: 16px; padding: 0 14px;
  border-bottom: 1px solid var(--borde); background: var(--superficie); position: relative; z-index: 20;
}
.marca { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.marca svg { width: 30px; height: 30px; stroke: none; }
.marca-fondo { fill: var(--acento); } .marca-cinta { fill: var(--cinta); }
.barra-acciones { display: flex; align-items: center; gap: 2px; }
.btn-nuevo { display: inline-flex; align-items: center; gap: 6px; height: calc(40px * var(--esp)); padding: 0 10px; margin-right: 6px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: transparent; color: var(--tinta-suave); font-size: 14px; font-weight: 600; cursor: pointer; }
.btn-nuevo:hover { background: var(--superficie-2); color: var(--tinta); }
.btn-nuevo svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aviso.con-accion { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aviso.con-accion button { flex: none; padding: 6px 10px; border: 1px solid currentColor; border-radius: var(--radio-chico); background: transparent; color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.estado-guardado { margin-left: 10px; color: var(--tinta-suave); font-size: 13px; white-space: nowrap; }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.btn-buscar {
  display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px 0 12px; min-width: 260px;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); color: var(--tinta-suave); cursor: pointer;
}
.btn-buscar span { flex: 1; text-align: left; }
.btn-buscar svg { width: 16px; height: 16px; }

/* Distribución principal */
.espacio {
  height: calc(100% - var(--barra)); display: grid;
  grid-template-columns: var(--riel) 1fr var(--panel); grid-template-areas: "riel mesa panel";
}
body[data-disposicion="der"] .espacio { grid-template-columns: var(--panel) 1fr var(--riel); grid-template-areas: "panel mesa riel"; }
body[data-disposicion="der"] .cajon { left: auto; right: var(--riel); border-left: 1px solid var(--borde); border-right: 0; }
.riel { grid-area: riel; }
.mesa { grid-area: mesa; }
.panel { grid-area: panel; }

.riel {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 6px;
  background: var(--superficie); border-right: 1px solid var(--borde); overflow-y: auto; z-index: 15;
}
body[data-disposicion="der"] .riel { border-right: 0; border-left: 1px solid var(--borde); }
.riel-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: calc(9px * var(--esp)) 2px;
  border: 0; border-radius: var(--radio-chico); background: transparent; cursor: pointer; color: var(--tinta-suave); font-size: 13px; font-weight: 600;
}
.riel-btn:hover, .riel-btn[aria-pressed="true"] { background: var(--superficie-2); color: var(--tinta); }
.riel-btn.destacado { color: var(--acento-texto); }
.riel-btn.destacado:hover { background: var(--acento-suave); }

/* Cajón (plantillas, formas, pliego) */
.cajon {
  position: fixed; top: var(--barra); bottom: 0; left: var(--riel); width: 320px; z-index: 14;
  background: var(--superficie); border-right: 1px solid var(--borde); box-shadow: var(--sombra);
  transform: translateX(-110%); transition: transform .18s ease; display: flex; flex-direction: column;
}
body[data-disposicion="der"] .cajon { transform: translateX(110%); }
.cajon.abierto { transform: none !important; }
.cajon-cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 6px 16px; }
.cajon-cab h2 { font-size: 18px; margin: 0; }
.cajon-cuerpo { padding: 6px 16px 20px; overflow-y: auto; flex: 1; }

.campo-buscar { width: 100%; height: var(--alto-campo); font-size: 15px; padding: 0 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie-2); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.chip { border: 1px solid var(--borde); background: var(--superficie); border-radius: 999px; padding: 5px 12px; font-size: 13px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.grilla-plantillas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.plantilla {
  position: relative; display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); padding: 0; cursor: grab; overflow: hidden; text-align: left;
}
/* Imagen arriba en un cuadro de fondo a cuadros (transparencia), nombre abajo sin taparse */
.plantilla .plantilla-img {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: calc(var(--radio) - 1px) calc(var(--radio) - 1px) 0 0;
  background: repeating-conic-gradient(#e3e6eb 0 25%, #fff 0 50%) 0 0 / 14px 14px;
}
.plantilla img { position: absolute; inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.plantilla span { display: block; font-size: 13px; padding: 7px 10px; line-height: 1.3; border-top: 1px solid var(--borde); overflow-wrap: anywhere; }
.plantilla:hover { border-color: var(--acento); }
.sin-resultados { color: var(--tinta-suave); padding: 16px 0; }

/* Mesa de trabajo y lienzo */
.mesa {
  position: relative; overflow: hidden; background: var(--mesa);
  background-image: radial-gradient(color-mix(in srgb, var(--mesa) 80%, #fff) 1px, transparent 1.2px);
  background-size: 22px 22px;
}
.regla { position: absolute; z-index: 4; background: var(--cinta); }
.regla-h { left: 26px; top: 0; height: 26px; width: calc(100% - 26px); }
.regla-v { left: 0; top: 26px; width: 26px; height: calc(100% - 26px); }
.regla-esquina { position: absolute; left: 0; top: 0; width: 26px; height: 26px; z-index: 5; background: var(--cinta); color: var(--cinta-tinta); font-size: 13px; font-weight: 700; display: grid; place-items: center; box-shadow: 1px 1px 0 rgba(0,0,0,.25); }
body[data-reglas="no"] .regla, body[data-reglas="no"] .regla-esquina { display: none; }
.lienzo-caja { position: absolute; inset: 26px 0 0 26px; }
body[data-reglas="no"] .lienzo-caja { inset: 0; }
.vacio {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; width: min(380px, 86%);
  background: var(--superficie); border-radius: var(--radio); padding: 22px; text-align: center; box-shadow: var(--sombra);
}
.vacio p { margin: 0 0 6px; color: var(--tinta-suave); }
.vacio .vacio-titulo { font-size: 18px; font-weight: 700; color: var(--tinta); }
.vacio-acciones { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.medida { position: absolute; z-index: 6; pointer-events: none; background: var(--tinta); color: var(--superficie); font-size: 13px; font-weight: 600; padding: 4px 8px; border-radius: var(--radio-mini); white-space: nowrap; }
.soltar { position: absolute; inset: 12px; z-index: 7; border: 3px dashed var(--cinta); border-radius: var(--radio); display: grid; place-items: center; background: rgba(0,0,0,.35); color: #fff; font-size: 18px; font-weight: 700; }
.zoom { position: absolute; right: 14px; bottom: 14px; z-index: 6; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); }
.zoom-valor { min-width: 60px; height: 40px; border: 0; background: transparent; cursor: pointer; font-weight: 600; }

/* Panel derecho */
.panel { display: flex; flex-direction: column; min-height: 0; background: var(--superficie); border-left: 1px solid var(--borde); z-index: 12; }
body[data-disposicion="der"] .panel { border-left: 0; border-right: 1px solid var(--borde); }
.panel-contexto { flex: 1; overflow-y: auto; padding: calc(14px * var(--esp)) 16px; }
.panel-titulo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px; font-size: 18px; line-height: 1.2; }
.panel-titulo small { font-weight: 500; color: var(--tinta-suave); }
.semaforo { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border-radius: var(--radio-chico); font-size: 13px; margin-bottom: 12px; background: var(--superficie-2); }
.semaforo::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; flex: none; background: var(--ok); }
.semaforo.alerta::before { background: var(--alerta); } .semaforo.error::before { background: var(--error); }
.semaforo b { display: block; }
.grupo { border-top: 1px solid var(--borde); padding: calc(12px * var(--esp)) 0; }
.grupo:first-of-type { border-top: 0; }
.grupo h3 { font-size: 15px; color: var(--tinta); font-weight: 600; margin: 0 0 10px; }
details.grupo summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 16px; min-height: 32px; }
details.grupo summary::-webkit-details-marker { display: none; }
details.grupo summary::after { content: "+"; color: var(--tinta-suave); font-size: 18px; line-height: 1; }
details.grupo[open] summary::after { content: "–"; }
details.grupo[open] summary { margin-bottom: 10px; }
.fila { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.fila > label { flex: 1; font-size: 14px; color: var(--tinta-suave); }
.fila input[type="number"], .fila select, .fila input[type="text"] { width: 100px; height: 38px; padding: 0 8px; font-size: 15px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); }
.fila select { width: 150px; }
.fila input[type="range"] { flex: 1.3; accent-color: var(--acento); }
.fila input[type="color"] { width: 44px; height: 38px; padding: 2px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); }
.medidas { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: end; margin-bottom: 8px; }
.medidas label { font-size: 13px; color: var(--tinta-suave); display: grid; gap: 3px; }
.medidas input { width: 100%; height: var(--alto-campo); font-size: 15px; padding: 0 8px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); }
.candado { height: var(--alto-campo); }
.candado[aria-pressed="true"] { color: var(--acento-texto); }
.acciones-rapidas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.accion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: calc(9px * var(--esp)) 10px; text-align: left;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); cursor: pointer; font-weight: 600; font-size: 14px;
}
.accion small { font-weight: 400; color: var(--tinta-suave); font-size: 13px; }
.accion:hover { border-color: var(--acento); background: var(--acento-suave); }
.accion.hecha { border-color: var(--ok); }
.etiqueta-demo { display: inline-block; font-size: 13px; font-weight: 600; padding: 1px 7px; line-height: 1.35; border-radius: 4px; background: var(--cinta); color: var(--cinta-tinta); vertical-align: middle; }
.nota { font-size: 13px; color: var(--tinta-suave); margin: 6px 0 0; }
.botonera { display: flex; flex-wrap: wrap; gap: 6px; }
.botonera .btn { flex: 1 1 auto; }
.alinear { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.alinear .btn-icono { width: 100%; border: 1px solid var(--borde); }
textarea.lote { width: 100%; min-height: 90px; padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); resize: vertical; }

/* Resumen del pedido */
.resumen { border-top: 1px solid var(--borde); padding: calc(12px * var(--esp)) 16px calc(14px * var(--esp)); background: var(--superficie-2); }
.resumen h2 { font-size: 16px; margin: 0 0 8px; display: flex; justify-content: space-between; align-items: center; }
.resumen h2 button { border: 0; background: none; color: var(--tinta-suave); cursor: pointer; font-size: 13px; }
.resumen dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 14px; }
.resumen dt { color: var(--tinta-suave); } .resumen dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.resumen .total { font-size: 24px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--borde); font-variant-numeric: tabular-nums; }
.resumen .total small { font-size: 13px; font-weight: 500; color: var(--tinta-suave); }
body[data-resumen="plegable"] .resumen:not(.abierto) dl { display: none; }
.barra-largo { height: 6px; border-radius: 3px; background: var(--superficie-3); margin: 6px 0 10px; overflow: hidden; }
.barra-largo i { display: block; height: 100%; background: var(--acento); width: 0; transition: width .2s; }
.resumen-movil { display: none; }

/* Panel de prueba de estilo (discreto) */
.prueba { position: fixed; left: calc(var(--riel) + 38px); bottom: 12px; z-index: 30; display: flex; gap: 4px; opacity: .55; transition: opacity .15s; }
body[data-disposicion="der"] .prueba { left: calc(var(--panel) + 38px); }
.prueba:hover, .prueba:focus-within, .prueba.abierta { opacity: 1; }
.prueba-btn { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(20,22,27,.72); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; backdrop-filter: blur(6px); }
.prueba-btn svg { width: 16px; height: 16px; }
.prueba-btn[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); }
.prueba-pop { position: absolute; bottom: 38px; left: 0; width: 300px; max-height: 70vh; overflow-y: auto; background: var(--superficie); color: var(--tinta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 14px; border: 1px solid var(--borde); }
.prueba-pop h3 { margin: 0 0 10px; font-size: 16px; }
.opciones { display: grid; gap: 6px; }
.opcion { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); cursor: pointer; text-align: left; }
.opcion[aria-pressed="true"] { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.opcion .muestras { display: flex; gap: 3px; }
.opcion .muestras i { width: 16px; height: 16px; border-radius: 4px; display: block; }
.opcion .aa { font-size: 20px; width: 34px; }
.segmentado { display: flex; border: 1px solid var(--borde); border-radius: var(--radio-chico); overflow: hidden; margin-bottom: 10px; }
.segmentado button { flex: 1; border: 0; background: var(--superficie); padding: 8px 4px; cursor: pointer; font-size: 13px; }
.segmentado button + button { border-left: 1px solid var(--borde); }
.segmentado button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.prueba-pop label.titulo { display: block; font-size: 13px; color: var(--tinta-suave); margin: 4px 0 4px; }

/* Modales, comandos, avisos */
.modal, .comandos { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal[hidden], .comandos[hidden], .tour[hidden], .prueba-pop[hidden], .medida[hidden], .soltar[hidden] { display: none; }
.modal-fondo { position: absolute; inset: 0; background: rgba(12, 14, 18, .5); }
.modal-caja { position: relative; width: min(520px, 100%); max-height: 88vh; overflow-y: auto; background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); }
.modal-cab { display: flex; justify-content: space-between; align-items: center; padding: 14px 14px 4px 20px; }
.modal-cab h2 { margin: 0; font-size: 19px; }
.modal-cuerpo { padding: 8px 20px 20px; }
.modal-cuerpo p { margin: 0 0 10px; }
.modal-error { margin: 12px 0 0; padding: 10px 12px; border-radius: var(--radio-chico); border: 1px solid var(--error); color: var(--error); font-size: 14px; }
.modal-acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.lista-control { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.lista-control li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.lista-control li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex: none; background: var(--ok); }
.lista-control li.alerta::before { background: var(--alerta); } .lista-control li.error::before { background: var(--error); }
.atajos { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; font-size: 14px; margin: 0; }
.atajos dd { margin: 0; text-align: right; }
.atajos-mini { font-size: 14px; gap: 0 10px; }
/* Cada fila ocupa la misma altura en las dos columnas: la línea de abajo queda pareja aunque el texto ocupe dos renglones */
.atajos-mini { align-items: stretch; }
.atajos-mini dt, .atajos-mini dd { padding: 6px 0; border-bottom: 1px solid var(--superficie-3); display: flex; align-items: center; }
.atajos-mini dd { justify-content: flex-end; }
.atajos-mini dt { color: var(--tinta); }
.atajos-mini dt:last-of-type, .atajos-mini dd:last-of-type { border-bottom: 0; }
.enlace-ayuda { margin-top: 10px; width: 100%; }

/* Formas con dibujo y vista grande al pasar el mouse */
.grilla-formas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.baul-vaciar { width: 100%; margin: 12px 0 4px; }
.baul-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.baul-dos .btn { width: 100%; margin: 0; }
.baul-barra-sel { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.baul-acciones-sel { margin-bottom: 12px; }
.baul-check { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; accent-color: var(--acento); pointer-events: none; }
.grilla-baul.eligiendo .baul-item { cursor: pointer; }
.baul-item.elegida { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }

.btn.primario.peligro-fuerte { background: var(--error); border-color: var(--error); color: #fff; }
.rango-colores { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.rango-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 6px; border: 1px solid var(--borde); border-radius: 999px; font-size: 13px; font-variant-numeric: tabular-nums; }
.rango-chip i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); border: 1px solid var(--borde); }
.rango-chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--superficie-2); color: var(--tinta); cursor: pointer; font-size: 15px; line-height: 1; }
.marcos { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin-bottom: 10px; }
.marco-btn { display: grid; place-items: center; height: 44px; padding: 4px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); cursor: pointer; }
.marco-btn .forma-svg { width: 30px; height: 26px; }
.marco-btn[aria-pressed="true"] { border-color: var(--acento); background: var(--acento-suave); box-shadow: 0 0 0 1px var(--acento); }
body.con-pincel .canvas-container { touch-action: none; }
.grupo-formas { margin: 16px 0 8px; font-size: 14px; font-weight: 700; color: var(--tinta-suave); }
#buscar-forma + .grupo-formas { margin-top: 12px; }
.grilla-formas[hidden], .grupo-formas[hidden], .forma-btn[hidden] { display: none; }
.fila output { min-width: 26px; text-align: right; font-variant-numeric: tabular-nums; font-size: 14px; color: var(--tinta-suave); }
.forma-btn { display: grid; justify-items: center; gap: 6px; padding: 12px 4px 9px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); cursor: grab; font-size: 13px; font-weight: 600; }
.forma-btn:hover, .forma-btn:focus-visible { border-color: var(--acento); background: var(--acento-suave); }
.forma-svg { width: 40px; height: 32px; fill: var(--acento); stroke: none; }
.forma-vista { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 230px; margin: 12px 0; padding: 18px; border-radius: var(--radio); text-align: center;
  background: repeating-conic-gradient(var(--superficie-3) 0 25%, var(--superficie) 0 50%) 0 0 / 16px 16px; border: 1px dashed var(--borde); }
.forma-vista .forma-svg { width: 150px; height: 130px; }
.forma-vista p { margin: 0; }

/* Menú de clic derecho */
.menu-contexto { position: absolute; z-index: 40; min-width: 220px; padding: 5px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.menu-contexto[hidden] { display: none; }
.menu-contexto button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 16px; padding: 7px 10px; border: 0; border-radius: var(--radio-chico); background: none; cursor: pointer; text-align: left; font-size: 14px; min-height: 36px; }
.menu-contexto button:hover, .menu-contexto button:focus-visible { background: var(--acento-suave); outline: none; }
.menu-contexto hr { border: 0; border-top: 1px solid var(--borde); margin: 4px 2px; }
/* Submenús del clic derecho (como Canva): se abren al pasar el mouse, al tocar o con la flecha derecha */
.menu-sub { position: relative; }
.menu-sub .flecha-sub { font-size: 18px; line-height: 1; color: var(--tinta-suave); }
.menu-sub .submenu { display: none; position: absolute; left: calc(100% + 4px); top: -5px; min-width: 270px; padding: 5px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); z-index: 41; }
.menu-sub .submenu button span { white-space: nowrap; }
/* Puente invisible entre el menú y el submenú: el mouse cruza el hueco sin que se cierre */
.menu-sub .submenu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -14px; width: 14px; }
.menu-contexto.sub-izq .menu-sub .submenu::before { left: auto; right: -14px; }
/* Lo abre y lo cierra el código (con una pequeña demora al salir), no el :hover: así se puede llegar en diagonal */
.menu-sub.abierto .submenu, .menu-sub:focus-within .submenu { display: block; }
.menu-sub.abierto > .con-sub { background: var(--acento-suave); }
.menu-contexto.sub-izq .menu-sub .submenu { left: auto; right: calc(100% + 4px); }
.vacio-ejemplo { margin-top: 12px; border: 0; background: none; color: var(--acento-texto); font-weight: 600; cursor: pointer; text-decoration: underline; font-size: 15px; text-underline-offset: 3px; }
.form-eleccion label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.form-eleccion input[type="text"], .form-eleccion textarea, .form-eleccion select { width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); }
.form-eleccion textarea { min-height: 70px; resize: vertical; }
.puntaje { display: flex; gap: 4px; }
.puntaje button { width: 40px; height: 40px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); cursor: pointer; }
.puntaje button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.trampa { position: absolute; left: -9999px; }

.comandos { place-items: start center; padding-top: 12vh; }
.comandos-caja { position: relative; width: min(560px, 100%); background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden; }
#comandos-input { width: 100%; height: 52px; border: 0; border-bottom: 1px solid var(--borde); padding: 0 18px; font-size: 16px; background: var(--superficie); outline: none; }
#comandos-lista { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; }
#comandos-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: var(--radio-chico); cursor: pointer; }
#comandos-lista li small { color: var(--tinta-suave); }
#comandos-lista li[aria-selected="true"] { background: var(--acento-suave); }

.avisos { position: fixed; top: calc(var(--barra) + 10px); left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 6px; width: min(440px, 92vw); }
.aviso { background: var(--tinta); color: var(--superficie); padding: 10px 14px; border-radius: var(--radio-chico); box-shadow: var(--sombra-alta); font-size: 14px; }
.aviso.error { background: var(--error); color: #fff; }

.tour { position: fixed; inset: 0; z-index: 70; }
.tour-foco { position: fixed; border-radius: var(--radio); box-shadow: 0 0 0 9999px rgba(12,14,18,.55); transition: all .2s; pointer-events: none; }
.tour-globo { position: fixed; width: min(320px, 90vw); background: var(--superficie); border-radius: var(--radio); box-shadow: var(--sombra); padding: 16px; }
.tour-globo h3 { margin: 0 0 6px; font-size: 17px; }
.tour-globo p { margin: 0 0 12px; color: var(--tinta-suave); }
.tour-globo .pie { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tour-globo .pie span { font-size: 13px; color: var(--tinta-suave); }

/* Celular y tablet */
@media (max-width: 860px) {
  :root { --barra: 56px; --riel: 0px; --alto-btn: 44px; --alto-campo: 44px; }
  body { font-size: 16px; }
  .btn-buscar span, .btn-buscar kbd, .estado-guardado, .marca span, .btn-nuevo span { display: none; }
  .btn-nuevo { padding: 0 9px; border: 0; margin-right: 0; }
  /* En el celular la barra de arriba tiene que entrar en la pantalla: los atajos de teclado no sirven sin teclado */
  #btn-ayuda { display: none; }
  .barra { overflow: hidden; }
  .btn-buscar { min-width: 0; padding: 0 9px; }
  .espacio, body[data-disposicion="der"] .espacio { grid-template-columns: 1fr; grid-template-areas: "mesa"; height: calc(100% - var(--barra) - 64px); }
  .riel { position: fixed; left: 0; right: 0; bottom: 0; height: 64px; flex-direction: row; justify-content: space-around; padding: 4px; border: 0; border-top: 1px solid var(--borde); z-index: 25; overflow-x: auto; }
  .riel-btn { min-width: 52px; font-size: 13px; }
  .panel { position: fixed; left: 0; right: 0; bottom: 64px; max-height: 62vh; border: 0; border-top: 1px solid var(--borde); border-radius: 14px 14px 0 0; box-shadow: var(--sombra); transform: translateY(105%); transition: transform .2s; }
  .panel.abierto { transform: none; }
  .cajon, body[data-disposicion="der"] .cajon { left: 0; right: 0; top: auto; bottom: 64px; width: auto; height: 70vh; border-radius: 14px 14px 0 0; transform: translateY(110%); }
  .resumen-movil { display: flex; position: fixed; right: 10px; bottom: 74px; z-index: 22; align-items: center; gap: 10px; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); box-shadow: var(--sombra); font-weight: 600; cursor: pointer; }
  .prueba, body[data-disposicion="der"] .prueba { left: 10px; bottom: 74px; }
  .prueba-btn span { display: none; }
  .zoom { bottom: 124px; right: 10px; }
}
/* Correcciones de la revisión visual (2026-10-21) */
/* Nada visual ni de control se pinta de azul al arrastrar o hacer doble clic (selección de texto del navegador) */
button, .btn, .riel, .barra, .mesa, .regla, .zoom, .barra-contexto, .menu-contexto, .plantilla, .forma-btn, .forma-vista, .prueba,
.l-pliego, .l-pasos li::before, .tarjeta b, .barras, img, svg, canvas { -webkit-user-select: none; user-select: none; }
img { -webkit-user-drag: none; }
.prueba[hidden] { display: none !important; }
.cajon:not(.abierto) { visibility: hidden; transition: transform .18s ease, visibility 0s .18s; }
.cajon.abierto { visibility: visible; transition: transform .18s ease; }

.marca, .marca:visited { color: var(--tinta); text-decoration: none; }
.vacio-ejemplo { min-height: 44px; }
.vacio-cerrar { position: absolute; top: 8px; right: 8px; }
.vacio .vacio-titulo { padding: 0 36px; }
.fila:has(> input[type="checkbox"]) { min-height: 44px; margin-bottom: 0; }
input[type="checkbox"] { width: 24px; height: 24px; }
/* Tu pedido: una línea contraída; al tocarla se despliega el detalle */
.resumen { padding: 8px 12px !important; }
.resumen-cab { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 6px; border: 0; border-radius: var(--radio-chico); background: none; cursor: pointer; text-align: left; color: var(--tinta); }
.resumen-cab:hover { background: var(--superficie-3); }
.r-titulo { flex: 1; display: grid; font-weight: 700; font-size: 15px; line-height: 1.25; }
.r-titulo small { font-weight: 400; font-size: 13px; color: var(--tinta-suave); }
.r-total { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.r-flecha { width: 18px; height: 18px; color: var(--tinta-suave); transition: transform .15s; transform: rotate(180deg); }
.resumen-cab[aria-expanded="true"] .r-flecha { transform: none; }
.resumen-detalle { padding: 6px 6px 4px; }
.resumen-detalle[hidden] { display: none; }
.resumen-detalle dl { display: grid !important; }
.pagar-total { display: inline; margin-left: 8px; padding-left: 8px; border-left: 1px solid color-mix(in srgb, var(--sobre-acento) 40%, transparent); font-variant-numeric: tabular-nums; }
.pagar-total:empty { display: none; }

.campo-texto-l { display: block; font-size: 14px; color: var(--tinta-suave); margin-bottom: 4px; }
.campo-texto { width: 100%; height: var(--alto-campo); padding: 0 12px; margin-bottom: 10px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); font-size: 16px; }

/* Lectura completa: las listas desplegables van a todo lo ancho (nunca "Rollo 60 cm (58 ú…") y los nombres no se cortan con "…" */
.fila:has(> select) { flex-wrap: wrap; }
.fila:has(> select) > label { flex-basis: 100%; }
.fila > select { width: 100% !important; flex: 1 1 100%; height: var(--alto-campo) !important; font-size: 15px; }

/* Colores rápidos (un clic) + "Otro" con el selector completo */
.campo-color { display: grid; gap: 6px; margin-bottom: 10px; }
.campo-color > span { font-size: 14px; color: var(--tinta-suave); }
.color-rapido { display: grid; grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); gap: 6px; }
.muestra-color { position: relative; height: 30px; border-radius: var(--radio-mini); border: 1px solid var(--borde); background: var(--c); cursor: pointer; padding: 0; }
.muestra-color[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--acento); }
.muestra-color.otro { grid-column: span 2; display: flex; align-items: center; justify-content: center; gap: 4px; background: conic-gradient(#f43f5e, #f59e0b, #22c55e, #3b82f6, #a855f7, #f43f5e); color: #fff; font-size: 13px; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.muestra-color.otro input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.muestra-color.gotero { display: grid; place-items: center; background: var(--superficie); color: var(--tinta-suave); }
.muestra-color.gotero svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.colores-pliego { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 8px; }
.colores-pliego .muestra-color { height: 38px; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--acento); cursor: pointer; }
.fila > label[for] { cursor: pointer; }
.lista-mas { display: grid; gap: 6px; }
.lista-mas button { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.lista-mas button small { display: block; font-weight: 400; font-size: 13px; color: var(--tinta-suave); }
.peligro-zona { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }
.peligro-zona button { color: var(--error); border-color: color-mix(in srgb, var(--error) 35%, var(--borde)); }

/* Piezas del celular ocultas en escritorio */
.panel-asa, .barra-contexto { display: none; }

@media (max-width: 860px) {
  .btn-buscar { display: none; }
  #btn-pagar { gap: 6px; padding: 0 14px; }
  #btn-pagar .pagar-texto { font-size: 0; }
  #btn-pagar .pagar-texto::before { content: "Pagar"; font-size: 15px; }
  .pagar-total { margin-left: 0; padding-left: 0; border-left: 0; }
  .zoom { display: none; }
  .resumen-movil { display: none !important; }

  /* Barra de acciones del diseño tocado: una fila deslizable, encima de los botones de abajo */
  .barra-contexto { position: fixed; left: 0; right: 0; bottom: 64px; z-index: 24; gap: 2px; padding: 6px 8px; overflow-x: auto; scrollbar-width: none;
    background: var(--superficie); border-top: 1px solid var(--borde); box-shadow: 0 -4px 12px rgba(20, 24, 32, .06); }
  .barra-contexto::-webkit-scrollbar { display: none; }
  /* Fundido a la derecha: avisa que la fila sigue si se desliza */
  .barra-contexto { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 40px; }
  /* Abajo entran 5 botones: Formas y Pliego pasan a "Más" */
  .riel-btn.solo-escritorio { display: none; }
  .riel { justify-content: space-between; padding: 4px 6px; }
  .riel-btn { flex: 1; min-width: 0; }
  body.con-seleccion .barra-contexto { display: flex; }
  .barra-contexto button { flex: none; display: grid; justify-items: center; gap: 3px; min-width: 64px; min-height: 52px; padding: 4px 6px; border: 0; border-radius: var(--radio-chico); background: none; color: var(--tinta); font-size: 13px; font-weight: 600; cursor: pointer; }
  .barra-contexto button:active { background: var(--acento-suave); }
  .barra-contexto svg { width: 22px; height: 22px; }

  /* Bandeja inferior: manija + "Listo", altura acotada para que se siga viendo el pliego */
  .panel { max-height: 42vh; display: flex; flex-direction: column; }
  .panel[data-foco="todo"] { max-height: 65vh; }
  .cajon[data-tipo="mas"] { height: auto; max-height: 75vh; }
  .panel-asa { display: flex; align-items: center; justify-content: flex-end; position: relative; padding: 8px 12px 4px; border-bottom: 1px solid var(--superficie-3); }
  .panel-asa span { position: absolute; left: 50%; top: 6px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--borde); }
  .panel-asa .btn { min-height: 36px; }
  .panel .resumen { display: none; }
  .oculto-movil { display: none !important; }
}
/* Botón mientras la IA trabaja (quitar fondo) */
.accion.trabajando { pointer-events: none; opacity: .9; }
.accion.trabajando small::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: girar-ia .8s linear infinite; }
@keyframes girar-ia { to { transform: rotate(360deg); } }
/* Baúl "Mis imágenes": ícono vacío o con miniaturas asomando y la cantidad */
.riel-baul .baul-icono { position: relative; display: grid; place-items: center; width: 30px; height: 26px; }
.riel-baul .baul-icono svg { position: relative; z-index: 1; }
.riel-baul .baul-minis { position: absolute; left: 4px; right: 4px; bottom: 9px; display: flex; justify-content: center; gap: 1px; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.riel-baul .baul-minis img { width: 9px; height: 9px; object-fit: cover; border-radius: 2px; border: 1px solid var(--superficie); background: var(--superficie-3); }
.riel-baul .baul-minis img:nth-child(2) { transform: translateY(-3px); }
.riel-baul.con-imagenes .baul-minis { opacity: 1; transform: none; }
.riel-baul .baul-cuenta { position: absolute; top: -5px; right: -8px; z-index: 2; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--acento); color: var(--sobre-acento); font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; display: none; }
.riel-baul.con-imagenes .baul-cuenta { display: block; }
.baul-subir { width: 100%; margin-bottom: 8px; }
.baul-todas { width: 100%; margin-bottom: 12px; }
.baul-vacio { cursor: pointer; display: grid; justify-items: center; gap: 10px; padding: 28px 12px; margin: 8px 0 12px; border: 2px dashed var(--borde); border-radius: var(--radio); text-align: center; color: var(--tinta-suave); }
.baul-vacio svg { width: 72px; height: 54px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; opacity: .7; }
.baul-vacio:hover, .baul-vacio:focus-visible { border-color: var(--acento); color: var(--tinta); outline: none; }
.baul-vacio b { display: block; color: var(--tinta); margin-bottom: 4px; }
.cajon.soltando .cajon-cuerpo { outline: 2px dashed var(--acento); outline-offset: -8px; background: var(--acento-suave, transparent); }
.baul-item { position: relative; }
.baul-item .baul-estado { display: block; padding: 0 10px 8px; font-size: 13px; color: var(--tinta-suave); }
.baul-item .baul-estado.ok { color: var(--ok, #17643a); }
.baul-item .baul-estado.error { color: var(--error, #b42332); }
.lista-control .arreglar { border: 0; background: none; padding: 0 0 0 4px; color: var(--acento); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.baul-item .link { border: 0; background: none; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.baul-quitar { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie); color: var(--tinta); font-size: 18px; line-height: 1; cursor: pointer; opacity: .85; }
.baul-quitar:hover { opacity: 1; border-color: var(--error, #b42332); color: var(--error, #b42332); }
/* Aviso de versión nueva */
.aviso-version { position: fixed; top: calc(var(--barra) + 10px); left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 14px;
  padding: 8px 8px 8px 16px; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra); font-size: 14px; max-width: calc(100vw - 32px); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Protección: al apretar "Impr Pant" se tapa el pliego un momento; imprimir la página desde el navegador sale en blanco */
body.captura-tapada .mesa { filter: blur(24px) brightness(.4); }
@media print { body * { visibility: hidden !important; } body::after { content: "Para tener el archivo en alta calidad, confirmá el pedido."; visibility: visible; position: fixed; top: 40px; left: 40px; font: 16px sans-serif; } }

.vista-rapida button { font-size: 12px; }

/* Ventana de pagar: cómo lo quiere, datos de contacto y detalle */
.form-compra fieldset { border: 0; padding: 0; margin: 14px 0 0; display: grid; gap: 8px; min-width: 0; } /* sin esto el grupo no se achica y en celular se sale de la ventana */
.form-compra, .form-compra label, .form-compra span { min-width: 0; }
.form-compra .fila { flex-wrap: wrap; }
.modal-caja { max-width: 100%; }
.form-compra legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.form-compra [hidden] { display: none !important; }
.opcion-compra { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); cursor: pointer; }
.opcion-compra:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.opcion-compra input { margin-top: 3px; accent-color: var(--acento); }
.opcion-compra span { display: grid; gap: 2px; }
.opcion-compra small { color: var(--tinta-suave); font-size: 13px; }
.opcion-compra.chica { padding: 8px 12px; }
.opcion-compra.chica span { display: flex; justify-content: space-between; width: 100%; gap: 8px; }
.form-compra .fila span { display: grid; gap: 2px; flex: 1; font-size: 14px; }
.form-compra .fila small { color: var(--tinta-suave); font-size: 12px; }
.campo-compra { display: grid; gap: 4px; font-size: 14px; }
.campo-compra small { color: var(--tinta-suave); }
.campo-compra input { height: var(--alto-campo); padding: 0 10px; font-size: 15px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--tinta); }
.detalle-compra dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 14px 0 0; padding: 12px; border-radius: var(--radio-chico); background: var(--superficie-2); font-size: 14px; }
.detalle-compra dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.detalle-compra .total-compra { font-weight: 800; font-size: 17px; padding-top: 6px; border-top: 1px solid var(--borde); }
/* Detalle imagen por imagen: el nombre en negrita y lo que se le hizo debajo, más chico y corrido (lo gratis dice $ 0) */
.detalle-compra .d-imagen { font-weight: 700; padding-top: 6px; border-top: 1px dashed var(--borde); overflow-wrap: anywhere; }
.detalle-compra .d-imagen small { font-weight: 500; color: var(--tinta-suave); }
.detalle-compra .d-cambio { padding-left: 14px; color: var(--tinta-suave); font-size: 13px; }
.detalle-compra dd.d-cambio { padding-left: 0; }

/* En ventanas largas (pagar), los botones del final quedan siempre a la vista */
.modal-caja .modal-acciones { position: sticky; bottom: 0; z-index: 1; background: var(--superficie); padding: 12px 0 2px; margin-bottom: -2px; box-shadow: 0 -10px 12px -10px rgba(0,0,0,.18); }

/* Campo trampa del formulario de pago: invisible para las personas */
.trampa { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* Revisión de la foto: cada problema con su arreglo al lado */
.lista-diagnostico { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.lista-diagnostico li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.lista-diagnostico li span { flex: 1; }

/* Catálogo libre dentro del cajón de plantillas */
.catalogo-libre { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); display: grid; gap: 10px; }
.catalogo-libre h3 { margin: 0; font-size: 15px; }
.catalogo-libre h3 small { font-weight: 400; color: var(--tinta-suave); }
.cat-item { cursor: pointer; }
.cat-item.elegido { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento) inset; }
.cat-item.elegido .plantilla-img::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento); color: #fff; font-size: 14px; font-weight: 700; }
.cat-elegidos { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.cat-elegidos span { flex: 1 1 100%; font-size: 13px; }

/* Mejorar con IA: antes y después */
.antes-despues { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.antes-despues figure { margin: 0; display: grid; gap: 4px; min-width: 0; }
.antes-despues img { width: 100%; max-height: 50vh; object-fit: contain; border: 1px solid var(--borde); border-radius: var(--radio-chico, 6px);
  background: repeating-conic-gradient(var(--superficie-3) 0 25%, var(--superficie) 0 50%) 0 0 / 14px 14px; }
.antes-despues figcaption { font-size: 13px; color: var(--tinta-suave); text-align: center; }
.mejora-ia { margin-top: 8px; }
@media (max-width: 560px) { .antes-despues { grid-template-columns: minmax(0, 1fr); } }

/* Barra izquierda en computadora: aprovecha todo el alto de la pantalla (botones más amplios en monitores altos)
   y "Más" queda abajo del todo */
@media (min-width: 861px) {
  .riel { gap: clamp(4px, 1.2vh, 14px); padding-bottom: 12px; }
  .riel-btn { padding-top: clamp(9px, 1.6vh, 20px); padding-bottom: clamp(9px, 1.6vh, 20px); }
  .riel-btn svg { width: clamp(22px, 2.6vh, 28px); height: clamp(22px, 2.6vh, 28px); }
  .riel-btn[data-accion="comandos"] { margin-top: auto; }
}

/* Selector de tipografías (como en Canva): buscador y lista con cada nombre en su letra */
.selector-fuente { display: grid; gap: 8px; }
.selector-fuente select { max-width: 100%; }
/* Lista común (no grilla): dentro de una caja con barra, la grilla encogía los renglones y cortaba las letras */
.lista-fuentes { max-height: 300px; overflow-y: auto; border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 6px; display: block; }
.grupo-fuentes { margin: 8px 4px 2px; font-size: 12px; font-weight: 700; color: var(--tinta-suave); }
.grupo-fuentes:first-child { margin-top: 2px; }
.fuente-item { display: block; width: 100%; min-height: 40px; text-align: left; border: 0; background: transparent; color: var(--tinta); font-size: 20px; line-height: 1.6; padding: 4px 8px; margin: 1px 0; border-radius: var(--radio-chico); cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fuente-item:hover { background: var(--superficie-2); }
.fuente-item[aria-pressed="true"] { background: var(--acento-suave); box-shadow: inset 0 0 0 1px var(--acento); }

/* Explicación al pasar el mouse por un botón (assets/ayudas.js) */
.ayuda-flotante { position: fixed; z-index: 200; max-width: 260px; padding: 8px 10px; border-radius: var(--radio-chico); background: var(--tinta); color: var(--superficie);
  font-size: 13px; line-height: 1.35; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); pointer-events: none; }

/* Aire entre los botones y las imágenes en los cajones (Mis imágenes, catálogo): los botones no quedan pegados a las fotos */
.baul-dos { margin: 10px 0 16px; }
.baul-subir { margin-bottom: 4px; }
.baul-acciones-sel { margin-bottom: 16px; }
.cajon-cuerpo > .botonera + .grilla-baul, .cajon-cuerpo > .botonera + .grilla-plantillas { margin-top: 0; }
.catalogo-libre .botonera { margin-top: 6px; }
.catalogo-libre .grilla-plantillas { margin-top: 6px; }
.baul-vaciar { margin-top: 16px; }

/* Cupón en la ventana de pagar */
.fila-cupon { display: flex; gap: 8px; }
.fila-cupon input { flex: 1; min-width: 0; height: var(--alto-campo); padding: 0 12px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--tinta); text-transform: uppercase; }

/* "Mejorar mi imagen" (editor/?modo=imagen): pantalla simple, sin herramientas de pliego */
.modo-imagen .riel, .modo-imagen .cajon, .modo-imagen #btn-nuevo { display: none !important; }
.modo-imagen .espacio { grid-template-columns: minmax(0, 1fr) var(--panel); grid-template-areas: "mesa panel"; }
.modo-imagen #panel [data-act="duplicar"], .modo-imagen #panel [data-act="llenar"], .modo-imagen #panel [data-act="copias"], .modo-imagen #panel [data-act="lote"],
.modo-imagen #panel [data-act="adelante"], .modo-imagen #panel [data-act="atras"], .modo-imagen #panel [data-act="bloquear"] { display: none; }
.paquete-imagen { border: 1px solid var(--acento); border-radius: var(--radio); padding: 12px; background: var(--acento-suave); display: grid; gap: 8px; }
.paquete-imagen h3 { margin: 0; }
.imagen-vacia { position: absolute; inset: 0; margin: auto; width: min(420px, calc(100% - 32px)); height: fit-content; padding: 26px 24px; border-radius: var(--radio);
  background: color-mix(in srgb, var(--superficie) 72%, transparent); border: 2px dashed var(--acento); box-shadow: none; backdrop-filter: blur(2px);
  text-align: center; display: grid; gap: 8px; justify-items: center; z-index: 12; }
.imagen-vacia svg { width: 40px; height: 40px; fill: none; stroke: var(--acento); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.imagen-vacia .btn { margin-top: 6px; }
.imagen-vacia[hidden] { display: none; }
.imagen-vacia h2 { margin: 0; font-size: 22px; }
.imagen-vacia p { margin: 0; color: var(--tinta-suave); }
@media (max-width: 860px) { .modo-imagen .espacio { grid-template-columns: 1fr; grid-template-areas: "mesa"; } }

/* Después de quitar el fondo: el pincel para recuperar lo borrado o sacar restos, a la vista */
.retoque-fondo { margin-top: 10px; padding: 10px 12px; border-radius: var(--radio); background: var(--acento-suave); display: grid; gap: 8px; }
.retoque-fondo p { margin: 0; font-size: 13px; }
.retoque-fondo .btn[aria-pressed="true"] { background: var(--acento); color: #fff; border-color: var(--acento); }

/* Precios: claros pero sin gritar. El precio de un botón pago va en el subtexto, en negrita */
/* Etiqueta única de cobro, sobria (sin óvalos): precio en verde agua y negrita; "Gratis" igual pero más suave */
.precio { display: inline; font-weight: 700; font-size: inherit; color: var(--acento-texto); white-space: nowrap; }
.precio.gratis { font-weight: 600; opacity: .8; }
.precio.en-pedido { color: var(--acento-texto); }
.btn .precio { margin-left: 4px; font-size: .9em; }
.ejemplos-ia { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.ejemplos-ia .chip { font-size: 12px; padding: 4px 10px; }
.precio-nota { margin: -4px 0 8px; }
.resumen-detalle .r-cobro { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--borde, rgba(127,127,127,.25)); }
.resumen-detalle .r-nota { margin: 6px 0 0; font-size: 12px; color: var(--tinta-suave); }

/* Quitar fondo con IA a pedido */
.fondo-texto { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: var(--radio); }
.fondo-texto summary { cursor: pointer; font-weight: 600; }
.fondo-texto textarea { width: 100%; margin: 6px 0; resize: vertical; font: inherit; padding: 8px; border-radius: var(--radio-chico); border: 1px solid var(--borde); background: var(--superficie); color: var(--tinta); }
.vista-previa-ia { position: relative; overflow: hidden; }
.vista-previa-ia img { background-image: conic-gradient(#e7e9ee 25%, #fff 0 50%, #e7e9ee 0 75%, #fff 0); background-size: 16px 16px; }
.vista-previa-ia::after { content: "VISTA PREVIA"; position: absolute; inset: 0 0 24px; display: grid; place-items: center; font-weight: 800; font-size: 26px; letter-spacing: .08em; color: rgba(0,0,0,.2); transform: rotate(-20deg); pointer-events: none; }

/* "Mejorar mi imagen": el cartel no atrapa el mouse (se puede mover y acercar la vista, arrastrar o pegar la imagen) */
.imagen-vacia { pointer-events: none; }
.imagen-vacia button, .imagen-vacia a { pointer-events: auto; }
.pasos-imagen { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 8px; color: var(--tinta-suave); }

/* Control "no soy un robot": invisible salvo que Cloudflare dude; entonces aparece abajo, centrado */
#control-humano { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 400; display: none; }
#control-humano.visible { display: block; }

/* Pago: con una sola forma de entrega (el archivo) no se pregunta, se informa */
.entrega-archivo { margin: 4px 0 6px; padding: 10px 12px; border-radius: var(--radio); background: var(--acento-suave); font-size: 14px; }

/* "Mejorar mi imagen": nunca el cartel del pliego vacío; y sin imagen cargada, solo la zona para soltarla (sin pliego ni reglas) */
.modo-imagen #vacio { display: none !important; }
.modo-imagen.imagen-sin-cargar .lienzo-caja, .modo-imagen.imagen-sin-cargar .regla, .modo-imagen.imagen-sin-cargar .regla-esquina,
.modo-imagen.imagen-sin-cargar .zoom, .modo-imagen.imagen-sin-cargar #zoom { visibility: hidden; }

/* Barra de avance de la IA: abajo al centro, sobre todo, sin tapar el trabajo */
.progreso-ia { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 350;
  width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border-radius: var(--radio); background: var(--superficie); color: var(--tinta);
  box-shadow: var(--sombra-alta); display: grid; gap: 8px; font-size: 14px; font-weight: 600; }
.progreso-ia small { font-weight: 400; color: var(--tinta-suave); font-size: 12px; }
.progreso-ia-barra { height: 8px; border-radius: 999px; background: var(--superficie-3, #e7e9ee); overflow: hidden; }
.progreso-ia-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--acento); transition: width .2s linear; }
@media (prefers-reduced-motion: reduce) { .progreso-ia-barra i { transition: none; } }

summary .precio, .panel-titulo .precio { margin-left: 6px; font-size: 12px; }

/* Cambios en esta imagen: qué se le hizo, cada uno con "Quitar" */
.lista-cambios { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
.lista-cambios li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.lista-cambios li span { min-width: 0; }
.cambios-vacio { margin: 0 0 6px; }

/* Orden: la etiqueta de precio siempre en el mismo lugar */
details.grupo summary .precio { margin-left: auto; margin-right: 10px; flex: none; }
.accion { justify-content: flex-start; height: 100%; }
.accion small { line-height: 1.45; }
.accion .accion-precio { margin-top: auto; padding-top: 6px; font-size: 13px; }
.acciones-rapidas > .accion:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Quitar el fondo: tres filas iguales (para qué sirve · precio · botón) */
.quitar-fondo { display: grid; gap: 0; margin-bottom: 10px; border: 1px solid var(--borde); border-radius: var(--radio); padding: 4px 12px; }
.quitar-fondo h4 { margin: 8px 0 2px; font-size: 14px; }
.fila-fondo, .quitar-fondo .fondo-texto > summary { display: grid; grid-template-columns: 1fr 74px 64px; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--borde); }
.quitar-fondo .fondo-texto { border: 0; padding: 0; margin: 0; }
.quitar-fondo .fondo-texto > summary { list-style: none; grid-template-columns: 1fr 74px 64px; }
.quitar-fondo .fondo-texto > summary::-webkit-details-marker { display: none; }
.fila-fondo-texto { display: grid; gap: 1px; min-width: 0; }
.fila-fondo-texto b { font-size: 14px; }
.fila-fondo-texto small { color: var(--tinta-suave); font-size: 12px; font-weight: 400; }
.fila-fondo-precio { text-align: right; font-size: 13px; }
.fila-fondo .btn { width: 100%; }
.fila-fondo .btn.hecha { border-color: var(--acento); color: var(--acento-texto); }


/* Listas con tres columnas fijas: qué es · precio (siempre en la misma columna) · botón */
.fila-tres { list-style: none; margin: 4px 0 8px; padding: 0; display: grid; gap: 0; }
.fila-tres li { display: grid; grid-template-columns: minmax(0, 1fr) 76px auto; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.fila-tres li:last-child { border-bottom: 0; }
.fila-tres .col-precio { text-align: right; font-size: 13px; }
.fila-tres .btn { justify-self: end; min-width: 76px; }
.lista-cambios.fila-tres li { display: grid; justify-content: initial; }

/* Renglones de opciones: los botones Usar / Hecho todos del mismo tamaño, en la misma columna */
.fila-fondo .btn, .quitar-fondo .abrir-ia { width: 100%; min-width: 0; text-align: center; justify-content: center; }
.fila-fondo .btn[disabled] { opacity: .45; cursor: default; }
.fila-fondo-texto .hoy-queda { color: var(--tinta); opacity: .85; margin-top: 2px; }
.quitar-fondo + .quitar-fondo { margin-top: 10px; }

/* Mientras se trae lo guardado: "Cargando…" en vez del cartel de pliego vacío (evita el destello) */
.cargando-proyecto #vacio, .cargando-proyecto #imagen-vacia { display: none !important; }
.cargando-proyecto .mesa::after { content: "Cargando tu pliego…"; position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content;
  padding: 10px 16px; border-radius: 999px; background: var(--superficie); color: var(--tinta-suave); font-size: 14px; box-shadow: var(--sombra-alta); z-index: 20; pointer-events: none; }
.cargando-proyecto.modo-imagen .mesa::after { content: "Cargando…"; }

/* Renglón de opción, en todo el panel: texto a lo ancho arriba; abajo, precio a la izquierda y botón a la derecha */
.fila-fondo, .quitar-fondo .fondo-texto > summary { display: grid !important; grid-template-columns: 1fr; gap: 6px; padding: 10px 0; border-top: 1px solid var(--borde); }
.fila-pie { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.fila-pie .fila-fondo-precio { text-align: left; font-size: 14px; }
.fila-pie .btn, .fila-pie .abrir-ia { width: auto; min-width: 96px; text-align: center; justify-content: center; }
.no-hace-falta { margin-left: auto; font-size: 13px; color: var(--tinta-suave); }
.lista-cambios .fila-fondo:first-child { border-top: 0; }
.fila-fondo-texto small { line-height: 1.45; }

/* Panel de la imagen dividido en partes bien marcadas: una franja gris separa cada parte grande */
.panel-contexto .grupo.seccion { border-top: 8px solid var(--superficie-2); margin: 6px -16px 0; padding-left: 16px; padding-right: 16px; }
.panel-contexto .grupo.seccion > h3 { font-size: 16px; margin-bottom: 6px; }
.panel-contexto .seccion-solo-titulo { padding-bottom: 2px; }
.panel-contexto .seccion-solo-titulo + .grupo { border-top: 0; }
/* Lo que ya le hiciste: recuadro con el color de la marca, renglones de una línea */
.bloque-hecho { margin: 4px 0 14px; padding: 10px 12px; border-radius: var(--radio); background: var(--acento-suave); border-left: 3px solid var(--acento); }
.bloque-hecho.sin-cambios { background: var(--superficie-2); border-color: var(--borde); }
.bloque-hecho h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; }
.bloque-hecho .cuenta { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-size: 12px; display: inline-grid; place-items: center; }
.bloque-hecho .nota { margin: 0; }
.bloque-hecho .lista-cambios { margin: 0 0 8px; gap: 0; }
.bloque-hecho .lista-cambios .fila-fondo { grid-template-columns: minmax(0, 1fr) auto !important; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--borde); border-top-color: color-mix(in srgb, var(--acento) 22%, transparent); }
.bloque-hecho .lista-cambios .fila-fondo:first-child { border-top: 0; }
.bloque-hecho .fila-fondo-texto b { font-weight: 500; font-size: 14px; }
.bloque-hecho .fila-pie { min-height: 0; gap: 10px; }
.bloque-hecho .fila-pie .btn { min-width: 0; background: var(--superficie); }
.bloque-hecho .botonera { margin: 0; }
.bloque-hecho .botonera .btn { background: var(--superficie); }
/* Subrecuadros de "Mejorar la imagen" (Quitar el fondo, Arreglos): título en franja propia */
.quitar-fondo { padding: 0 12px 4px; overflow: hidden; }
.quitar-fondo h4 { margin: 0 -12px; padding: 8px 12px; background: var(--superficie-2); font-size: 14px; }
.quitar-fondo h4 + .fila-fondo { border-top: 0; }
/* El precio de "Con IA, diciendo qué conservar" va igual que los demás renglones (sin la sangría de los títulos desplegables) */
.quitar-fondo .fondo-texto > summary .fila-pie .precio { margin-left: 0; font-size: inherit; }
.panel-contexto .grupo.seccion > h3 { font-weight: 700; }

/* Cuenta corta al pie de "Lo que ya le hiciste" (el detalle completo está solo en "Tu pedido") */
.suma-imagen { margin: 2px 0 10px; padding-top: 8px; border-top: 1px solid var(--borde); border-top-color: color-mix(in srgb, var(--acento) 35%, transparent); display: grid; gap: 2px; font-size: 14px; }
.suma-imagen > div { display: flex; justify-content: space-between; gap: 10px; }
.suma-imagen b { color: var(--acento-texto); white-space: nowrap; }
.suma-imagen p { margin: 4px 0 0; font-size: 12.5px; color: var(--tinta-suave); line-height: 1.4; }
.enlace { padding: 0; border: 0; background: none; color: var(--acento-texto); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* "Tu pedido" en la barra (sin nada elegido): una línea por cobro y cada imagen desplegable */
.pedido-panel { display: grid; gap: 0; font-size: 14px; }
.pedido-linea, .pedido-imagen > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 8px 0; border-top: 1px solid var(--borde); }
.pedido-panel > :first-child { border-top: 0; }
.pedido-linea b, .pedido-imagen > summary > b { color: var(--acento-texto); white-space: nowrap; }
.pedido-linea.total { font-size: 16px; font-weight: 700; border-top: 2px solid var(--tinta-suave); }
.pedido-imagen > summary { list-style: none; cursor: pointer; }
.pedido-imagen > summary::-webkit-details-marker { display: none; }
.pedido-nombre { min-width: 0; overflow-wrap: anywhere; }
.pedido-nombre::before { content: "+"; display: inline-block; width: 16px; color: var(--tinta-suave); }
.pedido-imagen[open] .pedido-nombre::before { content: "–"; }
.pedido-nombre small { color: var(--tinta-suave); font-weight: 400; }
.pedido-imagen ul { list-style: none; margin: 0 0 6px 16px; padding: 8px 10px; border-radius: var(--radio-chico); background: var(--superficie-2); display: grid; gap: 4px; font-size: 13px; }
.pedido-imagen li { display: flex; justify-content: space-between; gap: 10px; }
.pedido-imagen .nota { margin: 0 0 6px 16px; }
.pedido-imagen .enlace { margin: 0 0 8px 16px; font-size: 13px; }
.pedido-panel > .nota { margin: 8px 0 0; }

.grupo.seccion > h3 .titulo-dato { margin-left: 6px; font-size: 13px; font-weight: 500; color: var(--tinta-suave); }
/* En "Lo que ya le hiciste" el nombre nunca se achica por debajo de lo legible (antes se encimaba con el precio) */
.bloque-hecho .lista-cambios .fila-fondo { grid-template-columns: minmax(96px, 1fr) auto !important; }
.bloque-hecho .fila-fondo-texto b { overflow-wrap: anywhere; }

/* Renglón ya hecho: "Hecho" + "Quitar" a la derecha, en el mismo lugar que el botón "Usar" */
.fila-acciones { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; }
.hecho-marca { font-size: 13px; font-weight: 600; color: var(--acento-texto); }

.ver-sobre .segmentado { margin-bottom: 6px; }
.ver-sobre .nota { margin: 4px 0 0; }

/* Cada recuadro de la barra, bien encerrado: borde entero (no solo a la izquierda) y aire entre uno y otro */
.bloque-hecho { border: 1px solid var(--acento); border-left-width: 1px; }
.paquete-imagen { margin-bottom: 12px; }
.panel-contexto .paquete-imagen + .bloque-hecho, .panel-contexto .grupo + .bloque-hecho { margin-top: 12px; }
.quitar-fondo { border-color: var(--borde); }
/* Nombres largos ("Sin semitransparencias") cortan con guion y no a la mitad de una letra */
.bloque-hecho .fila-fondo-texto b { overflow-wrap: break-word; hyphens: auto; }

/* Si el precio y los botones no entran en una línea, los botones bajan (nunca se cortan) */
.fila-pie { flex-wrap: wrap; row-gap: 6px; }

/* "Mejorar mi imagen": barrita "Ver sobre" arriba de la imagen */
.vista-flotante { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 2px; padding: 4px;
  border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra); font-size: 13px; white-space: nowrap; }
.vista-flotante > span { padding: 0 8px 0 6px; color: var(--tinta-suave); }
.vista-flotante button { height: 32px; padding: 0 10px; border: 0; border-radius: var(--radio-chico); background: transparent; color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; }
.vista-flotante button:hover { background: var(--superficie-2); }
.vista-flotante button[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); }
.vista-flotante input[type="color"] { width: 32px; height: 32px; padding: 2px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); cursor: pointer; }
.modo-imagen.imagen-sin-cargar .vista-flotante { visibility: hidden; }
@media (max-width: 480px) { .vista-flotante > span { display: none; } .vista-flotante button { padding: 0 8px; } }
/* Botón "Imágenes": solo la cajita y el número (las miniaturas asomando se veían como una mancha) */
.riel-baul .baul-minis, .riel-baul.con-imagenes .baul-minis { display: none; }
/* La barrita "Ver sobre" va arriba a la izquierda: arriba al centro salen los avisos y se pisaban */
.vista-flotante { left: 40px; transform: none; }
body[data-reglas="no"] .vista-flotante { left: 12px; }
@media (max-width: 860px) { .vista-flotante { left: 8px; top: 8px; } }

/* Nombre de la imagen: con su rótulo y entero (los nombres largos de archivo cortan línea en vez de salirse) */
.panel-rotulo { margin: 0 0 2px; font-size: 12.5px; color: var(--tinta-suave); }
.panel-nombre { display: block; overflow-wrap: anywhere; }

/* Consejo de la revisión: la opción sugerida late dos veces para que se vea cuál es */
.resaltar { position: relative; border-radius: var(--radio-chico); animation: palpito 1.2s ease-out 2; }
@keyframes palpito {
  0% { background: var(--acento-suave); box-shadow: 0 0 0 0 var(--acento); }
  70% { background: var(--acento-suave); box-shadow: 0 0 0 8px transparent; }
  100% { background: transparent; box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .resaltar { animation: none; outline: 2px solid var(--acento); outline-offset: 2px; } }

/* Mis trabajos */
.modo-imagen #btn-trabajos { display: none !important; }
.trabajo-guardar { display: grid; gap: 6px; margin: 4px 0 14px; }
.trabajo-guardar label { font-weight: 600; font-size: 14px; }
.trabajo-fila { display: flex; gap: 8px; }
.trabajo-fila input { flex: 1; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--borde); border-radius: var(--radio-chico); background: var(--superficie); color: var(--tinta); font: inherit; }
.trabajo-guardar .enlace { justify-self: start; font-size: 13px; }
.trabajos-titulo { margin: 4px 0 8px; font-size: 15px; }
.trabajos-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 48vh; overflow-y: auto; }
.trabajos-lista li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 8px; border: 1px solid var(--borde); border-radius: var(--radio-chico); }
.trabajos-lista img, .trabajo-sin-mini { grid-row: span 2; width: 72px; height: 54px; object-fit: cover; border-radius: 4px; background: var(--superficie-3); }
.trabajo-datos { min-width: 0; display: grid; }
.trabajo-datos b { overflow-wrap: anywhere; }
.trabajo-datos small { color: var(--tinta-suave); font-size: 12.5px; }
.trabajo-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.trabajo-pregunta { font-size: 13px; font-weight: 600; }
@media (max-width: 860px) { #btn-trabajos span { display: none; } }

/* Aviso de calidad con su sugerencia */
.semaforo > div { min-width: 0; }
.semaforo-sugerencia { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.semaforo-sugerencia .btn { background: var(--superficie); }
.semaforo-sugerencia .enlace { font-size: 13px; }
/* "Recuperar lo borrado / Borrar restos" dentro del recuadro "Quitar el fondo" */
.quitar-fondo .retoque-fondo { margin: 6px 0 8px; }

/* Imágenes: sin arrastrarlas afuera ni el menú de "guardar" al mantener apretado en el celular */
img, canvas { -webkit-user-drag: none; -webkit-touch-callout: none; }
img { user-select: none; -webkit-user-select: none; }

/* Calidad baja: las dos salidas como botones iguales, cada una con su resultado y su precio */
.semaforo-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.opcion-calidad { display: grid; gap: 2px; justify-items: start; text-align: left; padding: 8px 10px; border: 1px solid var(--borde); border-radius: var(--radio-chico);
  background: var(--superficie); color: var(--tinta); font: inherit; cursor: pointer; }
.opcion-calidad:hover { border-color: var(--acento); }
.opcion-calidad b { font-size: 13.5px; }
.opcion-calidad small { font-size: 12px; color: var(--tinta-suave); }
.opcion-calidad .precio { font-size: 13px; margin-top: 2px; }

/* "Cambios aplicados" compacto: nombre + Deshacer, una línea de cobro si suma algo, "Ver original" al lado del título */
details.bloque-hecho > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
details.bloque-hecho > summary::-webkit-details-marker { display: none; }
.bloque-hecho .bloque-titulo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.bloque-hecho .ver-original { min-width: 0; padding: 0 10px; height: 28px; font-size: 12.5px; background: var(--superficie); }
details.bloque-hecho[open] > summary { margin-bottom: 6px; }
.bloque-hecho .lista-cambios { display: grid; gap: 0; margin: 0; }
.bloque-hecho .cambio { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; border-top: 1px solid color-mix(in srgb, var(--acento) 22%, transparent); }
.bloque-hecho .cambio:first-child { border-top: 0; }
.bloque-hecho .cambio span { min-width: 0; overflow-wrap: anywhere; }
.bloque-hecho .cambio .enlace { flex: none; font-size: 13px; }
.bloque-hecho .suma-imagen { display: block; margin: 6px 0 0; padding-top: 6px; font-size: 13.5px; color: var(--tinta-suave); }
.bloque-hecho .suma-imagen b { color: var(--acento-texto); }

/* Controles del pincel (tamaño y fuerza) */
.controles-pincel { display: grid; gap: 6px; }
.controles-pincel .fila { margin-bottom: 0; }
.controles-pincel .fila > label { flex: 0 0 64px; }
.controles-pincel input[type="range"] { flex: 1; min-width: 0; }
.controles-pincel output { flex: 0 0 52px; text-align: right; font-size: 13px; color: var(--tinta-suave); }
.controles-pincel .nota { margin: 0; font-size: 12.5px; }
.retoque-fondo > .nota { margin: 0; font-size: 12.5px; }

/* Tipografía: botón con la letra actual + panel flotante (como Canva) */
.selector-fuente { position: relative; display: grid; gap: 6px; }
.fuente-actual { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--borde);
  border-radius: var(--radio-chico); background: var(--superficie); color: var(--tinta); font-size: 18px; cursor: pointer; text-align: left; }
.fuente-actual:hover { border-color: var(--acento); }
.fuente-actual span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fuente-actual svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fuente-actual[aria-expanded="true"] svg { transform: rotate(180deg); }
.fuente-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--superficie); box-shadow: var(--sombra-alta); }
.fuente-menu[hidden] { display: none; }
.fuente-menu .lista-fuentes { max-height: 320px; }
.fuente-item:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

/* Nombre del trabajo abierto, en la barra de arriba */
.trabajo-actual { max-width: 220px; height: calc(32px * var(--esp)); margin-left: 6px; padding: 0 10px; border: 1px solid var(--acento); border-radius: 999px;
  background: var(--acento-suave); color: var(--tinta); font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.trabajo-actual[hidden] { display: none; }
@media (max-width: 860px) { .trabajo-actual { max-width: 120px; } }

/* Cambiar una parte con IA */
.cambio-ia .cambio-paso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; font-size: 13.5px; }
.cambio-ia .cambio-paso .btn[aria-pressed="true"] { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }

/* "Quitar con IA": el segundo precio (con texto) más chico, al lado */
.precio-alt { font-size: 12px; color: var(--tinta-suave); font-weight: 500; white-space: nowrap; }
.precio-alt .precio { font-size: 12px; }
/* "Arreglos rápidos" debajo del título "Más herramientas" */
.panel-contexto .arreglos-rapidos { margin: 4px 0 6px; }

/* "Pedazos sueltos" (después de quitar el fondo): cuánto limpiar */
.fila-sueltos { display: grid; gap: 4px; padding: 10px 0 2px; border-top: 1px solid var(--borde); margin-top: 6px; }
.fila-sueltos small { color: var(--tinta-suave); }
.opciones-sueltos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

/* Retoque a mano plegable: "Está todo bien" lo cierra; "Retocar a mano" lo abre */
.retoque-plegable { margin: 6px 0 8px; }
.retoque-plegable > summary { cursor: pointer; padding: 6px 0; font-weight: 600; font-size: 13.5px; }
.retoque-plegable > summary small { font-weight: 400; color: var(--tinta-suave); margin-left: 4px; }
.retoque-plegable[open] > summary { margin-bottom: 4px; }
.retoque-plegable .retoque-fondo { margin: 0; }
.retoque-fondo [data-retoque-ok] { justify-self: start; }

/* Consejo de "Editar con IA" (evita rechazos de la IA por nombres de famosos o marcas) */
.consejo-ia { margin: 6px 0 0; padding: 6px 10px; border-left: 3px solid var(--acento); background: var(--acento-suave); border-radius: 0 var(--radio-chico) var(--radio-chico) 0; font-size: 12.5px; }