/* ═══════════════════════════════════════
   MÓDULO CAJAS — estilos propios
   ═══════════════════════════════════════ */
/* Layout dos columnas cajas */
.cajas-layout{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}

/* Selector de plantilla */
.plantillas-grid{display:flex;flex-direction:column;gap:6px}
.plantilla-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:all .12s}
.plantilla-item:hover{border-color:var(--green);background:var(--green-light)}
.plantilla-item.activa{border-color:var(--green);background:var(--green-light)}
.plantilla-item-icono{font-size:20px;flex-shrink:0}
.plantilla-item-info{flex:1;min-width:0}
.plantilla-item-nombre{font-size:13px;font-weight:600;color:var(--text)}
.plantilla-item-dim{font-size:11px;color:var(--text3)}
.plantilla-badge{font-size:10px;padding:1px 6px;border-radius:99px;background:var(--green-light);color:var(--green);font-weight:600;flex-shrink:0}

/* Selector encargo */
.enc-seleccionado{background:var(--green-light);border:1px solid #b8ddc5;border-radius:var(--radius-sm);padding:10px 12px;font-size:12px;margin-top:8px;display:none}
.enc-seleccionado.visible{display:block}
.enc-sel-fila{display:flex;gap:6px;margin-bottom:3px}
.enc-sel-campo{color:var(--text3);min-width:70px;font-size:11px}
.enc-sel-valor{font-weight:600;color:var(--text);font-size:11px}

/* Troquel visual */
.troquel-zona{background:#f0f0f0;border-radius:var(--radius);padding:12px;overflow-x:auto;min-height:220px;position:relative}
.troquel-svg-wrap{position:relative;margin:0 auto}

/* Cara interactiva del troquel */
.cara-box{position:absolute;cursor:pointer;transition:all .15s;overflow:hidden}
.cara-box:hover{filter:brightness(0.93)}
.cara-box.seleccionada{outline:2px solid var(--green);outline-offset:1px}
.cara-nombre-mini{position:absolute;bottom:2px;right:3px;font-size:7px;font-weight:700;color:rgba(44,110,73,0.6);text-transform:uppercase;letter-spacing:0.3px;pointer-events:none}
.cara-texto-mini{position:absolute;top:3px;left:3px;right:3px;font-size:7px;line-height:1.25;color:#1a2a1a;pointer-events:none;overflow:hidden}

/* Grid info caras */
.caras-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cara-info-card{border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:10px;cursor:pointer;transition:all .12s}
.cara-info-card:hover{border-color:var(--green);background:var(--green-light)}
.cara-info-card.seleccionada{border-color:var(--green);background:var(--green-light)}
.cara-info-nombre{font-size:12px;font-weight:700;margin-bottom:2px}
.cara-info-dim{font-size:10px;color:var(--text3);margin-bottom:4px}
.cara-info-tag{display:inline-block;font-size:9px;padding:1px 5px;border-radius:99px;background:var(--green-light);color:var(--green);font-weight:600;margin:1px}

/* Editor de cara */
.cara-editor{border-top:1px solid var(--border);padding:16px;display:none}
.cara-editor.visible{display:block}
.cara-editor-titulo{font-size:13px;font-weight:600;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.cara-editor-badge{background:var(--green);color:#fff;padding:2px 8px;border-radius:99px;font-size:11px}

/* Validación tamaño en modal */
.caja-calc{padding:8px 10px;border-radius:var(--radius-sm);font-size:12px;margin-top:8px;display:none}
.caja-calc.ok{background:var(--green-light);border:1px solid #b8ddc5;color:var(--green);display:block}
.caja-calc.nok{background:var(--red-light);border:1px solid #f5c6c6;color:var(--red);display:block}

/* Notificación toast */
#toast{position:fixed;bottom:20px;right:20px;background:var(--green);color:#fff;padding:10px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;box-shadow:var(--shadow-md);transform:translateY(80px);transition:transform .25s;z-index:9000;pointer-events:none}
#toast.show{transform:translateY(0)}