/* ══ Runoff skin (2026-07-27) — identidad visual propia sobre el motor heredado ══
   Se carga la ÚLTIMA (después de base.css y canva.css) y reescribe el look de
   los paneles: plano tipo Photoshop, sin degradados/morados/dashed de la app
   original, acento rojo Runoff. Cualquier divergencia visual nueva va AQUÍ —
   así la identidad queda separada del motor y no se mezclan lenguajes. */

/* ── Cabeceras de panel: micro-etiqueta plana en mayúsculas, sin icono ── */
.panel-section-title{background:transparent;border-bottom:1px solid var(--n-border);font-size:11px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;color:var(--n-text);padding:12px;margin:-12px -12px 12px;gap:0}
.panel-section-title svg{display:none}
.sec-header,.tp-section-title,.el2-section-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--n-text-muted)}

/* ── Botón primario del panel Text: plano, rojo Runoff (era gradiente morado) ── */
.tp-add-box{background:var(--n-primary);border-radius:4px;font-size:12px;font-weight:600;padding:9px 10px}
.tp-add-box:hover{background:var(--n-primary-hover);filter:none}

/* ── Presets de texto: filas planas compactas ── */
.tp-preset{background:var(--n-bg-elevated);border:1px solid var(--n-border);border-radius:4px;box-shadow:none}
.tp-preset:hover{background:var(--n-bg-hover);border-color:var(--n-border-hover)}

/* ── Cards de placeholders ── */
.el2-bullet-card{background:var(--n-bg-elevated);border:1px solid var(--n-border);border-radius:4px;box-shadow:none}
.el2-bullet-card:hover{background:var(--n-bg-hover);border-color:var(--n-primary)}
.el2-bullet-name{font-size:10px;color:var(--n-text-muted)}

/* ── Cards de paper size: filas planas, id en rojo de marca ── */
.tpl-card-row{background:var(--n-bg-elevated);border:1px solid var(--n-border);border-radius:4px;padding:8px 10px;box-shadow:none}
.tpl-card-row:hover{background:var(--n-bg-hover)}
.tpl-card-row.active{border-color:var(--n-primary);box-shadow:none;background:var(--n-bg-hover)}
.tpl-card-name{font-size:11px}
.tpl-card-id{color:var(--n-primary);font-weight:700;letter-spacing:.4px}
.tpl-card-desc{font-size:10px;color:var(--n-text-dim)}

/* ── Dropzones: borde sólido fino (fuera el dashed de la app original) ── */
.pdrop{border:1px solid var(--n-border);border-radius:4px;background:var(--n-bg-input)}
.pdrop:hover{border-color:var(--n-primary);background:var(--n-bg-hover)}
.pdrop.is-dropping{border-color:var(--n-primary);background:var(--n-bg-hover)}

/* ── Inputs / textareas planos ── */
.panel textarea,.panel input[type=text],.panel input[type=number],.panel select,.vinput{background:var(--n-bg-input);border:1px solid var(--n-border);border-radius:4px;color:var(--n-text)}
.panel textarea:focus,.panel input:focus{border-color:var(--n-border-active);outline:none}

/* ── Sliders estilo Photoshop: pista fina + thumb cuadrado. Los sliders de
   ajustes de imagen (adj-*) conservan sus pistas de gradiente propias. ── */
.panel input[type=range]:not([class*="adj-"]){-webkit-appearance:none;appearance:none;height:2px;background:var(--n-border-hover);border-radius:0}
.panel input[type=range]:not([class*="adj-"])::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:2px;background:var(--n-text-bright);border:none;cursor:pointer}
.panel input[type=range]:not([class*="adj-"])::-moz-range-thumb{width:11px;height:11px;border-radius:2px;background:var(--n-text-bright);border:none;cursor:pointer}

/* ── Botones genéricos del panel: esquina PS ── */
.panel button{border-radius:4px}

/* ── Selector de pedidos en fase de print (top bar) ── */
.order-switch-trigger{cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;transition:background .15s}
.order-switch-trigger:hover{background:var(--n-bg-hover)}
.order-switch-caret{font-size:9px;color:var(--n-text-muted)}
.order-pop{position:fixed;z-index:200;min-width:360px;max-height:60vh;overflow-y:auto;background:var(--n-bg-elevated);border:1px solid var(--n-border);border-radius:6px;box-shadow:0 10px 32px rgba(0,0,0,.5);padding:4px}
.order-pop-hint{padding:12px;font-size:11px;color:var(--n-text-muted)}
.order-pop-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 10px;border-radius:4px;text-decoration:none;color:var(--n-text);font-size:12px}
.order-pop-row:hover{background:var(--n-bg-hover)}
.order-pop-row.is-current{box-shadow:inset 2px 0 0 var(--n-primary);background:var(--n-bg-hover)}
.order-pop-main{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.order-pop-state{font-size:10px;color:var(--n-text-muted);white-space:nowrap}
.order-pop-thumb{width:64px;height:44px;flex-shrink:0;border-radius:3px;overflow:hidden;background:var(--n-bg-input);border:1px solid var(--n-border);display:flex;align-items:center;justify-content:center}
.order-pop-thumb img{width:100%;height:100%;object-fit:contain}
.order-pop-main{flex:1;min-width:0}

/* ── Botón Export (top bar) — plano, sin caret ni popover ── */
.export-btn-runoff{display:inline-flex;align-items:center;gap:8px;background:var(--n-primary);color:#fff;border:none;border-radius:4px;padding:8px 16px;font-size:12px;font-weight:600;letter-spacing:.4px;cursor:pointer;font-family:inherit;transition:background .15s}
.export-btn-runoff:hover{background:var(--n-primary-hover)}

/* ── Modal de export ── */
.exp-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center}
.exp-modal{width:380px;max-width:calc(100vw - 40px);background:var(--n-bg-card);border:1px solid var(--n-border);border-radius:6px;box-shadow:0 18px 50px rgba(0,0,0,.6)}
.exp-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--n-border);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.7px;color:var(--n-text)}
.exp-close{background:none;border:none;color:var(--n-text-muted);cursor:pointer;font-size:14px}
.exp-close:hover{color:var(--n-text)}
.exp-body{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.exp-hint{font-size:10px;color:var(--n-text-dim);margin-bottom:4px}
.exp-row{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--n-border);border-radius:4px;background:var(--n-bg-elevated);cursor:pointer;transition:background .15s,border-color .15s}
.exp-row:hover{background:var(--n-bg-hover);border-color:var(--n-border-hover)}
.exp-row input{accent-color:var(--n-primary);width:14px;height:14px;cursor:pointer}
.exp-fmt{font-size:12px;font-weight:700;min-width:36px}
.exp-fmt-hint{font-size:10px;color:var(--n-text-muted)}
.exp-status{font-size:11px;color:var(--n-text-muted);min-height:14px;margin-top:4px}
.exp-links{display:flex;gap:10px;flex-wrap:wrap}
.exp-link{color:var(--n-primary);font-size:12px;font-weight:600;text-decoration:none;padding:6px 10px;border:1px solid var(--n-border);border-radius:4px}
.exp-link:hover{background:var(--n-bg-hover);border-color:var(--n-primary)}
.exp-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 14px;border-top:1px solid var(--n-border)}
.exp-cancel{background:var(--n-bg-elevated);border:1px solid var(--n-border);color:var(--n-text);border-radius:4px;padding:7px 14px;font-size:12px;cursor:pointer;font-family:inherit}
.exp-cancel:hover{background:var(--n-bg-hover)}
.exp-go{background:var(--n-primary);border:none;color:#fff;border-radius:4px;padding:7px 16px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}
.exp-go:hover{background:var(--n-primary-hover)}
.exp-go:disabled{opacity:.55;cursor:default}